From d753faf96d668c136d3f27e5ce4cb9e4deea06cb 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

---
 gameboard-hard.html | 234 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 177 insertions(+), 57 deletions(-)
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
