1import { Backdrop, Button, createStyles, Fade, makeStyles, Modal, Paper, Theme } from '@material-ui/core';
 2import { Help } from '@material-ui/icons';
 3import * as React from 'react';
 4
 5const useStyles = makeStyles((theme: Theme) =>
 6    createStyles({
 7        modal: {
 8            display: 'flex',
 9            alignItems: 'center',
10            justifyContent: 'center',
11        },
12        paper: {
13            border: '2px solid #000',
14            boxShadow: theme.shadows[5],
15            padding: theme.spacing(2, 4, 3),
16            maxWidth: '500px',
17        },
18    })
19);
20
21export const AboutButton = (props: { style?: React.CSSProperties }) => {
22    const classes = useStyles();
23    const [open, setOpen] = React.useState(false);
24
25    const handleOpen = () => {
26        setOpen(true);
27    };
28
29    const handleClose = () => {
30        setOpen(false);
31    };
32
33    return (
34        <span style={props.style}>
35            <Button type="button" startIcon={<Help />} onClick={handleOpen}>
36                About
37            </Button>
38            <Modal
39                className={classes.modal}
40                open={open}
41                onClose={handleClose}
42                closeAfterTransition
43                BackdropComponent={Backdrop}
44                BackdropProps={{
45                    timeout: 500,
46                }}
47            >
48                <Fade in={open}>
49                    <Paper className={classes.paper}>
50                        <h2>How to play</h2>
51                        <p>
52                            In Codenames, spymasters give one word clues pointing to multiple words on the board, as
53                            well as the number of words corresponding to that clue (for example, &quot;animal 3&quot;).
54                            Their teammates then try to guess the words while avoiding the opposing team&apos;s, and may
55                            guess as many times as the words the spymaster gave in their clue, plus an additional guess.
56                        </p>
57                    </Paper>
58                </Fade>
59            </Modal>
60        </span>
61    );
62};