aboutsummaryrefslogtreecommitdiff
path: root/front
diff options
context:
space:
mode:
authorAnthony Wang2021-05-07 13:21:19 -0500
committerAnthony Wang2021-05-07 13:21:19 -0500
commit87f9951aad3fe0b3d4378bdd5b45d192e527fd71 (patch)
tree8cf2b5c4f917e0a969cfa647e92ea7898ad27f60 /front
parent59f816569719416108e900939cccadb0ab2d413e (diff)
Ready for alpha releasev0.1-alpha
Diffstat (limited to 'front')
-rw-r--r--front/pages/index.tsx58
1 files changed, 18 insertions, 40 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index ec118e6..c77fc5c 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -38,8 +38,6 @@ export default function Game() {
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!);
@@ -64,8 +62,6 @@ export default function Game() {
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));
@@ -116,8 +112,6 @@ export default function Game() {
</>
);
}
- const selectedStacks = [...Array(gameState.players.length).keys()].filter((_, i) => stackSelected[i]);
- const selectedCards = gameState.cards.filter((_, i) => cardSelected[i]);
if (gameState.phase === 0) {
return (
<>
@@ -219,24 +213,15 @@ export default function Game() {
<p>Stacks:</p>
{gameState.players.map((player, i) => (
<label key={player.username+': '+player.stackSize}>
- <input
- type="checkbox"
- checked={stackSelected[i] || false}
- onChange={() => {
- const stackSelected2 = [...stackSelected];
- stackSelected2[i] = !stackSelected[i];
- setStackSelected(stackSelected2);
- }}
- />
- {player.username+': '+player.stackSize+' cards '}
+ <button
+ onClick={() => socket.emit('flip', i)}
+ disabled={username !== gameState.lastPlayedPlayer}
+ >
+ Flip!
+ </button>
+ {' '+player.username+': '+player.stackSize+' cards '}
</label>
))}
- <button
- onClick={() => socket.emit('flip', selectedStacks[0])}
- disabled={username !== gameState.lastPlayedPlayer || selectedStacks.length !== 1}
- >
- Flip!
- </button>
</div>
</>
);
@@ -256,26 +241,19 @@ export default function Game() {
<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);
- }}
- />
- <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}>
- {' '+rankStrs[card.rank]+' '+suitChars[card.suit]}
- </span>
+ <div>
+ <button
+ onClick={() => socket.emit('giveup', i)}
+ disabled={username !== (gameState.lastPlayed ? gameState.lastPlayedPlayer : gameState.playerTurn)}
+ >
+ Give up this card!
+ </button>
+ <span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}>
+ {' '+rankStrs[card.rank]+' '+suitChars[card.suit]}
+ </span>
+ </div>
</label>
))}
- <button
- onClick={() => socket.emit('giveup', selectedCards[0])}
- disabled={username !== (gameState.lastPlayed ? gameState.lastPlayedPlayer : gameState.playerTurn) || selectedCards.length !== 1}
- >
- Give up this card!
- </button>
</div>
</>
);