<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #1a0a0a 0%, #2d1515 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            padding: 20px;
            user-select: none;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 0 20px #ff4444;
        }
        .game-container {
            background: #0f0808;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 0 40px rgba(255, 68, 68, 0.3);
        }
        #gameCanvas {
            border: 3px solid #ff4444;
            border-radius: 8px;
            display: block;
        }
        .health-bars {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            gap: 20px;
        }
        .health-container {
            flex: 1;
        }
        .health-label {
            font-size: 0.9rem;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        .player-label { color: #44aaff; }
        .cpu-label { color: #ff4444; text-align: right; }
        .health-bar {
            height: 20px;
            background: #333;
            border-radius: 10px;
            overflow: hidden;
        }
        .health-fill {
            height: 100%;
            transition: width 0.2s;
        }
        .player-health { background: linear-gradient(90deg, #2277cc, #44aaff); }
        .cpu-health { background: linear-gradient(90deg, #ff4444, #cc2222); }
        .stats {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            font-size: 1rem;
        }
        .round { color: #ffcc00; }
        .wins { color: #44ff44; }
        .losses { color: #ff4444; }
        .controls {
            margin-top: 20px;
            text-align: center;
            color: #888;
            font-size: 0.9rem;
        }
        .controls p {
            margin: 5px 0;
        }
        kbd {
            background: #333;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid #555;
            font-family: monospace;
        }
        .back-link {
            margin-top: 20px;
            color: #888;
        }
        .back-link a {
            color: #ff4444;
            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.8rem;
            color: #888;
        }
        .control-row {
            display: flex;
            gap: 8px;
        }
        .mobile-btn {
            width: 55px;
            height: 55px;
            background: #1a0a0a;
            border: 2px solid #ff4444;
            border-radius: 10px;
            color: #ff4444;
            font-size: 0.7rem;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .mobile-btn:active {
            background: #ff4444;
            color: #1a0a0a;
        }
        .mobile-btn.blue {
            border-color: #44aaff;
            color: #44aaff;
        }
        .mobile-btn.blue:active {
            background: #44aaff;
            color: #1a0a0a;
        }
        @media (max-width: 600px) {
            .mobile-controls {
                display: flex;
            }
            .controls {
                display: none;
            }
            #gameCanvas {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <a href="/games/" style="position:fixed;top:15px;left:15px;background:rgba(0,0,0,0.5);color:#fff;padding:8px 15px;border-radius:20px;text-decoration:none;font-size:0.9rem;z-index:100;">← Back</a>
    <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;

                // Shadow
                ctx.fillStyle = 'rgba(0,0,0,0.3)';
                ctx.beginPath();
                ctx.ellipse(bodyX, bodyY + 5, 30, 8, 0, 0, Math.PI * 2);
                ctx.fill();

                // Legs
                ctx.fillStyle = this.isPlayer ? '#1a5599' : '#991a1a';
                ctx.fillRect(bodyX - 18, bodyY - 35, 12, 35);
                ctx.fillRect(bodyX + 6, bodyY - 35, 12, 35);

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

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

                // Torso
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.roundRect(-25, -55, 50, 55, 8);
                ctx.fill();

                // Head
                const headBob = this.state === 'uppercutting' ? -5 : 0;
                ctx.fillStyle = '#e8c4a0';
                ctx.beginPath();
                ctx.arc(0, -75 + headBob, 22, 0, Math.PI * 2);
                ctx.fill();

                // Face
                if (this.state !== 'knocked') {
                    // Eyes
                    ctx.fillStyle = '#333';
                    ctx.beginPath();
                    ctx.arc(-7 * this.direction, -78, 3, 0, Math.PI * 2);
                    ctx.arc(7 * this.direction, -78, 3, 0, Math.PI * 2);
                    ctx.fill();

                    // Determined expression
                    ctx.strokeStyle = '#333';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.moveTo(-6, -68);
                    ctx.lineTo(6, -68);
                    ctx.stroke();
                } else {
                    // KO face
                    ctx.strokeStyle = '#333';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.moveTo(-10, -80);
                    ctx.lineTo(-4, -74);
                    ctx.moveTo(-10, -74);
                    ctx.lineTo(-4, -80);
                    ctx.moveTo(4, -80);
                    ctx.lineTo(10, -74);
                    ctx.moveTo(4, -74);
                    ctx.lineTo(10, -80);
                    ctx.stroke();
                    ctx.beginPath();
                    ctx.arc(0, -66, 6, 0, Math.PI * 2);
                    ctx.stroke();
                }

                ctx.restore();

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

                ctx.restore();
            }

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

                // Back arm (guard position)
                ctx.fillStyle = '#e8c4a0';
                ctx.beginPath();
                ctx.roundRect(bodyX - 15 * dir - 8, bodyY - 75, 16, 12, 4);
                ctx.fill();
                ctx.fillStyle = this.gloveColor;
                ctx.beginPath();
                ctx.arc(bodyX - 20 * dir, bodyY - 65, 12, 0, Math.PI * 2);
                ctx.fill();

                // Front arm based on state
                let armX = bodyX + 15 * dir;
                let armY = bodyY - 70;
                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
                ctx.fillStyle = '#e8c4a0';
                ctx.beginPath();
                ctx.roundRect(armX - 8, armY, 16, 12, 4);
                ctx.fill();

                // Glove
                ctx.fillStyle = this.gloveColor;
                ctx.beginPath();
                ctx.arc(gloveX, gloveY, 14, 0, Math.PI * 2);
                ctx.fill();

                // Glove shine
                ctx.fillStyle = 'rgba(255,255,255,0.3)';
                ctx.beginPath();
                ctx.arc(gloveX - 3, gloveY - 4, 5, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        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;
            });
        }

        function draw() {
            // Ring background
            ctx.fillStyle = '#2a1a1a';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Ring floor
            ctx.fillStyle = '#4a3030';
            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 = '#ff4444';
            ctx.lineWidth = 4;
            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 = '#666';
            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 = `rgba(255, 255, 0, ${effect.timer / 15})`;
                ctx.font = 'bold 24px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText('POW!', effect.x, effect.y - (15 - effect.timer) * 2);
            }

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

                ctx.fillStyle = message.includes('WIN') ? '#44ff44' : '#ff4444';
                ctx.font = 'bold 28px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText(message.split('!')[0] + '!', canvas.width / 2, canvas.height / 2 - 10);

                ctx.fillStyle = '#fff';
                ctx.font = '18px sans-serif';
                ctx.fillText('Press Space for next round', canvas.width / 2, canvas.height / 2 + 25);
            }

            // Instructions on first load
            if (round === 1 && player.state === 'idle' && cpu.state === 'idle' &&
                player.health === 100 && cpu.health === 100 && !message) {
                ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                ctx.font = '16px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText('FIGHT!', canvas.width / 2, 50);
            }
        }

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

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