diff --git a/asc/src/components/GameSummary.js b/asc/src/components/GameSummary.js index c5ab3a4..c5a0742 100644 --- a/asc/src/components/GameSummary.js +++ b/asc/src/components/GameSummary.js @@ -1,58 +1,37 @@ import React from 'react'; -import { useScore } from '../context/ScoreContext'; -import { Button, Grid, Typography, Box } from '@mui/material'; +import { useScore, ACTIONS } from '../context/ScoreContext'; import { useNavigate } from 'react-router-dom'; +import { Button, Typography, Box, Grid } from '@mui/material'; const GameSummary = () => { - const { state } = useScore(); + const { state, dispatch } = useScore(); const navigate = useNavigate(); - const handleNewGame = () => { + const handleReturnToMenu = () => { + dispatch({ type: ACTIONS.RESET_GAME }); navigate('/'); }; return ( - <> - {/* Main Menu Button */} - - - - - - - Game Summary - - - - {/* Total score */} - - - Total Score: {state.currentGame.totalScore} - - - Total Bullseyes: {state.currentGame.totalBullseyes} - - - - {/* New game button */} - - - - - + ); }; export default GameSummary; - diff --git a/asc/src/components/ScoreTracker.js b/asc/src/components/ScoreTracker.js index 6baf145..a68fa54 100644 --- a/asc/src/components/ScoreTracker.js +++ b/asc/src/components/ScoreTracker.js @@ -1,12 +1,11 @@ -// src/components/ScoreTracker.js import React, { useState } from 'react'; import { useScore, ACTIONS } from '../context/ScoreContext'; import { Button, Grid, Typography, TextField, Box } from '@mui/material'; -import { useNavigate } from 'react-router-dom'; // <-- Add this import +import { useNavigate } from 'react-router-dom'; const ScoreTracker = () => { const { state, dispatch } = useScore(); - const navigate = useNavigate(); // <-- Define the navigate hook + const navigate = useNavigate(); const gameType = state.currentGame.gameType; const maxArrowsPerRound = gameType === '450' ? 3 : 5; const maxScore = gameType === '450' ? 10 : 5; @@ -14,36 +13,60 @@ const ScoreTracker = () => { 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]; updatedScores[index] = value; setArrowScores(updatedScores); }; - // Handle Add Round, Game Completion, etc. - const handleGameEnd = () => { - // Navigate to the summary page after the game ends - navigate('/summary'); - }; - - // Handle adding a round const handleAddRound = () => { - // Check if the max number of rounds is reached - if (state.currentGame.rounds.length >= maxRounds) { - navigate('/summary'); // Navigate to summary page when max rounds are reached + 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; } - // Validate Scores + // Regular round handling 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; } - // Add arrows to the current round const roundArrows = arrowScores.slice(0, maxArrowsPerRound).map((score) => { const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10); return { @@ -60,147 +83,28 @@ const ScoreTracker = () => { }, }); - setArrowScores(['', '', '', '', '']); + setArrowScores(Array(maxArrowsPerRound).fill('')); }; return ( - - - - {gameType} Round - Round {state.currentGame.rounds.length + 1} - - - - {/* Compact score input section */} - - - {Array.from({ length: maxArrowsPerRound }).map((_, index) => ( - handleScoreChange(index, e.target.value)} - placeholder="0" - size="small" - sx={{ - width: '60px', - '& .MuiInputBase-input': { - padding: '8px', - textAlign: 'center' - } - }} - inputProps={{ - maxLength: 1, - style: { textAlign: 'center' } - }} - /> - ))} - - + + - {/* Score buttons */} - - - {Array.from({ length: maxScore + 1 }).map((_, i) => ( - - ))} - - - + + {/* ... rest of your JSX ... */} - - {/* Control buttons */} - - - - - - - - {/* Scores display */} - - - Total Score: {state.currentGame.totalScore} | - Bullseyes: {state.currentGame.totalBullseyes} - - - - {/* Round history */} - - - {state.currentGame && state.currentGame.rounds && state.currentGame.rounds.length > 0 ? ( - state.currentGame.rounds.map((round, roundIndex) => ( - - Round {roundIndex + 1}: {round.arrows ? round.arrows.join(', ') : 'No arrows'} - (Total: {round.total || 0}, Bullseyes: {round.bullseyes || 0}) - - )) - ) : ( - - No rounds played yet. - - )} - - - + ); }; export default ScoreTracker; - diff --git a/asc/src/components/ScoreTracker.old b/asc/src/components/ScoreTracker.old new file mode 100644 index 0000000..5241347 --- /dev/null +++ b/asc/src/components/ScoreTracker.old @@ -0,0 +1,207 @@ +import React, { useState } from 'react'; +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 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]; + 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, + }, + }); + + setArrowScores(Array(maxArrowsPerRound).fill('')); + }; + + return ( + + {/* Menu Button - Now positioned at top left */} + + + + + + {gameType} Round - Round {state.currentGame.rounds.length + 1} + + + + {/* Compact score input section */} + + + {Array.from({ length: maxArrowsPerRound }).map((_, index) => ( + handleScoreChange(index, e.target.value)} + placeholder="0" + size="small" + sx={{ + width: '60px', + '& .MuiInputBase-input': { + padding: '8px', + textAlign: 'center' + } + }} + inputProps={{ + maxLength: 1, + style: { textAlign: 'center' } + }} + /> + ))} + + + + {/* Score buttons */} + + + {Array.from({ length: maxScore + 1 }).map((_, i) => ( + + ))} + + + + + {/* Control buttons */} + + + + + + + + {/* Scores display */} + + + Total Score: {state.currentGame.totalScore} | + Bullseyes: {state.currentGame.totalBullseyes} + + + + {/* Round history */} + + + {state.currentGame && state.currentGame.rounds && state.currentGame.rounds.length > 0 ? ( + state.currentGame.rounds.map((round, roundIndex) => ( + + Round {roundIndex + 1}: {round.arrows.map(arrow => arrow.isBullseye ? 'X' : arrow.score).join(', ')} + (Total: {round.total || 0}, Bullseyes: {round.bullseyes || 0}) + + )) + ) : ( + + No rounds played yet. + + )} + + + + + ); +}; + +export default ScoreTracker; diff --git a/asc/src/components/rm b/asc/src/components/rm new file mode 100644 index 0000000..c5a0742 --- /dev/null +++ b/asc/src/components/rm @@ -0,0 +1,37 @@ +import React from 'react'; +import { useScore, ACTIONS } from '../context/ScoreContext'; +import { useNavigate } from 'react-router-dom'; +import { Button, Typography, Box, Grid } from '@mui/material'; + +const GameSummary = () => { + const { state, dispatch } = useScore(); + const navigate = useNavigate(); + + const handleReturnToMenu = () => { + dispatch({ type: ACTIONS.RESET_GAME }); + navigate('/'); + }; + + return ( + + + Game Summary + + + {/* Your existing summary content here */} + + + + + + ); +}; + +export default GameSummary;