Implemented phases 2 and 3

Changes

2 changed files (+66/-7)

• back/src/Game.ts
  • @@ -28,6 +28,7 @@ rank: this.rank,
    players: otherPlayers.map((p: Player) => ({ username: p.client.username, numCards: p.cards.length, + stackSize: p.stack.length, rank: p.rank, })), phase: this.game.phase,
• front/pages/index.tsx
  • @@ -8,7 +8,7 @@ import LoginForm from '../components/LoginForm';
    interface GameState { cards: Card[], - players: {username: string, numCards: number, rank: number}[], + players: {username: string, numCards: number, stackSize: number, rank: number}[], lastPlayed: number, lastPlayedPlayer: string | null, playerTurn: string
  • @@ -32,6 +32,8 @@ const [gameState, setGameState] = useState<GameState | null>(null);
    const [cardSelected, setCardSelected] = useState<boolean[]>([]); const [num, setNum] = useState(0); + + const [stackSelected, setStackSelected] = useState<boolean[]>([]); useEffect(() => { const socket = io(process.env.NEXT_PUBLIC_BACK_HOST!);
  • @@ -108,6 +110,7 @@ }
    </> ); } + const selectedStacks = gameState.players.filter((_, i) => stackSelected[i]); const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]); if (gameState.phase === 0) { return (
  • @@ -124,7 +127,7 @@
    </> ); } - else if (gameState.phase === 1) { + if (gameState.phase === 1) { return ( <> <ul>
  • @@ -148,7 +151,7 @@ <div>
    <p>Your cards:</p> <input type="text" - placeholder="Play a number greater than the last played number..." + placeholder="Claim a number greater than the last claimed number..." value={num} onChange={(e) => setNum(+e.target.value)} />
  • @@ -156,19 +159,19 @@ <button
    onClick={() => socket.emit('turn', num)} disabled={username !== gameState.playerTurn || num <= gameState.lastPlayed} > - Play! + Claim! </button> <button onClick={() => socket.emit('turn', -1)} disabled={username !== gameState.playerTurn} > - Call BS! + BS! </button> </div> </> ); } - else if (gameState.phase === 2) { + if (gameState.phase === 2) { return ( <> <ul>
  • @@ -178,10 +181,34 @@ {p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
    </li> ))} </ul> + {`${gameState.playerTurn} has called BS! ${gameState.lastPlayedPlayer} must flip over ${gameState.lastPlayed} black cards!`} + <div> + <p>Stacks:</p> + {gameState.players.map((player, i) => ( + <label key={player.username+': '+player.stackSize+' cards '}> + <input + type="checkbox" + checked={stackSelected[i] || false} + onChange={() => { + const stackSelected2 = [...stackSelected]; + stackSelected2[i] = !stackSelected[i]; + setStackSelected(stackSelected2); + }} + /> + {player.username+': '+player.stackSize+' cards '} + </label> + ))} + <button + onClick={() => socket.emit('flip', selectedStacks[0])} + disabled={username !== gameState.lastPlayedPlayer || selectedStacks.length !== 1} + > + Flip! + </button> + </div> </> ); } - else { + if (gameState.phase === 3) { return ( <> <ul>
  • @@ -191,7 +218,38 @@ {p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
    </li> ))} </ul> + {(gameState.lastPlayed ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`} + <div> + <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); + }} + /> + {rankStrs[card.rank]+' '+suitChars[card.suit]} + </label> + ))} + <button + onClick={() => socket.emit('turn', selectedCards)} + disabled={username !== gameState.playerTurn || selectedCards.length !== 1} + > + Give up this card! + </button> + </div> </> ); } + return ( + <> + <div> + <p>Something went wrong! :/</p> + </div> + </> + ); }