Finally fix frontend

1 files changed, 32 insertions, 18 deletions

diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 1d8918c..ec118e6 100644
--- a/front/pages/index.tsx
+++ b/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 @@ 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>