rendered snake

src/App.jsx

@@ -1,9 +1,46 @@
-import React from "react";
-import Test from './Test'
+import React, { useState, useEffect, useRef } from "react";
+import useOrderedHash from "./hooks/useOrderedHash";
+import Grid from "./Grid";
+
+const DIRECTION = {
+  UP: "up",
+  DOWN: "down",
+  LEFT: "left",
+  RIGHT: "right",
+};
+
 function App() {
+  const moveForward = () => {
+    snake.moveForward();
+  };
+
+  useEffect(() => {
+    const timer = setInterval(moveForward, 1 * 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  const snake = useOrderedHash([
+    [0, 4],
+    [0, 3],
+    [0, 2],
+    [0, 1],
+    [0, 0],
+  ]);
+  console.log(snake);
+
+  // useEffect(() => {
+  //   const timer = setInterval(move, 1 * 1000);
+  //   // Listen for key presses.
+  //   return () => {
+  //     clearInterval(timer);
+  //   };
+  // }, []);
+
   return (
     <div>
-      <Test />
+      <Grid snake={snake} />
     </div>
   );
 }

src/Grid.jsx

@@ -1,13 +1,7 @@
 import React from "react";
 import styles from "./grid.module.css";
-
-// in px (pixels)
-const GRID_WIDTH = 1500;
-const GRID_HEIGHT = 500;
-const CELL_DIMENSION = 30;
-
-const NUMBER_OF_ROWS = GRID_HEIGHT / CELL_DIMENSION;
-const NUMBER_OF_COLUMNS = GRID_WIDTH / CELL_DIMENSION;
+import { CELL_DIMENSION, NUMBER_OF_COLUMNS, NUMBER_OF_ROWS } from "./constants";
+import { generateKey } from "./utils";
 
 const grid = [];
 for (let i = 0; i < NUMBER_OF_ROWS; i++) {
@@ -18,7 +12,16 @@ for (let i = 0; i < NUMBER_OF_ROWS; i++) {
   grid.push(row);
 }
 
-function Cell({ x, y }) {
+function Cell({ x, y, body, head }) {
+  const cellColor = () => {
+    if (body) {
+      return { backgroundColor: "red" };
+    } else if (head) {
+      return { backgroundColor: "black" };
+    } else {
+      return { backgroundColor: "white" };
+    }
+  };
   return (
     <div
       className={styles.cell}
@@ -27,18 +30,26 @@ function Cell({ x, y }) {
         left: `${y * CELL_DIMENSION}px`,
         height: `${CELL_DIMENSION}px`,
         width: `${CELL_DIMENSION}px`,
+        ...cellColor(),
       }}
     ></div>
   );
 }
 
-function Grid({ snakes }) {
+function Grid({ snake }) {
   return (
     <div className={styles.grid}>
       {grid.map((rows) => {
         return rows.map((col) => {
           const [x, y] = col;
-          return <Cell x={x} y={y} key={`${x}-${y}`} />;
+          const key = generateKey(x, y);
+          if (snake.getHead().key == key) {
+            return <Cell x={x} y={y} key={`${x}-${y}`} head={true} />;
+          } else if (snake.hash[generateKey(x, y)]) {
+            return <Cell x={x} y={y} key={`${x}-${y}`} body={true} />;
+          } else {
+            return <Cell x={x} y={y} key={`${x}-${y}`} />;
+          }
         });
       })}
     </div>

src/constants.js

@@ -0,0 +1,15 @@
+// in px (pixels)
+const GRID_WIDTH = 1500;
+const GRID_HEIGHT = 600;
+const CELL_DIMENSION = 30;
+
+const NUMBER_OF_ROWS = GRID_HEIGHT / CELL_DIMENSION;
+const NUMBER_OF_COLUMNS = GRID_WIDTH / CELL_DIMENSION;
+
+export {
+  GRID_HEIGHT,
+  GRID_WIDTH,
+  CELL_DIMENSION,
+  NUMBER_OF_COLUMNS,
+  NUMBER_OF_ROWS,
+};

src/hooks/orderedHash.js

@@ -0,0 +1,76 @@
+import { generateKey } from './utils.js';
+export default class OrderedHash {
+	constructor({ list = [], columns, rows } = {}) {
+		this.columns = columns;
+		this.rows = rows;
+		this.orderedHash = {};
+		this.keys = [];
+		list.forEach((item) => {
+			this.push(...item);
+		});
+	}
+	push(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		if (!this.keys.includes(key)) {
+			this.keys.push(key);
+		} else {
+			throw new Error("Error: The key already exists in the 'OrderedHash'.");
+		}
+		this.orderedHash[key] = [x, y];
+	}
+	/**
+	 * Adds an element to the beginning of the ordered hash.
+	 * @param {any} x - Data to be added to the ordered hash.
+	 * @param {any} y - Data to be added to the ordered hash.
+	 * @returns {void}
+	 */
+	unshift(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		if (!this.keys.includes(key)) {
+			this.keys.unshift(key);
+		} else {
+			throw new Error("Error: The key already exists in the 'OrderedHash'.");
+		}
+		this.orderedHash[key] = [x, y];
+	}
+	remove(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		if (this.keys.includes(key)) {
+			this.keys.splice(this.keys.indexOf(key), 1);
+			delete this.orderedHash[key];
+		} else {
+			throw new Error("Error: The key doesn't exists in the 'OrderedHash'.");
+		}
+	}
+	count() {
+		return this.keys.length;
+	}
+	get(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		return this.orderedHash[key];
+	}
+	getOrderedHash() {
+		return this.orderedHash;
+	}
+	getKeys() {
+		return this.keys;
+	}
+	getArray() {
+		return this.keys.map((key) => this.orderedHash[key]);
+	}
+	getHead() {
+		const [head] = this.keys;
+		return this.orderedHash[head];
+	}
+	getBody() {
+		const [head, ...body] = this.keys;
+		return body.map((key) => this.orderedHash[key]);
+	}
+	getTail() {
+		const key = this.keys[this.keys.length - 1];
+		return this.orderedHash[key];
+	}
+	getNeck() {
+		return this.orderedHash[this.keys[1]];
+	}
+}

src/hooks/useOrderedHash.js

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { generateKey } from "../utils";
+
+const useOrderedHash = (list = []) => {
+  const hash = {};
+  const keys = [];
+
+  list.forEach(([x, y]) => {
+    const key = generateKey(x, y);
+    if (!keys.includes(key)) {
+      keys.push(key);
+    } else {
+      throw new Error("Error: The key already exists in the 'OrderedHash'.");
+    }
+    hash[key] = [x, y];
+  });
+
+
+  const getHead = () => {
+    const key = keys[0];
+    return { key, value: hash[key] };
+  };
+
+  const getTail = () => {
+    return hash[keys[keys.length - 1]];
+  };
+
+  const getNeck = () => {
+    // TODO:
+    // Note: A snake should have atleast two cells, a head and a neck... Snake with only one
+    // cell (only head doesn't make sense).
+    return hash[keys[keys[1]]];
+  };
+
+  const moveForward = () => {
+    console.log("move forward invoked -> ", Date.now());
+  };
+
+  return { list, hash, moveForward, getHead, getTail, getNeck };
+};
+
+export default useOrderedHash;

src/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./Grid";
+import App from "./App";
 import "./index.css"
 
 const root = ReactDOM.createRoot(document.getElementById("root"));

src/utils.js

@@ -0,0 +1,7 @@
+import { NUMBER_OF_COLUMNS, NUMBER_OF_ROWS } from "./constants";
+export const generateKey = (i, j) => {
+  if (i > NUMBER_OF_ROWS || j > NUMBER_OF_COLUMNS) {
+    throw new Error(`Invalid cordinate, (${i}, ${j})!`);
+  }
+  return `${i}-${j}`;
+};