Finish implementing phase 0

back/src/Game.ts

@@ -125,11 +125,10 @@ export default class Game {
 			const p = this.players[i];
 			if (p.rank || p.disconnected) continue;
 			playerPromises.push(new Promise<void>(resolve => {
-				p.client.once('prepare', order => {
+				p.client.once('prepare', stack => {
 					delete p.disconnectListener;
 					(() => {
-						
+						p.stack = stack;
-
 						p.client.socket.disconnect();
 						logSocket(p.client.socket, 'Bad cards argument on turn');
 					})();

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>
 			</>
 		);
 	}