From 858676782dbfb0ac1fde74067163b619baaf64e5 Mon Sep 17 00:00:00 2001
From: Yustina <yustina-r.inf25@ukwms.ac.id>
Date: Mon, 15 Dec 2025 23:33:58 +0700
Subject: [PATCH] edit:update music + countdown

---
 auth.php            |  69 ++++++++-----
 gameboard-hard.html | 234 +++++++++++++++++++++++++++++++++-----------
 index.php           |   3 -
 3 files changed, 219 insertions(+), 87 deletions(-)

diff --git a/auth.php b/auth.php
index 78e2417..416ee0e 100644
--- a/auth.php
+++ b/auth.php
@@ -20,54 +20,69 @@ if (isset($_POST['btn-register'])) {
     $password = $_POST['password'];
     $confirm  = $_POST['confirm_password'];
 
-    // Validasi sederhana
-    if (empty($username) || empty($email) || empty($password) || empty($confirm)) {
-        $_SESSION['error'] = "Semua kolom wajib diisi!";
-        header("Location: index.php");
+    // --- VALIDASI DASAR ---
+    
+    if (!$username || !$email || !$password || !$confirm) {
+        // Balik ke index dengan pesan error
+        header("Location: index.php?register_error=Data tidak boleh kosong");
+        exit;
+    }
+
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        header("Location: index.php?register_error=Format email tidak valid");
+        exit;
+    }
+
+    if (strlen($password) < 6) {
+        header("Location: index.php?register_error=Password minimal 6 karakter");
         exit;
     }
 
     if ($password !== $confirm) {
-        $_SESSION['error'] = "Konfirmasi password tidak cocok!";
-        header("Location: index.php");
+        header("Location: index.php?register_error=Konfirmasi password tidak cocok");
         exit;
     }
 
-    // Cek user sudah ada atau belum
+    // --- CEK DATABASE (USER SUDAH ADA?) ---
+    
     $cek = $conn->prepare("SELECT id FROM users WHERE username=? OR email=?");
     $cek->bind_param("ss", $username, $email);
     $cek->execute();
     $cek->store_result();
 
     if ($cek->num_rows > 0) {
-        $_SESSION['error'] = "Username atau Email sudah terdaftar!";
-        header("Location: index.php");
+        // INI YANG SEBELUMNYA MATI, SEKARANG REDIRECT:
+        header("Location: index.php?register_error=Username atau Email sudah terdaftar!");
         exit;
     }
     $cek->close();
-
-    // Insert ke database
+    
+    // --- INSERT DATA BARU ---
+    
     $hash = password_hash($password, PASSWORD_DEFAULT);
-    $insert = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
+    $insert = $conn->prepare("INSERT INTO users (username,email,password) VALUES (?,?,?)");
     $insert->bind_param("sss", $username, $email, $hash);
 
     if ($insert->execute()) {
-        $_SESSION['success'] = "Registrasi berhasil! Silakan login.";
+        // Register Berhasil -> Arahkan ke Login (atau mainboard)
+        // Kita kosongkan error agar masuk ke state normal
+        header("Location: index.php"); 
+        exit;
     } else {
-        $_SESSION['error'] = "Terjadi kesalahan sistem: " . $conn->error;
+        header("Location: index.php?register_error=Gagal mendaftar, coba lagi nanti.");
+        exit;
     }
 
     $insert->close();
-    header("Location: index.php"); // Kembali ke index
-    exit;
 }
 
 /* =====================================================
    LOGIN
-===================================================== */
+==================================================== */
+
 if (isset($_POST['btn-login'])) {
 
-    $username = trim($_POST['username']);
+    $username = $_POST['username'];
     $password = $_POST['password'];
 
     $stmt = $conn->prepare("SELECT * FROM users WHERE username=?");
@@ -77,16 +92,16 @@ if (isset($_POST['btn-login'])) {
     $result = $stmt->get_result();
     $user = $result->fetch_assoc();
 
-    if ($user && password_verify($password, $user['password'])) {
-        // Login Sukses
-        $_SESSION['user'] = $user;
-        header("Location: mainboard.php"); // Pastikan file ini ada!
-        exit;
-    } else {
-        // Login Gagal
-        $_SESSION['error'] = "Username atau Password salah!";
-        header("Location: index.php");
+    // Cek Password
+    if (!$user || !password_verify($password, $user['password'])) {
+        // Redirect dengan parameter 'error=gagal' agar ditangkap JS Login
+        header("Location: index.php?error=gagal");
         exit;
     }
+
+    // Login Sukses
+    $_SESSION['user'] = $user;
+    header("Location: mainboard.php");
+    exit;
 }
 ?>
\ No newline at end of file
diff --git a/gameboard-hard.html b/gameboard-hard.html
index 896e80f..37e35e5 100644
--- a/gameboard-hard.html
+++ b/gameboard-hard.html
@@ -19,6 +19,46 @@ body {
   flex-direction: column;
 }
 
+/* --- TAMBAHAN CSS COUNTDOWN & MUSIC CONTROL --- */
+#countdown-overlay {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0,0,0,0.85);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  color: white;
+  font-size: 150px;
+  font-weight: 800;
+  display: none;
+}
+
+.pulse-anim {
+  animation: pulse 1s ease-out infinite;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(2); opacity: 0; }
+}
+
+.music-control {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 100;
+  background: white;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  font-size: 20px;
+}
 
 .topbar {
   display: flex;
@@ -56,7 +96,6 @@ body {
   box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6);
 }
 
-
 .gameboard {
   flex: 1;
   display: grid;
@@ -65,9 +104,9 @@ body {
   gap: 8px;
   padding: 10px;
   box-sizing: border-box;
+  place-items: center;
 }
 
-
 .card {
   width: 100%;
   height: 100%;
@@ -84,7 +123,6 @@ body {
   border-radius: 10px;
 }
 
-
 .front, .back {
   position: absolute;
   width: 100%;
@@ -116,7 +154,6 @@ body {
   filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
 }
 
-
 .card:not(.flipped):hover .front {
   transform: scale(1.05);
   transition: 0.25s;
@@ -124,14 +161,12 @@ body {
 
 .card.flipped .inner { transform: rotateY(180deg); }
 
-
 .card.matched .front,
 .card.matched .back {
   border-color: #7affd6;
   box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8);
 }
 
-
 .combo-popup {
   position: absolute;
   padding: 12px 20px;
@@ -145,6 +180,7 @@ body {
   animation: comboFade 1.4s ease forwards;
   pointer-events: none;
   border: 2px solid rgba(255,255,255,0.35);
+  z-index: 100;
 }
 
 @keyframes comboFade {
@@ -208,6 +244,17 @@ body {
 </head>
 <body>
 
+<div id="countdown-overlay"></div>
+<audio id="bgMusic" loop src="music/music_background.mp3"></audio>
+<audio id="sfxClick" src="music/music-click.mp3"></audio>
+<audio id="sfxMatch" src="music/music-correct.mp3"></audio>
+<audio id="sfxWrong" src="music/music-incorrect.mp3"></audio>
+<audio id="sfxCountdown" src="music/music-countdown.mp3"></audio>
+<audio id="sfxWin" src="music/music-win.mp3"></audio>
+<audio id="sfxLose" src="music/music-lose.mp3"></audio>
+
+<div class="music-control" id="toggleMusic">🔇</div>
+
 <header class="topbar">
   <button class="back-btn" onclick="window.location.href='mainboard.html'">←</button>
   <div class="right-info">
@@ -218,29 +265,71 @@ body {
 </header>
 
 <div id="game-board" class="gameboard"></div>
+
 <div id="endScreen" class="end-screen">
   <div class="end-box">
-    <div class="end-title">🎉 Selamat!</div>
-    <p>Anda berhasil menyelesaikan permainan!</p>
+    <div id="endTitleDisplay" class="end-title">🎉 Selamat!</div>
+    <p id="endMsgDisplay">Anda berhasil menyelesaikan permainan!</p>
     <div class="score-row"><span>Skor Base:</span> <span id="baseScoreEnd">0</span></div>
     <div class="score-row"><span>Time Bonus:</span> <span id="timeBonusEnd">0</span></div>
     <div class="score-row"><span>Move Bonus:</span> <span id="moveBonusEnd">0</span></div>
     <hr>
-
     <div class="score-row" style="font-weight:700;">
       <span>Total Skor:</span>
       <span id="totalScoreEnd">0</span>
     </div>
-
     <button class="end-btn play-again" onclick="startGame()">🔁 Main Lagi</button>
     <button class="end-btn leaderboard">🏆 Lihat Leaderboard</button>
     <button class="end-btn back-menu" onclick="window.location.href='mainboard.html'">⬅ Kembali</button>
-
   </div>
 </div>
 
 <script>
+// --- KONFIGURASI AUDIO ---
+const bgMusic = document.getElementById("bgMusic");
+const sfxClick = document.getElementById("sfxClick");
+const sfxMatch = document.getElementById("sfxMatch");
+const sfxWrong = document.getElementById("sfxWrong");
+const sfxCountdown = document.getElementById("sfxCountdown");
+const sfxWin = document.getElementById("sfxWin");
+const sfxLose = document.getElementById("sfxLose");
+const toggleBtn = document.getElementById("toggleMusic");
+const overlay = document.getElementById("countdown-overlay");
 
+let musicMuted = true;
+
+function playSFX(audio) {
+    if(!musicMuted) {
+        audio.currentTime = 0;
+        audio.play().catch(() => {});
+    }
+}
+
+// Inisialisasi audio pada interaksi pertama
+function initAudio() {
+    if(musicMuted) {
+        musicMuted = false;
+        toggleBtn.textContent = "🔊";
+        bgMusic.play().catch(() => {});
+        document.removeEventListener('click', initAudio);
+    }
+}
+document.addEventListener('click', initAudio);
+
+toggleBtn.onclick = (e) => {
+    e.stopPropagation();
+    if (bgMusic.paused) {
+        bgMusic.play();
+        toggleBtn.textContent = "🔊";
+        musicMuted = false;
+    } else {
+        bgMusic.pause();
+        toggleBtn.textContent = "🔇";
+        musicMuted = true;
+    }
+};
+
+// --- LOGIKA GAME ASLI ---
 const images = [
   "images/fruit1.png",
   "images/fruit2.png",
@@ -268,10 +357,7 @@ let lastMatchTime = 0;
 function showComboPopup(targetCard, combo, bonus) {
   const popup = document.createElement("div");
   popup.className = "combo-popup";
-  popup.innerHTML = `
-      COMBO X${combo}<br>
-      <span style="font-size:14px;">+${bonus} Bonus</span>
-  `;
+  popup.innerHTML = `COMBO X${combo}<br><span style="font-size:14px;">+${bonus} Bonus</span>`;
   const rect = targetCard.getBoundingClientRect();
   popup.style.left = rect.left + rect.width / 2 + "px";
   popup.style.top = rect.top + "px";
@@ -283,46 +369,83 @@ function showComboPopup(targetCard, combo, bonus) {
 function shuffleDistant(cards, minDistance = 4) {
   let valid = false;
   let result;
-
   while (!valid) {
     result = [...cards].sort(() => Math.random() - 0.5);
     valid = true;
     const checked = new Set();
-
     for (let i = 0; i < result.length; i++) {
       const value = result[i];
       if (checked.has(value)) continue;
       checked.add(value);
-
       const firstIndex = result.indexOf(value);
       const lastIndex  = result.lastIndexOf(value);
       const distance = Math.abs(lastIndex - firstIndex);
-
-      if (distance < minDistance) {
-        valid = false;
-        break;
-      }
+      if (distance < minDistance) { valid = false; break; }
     }
   }
   return result;
 }
 
+// --- FUNGSI COUNTDOWN MENU ---
+function runCountdown(callback) {
+    let count = 3;
+    overlay.style.display = "flex";
+    overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
+    playSFX(sfxCountdown);
+
+    let cdTimer = setInterval(() => {
+        count--;
+        if (count > 0) {
+            overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
+            playSFX(sfxCountdown);
+        } else if (count === 0) {
+            overlay.innerHTML = `<span class="pulse-anim">GO!</span>`;
+        } else {
+            clearInterval(cdTimer);
+            overlay.style.display = "none";
+            callback();
+        }
+    }, 1000);
+}
+
 function startTimer() {
   timerStarted = true;
   countdown = setInterval(() => {
     document.getElementById("timer").textContent = --time;
     if (time <= 0) {
       clearInterval(countdown);
-      document.getElementById("endScreen").style.display = "flex";
+      showEndScreen(false); // Kalah
     }
   }, 1000);
 }
 
+function showEndScreen(isWin) {
+    clearInterval(countdown);
+    bgMusic.pause();
+    
+    if(isWin) playSFX(sfxWin); else playSFX(sfxLose);
+
+    document.getElementById("endTitleDisplay").textContent = isWin ? "🎉 Selamat!" : "⏰ Waktu Habis!";
+    document.getElementById("endMsgDisplay").textContent = isWin ? "Anda berhasil menyelesaikan permainan!" : "Coba lagi lain kali!";
+
+    let baseScore = score;
+    let timeBonus = isWin ? time * 5 : 0;
+    let moveBonus = isWin ? Math.max(0, 200 - moves * 10) : 0;
+    let total = baseScore + timeBonus + moveBonus;
+
+    document.getElementById("baseScoreEnd").textContent = baseScore;
+    document.getElementById("timeBonusEnd").textContent = "+" + timeBonus;
+    document.getElementById("moveBonusEnd").textContent = "+" + moveBonus;
+    document.getElementById("totalScoreEnd").textContent = total;
+    document.getElementById("endScreen").style.display = "flex";
+}
+
 function flipCard(card) {
   if (!timerStarted) startTimer();
   if (flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped"))
     return;
 
+  playSFX(sfxClick);
   card.classList.add("flipped");
   flipped.push(card);
 
@@ -334,8 +457,8 @@ function flipCard(card) {
     let img2 = flipped[1].querySelector("img").src;
 
     if (img1 === img2) {
+      playSFX(sfxMatch);
       const now = Date.now();
-
       if (!pendingMatch) {
         pendingMatch = true;
         combo = 1;
@@ -347,24 +470,18 @@ function flipCard(card) {
           showComboPopup(flipped[0], combo, comboBonus);
         } else combo = 1;
       }
-
       lastMatchTime = now;
-
       flipped.forEach(c => c.classList.add("matched"));
-
       score += 50;
       document.getElementById("score").textContent = score;
-
       time += 5;
       document.getElementById("timer").textContent = time;
-
       flipped = [];
-
       if (document.querySelectorAll(".matched").length === cards.length) {
-        setTimeout(() => document.getElementById("endScreen").style.display = "flex", 500);
+        setTimeout(() => showEndScreen(true), 500);
       }
-
     } else {
+      playSFX(sfxWrong);
       setTimeout(() => {
         flipped.forEach(c => c.classList.remove("flipped"));
         flipped = [];
@@ -378,34 +495,37 @@ function startGame() {
   const board = document.getElementById("game-board");
   board.innerHTML = "";
 
-  shuffleDistant(cards, 4).forEach(image => {
-    const card = document.createElement("div");
-    card.className = "card";
-    card.innerHTML = `
-      <div class="inner">
-        <div class="front">?</div>
-        <div class="back"><img src="${image}"></div>
-      </div>
-    `;
-    card.onclick = () => flipCard(card);
-    board.appendChild(card);
+  runCountdown(() => {
+    if(!musicMuted) bgMusic.play().catch(() => {});
+    shuffleDistant(cards, 4).forEach(image => {
+        const card = document.createElement("div");
+        card.className = "card";
+        card.innerHTML = `
+          <div class="inner">
+            <div class="front">?</div>
+            <div class="back"><img src="${image}"></div>
+          </div>
+        `;
+        card.onclick = () => flipCard(card);
+        board.appendChild(card);
+    });
+
+    time = 60;
+    moves = 0;
+    score = 0;
+    combo = 1;
+    pendingMatch = false;
+    flipped = [];
+    timerStarted = false;
+
+    document.getElementById("timer").textContent = time;
+    document.getElementById("moves").textContent = moves;
+    document.getElementById("score").textContent = score;
   });
-
-  time = 60;
-  moves = 0;
-  score = 0;
-  combo = 1;
-  pendingMatch = false;
-  flipped = [];
-  timerStarted = false;
-
-  document.getElementById("timer").textContent = time;
-  document.getElementById("moves").textContent = moves;
-  document.getElementById("score").textContent = score;
 }
 
 startGame();
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/index.php b/index.php
index bad5891..0866633 100644
--- a/index.php
+++ b/index.php
@@ -4,11 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login & Register - Memory Game</title>
-
     <link rel="stylesheet" href="/Kelompok02-Memory-Card/assets/style.css">
 </head>
 <body>
-
     <img src="images/fruit1.png" class="fruit f1"><img src="images/fruit2.png" class="fruit f2">
     <img src="images/fruit3.png" class="fruit f3"><img src="images/fruit4.png" class="fruit f4">
     <img src="images/fruit5.png" class="fruit f5"><img src="images/fruit6.png" class="fruit f6">
@@ -18,7 +16,6 @@
     <div class="auth-card" id="authCard">
         <div class="form-wrapper">
             <div class="forms-container">
-
                 <form id="loginForm" action="auth.php" method="POST">
                     <h2>Selamat Datang! ✨</h2>
                     <p class="subtitle">Login untuk bermain</p>