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