aboutsummaryrefslogtreecommitdiff
path: root/front
diff options
context:
space:
mode:
authorAnthony Wang2021-05-07 10:00:02 -0500
committerAnthony Wang2021-05-07 10:00:02 -0500
commitf8b54ea60ce26b3bacaf980a67596b68207c33e7 (patch)
tree872b31b337d45720814a9bd394284646d74a73cb /front
parent23968cba6949c517abba941e22e7487227fe5de3 (diff)
Implemented phases 2 and 3
Diffstat (limited to 'front')
-rw-r--r--front/pages/index.tsx72
1 files changed, 65 insertions, 7 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 92d967f..8246f9a 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -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>
+ </>
+ );
}