Add funcionamiento del juego

2026-09-29 10:50:58 +02:00
parent 3cc0dfb122
commit 449cb1d976
5 changed files with 760 additions and 30 deletions
@@ -1,3 +1,20 @@
+<?php
+session_start();
+
+// Hay que estar logueado para jugar
+if (!isset($_SESSION['idUsuario'])) {
+    header('Location: index.php');
+    exit;
+}
+
+// La partida llega por la URL: juego.php?idPartida=3
+$idPartida = filter_input(INPUT_GET, 'idPartida', FILTER_VALIDATE_INT);
+
+if (!$idPartida || $idPartida < 1) {
+    header('Location: buscadorSala.php');
+    exit;
+}
+?>
 <!DOCTYPE html>
 <html lang="es">
 <head>
@@ -8,39 +25,27 @@
    <link rel="stylesheet" href="css/juego.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
 </head>
-<body>
+<body data-id-partida="<?= (int)$idPartida ?>">

-    <!-- Contenedor de la Pregunta -->
+    <!-- Progreso: "Pregunta 3 de 10" + barra -->
+    <div class="game-header">
+        <span id="contadorPregunta">Cargando…</span>
+    </div>
+    <div class="progress-track">
+        <div class="progress-fill" id="barraProgreso"></div>
+    </div>
+
+    <!-- Contenedor de la Pregunta (lo rellena js/juego.js) -->
    <div class="question-container">
-        ¿Cuál es el planeta más grande de nuestro sistema solar?
+        <div id="textoPregunta">Cargando preguntas…</div>
+        <div id="feedback" class="feedback" aria-live="polite"></div>
    </div>

-    <!-- Contenedor de Respuestas (Estilo Kahoot) -->
-    <div class="answers-grid">
-        <button class="btn-answer red" onclick="checkAnswer('Marte')">
-            <span class="shape triangle"></span>
-            Marte
-        </button>
-        
-        <button class="btn-answer blue" onclick="checkAnswer('Júpiter')">
-            <span class="shape diamond"></span>
-            Júpiter
-        </button>
-        
-        <button class="btn-answer yellow" onclick="checkAnswer('Saturno')">
-            <span class="shape circle"></span>
-            Saturno
-        </button>
-        
-        <button class="btn-answer green" onclick="checkAnswer('Tierra')">
-            <span class="shape square"></span>
-            Tierra
-        </button>
-    </div>
+    <!-- Contenedor de Respuestas (Estilo Kahoot, lo rellena js/juego.js) -->
+    <div class="answers-grid" id="respuestas"></div>

-    <script>
-       
-    </script>
+    <script src="js/jquery-4.0.0.min.js"></script>
+    <script src="js/juego.js"></script>

 </body>
-</html>
+</html>