Added menu

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 */}
-      <Box
-        sx={{
-          position: 'absolute',
-          top: 16,
-          left: 16,
-        }}
-      >
-        <Button variant="outlined" onClick={handleNewGame}>
-          Main Menu
+    <Box sx={{ p: 4 }}>
+      <Typography variant="h4" gutterBottom align="center">
+        Game Summary
+      </Typography>
+      
+      {/* Your existing summary content here */}
+      
+      <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
+        <Button 
+          variant="contained" 
+          color="primary"
+          onClick={handleReturnToMenu}
+          sx={{ minWidth: 200 }}
+        >
+          Return to Main Menu
         </Button>
       </Box>
-
-      <Grid container spacing={2} justifyContent="center">
-        <Grid item xs={12}>
-          <Typography variant="h4" align="center" gutterBottom>
-            Game Summary
-          </Typography>
-        </Grid>
-
-        {/* Total score */}
-        <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>
-
-        {/* New game button */}
-        <Grid item xs={12} align="center">
-          <Button variant="contained" onClick={handleNewGame}>
-            Start New Game
-          </Button>
-        </Grid>
-      </Grid>
-    </>
+    </Box>
   );
 };
 
 export default GameSummary;
-