diff --git a/src/apps/golf/components/GolfGame.module.css b/src/apps/golf/components/GolfGame.module.css index ff38050..b1bd073 100644 --- a/src/apps/golf/components/GolfGame.module.css +++ b/src/apps/golf/components/GolfGame.module.css @@ -254,15 +254,10 @@ } .card.selected { - border: 3px solid #ffd700; - transform: scale(1.08); - box-shadow: 0 0 16px rgba(255, 215, 0, 0.5); - animation: selectedPulse 1.2s ease-in-out infinite; -} - -@keyframes selectedPulse { - 0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.4); } - 50% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.8); } + outline: 3px solid #ffd700; + outline-offset: -3px; + transform: scale(1.05); + box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); } .card.clickable, @@ -354,15 +349,10 @@ color: rgba(255, 255, 255, 0.5); } -.emptyPileReserved { - width: 80px; - height: 120px; - visibility: hidden; -} - -.drawnCardWrapper .card { - border: 2px solid #ffd700; - box-shadow: 0 0 16px rgba(255, 215, 0, 0.4); +.drawnCardHighlight .card { + outline: 3px solid #ffd700; + outline-offset: -3px; + box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); } .playerArea { @@ -650,8 +640,9 @@ } .card.selected { - border: 3px solid #ffd700; - transform: scale(1.1); + outline: 3px solid #ffd700; + outline-offset: -3px; + transform: scale(1.08); box-shadow: 0 0 24px rgba(255, 215, 0, 0.6); } @@ -682,11 +673,6 @@ height: 100px; } - .emptyPileReserved { - width: 70px; - height: 100px; - } - .playerArea { padding: 1rem; width: 100%; @@ -888,11 +874,6 @@ height: 80px; } - .emptyPileReserved { - width: 55px; - height: 80px; - } - .cardGrid { max-width: 130px; gap: 0.6rem; diff --git a/src/apps/golf/components/GolfGame.tsx b/src/apps/golf/components/GolfGame.tsx index 33327ac..a7a7dd3 100644 --- a/src/apps/golf/components/GolfGame.tsx +++ b/src/apps/golf/components/GolfGame.tsx @@ -69,6 +69,19 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn joinNewGame } = useGolfGame({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConnectionChange, permalinkParams }) + const [drawnFromRaw, setDrawnFromRaw] = useState<'deck' | 'discard' | null>(null) + const drawnFrom = gameState?.drawnCard ? drawnFromRaw : null + + const handleDrawCard = () => { + setDrawnFromRaw('deck') + drawCard() + } + + const handleTakeFromDiscard = () => { + setDrawnFromRaw('discard') + takeFromDiscard() + } + const renderCard = (card: Card | null, index: number, isRevealed: boolean, isPlayer: boolean) => { const isSelected = selectedCardIndex === index const canInteract = isPlayer && (isMyTurn || (currentPlayer && !currentPlayer.hasPeeked && gameState?.gamePhase === 'playing')) @@ -520,28 +533,38 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn