path: root/html/rogue/js/rogue.js

window.gameState = null;

const initGame = () => {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // Set canvas to full viewport size
    const resizeCanvas = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    };

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    // Game state
    let gameState = {
        time: 0,
        player: createPlayer(100, 100), // Starting position
        camera: createCamera(0, 0),
        world: createWorld()
    };
    
    // Make gameState globally accessible
    window.gameState = gameState;

    // Game loop
    const gameLoop = (timestamp) => {
        // Calculate delta time
        const deltaTime = timestamp - gameState.time;
        gameState.time = timestamp;

        // Update
        gameState = updateGame(gameState, deltaTime);

        // Render
        render(ctx, gameState);

        // Next frame
        requestAnimationFrame(gameLoop);
    };

    // Start the game loop
    requestAnimationFrame(gameLoop);
};

const updateGame = (state, deltaTime) => {
    const updatedPlayer = updatePlayer(state.player, deltaTime);
    const updatedCamera = updateCamera(state.camera, updatedPlayer);

    return {
        ...state,
        player: updatedPlayer,
        camera: updatedCamera
    };
};

const render = (ctx, state) => {
    // Create gradient for sky
    const groundY = ctx.canvas.height - state.world.groundHeight;
    const skyGradient = ctx.createLinearGradient(0, 0, 0, groundY);
    
    // Twilight colors from top to bottom
    skyGradient.addColorStop(0, '#1a1a2e');    // Deep blue at top
    skyGradient.addColorStop(0.4, '#2d1b3d');  // Dark purple
    skyGradient.addColorStop(0.7, '#462639');  // Purple-red
    skyGradient.addColorStop(1, '#1f1f2f');    // Dark blue-grey near ground

    // Fill sky
    ctx.fillStyle = skyGradient;
    ctx.fillRect(0, 0, ctx.canvas.width, groundY);

    // Apply camera transform
    ctx.save();
    ctx.translate(-state.camera.x, -state.camera.y);

    // Fill everything below ground with black (after camera transform)
    ctx.fillStyle = '#000000';
    ctx.fillRect(
        state.camera.x - 1000, // Extend well beyond viewport
        groundY,
        ctx.canvas.width + 2000, // Make sure it covers everything
        ctx.canvas.height
    );

    // 1. Render background objects
    state.world.backgroundTrees.forEach(tree => {
        renderTree(ctx, tree, groundY);
    });
    
    state.world.backgroundRocks.forEach(rock => {
        renderRock(ctx, rock, groundY);
    });

    state.world.backgroundGrass.forEach(grass => {
        renderGrass(ctx, grass, groundY, state.time);
    });
    
    // 2. Render platforms
    state.world.platforms.forEach(platform => {
        ctx.fillStyle = platform.color;
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
    });

    // 3. Render player
    renderPlayer(ctx, state.player);

    // 4. Render foreground objects
    state.world.foregroundTrees.forEach(tree => {
        renderTree(ctx, tree, groundY);
    });
    
    state.world.foregroundRocks.forEach(rock => {
        renderRock(ctx, rock, groundY);
    });

    state.world.foregroundGrass.forEach(grass => {
        renderGrass(ctx, grass, groundY, state.time);
    });

    // 5. Render ground (just the grass top)
    ctx.fillStyle = '#4a4';
    ctx.fillRect(
        state.camera.x - 1000,
        groundY,
        ctx.canvas.width + 2000,
        1  // Only render the grass line
    );

    ctx.restore();
};

// Initialize the game when the window loads
window.addEventListener('load', initGame);