Changes
1 changed files (+91/-53)
-
-
@@ -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 @@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'];
-
@@ -29,6 +30,8 @@ const [roomHost, setRoomHost] = useState('');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!);
-
@@ -97,7 +100,7 @@ <button onClick={() => socket.emit('leaveRoom')}>Leave</button>{username === roomHost && <button onClick={() => socket.emit('startGame')} disabled={roomUsers.length < 3} disabled={roomUsers.length < 2} > Start </button>
-
@@ -106,54 +109,89 @@ </>); } 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> </> ); } }
-