Initial ASC app

asc/src/components/GameSetup.js

@@ -0,0 +1,68 @@
+// src/components/GameSetup.js
+import React from 'react';
+import { 
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  Typography 
+} from '@mui/material';
+import { useScore, ACTIONS } from '../context/ScoreContext';
+
+const GameSetup = () => {
+  const { dispatch } = useScore();
+
+  const startGame = (gameType) => {
+    dispatch({
+      type: ACTIONS.START_NEW_ROUND,
+      payload: { gameType }
+    });
+  };
+
+  return (
+    <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="primary"
+                  size="large"
+                  onClick={() => startGame('450')}
+                >
+                  450 Round
+                </Button>
+              </Grid>
+              <Grid item xs={6}>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  color="secondary"
+                  size="large"
+                  onClick={() => startGame('300')}
+                >
+                  300 Round
+                </Button>
+              </Grid>
+            </Grid>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default GameSetup;