Broken menu

asc/src/App.js

@@ -1,10 +1,13 @@
 // src/App.js
 import React, { useState, useMemo, useEffect } from 'react';
-import { CssBaseline, Container, ThemeProvider, createTheme, IconButton } from '@mui/material';
-import { Brightness4, Brightness7 } from '@mui/icons-material';
+import { CssBaseline, Container, IconButton } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { ScoreProvider } from './context/ScoreContext';
 import GameSetup from './components/GameSetup';
 import ScoreTracker from './components/ScoreTracker';
+import GameSummary from './components/GameSummary';
+import { Brightness7, Brightness4 } from '@mui/icons-material';
 
 function App() {
   // Initialize theme from localStorage or default to 'light'
@@ -12,7 +15,7 @@ function App() {
     try {
       const savedMode = localStorage.getItem('themeMode');
       return savedMode || 'light';
-    } catch {
+    } catch (e) {
       return 'light';
     }
   });
@@ -69,11 +72,15 @@ function App() {
           >
             {mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
           </IconButton>
-          {!gameStarted ? (
-            <GameSetup onGameStart={() => setGameStarted(true)} />
-          ) : (
-            <ScoreTracker />
-          )}
+          <Router>
+            <Routes>
+              <Route 
+                path="/" 
+                element={!gameStarted ? <GameSetup onGameStart={() => setGameStarted(true)} /> : <ScoreTracker />} 
+              />
+              <Route path="/summary" element={<GameSummary />} />
+            </Routes>
+          </Router>
         </Container>
       </ScoreProvider>
     </ThemeProvider>
@@ -81,3 +88,4 @@ function App() {
 }
 
 export default App;
+

asc/src/components/GameSummary.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useScore } from '../context/ScoreContext';
+import { Button, Grid, Typography, Box } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+const GameSummary = () => {
+  const { state } = useScore();
+  const navigate = useNavigate();
+
+  const handleNewGame = () => {
+    navigate('/');
+  };
+
+  return (
+    <>
+      {/* Main Menu Button */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 16,
+          left: 16,
+        }}
+      >
+        <Button variant="outlined" onClick={handleNewGame}>
+          Main Menu
+        </Button>
+      </Box>
+
+      <Grid container spacing={2} justifyContent="center">
+        <Grid item xs={12}>
+          <Typography variant="h4" align="center" gutterBottom>
+            Game Summary
+          </Typography>
+        </Grid>
+
+        {/* Total score */}
+        <Grid item xs={12}>
+          <Typography variant="h6" align="center">
+            Total Score: {state.currentGame.totalScore}
+          </Typography>
+          <Typography variant="h6" align="center">
+            Total Bullseyes: {state.currentGame.totalBullseyes}
+          </Typography>
+        </Grid>
+
+        {/* New game button */}
+        <Grid item xs={12} align="center">
+          <Button variant="contained" onClick={handleNewGame}>
+            Start New Game
+          </Button>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+export default GameSummary;
+

asc/src/components/ScoreTracker.js

@@ -2,21 +2,43 @@
 import React, { useState } from 'react';
 import { useScore, ACTIONS } from '../context/ScoreContext';
 import { Button, Grid, Typography, TextField, Box } from '@mui/material';
+import { useNavigate } from 'react-router-dom';  // <-- Add this import
 
 const ScoreTracker = () => {
   const { state, dispatch } = useScore();
-  const [arrowScores, setArrowScores] = useState(['', '', '', '', '']);
+  const navigate = useNavigate(); // <-- Define the navigate hook
   const gameType = state.currentGame.gameType;
   const maxArrowsPerRound = gameType === '450' ? 3 : 5;
   const maxScore = gameType === '450' ? 10 : 5;
+  const maxRounds = gameType === '450' ? 16 : 12;
+
+  const [arrowScores, setArrowScores] = useState(Array(maxArrowsPerRound).fill(''));
 
   const handleScoreChange = (index, value) => {
-    const updatedScores = [...arrowScores];
+    const updatedScores = [...arrowScores]; 
     updatedScores[index] = value;
     setArrowScores(updatedScores);
   };
 
+  // Handle Add Round, Game Completion, etc.
+
+  const handleGameEnd = () => {
+    // Navigate to the summary page after the game ends
+    navigate('/summary');
+  };
+
+  // Rest of your component code (Rendering, Button handlers, etc.)
+};
+
+  // Handle adding a round
   const handleAddRound = () => {
+    // Check if the max number of rounds is reached
+    if (state.currentGame.rounds.length >= maxRounds) {
+      navigate('/summary');  // Navigate to summary page when max rounds are reached
+      return;
+    }
+
+    // Validate Scores
     const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
       (score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
     );
@@ -25,17 +47,23 @@ const ScoreTracker = () => {
       return;
     }
 
-    arrowScores.slice(0, maxArrowsPerRound).forEach((score) => {
+    // Add arrows to the current round
+    const roundArrows = arrowScores.slice(0, maxArrowsPerRound).map((score) => {
       const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);
-      dispatch({
-        type: ACTIONS.ADD_ARROW,
-        payload: {
-          roundIndex: state.currentGame.rounds.length,
-          score: arrowScore,
-          isBullseye: score.toUpperCase() === 'X',
-        },
-      });
+      return {
+        score: arrowScore,
+        isBullseye: score.toUpperCase() === 'X',
+      };
     });
+
+    dispatch({
+      type: ACTIONS.ADD_ROUND,
+      payload: {
+        roundIndex: state.currentGame.rounds.length,
+        arrows: roundArrows,
+      },
+    });
+
     setArrowScores(['', '', '', '', '']);
   };
 
@@ -120,6 +148,13 @@ const ScoreTracker = () => {
           >
             X
           </Button>
+	  <Button
+            variant="outlined"
+            onClick={() => navigate('/')}
+          >
+            Main Menu
+          </Button>
+
         </Box>
       </Grid>
 
@@ -150,19 +185,24 @@ const ScoreTracker = () => {
           Bullseyes: {state.currentGame.totalBullseyes}
         </Typography>
       </Grid>
-
-      {/* Round history */}
-      <Grid item xs={12}>
-        <Box sx={{ maxHeight: '200px', overflow: 'auto' }}>
-          {state.currentGame.rounds.map((round, roundIndex) => (
-            <Typography key={roundIndex} variant="body2" align="center">
-              Round {roundIndex + 1}: {round.arrows.join(', ')} 
-              (Total: {round.total}, Bullseyes: {round.bullseyes})
-            </Typography>
-          ))}
-        </Box>
-      </Grid>
-    </Grid>
+{/* Round history */}
+  <Grid item xs={12}>
+  <Box sx={{ maxHeight: '200px', overflow: 'auto' }}>
+    {state.currentGame && state.currentGame.rounds && state.currentGame.rounds.length > 0 ? (
+      state.currentGame.rounds.map((round, roundIndex) => (
+        <Typography key={roundIndex} variant="body2" align="center">
+          Round {roundIndex + 1}: {round.arrows ? round.arrows.join(', ') : 'No arrows'} 
+          (Total: {round.total || 0}, Bullseyes: {round.bullseyes || 0})
+        </Typography>
+      ))
+    ) : (
+      <Typography variant="body2" align="center">
+        No rounds played yet.
+      </Typography>
+    )}
+    </Box>
+   </Grid>
+  </Grid>
   );
 };