adding score

assets/gameboard-easy.css

@@ -243,7 +243,7 @@ body {
 
 @media (max-width: 700px) {
   .gameboard {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     padding: 12px;
     gap: 10px;
   }

assets/gameboard-easy.js

@@ -1,4 +1,4 @@
-// --- KONFIGURASI AUDIO & DOM ---
+// --- AUDIO CONFIG ---
 const bgMusic = document.getElementById("bgMusic");
 const sfxClick = document.getElementById("sfxClick");
 const sfxMatch = document.getElementById("sfxMatch");
@@ -7,21 +7,26 @@ 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");
+const countdownOverlay = document.getElementById("countdown-overlay");
 
 let musicMuted = true;
 
-// AUTO-PLAY PADA INTERAKSI PERTAMA
+function playSFX(audio) {
-function initAudio() {
+    if(!musicMuted) {
-    if(musicMuted) {
+        audio.currentTime = 0;
-        bgMusic.play().catch(() => {});
+        audio.play().catch(() => {});
-        bgMusic.volume = 0.5;
-        toggleBtn.textContent = "🔊";
-        musicMuted = false;
-        document.removeEventListener('click', initAudio);
     }
 }
-document.addEventListener('click', initAudio);
+
+// Interaksi pertama untuk aktifkan suara
+document.addEventListener('click', function initAudio() {
+    if(musicMuted) {
+        musicMuted = false;
+        toggleBtn.textContent = "🔊";
+        bgMusic.play().catch(() => {});
+        document.removeEventListener('click', initAudio);
+    }
+});
 
 toggleBtn.onclick = (e) => {
     e.stopPropagation();
@@ -35,17 +40,13 @@ toggleBtn.onclick = (e) => {
     musicMuted = !musicMuted;
 };
 
-function playSFX(audio) {
+// --- GAME LOGIC ---
-    if(!musicMuted) {
+// UBAHAN DISINI: Hanya pakai 6 Gambar (Fruit 1-6)
-        audio.currentTime = 0;
+// 6 Gambar x 2 = 12 Kartu.
-        audio.play().catch(() => {});
+// Karena CSS kamu 4 kolom, maka otomatis jadi: 4 Samping x 3 Bawah.
-    }
-}
-
-// --- LOGIKA GAME ASLI ---
 const images = [
   "images/fruit1.png", "images/fruit2.png", "images/fruit3.png", 
-  "images/fruit4.png", "images/fruit5.png", "images/fruit6.png",
+  "images/fruit4.png", "images/fruit5.png", "images/fruit6.png"
 ];
 
 let cards = [...images, ...images];
@@ -56,33 +57,57 @@ let moves = 0;
 let score = 0;
 let countdown;
 let combo = 1;
-let lastMatchTime = 0;
 let pendingMatch = false;
+let lastMatchTime = 0;
 
-function shuffleArray(array) {
+function showComboPopup(targetCard, combo, bonus) {
-  for (let i = array.length - 1; i > 0; i--) {
+  const popup = document.createElement("div");
-    const j = Math.floor(Math.random() * (i + 1));
+  popup.className = "combo-popup";
-    [array[i], array[j]] = [array[j], array[i]];
+  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";
+  popup.style.position = "fixed";
+  document.body.appendChild(popup);
+  setTimeout(() => popup.remove(), 1500);
+}
+
+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; }
+    }
   }
-  return array;
+  return result;
 }
 
 function runCountdown(callback) {
     let count = 3;
-    overlay.style.display = "flex";
+    countdownOverlay.style.display = "flex";
-    overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
+    countdownOverlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
     playSFX(sfxCountdown);
 
     let cdTimer = setInterval(() => {
         count--;
         if (count > 0) {
-            overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
+            countdownOverlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
             playSFX(sfxCountdown);
         } else if (count === 0) {
-            overlay.innerHTML = `<span class="pulse-anim">GO!</span>`;
+            countdownOverlay.innerHTML = `<span class="pulse-anim">GO!</span>`;
         } else {
             clearInterval(cdTimer);
-            overlay.style.display = "none";
+            countdownOverlay.style.display = "none";
             callback();
         }
     }, 1000);
@@ -94,30 +119,29 @@ function startTimer() {
     document.getElementById("timer").textContent = --time;
     if (time <= 0) {
       clearInterval(countdown);
-      showEndScreen(false); // Kalah
+      showEndScreen(false);
     }
   }, 1000);
 }
 
 function showEndScreen(isWin) {
-  clearInterval(countdown);
+    clearInterval(countdown);
-  bgMusic.pause();
+    bgMusic.pause();
+    if(isWin) playSFX(sfxWin); else playSFX(sfxLose);
 
-  if(isWin) playSFX(sfxWin); else playSFX(sfxLose);
+    document.getElementById("endTitle").textContent = isWin ? "🎉 Selamat!" : "⏰ Waktu Habis!";
+    document.getElementById("endMsg").textContent = isWin ? "Anda berhasil menyelesaikan permainan!" : "Coba lagi lain kali!";
 
-  document.getElementById("endTitle").textContent = isWin ? "🎉 Selamat!" : "⏰ Waktu Habis!";
+    let baseScore = score;
-  document.getElementById("endMsg").textContent = isWin ? "Anda berhasil menyelesaikan permainan!" : "Coba lagi lain kali!";
+    let timeBonus = isWin ? time * 5 : 0;
+    let moveBonus = isWin ? Math.max(0, 200 - moves * 10) : 0;
+    let total = baseScore + timeBonus + moveBonus;
 
-  let baseScore = score;
+    document.getElementById("baseScoreEnd").textContent = baseScore;
-  let timeBonus = time * 5;
+    document.getElementById("timeBonusEnd").textContent = "+" + timeBonus;
-  let moveBonus = Math.max(0, 200 - moves * 10);
+    document.getElementById("moveBonusEnd").textContent = "+" + moveBonus;
-  let total = baseScore + timeBonus + moveBonus;
+    document.getElementById("totalScoreEnd").textContent = total;
-
+    document.getElementById("endScreen").style.display = "flex";
-  document.getElementById("baseScoreEnd").textContent = baseScore;
-  document.getElementById("timeBonusEnd").textContent = "+" + (isWin ? timeBonus : 0);
-  document.getElementById("moveBonusEnd").textContent = "+" + (isWin ? moveBonus : 0);
-  document.getElementById("totalScoreEnd").textContent = isWin ? total : baseScore;
-  document.getElementById("endScreen").style.display = "flex";
 }
 
 function flipCard(card) {
@@ -132,8 +156,8 @@ function flipCard(card) {
   if (flipped.length === 2) {
     moves++;
     document.getElementById("moves").textContent = moves;
-    let img1 = flipped[0].querySelector(".back img").src;
+    let img1 = flipped[0].querySelector("img").src;
-    let img2 = flipped[1].querySelector(".back img").src;
+    let img2 = flipped[1].querySelector("img").src;
 
     if (img1 === img2) {
       playSFX(sfxMatch);
@@ -142,18 +166,20 @@ function flipCard(card) {
       else {
         if (now - lastMatchTime <= 3000) {
           combo++;
-          score += (10 * combo);
+          let comboBonus = combo * 10;
-          document.getElementById("score").textContent = score;
+          score += comboBonus;
-        } else { combo = 1; }
+          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(() => showEndScreen(true), 600);
+        setTimeout(() => showEndScreen(true), 500);
       }
     } else {
       playSFX(sfxWrong);
@@ -171,17 +197,16 @@ function startGame() {
   board.innerHTML = "";
 
   runCountdown(() => {
-    if(!musicMuted) bgMusic.play();
+    if(!musicMuted) bgMusic.play().catch(() => {});
-    const shuffledCards = shuffleArray([...cards]);
+    shuffleDistant(cards, 4).forEach(image => {
-    shuffledCards.forEach(image => {
+        const card = document.createElement("div");
-      const card = document.createElement("div");
+        card.className = "card";
-      card.className = "card";
+        card.innerHTML = `<div class="inner"><div class="front">?</div><div class="back"><img src="${image}"></div></div>`;
-      card.innerHTML = `<div class="inner"><div class="front">?</div><div class="back"><img src="${image}"></div></div>`;
+        card.onclick = () => flipCard(card);
-      card.onclick = () => flipCard(card);
+        board.appendChild(card);
-      board.appendChild(card);
     });
     time = 60; moves = 0; score = 0; combo = 1;
-    timerStarted = false;
+    pendingMatch = false; flipped = []; timerStarted = false;
     document.getElementById("timer").textContent = time;
     document.getElementById("moves").textContent = moves;
     document.getElementById("score").textContent = score;

gameboard-easy.php

@@ -13,7 +13,7 @@ $user = $_SESSION['user'];
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Memory Card Premium</title>
+<title>Memory Card Premium 3x4</title>
 <link rel="stylesheet" href="assets/gameboard-easy.css">
 </head>
 <body>

mainboard.php

@@ -68,7 +68,7 @@ $roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
       
       <button class="stage-btn" onclick="selectStage('hard')">
         <span class="icon">😤</span>
-        <h3>Hard Mode</h3>
+        <h3>Hards Mode</h3>
       </button>
     </div>
   </div>

score.php

@@ -0,0 +1,30 @@
+<?php
+session_start();
+include 'Config.php'; // Pastikan koneksi database benar
+
+// Kita cek apakah $_SESSION['user'] ada (Sama persis kayak di Mainboard)
+// Dan cek apakah ada skor yang dikirim
+if (isset($_SESSION['user']) && isset($_POST['score'])) {
+    
+    // Ambil data user dari session (Array)
+    $userData = $_SESSION['user'];
+
+    // Ambil ID dari dalam array itu. 
+    // (Biasanya key-nya 'id' kalau dari database, sesuaikan jika kamu pakai 'user_id')
+    $user_id = $userData['id']; 
+    
+    $score = intval($_POST['score']); 
+
+    // Masukkan ke database
+    $stmt = $conn->prepare("INSERT INTO scores (user_id, score) VALUES (?, ?)");
+    $stmt->bind_param("ii", $user_id, $score);
+    
+    if ($stmt->execute()) {
+        echo "Berhasil simpan skor untuk ID: " . $user_id;
+    } else {
+        echo "Gagal: " . $conn->error;
+    }
+} else {
+    echo "Error: Belum login atau Data Session tidak sesuai.";
+}
+?>