diff options
| author | Anthony Wang | 2021-05-07 21:10:54 -0500 |
|---|---|---|
| committer | Anthony Wang | 2021-05-07 21:10:54 -0500 |
| commit | d1c0d54c40b11c44c7531911bec37ebbe550d33e (patch) | |
| tree | 211b3910bd31a5770358ed76153788a73bcfb7b2 /front | |
| parent | 069e1d3a1fc80ae2d202b9e8ae4d2c9ee4102a81 (diff) | |
Fix some bugs
Diffstat (limited to 'front')
| -rw-r--r-- | front/pages/index.tsx | 29 |
1 files changed, 19 insertions, 10 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx index c77fc5c..4bb154d 100644 --- a/front/pages/index.tsx +++ b/front/pages/index.tsx @@ -8,7 +8,7 @@ import LoginForm from '../components/LoginForm'; interface GameState { cards: Card[], - players: {username: string, numCards: number, stackSize: number, rank: number}[], + players: {username: string, numCards: number, stackSize: number, flipped: Card[], rank: number}[], lastPlayed: number, lastPlayedPlayer: string | null, playerTurn: string @@ -213,13 +213,22 @@ export default function Game() { <p>Stacks:</p> {gameState.players.map((player, i) => ( <label key={player.username+': '+player.stackSize}> - <button - onClick={() => socket.emit('flip', i)} - disabled={username !== gameState.lastPlayedPlayer} - > - Flip! - </button> - {' '+player.username+': '+player.stackSize+' cards '} + <div> + <button + onClick={() => socket.emit('flip', i)} + disabled={username !== gameState.lastPlayedPlayer || player.stackSize === 0} + > + Flip! + </button> + {' '+player.username+': '+player.stackSize+' cards '} + {player.flipped.map((card, i) => ( + <label key={card.rank+' '+card.suit}> + <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}> + {' '+rankStrs[card.rank]+' '+suitChars[card.suit]} + </span> + </label> + ))} + </div> </label> ))} </div> @@ -236,7 +245,7 @@ export default function Game() { </li> ))} </ul> - {(gameState.lastPlayed ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`} + {(gameState.lastPlayed > 0 ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`} <div> <p>Your cards:</p> {gameState.cards.map((card, i) => ( @@ -244,7 +253,7 @@ export default function Game() { <div> <button onClick={() => socket.emit('giveup', i)} - disabled={username !== (gameState.lastPlayed ? gameState.lastPlayedPlayer : gameState.playerTurn)} + disabled={username !== (gameState.lastPlayed > 0 ? gameState.lastPlayedPlayer : gameState.playerTurn)} > Give up this card! </button> |