From 58b8192539adf4f0093bb677f23cda70b1bec73d Mon Sep 17 00:00:00 2001
From: Ezra McNichols <Ezra.McNichols@directsupply.com>
Date: Sat, 29 Jun 2024 00:22:50 -0500
Subject: [PATCH] Switch for hiding cards.

---
 SpaceAlertResolver/UI/src/pages/CreateGame.tsx | 10 +++++++++-
 SpaceAlertResolver/UI/src/pages/InputCards.tsx | 11 +++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/SpaceAlertResolver/UI/src/pages/CreateGame.tsx b/SpaceAlertResolver/UI/src/pages/CreateGame.tsx
index 1130fc2..72d74e4 100644
--- a/SpaceAlertResolver/UI/src/pages/CreateGame.tsx
+++ b/SpaceAlertResolver/UI/src/pages/CreateGame.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@mui/material';
+import { FormControlLabel, FormGroup, Skeleton, Switch } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { useCallback, useEffect, useState } from 'react';
 import { useStateRef, useWebSocket } from '~/hooks';
@@ -14,6 +14,7 @@ export function CreateGame() {
 	const [clients, setClients, clientsRef] = useStateRef<Client[]>([]);
 	const isLoading = !gameCode;
 	const { deserialize } = useSendToHostMessaging();
+	const [hideCards, setHideCards] = useState(true);
 
 	const handleMessage = useCallback(
 		(messageEventData: MessageEventData) => {
@@ -77,6 +78,12 @@ export function CreateGame() {
 					</div>
 				)}
 			</div>
+			<FormGroup>
+				<FormControlLabel
+					control={<Switch value={hideCards} onChange={() => setHideCards(!hideCards)} />}
+					label="Hide cards (reveal turn-by-turn)"
+				/>
+			</FormGroup>
 			{clients.length > 0 && (
 				<div>
 					<h3>Clients</h3>
@@ -89,6 +96,7 @@ export function CreateGame() {
 										<PlayerBoard
 											scannedCards={client.scannedCards}
 											playerColor={client.playerColor}
+											hideCards={hideCards}
 										/>
 									)}
 								</>
diff --git a/SpaceAlertResolver/UI/src/pages/InputCards.tsx b/SpaceAlertResolver/UI/src/pages/InputCards.tsx
index 030a4b4..9a8c3eb 100644
--- a/SpaceAlertResolver/UI/src/pages/InputCards.tsx
+++ b/SpaceAlertResolver/UI/src/pages/InputCards.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from '@mui/material';
+import { Button, FormControlLabel, FormGroup, Switch, Typography } from '@mui/material';
 import { MutableRefObject, useCallback, useState } from 'react';
 import { BarcodeScanningWorkflow } from '~/components/BarcodeScanningWorkflow';
 import { ColorPicker } from '~/components/ColorPicker';
@@ -27,6 +27,7 @@ export function InputCards({ gameCode, connectionRef }: InputCardsProps) {
 	const { parseBarcodes } = useScannedCards();
 	const [playerColor, setPlayerColor] = useState<PlayerColor | null>(null);
 	const { serialize } = useSendToHostMessaging();
+	const [hideCards, setHideCards] = useState(true);
 
 	const handleBarcodesScanned = (newBarcodes: DetectedBarcode[]) => {
 		const { scannedCards: newScannedCards, playerColor: newPlayerColor } =
@@ -96,7 +97,13 @@ export function InputCards({ gameCode, connectionRef }: InputCardsProps) {
 			{hasAlreadyScanned && (
 				<div className={styles['already-scanned']}>
 					<ColorPicker onPickColor={handleColorPicked} value={playerColor} />
-					<PlayerBoard scannedCards={scannedCards} playerColor={playerColor} />
+					<FormGroup>
+						<FormControlLabel
+							control={<Switch value={hideCards} onChange={() => setHideCards(!hideCards)} />}
+							label="Hide cards (reveal turn-by-turn)"
+						/>
+					</FormGroup>
+					<PlayerBoard scannedCards={scannedCards} playerColor={playerColor} hideCards />
 					<div>
 						{isSubscribed && workflowState === WorkflowState.Scanned && (
 							<Button onClick={handleSendToServerClicked} variant="contained">