a/McCarthyism
1
1
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity

Finished implementing phase 1

Browse source
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
1 changed files with 91 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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