Switch for hiding cards.

ecm85 · Jun 29, 2024 · 58b8192 · 58b8192
1 parent 8179178
commit 58b8192
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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">