Finally fix frontend

Changes

1 changed files (+32/-18)

• 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 @@
    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 @@ }
    </> ); } - 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 @@ {`Rearrange your card stack from top to bottom!`}
    <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 @@ Claim!
    </button> <button onClick={() => socket.emit('turn', -1)} - disabled={username !== gameState.playerTurn} + disabled={username !== gameState.playerTurn || gameState.lastPlayed === 0} > BS! </button>
  • @@ -206,7 +218,7 @@ {`${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 '}> + <label key={player.username+': '+player.stackSize}> <input type="checkbox" checked={stackSelected[i] || false}
  • @@ -253,12 +265,14 @@ cardSelected2[i] = !cardSelected[i];
    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>