diff --git a/README.md b/README.md index 528ca4b..bba2fee 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,26 @@ # 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 -[ ] Create welcome / instructions page / about page -[ ] Link to repository -[x] Add license -[x] High score -[ ] Docker build script -[ ] Improve banner / popup windows +[ ] Create welcome / instructions page / about page +[ ] Link to repository +[x] Add license +[x] High score +[ ] Docker build script +[ ] Improve banner / popup windows +[ ] Touch and mobile support ## License diff --git a/src/containers/About.js b/src/containers/About.js index 12bb2bb..2051d14 100644 --- a/src/containers/About.js +++ b/src/containers/About.js @@ -1,9 +1,59 @@ import React from "react"; +import styled from "styled-components"; import Title from "../components/Title.js"; +const Code = styled.code` + font-weight: bold; + color: white; +`; + export const About = () => ( - About Page + About Crafity Snake +

Play snake in your browser using HTML 5 and Javascript.

+ Introduction +

+ 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. +

+

+ 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. +

+ How to play +

+ You control the snake using the arrow keys or the hjkl 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. +

+

+ Other keys to control the game are r to (re)start the game. The s key to stop the game + and p to pause the game. +

+ Technology +

Snake has been developed with the folowing technologies.

+ + Source Code +

The source code is hosted on Crafity's git repositories at the following location:

+

+ Crafity Snake +

+

After donwloading the source code run the following commands:

+

+ npm install +

+

+ npm run dev +

); diff --git a/src/containers/Snake.js b/src/containers/Snake.js index ca5dcd2..f81918b 100644 --- a/src/containers/Snake.js +++ b/src/containers/Snake.js @@ -90,9 +90,13 @@ const Snake = ({ {!started && ( -

Press 'r' to start the game

+

+ Press 'r' to start the game +

- +
)}