69 lines
1.7 KiB
JavaScript
69 lines
1.7 KiB
JavaScript
// 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;
|