114 lines
3.7 KiB
JavaScript
114 lines
3.7 KiB
JavaScript
// src/components/ScoreTracker.js
|
|
import React, { useState } from 'react';
|
|
import { useScore, ACTIONS } from '../context/ScoreContext';
|
|
import { Button, Grid, Typography, TextField } from '@mui/material';
|
|
|
|
const ScoreTracker = () => {
|
|
const { state, dispatch } = useScore();
|
|
const [arrowScores, setArrowScores] = useState(['', '', '', '', '']); // Track scores for each arrow
|
|
|
|
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
|
|
|
|
// Handle arrow score input change
|
|
const handleScoreChange = (index, value) => {
|
|
const updatedScores = [...arrowScores];
|
|
updatedScores[index] = value;
|
|
setArrowScores(updatedScores);
|
|
};
|
|
|
|
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'
|
|
);
|
|
if (!valid) {
|
|
alert(`Please enter valid scores between 0-${maxScore} or X for bullseyes.`);
|
|
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
|
|
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 item xs={12}>
|
|
<Typography variant="h4" align="center" gutterBottom>
|
|
Score Tracker: {gameType} Round
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<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>
|
|
))}
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default ScoreTracker;
|
|
|