Added menu

asc/src/components/ScoreTracker.js

@@ -1,12 +1,11 @@
-// src/components/ScoreTracker.js
 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
+import { useNavigate } from 'react-router-dom';
 
 const ScoreTracker = () => {
   const { state, dispatch } = useScore();
-  const navigate = useNavigate(); // <-- Define the navigate hook
+  const navigate = useNavigate();
   const gameType = state.currentGame.gameType;
   const maxArrowsPerRound = gameType === '450' ? 3 : 5;
   const maxScore = gameType === '450' ? 10 : 5;
@@ -14,36 +13,60 @@ const ScoreTracker = () => {
 
   const [arrowScores, setArrowScores] = useState(Array(maxArrowsPerRound).fill(''));
 
+  const handleMainMenu = () => {
+    if (window.confirm('Are you sure you want to return to the main menu? Current game progress will be lost.')) {
+      dispatch({ type: ACTIONS.RESET_GAME });
+      navigate('/');
+    }
+  };
+
   const handleScoreChange = (index, value) => {
     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');
-  };
-
-  // 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
+    if (state.currentGame.rounds.length >= maxRounds - 1) { // Check if this is the last round
+      const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
+        (score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
+      );
+
+      if (!valid) {
+        alert(`Please enter valid scores between 0-${maxScore} or X for bullseyes.`);
+        return;
+      }
+
+      const roundArrows = arrowScores.slice(0, maxArrowsPerRound).map((score) => {
+        const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);
+        return {
+          score: arrowScore,
+          isBullseye: score.toUpperCase() === 'X',
+        };
+      });
+
+      dispatch({
+        type: ACTIONS.ADD_ROUND,
+        payload: {
+          roundIndex: state.currentGame.rounds.length,
+          arrows: roundArrows,
+        },
+      });
+
+      navigate('/summary');
       return;
     }
 
-    // Validate Scores
+    // Regular round handling
     const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
       (score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
     );
+    
     if (!valid) {
       alert(`Please enter valid scores between 0-${maxScore} or X for bullseyes.`);
       return;
     }
 
-    // Add arrows to the current round
     const roundArrows = arrowScores.slice(0, maxArrowsPerRound).map((score) => {
       const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);
       return {
@@ -60,147 +83,28 @@ const ScoreTracker = () => {
       },
     });
 
-    setArrowScores(['', '', '', '', '']);
+    setArrowScores(Array(maxArrowsPerRound).fill(''));
   };
 
   return (
-    <Grid container spacing={2} justifyContent="center">
-      <Grid item xs={12}>
-        <Typography variant="h5" align="center" gutterBottom>
-          {gameType} Round - Round {state.currentGame.rounds.length + 1}
-        </Typography>
-      </Grid>
-      
-      {/* Compact score input section */}
-      <Grid item xs={12}>
-        <Box 
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            gap: 1,
-            mb: 2
-          }}
-        >
-          {Array.from({ length: maxArrowsPerRound }).map((_, index) => (
-            <TextField
-              key={index}
-              value={arrowScores[index]}
-              onChange={(e) => handleScoreChange(index, e.target.value)}
-              placeholder="0"
-              size="small"
-              sx={{
-                width: '60px',
-                '& .MuiInputBase-input': {
-                  padding: '8px',
-                  textAlign: 'center'
-                }
-              }}
-              inputProps={{
-                maxLength: 1,
-                style: { textAlign: 'center' }
-              }}
-            />
-          ))}
-        </Box>
-      </Grid>
+    <Box sx={{ position: 'relative', width: '100%', p: 2 }}>
+      <Button
+        variant="outlined"
+        onClick={handleMainMenu}
+        sx={{
+          position: 'absolute',
+          left: 16,
+          top: 16,
+        }}
+      >
+        Main Menu
+      </Button>
 
-      {/* Score buttons */}
-      <Grid item xs={12}>
-        <Box 
-          sx={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'center',
-            gap: 1,
-            mb: 2
-          }}
-        >
-          {Array.from({ length: maxScore + 1 }).map((_, i) => (
-            <Button
-              key={i}
-              variant="outlined"
-              size="small"
-              sx={{ minWidth: '40px', height: '40px' }}
-              onClick={() => {
-                const emptyIndex = arrowScores.findIndex(score => score === '');
-                if (emptyIndex >= 0 && emptyIndex < maxArrowsPerRound) {
-                  handleScoreChange(emptyIndex, i.toString());
-                }
-              }}
-            >
-              {i}
-            </Button>
-          ))}
-          <Button
-            variant="outlined"
-            size="small"
-            sx={{ minWidth: '40px', height: '40px' }}
-            onClick={() => {
-              const emptyIndex = arrowScores.findIndex(score => score === '');
-              if (emptyIndex >= 0 && emptyIndex < maxArrowsPerRound) {
-                handleScoreChange(emptyIndex, 'X');
-              }
-            }}
-          >
-            X
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => navigate('/')}
-          >
-            Main Menu
-          </Button>
-        </Box>
+      <Grid container spacing={2} justifyContent="center">
+        {/* ... rest of your JSX ... */}
       </Grid>
-
-      {/* Control buttons */}
-      <Grid item xs={12}>
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2 }}>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleAddRound}
-            disabled={!arrowScores.slice(0, maxArrowsPerRound).every(score => score !== '')}
-          >
-            Add Round
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => setArrowScores(['', '', '', '', ''])}
-          >
-            Clear
-          </Button>
-        </Box>
-      </Grid>
-
-      {/* Scores display */}
-      <Grid item xs={12}>
-        <Typography variant="h6" align="center">
-          Total Score: {state.currentGame.totalScore} | 
-          Bullseyes: {state.currentGame.totalBullseyes}
-        </Typography>
-      </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>
+    </Box>
   );
 };
 
 export default ScoreTracker;
-