Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Legs In, Arms Up!</title>
    <style>
        body {
            background-color: #1a1a2e;
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
        }
        h1 { color: #e94560; margin-bottom: 5px; }
        p { color: #a2a8d3; }
        #game-container {
            background: #162447;
            width: 500px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.5);
            border: 2px solid #e94560;
        }
        canvas {
            background: #0f3460;
            border-radius: 8px;
            display: block;
            margin: 15px auto;
        }
        .btn-group {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
        }
        button {
            background-color: #e94560;
            color: white;
            border: none;
            padding: 10px 15px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.2s;
        }
        button:hover { background-color: #ff6e6c; }
        button:active { transform: scale(0.95); }
        #stats {
            font-size: 18px;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <h1>LEGS IN, ARMS UP!</h1>
    <p>Dress the flailing roommate before the timer hits 0!</p>

    <div id="game-container">
        <div id="stats">Time Left: <span id="timer">30</span>s | Score: <span id="score">0</span></div>
        <canvas id="gameCanvas" width="400" height="250"></canvas>
        <p id="instruction" style="font-size: 14px; color: #fff;">Click the correct clothing item below when it aligns with the target zone!</p>
        
        <div class="btn-group">
            <button onclick="tryDress('socks')">Put on Socks</button>
            <button onclick="tryDress('pants')">Put on Pants</button>
            <button onclick="tryDress('shirt')">Put on Shirt</button>
        </div>
    </div>

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

    let timeLeft = 30;
    let score = 0;
    let gameActive = true;

    // Ragdoll status
    let currentItemNeeded = 'socks'; // socks -> pants -> shirt -> win
    let targetX = 200;
    let ragdollOffset = 0;
    let flailSpeed = 0.05;

    const items = ['socks', 'pants', 'shirt'];
    let itemIndex = 0;

    function resetTarget() {
        if (itemIndex >= items.length) {
            gameActive = false;
            return;
        }
        currentItemNeeded = items[itemIndex];
    }

    resetTarget();

    // Game loop timer
    let timerInterval = setInterval(() => {
        if (!gameActive) return;
        timeLeft--;
        document.getElementById("timer").innerText = timeLeft;
        if (timeLeft <= 0) {
            gameActive = false;
            clearInterval(timerInterval);
        }
    }, 1000);

    function tryDress(itemType) {
        if (!gameActive) return;

        // Check if player clicked the correct item AND the ragdoll is near the center sweet spot (180 to 220)
        let inSweetSpot = Math.abs(ragdollOffset) < 35;

        if (itemType === currentItemNeeded && inSweetSpot) {
            score += 100;
            itemIndex++;
            resetTarget();
            if (!gameActive) {
                document.getElementById("instruction").innerText = "🎉 SUCCESS! They made it out the door!";
            } else {
                document.getElementById("instruction").innerText = "Nice! Next item: " + currentItemNeeded.toUpperCase();
            }
        } else {
            score = Math.max(0, score - 25);
            document.getElementById("instruction").innerText = "❌ Missed timing or wrong item! Penalty -25 pts.";
        }
        document.getElementById("score").innerText = score;
    }

    // Render loop for animations
    let angle = 0;
    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if (gameActive) {
            angle += 0.08;
            ragdollOffset = Math.sin(angle) * 70; // Flailing movement back and forth
        }

        // Draw Target Zone (Sweet Spot)
        ctx.fillStyle = "rgba(46, 204, 113, 0.2)";
        ctx.fillRect(160, 40, 80, 180);
        ctx.strokeStyle = "#2ecc71";
        ctx.setLineDash([4, 4]);
        ctx.strokeRect(160, 40, 80, 180);
        ctx.setLineDash([]);

        // Draw Bed / Background lines
        ctx.strokeStyle = "#0f3460";
        ctx.lineWidth = 4;

        // Draw Flailing Ragdoll Body
        let bodyX = targetX + ragdollOffset;
        
        // Head
        ctx.fillStyle = "#f1c40f";
        ctx.beginPath();
        ctx.arc(bodyX, 80, 20, 0, Math.PI * 2);
        ctx.fill();

        // Torso
        ctx.fillStyle = gameActive ? "#e74c3c" : "#2ecc71";
        ctx.fillRect(bodyX - 15, 100, 30, 60);

        // Flailing arms/legs
        ctx.strokeStyle = "#f1c40f";
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(bodyX - 15, 110);
        ctx.lineTo(bodyX - 40 + (Math.sin(angle * 2) * 20), 130);
        ctx.moveTo(bodyX + 15, 110);
        ctx.lineTo(bodyX + 40 - (Math.sin(angle * 2) * 20), 130);
        ctx.stroke();

        // Display current target on screen
        ctx.fillStyle = "white";
        ctx.font = "bold 16px Arial";
        ctx.textAlign = "center";
        if (gameActive) {
            ctx.fillText("TARGET: " + currentItemNeeded.toUpperCase(), 200, 30);
            ctx.font = "12px Arial";
            ctx.fillStyle = "#e94560";
            ctx.fillText("Wait until they drift into the green zone!", 200, 235);
        } else {
            ctx.font = "bold 24px Arial";
            ctx.fillStyle = "#2ecc71";
            ctx.fillText(timeLeft > 0 ? "YOU WIN! DRESSED & READY!" : "GAME OVER! TOO SLOW!", 200, 130);
        }

        requestAnimationFrame(gameLoop);
    }

    gameLoop();
</script>

</body>
</html>