Finish implementing phase 0

1 files changed, 26 insertions, 4 deletions

diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 8246f9a..2a15c6c 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -29,11 +29,10 @@ export default function Game() {
 	const [roomHost, setRoomHost] = useState('');
 
 	const [gameState, setGameState] = useState<GameState | null>(null);
-	const [cardSelected, setCardSelected] = useState<boolean[]>([]);
 
 	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!);
@@ -122,8 +121,31 @@ export default function Game() {
 						</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>
 			</>
 		);
 	}