From 2c296a52b0edac0e096ebe6e484f881760353412 Mon Sep 17 00:00:00 2001 From: Shibi Suriya Date: Wed, 27 Sep 2023 20:47:48 +0530 Subject: [PATCH] test --- README.md | 2 +- src/App.jsx | 70 ++++++++++++++++++++++++++----------- src/Grid.jsx | 36 +++++++++++-------- src/Test.jsx | 50 ++++++++++++++++++++++++++ src/grid.module.css | 1 + src/hooks/useOrderedHash.js | 32 +++++++++++------ src/index.js | 1 + src/utils.js | 1 + 8 files changed, 146 insertions(+), 47 deletions(-) create mode 100644 src/Test.jsx diff --git a/README.md b/README.md index 93da4e0..9f5611f 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# Classic Slither.io +# Classic Slither.io (WIP) diff --git a/src/App.jsx b/src/App.jsx index f5677f1..0fbe4a9 100644 --- a/src/App.jsx +++ b/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 (
diff --git a/src/Grid.jsx b/src/Grid.jsx index e93feb0..86a7a11 100644 --- a/src/Grid.jsx +++ b/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 ; + } else { + return ; + } + }; + return ( -
- {grid.map((rows) => { - return rows.map((col) => { - const [x, y] = col; - const key = generateKey(x, y); - if (snake.getHead().key == key) { - return ; - } else if (snake.hash[generateKey(x, y)]) { - return ; - } else { - return ; - } - }); - })} +
+ {grid.map((rows) => rows.map((col) => makeCell(col)))}
); } diff --git a/src/Test.jsx b/src/Test.jsx new file mode 100644 index 0000000..fb752a5 --- /dev/null +++ b/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
{currentDirection}
; +} + +export default Test; diff --git a/src/grid.module.css b/src/grid.module.css index 812fb14..991b70d 100644 --- a/src/grid.module.css +++ b/src/grid.module.css @@ -1,5 +1,6 @@ .grid { position: relative; + border: 3px solid black; } :global(*) { diff --git a/src/hooks/useOrderedHash.js b/src/hooks/useOrderedHash.js index 4215c70..2421def 100644 --- a/src/hooks/useOrderedHash.js +++ b/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()); }; diff --git a/src/index.js b/src/index.js index b0590e6..40c6695 100644 --- a/src/index.js +++ b/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")); diff --git a/src/utils.js b/src/utils.js index 61feb5c..e3f56e3 100644 --- a/src/utils.js +++ b/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})!`);