1import {
 2    Backdrop,
 3    Button,
 4    createStyles,
 5    Fade,
 6    Link,
 7    LinkProps,
 8    makeStyles,
 9    Modal,
10    Paper,
11    Theme,
12} from '@material-ui/core';
13import { Help } from '@material-ui/icons';
14import * as React from 'react';
15
16const useStyles = makeStyles((theme: Theme) =>
17    createStyles({
18        modal: {
19            display: 'flex',
20            alignItems: 'center',
21            justifyContent: 'center',
22        },
23        paper: {
24            border: '2px solid #000',
25            boxShadow: theme.shadows[5],
26            padding: theme.spacing(2, 4, 3),
27            maxWidth: '500px',
28        },
29    })
30);
31
32const NewPageLink = (props: LinkProps) => (
33    <Link color="textSecondary" underline="always" target="_blank" rel="noopener" {...props} />
34);
35
36export const AboutButton = (props: { style?: React.CSSProperties }) => {
37    const classes = useStyles();
38    const [open, setOpen] = React.useState(false);
39
40    const handleOpen = () => {
41        setOpen(true);
42    };
43
44    const handleClose = () => {
45        setOpen(false);
46    };
47
48    return (
49        <span style={props.style}>
50            <Button type="button" startIcon={<Help />} onClick={handleOpen}>
51                About
52            </Button>
53            <Modal
54                className={classes.modal}
55                open={open}
56                onClose={handleClose}
57                closeAfterTransition
58                BackdropComponent={Backdrop}
59                BackdropProps={{
60                    timeout: 500,
61                }}
62            >
63                <Fade in={open}>
64                    <Paper className={classes.paper}>
65                        <h2>How to play</h2>
66                        <p>
67                            In Codenames, spymasters give one word clues pointing to multiple words on the board, as
68                            well as the number of words corresponding to that clue (for example, &quot;animal 3&quot;).
69                            Their teammates then try to guess the words while avoiding the opposing team&apos;s, and may
70                            guess as many times as the words the spymaster gave in their clue, plus an additional guess.
71                        </p>
72                        <h2>About this site</h2>
73                        <p>
74                            This site was created by Zikaeroh (
75                            <NewPageLink href="https://github.com/zikaeroh">GitHub</NewPageLink>,{' '}
76                            <NewPageLink href="https://www.twitch.tv/zikaeroh">Twitch</NewPageLink>,{' '}
77                            <NewPageLink href="https://twitter.com/zikaeroh">Twitter</NewPageLink>). It&apos;s a new
78                            creation, but takes heavy inspiration from the wonderful{' '}
79                            <NewPageLink href="https://github.com/Joooop/codenames.plus">codenames.plus</NewPageLink>.
80                        </p>
81                        <p>
82                            You can find this site&apos;s code on{' '}
83                            <NewPageLink href="https://github.com/zikaeroh/codies">GitHub</NewPageLink>.
84                        </p>
85                    </Paper>
86                </Fade>
87            </Modal>
88        </span>
89    );
90};