diff options
| -rw-r--r-- | front/pages/index.tsx | 50 |
1 files changed, 32 insertions, 18 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx index 1d8918c..ec118e6 100644 --- a/front/pages/index.tsx +++ b/front/pages/index.tsx @@ -1,4 +1,4 @@ -import {Card} from 'bsx-core'; +import {Card, Suit} from 'bsx-core'; import {useEffect, useState} from 'react'; import io from 'socket.io-client'; @@ -18,7 +18,14 @@ interface GameState { const rankStrs = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; const suitChars = ['♣', '♦', '♥', '♠']; +function useForceUpdate(){ + const [value, setValue] = useState(0); + return () => setValue(value => value + 1); +} + export default function Game() { + const forceUpdate = useForceUpdate(); + const [socket, setSocket] = useState<SocketIOClient.Socket | null>(null); const [connected, setConnected] = useState(false); const [loggedIn, setLoggedIn] = useState(false); @@ -109,7 +116,7 @@ export default function Game() { </> ); } - const selectedStacks = gameState.players.filter((_, i) => stackSelected[i]); + const selectedStacks = [...Array(gameState.players.length).keys()].filter((_, i) => stackSelected[i]); const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]); if (gameState.phase === 0) { return ( @@ -125,18 +132,23 @@ export default function Game() { <div> <p>Your cards:</p> {gameState.cards.map((card, i) => ( - <label key={card.rank+' '+card.suit+' '}> - <button - onClick={() => { - const tmp = gameState.cards[i]; - gameState.cards[i] = gameState.cards[i-1]; - gameState.cards[i-1] = tmp; - }} - disabled={i === 0} - > - Move left - </button> - {rankStrs[card.rank]+' '+suitChars[card.suit]+' '} + <label key={card.rank+' '+card.suit}> + <div> + <button + onClick={() => { + const tmp = gameState.cards[i]; + gameState.cards[i] = gameState.cards[i-1]; + gameState.cards[i-1] = tmp; + forceUpdate(); + }} + disabled={i === 0} + > + Move up + </button> + <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}> + {' '+rankStrs[card.rank]+' '+suitChars[card.suit]} + </span> + </div> </label> ))} <button @@ -184,7 +196,7 @@ export default function Game() { </button> <button onClick={() => socket.emit('turn', -1)} - disabled={username !== gameState.playerTurn} + disabled={username !== gameState.playerTurn || gameState.lastPlayed === 0} > BS! </button> @@ -206,7 +218,7 @@ export default function Game() { <div> <p>Stacks:</p> {gameState.players.map((player, i) => ( - <label key={player.username+': '+player.stackSize+' cards '}> + <label key={player.username+': '+player.stackSize}> <input type="checkbox" checked={stackSelected[i] || false} @@ -253,12 +265,14 @@ export default function Game() { setCardSelected(cardSelected2); }} /> - {rankStrs[card.rank]+' '+suitChars[card.suit]} + <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}> + {' '+rankStrs[card.rank]+' '+suitChars[card.suit]} + </span> </label> ))} <button onClick={() => socket.emit('giveup', selectedCards[0])} - disabled={username !== gameState.playerTurn || selectedCards.length !== 1} + disabled={username !== (gameState.lastPlayed ? gameState.lastPlayedPlayer : gameState.playerTurn) || selectedCards.length !== 1} > Give up this card! </button> |