Broken menu

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