test

README.md

@@ -1 +1 @@
-# Classic Slither.io
+# Classic Slither.io (WIP)

src/App.jsx

@@ -10,33 +10,63 @@ const DIRECTION = {
 };
 
 function App() {
-  const moveForward = () => {
-    snake.moveForward();
+  const [currentDirection, setCurrentDirection] = useState(DIRECTION.DOWN);
+
+  function moveForward() {
+    setSnake((prev) => {
+      const { x, y } = prev;
+      if (currentDirection == DIRECTION.UP) {
+        return { ...prev, x: x - 1 };
+      } else if (currentDirection == DIRECTION.DOWN) {
+        return { ...prev, x: x + 1 };
+      } else if (currentDirection == DIRECTION.LEFT) {
+        return { ...prev, y: y - 1 };
+      } else if (currentDirection == DIRECTION.RIGHT) {
+        return { ...prev, y: y + 1 };
+      }
+    });
+  }
+
+  const up = () => {
+    setCurrentDirection(DIRECTION.UP);
+  };
+
+  const down = () => {
+    setCurrentDirection(DIRECTION.DOWN);
+  };
+
+  const right = () => {
+    setCurrentDirection(DIRECTION.RIGHT);
+  };
+
+  const left = () => {
+    setCurrentDirection(DIRECTION.LEFT);
   };
 
   useEffect(() => {
-    const timer = setInterval(moveForward, 1 * 1000);
+    const timer = setInterval(moveForward.bind(this), 1 * 300);
+
+    document.addEventListener("keydown", (event) => {
+      const key = event.key.toLowerCase();
+      if (["w", "arrowup"].includes(key)) {
+        up();
+      } else if (["s", "arrowdown"].includes(key)) {
+        down();
+      } else if (["a", "arrowleft"].includes(key)) {
+        left();
+      } else if (["d", "arrowright"].includes(key)) {
+        right();
+      }
+    });
+
     return () => {
       clearInterval(timer);
     };
-  }, []);
-
-  const snake = useOrderedHash([
-    [0, 4],
-    [0, 3],
-    [0, 2],
-    [0, 1],
-    [0, 0],
-  ]);
-  console.log(snake);
+  }, [currentDirection]);
+
+  const [snake, setSnake] = useState({ x: 0, y: 0 });
 
-  // useEffect(() => {
-  //   const timer = setInterval(move, 1 * 1000);
-  //   // Listen for key presses.
-  //   return () => {
-  //     clearInterval(timer);
-  //   };
-  // }, []);
+  console.log(snake);
 
   return (
     <div>

src/Grid.jsx

@@ -1,6 +1,12 @@
 import React from "react";
 import styles from "./grid.module.css";
-import { CELL_DIMENSION, NUMBER_OF_COLUMNS, NUMBER_OF_ROWS } from "./constants";
+import {
+  CELL_DIMENSION,
+  NUMBER_OF_COLUMNS,
+  NUMBER_OF_ROWS,
+  GRID_HEIGHT,
+  GRID_WIDTH,
+} from "./constants";
 import { generateKey } from "./utils";
 
 const grid = [];
@@ -37,21 +43,21 @@ function Cell({ x, y, body, head }) {
 }
 
 function Grid({ snake }) {
+  const makeCell = (cell) => {
+    const [x, y] = cell;
+    if (x == snake.x && y == snake.y) {
+      return <Cell x={x} y={y} key={`${x}-${y}`} head={true} />;
+    } else {
+      return <Cell x={x} y={y} key={`${x}-${y}`} />;
+    }
+  };
+
   return (
-    <div className={styles.grid}>
-      {grid.map((rows) => {
-        return rows.map((col) => {
-          const [x, y] = col;
-          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
+      className={styles.grid}
+      style={{ width: `${GRID_WIDTH}px`, height: `${GRID_HEIGHT}px` }}
+    >
+      {grid.map((rows) => rows.map((col) => makeCell(col)))}
     </div>
   );
 }

src/Test.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+
+const DIRECTION = {
+  UP: "up",
+  DOWN: "down",
+  LEFT: "left",
+  RIGHT: "right",
+};
+
+function Test() {
+  const up = () => {
+    setCurrentDirection((prev) => DIRECTION.UP);
+  };
+
+  const down = () => {
+    setCurrentDirection((prev) => DIRECTION.DOWN);
+  };
+
+  const right = () => {
+    setCurrentDirection((prev) => DIRECTION.RIGHT);
+  };
+
+  const left = () => {
+    setCurrentDirection((prev) => DIRECTION.LEFT);
+  };
+
+  const [currentDirection, setCurrentDirection] = useState(DIRECTION.RIGHT);
+
+  useEffect(() => {
+    document.addEventListener("keydown", (event) => {
+      const key = event.key.toLowerCase();
+      if (["w", "arrowup"].includes(key)) {
+        up();
+      } else if (["s", "arrowdown"].includes(key)) {
+        down();
+      } else if (["a", "arrowleft"].includes(key)) {
+        left();
+      } else if (["d", "arrowright"].includes(key)) {
+        right();
+      }
+    });
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  return <div>{currentDirection}</div>;
+}
+
+export default Test;

src/grid.module.css

@@ -1,5 +1,6 @@
 .grid {
   position: relative;
+  border: 3px solid black;
 }
 
 :global(*) {

src/hooks/useOrderedHash.js

@@ -2,19 +2,21 @@ import { useState } from "react";
 import { generateKey } from "../utils";
 
 const useOrderedHash = (list = []) => {
-  const hash = {};
   const keys = [];
+  const getHash = () => {
+    return list.reduce((hash, [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];
+      return hash;
+    }, {});
+  };
 
-  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 [hash, setHash] = useState(getHash());
 
   const getHead = () => {
     const key = keys[0];
@@ -33,6 +35,14 @@ const useOrderedHash = (list = []) => {
   };
 
   const moveForward = () => {
+    setHash((hash) => {
+      const head = keys[0];
+      const tail = keys[keys.length - 1];
+
+      const [headX, headY] = hash[head];
+      const newHead = [headX + 1, headY];
+      return { ...hash, [keys[0]]: newHead };
+    });
     console.log("move forward invoked -> ", Date.now());
   };
 

src/index.js

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

src/utils.js

@@ -1,4 +1,5 @@
 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})!`);