fixed all buttons for all game modes

asc/src/components/ScoreTracker.js

@@ -62,10 +62,12 @@ const ScoreTracker = () => {
         return total + parseInt(arrow);
       }
     }, 0);
-}; 
+  }; 
   
   // Get button color based on score
   const getButtonColor = (score) => {
+    // For 450 game with single spot, use a specific color scheme
+    if (state.currentGame.gameType === '450' && state.currentGame.targetFace !== '3-spot') {
       switch(score) {
         case 'X':
           return { bgcolor: '#FF9800', color: 'white' }; // Orange
@@ -78,6 +80,48 @@ const ScoreTracker = () => {
         case '6':
         case '5':
         case '4':
+        case '3':
+          return { bgcolor: '#4CAF50', color: 'white' }; // Green
+        case '2':
+        case '1':
+        case 'M':
+          return { bgcolor: '#9E9E9E', color: 'white' }; // Gray
+        default:
+          return { bgcolor: 'default' };
+      }
+    } 
+    // For 450 game with 3-spot
+    else if (state.currentGame.gameType === '450' && state.currentGame.targetFace === '3-spot') {
+      switch(score) {
+        case 'X':
+          return { bgcolor: '#FF9800', color: 'white' }; // Orange
+        case '10':
+          return { bgcolor: '#9C27B0', color: 'white' }; // Purple
+        case '9':
+        case '8':
+          return { bgcolor: '#2196F3', color: 'white' }; // Blue
+        case 'M':
+          return { bgcolor: '#9E9E9E', color: 'white' }; // Gray
+        default:
+          return { bgcolor: 'default' };
+      }
+    }
+    // Original color scheme for other game types (300 games)
+    else {
+      switch(score) {
+        case 'X':
+          return { bgcolor: '#FF9800', color: 'white' }; // Orange
+        case '5':
+          return { bgcolor: '#9C27B0', color: 'white' }; // Purple
+        case '4':
+          return { bgcolor: '#2196F3', color: 'white' }; // Blue
+        case '10':
+          return { bgcolor: '#9C27B0', color: 'white' }; // Purple
+        case '9':
+        case '8':
+          return { bgcolor: '#2196F3', color: 'white' }; // Blue
+        case '7':
+        case '6':
         case '3':
         case '2':
         case '1':
@@ -87,6 +131,7 @@ const ScoreTracker = () => {
         default:
           return { bgcolor: 'default' };
       }
+    }
   };
   
   // Handle saving the current end
@@ -132,10 +177,26 @@ const ScoreTracker = () => {
   }
 
   // Get the number of arrows per end based on game type
-  const arrowsPerEnd = state.currentGame.gameType === '450' ? 6 : 5;
+  const arrowsPerEnd = state.currentGame.gameType === '450' ? 3 : 5;
   
-  // Score button values
+  // Score button values based on game type and target face
-  const scoreButtons = ['X', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1', 'M'];
+  const getScoreButtons = () => {
+    if (state.currentGame.gameType === '300' && state.currentGame.targetFace === '5-spot') {
+      return ['X', '5', '4', 'M'];
+    } else if (state.currentGame.gameType === '300' && state.currentGame.targetFace !== '5-spot') {
+      // For 300 game with single spot, exclude 10-6
+      return ['X', '5', '4', '3', '2', '1', 'M'];
+    } else if (state.currentGame.gameType === '450' && state.currentGame.targetFace === '3-spot') {
+      // For 450 game with 3-spot, only X, 10-8, and M
+      return ['X', '10', '9', '8', 'M'];
+    } else {
+      // For other combinations, keep the full range
+      return ['X', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1', 'M'];
+    }
+  };
+  
+  // Use the function to get the appropriate buttons
+  const scoreButtons = getScoreButtons();
   
   return (
     <Grid container spacing={3} justifyContent="center">
@@ -208,13 +269,33 @@ const ScoreTracker = () => {
               {/* Current end display */}
               <Box sx={{ display: 'flex', flexWrap: 'wrap', mb: 2 }}>
                 {currentEnd.map((arrow, index) => {
+                  // Updated color mapping to match button colors
                   let bgColor;
+                  
+                  if (state.currentGame.gameType === '450' && state.currentGame.targetFace !== '3-spot') {
+                    // For 450 games with single spot
                     if (arrow.toUpperCase() === 'X') bgColor = '#FF9800'; // Orange
-                  else if (arrow.toUpperCase() === '10') bgColor = '#9C27B0'; // Purple
+                    else if (arrow === '10') bgColor = '#9C27B0'; // Purple
+                    else if (['9', '8'].includes(arrow)) bgColor = '#2196F3'; // Blue
+                    else if (['7', '6', '5', '4', '3'].includes(arrow)) bgColor = '#4CAF50'; // Green
+                    else if (['2', '1', 'M'].includes(arrow) || arrow.toUpperCase() === 'M') bgColor = '#9E9E9E'; // Gray
+                    else bgColor = 'default';
+                  } else if (state.currentGame.gameType === '450' && state.currentGame.targetFace === '3-spot') {
+                    // For 450 games with 3-spot
+                    if (arrow.toUpperCase() === 'X') bgColor = '#FF9800'; // Orange
+                    else if (arrow === '10') bgColor = '#9C27B0'; // Purple
                     else if (['9', '8'].includes(arrow)) bgColor = '#2196F3'; // Blue
-                  else if (['7', '6', '5', '4', '3', '2', '1'].includes(arrow)) bgColor = '#4CAF50'; // Green
                     else if (arrow.toUpperCase() === 'M') bgColor = '#9E9E9E'; // Gray
                     else bgColor = 'default';
+                  } else {
+                    // For other games (300 rounds)
+                    if (arrow.toUpperCase() === 'X') bgColor = '#FF9800'; // Orange
+                    else if (arrow === '5' || arrow === '10') bgColor = '#9C27B0'; // Purple
+                    else if (arrow === '4' || ['9', '8'].includes(arrow)) bgColor = '#2196F3'; // Blue
+                    else if (['7', '6', '3', '2', '1'].includes(arrow)) bgColor = '#4CAF50'; // Green
+                    else if (arrow.toUpperCase() === 'M') bgColor = '#9E9E9E'; // Gray
+                    else bgColor = 'default';
+                  }
                   
                   return (
                     <Paper 

asc/src/components/ScoreTracker.old

@@ -0,0 +1,324 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  Typography,
+  Box,
+  Paper,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Divider,
+  ButtonGroup
+} from '@mui/material';
+import { Remove } from '@mui/icons-material';
+import { useScore, ACTIONS } from '../context/ScoreContext';
+
+const ScoreTracker = () => {
+  const { state, dispatch } = useScore();
+  const navigate = useNavigate();
+  
+  // Local state for the current end
+  const [currentEnd, setCurrentEnd] = useState([]);
+  
+  // Check if we have an active game, if not redirect to setup
+  useEffect(() => {
+    if (!state.currentGame || !state.currentGame.gameType) {
+      navigate('/');
+    }
+  }, [state.currentGame, navigate]);
+  
+  // Handle adding an arrow score
+  const handleAddArrow = (score) => {
+    // Add to current end
+    setCurrentEnd([...currentEnd, score]);
+  };
+  
+  // Handle removing the last arrow
+  const handleRemoveArrow = () => {
+    if (currentEnd.length > 0) {
+      const newEnd = [...currentEnd];
+      newEnd.pop();
+      setCurrentEnd(newEnd);
+    }
+  };
+  
+  // Calculate total for current end
+  const calculateEndTotal = (arrows) => {
+    return arrows.reduce((total, arrow) => {
+    if (arrow.toUpperCase() === 'X') {
+      return total + 10;
+    } else if (arrow.toUpperCase() === 'M') {
+      return total;
+    } else {
+      return total + parseInt(arrow);
+    }
+  }, 0);
+}; 
+  
+  // Get button color based on score
+  const getButtonColor = (score) => {
+    switch(score) {
+      case 'X':
+        return { bgcolor: '#FF9800', color: 'white' }; // Orange
+      case '10':
+        return { bgcolor: '#9C27B0', color: 'white' }; // Purple
+      case '9':
+      case '8':
+        return { bgcolor: '#2196F3', color: 'white' }; // Blue
+      case '7':
+      case '6':
+      case '5':
+      case '4':
+      case '3':
+      case '2':
+      case '1':
+        return { bgcolor: '#4CAF50', color: 'white' }; // Green
+      case 'M':
+        return { bgcolor: '#9E9E9E', color: 'white' }; // Gray
+      default:
+        return { bgcolor: 'default' };
+    }
+  };
+  
+  // Handle saving the current end
+  const handleSaveEnd = () => {
+    if (currentEnd.length > 0) {
+      // Create the end object
+      const endObject = {
+        arrows: [...currentEnd],
+        total: calculateEndTotal(currentEnd),
+        timestamp: new Date().toISOString()
+      };
+      
+      // Dispatch to context
+      dispatch({
+        type: ACTIONS.ADD_END,
+        payload: endObject
+      });
+      
+      // Clear current end
+      setCurrentEnd([]);
+    }
+  };
+  
+  // Handle ending the game
+  const handleEndGame = () => {
+    // Save final scores to history first
+    dispatch({
+      type: ACTIONS.SAVE_GAME,
+    });
+    
+    // Then end the current game
+    dispatch({
+      type: ACTIONS.END_GAME,
+    });
+    
+    // Navigate to setup page
+    navigate('/');
+  };
+  
+  // Early return if no game is active
+  if (!state.currentGame || !state.currentGame.gameType) {
+    return null; // Will be redirected by useEffect
+  }
+
+  // Get the number of arrows per end based on game type
+  const arrowsPerEnd = state.currentGame.gameType === '450' ? 3 : 5;
+  
+  // Score button values
+  const scoreButtons = ['X', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1', 'M'];
+  
+  return (
+    <Grid container spacing={3} justifyContent="center">
+      <Grid item xs={12} sm={10} md={8}>
+        <Card>
+          <CardHeader 
+            title={`${state.currentGame.gameType} Round ${state.currentGame.isLeague ? '(League)' : '(Practice)'}`}
+            titleTypographyProps={{ align: 'center' }}
+          />
+          <CardContent>
+            <Typography variant="h6" gutterBottom>
+              Target Face: {state.currentGame.targetFace || 'Standard'}
+            </Typography>
+            
+            {/* Current game stats */}
+            <Box sx={{ mb: 3 }}>
+              <Paper elevation={2} sx={{ p: 2 }}>
+                <Typography variant="h6" gutterBottom>
+                  Current Score: {state.currentGame.ends?.reduce((total, end) => total + end.total, 0) || 0}
+                </Typography>
+                <Typography variant="body1">
+                  Ends Completed: {state.currentGame.ends?.length || 0}
+                </Typography>
+              </Paper>
+            </Box>
+            
+            {/* Score input section */}
+            <Box sx={{ mb: 3 }}>
+              <Typography variant="h6" gutterBottom>
+                Score Current End
+              </Typography>
+              
+              {/* Score buttons */}
+              <Box sx={{ mb: 2 }}>
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', mb: 1, gap: 0.5 }}>
+                  {scoreButtons.map((score) => {
+                    const colorStyle = getButtonColor(score);
+                    return (
+                      <Button 
+                        key={score}
+                        variant="contained"
+                        onClick={() => handleAddArrow(score)}
+                        disabled={currentEnd.length >= arrowsPerEnd}
+                        sx={{ 
+                          minWidth: '45px',
+                          bgcolor: colorStyle.bgcolor,
+                          color: colorStyle.color,
+                          '&:hover': {
+                            bgcolor: colorStyle.bgcolor,
+                            opacity: 0.9
+                          }
+                        }}
+                      >
+                        {score}
+                      </Button>
+                    );
+                  })}
+                  
+                  <IconButton 
+                    color="secondary" 
+                    onClick={handleRemoveArrow} 
+                    disabled={currentEnd.length === 0}
+                    sx={{ ml: 1 }}
+                  >
+                    <Remove />
+                  </IconButton>
+                </Box>
+              </Box>
+              
+              {/* Current end display */}
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', mb: 2 }}>
+                {currentEnd.map((arrow, index) => {
+                  let bgColor;
+                  if (arrow.toUpperCase() === 'X') bgColor = '#FF9800'; // Orange
+                  else if (arrow.toUpperCase() === '10') bgColor = '#9C27B0'; // Purple
+                  else if (['9', '8'].includes(arrow)) bgColor = '#2196F3'; // Blue
+                  else if (['7', '6', '5', '4', '3', '2', '1'].includes(arrow)) bgColor = '#4CAF50'; // Green
+                  else if (arrow.toUpperCase() === 'M') bgColor = '#9E9E9E'; // Gray
+                  else bgColor = 'default';
+                  
+                  return (
+                    <Paper 
+                      key={index}
+                      elevation={1}
+                      sx={{ 
+                        p: 1.5, 
+                        m: 0.5, 
+                        minWidth: '40px', 
+                        textAlign: 'center',
+                        bgcolor: bgColor,
+                        color: 'white'
+                      }}
+                    >
+                      <Typography variant="h6">{arrow.toUpperCase()}</Typography>
+                    </Paper>
+                  );
+                })}
+                {Array(arrowsPerEnd - currentEnd.length).fill(0).map((_, index) => (
+                  <Paper 
+                    key={`empty-${index}`}
+                    elevation={1}
+                    sx={{ 
+                      p: 1.5, 
+                      m: 0.5, 
+                      minWidth: '40px', 
+                      textAlign: 'center',
+                      bgcolor: '#f5f5f5'
+                    }}
+                  >
+                    <Typography variant="h6">-</Typography>
+                  </Paper>
+                ))}
+              </Box>
+              
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body1">
+                  End Total: {calculateEndTotal(currentEnd)}
+                </Typography>
+                <Button 
+                  variant="contained" 
+                  color="primary" 
+                  onClick={handleSaveEnd}
+                  disabled={currentEnd.length === 0 || currentEnd.length < arrowsPerEnd}
+                >
+                  Save End
+                </Button>
+              </Box>
+            </Box>
+            
+            <Divider sx={{ my: 3 }} />
+            
+            {/* Previous ends display */}
+            {(state.currentGame.ends?.length > 0) && (
+              <Box sx={{ mb: 3 }}>
+                <Typography variant="h6" gutterBottom>
+                  Previous Ends
+                </Typography>
+                <TableContainer component={Paper}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>End</TableCell>
+                        <TableCell>Arrows</TableCell>
+                        <TableCell>Total</TableCell>
+                        <TableCell>Running Total</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {state.currentGame.ends.map((end, endIndex) => {
+                        const runningTotal = state.currentGame.ends
+                          .slice(0, endIndex + 1)
+                          .reduce((total, e) => total + e.total, 0);
+                          
+                        return (
+                          <TableRow key={endIndex}>
+                            <TableCell>{endIndex + 1}</TableCell>
+                            <TableCell>
+                              {end.arrows.join(', ')}
+                            </TableCell>
+                            <TableCell>{end.total}</TableCell>
+                            <TableCell>{runningTotal}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </Box>
+            )}
+            
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={handleEndGame}
+              sx={{ mt: 3 }}
+            >
+              End Game
+            </Button>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ScoreTracker;