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 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>
</>
);
}
}