Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card

gameboard-easy.html

@@ -129,13 +129,12 @@ body {
   box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8);
 }
 
-/* === COMBO POPUP TANPA ICON === */
+/* COMBO POPUP */
 .combo-popup {
   position: absolute;
   padding: 12px 20px;
   background: linear-gradient(135deg, rgba(255,95,109,0.92), rgba(255,0,102,0.92));
   border-radius: 14px;
-  backdrop-filter: none;
   color: white;
   font-weight: 800;
   text-align: center;
@@ -147,18 +146,66 @@ body {
 }
 
 @keyframes comboFade {
-  0% {
+  0% { opacity: 0; transform: translate(-50%, -10px) scale(0.7); }
-    opacity: 0;
+  20% { opacity: 1; transform: translate(-50%, -30px) scale(1); }
-    transform: translate(-50%, -10px) scale(0.7);
+  100% { opacity: 0; transform: translate(-50%, -80px) scale(1.1); }
-  }
+}
-  20% {
+
-    opacity: 1;
+/* END SCREEN */
-    transform: translate(-50%, -30px) scale(1);
+.end-screen {
-  }
+  position: fixed;
-  100% {
+  top: 0;
-    opacity: 0;
+  left: 0;
-    transform: translate(-50%, -80px) scale(1.1);
+  width: 100%;
-  }
+  height: 100%;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(7px);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 200;
+}
+
+.end-box {
+  width: 80%;
+  max-width: 380px;
+  background: white;
+  border-radius: 22px;
+  padding: 20px;
+  text-align: center;
+  animation: fadeIn 0.4s ease;
+}
+
+.end-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.score-row {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0;
+  font-size: 18px;
+}
+
+.end-btn {
+  width: 100%;
+  padding: 12px;
+  border-radius: 16px;
+  border: none;
+  font-size: 18px;
+  margin-top: 10px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.play-again { background: #b700ff; color: white; }
+.leaderboard { background: gold; }
+
+@keyframes fadeIn {
+  from { opacity:0; transform: scale(0.8); }
+  to { opacity:1; transform: scale(1); }
 }
 </style>
 </head>
@@ -175,6 +222,28 @@ body {
 
 <div id="game-board" class="gameboard"></div>
 
+<!-- END SCREEN -->
+<div id="endScreen" class="end-screen">
+  <div class="end-box">
+    <div class="end-title">🎉 Selamat!</div>
+    <p>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>
+  </div>
+</div>
+
 <script>
 const images = [
   "asset/alpukat.jpg",
@@ -197,13 +266,11 @@ let combo = 1;
 let lastMatchTime = 0;
 let pendingMatch = false;
 
-/* === POPUP COMBO TANPA ICON === */
 function showComboPopup(targetCard, combo, bonus) {
   const popup = document.createElement("div");
   popup.className = "combo-popup";
-
   popup.innerHTML = `
-      COMBO x${combo}!<br>
+      COMBO X${combo}<br>
       <span style="font-size:14px; opacity:0.9;">+${bonus} Bonus</span>
   `;
 
@@ -229,14 +296,29 @@ function startTimer() {
   timerStarted = true;
   countdown = setInterval(() => {
     document.getElementById("timer").textContent = --time;
-    if(time <= 0){
+    if (time <= 0) {
       clearInterval(countdown);
-      alert("Waktu habis!");
+      showEndScreen();
-      document.querySelectorAll(".card").forEach(c => c.classList.add("flipped"));
     }
   }, 1000);
 }
 
+function showEndScreen() {
+  clearInterval(countdown);
+
+  let baseScore = score;
+  let timeBonus = time * 5;
+  let moveBonus = Math.max(0, 200 - moves * 10);
+  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"))
@@ -253,15 +335,13 @@ function flipCard(card) {
     let img2 = flipped[1].querySelector(".back img").src;
 
     if (img1 === img2) {
-
       const now = Date.now();
 
-      /* === SISTEM COMBO === */
       if (!pendingMatch) {
         pendingMatch = true;
         combo = 1;
       } else {
-        if (now - lastMatchTime <= 1500) {
+        if (now - lastMatchTime <= 3000) {
           combo++;
           let comboBonus = 10 * combo;
           score += comboBonus;
@@ -275,14 +355,20 @@ function flipCard(card) {
       }
 
       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(showEndScreen, 600);
+      }
+
     } else {
       setTimeout(() => {
         flipped.forEach(c => c.classList.remove("flipped"));
@@ -293,6 +379,8 @@ function flipCard(card) {
 }
 
 function startGame() {
+  document.getElementById("endScreen").style.display = "none";
+
   const board = document.getElementById("game-board");
   board.innerHTML = "";
   const shuffledCards = shuffleArray([...cards]);
@@ -328,5 +416,6 @@ function startGame() {
 
 startGame();
 </script>
+
 </body>
 </html>