import React from "react";
import styled, { css } from "styled-components";
import Title from "../components/Title.js";
import PageSection from "../components/PageSection.js";
import Code from "../components/Code.js";
import Button from "../components/Button.js";
import Link from "../components/Link.js";

const MainPageSection = styled(PageSection)`
  background-color: ${({ theme }) => theme.colors.pageSectionMainColor};
  min-height: 20rem;
  ${PageSection.Content} {
    box-sizing: border-box;
    padding: 1rem 2rem;
  }
`;

const StandardPageSection = styled(PageSection)`
  background-color: ${({ theme }) => theme.colors.pageSectionStandardColor};
  ${PageSection.Content} {
    box-sizing: border-box;
    padding: 2rem 8rem;
  }
`;

const AlternatePageSection = styled(PageSection)`
  background-color: ${({ theme }) => theme.colors.pageSectionAlternateColor};
  ${PageSection.Content} {
    box-sizing: border-box;
    padding: 2rem 8rem;
  }
`;

const Icon = styled.div`
  font-size: 150pt;
  display: inline-block;
`;

const Layout = styled.div`
  display: flex;
  width: 100%;
  // place-content: center;
  // justify-content: space-around;
  // align-content: space-around;
  margin-top: 2rem;

  ${({ direction }) =>
    direction === "horizontal" &&
    css`
      flex-direction: row;
    `}
  ${({ direction }) =>
    direction === "vertical" &&
    css`
      flex-direction: column;
    `}
`;

const StyledAboutPage = styled.div`
  font-size: 1.5rem;
`;

const KeyMapTable = styled.table`
  margin: 3rem 0;
  thead td {
    font-size: 0.7em;
    color: ${({ theme }) => theme.colors.colorAlternate};
  }

  td:nth-child(1),
  td:nth-child(2) {
    padding: 0 1rem;
    text-align: center;
  }
  td:nth-child(3) {
    padding: 0 1rem;
    line-height: 2.3rem;
    font-size: 0.8em;
  }
`;

export const About = () => (
  <StyledAboutPage>
    <MainPageSection center>
      <Layout style={{ justifyContent: "center" }} direction={"horizontal"}>
        <Layout style={{ width: "30rem", placeContent: "center" }} direction={"vertical"}>
          <Title larger>Crafity Snake</Title>
          <Title sub>Play snake with HTML 5 and Javascript.</Title>
        </Layout>
        <Icon>🐍</Icon>
      </Layout>
    </MainPageSection>
    <StandardPageSection center>
      <Title>Introduction</Title>
      <p>
        This game has been created as a <b>Crafity</b> experiment to test out React, Redux and Styled Components and see
        if it is possible to create a simple web based game like snake. The{" "}
        <Link smooth to="/about#source-code">
          source code
        </Link>{" "}
        for this game is open source and free to download and change.
      </p>
      <p>
        A couple of noticeable features in this game are resumable game play using local storage. The page can be
        reloaded or reopened any time and the game should continue from where it was left.
      </p>
    </StandardPageSection>
    <AlternatePageSection center>
      <Title id="how-to-play">How to play</Title>
      <p>
        In this game you play a snake and the goal is to eat as many apples as possible. Every time your snake eats an
        apple its tail grows a little bit longer and you earn a point. If your snake touches its own tail or one of the
        four walls* it will die.
      </p>
      <p>
        <i>* Only when allow wrapping is turned off</i>
      </p>
      <KeyMapTable>
        <thead>
          <tr>
            <td>Key</td>
            <td>Alternative</td>
            <td />
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <Code>r</Code>
            </td>
            <td />
            <td>(Re)start the game</td>
          </tr>
          <tr>
            <td>
              <Code>s</Code>
            </td>
            <td />
            <td>Stop the game</td>
          </tr>
          <tr>
            <td>
              <Code>p</Code>
            </td>
            <td />
            <td>Pause the game</td>
          </tr>
          <tr>
            <td>
              <Code>h</Code>
            </td>
            <td>
              <Code>←</Code>
            </td>
            <td>Left</td>
          </tr>
          <tr>
            <td>
              <Code>j</Code>
            </td>
            <td>
              <Code>↓</Code>
            </td>
            <td>Down</td>
          </tr>
          <tr>
            <td>
              <Code>k</Code>
            </td>
            <td>
              <Code>↑</Code>
            </td>
            <td>Up</td>
          </tr>
          <tr>
            <td>
              <Code>l</Code>
            </td>
            <td>
              <Code>→</Code>
            </td>
            <td>Right</td>
          </tr>
          <tr>
            <td>
              <Code>w</Code>
            </td>
            <td>
              <Code />
            </td>
            <td>Allow Wrapping</td>
          </tr>
          <tr>
            <td>
              <Code>+</Code>
            </td>
            <td>
              <Code>=</Code>
            </td>
            <td>Increase FPS</td>
          </tr>
          <tr>
            <td>
              <Code>-</Code>
            </td>
            <td />
            <td>Decrease FPS</td>
          </tr>
          <tr>
            <td>
              <Code>0...9</Code>
            </td>
            <td />
            <td>Zoom level</td>
          </tr>
        </tbody>
      </KeyMapTable>
      <p style={{ textAlign: "center", margin: "2rem 0" }}>
        <Button
          style={{ width: "10rem", height: "3rem", lineHeight: "3rem", fontWeight: "bold", fontSize: "1.5rem" }}
          exact
          to="/">
          Play now
        </Button>
      </p>
    </AlternatePageSection>
    <StandardPageSection center>
      <Title>Technology</Title>
      <p>Snake has been developed with the folowing technologies.</p>
      <Layout style={{ justifyContent: "space-around" }}>
        <ul>
          <li>React</li>
          <li>React Router</li>
          <li>Redux</li>
          <li>Styled Components</li>
          <li>Webpack</li>
          <li>Babel</li>
        </ul>
        <ul>
          <li>Font Awesome</li>
          <li>Jest</li>
          <li>ESLint</li>
          <li>pre-commit</li>
          <li>Docker</li>
        </ul>
      </Layout>
      <Layout style={{ justifyContent: "space-around", height: "64px", marginBottom: "1rem" }}>
        <img src="img/reactjs.png" title="React" alt="React Logo" />
        <img src="img/reduxjs.png" title="Redux" alt="Redux Logo" />
        <img src="img/styled-components.png" title="Styled Components" alt="Styled Components Logo" />
        <img src="img/font-awesome.png" title="Font Awesome" alt="Font Awesome Logo" />
        <img src="img/webpack.png" title="Webpack" alt="Webpack Logo" />
        <img src="img/jest.png" title="Jest" alt="Jest Logo" />
        <img src="img/docker.png" title="Docker" alt="Docker Logo" />
      </Layout>
      <Title smaller>State Management</Title>
      <p>
        All the game and UI state is managed with Redux. This means all the state is stored in a central state store.
        Every second the state is serialized and stored in the browser&quot;s localStorage. This makes the game fully
        resumable.
      </p>
      <p>Change is changed using Redux reducers and the orchistration of actions is handled by Redux Middleware.</p>
      <Title smaller>Styling</Title>
      <p>
        All the styling and theming is handled by the module styled-components. Styled-components let&quot;s you style
        your react components directly from your Javascript code.
      </p>
    </StandardPageSection>
    <AlternatePageSection center>
      <Title id="source-code">Source Code</Title>
      <p>The source code is hosted on Crafity&apos;s Gitea environment at the following location:</p>
      <p>
        <Link target="_blank" href="https://git.crafity.com/Crafity/snake">
          Download here
        </Link>
      </p>
      <p>
        The source code is MIT licensed. Feel free to make modifications and share. Suggestions and pull requests are
        welcome. Use Crafity&quot;s git repository to file issues and pull requests.
      </p>
    </AlternatePageSection>
    <StandardPageSection center>
      <Title>Running Snake</Title>
      <p>After donwloading the source code run the following commands:</p>
      <Code style={{ display: "block", padding: "1rem" }}>
        <p>$ npm install</p>
        <p>$ npm run dev</p>
      </Code>
    </StandardPageSection>
  </StyledAboutPage>
);

export default About;