marti/FranciaOcupada
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Afegit botó per ocultar/mostrar l'historial de missions amb animació de lliscament
Some checks failed
CI/CD - Francia Ocupada (La Resistencia) / build-and-deploy (push) Failing after 7s
Details

Browse Source
This commit is contained in:
Resistencia Dev
2025-12-15 09:57:58 +01:00
parent bb08fa9437
commit 385f87cce0
1 changed files with 81 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
client/src/components/GameBoard.tsx
View File

@@ -28,6 +28,9 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
// Estado para controlar el colapso del panel de jugadores // Estado para controlar el colapso del panel de jugadores
const [isPlayersCollapsed, setIsPlayersCollapsed] = useState(false); const [isPlayersCollapsed, setIsPlayersCollapsed] = useState(false);
// Estado para controlar el colapso del historial de misiones
const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(false);
// Timer para avanzar automáticamente en REVEAL_ROLE // Timer para avanzar automáticamente en REVEAL_ROLE
useEffect(() => { useEffect(() => {
@@ -879,47 +882,87 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
{/* HISTÓRICO DE MISIONES (Esquina superior derecha) */} {/* HISTÓRICO DE MISIONES (Esquina superior derecha) */}
{gameState.missionHistory.length > 0 && ( {gameState.missionHistory.length > 0 && (
<div className="absolute top-4 right-4 bg-black/80 p-3 rounded-lg border border-white/20 backdrop-blur-sm z-50"> <motion.div
<div className="text-[10px] text-gray-400 uppercase mb-2 text-center font-bold tracking-wider">Historial</div> className="fixed top-4 right-0 z-50"
<div className="flex gap-2"> initial={false}
{gameState.missionHistory.map((mission, idx) => { animate={{
const isExpanded = expandedMission === idx; x: isHistoryCollapsed ? '0%' : '0%'
}}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
>
{/* Botón de colapso/expansión */}
<motion.button
onClick={() => setIsHistoryCollapsed(!isHistoryCollapsed)}
className="absolute top-0 bg-gradient-to-l from-yellow-600 to-yellow-700 hover:from-yellow-500 hover:to-yellow-600 text-white rounded-l-lg px-2 py-3 shadow-lg border-2 border-yellow-500 border-r-0 transition-all hover:shadow-yellow-500/50 flex items-center"
initial={false}
animate={{
right: isHistoryCollapsed ? '0px' : '100%'
}}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
>
<motion.svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
animate={{ rotate: isHistoryCollapsed ? 0 : 180 }}
transition={{ duration: 0.3 }}
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M15 19l-7-7 7-7" />
</motion.svg>
</motion.button>
return ( {/* Panel del historial */}
<div key={idx} className="relative"> <motion.div
<div className="bg-black/80 p-3 rounded-lg border border-white/20 backdrop-blur-sm"
className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 cursor-pointer transition-all hover:scale-110 ${mission.isSuccess initial={false}
? 'bg-blue-600 border-blue-400 text-white' animate={{
: 'bg-red-600 border-red-400 text-white' x: isHistoryCollapsed ? '100%' : '0%'
} ${isExpanded ? 'ring-2 ring-yellow-400 relative z-[60]' : ''}`} }}
title={`Misión ${mission.round}: ${mission.isSuccess ? 'Éxito' : 'Fracaso'} (${mission.successes}✓ ${mission.fails}✗)`} transition={{ type: "spring", stiffness: 300, damping: 30 }}
onClick={(e) => { >
e.stopPropagation(); <div className="text-[10px] text-gray-400 uppercase mb-2 text-center font-bold tracking-wider">Historial</div>
console.log('Click en misión', idx); <div className="flex gap-2">
setExpandedMission(prev => prev === idx ? null : idx); {gameState.missionHistory.map((mission, idx) => {
}} const isExpanded = expandedMission === idx;
>
{mission.round}
</div>
{/* Lista de participantes */} return (
{isExpanded && ( <div key={idx} className="relative">
<div className="absolute top-10 right-0 bg-black/95 p-2 rounded border border-white/30 min-w-max z-[100]"> <div
{mission.team.map((playerId) => { className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 cursor-pointer transition-all hover:scale-110 ${mission.isSuccess
const player = gameState.players.find(p => p.id === playerId); ? 'bg-blue-600 border-blue-400 text-white'
return ( : 'bg-red-600 border-red-400 text-white'
<div key={playerId} className="text-xs text-white whitespace-nowrap"> } ${isExpanded ? 'ring-2 ring-yellow-400 relative z-[60]' : ''}`}
{player?.name || playerId} title={`Misión ${mission.round}: ${mission.isSuccess ? 'Éxito' : 'Fracaso'} (${mission.successes}✓ ${mission.fails}✗)`}
</div> onClick={(e) => {
); e.stopPropagation();
})} console.log('Click en misión', idx);
setExpandedMission(prev => prev === idx ? null : idx);
}}
>
{mission.round}
</div> </div>
)}
</div> {/* Lista de participantes */}
); {isExpanded && (
})} <div className="absolute top-10 right-0 bg-black/95 p-2 rounded border border-white/30 min-w-max z-[100]">
</div> {mission.team.map((playerId) => {
</div> const player = gameState.players.find(p => p.id === playerId);
return (
<div key={playerId} className="text-xs text-white whitespace-nowrap">
{player?.name || playerId}
</div>
);
})}
</div>
)}
</div>
);
})}
</div>
</motion.div>
</motion.div>
)} )}
</div> </div>
</div> </div>