Started work on 5spot

asc/src/components/GameSetup.js

@@ -1,25 +1,46 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { 
   Button,
   Card,
   CardContent,
   CardHeader,
   Grid,
-  Typography 
+  Typography,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Divider
 } from '@mui/material';
 import { useScore, ACTIONS } from '../context/ScoreContext';
 
 const GameSetup = ({ onGameStart }) => {
   const { dispatch } = useScore();
+  const [selectedGameType, setSelectedGameType] = useState('');
+  const [selectedTargetFace, setSelectedTargetFace] = useState('standard');
 
-  const startGame = (gameType) => {
+  const handleGameTypeSelect = (gameType) => {
+    setSelectedGameType(gameType);
+    setSelectedTargetFace('standard'); // Reset to standard when game type changes
+  };
+
+  const startGame = () => {
+    if (!selectedGameType) return;
+    
     dispatch({
       type: ACTIONS.START_GAME,
-      payload: { gameType, isLeague: false }
+      payload: { 
+        gameType: selectedGameType, 
+        isLeague: false,
+        targetFace: selectedTargetFace
+      }
     });
     onGameStart();
   };
 
+  // Determine if we should show target face options
+  const showTargetFaceOptions = selectedGameType !== '';
+
   return (
     <Grid container spacing={3} justifyContent="center" alignItems="center" style={{ minHeight: '80vh' }}>
       <Grid item xs={12} sm={8} md={6}>
@@ -40,8 +61,12 @@ const GameSetup = ({ onGameStart }) => {
                   fullWidth
                   variant="contained"
                   color="primary"
-                  size="large"
-                  onClick={() => startGame('450')}
+                  size={selectedGameType === '450' ? "large" : "medium"}
+                  onClick={() => handleGameTypeSelect('450')}
+                  style={{ 
+                    backgroundColor: selectedGameType === '450' ? undefined : '#1976d2',
+                    boxShadow: selectedGameType === '450' ? '0 0 10px #1976d2' : undefined 
+                  }}
                 >
                   450 Round
                 </Button>
@@ -51,12 +76,69 @@ const GameSetup = ({ onGameStart }) => {
                   fullWidth
                   variant="contained"
                   color="secondary"
-                  size="large"
-                  onClick={() => startGame('300')}
+                  size={selectedGameType === '300' ? "large" : "medium"}
+                  onClick={() => handleGameTypeSelect('300')}
+                  style={{ 
+                    backgroundColor: selectedGameType === '300' ? undefined : '#9c27b0',
+                    boxShadow: selectedGameType === '300' ? '0 0 10px #9c27b0' : undefined 
+                  }}
                 >
                   300 Round
                 </Button>
               </Grid>
+
+              {showTargetFaceOptions && (
+                <>
+                  <Grid item xs={12}>
+                    <Divider style={{ margin: '16px 0' }} />
+                    <Typography variant="body1" align="center" gutterBottom>
+                      Select your target face:
+                    </Typography>
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FormControl component="fieldset">
+                      <RadioGroup
+                        row
+                        name="targetFace"
+                        value={selectedTargetFace}
+                        onChange={(e) => setSelectedTargetFace(e.target.value)}
+                      >
+                        <FormControlLabel 
+                          value="standard" 
+                          control={<Radio />} 
+                          label="Standard" 
+                        />
+                        {selectedGameType === '300' && (
+                          <FormControlLabel 
+                            value="5-spot" 
+                            control={<Radio />} 
+                            label="5-Spot" 
+                          />
+                        )}
+                        {selectedGameType === '450' && (
+                          <FormControlLabel 
+                            value="3-spot" 
+                            control={<Radio />} 
+                            label="3-Spot" 
+                          />
+                        )}
+                      </RadioGroup>
+                    </FormControl>
+                  </Grid>
+
+                  <Grid item xs={12} style={{ marginTop: '16px' }}>
+                    <Button
+                      fullWidth
+                      variant="contained"
+                      color="success"
+                      size="large"
+                      onClick={startGame}
+                    >
+                      Start Game
+                    </Button>
+                  </Grid>
+                </>
+              )}
             </Grid>
           </CardContent>
         </Card>

asc/src/context/ScoreContext.js

@@ -5,36 +5,74 @@ export const ACTIONS = {
   ADD_ROUND: 'add_round',
   RESET_GAME: 'reset_game',
   SAVE_GAME: 'save_game',
-  LOAD_HISTORY: 'load_history'
+  LOAD_HISTORY: 'load_history',
+  SET_TARGET_FACE: 'set_target_face'
+};
+
+// Define the available score values for each game type and target face
+export const TARGET_FACES = {
+  '300': {
+    'standard': [0, 1, 2, 3, 4, 5, 'x'], // Standard scoring for 300 game
+    '5-spot': [0, 4, 5, 'x']             // 5-spot target face for 300 game
+  },
+  '450': {
+    'standard': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 'x'], // Standard scoring for 450 game
+    '3-spot': [0, 6, 7, 8, 9, 10, 'x']                   // 3-spot target face for 450 game
+  }
 };
 
 const initialState = {
   currentGame: {
     gameType: '',
     isLeague: false,
+    targetFace: 'standard', // Default to standard target face
     rounds: [],
     totalScore: 0,
     totalBullseyes: 0,
-    date: null
+    date: null,
+    availableScores: [] // Will be populated based on gameType and targetFace
   },
   history: []
 };
 
+// Helper function to get available scores based on game type and target face
+const getAvailableScores = (gameType, targetFace) => {
+  if (!gameType || !targetFace) return [];
+  return TARGET_FACES[gameType]?.[targetFace] || [];
+};
+
 const scoreReducer = (state, action) => {
   switch (action.type) {
-    case ACTIONS.START_NEW_ROUND:
+    case ACTIONS.START_GAME: // Changed from START_NEW_ROUND to match the exported ACTIONS
+      const gameType = action.payload.gameType;
+      const targetFace = action.payload.targetFace || 'standard';
+      
       return {
         ...state,
         currentGame: {
-          gameType: action.payload.gameType,
+          gameType,
           isLeague: action.payload.isLeague,
+          targetFace,
           rounds: [],
           totalScore: 0,
           totalBullseyes: 0,
           dateStarted: new Date().toISOString(),
+          availableScores: getAvailableScores(gameType, targetFace)
         },
       };
 
+    case ACTIONS.SET_TARGET_FACE:
+      const newTargetFace = action.payload.targetFace;
+      
+      return {
+        ...state,
+        currentGame: {
+          ...state.currentGame,
+          targetFace: newTargetFace,
+          availableScores: getAvailableScores(state.currentGame.gameType, newTargetFace)
+        }
+      };
+
     case ACTIONS.ADD_ROUND:
       const updatedRounds = [...state.currentGame.rounds];
       updatedRounds[action.payload.roundIndex] = {