-
Draw Pile
- {gameState.drawnCard && isMyTurn && drawnFrom === 'deck' ? (
-
- {renderCard(gameState.drawnCard, -2, true, false)}
-
- ) : (
-
isMyTurn && !gameState.drawnCard && handleDrawCard()}
- onTouchEnd={(e) => {
- e.preventDefault()
- if (isMyTurn && !gameState.drawnCard) handleDrawCard()
- }}
- >
- ?
- {gameState.drawPile}
-
- )}
+
Deck
+
isMyTurn && !gameState.drawnCard && drawCard()}
+ onTouchEnd={(e) => {
+ e.preventDefault()
+ if (isMyTurn && !gameState.drawnCard) drawCard()
+ }}
+ >
+
+
{gameState.drawPile}
+
-
Discard Pile
- {gameState.drawnCard && isMyTurn && drawnFrom === 'discard' ? (
-
- {renderCard(gameState.drawnCard, -2, true, false)}
-
- ) : gameState.discardPile.length > 0 ? (
+
Discard
+ {gameState.discardPile.length > 0 ? (
0 ? styles.clickable : ''}`}
- onClick={() => isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0 && handleTakeFromDiscard()}
+ className={`${isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0 ? styles.clickable : ''} ${gameState.drawnCard ? styles.pileDepleted : ''}`}
+ onClick={() => isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0 && takeFromDiscard()}
onTouchEnd={(e) => {
e.preventDefault()
- if (isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0) handleTakeFromDiscard()
+ if (isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0) takeFromDiscard()
}}
>
{renderCard(gameState.discardPile[gameState.discardPile.length - 1], -1, true, false)}
@@ -576,40 +558,30 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
+ {/* Floating held card */}
+ {gameState.drawnCard && isMyTurn && (
+
+ Held card
+ {renderCard(gameState.drawnCard, -2, true, false)}
+
+ )}
+
Your Cards
-
+
{currentPlayer.cards.map((card, index) =>
renderCard(card, index, currentPlayer.revealedCards.includes(index), true)
)}
- {!gameState.drawnCard ? (
- <>
-
- {gameState.discardPile.length > 0 && (
-
- )}
-
- ) : (
+ {gameState.drawnCard ? (
<>
-
- )}
+ ) : null}
{gameState.gamePhase === 'playing' && !gameState.drawnCard && (
)}
-
- {currentPlayer.revealedCards.length < 2 && gameState.gamePhase === 'playing' && !currentPlayer.hasPeeked && (
-
- Click on {2 - currentPlayer.revealedCards.length} cards to peek at them
-
- )}
)}
diff --git a/src/hooks/useGolfGame.ts b/src/hooks/useGolfGame.ts
index 6d1ac38..e97d865 100644
--- a/src/hooks/useGolfGame.ts
+++ b/src/hooks/useGolfGame.ts
@@ -66,7 +66,7 @@ interface UseGolfGameReturn {
peekCard: (index: number) => void
drawCard: () => void
takeFromDiscard: () => void
- swapCard: () => void
+ swapCard: (index?: number) => void
discardDrawn: () => void
knock: () => void
handleCardClick: (index: number) => void
@@ -230,8 +230,9 @@ export const useGolfGame = ({
networkAdapterRef.current.takeFromDiscard()
}, [showNotification])
- const swapCard = useCallback(() => {
- if (selectedCardIndex === null) {
+ const swapCard = useCallback((index?: number) => {
+ const swapIndex = index ?? selectedCardIndex
+ if (swapIndex === null) {
showNotification('Select a card to swap first')
return
}
@@ -239,7 +240,7 @@ export const useGolfGame = ({
showNotification('Not connected to server')
return
}
- networkAdapterRef.current.swapCard(selectedCardIndex)
+ networkAdapterRef.current.swapCard(swapIndex)
setSelectedCardIndex(null)
}, [selectedCardIndex, showNotification])
@@ -271,9 +272,9 @@ export const useGolfGame = ({
if (currentPlayer.revealedCards.length < 2 && !currentPlayer.hasPeeked && !currentPlayer.revealedCards.includes(index)) {
peekCard(index)
} else if (isPlayersTurn && gameState?.drawnCard) {
- setSelectedCardIndex(index)
+ swapCard(index)
}
- }, [gameState, playerId, peekCard, peekCountdown])
+ }, [gameState, playerId, peekCard, peekCountdown, swapCard])
const clearGameState = useCallback(() => {
setGameState(null)