Fix some bugs

back/src/Game.ts

@@ -10,6 +10,7 @@ class Player {
 	client: Client;
 	cards: Card[] = [];
 	stack: Card[] = [];
+	flipped: Card[] = [];
 	disconnected = false;
 	disconnectListener?: () => void;
 	rank = 0;
@@ -26,6 +27,7 @@ class Player {
 				username: p.client.username,
 				numCards: p.cards.length,
 				stackSize: p.stack.length,
+				flipped: p.flipped,
 				rank: p.rank,
 			})),
 			phase: this.game.phase,
@@ -58,7 +60,7 @@ export default class Game {
 			const j = Math.floor(Math.random() * (i+1));
 			[cards[i], cards[j]] = [cards[j], cards[i]];
 		}
-		const handSize = 5 - this.room.clients.length/7;
+		const handSize = 5; // 5 - this.room.clients.length/7;
 		for (let i = 0; i < this.room.clients.length; ++i) {
 			this.players.push(new Player(this, this.room.clients[i]));
 			this.players[i].cards = cards.slice(i * handSize, (i + 1) * handSize);
@@ -108,11 +110,13 @@ export default class Game {
 		}
 		while (this.lastPlayed > 0) { // Phase 2
 			await this.flip();
+			this.lastPlayed--;
 			if (this.phase === 3 as number) { // Oops, flipped over a red card!
 				await this.giveup(); // The player who called BS won and now the challenged player must give up a card!
 				return;
 			}
 		}
+		this.phase = 3;
 		await this.giveup(); // The player who called BS won and now they must give up a card!
 	}
 	async prepare() { // Players prepare their hand for this round
@@ -126,6 +130,8 @@ export default class Game {
 					delete p.disconnectListener;
 					(() => {
 						p.stack = stack;
+						p.cards = [...stack];
+						p.flipped = [];
 						return;
 					})();
 					resolve();
@@ -176,6 +182,7 @@ export default class Game {
 					if (this.players[selectedPlayer].stack.length > 0) {
 						if (this.players[selectedPlayer].stack[0].suit === Suit.Diamonds ||
 							this.players[selectedPlayer].stack[0].suit === Suit.Hearts) this.phase = 3; // Red card
+						this.players[selectedPlayer].flipped.push(this.players[selectedPlayer].stack[0]);
 						this.players[selectedPlayer].stack.splice(0, 1);
 						return;
 					}
@@ -192,7 +199,7 @@ export default class Game {
 		});
 	}
 	async giveup() { // Give up a card
-		const p = this.players[this.lastPlayed ? this.lastPlayedPlayer : this.playerTurn];
+		const p = this.players[this.lastPlayed > 0 ? this.lastPlayedPlayer : this.playerTurn];
 		this.broadcastGameState();
 		await new Promise<void>(resolve => {
 			p.client.once('giveup', card => {

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
+							<div>
-								onClick={() => socket.emit('flip', i)}
+								<button
-								disabled={username !== gameState.lastPlayedPlayer}
+									onClick={() => socket.emit('flip', i)}
-							>
+									disabled={username !== gameState.lastPlayedPlayer || player.stackSize === 0}
-								Flip!
+								>
-							</button>
+									Flip!
-							{' '+player.username+': '+player.stackSize+' cards    '}
+								</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>