Broken menu

asc/src/components/GameSummary.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useScore } from '../context/ScoreContext';
+import { Button, Grid, Typography, Box } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+const GameSummary = () => {
+  const { state } = useScore();
+  const navigate = useNavigate();
+
+  const handleNewGame = () => {
+    navigate('/');
+  };
+
+  return (
+    <>
+      {/* Main Menu Button */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 16,
+          left: 16,
+        }}
+      >
+        <Button variant="outlined" onClick={handleNewGame}>
+          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>
+    </>
+  );
+};
+
+export default GameSummary;
+