Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
c723b373d3 | ||
|
|
a3789e5289 |
141
README.md
141
README.md
@@ -1,104 +1,91 @@
|
||||
# La Resistencia - Estado del Proyecto
|
||||
# Francia Ocupada (La Resistencia)
|
||||
|
||||
## 🎮 Estado Actual: FUNCIONAL (Parcial)
|
||||
## 🎮 Estado Actual: v1.4 - ESTABLE
|
||||
|
||||
Proyecto renombrado a **"Traición en París"** / **"Francia Ocupada"**.
|
||||
|
||||
### ✅ Funcionalidades Implementadas
|
||||
|
||||
#### Backend (100% Completo)
|
||||
- ✅ Sistema de salas y jugadores
|
||||
- ✅ Asignación de roles (Resistencia/Espías)
|
||||
- ✅ Fases del juego: LOBBY, INTRO, REVEAL_ROLE, ROLL_CALL, VOTE_LEADER, TEAM_BUILDING, VOTE_TEAM, MISSION
|
||||
- ✅ **Nuevas fases**: MISSION_REVEAL, MISSION_RESULT (lógica completa)
|
||||
- ✅ Votación de líder con sistema de aprobación/rechazo
|
||||
- ✅ Selección y votación de equipos
|
||||
- ✅ Votación de misiones (éxito/sabotaje)
|
||||
- ✅ **Barajado aleatorio de votos de misión**
|
||||
- ✅ **Histórico de misiones** (MissionRecord)
|
||||
- ✅ Reglas correctas de éxito/fracaso (misión 4 con 7+ jugadores requiere 2 fallos)
|
||||
- ✅ Sistema de victoria (3 misiones exitosas o 3 fallidas)
|
||||
- ✅ Fase de asesinato (ASSASSIN_PHASE)
|
||||
#### Backend (Socket.io + Node.js)
|
||||
- ✅ **Sistema de Reconexión Inteligente:** Los jugadores pueden recargar la página o volver a entrar y mantienen su sesión (ID de socket actualizado en tiempo real).
|
||||
- ✅ **Persistencia de Partidas:** Las partidas no se pierden si un jugador se desconecta brevemente.
|
||||
- ✅ **Control de Sesiones:** Seguimiento de `matchNumber` y `matchResults` para estadísticas continuas en el dashboard de admin.
|
||||
- ✅ **Lógica de Juego Completa:**
|
||||
- Roles ocultos y asignación aleatoria balanceada.
|
||||
- Fases: Lobby, Intro, Reveal Role, Roll Call, Vote Leader, Team Building, Vote Team, Mission, Mission Reveal, Mission Result, Assassin Phase.
|
||||
- Reglas especiales: 4ª misión con 7+ jug. requiere 2 fallos, 5 rechazos de líder = Victoria espía.
|
||||
- Temporizadores de seguridad para votaciones de líder.
|
||||
|
||||
#### Frontend (Funcional hasta Victoria)
|
||||
- ✅ Lobby con creación/unión de partidas
|
||||
- ✅ Intro con música y animaciones (título: "Traidores en París")
|
||||
- ✅ Revelación de roles con cartas
|
||||
- ✅ Roll call con avatares
|
||||
- ✅ Votación de líder con timer de 10 segundos (esquina superior izquierda)
|
||||
- ✅ Selección de equipo por el líder
|
||||
- ✅ Votación de equipo con cartas cuadradas (aceptar/rechazar)
|
||||
- ✅ Votación de misión (éxito/sabotaje solo para espías)
|
||||
- ✅ **Fase MISSION_REVEAL**: Animación de cartas de votación revelándose
|
||||
- ✅ **Fase MISSION_RESULT**: Pantalla resumen con mapa táctico y tokens de victoria/fracaso
|
||||
- ✅ **Histórico de Misiones**: Círculos clicables en esquina superior derecha
|
||||
- ✅ **Mapa táctico**: Tablero con tokens de misiones y marcadores de resultado
|
||||
- ✅ Pantallas de victoria (Aliados/Nazis)
|
||||
- ✅ Fase de asesinato (ASSASSIN_PHASE)
|
||||
#### Frontend (Next.js + Tailwind + Framer Motion)
|
||||
- ✅ **Diseño Premium:** Estética "World War II" con tipografías, colores y assets temáticos (fichas de póker, documentos secretos, mapas tácticos).
|
||||
- ✅ **UX Fluida:** Animaciones de transición entre todas las fases.
|
||||
- ✅ **Feedback Visual:**
|
||||
- Cartas de rol específicas para cada personaje (Marlene, Capitán Philippe, Francotirador, etc.).
|
||||
- Tablero táctico dinámico que muestra el progreso de la partida.
|
||||
- Indicadores claros de "Tu Turno" o "Esperando al líder".
|
||||
- ✅ **Audio:** Banda sonora y efectos de sonido integrados.
|
||||
|
||||
### 🎨 Mejoras de UI Recientes (2025-12-13)
|
||||
### 🎨 Últimas Mejoras (v1.4 - Diciembre 2025)
|
||||
|
||||
- ✅ Timer de votación reposicionado (esquina superior izquierda, fixed, 20px margen)
|
||||
- ✅ Cartas de votación de líder redimensionadas (cuadradas 32x32)
|
||||
- ✅ Eliminado contador de votos rechazados en resultado de misión
|
||||
- ✅ Mapa táctico permanece visible durante toda la fase MISSION_RESULT
|
||||
- ✅ Tokens de victoria/fracaso posicionados en el mapa (ajuste fino pendiente para tokens 3, 4, 5)
|
||||
- 🔄 **Fix Crítico:** Solucionado bug donde el Líder perdía sus botones de acción al recargar la página.
|
||||
- 📊 **Dashboard Admin:** Panel de administración mejorado con historial de partidas y estadísticas de victorias.
|
||||
- 🖼️ **Assets:** Nuevas imágenes para roles y fondos de victoria/derrota.
|
||||
- 📱 **Responsividad:** Mejoras en la vista móvil para la fase de "Pasando Lista" y Tablero.
|
||||
|
||||
### ⚠️ Pendiente de Ajustar
|
||||
## 🚀 Despliegue y Ejecución
|
||||
|
||||
1. **Posiciones de tokens en mapa**: Afinar ubicación de tokens de misiones 3, 4 y 5 en el tablero táctico
|
||||
|
||||
## 🚀 Cómo Ejecutar
|
||||
### Requisitos
|
||||
- Docker y Docker Compose
|
||||
- Node.js 18+ (para desarrollo local)
|
||||
|
||||
### Ejecución con Docker (Producción)
|
||||
```bash
|
||||
# Iniciar todos los servicios
|
||||
docker compose up -d
|
||||
# Desplegar todo el stack
|
||||
./deploy.sh
|
||||
```
|
||||
|
||||
# Ver logs
|
||||
docker compose logs -f
|
||||
El script `deploy.sh` se encarga de:
|
||||
1. Bajar los últimos cambios de `main`.
|
||||
2. Construir las imágenes con tags de versión.
|
||||
3. Levantar los contenedores (Client, Server, DB).
|
||||
|
||||
# Detener servicios
|
||||
docker compose down
|
||||
### Desarrollo Local
|
||||
```bash
|
||||
# Servidor
|
||||
cd server && npm run dev
|
||||
|
||||
# Cliente
|
||||
cd client && npm run dev
|
||||
```
|
||||
|
||||
## 🌐 URLs
|
||||
|
||||
- **Cliente**: http://localhost:3000
|
||||
- **Servidor**: http://localhost:4000
|
||||
- **Base de Datos**: localhost:5432
|
||||
- **Juego**: https://franciaocupada.martivich.es
|
||||
- **API**: https://api.franciaocupada.martivich.es
|
||||
- **Dashboard Admin**: (Accesible vía socket evento `admin_get_data`)
|
||||
|
||||
## 📝 Git
|
||||
## 📝 Ramas Git
|
||||
|
||||
### Ramas
|
||||
- `master`: Estado inicial con errores
|
||||
- `fix-gameboard`: Estado actual funcional ✅
|
||||
- `main`: Rama de producción (Estable v1.4).
|
||||
- `develop`: Rama de desarrollo e integración.
|
||||
|
||||
### Commits Importantes
|
||||
1. `8d423ac` - Estado inicial con errores de sintaxis
|
||||
2. `44d7418` - GameBoard limpio y funcional
|
||||
3. `5bb1b17` - VotingTimer agregado correctamente
|
||||
## 👥 Roles del Juego
|
||||
|
||||
## 🐛 Problemas Conocidos
|
||||
**La Resistencia (Aliados)**
|
||||
- **Marlene (Merlín):** Conoce a los espías. Debe mantenerse oculta.
|
||||
- **Capitán Philippe (Percival):** Conoce a Marlene (y al Agente Doble). Debe protegerla.
|
||||
- **Partisanos:** Miembros leales de la resistencia. No saben nada.
|
||||
|
||||
1. **CPU Alta en Servidor**: El servidor puede consumir mucha CPU. Si ocurre, reiniciar con `docker compose restart server`
|
||||
2. **Posiciones de tokens en mapa**: Los tokens de misiones 3, 4 y 5 necesitan ajuste fino en sus coordenadas
|
||||
**El Eje (Alemanes/Espías)**
|
||||
- **Francotirador (Asesino):** Si los aliados ganan las 3 misiones, tiene un disparo final para matar a Marlene y robar la victoria.
|
||||
- **Agente Doble (Morgana):** Se hace pasar por Marlene ante el Capitán Philippe.
|
||||
- **Comandante Schmidt (Mordred):** Espía desconocido para Marlene.
|
||||
- **Infiltrado (Oberon):** Espía que no conoce a los otros espías.
|
||||
- **Colaboricionistas:** Espías estándar.
|
||||
|
||||
## 📋 Próximos Pasos
|
||||
|
||||
1. Afinar posiciones de tokens de misiones 3, 4 y 5 en el mapa táctico
|
||||
2. Optimizar rendimiento del servidor
|
||||
3. Testing exhaustivo de todas las fases del juego
|
||||
4. Ajustes finales de UX/UI según feedback de jugadores
|
||||
|
||||
## 🎯 Reglas del Juego Implementadas
|
||||
|
||||
- Votación de líder: mayoría simple aprueba
|
||||
- 5 rechazos consecutivos: victoria de espías
|
||||
- Misiones: 1 fallo = fracaso (excepto misión 4 con 7+ jugadores que requiere 2 fallos)
|
||||
- 3 misiones exitosas: victoria de resistencia (con fase de asesinato)
|
||||
- 3 misiones fallidas: victoria de espías
|
||||
|
||||
## 🔧 Tecnologías
|
||||
## 🔧 Stack Tecnológico
|
||||
|
||||
- **Frontend**: Next.js 14, React, TypeScript, Framer Motion, TailwindCSS
|
||||
- **Backend**: Node.js, Express, Socket.IO, TypeScript
|
||||
- **Base de Datos**: PostgreSQL 15
|
||||
- **Containerización**: Docker, Docker Compose
|
||||
- **Infraestructura**: Docker, Nginx (Proxy Inverso)
|
||||
|
||||
@@ -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<string | null>(null);
|
||||
const [joinPassword, setJoinPassword] = useState('');
|
||||
@@ -244,10 +246,24 @@ export default function Home() {
|
||||
</div>
|
||||
{view === 'lobby' && (
|
||||
<div className="flex items-center gap-3 bg-black/50 px-4 py-2 rounded border border-white/10">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-gray-400">AGENTE:</span>
|
||||
<span className="font-bold text-yellow-500">{fullPlayerName}</span>
|
||||
<div className="flex flex-col text-right">
|
||||
<span className="text-[10px] text-gray-400 uppercase tracking-wider">AGENTE</span>
|
||||
<span className="font-bold text-yellow-500 text-sm">{fullPlayerName}</span>
|
||||
</div>
|
||||
|
||||
{/* Help Button */}
|
||||
<motion.button
|
||||
onClick={() => 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"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-5 h-5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M12 17.25h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
|
||||
<LogoutButton onClick={handleLogout} />
|
||||
</div>
|
||||
)}
|
||||
@@ -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]"
|
||||
>
|
||||
<div className="flex justify-between items-end mb-6 border-b border-white/20 pb-4">
|
||||
<div>
|
||||
@@ -313,63 +329,65 @@ export default function Home() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{roomsList.length === 0 ? (
|
||||
<div className="col-span-full py-20 text-center text-gray-500 bg-black/30 rounded border border-white/5 border-dashed">
|
||||
No hay misiones activas en este momento.
|
||||
</div>
|
||||
) : (
|
||||
roomsList.map((room) => (
|
||||
<motion.div
|
||||
key={room.id}
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="bg-black/60 border border-white/10 p-5 rounded hover:border-yellow-700/50 transition-colors group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-2">
|
||||
{room.isPrivate ? (
|
||||
<span title="Privada" className="text-red-400">🔒</span>
|
||||
) : (
|
||||
<span title="Pública" className="text-green-400/50">🔓</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-yellow-500 mb-1 group-hover:text-yellow-400 transition-colors">
|
||||
{room.name}
|
||||
</h3>
|
||||
|
||||
<div className="text-sm text-gray-400 mb-4 flex gap-2">
|
||||
<span className="bg-white/10 px-2 py-0.5 rounded textxs">
|
||||
HOST:
|
||||
</span>
|
||||
<span className="text-white">{room.hostId.substring(0, 6)}...</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<div className="flex items-end gap-1">
|
||||
<span className="text-3xl font-bold text-white">{room.currentPlayers}</span>
|
||||
<span className="text-sm text-gray-500 mb-1">/ {room.maxPlayers}</span>
|
||||
<div className="flex-1 overflow-y-auto pr-2 min-h-0">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{roomsList.length === 0 ? (
|
||||
<div className="col-span-full py-20 text-center text-gray-500 bg-black/30 rounded border border-white/5 border-dashed">
|
||||
No hay misiones activas en este momento.
|
||||
</div>
|
||||
) : (
|
||||
roomsList.map((room) => (
|
||||
<motion.div
|
||||
key={room.id}
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="bg-black/60 border border-white/10 p-5 rounded hover:border-yellow-700/50 transition-colors group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-2">
|
||||
{room.isPrivate ? (
|
||||
<span title="Privada" className="text-red-400">🔒</span>
|
||||
) : (
|
||||
<span title="Pública" className="text-green-400/50">🔓</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
disabled={room.currentPlayers >= room.maxPlayers || room.status !== 'waiting'}
|
||||
onClick={() => requestJoinGame(room)}
|
||||
className="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded text-xs uppercase font-bold transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
{room.status === 'playing' ? 'EN CURSO' : (room.currentPlayers >= room.maxPlayers ? 'LLENA' : 'UNIRSE')}
|
||||
</button>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-yellow-500 mb-1 group-hover:text-yellow-400 transition-colors">
|
||||
{room.name}
|
||||
</h3>
|
||||
|
||||
{/* Barra de progreso visual */}
|
||||
<div className="absolute bottom-0 left-0 h-1 bg-yellow-900/40 w-full">
|
||||
<div
|
||||
className="h-full bg-yellow-600 transition-all duration-500"
|
||||
style={{ width: `${(room.currentPlayers / room.maxPlayers) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
))
|
||||
)}
|
||||
<div className="text-sm text-gray-400 mb-4 flex gap-2">
|
||||
<span className="bg-white/10 px-2 py-0.5 rounded textxs">
|
||||
HOST:
|
||||
</span>
|
||||
<span className="text-white">{room.hostId.substring(0, 6)}...</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<div className="flex items-end gap-1">
|
||||
<span className="text-3xl font-bold text-white">{room.currentPlayers}</span>
|
||||
<span className="text-sm text-gray-500 mb-1">/ {room.maxPlayers}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
disabled={room.currentPlayers >= room.maxPlayers || room.status !== 'waiting'}
|
||||
onClick={() => requestJoinGame(room)}
|
||||
className="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded text-xs uppercase font-bold transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
{room.status === 'playing' ? 'EN CURSO' : (room.currentPlayers >= room.maxPlayers ? 'LLENA' : 'UNIRSE')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Barra de progreso visual */}
|
||||
<div className="absolute bottom-0 left-0 h-1 bg-yellow-900/40 w-full">
|
||||
<div
|
||||
className="h-full bg-yellow-600 transition-all duration-500"
|
||||
style={{ width: `${(room.currentPlayers / room.maxPlayers) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
@@ -451,6 +469,9 @@ export default function Home() {
|
||||
<div className="absolute bottom-2 right-4 text-[10px] text-gray-600 font-mono">
|
||||
{isConnected ? <span className="text-green-900">● CONEXIÓN SEGURA</span> : <span className="text-red-900">● BUSCANDO SEÑAL...</span>}
|
||||
</div>
|
||||
|
||||
{/* Modal de Ayuda */}
|
||||
<HelpModal isOpen={showHelp} onClose={() => setShowHelp(false)} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
174
client/src/components/HelpModal.tsx
Normal file
174
client/src/components/HelpModal.tsx
Normal file
@@ -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 (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, y: 20 }}
|
||||
animate={{ scale: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, y: 20 }}
|
||||
className="relative w-full max-w-4xl max-h-[90vh] bg-[#1a1a1a] rounded-lg border-2 border-[#8b7355] shadow-2xl overflow-hidden flex flex-col"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Header estilo Carpeta Confidencial */}
|
||||
<div className="bg-[#2d2d2d] p-4 border-b border-[#8b7355] flex justify-between items-center bg-[url('/assets/images/ui/paper_texture_dark.png')]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-red-900 text-white text-xs font-bold px-2 py-1 uppercase tracking-widest border border-red-700">
|
||||
Top Secret
|
||||
</div>
|
||||
<h2 className="text-xl md:text-2xl font-bold text-[#d4b483] uppercase tracking-wider font-mono">
|
||||
Dossier de Misión
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-[#8b7355] hover:text-[#d4b483] transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Contenido Scrollable */}
|
||||
<div className="flex-1 overflow-y-auto p-6 md:p-8 space-y-8 text-gray-300 font-serif leading-relaxed custom-scrollbar">
|
||||
|
||||
{/* 1. INTRODUCCIÓN */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-yellow-500 mb-3 uppercase tracking-widest border-b border-white/10 pb-2 font-mono">
|
||||
1. Objetivo del Juego
|
||||
</h3>
|
||||
<p className="mb-4">
|
||||
<strong className="text-blue-400">La Resistencia</strong> debe completar con éxito <strong>3 misiones</strong>.
|
||||
<br />
|
||||
<strong className="text-red-400">Los Espías</strong> deben sabotear <strong>3 misiones</strong> o asesinar al líder de la Resistencia (Marlene) al final del juego.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* 2. ROLES */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-yellow-500 mb-4 uppercase tracking-widest border-b border-white/10 pb-2 font-mono">
|
||||
2. Identidades Ocultas
|
||||
</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-blue-900/10 p-4 rounded border border-blue-500/20">
|
||||
<h4 className="font-bold text-blue-400 mb-2 flex items-center gap-2">
|
||||
🔵 LA RESISTENCIA (Aliados)
|
||||
</h4>
|
||||
<ul className="space-y-3 text-sm">
|
||||
<li>
|
||||
<strong className="text-white">Marlene:</strong> Conoce la identidad de los Espías, pero debe permanecer oculta. Si los espías la descubren al final, la Resistencia pierde.
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-white">Partisanos:</strong> Miembros leales. No tienen información privilegiada.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-900/10 p-4 rounded border border-red-500/20">
|
||||
<h4 className="font-bold text-red-500 mb-2 flex items-center gap-2">
|
||||
🔴 EL EJE (Espías)
|
||||
</h4>
|
||||
<ul className="space-y-3 text-sm">
|
||||
<li>
|
||||
<strong className="text-white">Francotirador (Asesino):</strong> Si la Resistencia gana las 3 misiones, tiene una "bala de plata" para matar a Marlene e invertir la victoria.
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-white">Colaboracionista:</strong> Espía estándar. Conoce a sus compañeros.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. MECÁNICA DE JUEGO */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-yellow-500 mb-4 uppercase tracking-widest border-b border-white/10 pb-2 font-mono">
|
||||
3. Desarrollo de la Partida
|
||||
</h3>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">A. Asignación de Líder</h4>
|
||||
<p className="text-sm">El liderazgo rota en sentido horario cada ronda. El Líder propone un equipo para la misión.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">B. Construcción de Equipo</h4>
|
||||
<p className="text-sm">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.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">C. Votación de Equipo</h4>
|
||||
<p className="text-sm pb-2">Todos los jugadores discuten y votan públicamente si aprueban o rechazan al líder propuesto.</p>
|
||||
<ul className="list-disc list-inside text-sm text-gray-400 pl-4">
|
||||
<li>Si la mayoría aprueba, la misión procede.</li>
|
||||
<li>Si se rechaza (o hay empate), el liderazgo pasa al siguiente jugador.</li>
|
||||
<li><strong className="text-red-400">ATENCIÓN:</strong> Si se rechazan 5 equipos consecutivos en una misma ronda, los Espías ganan automáticamente la partida.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">D. Ejecución de la Misión</h4>
|
||||
<p className="text-sm pb-2">Los miembros del equipo votan en secreto usándo cartas de "ÉXITO" o "SABOTAJE".</p>
|
||||
<ul className="list-disc list-inside text-sm text-gray-400 pl-4">
|
||||
<li><strong className="text-blue-400">La Resistencia</strong> SOLO puede votar ÉXITO.</li>
|
||||
<li><strong className="text-red-400">Los Espías</strong> pueden elegir entre ÉXITO (para disimular) o SABOTAJE.</li>
|
||||
<li>Las cartas se barajan y se revelan. <strong>Un solo voto de SABOTAJE hace fracasar la misión</strong>.</li>
|
||||
<li><em className="text-yellow-500 text-xs">Excepción: En partidas de 7+ jugadores, la 4ª misión requiere 2 sabotajes para fallar.</em></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. FINAL */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-yellow-500 mb-3 uppercase tracking-widest border-b border-white/10 pb-2 font-mono">
|
||||
4. Final de Partida
|
||||
</h3>
|
||||
<p className="mb-2">
|
||||
Si hay <strong>3 misiones fallidas</strong>: <span className="text-red-500 font-bold">VICTORIA DEL EJE</span>.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
Si hay <strong>3 misiones exitosas</strong>: Comienza la <span className="text-red-500 font-bold">FASE DE ASESINATO</span>.
|
||||
</p>
|
||||
<div className="bg-zinc-800 p-4 rounded border-l-4 border-red-600">
|
||||
<h4 className="font-bold text-white uppercase mb-1">El Disparo Final</h4>
|
||||
<p className="text-sm text-gray-300">
|
||||
El Francotirador revela su identidad y tiene una oportunidad para adivinar quién es <strong>Marlene</strong>.
|
||||
Si acierta, asesina a Marlene y los Espías roban la victoria. Si falla, la Resistencia gana definitivamente.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer / Botón Cerrar */}
|
||||
<div className="p-4 bg-[#2d2d2d] border-t border-[#8b7355] flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="bg-[#8b7355] hover:bg-[#a68b66] text-black font-bold py-2 px-6 rounded shadow-lg uppercase tracking-wider transition-all"
|
||||
>
|
||||
Comprendido
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user