sarabs3 · saurabhsabharwal · Jun 20, 2020 · Jun 20, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # snake-game
 
+Now available to play at https://snake-game-saurabh.netlify.app/
+
 ##### Design the elements
 - Snake
 - Food

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "snake-game",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "immer": "^7.0.3",
+    "node-sass": "^4.14.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "react-test-renderer": "^16.13.1"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Copy of the classic snake game"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Snake game</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/components/App/App.scss b/src/components/App/App.scss
@@ -0,0 +1,76 @@
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	overflow: hidden;
+	font-family: Helvetica, san-serif;
+}
+
+.grid {
+	box-sizing: content-box;
+	padding: 0;
+	border-top: 1px solid lightgray;
+	border-right: 1px solid lightgray;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.grid-cell {
+	border-left: 1px solid lightgray;
+	border-bottom: 1px solid lightgray;
+
+	&--food {
+		background-color: blue;
+	}
+
+	&--snake {
+		background-color: orange;
+	}
+}
+
+.snake-app {
+	position: relative;
+	margin: 10px auto;
+	width: 350px;
+
+	&:focus {
+		outline: none;
+	}
+
+	.game-info {
+		display: flex;
+		justify-content: space-between;
+		padding: 5px 0;
+	}
+}
+
+.snake-app__overlay {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 32px;
+	background-color: hsla(0, 0, 0, .9);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	font-size: 1.2rem;
+}
+
+.mb-1 {
+	margin-bottom: 1rem;
+}
+
+button {
+	background-color: blue;
+	color: white;
+	border-radius: 3px;
+	border: 2px solid blue;
+	padding: .75rem 1rem;
+	font-size: 1rem;
+	cursor: pointer;
+	box-shadow: 0 0 10px black;
+}
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {render, fireEvent} from '@testing-library/react';
+import renderer from 'react-test-renderer';
+
+import App from './index';
+
+import {
+	GAME_KEYCODE_DOWN,
+	GAME_KEYCODE_UP,
+	GAME_KEYCODE_LEFT,
+	GAME_KEYCODE_RIGHT
+} from '../../utils/gameConstants';
+
+let div;
+let currentDirection = GAME_KEYCODE_LEFT;
+
+beforeAll(() => {
+	div = document.createElement('div');
+	document.body.appendChild(div);
+});
+
+afterAll(() => {
+	ReactDOM.unmountComponentAtNode(div);
+	div.remove();
+	div = null;
+	currentDirection = GAME_KEYCODE_LEFT;
+});
+
+it('<App /> renders without crashing', () => {
+	const {queryByTestId} = render(<App size={350}/>, div);
+
+	expect(queryByTestId('snake-app')).toBeTruthy();
+
+	expect(queryByTestId('snake-game-title')).toBeTruthy();
+	expect(queryByTestId('snake-game-title').textContent).toBe('Snake game');
+
+	expect(queryByTestId('snake-game-grid')).toBeTruthy();
+});
+
+describe('<App /> snapshots', () => {
+	it('<App /> snapshot with size = 350', () => {
+		const tree = renderer.create(<App size={350} />, div);
+
+		expect(tree).toMatchSnapshot();
+	});
+
+	it('<App /> snapshot with size = 150', () => {
+		const tree = renderer.create(<App size={150} />, div);
+
+		expect(tree).toMatchSnapshot();
+	});
+});
+
+const setDirection = jest.fn(keyCode => {
+	let changeDirection = true;
+	// If any key other than direction keys are pressed
+	if (!(keyCode === GAME_KEYCODE_LEFT || keyCode === GAME_KEYCODE_RIGHT || keyCode === GAME_KEYCODE_UP || keyCode === GAME_KEYCODE_DOWN)) {
+		changeDirection = false;
+	}
+
+	// If the same direction key is pressed as current or opposite direction
+	[[GAME_KEYCODE_UP, GAME_KEYCODE_DOWN], [GAME_KEYCODE_LEFT, GAME_KEYCODE_RIGHT]].forEach(dir => {
+		if (dir.indexOf(currentDirection) > -1 && dir.indexOf(keyCode) > -1) {
+			changeDirection = false;
+		}
+	});
+
+	if (changeDirection) {
+		currentDirection = keyCode;
+	}
+});
+
+describe('Snake direction changes', () => {
+	it('Snake changes direction', () => {
+		const {queryByTestId} = render(<App changeDirection={setDirection} />, div);
+
+		const snakeApp = queryByTestId('snake-app');
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_UP});
+
+		expect(setDirection).toHaveBeenCalledTimes(1);
+		expect(currentDirection).toBe(GAME_KEYCODE_UP);
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_RIGHT});
+
+		expect(setDirection).toHaveBeenCalledTimes(2);
+		expect(currentDirection).toBe(GAME_KEYCODE_RIGHT);
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_DOWN});
+
+		expect(setDirection).toHaveBeenCalledTimes(3);
+		expect(currentDirection).toBe(GAME_KEYCODE_DOWN);
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_LEFT});
+
+		expect(setDirection).toHaveBeenCalledTimes(4);
+		expect(currentDirection).toBe(GAME_KEYCODE_LEFT);
+	});
+
+	it('Snake does not change direction', () => {
+		const {queryByTestId} = render(<App changeDirection={setDirection} />, div);
+
+		const snakeApp = queryByTestId('snake-app');
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_RIGHT});
+
+		expect(setDirection).toHaveBeenCalledTimes(5);
+		expect(currentDirection).toBe(GAME_KEYCODE_LEFT);
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_LEFT});
+
+		expect(setDirection).toHaveBeenCalledTimes(6);
+		expect(currentDirection).toBe(GAME_KEYCODE_LEFT);
+
+		currentDirection = GAME_KEYCODE_UP;
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_DOWN});
+
+		expect(setDirection).toHaveBeenCalledTimes(7);
+		expect(currentDirection).toBe(GAME_KEYCODE_UP);
+
+		fireEvent.keyDown(snakeApp, {keyCode: GAME_KEYCODE_UP});
+
+		expect(setDirection).toHaveBeenCalledTimes(8);
+		expect(currentDirection).toBe(GAME_KEYCODE_UP);
+
+		// Any key other than direction keys are pressed
+		fireEvent.keyDown(snakeApp, {keyCode: 13});
+
+		expect(setDirection).toHaveBeenCalledTimes(9);
+		expect(currentDirection).toBe(GAME_KEYCODE_UP);
+	})
+});