aboutsummaryrefslogtreecommitdiff
path: root/front
diff options
context:
space:
mode:
authorAnthony Wang2021-05-09 12:00:42 -0500
committerAnthony Wang2021-05-09 12:00:42 -0500
commite1d06740a9a6e6e0b08e1d52f19f259d74793751 (patch)
treed4232fcff11aedd91ef835ef1967c926cc74be6b /front
parentcb24f26534bb09730b21087115ea257715e52ee3 (diff)
Update UI
Diffstat (limited to 'front')
-rw-r--r--front/pages/index.tsx47
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}>