<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boxing - Rosy's Arcade</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Press Start 2P', monospace;
            background: #8b956d;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #0f380f;
            padding: 20px;
            user-select: none;
        }
        h1 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #0f380f;
            text-shadow: 2px 2px 0px #306230;
        }
        .game-container {
            background: #9bbc0f;
            border-radius: 8px;
            padding: 15px;
            box-shadow:
                inset 0 0 20px rgba(15, 56, 15, 0.3),
                8px 8px 0px #306230,
                -4px -4px 0px #8b956d;
            border: 4px solid #0f380f;
        }
        #gameCanvas {
            border: 4px solid #0f380f;
            border-radius: 0;
            display: block;
            image-rendering: pixelated;
        }
        .health-bars {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            gap: 15px;
        }
        .health-container {
            flex: 1;
        }
        .health-label {
            font-size: 0.5rem;
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
            color: #0f380f;
        }
        .player-label { color: #0f380f; }
        .cpu-label { color: #306230; text-align: right; }
        .health-bar {
            height: 16px;
            background: #8bac0f;
            border: 2px solid #0f380f;
            overflow: hidden;
        }
        .health-fill {
            height: 100%;
            transition: width 0.2s;
        }
        .player-health { background: #0f380f; }
        .cpu-health { background: #306230; }
        .stats {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            font-size: 0.5rem;
        }
        .round { color: #0f380f; }
        .wins { color: #306230; }
        .losses { color: #0f380f; }
        .controls {
            margin-top: 20px;
            text-align: center;
            color: #306230;
            font-size: 0.4rem;
            line-height: 2.5;
        }
        .controls p {
            margin: 8px 0;
        }
        kbd {
            background: #306230;
            color: #9bbc0f;
            padding: 4px 8px;
            border-radius: 2px;
            border: 2px solid #0f380f;
            font-family: 'Press Start 2P', monospace;
            font-size: 0.4rem;
        }
        .back-link {
            margin-top: 20px;
            color: #306230;
            font-size: 0.5rem;
        }
        .back-link a {
            color: #0f380f;
            text-decoration: none;
        }
        .back-link a:hover {
            text-decoration: underline;
        }
        /* Mobile controls */
        .mobile-controls {
            display: none;
            margin-top: 20px;
            gap: 15px;
        }
        .control-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        .control-group-label {
            font-size: 0.5rem;
            color: #306230;
        }
        .control-row {
            display: flex;
            gap: 8px;
        }
        .mobile-btn {
            width: 55px;
            height: 55px;
            background: #9bbc0f;
            border: 3px solid #0f380f;
            border-radius: 4px;
            color: #0f380f;
            font-size: 0.5rem;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: 'Press Start 2P', monospace;
            box-shadow: 3px 3px 0px #306230;
        }
        .mobile-btn:active {
            background: #306230;
            color: #9bbc0f;
            box-shadow: 1px 1px 0px #0f380f;
            transform: translate(2px, 2px);
        }
        .mobile-btn.blue {
            border-color: #306230;
            color: #306230;
        }
        .mobile-btn.blue:active {
            background: #306230;
            color: #9bbc0f;
        }
        @media (max-width: 600px) {
            .mobile-controls {
                display: flex;
            }
            .controls {
                display: none;
            }
            #gameCanvas {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <h1>Boxing</h1>

    <div class="game-container">
        <div class="health-bars">
            <div class="health-container">
                <div class="health-label player-label">
                    <span>YOU</span>
                    <span id="playerHealthText">100</span>
                </div>
                <div class="health-bar">
                    <div class="health-fill player-health" id="playerHealth" style="width: 100%"></div>
                </div>
            </div>
            <div class="health-container">
                <div class="health-label cpu-label">
                    <span id="cpuHealthText">100</span>
                    <span>CPU</span>
                </div>
                <div class="health-bar">
                    <div class="health-fill cpu-health" id="cpuHealth" style="width: 100%"></div>
                </div>
            </div>
        </div>

        <canvas id="gameCanvas" width="500" height="350"></canvas>

        <div class="stats">
            <span class="round">Round: <span id="round">1</span></span>
            <span class="wins">Wins: <span id="wins">0</span></span>
            <span class="losses">Losses: <span id="losses">0</span></span>
        </div>
    </div>

    <div class="controls">
        <p><kbd>A</kbd> <kbd>D</kbd> Move | <kbd>W</kbd> Block | <kbd>J</kbd> Jab | <kbd>K</kbd> Hook | <kbd>L</kbd> Uppercut</p>
        <p>Time your blocks! Uppercut does most damage but is slow.</p>
    </div>

    <div class="mobile-controls">
        <div class="control-group">
            <div class="control-group-label">MOVE</div>
            <div class="control-row">
                <button class="mobile-btn blue" id="leftBtn">←</button>
                <button class="mobile-btn blue" id="blockBtn">BLOCK</button>
                <button class="mobile-btn blue" id="rightBtn">→</button>
            </div>
        </div>
        <div class="control-group">
            <div class="control-group-label">ATTACK</div>
            <div class="control-row">
                <button class="mobile-btn" id="jabBtn">JAB</button>
                <button class="mobile-btn" id="hookBtn">HOOK</button>
                <button class="mobile-btn" id="upperBtn">UPPER</button>
            </div>
        </div>
    </div>

    

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

        // Game state
        let gameRunning = true;
        let roundOver = false;
        let messageTimer = 0;
        let message = '';
        let wins = parseInt(localStorage.getItem('boxingWins') || 0);
        let losses = parseInt(localStorage.getItem('boxingLosses') || 0);
        let round = 1;

        document.getElementById('wins').textContent = wins;
        document.getElementById('losses').textContent = losses;

        // Fighter class
        class Fighter {
            constructor(x, isPlayer) {
                this.x = x;
                this.y = 220;
                this.width = 60;
                this.height = 100;
                this.isPlayer = isPlayer;
                this.health = 100;
                this.maxHealth = 100;
                this.state = 'idle'; // idle, blocking, jabbing, hooking, uppercutting, hit, knocked
                this.stateTimer = 0;
                this.direction = isPlayer ? 1 : -1;
                this.moveSpeed = 4;
                this.color = isPlayer ? '#44aaff' : '#ff4444';
                this.gloveColor = isPlayer ? '#cc8800' : '#880000';
            }

            punch(type) {
                if (this.state !== 'idle') return false;

                this.state = type;
                switch(type) {
                    case 'jabbing': this.stateTimer = 15; break;
                    case 'hooking': this.stateTimer = 25; break;
                    case 'uppercutting': this.stateTimer = 35; break;
                }
                return true;
            }

            block() {
                if (this.state === 'idle') {
                    this.state = 'blocking';
                }
            }

            stopBlock() {
                if (this.state === 'blocking') {
                    this.state = 'idle';
                }
            }

            takeDamage(amount) {
                if (this.state === 'blocking') {
                    amount = Math.floor(amount * 0.2);
                }
                this.health = Math.max(0, this.health - amount);
                if (this.health > 0) {
                    this.state = 'hit';
                    this.stateTimer = 15;
                } else {
                    this.state = 'knocked';
                    this.stateTimer = 120;
                }
                return amount;
            }

            update() {
                if (this.stateTimer > 0) {
                    this.stateTimer--;
                    if (this.stateTimer === 0 && this.state !== 'blocking') {
                        if (this.state === 'knocked') {
                            // Stay knocked
                        } else {
                            this.state = 'idle';
                        }
                    }
                }
            }

            getHitbox() {
                return {
                    x: this.x - this.width / 2,
                    y: this.y - this.height,
                    width: this.width,
                    height: this.height
                };
            }

            getPunchHitbox() {
                const reach = this.state === 'hooking' ? 70 : 55;
                return {
                    x: this.direction === 1 ? this.x + 20 : this.x - 20 - reach,
                    y: this.state === 'uppercutting' ? this.y - 80 : this.y - 60,
                    width: reach,
                    height: 30
                };
            }

            draw() {
                ctx.save();

                const bodyX = this.x;
                const bodyY = this.y;

                // Game Boy colors
                const mainColor = this.isPlayer ? '#0f380f' : '#306230';
                const secondColor = this.isPlayer ? '#306230' : '#0f380f';

                // Shadow - pixelated
                ctx.fillStyle = '#306230';
                ctx.fillRect(bodyX - 25, bodyY + 2, 50, 6);

                // Legs - pixel rectangles
                ctx.fillStyle = mainColor;
                ctx.fillRect(bodyX - 16, bodyY - 32, 10, 32);
                ctx.fillRect(bodyX + 6, bodyY - 32, 10, 32);

                // Body
                const bodyLean = this.state === 'knocked' ? 0.5 : 0;

                ctx.save();
                ctx.translate(bodyX, bodyY - 35);
                ctx.rotate(bodyLean * this.direction);

                // Torso - pixel rectangle
                ctx.fillStyle = mainColor;
                ctx.fillRect(-22, -50, 44, 50);

                // Head - pixel square
                const headBob = this.state === 'uppercutting' ? -5 : 0;
                ctx.fillStyle = '#8bac0f';
                ctx.fillRect(-18, -85 + headBob, 36, 32);
                // Head outline
                ctx.strokeStyle = mainColor;
                ctx.lineWidth = 2;
                ctx.strokeRect(-18, -85 + headBob, 36, 32);

                // Face
                if (this.state !== 'knocked') {
                    // Eyes - pixels
                    ctx.fillStyle = mainColor;
                    ctx.fillRect(-10 * this.direction, -78 + headBob, 4, 4);
                    ctx.fillRect(6 * this.direction, -78 + headBob, 4, 4);

                    // Mouth - pixel line
                    ctx.fillRect(-6, -65 + headBob, 12, 3);
                } else {
                    // KO face - X eyes
                    ctx.fillStyle = mainColor;
                    ctx.fillRect(-12, -80 + headBob, 3, 3);
                    ctx.fillRect(-6, -74 + headBob, 3, 3);
                    ctx.fillRect(-12, -74 + headBob, 3, 3);
                    ctx.fillRect(-6, -80 + headBob, 3, 3);
                    ctx.fillRect(6, -80 + headBob, 3, 3);
                    ctx.fillRect(12, -74 + headBob, 3, 3);
                    ctx.fillRect(6, -74 + headBob, 3, 3);
                    ctx.fillRect(12, -80 + headBob, 3, 3);
                    // O mouth
                    ctx.strokeRect(-5, -68 + headBob, 10, 8);
                }

                ctx.restore();

                // Arms and gloves
                this.drawArms(bodyX, bodyY, mainColor, secondColor);

                ctx.restore();
            }

            drawArms(bodyX, bodyY, mainColor, secondColor) {
                const dir = this.direction;

                // Back arm (guard position) - pixel style
                ctx.fillStyle = '#8bac0f';
                ctx.fillRect(bodyX - 15 * dir - 6, bodyY - 72, 12, 10);
                ctx.fillStyle = mainColor;
                ctx.fillRect(bodyX - 22 * dir - 8, bodyY - 72, 16, 16);

                // Front arm based on state
                let gloveX = bodyX + 25 * dir;
                let gloveY = bodyY - 60;

                if (this.state === 'blocking') {
                    gloveX = bodyX;
                    gloveY = bodyY - 75;
                } else if (this.state === 'jabbing') {
                    const progress = 1 - (this.stateTimer / 15);
                    const extend = Math.sin(progress * Math.PI) * 50;
                    gloveX = bodyX + (25 + extend) * dir;
                    gloveY = bodyY - 65;
                } else if (this.state === 'hooking') {
                    const progress = 1 - (this.stateTimer / 25);
                    const swing = Math.sin(progress * Math.PI);
                    gloveX = bodyX + (25 + swing * 55) * dir;
                    gloveY = bodyY - 60 - swing * 15;
                } else if (this.state === 'uppercutting') {
                    const progress = 1 - (this.stateTimer / 35);
                    const rise = Math.sin(progress * Math.PI);
                    gloveX = bodyX + 30 * dir;
                    gloveY = bodyY - 40 - rise * 60;
                }

                // Arm - pixel
                ctx.fillStyle = '#8bac0f';
                ctx.fillRect(bodyX + 10 * dir - 6, bodyY - 68, 12, 10);

                // Glove - pixel square
                ctx.fillStyle = mainColor;
                ctx.fillRect(gloveX - 10, gloveY - 10, 20, 20);
            }
        }

        const player = new Fighter(130, true);
        const cpu = new Fighter(370, false);

        // Input state
        const keys = {};

        document.addEventListener('keydown', (e) => {
            keys[e.key.toLowerCase()] = true;

            if (roundOver) {
                if (e.key === ' ' || e.key === 'Enter') {
                    nextRound();
                }
                return;
            }

            if (e.key.toLowerCase() === 'j') player.punch('jabbing');
            if (e.key.toLowerCase() === 'k') player.punch('hooking');
            if (e.key.toLowerCase() === 'l') player.punch('uppercutting');
            if (e.key.toLowerCase() === 'w') player.block();
        });

        document.addEventListener('keyup', (e) => {
            keys[e.key.toLowerCase()] = false;
            if (e.key.toLowerCase() === 'w') player.stopBlock();
        });

        // Mobile controls
        document.getElementById('leftBtn').addEventListener('touchstart', (e) => { e.preventDefault(); keys['a'] = true; });
        document.getElementById('leftBtn').addEventListener('touchend', (e) => { e.preventDefault(); keys['a'] = false; });
        document.getElementById('rightBtn').addEventListener('touchstart', (e) => { e.preventDefault(); keys['d'] = true; });
        document.getElementById('rightBtn').addEventListener('touchend', (e) => { e.preventDefault(); keys['d'] = false; });
        document.getElementById('blockBtn').addEventListener('touchstart', (e) => { e.preventDefault(); player.block(); });
        document.getElementById('blockBtn').addEventListener('touchend', (e) => { e.preventDefault(); player.stopBlock(); });
        document.getElementById('jabBtn').addEventListener('touchstart', (e) => { e.preventDefault(); player.punch('jabbing'); });
        document.getElementById('hookBtn').addEventListener('touchstart', (e) => { e.preventDefault(); player.punch('hooking'); });
        document.getElementById('upperBtn').addEventListener('touchstart', (e) => { e.preventDefault(); player.punch('uppercutting'); });

        // CPU AI
        let cpuThinkTimer = 0;
        let cpuAction = null;

        function cpuAI() {
            if (cpu.state !== 'idle' && cpu.state !== 'blocking') return;

            cpuThinkTimer--;
            if (cpuThinkTimer > 0) return;

            const dist = Math.abs(player.x - cpu.x);

            // React to player punches
            if (['jabbing', 'hooking', 'uppercutting'].includes(player.state) && dist < 100) {
                if (Math.random() < 0.4) {
                    cpu.block();
                    cpuThinkTimer = 20;
                    setTimeout(() => cpu.stopBlock(), 300);
                    return;
                }
            }

            // Attack when in range
            if (dist < 90) {
                const r = Math.random();
                if (r < 0.35) {
                    cpu.punch('jabbing');
                    cpuThinkTimer = 25;
                } else if (r < 0.6) {
                    cpu.punch('hooking');
                    cpuThinkTimer = 35;
                } else if (r < 0.75) {
                    cpu.punch('uppercutting');
                    cpuThinkTimer = 45;
                } else {
                    // Move back
                    cpu.x = Math.min(canvas.width - 50, cpu.x + 30);
                    cpuThinkTimer = 15;
                }
            } else {
                // Move toward player
                cpu.x -= 2;
                cpuThinkTimer = 5;
            }
        }

        // Hit detection
        let playerHitCpu = false;
        let cpuHitPlayer = false;

        function checkHits() {
            // Check if player hit CPU
            if (['jabbing', 'hooking', 'uppercutting'].includes(player.state) && !playerHitCpu) {
                const punchTime = player.state === 'jabbing' ? 8 : player.state === 'hooking' ? 12 : 17;
                if (player.stateTimer <= punchTime && player.stateTimer >= punchTime - 5) {
                    const punch = player.getPunchHitbox();
                    const target = cpu.getHitbox();
                    if (boxesIntersect(punch, target)) {
                        const damage = player.state === 'jabbing' ? 8 : player.state === 'hooking' ? 15 : 25;
                        cpu.takeDamage(damage);
                        updateHealthBars();
                        playerHitCpu = true;
                        showHitEffect(cpu.x, cpu.y - 60);
                    }
                }
            }
            if (player.state === 'idle') playerHitCpu = false;

            // Check if CPU hit player
            if (['jabbing', 'hooking', 'uppercutting'].includes(cpu.state) && !cpuHitPlayer) {
                const punchTime = cpu.state === 'jabbing' ? 8 : cpu.state === 'hooking' ? 12 : 17;
                if (cpu.stateTimer <= punchTime && cpu.stateTimer >= punchTime - 5) {
                    const punch = cpu.getPunchHitbox();
                    const target = player.getHitbox();
                    if (boxesIntersect(punch, target)) {
                        const damage = cpu.state === 'jabbing' ? 8 : cpu.state === 'hooking' ? 15 : 25;
                        player.takeDamage(damage);
                        updateHealthBars();
                        cpuHitPlayer = true;
                        showHitEffect(player.x, player.y - 60);
                    }
                }
            }
            if (cpu.state === 'idle') cpuHitPlayer = false;
        }

        function boxesIntersect(a, b) {
            return a.x < b.x + b.width && a.x + a.width > b.x &&
                   a.y < b.y + b.height && a.y + a.height > b.y;
        }

        let hitEffects = [];

        function showHitEffect(x, y) {
            hitEffects.push({ x, y, timer: 15 });
        }

        function updateHealthBars() {
            document.getElementById('playerHealth').style.width = player.health + '%';
            document.getElementById('playerHealthText').textContent = player.health;
            document.getElementById('cpuHealth').style.width = cpu.health + '%';
            document.getElementById('cpuHealthText').textContent = cpu.health;
        }

        function checkRoundEnd() {
            if (player.health <= 0 && player.state === 'knocked' && player.stateTimer <= 1) {
                roundOver = true;
                losses++;
                localStorage.setItem('boxingLosses', losses);
                document.getElementById('losses').textContent = losses;
                message = 'YOU LOSE! Press Space for next round';
            } else if (cpu.health <= 0 && cpu.state === 'knocked' && cpu.stateTimer <= 1) {
                roundOver = true;
                wins++;
                localStorage.setItem('boxingWins', wins);
                document.getElementById('wins').textContent = wins;
                message = 'YOU WIN! Press Space for next round';
            }
        }

        function nextRound() {
            round++;
            document.getElementById('round').textContent = round;
            player.x = 130;
            player.health = 100;
            player.state = 'idle';
            player.stateTimer = 0;
            cpu.x = 370;
            cpu.health = 100;
            cpu.state = 'idle';
            cpu.stateTimer = 0;
            roundOver = false;
            message = '';
            updateHealthBars();
        }

        function update() {
            if (roundOver) return;

            // Player movement
            if (player.state === 'idle' || player.state === 'blocking') {
                if (keys['a']) player.x = Math.max(50, player.x - player.moveSpeed);
                if (keys['d']) player.x = Math.min(cpu.x - 60, player.x + player.moveSpeed);
            }

            player.update();
            cpu.update();
            cpuAI();
            checkHits();
            checkRoundEnd();

            // Update hit effects
            hitEffects = hitEffects.filter(e => {
                e.timer--;
                return e.timer > 0;
            });
        }

        // Game Boy color palette
        const GB_LIGHTEST = '#9bbc0f';
        const GB_LIGHT = '#8bac0f';
        const GB_DARK = '#306230';
        const GB_DARKEST = '#0f380f';

        function draw() {
            // Ring background - Game Boy lightest
            ctx.fillStyle = GB_LIGHTEST;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Ring floor
            ctx.fillStyle = GB_LIGHT;
            ctx.beginPath();
            ctx.moveTo(0, 250);
            ctx.lineTo(canvas.width, 250);
            ctx.lineTo(canvas.width, canvas.height);
            ctx.lineTo(0, canvas.height);
            ctx.fill();

            // Ring ropes
            ctx.strokeStyle = GB_DARKEST;
            ctx.lineWidth = 3;
            for (let i = 0; i < 3; i++) {
                ctx.beginPath();
                ctx.moveTo(0, 80 + i * 50);
                ctx.lineTo(canvas.width, 80 + i * 50);
                ctx.stroke();
            }

            // Corner posts
            ctx.fillStyle = GB_DARK;
            ctx.fillRect(10, 70, 15, 180);
            ctx.fillRect(canvas.width - 25, 70, 15, 180);

            // Fighters
            player.draw();
            cpu.draw();

            // Hit effects
            for (const effect of hitEffects) {
                ctx.fillStyle = GB_DARKEST;
                ctx.font = '12px "Press Start 2P", monospace';
                ctx.textAlign = 'center';
                ctx.fillText('POW!', effect.x, effect.y - (15 - effect.timer) * 2);
            }

            // Round message
            if (message) {
                ctx.fillStyle = GB_LIGHT;
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                ctx.fillStyle = GB_DARKEST;
                ctx.font = '14px "Press Start 2P", monospace';
                ctx.textAlign = 'center';
                ctx.fillText(message.includes('WIN') ? 'YOU WIN!' : 'YOU LOSE!', canvas.width / 2, canvas.height / 2 - 10);

                ctx.fillStyle = GB_DARK;
                ctx.font = '8px "Press Start 2P", monospace';
                ctx.fillText('PRESS SPACE', canvas.width / 2, canvas.height / 2 + 20);
            }

            // Instructions on first load
            if (round === 1 && player.state === 'idle' && cpu.state === 'idle' &&
                player.health === 100 && cpu.health === 100 && !message) {
                ctx.fillStyle = GB_DARKEST;
                ctx.font = '14px "Press Start 2P", monospace';
                ctx.textAlign = 'center';
                ctx.fillText('FIGHT!', canvas.width / 2, 50);
            }
        }

        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        gameLoop();
    </script>
</body>
</html>
