Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar Flare: Escape the Storm</title>
    <style>
        body {
            background-color: #0f172a;
            color: #e2e8f0;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #game-container {
            background-color: #1e293b;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            max-width: 600px;
            width: 100%;
        }
        h1 {
            color: #38bdf8;
            margin-top: 0;
            text-align: center;
            border-bottom: 2px solid #334155;
            padding-bottom: 10px;
        }
        #story-text {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
            min-height: 120px;
        }
        .btn-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        button {
            background-color: #334155;
            color: #f8fafc;
            border: 1px solid #475569;
            padding: 12px;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s;
        }
        button:hover {
            background-color: #38bdf8;
            color: #0f172a;
            border-color: #38bdf8;
        }
    </style>
</head>
<body>

<div id="game-container">
    <h1>SOLAR FLARE</h1>
    <div id="story-text">Loading mainframes...</div>
    <div id="choices" class="btn-container"></div>
</div>

<script>
    const storyText = document.getElementById('story-text');
    const choicesContainer = document.getElementById('choices');

    // Game State
    let state = {};

    const storyNodes = {
        start: {
            text: "Alarms blare. The ship's AI voice echoes: 'WARNING. Massive solar flare approaching. Shields at 10%. En route to total systems failure in 3 minutes.' You are in the command pod. What do you do?",
            choices: [
                { text: "Reroute power to auxiliary shields from the Engine Room.", nextNode: 'engineRoom' },
                { text: "Attempt to override the AI from the Main Console.", nextNode: 'mainConsole' }
            ]
        },
        engineRoom: {
            text: "You sprint to the Engine Room. Sparks fly from the conduits. To reroute power, you must manually bypass the safety lock, but the lever is blazing hot.",
            choices: [
                { text: "Use your heavy flight jacket to grab the lever.", nextNode: 'shieldsRestored' },
                { text: "Look around for a tool or fire extinguisher.", nextNode: 'findTool' }
            ]
        },
        mainConsole: {
            text: "You smash your fingers into the Main Console. The AI locks you out: 'Override denied. Protocol 9 requires a physical encryption key.' You remember leaving the key in your crew quarters.",
            choices: [
                { text: "Run to the crew quarters to grab the key.", nextNode: 'quarters' },
                { text: "Abandon the override and sprint to the escape pods.", nextNode: 'escapePodsFail' }
            ]
        },
        findTool: {
            text: "You waste precious seconds looking for a tool. A secondary power surge blasts through the deck. You ran out of time.",
            choices: [
                { text: "Try Again", nextNode: 'start' }
            ]
        },
        shieldsRestored: {
            text: "Success! Using your jacket, you throw the heavy lever. Power surges into the auxiliary shields just as the solar wave hits. The ship rattles violently, but holds. You survived!",
            choices: [
                { text: "Play Again", nextNode: 'start' }
            ]
        },
        quarters: {
            text: "You grab the physical encryption key from your desk and sprint back to the console. The timer reads 20 seconds. You plug it in and initiate the override. The AI shuts down, and the shields automatically stabilize. You made it!",
            choices: [
                { text: "Play Again", nextNode: 'start' }
            ]
        },
        escapePodsFail: {
            text: "You dive into an escape pod and hit launch. 'ERROR: Launch bays locked down due to solar radiation.' The flare hits the ship before you can get out. Game over.",
            choices: [
                { text: "Try Again", nextNode: 'start' }
            ]
        }
    };

    function startGame() {
        state = {};
        showNode('start');
    }

    function showNode(nodeIndex) {
        const node = storyNodes[nodeIndex];
        storyText.innerText = node.text;

        // Clear previous choices
        while (choicesContainer.firstChild) {
            choicesContainer.removeChild(choicesContainer.firstChild);
        }

        // Add new choices
        node.choices.forEach(choice => {
            const button = document.createElement('button');
            button.innerText = choice.text;
            button.addEventListener('click', () => showNode(choice.nextNode));
            choicesContainer.appendChild(button);
        });
    }

    // Start the game on load
    startGame();
</script>

</body>
</html>
Editor is loading...