63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { Backdrop, Button, createStyles, Fade, makeStyles, Modal, Paper, Theme } from '@material-ui/core';
|
|
import { Help } from '@material-ui/icons';
|
|
import * as React from 'react';
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
modal: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
paper: {
|
|
border: '2px solid #000',
|
|
boxShadow: theme.shadows[5],
|
|
padding: theme.spacing(2, 4, 3),
|
|
maxWidth: '500px',
|
|
},
|
|
})
|
|
);
|
|
|
|
export const AboutButton = (props: { style?: React.CSSProperties }) => {
|
|
const classes = useStyles();
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
const handleOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<span style={props.style}>
|
|
<Button type="button" startIcon={<Help />} onClick={handleOpen}>
|
|
About
|
|
</Button>
|
|
<Modal
|
|
className={classes.modal}
|
|
open={open}
|
|
onClose={handleClose}
|
|
closeAfterTransition
|
|
BackdropComponent={Backdrop}
|
|
BackdropProps={{
|
|
timeout: 500,
|
|
}}
|
|
>
|
|
<Fade in={open}>
|
|
<Paper className={classes.paper}>
|
|
<h2>How to play</h2>
|
|
<p>
|
|
In Codenames, spymasters give one word clues pointing to multiple words on the board, as
|
|
well as the number of words corresponding to that clue (for example, "animal 3").
|
|
Their teammates then try to guess the words while avoiding the opposing team's, and may
|
|
guess as many times as the words the spymaster gave in their clue, plus an additional guess.
|
|
</p>
|
|
</Paper>
|
|
</Fade>
|
|
</Modal>
|
|
</span>
|
|
);
|
|
};
|