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

WIP: Agregar feedback visual a carta de éxito (primera)

Browse Source 
- Borde amarillo brillante cuando está seleccionada
- Ring amarillo con glow
- Deshabilitar botón después de votar
- Falta aplicar a las otras 3 cartas
This commit is contained in:
Resistencia Dev
2025-12-05 23:39:35 +01:00
parent 951098540c
commit 94cb0d671d
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -519,11 +519,14 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
{cardOrder ? ( {cardOrder ? (
<> <>
{/* Carta de Éxito primero */} {/* Carta de Éxito primero */}
<button onClick={() => handleMissionVote(true)} className="group"> <button onClick={() => handleMissionVote(true)} className="group" disabled={missionVote !== null}>
<motion.div <motion.div
className="w-64 h-96 bg-gradient-to-br from-blue-600 to-blue-900 rounded-2xl shadow-2xl border-4 border-blue-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50" className={`w-64 h-96 bg-gradient-to-br from-blue-600 to-blue-900 rounded-2xl shadow-2xl border-4 flex flex-col items-center justify-center p-6 transform transition-all ${missionVote === true
whileHover={{ scale: 1.1, rotate: 3 }} ? 'border-yellow-400 ring-8 ring-yellow-400/50 scale-105'
whileTap={{ scale: 0.95 }} : 'border-blue-400 hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50'
}`}
whileHover={missionVote === null ? { scale: 1.1, rotate: 3 } : {}}
whileTap={missionVote === null ? { scale: 0.95 } : {}}
> >
<Image src="/assets/images/tokens/vote_approve.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" /> <Image src="/assets/images/tokens/vote_approve.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" />
<span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">ÉXITO</span> <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">ÉXITO</span>