277 lines
7.3 KiB
TypeScript
277 lines
7.3 KiB
TypeScript
import {Card} from 'bsx-core';
|
|
import {useEffect, useState} from 'react';
|
|
import io from 'socket.io-client';
|
|
|
|
import CreateRoomForm from '../components/CreateRoomForm';
|
|
import JoinRoomForm from '../components/JoinRoomForm';
|
|
import LoginForm from '../components/LoginForm';
|
|
|
|
interface GameState {
|
|
cards: Card[],
|
|
players: {username: string, numCards: number, stackSize: number, rank: number}[],
|
|
lastPlayed: number,
|
|
lastPlayedPlayer: string | null,
|
|
playerTurn: string
|
|
phase: number
|
|
}
|
|
|
|
const rankStrs = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
|
|
const suitChars = ['♣', '♦', '♥', '♠'];
|
|
|
|
export default function Game() {
|
|
const [socket, setSocket] = useState<SocketIOClient.Socket | null>(null);
|
|
const [connected, setConnected] = useState(false);
|
|
const [loggedIn, setLoggedIn] = useState(false);
|
|
const [username, setUsername] = useState<string | null>(null);
|
|
|
|
const [room, setRoom] = useState<string | null>(null);
|
|
const [roomUsers, setRoomUsers] = useState<string[]>([]);
|
|
const [roomHost, setRoomHost] = useState('');
|
|
|
|
const [gameState, setGameState] = useState<GameState | null>(null);
|
|
|
|
const [num, setNum] = useState(0);
|
|
const [stackSelected, setStackSelected] = useState<boolean[]>([]);
|
|
const [cardSelected, setCardSelected] = useState<boolean[]>([]);
|
|
|
|
useEffect(() => {
|
|
const socket = io(process.env.NEXT_PUBLIC_BACK_HOST!);
|
|
setSocket(socket);
|
|
socket.on('connect', () => setConnected(true));
|
|
socket.on('disconnect', () => {
|
|
setConnected(false);
|
|
setLoggedIn(false);
|
|
setRoom(null);
|
|
setGameState(null);
|
|
});
|
|
|
|
socket.on('joinRoom', (data: {name: string}) => setRoom(data.name));
|
|
socket.on('leaveRoom', () => {
|
|
setRoom(null);
|
|
setGameState(null);
|
|
});
|
|
socket.on('roomUpdate', (data: {users: string[], host: string}) => {
|
|
setRoomUsers(data.users);
|
|
setRoomHost(data.host);
|
|
});
|
|
|
|
socket.on('gameState', (data: GameState) => {
|
|
setGameState(data);
|
|
if (data.cards.length !== cardSelected.length)
|
|
setCardSelected(new Array(data.cards.length).fill(false));
|
|
});
|
|
socket.on('endGame', () => setGameState(null));
|
|
|
|
return () => {socket.close()};
|
|
}, []);
|
|
|
|
if (!socket) return null;
|
|
if (!loggedIn) {
|
|
return (
|
|
<LoginForm
|
|
socket={socket}
|
|
finish={(s) => {
|
|
setLoggedIn(true);
|
|
setUsername(s);
|
|
}}
|
|
username={username}
|
|
/>
|
|
);
|
|
}
|
|
if (!room) {
|
|
return (
|
|
<>
|
|
<p>Logged in as {username}</p>
|
|
<hr />
|
|
<JoinRoomForm socket={socket} />
|
|
<hr />
|
|
<CreateRoomForm socket={socket} />
|
|
</>
|
|
);
|
|
}
|
|
if (!gameState) {
|
|
return (
|
|
<>
|
|
<p>Room {room}</p>
|
|
<p>Users:</p>
|
|
<ul>
|
|
{roomUsers.map(user => <li key={user}>{user + (user === roomHost ? ' (Host)':'')}</li>)}
|
|
</ul>
|
|
<button onClick={() => socket.emit('leaveRoom')}>Leave</button>
|
|
{username === roomHost &&
|
|
<button
|
|
onClick={() => socket.emit('startGame')}
|
|
disabled={roomUsers.length < 2}
|
|
>
|
|
Start
|
|
</button>
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
const selectedStacks = gameState.players.filter((_, i) => stackSelected[i]);
|
|
const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]);
|
|
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>
|
|
{`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>
|
|
))}
|
|
<button
|
|
onClick={() => socket.emit('prepare', gameState.cards)}
|
|
//disabled={username !== gameState.playerTurn || !canPlay(gameState.lastPlayed, selectedCards)}
|
|
>
|
|
I'm ready!
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
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="Claim a number greater than the last claimed number..."
|
|
value={num}
|
|
onChange={(e) => setNum(+e.target.value)}
|
|
/>
|
|
<button
|
|
onClick={() => socket.emit('turn', num)}
|
|
disabled={username !== gameState.playerTurn || num <= gameState.lastPlayed}
|
|
>
|
|
Claim!
|
|
</button>
|
|
<button
|
|
onClick={() => socket.emit('turn', -1)}
|
|
disabled={username !== gameState.playerTurn}
|
|
>
|
|
BS!
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
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>
|
|
{`${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 '}>
|
|
<input
|
|
type="checkbox"
|
|
checked={stackSelected[i] || false}
|
|
onChange={() => {
|
|
const stackSelected2 = [...stackSelected];
|
|
stackSelected2[i] = !stackSelected[i];
|
|
setStackSelected(stackSelected2);
|
|
}}
|
|
/>
|
|
{player.username+': '+player.stackSize+' cards '}
|
|
</label>
|
|
))}
|
|
<button
|
|
onClick={() => socket.emit('flip', selectedStacks[0])}
|
|
disabled={username !== gameState.lastPlayedPlayer || selectedStacks.length !== 1}
|
|
>
|
|
Flip!
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
if (gameState.phase === 3) {
|
|
return (
|
|
<>
|
|
<ul>
|
|
{gameState.players.map(p => (
|
|
<li key={p.username}>
|
|
{p.username + (p.rank ? ` (Rank ${p.rank})` : '') + (p.numCards ? ` (${p.numCards} cards)` : '')}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{(gameState.lastPlayed ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`}
|
|
<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 || selectedCards.length !== 1}
|
|
>
|
|
Give up this card!
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<div>
|
|
<p>Something went wrong! :/</p>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|