Merge pull request #20 from shibisuriya/feat/tracks

Feat/tracks

.gitignore

@@ -127,4 +127,6 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+.DS_Store

README.md

@@ -1,34 +1,18 @@
-# Classic Slither.io (WIP)
+# Classic Slither.io (Work in progress)
 
-# Classic Slither.io
-
-Imagine Slither.io, but with the classic Nokia 6110-style snake game.
+Experience Slither.io gameplay on a Nokia 6110-style snake game, powered by WebRTC.
 
 ## WebRTC:
 
 The game operates without a backend, such as a WebSocket server; instead, it utilizes WebRTC to enable players to play with each other.
 
 ## Game mechanics:
 
-### Types of snakes:
-
-#### Flash:
-
-The fastest snake in the game. (Moves 1.5x faster than the other snakes).
-
-#### Bulldozer:
-
-The opponent dies if he collides head on with this snake.
-
-#### Wall rider:
-
-This snake can't collide with the wall, if he does he comes out of the opposite wall.
-
 ### Types of food:
 
-#### Protein:
+#### Frogs:
 
-The snake's body grows by 1 cell if he consumes this food.
+The snake's body grows by 1 cell if it consumes a frog.
 
 #### Red bull:
 

packages/game-client/src/computed.js

@@ -28,48 +28,43 @@ const initialSnakesState = {
 		},
 		list: ['0-6', '0-5', '0-4', '0-3', '0-2', '0-1', '0-0'],
 	},
-	// 2: {
-	// 	headColor: 'blue',
-	// 	bodyColor: 'yellow',
-	// 	hash: {
-	// 		'5-0': { x: 5, y: 0 },
-	// 		'5-1': { x: 5, y: 1 },
-	// 		'5-2': { x: 5, y: 2 },
-	// 		'5-3': { x: 5, y: 3 },
-	// 		'5-4': { x: 5, y: 4 },
-	// 		'5-5': { x: 5, y: 5 },
-	// 		'5-6': { x: 5, y: 6 },
-	// 		'5-7': { x: 5, y: 7 },
-	// 	},
-	// 	list: ['5-7', '5-6', '5-5', '5-4', '5-3', '5-2', '5-1', '5-0'],
-	// },
-	// 3: {
-	// 	headColor: 'yellow',
-	// 	bodyColor: 'red',
-	// 	hash: {
-	// 		'10-0': { x: 10, y: 0 },
-	// 		'10-1': { x: 10, y: 1 },
-	// 		'10-2': { x: 10, y: 2 },
-	// 		'10-3': { x: 10, y: 3 },
-	// 		'10-4': { x: 10, y: 4 },
-	// 		'10-5': { x: 10, y: 5 },
-	// 	},
-	// 	list: ['10-5', '10-4', '10-3', '10-2', '10-1', '10-0'],
-	// },
-	// 4: {
-	// 	headColor: 'green',
-	// 	bodyColor: 'blue',
-	// 	hash: {
-	// 		'12-0': { x: 12, y: 0 },
-	// 		'12-1': { x: 12, y: 1 },
-	// 		'12-2': { x: 12, y: 2 },
-	// 		'12-3': { x: 12, y: 3 },
-	// 		'12-4': { x: 12, y: 4 },
-	// 		'12-5': { x: 12, y: 5 },
-	// 		'12-6': { x: 12, y: 6 },
-	// 	},
-	// 	list: ['12-6', '12-5', '12-4', '12-3', '12-2', '12-1', '12-0'],
-	// },
+	2: {
+		headColor: 'blue',
+		bodyColor: 'yellow',
+		hash: {
+			'0-11': { x: 0, y: 11 },
+			'0-12': { x: 0, y: 12 },
+			'0-13': { x: 0, y: 13 },
+		},
+		list: ['0-11', '0-12', '0-13'],
+	},
+	3: {
+		headColor: 'yellow',
+		bodyColor: 'red',
+		hash: {
+			'10-0': { x: 10, y: 0 },
+			'10-1': { x: 10, y: 1 },
+			'10-2': { x: 10, y: 2 },
+			'10-3': { x: 10, y: 3 },
+			'10-4': { x: 10, y: 4 },
+			'10-5': { x: 10, y: 5 },
+		},
+		list: ['10-5', '10-4', '10-3', '10-2', '10-1', '10-0'],
+	},
+	4: {
+		headColor: 'green',
+		bodyColor: 'blue',
+		hash: {
+			'12-0': { x: 12, y: 0 },
+			'12-1': { x: 12, y: 1 },
+			'12-2': { x: 12, y: 2 },
+			'12-3': { x: 12, y: 3 },
+			'12-4': { x: 12, y: 4 },
+			'12-5': { x: 12, y: 5 },
+			'12-6': { x: 12, y: 6 },
+		},
+		list: ['12-6', '12-5', '12-4', '12-3', '12-2', '12-1', '12-0'],
+	},
 };
 
 const initialFoodState = {};

packages/game-client/src/constants.js

@@ -1,8 +1,8 @@
 import { findKeyByValue, areValuesUnique } from './utils';
 
 // in px (pixels)
-const GRID_WIDTH = 30 * 50;
-const GRID_HEIGHT = 30 * 30;
+const GRID_WIDTH = 30 * 13;
+const GRID_HEIGHT = 30 * 13;
 const CELL_DIMENSION = 30;
 
 if (GRID_HEIGHT % CELL_DIMENSION !== 0) {
@@ -49,16 +49,38 @@ areValuesUnique(SNAKE_TICKS);
 
 const DEFAULT_TRACK = SNAKE_TICKS.QUARTER.TYPE;
 
+const FOOD_EFFECTS = {
+	GROW: 'grow',
+	SPEED: 'speed',
+};
+
+const grow = (units) => {
+	return {
+		[FOOD_EFFECTS.GROW]: { units },
+	};
+};
+
+const speed = (tick = SNAKE_TICKS.ONE_TENTH.TYPE, lastsFor = 30) => {
+	return { [FOOD_EFFECTS.SPEED]: { tick, lastsFor } };
+};
+
 const FOOD_TYPES = {
-	PROTEIN: { TYPE: 'PROTEIN', chance: 95, growth: 1 },
-	WALLRIDER_PORTION: { TYPE: 'WALLRIDER_PORTION', chance: 2, growth: 0 },
-	REDBULL: { TYPE: 'REDBULL', chance: 3, growth: 0, speed: SNAKE_TICKS.ONE_TENTH.TYPE },
-	FILLET: { TYPE: 'FILLET', chance: 0, growth: 2 },
+	FROG: {
+		TYPE: 'FROG',
+		chance: 95,
+		effects: { ...grow(1) },
+	},
+	RED_BULL: {
+		TYPE: 'RED_BULL',
+		chance: 5,
+		effects: { ...speed(SNAKE_TICKS.ONE_TENTH.TYPE, 30) }, // Lasts for 30 ticks.
+	},
+	FILLET: { TYPE: 'FILLET', chance: 0, effects: { ...grow(3) } },
 };
 
 const defaultDirections = {
-	1: DIRECTIONS.DOWN,
-	2: DIRECTIONS.RIGHT,
+	1: DIRECTIONS.RIGHT,
+	2: DIRECTIONS.DOWN,
 	3: DIRECTIONS.RIGHT,
 	4: DIRECTIONS.RIGHT,
 };
@@ -75,5 +97,6 @@ export {
 	FOOD_TYPES,
 	DEFAULT_TRACK,
 	SNAKE_TICKS,
+	FOOD_EFFECTS,
 	FOOD_TICKS,
 };

packages/game-client/src/grid.module.css

@@ -16,7 +16,7 @@
 	border: 1px solid black;
 }
 
-.food.protein {
+.food.frog {
 	background-color: green;
 
 	/* Enter */
@@ -32,11 +32,7 @@
 	background-color: #d62828;
 }
 
-.food.wallrider_portion {
-	background-color: cyan;
-}
-
-.food.redbull {
+.food.red_bull {
 	-webkit-animation: vibrate 0.3s linear infinite both;
 	animation: vibrate 0.3s linear infinite both;
 	background-color: blue;

packages/game-client/src/helpers.js

@@ -1,12 +1,14 @@
 import { NUMBER_OF_COLUMNS, NUMBER_OF_ROWS, DIRECTIONS } from './constants';
 
 const isCellValid = (i, j) => {
-	return !(i > NUMBER_OF_ROWS || j > NUMBER_OF_COLUMNS);
+	return i < NUMBER_OF_ROWS && j < NUMBER_OF_COLUMNS && i >= 0 && j >= 0;
 };
 
-const generateKey = (i, j) => {
-	if (!isCellValid(i, j)) {
-		throw new Error(`Invalid coordinates! ${i} ${j}`);
+const generateKey = (i, j, skipValidation = false) => {
+	if (!skipValidation) {
+		if (!isCellValid(i, j)) {
+			throw new Error(`Invalid coordinates! ${i} ${j}`);
+		}
 	}
 	return `${i}-${j}`;
 };

packages/game-client/src/hooks/useDirection.js

@@ -1,9 +1,10 @@
 import React, { useRef } from 'react';
 import { DIRECTIONS } from '../constants';
 import { getOppositeDirection } from '../helpers';
+import { cloneDeep } from 'lodash';
 
 const useDirection = (initialState, snakeId) => {
-	const directions = useRef({ ...initialState }); // useRef is changing the supplied object :(
+	const directions = useRef(cloneDeep({ ...initialState })); // useRef is changing the supplied object :(
 
 	const onUp = () => {
 		const direction = getDirection(snakeId);

packages/game-client/src/hooks/useFood.js

@@ -22,7 +22,7 @@ const whichFoodToSpawn = () => {
 		}
 	}
 	// TODO: There is something wrong with this function, returning undefined sometimes.
-	return FOOD_TYPES.PROTEIN;
+	return FOOD_TYPES.FROG;
 };
 
 const useFood = ({ initialFoodState = {}, getSnakeCells }) => {