Implemented phases 2 and 3

back/src/Game.ts

@@ -28,6 +28,7 @@ class Player {
 			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
@@ -33,6 +33,8 @@ export default function Game() {
 
 	const [num, setNum] = useState(0);
 
+	const [stackSelected, setStackSelected] = useState<boolean[]>([]);
+
 	useEffect(() => {
 		const socket = io(process.env.NEXT_PUBLIC_BACK_HOST!);
 		setSocket(socket);
@@ -108,6 +110,7 @@ export default function Game() {
 			</>
 		);
 	}
+	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 @@ export default function Game() {
 			</>
 		);
 	}
-	else if (gameState.phase === 1) {
+	if (gameState.phase === 1) {
 		return (
 			<>
 				<ul>
@@ -148,7 +151,7 @@ export default function Game() {
 					<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 @@ export default function Game() {
 						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 @@ export default function Game() {
 						</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 @@ export default function Game() {
 						</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>
+		</>
+	);
 }