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

Feature: Feedback visual simple con opacidad en cartas

Browse Source 
- Carta seleccionada: opacity-100 (brillante)
- Carta NO seleccionada: opacity-50 (apagada)
- Aplicado a las 4 cartas (2 éxito + 2 sabotaje)
- Botones deshabilitados después de votar
- Solución mucho más simple y elegante
This commit is contained in:
Resistencia Dev
2025-12-05 23:44:26 +01:00
parent 94cb0d671d
commit 00434daf97
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -519,14 +519,15 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
{cardOrder ? ( {cardOrder ? (
<> <>
{/* Carta de Éxito primero */} {/* Carta de Éxito primero */}
<button onClick={() => handleMissionVote(true)} className="group" disabled={missionVote !== null}> <button
onClick={() => handleMissionVote(true)}
className={`group transition-opacity ${missionVote !== null && missionVote !== true ? 'opacity-50' : 'opacity-100'}`}
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 flex flex-col items-center justify-center p-6 transform transition-all ${missionVote === true 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"
? 'border-yellow-400 ring-8 ring-yellow-400/50 scale-105' whileHover={{ scale: 1.1, rotate: 3 }}
: 'border-blue-400 hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50' whileTap={{ scale: 0.95 }}
}`}
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>
@@ -535,7 +536,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
{/* Carta de Sabotaje segundo (solo para espías) */} {/* Carta de Sabotaje segundo (solo para espías) */}
{currentPlayer?.faction === 'spies' && ( {currentPlayer?.faction === 'spies' && (
<button onClick={() => handleMissionVote(false)} className="group"> <button onClick={() => handleMissionVote(false)} className="group transition-opacity" style={{ opacity: missionVote !== null && missionVote !== false ? 0.5 : 1 }} disabled={missionVote !== null}>
<motion.div <motion.div
className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50" className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50"
whileHover={{ scale: 1.1, rotate: -3 }} whileHover={{ scale: 1.1, rotate: -3 }}
@@ -551,7 +552,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
<> <>
{/* Carta de Sabotaje primero (solo para espías) */} {/* Carta de Sabotaje primero (solo para espías) */}
{currentPlayer?.faction === 'spies' && ( {currentPlayer?.faction === 'spies' && (
<button onClick={() => handleMissionVote(false)} className="group"> <button onClick={() => handleMissionVote(false)} className="group transition-opacity" style={{ opacity: missionVote !== null && missionVote !== false ? 0.5 : 1 }} disabled={missionVote !== null}>
<motion.div <motion.div
className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50" className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50"
whileHover={{ scale: 1.1, rotate: -3 }} whileHover={{ scale: 1.1, rotate: -3 }}
@@ -564,7 +565,11 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
)} )}
{/* Carta de Éxito segundo */} {/* Carta de Éxito segundo */}
<button onClick={() => handleMissionVote(true)} className="group"> <button
onClick={() => handleMissionVote(true)}
className={`group transition-opacity ${missionVote !== null && missionVote !== true ? 'opacity-50' : 'opacity-100'}`}
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 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 }} whileHover={{ scale: 1.1, rotate: 3 }}