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

- 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

View File

@@ -519,11 +519,14 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
{cardOrder ? (
<>
{/* Carta de Éxito primero */}
<button onClick={() => handleMissionVote(true)} className="group">
<button onClick={() => handleMissionVote(true)} className="group" disabled={missionVote !== null}>
<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"
whileHover={{ scale: 1.1, rotate: 3 }}
whileTap={{ scale: 0.95 }}
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
? 'border-yellow-400 ring-8 ring-yellow-400/50 scale-105'
: '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" />
<span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">ÉXITO</span>