Crafity/snake
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implement about page, updating readme file and inverse button color on banner

Browse Source
This commit is contained in:
Bart Riemens
2019-09-06 20:35:05 +02:00
parent c73c3d37ce
commit ee610cc9b6
3 changed files with 76 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@@ -1,13 +1,26 @@
# Crafity Snake # Crafity Snake
Play snake in your browser with HTML 5. This game is developed using React with hooks and Redux. All the game state and highscores are stored in local storage.
## Feature Technologies
- React + React Router
- Redux
- Styled Components
- Webpack + Babel
- Jest
- ESLint
- pre-commit
## Todo ## Todo
[ ] Create welcome / instructions page / about page [ ] Create welcome / instructions page / about page
[ ] Link to repository [ ] Link to repository
[x] Add license [x] Add license
[x] High score [x] High score
[ ] Docker build script [ ] Docker build script
[ ] Improve banner / popup windows [ ] Improve banner / popup windows
[ ] Touch and mobile support
## License ## License

52
src/containers/About.js
View File

@@ -1,9 +1,59 @@
import React from "react"; import React from "react";
import styled from "styled-components";
import Title from "../components/Title.js"; import Title from "../components/Title.js";
const Code = styled.code`
font-weight: bold;
color: white;
`;
export const About = () => ( export const About = () => (
<React.Fragment> <React.Fragment>
<Title large>About Page</Title> <Title large>About Crafity Snake</Title>
<p>Play snake in your browser using HTML 5 and Javascript.</p>
<Title>Introduction</Title>
<p>
This experiment has been created to test out React, Redux and Styled Components and see if it is possible to
create a simple web based game like snake. The source code for this game is open source and free to download and
change.
</p>
<p>
A couple of noticable 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>
<Title>How to play</Title>
<p>
You control the snake using the arrow keys or the <Code>hjkl</Code> keys. Everytime the snake eats an apple the
tail of the snake grows longer. When the snake touches his own body the game is over.
</p>
<p>
Other keys to control the game are <Code>r</Code> to (re)start the game. The <Code>s</Code> key to stop the game
and <Code>p</Code> to pause the game.
</p>
<Title>Technology</Title>
<p>Snake has been developed with the folowing technologies.</p>
<ul>
<li>React + React Router</li>
<li>Redux</li>
<li>Styled Components</li>
<li>Webpack + Babel</li>
<li>Jest</li>
<li>ESLint</li>
<li>pre-commit</li>
<li>Docker</li>
</ul>
<Title>Source Code</Title>
<p>The source code is hosted on Crafity&apos;s git repositories at the following location:</p>
<p>
<a href="https://git.crafity.com">Crafity Snake</a>
</p>
<p>After donwloading the source code run the following commands:</p>
<p>
<Code>npm install</Code>
</p>
<p>
<Code>npm run dev</Code>
</p>
</React.Fragment> </React.Fragment>
); );

8
src/containers/Snake.js
View File

@@ -90,9 +90,13 @@ const Snake = ({
</Stage> </Stage>
{!started && ( {!started && (
<Banner fade> <Banner fade>
<p>Press &apos;r&apos; to start the game</p> <p>
Press &apos;<b>r</b>&apos; to start the game
</p>
<ButtonContainer> <ButtonContainer>
<Button onClick={startSnake}>Start</Button> <Button inverse onClick={startSnake}>
Start
</Button>
</ButtonContainer> </ButtonContainer>
</Banner> </Banner>
)} )}