diff options
Diffstat (limited to 'front/pages/index.tsx')
-rw-r--r-- | front/pages/index.tsx | 58 |
1 files changed, 18 insertions, 40 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx index ec118e6..c77fc5c 100644 --- a/front/pages/index.tsx +++ b/front/pages/index.tsx @@ -38,8 +38,6 @@ export default function Game() { const [gameState, setGameState] = useState<GameState | null>(null); const [num, setNum] = useState(0); - const [stackSelected, setStackSelected] = useState<boolean[]>([]); - const [cardSelected, setCardSelected] = useState<boolean[]>([]); useEffect(() => { const socket = io(process.env.NEXT_PUBLIC_BACK_HOST!); @@ -64,8 +62,6 @@ export default function Game() { socket.on('gameState', (data: GameState) => { setGameState(data); - if (data.cards.length !== cardSelected.length) - setCardSelected(new Array(data.cards.length).fill(false)); }); socket.on('endGame', () => setGameState(null)); @@ -116,8 +112,6 @@ export default function Game() { </> ); } - const selectedStacks = [...Array(gameState.players.length).keys()].filter((_, i) => stackSelected[i]); - const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]); if (gameState.phase === 0) { return ( <> @@ -219,24 +213,15 @@ export default function Game() { <p>Stacks:</p> {gameState.players.map((player, i) => ( <label key={player.username+': '+player.stackSize}> - <input - type="checkbox" - checked={stackSelected[i] || false} - onChange={() => { - const stackSelected2 = [...stackSelected]; - stackSelected2[i] = !stackSelected[i]; - setStackSelected(stackSelected2); - }} - /> - {player.username+': '+player.stackSize+' cards '} + <button + onClick={() => socket.emit('flip', i)} + disabled={username !== gameState.lastPlayedPlayer} + > + Flip! + </button> + {' '+player.username+': '+player.stackSize+' cards '} </label> ))} - <button - onClick={() => socket.emit('flip', selectedStacks[0])} - disabled={username !== gameState.lastPlayedPlayer || selectedStacks.length !== 1} - > - Flip! - </button> </div> </> ); @@ -256,26 +241,19 @@ export default function Game() { <p>Your cards:</p> {gameState.cards.map((card, i) => ( <label key={card.rank+' '+card.suit}> - <input - type="checkbox" - checked={cardSelected[i] || false} - onChange={() => { - const cardSelected2 = [...cardSelected]; - cardSelected2[i] = !cardSelected[i]; - setCardSelected(cardSelected2); - }} - /> - <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}> - {' '+rankStrs[card.rank]+' '+suitChars[card.suit]} - </span> + <div> + <button + onClick={() => socket.emit('giveup', i)} + disabled={username !== (gameState.lastPlayed ? gameState.lastPlayedPlayer : gameState.playerTurn)} + > + Give up this card! + </button> + <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}> + {' '+rankStrs[card.rank]+' '+suitChars[card.suit]} + </span> + </div> </label> ))} - <button - onClick={() => socket.emit('giveup', selectedCards[0])} - disabled={username !== (gameState.lastPlayed ? gameState.lastPlayedPlayer : gameState.playerTurn) || selectedCards.length !== 1} - > - Give up this card! - </button> </div> </> ); |