aboutsummaryrefslogtreecommitdiff
path: root/front
diff options
context:
space:
mode:
authorAnthony Wang2021-05-06 22:25:04 -0500
committerAnthony Wang2021-05-06 22:25:04 -0500
commit23968cba6949c517abba941e22e7487227fe5de3 (patch)
tree9dd2cc186922b479126a5aca2eac81af40deccfc /front
parent1c058f70bcc76ed4533fd9752609b3e914b9ed44 (diff)
Finished implementing phase 1
Diffstat (limited to 'front')
-rw-r--r--front/pages/index.tsx144
1 files changed, 91 insertions, 53 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 389a3b0..92d967f 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -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>
+ </>
+ );
+ }
}