Feat: Add HelpModal and scrollable lobby list
Some checks failed
CI/CD - Francia Ocupada (La Resistencia) / build-and-deploy (push) Failing after 6s
Some checks failed
CI/CD - Francia Ocupada (La Resistencia) / build-and-deploy (push) Failing after 6s
This commit is contained in:
Resistencia Dev
@@ -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