fixed 5 spot component
This commit is contained in:
corey@blaishome.online
@@ -1,231 +1,162 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
Grid,
|
||||
Typography,
|
||||
Select,
|
||||
MenuItem
|
||||
} from '@mui/material';
|
||||
import { useScore, ACTIONS } from '../context/ScoreContext';
|
||||
import { Button, Grid, Typography, TextField, Box } from '@mui/material';
|
||||
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 GameSetup = ({ onGameStart }) => {
|
||||
const { dispatch } = useScore();
|
||||
|
||||
const [arrowScores, setArrowScores] = useState(Array(maxArrowsPerRound).fill(''));
|
||||
const [selectedGameType, setSelectedGameType] = useState('');
|
||||
const [isLeague, setIsLeague] = useState(false); // This tracks if it's a league game
|
||||
const [selectedTargetFace, setSelectedTargetFace] = useState('single'); // Assuming single as default target face
|
||||
|
||||
const handleScoreChange = (index, value) => {
|
||||
const updatedScores = [...arrowScores];
|
||||
updatedScores[index] = value;
|
||||
setArrowScores(updatedScores);
|
||||
// Log isLeague to verify if it changes correctly
|
||||
useEffect(() => {
|
||||
console.log("Game mode isLeague:", isLeague); // Check this in the console
|
||||
}, [isLeague]);
|
||||
|
||||
const handleGameModeChange = (event) => {
|
||||
const leagueMode = event.target.value === "league";
|
||||
setIsLeague(leagueMode); // Update isLeague based on user selection
|
||||
};
|
||||
|
||||
const handleAddRound = () => {
|
||||
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 handleTargetFaceChange = (event) => {
|
||||
setSelectedTargetFace(event.target.value);
|
||||
};
|
||||
|
||||
const roundArrows = arrowScores.slice(0, maxArrowsPerRound).map((score) => {
|
||||
const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);
|
||||
return {
|
||||
score: arrowScore,
|
||||
isBullseye: score.toUpperCase() === 'X',
|
||||
};
|
||||
const startGame = () => {
|
||||
if (!selectedGameType) return;
|
||||
|
||||
// Log the values to ensure they're correct
|
||||
console.log("Starting game with settings:", {
|
||||
gameType: selectedGameType,
|
||||
isLeague: isLeague,
|
||||
targetFace: selectedTargetFace
|
||||
});
|
||||
|
||||
const roundTotal = roundArrows.reduce((sum, arrow) => sum + arrow.score, 0);
|
||||
|
||||
dispatch({
|
||||
type: ACTIONS.ADD_ROUND,
|
||||
type: ACTIONS.START_GAME,
|
||||
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
|
||||
gameType: selectedGameType,
|
||||
isLeague: isLeague, // Pass the league/practice mode correctly
|
||||
targetFace: selectedTargetFace
|
||||
}
|
||||
});
|
||||
navigate('/score-tracker'); // Navigate directly to the score tracker
|
||||
onGameStart();
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Grid container spacing={2} justifyContent="center">
|
||||
{/* Main Menu Button */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 16,
|
||||
left: 16,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleMainMenu}
|
||||
>
|
||||
Main Menu
|
||||
</Button>
|
||||
</Box>
|
||||
<Grid container spacing={3} justifyContent="center" alignItems="center" style={{ minHeight: '80vh' }}>
|
||||
<Grid item xs={12} sm={8} md={6}>
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Start New Game"
|
||||
titleTypographyProps={{ align: 'center' }}
|
||||
/>
|
||||
<CardContent>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" align="center" gutterBottom>
|
||||
Select your game type:
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color={selectedGameType === '450' ? 'primary' : 'default'}
|
||||
size="large"
|
||||
onClick={() => setSelectedGameType('450')}
|
||||
>
|
||||
450 Round
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color={selectedGameType === '300' ? 'secondary' : 'default'}
|
||||
size="large"
|
||||
onClick={() => setSelectedGameType('300')}
|
||||
>
|
||||
300 Round
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
<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>
|
||||
{/* Select League or Practice Mode */}
|
||||
<Grid item xs={12}>
|
||||
<FormControl component="fieldset" fullWidth>
|
||||
<Typography variant="body1" align="center" gutterBottom>
|
||||
Select game mode:
|
||||
</Typography>
|
||||
<RadioGroup
|
||||
row
|
||||
name="gameMode"
|
||||
value={isLeague ? "league" : "practice"} // Display correct mode
|
||||
onChange={handleGameModeChange}
|
||||
>
|
||||
<FormControlLabel
|
||||
value="practice"
|
||||
control={<Radio />}
|
||||
label="Practice"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="league"
|
||||
control={<Radio />}
|
||||
label="League"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
{/* 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>
|
||||
{/* Target face selection */}
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth>
|
||||
<Typography variant="body1" align="center" gutterBottom>
|
||||
Select target face:
|
||||
</Typography>
|
||||
<Select
|
||||
value={selectedTargetFace}
|
||||
onChange={handleTargetFaceChange}
|
||||
>
|
||||
<MenuItem value="single">Single Spot</MenuItem>
|
||||
<MenuItem value="five">Five Spot</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</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>
|
||||
{/* Start Game Button */}
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
onClick={startGame}
|
||||
disabled={!selectedGameType} // Disable button if no game type selected
|
||||
>
|
||||
Start Game
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScoreTracker;
|
||||
export default GameSetup;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user