Fixed league/practice menus
This commit is contained in:
corey@blaishome.online
@@ -6,58 +6,22 @@ import { useNavigate } from 'react-router-dom';
|
||||
const ScoreTracker = () => {
|
||||
const { state, dispatch } = useScore();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const gameType = state.currentGame.gameType;
|
||||
const isLeague = state.currentGame.isLeague; // Check if it's a league game
|
||||
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 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];
|
||||
const updatedScores = [...arrowScores];
|
||||
updatedScores[index] = value;
|
||||
setArrowScores(updatedScores);
|
||||
};
|
||||
|
||||
const handleAddRound = () => {
|
||||
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;
|
||||
}
|
||||
|
||||
// Regular round handling
|
||||
const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
|
||||
(score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
|
||||
);
|
||||
@@ -75,36 +39,193 @@ const ScoreTracker = () => {
|
||||
};
|
||||
});
|
||||
|
||||
const roundTotal = roundArrows.reduce((sum, arrow) => sum + arrow.score, 0);
|
||||
|
||||
dispatch({
|
||||
type: ACTIONS.ADD_ROUND,
|
||||
payload: {
|
||||
roundIndex: state.currentGame.rounds.length,
|
||||
arrows: roundArrows,
|
||||
total: roundTotal
|
||||
},
|
||||
});
|
||||
|
||||
setArrowScores(Array(maxArrowsPerRound).fill(''));
|
||||
|
||||
if (state.currentGame.rounds.length >= maxRounds - 1) {
|
||||
navigate('/summary');
|
||||
}
|
||||
};
|
||||
|
||||
const handleMainMenu = () => {
|
||||
dispatch({ type: ACTIONS.RESET_GAME });
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const handleGameStart = (gameType, isLeague) => {
|
||||
// Dispatch the action to start a new round with the correct game type and isLeague flag
|
||||
dispatch({
|
||||
type: ACTIONS.START_NEW_ROUND,
|
||||
payload: {
|
||||
gameType, // '450' or '300'
|
||||
isLeague // true for league games, false for practice games
|
||||
}
|
||||
});
|
||||
navigate('/score-tracker'); // Navigate directly to the score tracker
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{ position: 'relative', width: '100%', p: 2 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleMainMenu}
|
||||
<Grid container spacing={2} justifyContent="center">
|
||||
{/* Main Menu Button */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: 16,
|
||||
top: 16,
|
||||
left: 16,
|
||||
}}
|
||||
>
|
||||
Main Menu
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleMainMenu}
|
||||
>
|
||||
Main Menu
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={2} justifyContent="center">
|
||||
{/* ... rest of your JSX ... */}
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h5" align="center" gutterBottom>
|
||||
{gameType} Round - Round {state.currentGame.rounds.length + 1}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1" align="center" gutterBottom>
|
||||
{isLeague ? 'League Game' : 'Practice Game'} {/* Display whether it's a league or practice game */}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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(Array(maxArrowsPerRound).fill(''))}
|
||||
>
|
||||
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.length > 0 ? (
|
||||
state.currentGame.rounds.map((round, roundIndex) => (
|
||||
<Typography key={roundIndex} variant="body2" align="center">
|
||||
Round {roundIndex + 1}: {round.arrows.map(arrow => arrow.score).join(', ')}
|
||||
(Total: {round.total}, Bullseyes: {round.bullseyes})
|
||||
</Typography>
|
||||
))
|
||||
) : (
|
||||
<Typography variant="body2" align="center">
|
||||
No rounds played yet.
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScoreTracker;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user