Finished implementing phase 1

front/pages/index.tsx

@@ -1,4 +1,4 @@
-import {canPlay, Card} from 'bsx-core';
+import {Card} from 'bsx-core';
 import {useEffect, useState} from 'react';
 import io from 'socket.io-client';
 
@@ -9,9 +9,10 @@ import LoginForm from '../components/LoginForm';
 interface GameState {
 	cards: Card[],
 	players: {username: string, numCards: number, rank: number}[],
-	lastPlayed: Card[] | null,
+	lastPlayed: number,
 	lastPlayedPlayer: string | null,
 	playerTurn: string
+	phase: number
 }
 
 const rankStrs = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
@@ -30,6 +31,8 @@ export default function Game() {
 	const [gameState, setGameState] = useState<GameState | null>(null);
 	const [cardSelected, setCardSelected] = useState<boolean[]>([]);
 
+	const [num, setNum] = useState(0);
+
 	useEffect(() => {
 		const socket = io(process.env.NEXT_PUBLIC_BACK_HOST!);
 		setSocket(socket);
@@ -97,7 +100,7 @@ export default function Game() {
 				{username === roomHost &&
 					<button
 						onClick={() => socket.emit('startGame')}
-						disabled={roomUsers.length < 3}
+						disabled={roomUsers.length < 2}
 					>
 						Start
 					</button>
@@ -106,6 +109,22 @@ export default function Game() {
 		);
 	}
 	const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]);
+	if (gameState.phase === 0) {
+		return (
+			<>
+				<ul>
+					{gameState.players.map(p => (
+						<li key={p.username}>
+							{p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
+						</li>
+					))}
+				</ul>
+
+
+			</>
+		);
+	}
+	else if (gameState.phase === 1) {
 		return (
 			<>
 				<ul>
@@ -119,7 +138,7 @@ export default function Game() {
 					<p>Last played:</p>
 					{gameState.lastPlayed ? (
 						<>
-						{gameState.lastPlayed.map((card, i) => <span key={i}>{rankStrs[card.rank]+' '+suitChars[card.suit]+'|'}</span>)}
+							{gameState.lastPlayed}
 							{` by ${gameState.lastPlayedPlayer}`}
 						</>
 					) : '(Nothing)'}
@@ -127,33 +146,52 @@ export default function Game() {
 				{`It's ${gameState.playerTurn}'s turn!`}
 				<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);
-							}}
+						type="text"
+						placeholder="Play a number greater than the last played number..."
+						value={num}
+						onChange={(e) => setNum(+e.target.value)}
 					/>
-						{rankStrs[card.rank]+' '+suitChars[card.suit]}
-					</label>
-				))}
 					<button
-					onClick={() => socket.emit('turn', selectedCards)}
-					disabled={username !== gameState.playerTurn || !canPlay(gameState.lastPlayed, selectedCards)}
+						onClick={() => socket.emit('turn', num)}
+						disabled={username !== gameState.playerTurn || num <= gameState.lastPlayed}
 					>
-					Play
+						Play!
 					</button>
 					<button
-					onClick={() => socket.emit('turn', null)}
+						onClick={() => socket.emit('turn', -1)}
 						disabled={username !== gameState.playerTurn}
 					>
-					Pass
+						Call BS!
 					</button>
 				</div>
 			</>
 		);
+	}
+	else if (gameState.phase === 2) {
+		return (
+			<>
+				<ul>
+					{gameState.players.map(p => (
+						<li key={p.username}>
+							{p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
+						</li>
+					))}
+				</ul>
+			</>
+		);
+	}
+	else {
+		return (
+			<>
+				<ul>
+					{gameState.players.map(p => (
+						<li key={p.username}>
+							{p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
+						</li>
+					))}
+				</ul>
+			</>
+		);
+	}
 }