fix: bigger grid

packages/game-client/src/App.jsx

@@ -6,19 +6,19 @@ import { useDirection, useFood, useTicks, useSnakes, useInput, useSocket } from
 import Grid from './Grid';
 import styles from './app.module.css';
 
-function App() {
-	const [mounted, setMounted] = useState(true);
-	return (
-		<div>
-			<div>
-				<button onClick={() => setMounted((prev) => !prev)}>Mount / Unmount</button>
-			</div>
-			<div>{mounted && <Game />}</div>
-		</div>
-	);
-}
+// function App() {
+// 	const [mounted, setMounted] = useState(true);
+// 	return (
+// 		<div>
+// 			<div>
+// 				<button onClick={() => setMounted((prev) => !prev)}>Mount / Unmount</button>
+// 			</div>
+// 			<div>{mounted && <Game />}</div>
+// 		</div>
+// 	);
+// }
 
-function Game() {
+function App() {
 	const [snakeId, setSnakeId] = useState(1);
 
 	// Keep the direction of the snakes inside useRef since we don't
@@ -28,7 +28,7 @@ function Game() {
 
 	useInput({ snakes, onUp, onDown, onLeft, onRight, snakeId });
 
-	const { food, getFood, removeFood, spawnFood } = useFood({ initialFoodState });
+	const { food, getFood, removeFood, spawnFood, isFood } = useFood({ initialFoodState });
 
 	const getSnakeCells = () => allSnakeCells();
 
@@ -45,19 +45,20 @@ function Game() {
 		getFood,
 		removeFood,
 		setDirection,
+		isFood,
 	});
 
 	useTicks({ updateSnake, snakes, food, spawnFood, getSnakeCells });
 
 	return (
 		<div className={styles.game}>
-			<select value={snakeId} onChange={(e) => setSnakeId(e.target.value)}>
+			{/* <select value={snakeId} onChange={(e) => setSnakeId(e.target.value)}>
 				{Object.keys(snakes).map((snakeId, index) => (
 					<option value={snakeId} key={index}>
 						{snakeId}
 					</option>
 				))}
-			</select>
+			</select> */}
 			<Grid snakes={snakes} food={food} />
 		</div>
 	);

packages/game-client/src/constants.js

@@ -1,6 +1,6 @@
 // in px (pixels)
-const GRID_WIDTH = 30 * 30;
-const GRID_HEIGHT = 30 * 10;
+const GRID_WIDTH = 30 * 50;
+const GRID_HEIGHT = 30 * 30;
 const CELL_DIMENSION = 30;
 
 if (GRID_HEIGHT % CELL_DIMENSION !== 0) {

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

@@ -1,6 +1,6 @@
 .grid {
 	position: relative;
-	border: 3px solid black;
+	/* border: 3px solid black; */
 }
 
 .cell {

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

@@ -3,7 +3,7 @@ import { generateKey } from '../utils';
 import cloneDeep from 'lodash/cloneDeep';
 import { DIRECTIONS, NUMBER_OF_ROWS, NUMBER_OF_COLUMNS, defaultDirections } from '../constants';
 
-const useSnakes = ({ initialSnakesState, getDirection, getFood, removeFood, setDirection }) => {
+const useSnakes = ({ initialSnakesState, getDirection, getFood, removeFood, setDirection, isFood }) => {
 	const [snakes, setSnakes] = useState(initialSnakesState);
 	const snakesRef = useRef(snakes);
 
@@ -31,6 +31,12 @@ const useSnakes = ({ initialSnakesState, getDirection, getFood, removeFood, setD
 		setDirection(snakeId, defaultDirections[snakeId]); // Set to the default initial direction.
 		snakesRef.current = { ...snakesRef.current, [snakeId]: initialSnakesState[snakeId] };
 		setSnakes(snakesRef.current);
+		for (const snakeCell of Object.values(snakesRef.current[snakeId].hash)) {
+			const { x, y } = snakeCell;
+			if (isFood(x, y)) {
+				removeFood(x, y);
+			}
+		}
 	};
 
 	const updateSnake = () => {