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

Implemented phases 2 and 3

Browse source
This commit is contained in:
Anthony Wang 2021-05-07 10:00:02 -05:00
parent 23968cba69
commit f8b54ea60c
Signed by: a
GPG key ID: 6FD3502572299774
2 changed files with 66 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
back/src/Game.ts
View file

@ -28,6 +28,7 @@ class Player {
players: otherPlayers.map((p: Player) => ({
username: p.client.username,
numCards: p.cards.length,
stackSize: p.stack.length,
rank: p.rank,
})),
phase: this.game.phase,

72
front/pages/index.tsx
View file

@ -8,7 +8,7 @@ import LoginForm from '../components/LoginForm';
interface GameState {
cards: Card[],
players: {username: string, numCards: number, rank: number}[],
players: {username: string, numCards: number, stackSize: number, rank: number}[],
lastPlayed: number,
lastPlayedPlayer: string | null,
playerTurn: string
@ -33,6 +33,8 @@ export default function Game() {
const [num, setNum] = useState(0);
const [stackSelected, setStackSelected] = useState<boolean[]>([]);
useEffect(() => {
const socket = io(process.env.NEXT_PUBLIC_BACK_HOST!);
setSocket(socket);
@ -108,6 +110,7 @@ export default function Game() {
</>
);
}
const selectedStacks = gameState.players.filter((_, i) => stackSelected[i]);
const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]);
if (gameState.phase === 0) {
return (
@ -124,7 +127,7 @@ export default function Game() {
</>
);
}
else if (gameState.phase === 1) {
if (gameState.phase === 1) {
return (
<>
<ul>
@ -148,7 +151,7 @@ export default function Game() {
<p>Your cards:</p>
<input
type="text"
placeholder="Play a number greater than the last played number..."
placeholder="Claim a number greater than the last claimed number..."
value={num}
onChange={(e) => setNum(+e.target.value)}
/>
@ -156,19 +159,19 @@ export default function Game() {
onClick={() => socket.emit('turn', num)}
disabled={username !== gameState.playerTurn || num <= gameState.lastPlayed}
>
Play!
Claim!
</button>
<button
onClick={() => socket.emit('turn', -1)}
disabled={username !== gameState.playerTurn}
>
Call BS!
BS!
</button>
</div>
</>
);
}
else if (gameState.phase === 2) {
if (gameState.phase === 2) {
return (
<>
<ul>
@ -178,10 +181,34 @@ export default function Game() {
</li>
))}
</ul>
{`${gameState.playerTurn} has called BS! ${gameState.lastPlayedPlayer} must flip over ${gameState.lastPlayed} black cards!`}
<div>
<p>Stacks:</p>
{gameState.players.map((player, i) => (
<label key={player.username+': '+player.stackSize+' cards '}>
<input
type="checkbox"
checked={stackSelected[i] || false}
onChange={() => {
const stackSelected2 = [...stackSelected];
stackSelected2[i] = !stackSelected[i];
setStackSelected(stackSelected2);
}}
/>
{player.username+': '+player.stackSize+' cards '}
</label>
))}
<button
onClick={() => socket.emit('flip', selectedStacks[0])}
disabled={username !== gameState.lastPlayedPlayer || selectedStacks.length !== 1}
>
Flip!
</button>
</div>
</>
);
}
else {
if (gameState.phase === 3) {
return (
<>
<ul>
@ -191,7 +218,38 @@ export default function Game() {
</li>
))}
</ul>
{(gameState.lastPlayed ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`}
<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 || selectedCards.length !== 1}
>
Give up this card!
</button>
</div>
</>
);
}
return (
<>
<div>
<p>Something went wrong! :/</p>
</div>
</>
);
}