feat: fitur utama game and have err at adding score

src/css/game.css

@@ -47,7 +47,7 @@
 }
 
 .container-first {
-    background-image: url(/src/assets/Design/CAVEBOSSFIGHT.png);
+    /* background-image: url(/src/assets/Design/CAVEBOSSFIGHT.png); */
     background-repeat: no-repeat;
     background-size: cover;
     image-rendering: pixelated;
@@ -72,7 +72,7 @@
     background-size: cover;
 }
 
-.container-first .content .text {
+.container-first .content .quiz {
     width: 1000px;
     height: 200px;
     bottom: 40px;
@@ -92,20 +92,20 @@
     z-index: 1;
 }
 
-.container-first .content .text p {
+.container-first .content .quiz h2 {
     margin-bottom: 30px;
-    padding: 20px;
+    padding: 10px;
     color: #ffdf12;
-    font-size: 50px;
+    font-size: 40px;
 }
 
-.container-first .content .text .opt {
+.container-first .content .quiz #btn-answer {
     color: #ffdf12;
     display: flex;
     justify-content: center;
 }
 
-.container-first .content .text .opt p {
+.container-first .content .quiz #btn-answer button {
     padding: 10px;
     color: #ffdf12;
     font-size: 30px;

src/game/firstperson.html

@@ -13,13 +13,13 @@
             <div class="boss">
                 <img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt="">
             </div>
-            <div class="text">
-                <p>selamat datang di python games _____</p>
-                <div class="opt">
-                    <p draggable="true">a. panteks</p>
-                    <p draggable="true">b. anjas</p>
-                    <p draggable="true">c. hell nah</p>
-                    <p draggable="true">d. my kisah</p>
+            <div class="quiz">
+                <h2 id="question">Question Goes Here ......... !!</h2>
+                <div id="btn-answer">
+                    <button class="btn">text</button>
+                    <button class="btn">text</button>
+                    <button class="btn">text</button>
+                    <button class="btn">text</button>
                 </div>
             </div>
         </div>

src/js/firstperson.js

@@ -0,0 +1,118 @@
+const questions = [
+    {
+        question: "what is Python ?",
+        answers: [
+            {text: "Programming Lang", correct: true},
+            {text: "Animal", correct: false},
+            {text: "Danger", correct: false},
+            {text: "All Answer Correct", correct: false},
+        ]
+    },
+    {
+        question: "Data type at python ?",
+        answers: [
+            {text: "Docx", correct: false},
+            {text: "CSV", correct: false},
+            {text: "String", correct: true},
+            {text: "SQL", correct: false},
+        ]
+    },
+    {
+        question: "Index at python start from ?",
+        answers: [
+            {text: "1", correct: false},
+            {text: "-1", correct: false},
+            {text: "10", correct: false},
+            {text: "0", correct: true},
+        ]
+    },
+];
+
+const questionElement = document.getElementById("question")
+const answerBtn = document.getElementById("btn-answer")
+
+let currentQuestionIndex = 0;
+let score = 0;
+
+function startQuiz(){
+    currentQuestionIndex = 0;
+    score = 0;
+    showQuestion();
+}
+
+function showQuestion(){
+    resetState();
+    let currentQuestion = questions[currentQuestionIndex]
+    let questionNumber = currentQuestionIndex + 1
+    questionElement.innerHTML = questionNumber + ". " + currentQuestion.question;
+    currentQuestion.answers.forEach(answer => {
+        const button = document.createElement("button");
+        button.innerHTML = answer.text;
+        button.classList.add("btn");
+        answerBtn.appendChild(button);
+        button.dataset.correct = answer.correct;
+        button.addEventListener("click", selectAnswer)
+    });
+}
+
+function resetState(){
+    while(answerBtn.firstChild){
+        answerBtn.removeChild(answerBtn.firstChild)
+    }
+}
+
+function selectAnswer(e){
+    const selectedBtn = e.target;
+    const isCorrect = selectedBtn.dataset.correct === "true";
+    if(isCorrect){
+        selectedBtn.classList.add("correct");
+        score++;
+    } else {
+        selectedBtn.classList.add("Incorrect");
+    }
+
+    Array.from(answerBtn.children).forEach(button => {
+        if(button.dataset.correct === "true") button.classList.add("correct");
+        button.disabled = true;
+    },
+    setTimeout(nextQuestion, 1000)
+    );
+}
+
+function showScore(){
+    resetState();
+    const show = questionElement.innerHTML = `you scored ${score} out of ${questions.length}!`;
+    postScore(score);
+    alert(show);
+    window.location.href = "../leaderboard.php"
+}
+
+function handleNextBtn(){
+    currentQuestionIndex++;
+    if(currentQuestionIndex < questions.length){
+        showQuestion();
+    } else {
+        showScore();
+    }
+}
+
+function nextQuestion(){
+    if(currentQuestionIndex < questions.length){
+        handleNextBtn()
+    } else {
+        showScore()
+    }
+}
+
+function postScore(score){
+    fetch('/score.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ score })
+    })
+    .then(r => r.text())
+    .then(t => console.log("Server response:", t))
+    .catch(err => console.error("Fetch error:", err));
+}
+
+startQuiz()

src/score.php

@@ -0,0 +1,33 @@
+<?php
+session_start();
+header("Content-Type: application/json");
+
+require_once "config/db.php";
+
+$data = json_decode(file_get_contents("php://input"), true);
+
+if (!isset($data['score'])) {
+    echo json_encode(["error" => "score missing"]);
+    exit;
+}
+
+$score = (int)$data['score'];
+$user_id = isset($_SESSION['user_id']) ? (int)$_SESSION['user_id'] : null;
+
+if (!$user_id) {
+    echo json_encode(["error" => "no session user"]);
+    exit;
+}
+
+$stmt = $db->prepare("INSERT INTO scores (user_id, score) VALUES (?, ?)");
+$stmt->bind_param("ii", $user_id, $score);
+
+if ($stmt->execute()) {
+    echo json_encode(["success" => true]);
+} else {
+    echo json_encode(["error" => "insert failed"]);
+}
+
+$stmt->close();
+$db->close();
+?>