diff options
Diffstat (limited to 'front/pages/index.tsx')
| -rw-r--r-- | front/pages/index.tsx | 47 |
1 files changed, 43 insertions, 4 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx index 17dca58..869d6ed 100644 --- a/front/pages/index.tsx +++ b/front/pages/index.tsx @@ -18,9 +18,9 @@ interface GameState { const rankStrs = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; const suitChars = ['♣', '♦', '♥', '♠']; -const rules = String.raw`Welcome to BSX!\n -<br/> -There are only 5 simple rules!<br /> +const rules = `Welcome to BSX! + +There are only 5 simple rules! 1. You will first be dealt 5 cards. @@ -30,7 +30,8 @@ There are only 5 simple rules!<br /> 4. If the previous player manages to flip over their claimed number of black cards, you must choose a card from your stack to give up. Otherwise, the previous player must choose one of their cards to give up. -5. If you give up all your cards, you lose! Last player remaining wins!` +5. If you give up all your cards, you lose! Last player remaining wins! +`; function useForceUpdate(){ const [value, setValue] = useState(0); @@ -86,6 +87,9 @@ export default function Game() { if (!loggedIn) { return ( <> + <pre> + {rules} + </pre> <LoginForm socket={socket} finish={(s) => { @@ -131,6 +135,9 @@ export default function Game() { if (gameState.phase === 0) { return ( <> + <pre> + {rules} + </pre> <ul> {gameState.players.map(p => ( <li key={p.username}> @@ -177,6 +184,9 @@ export default function Game() { if (gameState.phase === 1) { return ( <> + <pre> + {rules} + </pre> <ul> {gameState.players.map(p => ( <li key={p.username}> @@ -220,6 +230,9 @@ export default function Game() { if (gameState.phase === 2) { return ( <> + <pre> + {rules} + </pre> <ul> {gameState.players.map(p => ( <li key={p.username}> @@ -257,6 +270,9 @@ export default function Game() { if (gameState.phase === 3) { return ( <> + <pre> + {rules} + </pre> <ul> {gameState.players.map(p => ( <li key={p.username}> @@ -266,6 +282,29 @@ export default function Game() { </ul> {(gameState.lastPlayed > 0 ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`} <div> + <p>Stacks:</p> + {gameState.players.map((player, i) => ( + <label key={player.username+': '+player.stackSize}> + <div> + <button + onClick={() => socket.emit('flip', i)} + disabled={true} + > + Flip! + </button> + {' '+player.username+': '+player.stackSize+' cards '} + {player.flipped.map((card, i) => ( + <label key={card.rank+' '+card.suit}> + <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}> + {' '+rankStrs[card.rank]+' '+suitChars[card.suit]} + </span> + </label> + ))} + </div> + </label> + ))} + </div> + <div> <p>Your cards:</p> {gameState.cards.map((card, i) => ( <label key={card.rank+' '+card.suit}> |