<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthy Hospital Hero</title>

<style>
body{
    margin:0;
    font-family:Segoe UI, sans-serif;
    background:#f0fdfa;
    overflow:hidden;
}

.header{
    background:#0f766e;
    color:white;
    padding:15px;
    text-align:center;
    position:relative;
}

.scoreboard{
    display:flex;
    justify-content:center;
    gap:30px;
    font-weight:bold;
    margin-top:10px;
}

.game-area{
    position:relative;
    width:100%;
    height:80vh;
    overflow:hidden;
}

.item{
    position:absolute;
    width:80px;
    height:80px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    cursor:pointer;
    user-select:none;
    transition:transform .1s;
}

.item:hover{
    transform:scale(1.1);
}

.good{
    background:#ccfbf1;
    border:3px solid #14b8a6;
}

.bad{
    background:#fee2e2;
    border:3px solid #ef4444;
}

.game-over{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.7);
    color:white;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    z-index:10;
}

button{
    padding:12px 20px;
    border:none;
    border-radius:10px;
    background:#0f766e;
    color:white;
    font-size:16px;
    cursor:pointer;
}

.info{
    text-align:center;
    padding:10px;
    background:white;
}
.logout-btn{
    position:absolute;
    top:15px;
    right:20px;

    background:#dc2626;
    color:white;

    border:none;
    border-radius:8px;

    padding:10px 16px;
    cursor:pointer;

    font-weight:600;

    z-index:9999;
}

.logout-btn:hover{
    background:#b91c1c;
}
</style>
</head>

<body>

<div class="header">
    <h1>🏥 Healthy Hospital Hero</h1>

    <button class="logout-btn"
        onclick="window.location.href='auth/logout.php'">
    Logout
</button>

    <div class="scoreboard">
        <div>Score: <span id="score">0</span></div>
        <div>Time: <span id="time">30</span>s</div>
    </div>
</div>

<div class="info">
    Tap healthy hospital items ✅ and avoid dirty items ❌
</div>

<div class="game-area" id="gameArea">

    <div class="game-over" id="gameOver">
        <h1>🎉 Game Over!</h1>
        <h2>Your Score: <span id="finalScore"></span></h2>
        <button onclick="restartGame()">Play Again</button>
    </div>

</div>

<script>
const gameArea = document.getElementById("gameArea");
const scoreEl = document.getElementById("score");
const timeEl = document.getElementById("time");
const gameOverEl = document.getElementById("gameOver");
const finalScoreEl = document.getElementById("finalScore");

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

const goodItems = [
    "🧼","🩺","💊","🧴","😷","🩹"
];

const badItems = [
    "🦠","🗑️","🤢","☣️"
];

function createItem(){

    if(!gameRunning) return;

    const item = document.createElement("div");

    const isGood = Math.random() > 0.3;

    item.classList.add("item");
    item.classList.add(isGood ? "good" : "bad");

    const emoji = isGood
        ? goodItems[Math.floor(Math.random()*goodItems.length)]
        : badItems[Math.floor(Math.random()*badItems.length)];

    item.innerHTML = emoji;

    const x = Math.random() * (window.innerWidth - 100);
    const y = Math.random() * (window.innerHeight - 250);

    item.style.left = x + "px";
    item.style.top = y + "px";

    item.onclick = () => {

        if(!gameRunning) return;

        if(isGood){
            score += 10;
        }else{
            score -= 5;
        }

        scoreEl.innerText = score;

        item.remove();
    };

    gameArea.appendChild(item);

    setTimeout(() => {
        item.remove();
    }, 2000);
}

function gameLoop(){
    const interval = setInterval(() => {

        if(!gameRunning){
            clearInterval(interval);
            return;
        }

        createItem();

    }, 700);
}

function timerLoop(){

    const timer = setInterval(() => {

        timeLeft--;
        timeEl.innerText = timeLeft;

        if(timeLeft <= 0){

            clearInterval(timer);

            gameRunning = false;

            finalScoreEl.innerText = score;

            gameOverEl.style.display = "flex";
        }

    },1000);
}

function restartGame(){

    score = 0;
    timeLeft = 30;
    gameRunning = true;

    scoreEl.innerText = score;
    timeEl.innerText = timeLeft;

    gameOverEl.style.display = "none";

    document.querySelectorAll(".item").forEach(i => i.remove());

    gameLoop();
    timerLoop();
}

gameLoop();
timerLoop();
</script>

</body>
</html>
