diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx index dd13b2d..a51e2f5 100644 --- a/client/src/app/page.tsx +++ b/client/src/app/page.tsx @@ -7,6 +7,7 @@ import { motion, AnimatePresence } from 'framer-motion'; import Image from 'next/image'; import GameBoard from '../components/GameBoard'; import LogoutButton from '../components/LogoutButton'; +import HelpModal from '../components/HelpModal'; import { GameRoom } from '../../../shared/types'; // Constantes de apellidos @@ -34,6 +35,7 @@ export default function Home() { // UI Create/Join const [showCreateModal, setShowCreateModal] = useState(false); const [createConfig, setCreateConfig] = useState({ maxPlayers: 5, password: '' }); + const [showHelp, setShowHelp] = useState(false); const [passwordPromptRoomId, setPasswordPromptRoomId] = useState(null); const [joinPassword, setJoinPassword] = useState(''); @@ -244,10 +246,24 @@ export default function Home() { {view === 'lobby' && (
-
- AGENTE: - {fullPlayerName} +
+ AGENTE + {fullPlayerName}
+ + {/* Help Button */} + setShowHelp(true)} + whileHover={{ scale: 1.05 }} + whileTap={{ scale: 0.95 }} + className="bg-blue-900/80 hover:bg-blue-800 text-white p-2 rounded-full border border-blue-700/50 backdrop-blur-sm shadow-lg transition-all" + title="Ayuda / Reglas" + > + + + + +
)} @@ -298,7 +314,7 @@ export default function Home() { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - className="w-full max-w-5xl" + className="w-full max-w-5xl h-full flex flex-col max-h-[75vh]" >
@@ -313,63 +329,65 @@ export default function Home() {
-
- {roomsList.length === 0 ? ( -
- No hay misiones activas en este momento. -
- ) : ( - roomsList.map((room) => ( - -
- {room.isPrivate ? ( - 🔒 - ) : ( - 🔓 - )} -
- -

- {room.name} -

- -
- - HOST: - - {room.hostId.substring(0, 6)}... -
- -
-
- {room.currentPlayers} - / {room.maxPlayers} +
+
+ {roomsList.length === 0 ? ( +
+ No hay misiones activas en este momento. +
+ ) : ( + roomsList.map((room) => ( + +
+ {room.isPrivate ? ( + 🔒 + ) : ( + 🔓 + )}
- -
+

+ {room.name} +

- {/* Barra de progreso visual */} -
-
-
- - )) - )} +
+ + HOST: + + {room.hostId.substring(0, 6)}... +
+ +
+
+ {room.currentPlayers} + / {room.maxPlayers} +
+ + +
+ + {/* Barra de progreso visual */} +
+
+
+ + )) + )} +
)} @@ -451,6 +469,9 @@ export default function Home() {
{isConnected ? ● CONEXIÓN SEGURA : ● BUSCANDO SEÑAL...}
+ + {/* Modal de Ayuda */} + setShowHelp(false)} /> ); } diff --git a/client/src/components/HelpModal.tsx b/client/src/components/HelpModal.tsx new file mode 100644 index 0000000..507c05f --- /dev/null +++ b/client/src/components/HelpModal.tsx @@ -0,0 +1,174 @@ +import { motion, AnimatePresence } from 'framer-motion'; +import Image from 'next/image'; + +interface HelpModalProps { + isOpen: boolean; + onClose: () => void; +} + +export default function HelpModal({ isOpen, onClose }: HelpModalProps) { + if (!isOpen) return null; + + return ( + + + e.stopPropagation()} + > + {/* Header estilo Carpeta Confidencial */} +
+
+
+ Top Secret +
+

+ Dossier de Misión +

+
+ +
+ + {/* Contenido Scrollable */} +
+ + {/* 1. INTRODUCCIÓN */} +
+

+ 1. Objetivo del Juego +

+

+ La Resistencia debe completar con éxito 3 misiones. +
+ Los Espías deben sabotear 3 misiones o asesinar al líder de la Resistencia (Marlene) al final del juego. +

+
+ + {/* 2. ROLES */} +
+

+ 2. Identidades Ocultas +

+ +
+
+

+ 🔵 LA RESISTENCIA (Aliados) +

+
    +
  • + Marlene: Conoce la identidad de los Espías, pero debe permanecer oculta. Si los espías la descubren al final, la Resistencia pierde. +
    • +
  • + Partisanos: Miembros leales. No tienen información privilegiada. +
    • +
+
+ +
+

+ 🔴 EL EJE (Espías) +

+
    +
  • + Francotirador (Asesino): Si la Resistencia gana las 3 misiones, tiene una "bala de plata" para matar a Marlene e invertir la victoria. +
    • +
  • + Colaboracionista: Espía estándar. Conoce a sus compañeros. +
    • +
+
+
+
+ + {/* 3. MECÁNICA DE JUEGO */} +
+

+ 3. Desarrollo de la Partida +

+
+
+

A. Asignación de Líder

+

El liderazgo rota en sentido horario cada ronda. El Líder propone un equipo para la misión.

+
+ +
+

B. Construcción de Equipo

+

El Líder selecciona a los jugadores que irán a la misión. El número de jugadores requeridos varía según la ronda y el total de jugadores.

+
+ +
+

C. Votación de Equipo

+

Todos los jugadores discuten y votan públicamente si aprueban o rechazan al líder propuesto.

+
    +
  • Si la mayoría aprueba, la misión procede.
    • +
  • Si se rechaza (o hay empate), el liderazgo pasa al siguiente jugador.
    • +
  • ATENCIÓN: Si se rechazan 5 equipos consecutivos en una misma ronda, los Espías ganan automáticamente la partida.
    • +
+
+ +
+

D. Ejecución de la Misión

+

Los miembros del equipo votan en secreto usándo cartas de "ÉXITO" o "SABOTAJE".

+
    +
  • La Resistencia SOLO puede votar ÉXITO.
    • +
  • Los Espías pueden elegir entre ÉXITO (para disimular) o SABOTAJE.
    • +
  • Las cartas se barajan y se revelan. Un solo voto de SABOTAJE hace fracasar la misión.
    • +
  • Excepción: En partidas de 7+ jugadores, la 4ª misión requiere 2 sabotajes para fallar.
    • +
+
+
+
+ + {/* 4. FINAL */} +
+

+ 4. Final de Partida +

+

+ Si hay 3 misiones fallidas: VICTORIA DEL EJE. +

+

+ Si hay 3 misiones exitosas: Comienza la FASE DE ASESINATO. +

+
+

El Disparo Final

+

+ El Francotirador revela su identidad y tiene una oportunidad para adivinar quién es Marlene. + Si acierta, asesina a Marlene y los Espías roban la victoria. Si falla, la Resistencia gana definitivamente. +

+
+
+ +
+ + {/* Footer / Botón Cerrar */} +
+ +
+ + + + ); +}