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    const handleOpen = () => setOpen(true);
42    const handleClose = () => setOpen(false);
43
44    return (
45        <span style={props.style}>
46            <Button type="button" startIcon={<Help />} onClick={handleOpen}>
47                About
48            </Button>
49            <Modal
50                className={classes.modal}
51                open={open}
52                onClose={handleClose}
53                closeAfterTransition
54                BackdropComponent={Backdrop}
55                BackdropProps={{
56                    timeout: 500,
57                }}
58            >
59                <Fade in={open}>
60                    <Paper className={classes.paper}>
61                        <h2>How to play</h2>
62                        <p>
63                            In Codenames, spymasters give one word clues pointing to multiple words on the board, as
64                            well as the number of words corresponding to that clue (for example, &quot;animal 3&quot;).
65                            Their teammates then try to guess the words while avoiding the opposing team&apos;s, and may
66                            guess as many times as the words the spymaster gave in their clue, plus an additional guess.
67                        </p>
68                        <h2>About this site</h2>
69                        <p>
70                            This site was created by Zikaeroh (
71                            <NewPageLink href="https://github.com/zikaeroh">GitHub</NewPageLink>,{' '}
72                            <NewPageLink href="https://www.twitch.tv/zikaeroh">Twitch</NewPageLink>,{' '}
73                            <NewPageLink href="https://twitter.com/zikaeroh">Twitter</NewPageLink>). It&apos;s a new
74                            creation, but takes heavy inspiration from the wonderful{' '}
75                            <NewPageLink href="https://github.com/Joooop/codenames.plus">codenames.plus</NewPageLink>.
76                        </p>
77                        <p>
78                            You can find this site&apos;s code on{' '}
79                            <NewPageLink href="https://github.com/zikaeroh/codies">GitHub</NewPageLink>. This site is
80                            currently running version {version}.
81                        </p>
82                    </Paper>
83                </Fade>
84            </Modal>
85        </span>
86    );
87};