fix: added food type protein

shibisuriya · Sep 30, 2023 · 0d9512c · 0d9512c
1 parent e9c5622
commit 0d9512c
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 3 deletions.
diff --git a/packages/game-client/src/App.jsx b/packages/game-client/src/App.jsx
@@ -6,6 +6,7 @@ import { useFood } from './hooks';
 import Grid from './Grid';
 
 const SPEED = 1 * 100;
+const FOOD_SPAWN_INTERVAL = 1 * 10;
 
 function App() {
 	// const socket = useRef();
@@ -47,6 +48,7 @@ function App() {
 		1: DIRECTIONS.DOWN,
 		2: DIRECTIONS.RIGHT,
 		3: DIRECTIONS.RIGHT,
+		4: DIRECTIONS.RIGHT,
 	};
 
 	const directions = useRef(defaultDirections);
@@ -95,6 +97,20 @@ function App() {
 			},
 			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 [snakes, setSnakes] = useState(initialState);
 
@@ -125,7 +141,7 @@ function App() {
 	};
 
 	useEffect(() => {
-		const timer = setInterval(spawnFood, 1 * 50);
+		const timer = setInterval(spawnFood, FOOD_SPAWN_INTERVAL);
 		return () => {
 			clearInterval(timer);
 		};
@@ -246,6 +262,7 @@ function App() {
 			moveSnakeForward(snakeId);
 			moveSnakeForward(snakeId + 1);
 			moveSnakeForward(snakeId + 2);
+			moveSnakeForward(snakeId + 3);
 		}, SPEED);
 		const abortController = new AbortController();
 

diff --git a/packages/game-client/src/Grid.jsx b/packages/game-client/src/Grid.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './grid.module.css';
 import { CELL_DIMENSION, GRID_HEIGHT, GRID_WIDTH } from './constants';
+import { FOOD_TYPES } from './constants';
 
 function Cell({ x, y, color }) {
 	return (
@@ -17,6 +18,20 @@ function Cell({ x, y, color }) {
 	);
 }
 
+function Food({ x, y, type = FOOD_TYPES.PROTEIN }) {
+	return (
+		<div
+			className={`${styles.cell} ${styles.protein} ${styles.food}`}
+			style={{
+				top: `${x * CELL_DIMENSION}px`,
+				left: `${y * CELL_DIMENSION}px`,
+				height: `${CELL_DIMENSION}px`,
+				width: `${CELL_DIMENSION}px`,
+			}}
+		></div>
+	);
+}
+
 function Grid({ snakes, food }) {
 	return (
 		<div className={styles.grid} style={{ width: `${GRID_WIDTH}px`, height: `${GRID_HEIGHT}px` }}>
@@ -34,7 +49,7 @@ function Grid({ snakes, food }) {
 			})}
 			{Object.entries(food).map(([key, value]) => {
 				const { x, y } = value;
-				return <Cell x={x} y={y} key={key} head={true} color={'purple'} />;
+				return <Food x={x} y={y} key={key} />;
 			})}
 		</div>
 	);

diff --git a/packages/game-client/src/constants.js b/packages/game-client/src/constants.js
@@ -15,4 +15,17 @@ const DIRECTIONS = {
 
 const DEFAULT_DIRECTION = DIRECTIONS.RIGHT;
 
-export { GRID_HEIGHT, GRID_WIDTH, CELL_DIMENSION, NUMBER_OF_COLUMNS, NUMBER_OF_ROWS, DIRECTIONS, DEFAULT_DIRECTION };
+const FOOD_TYPES = {
+	PROTEIN: 'protein',
+};
+
+export {
+	GRID_HEIGHT,
+	GRID_WIDTH,
+	CELL_DIMENSION,
+	NUMBER_OF_COLUMNS,
+	NUMBER_OF_ROWS,
+	DIRECTIONS,
+	DEFAULT_DIRECTION,
+	FOOD_TYPES,
+};
diff --git a/packages/game-client/src/grid.module.css b/packages/game-client/src/grid.module.css
@@ -6,3 +6,75 @@
 .cell {
 	position: absolute;
 }
+
+.food {
+	box-sizing: border-box;
+	padding: 1px;
+	border: 1px solid black;
+}
+
+.protein {
+	background-color: cyan;
+
+	/* Enter */
+	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+	animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+
+	/* Pulsate */
+	-webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
+	animation: pulsate-fwd 0.5s ease-in-out infinite both;
+}
+
+@-webkit-keyframes scale-in-center {
+	0% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+		opacity: 1;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+@keyframes scale-in-center {
+	0% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+		opacity: 1;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@-webkit-keyframes pulsate-fwd {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	50% {
+		-webkit-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}
+@keyframes pulsate-fwd {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	50% {
+		-webkit-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}