<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game - Rosy's Arcade</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            padding: 20px;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 0 20px #00ff88;
        }
        .game-container {
            background: #0f0f23;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 0 40px rgba(0, 255, 136, 0.2);
        }
        #gameCanvas {
            border: 3px solid #00ff88;
            border-radius: 8px;
            display: block;
        }
        .stats {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            font-size: 1.2rem;
        }
        .score {
            color: #00ff88;
        }
        .high-score {
            color: #ff9900;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
            color: #888;
        }
        .controls p {
            margin: 5px 0;
        }
        kbd {
            background: #333;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid #555;
            font-family: monospace;
        }
        .message {
            position: absolute;
            text-align: center;
            font-size: 1.5rem;
            color: #00ff88;
            text-shadow: 0 0 10px #00ff88;
        }
        .back-link {
            margin-top: 20px;
            color: #888;
        }
        .back-link a {
            color: #00ff88;
            text-decoration: none;
        }
        .back-link a:hover {
            text-decoration: underline;
        }
        /* Mobile controls */
        .mobile-controls {
            display: none;
            margin-top: 20px;
            gap: 10px;
        }
        .mobile-row {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .mobile-btn {
            width: 60px;
            height: 60px;
            background: #1a1a2e;
            border: 2px solid #00ff88;
            border-radius: 10px;
            color: #00ff88;
            font-size: 1.5rem;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mobile-btn:active {
            background: #00ff88;
            color: #1a1a2e;
        }
        .mobile-btn.invisible {
            visibility: hidden;
        }
        @media (max-width: 600px) {
            .mobile-controls {
                display: flex;
                flex-direction: column;
            }
            .controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1>Snake</h1>

    <div class="game-container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="stats">
            <span class="score">Score: <span id="score">0</span></span>
            <span class="high-score">Best: <span id="highScore">0</span></span>
        </div>
    </div>

    <div class="controls">
        <p>Use <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> or <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> to move</p>
        <p>Press <kbd>Space</kbd> to pause | <kbd>R</kbd> to restart</p>
    </div>

    <div class="mobile-controls">
        <div class="mobile-row">
            <button class="mobile-btn invisible"></button>
            <button class="mobile-btn" id="upBtn">↑</button>
            <button class="mobile-btn invisible"></button>
        </div>
        <div class="mobile-row">
            <button class="mobile-btn" id="leftBtn">←</button>
            <button class="mobile-btn" id="downBtn">↓</button>
            <button class="mobile-btn" id="rightBtn">→</button>
        </div>
    </div>

    <p class="back-link"><a href="/">← Back to SQL Practice</a></p>

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

        const gridSize = 20;
        const tileCount = canvas.width / gridSize;

        let snake = [{x: 10, y: 10}];
        let direction = {x: 0, y: 0};
        let nextDirection = {x: 0, y: 0};
        let food = {x: 15, y: 15};
        let score = 0;
        let highScore = localStorage.getItem('snakeHighScore') || 0;
        let gameRunning = false;
        let gamePaused = false;
        let gameOver = false;
        let gameSpeed = 100;
        let lastTime = 0;

        document.getElementById('highScore').textContent = highScore;

        function drawGame(timestamp) {
            if (!gameRunning) return;

            if (timestamp - lastTime >= gameSpeed) {
                lastTime = timestamp;
                if (!gamePaused && !gameOver) {
                    update();
                }
            }

            draw();
            requestAnimationFrame(drawGame);
        }

        function update() {
            direction = {...nextDirection};

            if (direction.x === 0 && direction.y === 0) return;

            const head = {
                x: snake[0].x + direction.x,
                y: snake[0].y + direction.y
            };

            // Wall collision
            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
                endGame();
                return;
            }

            // Self collision
            for (let segment of snake) {
                if (head.x === segment.x && head.y === segment.y) {
                    endGame();
                    return;
                }
            }

            snake.unshift(head);

            // Food collision
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                document.getElementById('score').textContent = score;
                placeFood();
                // Speed up slightly
                if (gameSpeed > 50) {
                    gameSpeed -= 2;
                }
            } else {
                snake.pop();
            }
        }

        function draw() {
            // Clear canvas
            ctx.fillStyle = '#0f0f23';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw grid (subtle)
            ctx.strokeStyle = '#1a1a3a';
            ctx.lineWidth = 1;
            for (let i = 0; i <= tileCount; i++) {
                ctx.beginPath();
                ctx.moveTo(i * gridSize, 0);
                ctx.lineTo(i * gridSize, canvas.height);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(0, i * gridSize);
                ctx.lineTo(canvas.width, i * gridSize);
                ctx.stroke();
            }

            // Draw food
            ctx.fillStyle = '#ff6b6b';
            ctx.shadowColor = '#ff6b6b';
            ctx.shadowBlur = 10;
            ctx.beginPath();
            ctx.arc(
                food.x * gridSize + gridSize / 2,
                food.y * gridSize + gridSize / 2,
                gridSize / 2 - 2,
                0,
                Math.PI * 2
            );
            ctx.fill();
            ctx.shadowBlur = 0;

            // Draw snake
            snake.forEach((segment, index) => {
                const brightness = Math.max(0.4, 1 - index * 0.03);
                ctx.fillStyle = `rgba(0, 255, 136, ${brightness})`;
                ctx.shadowColor = '#00ff88';
                ctx.shadowBlur = index === 0 ? 15 : 5;

                ctx.beginPath();
                ctx.roundRect(
                    segment.x * gridSize + 1,
                    segment.y * gridSize + 1,
                    gridSize - 2,
                    gridSize - 2,
                    4
                );
                ctx.fill();
            });
            ctx.shadowBlur = 0;

            // Draw messages
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            if (!gameRunning || (direction.x === 0 && direction.y === 0 && !gameOver)) {
                ctx.fillStyle = '#00ff88';
                ctx.font = 'bold 24px sans-serif';
                ctx.shadowColor = '#00ff88';
                ctx.shadowBlur = 10;
                ctx.fillText('Press any arrow key to start!', canvas.width / 2, canvas.height / 2);
                ctx.shadowBlur = 0;
            }

            if (gamePaused && !gameOver) {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#ff9900';
                ctx.font = 'bold 32px sans-serif';
                ctx.fillText('PAUSED', canvas.width / 2, canvas.height / 2);
            }

            if (gameOver) {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#ff6b6b';
                ctx.font = 'bold 32px sans-serif';
                ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 20);
                ctx.fillStyle = '#00ff88';
                ctx.font = '18px sans-serif';
                ctx.fillText(`Score: ${score}`, canvas.width / 2, canvas.height / 2 + 15);
                ctx.fillStyle = '#888';
                ctx.fillText('Press R to restart', canvas.width / 2, canvas.height / 2 + 45);
            }
        }

        function placeFood() {
            do {
                food = {
                    x: Math.floor(Math.random() * tileCount),
                    y: Math.floor(Math.random() * tileCount)
                };
            } while (snake.some(s => s.x === food.x && s.y === food.y));
        }

        function endGame() {
            gameOver = true;
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('snakeHighScore', highScore);
                document.getElementById('highScore').textContent = highScore;
            }
        }

        function resetGame() {
            snake = [{x: 10, y: 10}];
            direction = {x: 0, y: 0};
            nextDirection = {x: 0, y: 0};
            score = 0;
            gameSpeed = 100;
            gameOver = false;
            gamePaused = false;
            document.getElementById('score').textContent = 0;
            placeFood();
        }

        function setDirection(x, y) {
            // Prevent reversing direction
            if (direction.x !== 0 && x !== 0 && direction.x === -x) return;
            if (direction.y !== 0 && y !== 0 && direction.y === -y) return;

            nextDirection = {x, y};

            if (!gameRunning) {
                gameRunning = true;
                requestAnimationFrame(drawGame);
            }
        }

        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp':
                case 'w':
                case 'W':
                    e.preventDefault();
                    if (!gameOver) setDirection(0, -1);
                    break;
                case 'ArrowDown':
                case 's':
                case 'S':
                    e.preventDefault();
                    if (!gameOver) setDirection(0, 1);
                    break;
                case 'ArrowLeft':
                case 'a':
                case 'A':
                    e.preventDefault();
                    if (!gameOver) setDirection(-1, 0);
                    break;
                case 'ArrowRight':
                case 'd':
                case 'D':
                    e.preventDefault();
                    if (!gameOver) setDirection(1, 0);
                    break;
                case ' ':
                    e.preventDefault();
                    if (!gameOver && gameRunning) {
                        gamePaused = !gamePaused;
                    }
                    break;
                case 'r':
                case 'R':
                    resetGame();
                    break;
            }
        });

        // Mobile controls
        document.getElementById('upBtn').addEventListener('click', () => !gameOver && setDirection(0, -1));
        document.getElementById('downBtn').addEventListener('click', () => !gameOver && setDirection(0, 1));
        document.getElementById('leftBtn').addEventListener('click', () => !gameOver && setDirection(-1, 0));
        document.getElementById('rightBtn').addEventListener('click', () => !gameOver && setDirection(1, 0));

        // Initial draw
        draw();
    </script>
</body>
</html>
