a/McCarthyism
1
1
Fork 0
Code Issues Pull requests Packages Projects Releases 8 Wiki Activity

Finally fix frontend

Browse source
This commit is contained in:
Anthony Wang 2021-05-07 12:59:17 -05:00
parent 6d0d14e385
commit 59f8165697
Signed by: a
GPG key ID: 6FD3502572299774
1 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
front/pages/index.tsx
View file

@ -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>