Broken updates

asc/src/components/ScoreTracker.js

@@ -1,17 +1,15 @@
 // src/components/ScoreTracker.js
 import React, { useState } from 'react';
 import { useScore, ACTIONS } from '../context/ScoreContext';
-import { Button, Grid, Typography, TextField } from '@mui/material';
+import { Button, Grid, Typography, TextField, Box } from '@mui/material';
 
 const ScoreTracker = () => {
   const { state, dispatch } = useScore();
-  const [arrowScores, setArrowScores] = useState(['', '', '', '', '']); // Track scores for each arrow
-
+  const [arrowScores, setArrowScores] = useState(['', '', '', '', '']);
   const gameType = state.currentGame.gameType;
-  const maxArrowsPerRound = gameType === '450' ? 3 : 5; // 3 for 450 game, 5 for 300 game
-  const maxScore = gameType === '450' ? 10 : 5; // Max score per arrow depends on the game
+  const maxArrowsPerRound = gameType === '450' ? 3 : 5;
+  const maxScore = gameType === '450' ? 10 : 5;
 
-  // Handle arrow score input change
   const handleScoreChange = (index, value) => {
     const updatedScores = [...arrowScores];
     updatedScores[index] = value;
@@ -19,7 +17,6 @@ const ScoreTracker = () => {
   };
 
   const handleAddRound = () => {
-    // Validate all scores: numeric between 0 and maxScore, or 'X'
     const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
       (score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
     );
@@ -28,86 +25,145 @@ const ScoreTracker = () => {
       return;
     }
 
-    // Dispatch each arrow score for the round
     arrowScores.slice(0, maxArrowsPerRound).forEach((score) => {
       const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);
-
       dispatch({
         type: ACTIONS.ADD_ARROW,
         payload: {
-          roundIndex: state.currentGame.rounds.length, // Current round index
+          roundIndex: state.currentGame.rounds.length,
           score: arrowScore,
           isBullseye: score.toUpperCase() === 'X',
         },
       });
     });
-
-    // Reset the arrow scores for the next round
     setArrowScores(['', '', '', '', '']);
   };
 
   return (
-    <Grid container spacing={3} justifyContent="center" alignItems="center" style={{ minHeight: '80vh' }}>
+    <Grid container spacing={2} justifyContent="center">
       <Grid item xs={12}>
-        <Typography variant="h4" align="center" gutterBottom>
-          Score Tracker: {gameType} Round
+        <Typography variant="h5" align="center" gutterBottom>
+          {gameType} Round - Round {state.currentGame.rounds.length + 1}
         </Typography>
       </Grid>
-
+      
+      {/* Compact score input section */}
       <Grid item xs={12}>
-        <Typography variant="h6" align="center">
-          Round {state.currentGame.rounds.length + 1}
-        </Typography>
-      </Grid>
-
-      {/* Arrow score inputs */}
-      {Array.from({ length: maxArrowsPerRound }).map((_, index) => (
-        <Grid item xs={12} sm={6} key={index}>
-          <TextField
-            label={`Arrow ${index + 1} Score`}
-            value={arrowScores[index]}
-            onChange={(e) => handleScoreChange(index, e.target.value)}
-            fullWidth
-            placeholder={`Enter 0-${maxScore} or X`}
-          />
-        </Grid>
-      ))}
-
-      {/* Add round button */}
-      <Grid item xs={12}>
-        <Button variant="contained" color="primary" onClick={handleAddRound} fullWidth>
-          Add Round
-        </Button>
-      </Grid>
-
-      {/* Current game status */}
-      <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>
-
-      {/* Display all round scores */}
-      <Grid item xs={12}>
-        <Typography variant="h6" align="center" gutterBottom>
-          All Round Scores:
-        </Typography>
-        <Grid container spacing={2}>
-          {state.currentGame.rounds.map((round, roundIndex) => (
-            <Grid item xs={12} key={roundIndex}>
-              <Typography variant="body1" align="center">
-                Round {roundIndex + 1}: {round.arrows.join(', ')} (Total: {round.total}, Bullseyes: {round.bullseyes})
-              </Typography>
-            </Grid>
+        <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' }
+              }}
+            />
           ))}
-        </Grid>
+        </Box>
+      </Grid>
+
+      {/* 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>
+        </Box>
+      </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.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>
   );
 };
 
 export default ScoreTracker;
-