Finished implementing phase 1

This commit is contained in:
Anthony Wang 2021-05-06 22:25:04 -05:00
parent 1c058f70bc
commit 23968cba69
Signed by: a
GPG key ID: 6FD3502572299774

View file

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