Finished implementing phase 1

1 files changed, 91 insertions, 53 deletions

diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 389a3b0..92d967f 100644
--- a/front/pages/index.tsx
+++ b/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,54 +109,89 @@ export default function Game() {
 		);
 	}
 	const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]);
-	return (
-		<>
-			<ul>
-				{gameState.players.map(p => (
-					<li key={p.username}>
-						{p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
-					</li>
-				))}
-			</ul>
-			<div>
-				<p>Last played:</p>
-				{gameState.lastPlayed ? (
-					<>
-						{gameState.lastPlayed.map((card, i) => <span key={i}>{rankStrs[card.rank]+' '+suitChars[card.suit]+'|'}</span>)}
-						{` by ${gameState.lastPlayedPlayer}`}
-					</>
-				) : '(Nothing)'}
-			</div>
-			{`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);
-							}}
-						/>
-						{rankStrs[card.rank]+' '+suitChars[card.suit]}
-					</label>
-				))}
-				<button
-					onClick={() => socket.emit('turn', selectedCards)}
-					disabled={username !== gameState.playerTurn || !canPlay(gameState.lastPlayed, selectedCards)}
-				>
-					Play
-				</button>
-				<button
-					onClick={() => socket.emit('turn', null)}
-					disabled={username !== gameState.playerTurn}
-				>
-					Pass
-				</button>
-			</div>
-		</>
-	);
+	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>
+					{gameState.players.map(p => (
+						<li key={p.username}>
+							{p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
+						</li>
+					))}
+				</ul>
+				<div>
+					<p>Last played:</p>
+					{gameState.lastPlayed ? (
+						<>
+							{gameState.lastPlayed}
+							{` by ${gameState.lastPlayedPlayer}`}
+						</>
+					) : '(Nothing)'}
+				</div>
+				{`It's ${gameState.playerTurn}'s turn!`}
+				<div>
+					<p>Your cards:</p>
+					<input
+						type="text"
+						placeholder="Play a number greater than the last played number..."
+						value={num}
+						onChange={(e) => setNum(+e.target.value)}
+					/>
+					<button
+						onClick={() => socket.emit('turn', num)}
+						disabled={username !== gameState.playerTurn || num <= gameState.lastPlayed}
+					>
+						Play!
+					</button>
+					<button
+						onClick={() => socket.emit('turn', -1)}
+						disabled={username !== gameState.playerTurn}
+					>
+						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>
+			</>
+		);
+	}
 }