last

assets/game.js

@@ -0,0 +1,65 @@
+const player = document.getElementById("player");
+const block = document.getElementById("block");
+const scoreText = document.getElementById("scoreText");
+
+let score = 0;
+let playerX = 180;
+
+// KECEPATAN (DIUBAH)
+let speed = 1;             
+let speedIncrease = 0.6;   
+let maxSpeed = 12;         
+
+document.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowLeft" && playerX > 0) {
+        playerX -= 20;
+    }
+    if (e.key === "ArrowRight" && playerX < 360) {
+        playerX += 20;
+    }
+    player.style.left = playerX + "px";
+});
+
+function moveBlock() {
+    let blockY = -40;
+    let blockX = Math.floor(Math.random() * 360);
+    block.style.left = blockX + "px";
+
+    let fall = setInterval(() => {
+        blockY += speed;
+        block.style.top = blockY + "px";
+
+        // TABRAKAN
+        if (
+            blockY > 450 &&
+            blockX < playerX + 40 &&
+            blockX + 40 > playerX
+        ) {
+            alert("Game Over! Score: " + score);
+            score = 0;
+            speed = 1; // reset ke pelan (DIUBAH)
+            scoreText.textContent = "Score: 0";
+            clearInterval(fall);
+            moveBlock();
+        }
+
+        // BLOCK LOLOS
+        if (blockY > 500) {
+            score++;
+            scoreText.textContent = "Score: " + score;
+
+            // NAIK BERTAHAP (TERASA)
+            if (speed < maxSpeed) {
+                speed += speedIncrease;
+            }
+
+            blockY = -40;
+            block.style.top = "-40px";
+            clearInterval(fall);
+            moveBlock();
+        }
+
+    }, 16); // DIUBAH: lebih smooth (60 FPS)
+}
+
+moveBlock();

assets/style.css

@@ -0,0 +1,196 @@
+/* ============================
+   GLOBAL STYLE
+============================ */
+body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #1b1b1b, #2a2a2a);
+    color: #f5f5f5;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+/* ============================
+   AUTH BOX (Login / Register)
+============================ */
+.box {
+    background: #1f1f1f;
+    margin: 100px auto;
+    width: 350px;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0px 0px 20px rgba(0, 150, 255, 0.2);
+    animation: fadeIn 0.6s ease-in-out;
+}
+
+.box h2 {
+    margin-bottom: 20px;
+    color: #00aaff;
+    letter-spacing: 1px;
+}
+
+input, button {
+    padding: 12px;
+    margin: 8px 0;
+    width: 90%;
+    border-radius: 10px;
+    border: none;
+    outline: none;
+    font-size: 15px;
+}
+
+input {
+    background: #2e2e2e;
+    color: white;
+}
+
+button {
+    background: #007bff;
+    color: white;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+button:hover {
+    background: #005fcc;
+    transform: scale(1.03);
+}
+
+/* ============================
+   GAME AREA
+============================ */
+#gameArea {
+    width: 400px;
+    height: 500px;
+    background: #111;
+    border-radius: 15px;
+    margin: 30px auto;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid #00aaff;
+    box-shadow: 0px 0px 25px rgba(0, 170, 255, 0.4);
+    animation: fadeIn 0.8s;
+}
+
+/* Player */
+#player {
+    width: 40px;
+    height: 40px;
+    background: cyan;
+    position: absolute;
+    bottom: 10px;
+    left: 180px;
+    border-radius: 8px;
+}
+
+
+/* Falling Block */
+#block {
+    width: 45px;
+    height: 45px;
+    background: linear-gradient(135deg, #ff4d4d, #ff0000);
+    border-radius: 10px;
+    position: absolute;
+    top: -50px;
+    left: 180px;
+    box-shadow: 0 0 12px rgba(255, 50, 50, 0.8);
+}
+
+/* ============================
+   TOP BAR (Game Page)
+============================ */
+.top-bar {
+    margin-top: 20px;
+    background: #1f1f1f;
+    width: 100%;
+    padding: 15px 0;
+    color: #00d0ff;
+    font-size: 18px;
+    box-shadow: 0 3px 15px rgba(0, 150, 255, 0.2);
+}
+
+.top-bar a {
+    color: #ff5252;
+    margin-left: 15px;
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+.top-bar a:hover {
+    color: #ff7777;
+}
+
+/* ================= POPUP GAME OVER ================= */
+#gameOverPopup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.popup-box {
+    background: #1e1e1e;
+    padding: 30px;
+    width: 300px;
+    text-align: center;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.5);
+    animation: popIn 0.25s ease-out;
+}
+
+.popup-box h2 {
+    margin-bottom: 10px;
+}
+
+.popup-box button {
+    width: 130px;
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin: 5px;
+}
+
+#btnRestart {
+    background: #0aa4ff;
+    color: white;
+}
+
+#btnMenu {
+    background: #00d37e;
+    color: white;
+}
+#btnMenu:hover {
+    background: #00b86b;
+}
+
+@keyframes popIn {
+    from { transform: scale(0.6); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+/* ============================
+   SCORE TEXT
+============================ */
+#scoreText {
+    font-size: 26px;
+    font-weight: bold;
+    margin-top: 10px;
+    color: #00eaff;
+    text-shadow: 0px 0px 10px rgba(0, 200, 255, 0.7);
+}
+
+/* ============================
+   ANIMATIONS
+============================ */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}

db.php

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <?php
 $host = "localhost";
 $user = "root";
@@ -10,3 +11,17 @@ if ($conn->connect_error) {
     die("Koneksi gagal: " . $conn->connect_error);
 }
 ?>
+=======
+<?php
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "dodge_game";
+
+$conn = new mysqli($host, $user, $pass, $db);
+
+if ($conn->connect_error) {
+    die("Koneksi gagal: " . $conn->connect_error);
+}
+?>
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

db.sql

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 
 USE dodge_game;
 
@@ -6,3 +7,13 @@ CREATE TABLE users (
     username VARCHAR(50) UNIQUE,
     password VARCHAR(255)
 );
+=======
+
+USE dodge_game;
+
+CREATE TABLE users (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) UNIQUE,
+    password VARCHAR(255)
+);
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

game.php

@@ -1,3 +1,321 @@
+<<<<<<< HEAD
+<?php
+session_start();
+if (!isset($_SESSION['user'])) {
+    header("Location: index.php");
+    exit;
+}
+$username = $_SESSION['user'];
+// koneksi db
+$conn = new mysqli("localhost", "root", "", "dodge_game");
+// Ambil skin user dari database
+$q = $conn->query("SELECT skin FROM users WHERE username='$username'");
+$skinColor = $q->fetch_assoc()["skin"];
+// Daftar warna skin
+$skinList = [
+    "cyan" => "#00ffff",
+    "blue" => "#0066ff",
+    "yellow" => "#ffee00",
+    "purple" => "#ff55ff",
+    "green" => "#33ff55"
+];
+// Warna player yang dipakai
+$playerColor = $skinList[$skinColor];
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hindari Block Multi</title>
+    <style>
+        body {
+            font-family: Arial;
+            background: url('assets/bg.jpg') no-repeat center center fixed;
+            background-size: cover;
+            color: white;
+            margin: 0;
+            display: flex;
+        }
+        #gameWrapper {
+            width: 75%;
+            padding: 20px;
+            text-align: center;
+        }
+        #gameArea {
+            width: 400px;
+            height: 500px;
+            background: #222;
+            margin: 0 auto;
+            position: relative;
+            overflow: hidden;
+            border-radius: 10px;
+            box-shadow: 0 0 10px #000;
+        }
+        #player {
+            width: 40px;
+            height: 40px;
+            background: <?= $playerColor ?>;
+            position: absolute;
+            bottom: 10px;
+            left: 180px;
+            border-radius: 8px;
+        }
+        .block {
+            width: 40px;
+            height: 40px;
+            background: red;
+            position: absolute;
+            border-radius: 8px;
+        }
+        #leaderboard {
+            width: 25%;
+            padding: 20px;
+            background: #111;
+            border-left: 2px solid #333;
+            height: 100vh;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        th, td {
+            padding: 8px;
+            border-bottom: 1px solid #333;
+        }
+        /* ===== POPUP GAME OVER ===== */
+        #gameOverPopup {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.7);
+            justify-content: center;
+            align-items: center;
+        }
+        .popup-box {
+            background: #222;
+            padding: 25px;
+            border-radius: 10px;
+            text-align: center;
+            width: 300px;
+            box-shadow: 0 0 10px #000;
+        }
+        .popup-box button {
+            margin-top: 15px;
+            padding: 10px;
+            width: 120px;
+            border: none;
+            cursor: pointer;
+            font-size: 16px;
+            border-radius: 6px;
+            background: #00d37e;
+        }
+    </style>
+</head>
+<body>
+<div id="gameWrapper">
+    <h1>Hindari Block Multi</h1>
+    <p>Player: <b><?= $username ?></b></p>
+    <div class="score-box">Score: <span id="score">0</span></div>
+    <div id="gameArea">
+        <div id="player"></div>
+    </div>
+    <p>Credits: Haekal Adi Rendra & Gerrad</p>
+</div>
+<div id="leaderboard">
+    <h2>Leaderboard</h2>
+    <table>
+        <tr>
+            <th>User</th>
+            <th>Score</th>
+        </tr>
+        <?php
+        $result = $conn->query("SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 20");
+        while ($row = $result->fetch_assoc()) {
+            echo "<tr><td>{$row['username']}</td><td>{$row['score']}</td></tr>";
+        }
+        ?>
+    </table>
+</div>
+
+<!-- ========= POPUP GAME OVER ========= -->
+<div id="gameOverPopup">
+    <div class="popup-box">
+        <h2>Game Over</h2>
+        <p>Score Kamu: <span id="finalScore"></span></p>
+        <button id="btnRestart">New Game</button>
+        <button id="btnmenu">Menu</button>
+    </div>
+</div>
+
+<audio id="soundMove" src="assets/sound/move.wav"></audio>
+<audio id="soundScore" src="assets/sound/score.wav"></audio>
+<audio id="soundGameOver" src="assets/sound/gameover.wav"></audio>
+
+<script>
+let currentUser = "<?= $username ?>";
+
+// ========= AUDIO =========
+const soundMove = document.getElementById("soundMove");
+const soundScore = document.getElementById("soundScore");
+const soundGameOver = document.getElementById("soundGameOver");
+
+// ========= GAME VARIABLES =========
+const player = document.getElementById("player");
+const gameArea = document.getElementById("gameArea");
+let score = 0;
+let gameRunning = true;
+let blockSpeed = 2;
+const maxBlockSpeed = 14;
+let blocks = [];
+
+// ========= CREATE MULTIPLE BLOCKS AT ONCE =========
+function spawnBlocks() {
+    if (!gameRunning) return;
+
+    // Tentukan jumlah block yang akan muncul (1–3)
+    let blockCount = 1;
+    if (score >= 300) blockCount = Math.floor(Math.random() * 2) + 2; // 2–3
+    else if (score >= 150) blockCount = Math.floor(Math.random() * 2) + 1; // 1–2
+    else if (score >= 50) blockCount = Math.random() < 0.3 ? 2 : 1; // 30% chance 2 block
+    // score < 50 → selalu 1
+
+    const usedPositions = []; // agar tidak tumpang tindih
+
+    for (let i = 0; i < blockCount; i++) {
+        let leftPos;
+        let attempts = 0;
+        do {
+            leftPos = Math.floor(Math.random() * 10) * 40; // grid: 0,40,80,...,360
+            attempts++;
+        } while (usedPositions.includes(leftPos) && attempts < 20);
+
+        if (attempts >= 20) continue; // skip jika terlalu sulit cari posisi
+
+        usedPositions.push(leftPos);
+
+        let newBlock = document.createElement("div");
+        newBlock.classList.add("block");
+        newBlock.style.top = "-60px";
+        newBlock.style.left = leftPos + "px";
+        gameArea.appendChild(newBlock);
+        blocks.push(newBlock);
+    }
+}
+
+// ========= PLAYER MOVEMENT (grid 40px) =========
+document.addEventListener("keydown", e => {
+    if (!gameRunning) return;
+    let left = parseInt(player.style.left) || 180;
+
+    if (e.key === "ArrowLeft" && left > 0) {
+        player.style.left = (left - 40) + "px";
+        soundMove.currentTime = 0;
+        soundMove.play();
+    }
+    if (e.key === "ArrowRight" && left < 360) {
+        player.style.left = (left + 40) + "px";
+        soundMove.currentTime = 0;
+        soundMove.play();
+    }
+});
+
+// ========= UPDATE SPEED =========
+function updateBlockSpeed() {
+    blockSpeed = 2 + Math.floor(score / 18);
+    if (blockSpeed > maxBlockSpeed) blockSpeed = maxBlockSpeed;
+}
+
+// ========= SPAWN INTERVAL (dinamis) =========
+let spawnDelay = 1400;
+
+function startSpawner() {
+    spawnBlocks(); // spawn pertama
+    setInterval(() => {
+        if (gameRunning) {
+            spawnBlocks();
+
+            // Percepat spawn sesuai score
+            if (score >= 400) spawnDelay = 400;
+            else if (score >= 300) spawnDelay = 500;
+            else if (score >= 200) spawnDelay = 600;
+            else if (score >= 100) spawnDelay = 800;
+            else if (score >= 50) spawnDelay = 1000;
+        }
+    }, spawnDelay);
+}
+
+startSpawner();
+
+// Spawn tambahan di awal agar langsung ramai
+setTimeout(() => spawnBlocks(), 800);
+setTimeout(() => spawnBlocks(), 1600);
+
+// ========= GAME LOOP =========
+function fall() {
+    if (!gameRunning) return;
+
+    const playerLeft = parseInt(player.style.left) || 180;
+
+    blocks = blocks.filter(block => {
+        let top = parseInt(block.style.top || -60);
+        let left = parseInt(block.style.left);
+
+        top += blockSpeed;
+        block.style.top = top + "px";
+
+        // Collision
+        if (top >= 450 && top <= 490 && Math.abs(left - playerLeft) < 40) {
+            gameRunning = false;
+            soundGameOver.play();
+            saveScore(score);
+            showGameOver(score);
+            return false;
+        }
+
+        // Lolos bawah
+        if (top > 550) {
+            score += 10;
+            document.getElementById("score").innerText = score;
+            updateBlockSpeed();
+            soundScore.currentTime = 0;
+            soundScore.play();
+            block.remove();
+            return false;
+        }
+
+        return true;
+    });
+
+    requestAnimationFrame(fall);
+}
+fall();
+
+// ========= SAVE SCORE =========
+function saveScore(finalScore) {
+    fetch("save_score.php", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: "username=" + encodeURIComponent(currentUser) + "&score=" + finalScore
+    });
+}
+
+// ========= GAME OVER POPUP =========
+const popup = document.getElementById("gameOverPopup");
+const finalScoreText = document.getElementById("finalScore");
+
+document.getElementById("btnRestart").onclick = () => location.reload();
+document.getElementById("btnmenu").onclick = () => location.href = "menu.php";
+
+function showGameOver(finalScore) {
+    finalScoreText.textContent = finalScore;
+    popup.style.display = "flex";
+}
+</script>
+</body>
+</html>
+=======
 <?php
 session_start();
 if (!isset($_SESSION['user'])) {
@@ -293,3 +611,4 @@ btnmenu.onclick = () => {
 
 </body>
 </html>
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

index.php

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <?php
 session_start();
 require 'db.php';   
@@ -43,3 +44,50 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
 </div>
 </body>
 </html>
+=======
+<?php
+session_start();
+require 'db.php';   
+
+$message = "";
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+
+    $query = $conn->query("SELECT * FROM users WHERE username='$username'");
+    
+    if ($query->num_rows > 0) {
+        $row = $query->fetch_assoc();
+        if (password_verify($password, $row['password'])) {
+            $_SESSION['user'] = $row['username'];
+            header("Location: menu.php"); // ⬅ KE MENU BUKAN GAME
+            exit;
+        } else {
+            $message = "Password salah!";
+        }
+    } else {
+        $message = "Username tidak ditemukan!";
+    }
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+<title>Login</title>
+<link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+<div class="box">
+<h2>Login</h2>
+<form method="POST">
+<input type="text" name="username" placeholder="Username" required><br>
+<input type="password" name="password" placeholder="Password" required><br>
+<button type="submit">Masuk</button>
+</form>
+<p><?= $message ?></p>
+<a href="register.php">Register</a>
+</div>
+</body>
+</html>
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

logout.php

@@ -1,4 +1,11 @@
+<<<<<<< HEAD
 <?php
 session_start();
 session_destroy();
 header("Location: index.php");
+=======
+<?php
+session_start();
+session_destroy();
+header("Location: index.php");
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

menu.php

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <?php
 session_start();
 if (!isset($_SESSION['user'])) {
@@ -95,3 +96,102 @@ function closeSettings() {
 
 </body>
 </html>
+=======
+<?php
+session_start();
+if (!isset($_SESSION['user'])) {
+    header("Location: index.php");
+    exit;
+}
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Menu Utama</title>
+<link rel="stylesheet" href="assets/style.css">
+
+<style>
+    /* Popup background */
+    #settingsPopup {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.7);
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* Popup box */
+    .popup-box {
+        background: #1e1e1e;
+        width: 350px;
+        padding: 20px;
+        border-radius: 12px;
+        text-align: center;
+        color: white;
+        box-shadow: 0 0 20px black;
+    }
+
+    .popup-option {
+        width: 100%;
+        padding: 12px;
+        margin-top: 8px;
+        border: none;
+        border-radius: 8px;
+        font-size: 15px;
+        cursor: pointer;
+    }
+</style>
+
+</head>
+
+<body>
+
+<div class="box" style="width: 350px;">
+    <h2>Menu Utama</h2>
+    <p>Halo, <b><?= $_SESSION['user'] ?></b></p>
+
+    <a href="game.php">
+        <button style="width: 100%;">Mulai Game</button>
+    </a>
+
+    <!-- Tombol Settings membuka popup -->
+    <button onclick="openSettings()" style="width: 100%; background:#00d37e;">Pengaturan</button>
+
+    <a href="logout.php">
+        <button style="width: 100%; background: #ff4d4d;">Keluar</button>
+    </a>
+</div>
+
+
+<!-- ================= SETTINGS POPUP ================== -->
+<div id="settingsPopup">
+    <div class="popup-box">
+        <h2>Pengaturan</h2>
+
+        <a href="skins.php">
+            <button class="popup-option" style="background:#ffaa00;">Pilih Skin</button>
+        </a>
+
+        <button class="popup-option" onclick="closeSettings()" style="background:#555;">Kembali</button>
+    </div>
+</div>
+
+
+<script>
+function openSettings() {
+    document.getElementById("settingsPopup").style.display = "flex";
+}
+
+function closeSettings() {
+    document.getElementById("settingsPopup").style.display = "none";
+}
+</script>
+
+</body>
+</html>
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

readme.md

@@ -1,7 +0,0 @@
-Kelompok 1 
-
-Nama Anggota: 
-
-Haekal - ( Mengcoding css )
-Adi - (mengcoding javascript )
-Rendra & Gerrad - ( mengcoding html dan php )

register.php

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <?php
 require 'db.php';
 
@@ -41,3 +42,48 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
 </div>
 </body>
 </html>
+=======
+<?php
+require 'db.php';
+
+$message = "";
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $username = $_POST['username'];
+    $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
+
+    $check = $conn->query("SELECT * FROM users WHERE username='$username'");
+    if ($check->num_rows > 0) {
+        $message = "Username sudah digunakan!";
+    } else {
+        $sql = "INSERT INTO users(username, password) VALUES('$username', '$password')";
+        if ($conn->query($sql)) {
+            header("Location: index.php");
+            exit;
+        } else {
+            $message = "Gagal registrasi!";
+        }
+    }
+}
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Register</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+<div class="box">
+    <h2>Register</h2>
+    <form method="POST">
+        <input type="text" name="username" placeholder="Username" required><br>
+        <input type="password" name="password" placeholder="Password" required><br>
+        <button type="submit">Daftar</button>
+    </form>
+    <p><?= $message ?></p>
+    <a href="index.php">Login</a>
+</div>
+</body>
+</html>
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

save_score.php

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <?php
 session_start();
 $conn = new mysqli("localhost", "root", "", "dodge_game");
@@ -22,3 +23,29 @@ if ($check->num_rows > 0) {
 
 echo "OK";
 ?>
+=======
+<?php
+session_start();
+$conn = new mysqli("localhost", "root", "", "dodge_game");
+
+if ($conn->connect_error) {
+    die("DB Error: " . $conn->connect_error);
+}
+
+$username = $_POST['username'];
+$score = intval($_POST['score']);
+
+// cek jika user sudah punya skor sebelumnya
+$check = $conn->query("SELECT * FROM leaderboard WHERE username='$username'");
+
+if ($check->num_rows > 0) {
+    // update jika score baru lebih tinggi
+    $conn->query("UPDATE leaderboard SET score=GREATEST(score, $score) WHERE username='$username'");
+} else {
+    // insert jika belum ada
+    $conn->query("INSERT INTO leaderboard (username, score) VALUES ('$username', $score)");
+}
+
+echo "OK";
+?>
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4

skins.php

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <?php
 session_start();
 if (!isset($_SESSION['user'])) {
@@ -131,4 +132,139 @@ boxes.forEach((box, index) => {
 </script>
 
 </body>
+=======
+<?php
+session_start();
+if (!isset($_SESSION['user'])) {
+    header("Location: index.php");
+    exit;
+}
+
+$conn = new mysqli("localhost", "root", "", "dodge_game");
+$user = $_SESSION['user'];
+
+// AMBIL SKIN USER SEKARANG
+$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
+$currentSkin = $qSkin->fetch_assoc()['skin'];
+
+// LIST SKIN
+$skins = [
+    "cyan" => "#00ffff",
+    "blue" => "#0066ff",
+    "yellow" => "#ffee00",
+    "purple" => "#ff55ff",
+    "green" => "#33ff55"
+];
+
+// AMBIL SKIN USER
+$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
+$data = $qSkin->fetch_assoc();
+
+// PROSES SIMPAN SKIN
+if (isset($_POST['chooseSkin'])) {
+    $selectedSkin = $_POST['skin'];
+    $conn->query("UPDATE users SET skin='$selectedSkin' WHERE username='$user'");
+    $currentSkin = $selectedSkin;
+}
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Pilih Skin</title>
+<link rel="stylesheet" href="assets/style.css">
+
+<style>
+body {
+    text-align: center;
+    padding-top: 40px;
+    color: white;
+}
+
+.skin-container {
+    margin-top: 20px;
+}
+
+.skin-box {
+    width: 90px;
+    height: 90px;
+    border-radius: 12px;
+    display: inline-block;
+    margin: 12px;
+    cursor: pointer;
+    transition: 0.2s;
+    border: 4px solid transparent;
+}
+
+.skin-box:hover {
+    transform: scale(1.1);
+}
+
+.skin-selected {
+    border: 4px solid #fff;
+    box-shadow: 0 0 15px white;
+}
+
+.hidden-radio {
+    display: none;
+}
+</style>
+</head>
+
+<body>
+
+<h2>Pilih Skin Pemain</h2>
+
+<form method="POST">
+
+<div class="skin-container">
+
+<?php foreach ($skins as $name => $color): ?>
+    <label>
+        <input 
+            type="radio" 
+            name="skin" 
+            class="hidden-radio"
+            value="<?= $name ?>" 
+            <?= $currentSkin == $name ? "checked" : "" ?>
+        >
+        <div 
+            class="skin-box <?= $currentSkin == $name ? "skin-selected" : "" ?>"
+            style="background: <?= $color ?>"
+        ></div>
+    </label>
+<?php endforeach; ?>
+
+</div>
+
+<br><br>
+<button type="submit" name="chooseSkin" style="width:250px;">Simpan Skin</button>
+
+</form>
+
+<a href="menu.php">
+    <button style="width:250px; background:#555; margin-top:20px;">Kembali</button>
+</a>
+
+<script>
+// AUTO HIGHLIGHT SKIN KETIKA DIPILIH
+const radios = document.querySelectorAll("input[name='skin']");
+const boxes = document.querySelectorAll(".skin-box");
+
+boxes.forEach((box, index) => {
+    box.addEventListener("click", () => {
+        // pilih radio
+        radios[index].checked = true;
+
+        // remove highlight
+        boxes.forEach(b => b.classList.remove("skin-selected"));
+
+        // add highlight ke yang dipilih
+        box.classList.add("skin-selected");
+    });
+});
+</script>
+
+</body>
+>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
 </html>