<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Tangkap Komponen Jarkom</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background: #0f172a; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; }
        #game-container { position: relative; width: 400px; height: 500px; background: #1e293b; border: 4px solid #38bdf8; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        #target-box { background: #334155; padding: 10px; text-align: center; border-bottom: 2px solid #38bdf8; }
        #target-text { color: #38bdf8; font-weight: bold; font-size: 1.1em; }
        #score-board { display: flex; justify-content: space-between; padding: 8px 15px; font-size: 0.9em; background: #0f172a; }
        #basket { position: absolute; bottom: 10px; left: 160px; width: 80px; height: 20px; background: #38bdf8; border-radius: 10px; box-shadow: 0 0 10px #38bdf8; }
        .item { position: absolute; padding: 6px 10px; background: #475569; border-radius: 6px; font-size: 0.8em; font-weight: bold; border: 1px solid #94a3b8; white-space: nowrap; }
        #game-over-screen, #start-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; z-index: 10; }
        button { margin-top: 15px; padding: 10px 20px; background: #22c55e; color: white; border: none; border-radius: 6px; font-size: 1em; font-weight: bold; cursor: pointer; }
        button:hover { background: #16a34a; }
        .controls { margin-top: 15px; display: flex; gap: 10px; }
        .ctrl-btn { width: 60px; height: 40px; background: #334155; border: 1px solid #38bdf8; color: white; font-size: 1.2em; border-radius: 6px; }
    </style>
</head>
<body>

<div id="game-container">
    <div id="target-box">
        <div>Tangkap Komponen:</div>
        <div id="target-text">Loading...</div>
    </div>
    <div id="score-board">
        <span>Skor: <b id="score">0</b></span>
        <span>Nyawa: <b id="lives">3</b></span>
    </div>

    <div id="basket"></div>

    <div id="start-screen">
        <h2>Network Catcher 🎮</h2>
        <p style="margin-top:10px; font-size:0.9em;">Geser penampung untuk menangkap komponen Jarkom yang sesuai dengan petunjuk di atas!</p>
        <button onclick="startGame()">Mulai Main</button>
    </div>

    <div id="game-over-screen" style="display: none;">
        <h2 style="color: #ef4444;">Game Over!</h2>
        <p style="margin-top:10px;">Skor Akhir Kamu: <b id="final-score">0</b></p>
        <button onclick="startGame()">Main Lagi</button>
    </div>
</div>

<div class="controls">
    <button class="ctrl-btn" id="btn-left">◀</button>
    <button class="ctrl-btn" id="btn-right">▶</button>
</div>

<script>
const itemsData = [
    { name: "Router", target: "Penghubung beda jaringan (Layer 3)" },
    { name: "Switch", target: "Penghubung lokal via MAC Address" },
    { name: "Fiber Optik", target: "Kabel jaringan mentransmisi cahaya" },
    { name: "Tang Crimp", target: "Alat memotong & mempres RJ-45" },
    { name: "LAN Tester", target: "Alat mengecek urutan pin kabel UTP" },
    { name: "Access Point", target: "Pemancar sinyal Wi-Fi lokal" },
    { name: "Modem", target: "Mengubah sinyal Digital ke Analog" },
    { name: "UPS", target: "Daya cadangan saat listrik padam" }
];

let score = 0;
let lives = 3;
let currentTargetIndex = 0;
let basketX = 160;
let gameInterval, spawnInterval;
let activeItems = [];
let isPlaying = false;

const basket = document.getElementById("basket");
const container = document.getElementById("game-container");

// Kontrol Keyboard & Tombol
document.addEventListener("keydown", (e) => {
    if (!isPlaying) return;
    if (e.key === "ArrowLeft" && basketX > 0) basketX -= 25;
    if (e.key === "ArrowRight" && basketX < 320) basketX += 25;
    basket.style.left = basketX + "px";
});

document.getElementById("btn-left").addEventListener("click", () => {
    if (isPlaying && basketX > 0) { basketX -= 30; basket.style.left = basketX + "px"; }
});
document.getElementById("btn-right").addEventListener("click", () => {
    if (isPlaying && basketX < 320) { basketX += 30; basket.style.left = basketX + "px"; }
});

function setNextTarget() {
    currentTargetIndex = Math.floor(Math.random() * itemsData.length);
    document.getElementById("target-text").innerText = itemsData[currentTargetIndex].target;
}

function spawnItem() {
    if (!isPlaying) return;
    const randomItem = itemsData[Math.floor(Math.random() * itemsData.length)];
    const itemEl = document.createElement("div");
    itemEl.className = "item";
    itemEl.innerText = randomItem.name;
    itemEl.dataset.name = randomItem.name;
    
    const posX = Math.floor(Math.random() * 300);
    itemEl.style.left = posX + "px";
    itemEl.style.top = "80px";
    
    container.appendChild(itemEl);
    activeItems.push({ el: itemEl, y: 80, x: posX, name: randomItem.name });
}

function updateGame() {
    for (let i = activeItems.length - 1; i >= 0; i--) {
        let item = activeItems[i];
        item.y += 3;
        item.el.style.top = item.y + "px";

        // Cek jika ditangkap penampung
        if (item.y >= 440 && item.y <= 460 && item.x >= basketX - 30 && item.x <= basketX + 80) {
            if (item.name === itemsData[currentTargetIndex].name) {
                score += 10;
                document.getElementById("score").innerText = score;
                setNextTarget();
            } else {
                takeDamage();
            }
            item.el.remove();
            activeItems.splice(i, 1);
            continue;
        }

        // Cek jika jatuh ke dasar
        if (item.y > 470) {
            if (item.name === itemsData[currentTargetIndex].name) {
                takeDamage();
            }
            item.el.remove();
            activeItems.splice(i, 1);
        }
    }
}

function takeDamage() {
    lives--;
    document.getElementById("lives").innerText = lives;
    if (lives <= 0) endGame();
}

function startGame() {
    score = 0;
    lives = 3;
    basketX = 160;
    basket.style.left = basketX + "px";
    document.getElementById("score").innerText = score;
    document.getElementById("lives").innerText = lives;
    document.getElementById("start-screen").style.display = "none";
    document.getElementById("game-over-screen").style.display = "none";
    
    activeItems.forEach(item => item.el.remove());
    activeItems = [];
    
    isPlaying = true;
    setNextTarget();
    
    clearInterval(gameInterval);
    clearInterval(spawnInterval);
    gameInterval = setInterval(updateGame, 20);
    spawnInterval = setInterval(spawnItem, 1500);
}

function endGame() {
    isPlaying = false;
    clearInterval(gameInterval);
    clearInterval(spawnInterval);
    document.getElementById("final-score").innerText = score;
    document.getElementById("game-over-screen").style.display = "flex";
}
</script>
</body>
</html>