From db48d9e8a21ebafcf5aad4454a95d21c1f9f66ad Mon Sep 17 00:00:00 2001 From: Shibi Suriya Date: Tue, 26 Sep 2023 00:20:44 +0530 Subject: [PATCH] rendered snake --- src/App.jsx | 43 +++++++++++++++++++-- src/Grid.jsx | 33 ++++++++++------ src/Test.jsx | 69 --------------------------------- src/constants.js | 15 ++++++++ src/hooks/orderedHash.js | 76 +++++++++++++++++++++++++++++++++++++ src/hooks/useOrderedHash.js | 42 ++++++++++++++++++++ src/index.js | 2 +- src/utils.js | 7 ++++ 8 files changed, 203 insertions(+), 84 deletions(-) delete mode 100644 src/Test.jsx create mode 100644 src/constants.js create mode 100644 src/hooks/orderedHash.js create mode 100644 src/hooks/useOrderedHash.js create mode 100644 src/utils.js diff --git a/src/App.jsx b/src/App.jsx index 5fe951a..f5677f1 100644 --- a/src/App.jsx +++ b/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 (
- +
); } diff --git a/src/Grid.jsx b/src/Grid.jsx index ccf29aa..e93feb0 100644 --- a/src/Grid.jsx +++ b/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 (
); } -function Grid({ snakes }) { +function Grid({ snake }) { return (
{grid.map((rows) => { return rows.map((col) => { const [x, y] = col; - return ; + const key = generateKey(x, y); + if (snake.getHead().key == key) { + return ; + } else if (snake.hash[generateKey(x, y)]) { + return ; + } else { + return ; + } }); })}
diff --git a/src/Test.jsx b/src/Test.jsx deleted file mode 100644 index eff6207..0000000 --- a/src/Test.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useEffect, useState } from "react"; - -function App() { - const [message, setMessage] = useState(""); - const [peerConnection, setPeerConnection] = useState(null); - - const handleInputChange = (e) => { - setMessage(e.target.value); - }; - - const handleSendMessage = () => { - if (peerConnection && message.trim() !== "") { - sendMessage(message); - } - }; - - const sendMessage = (message) => { - const dataChannel = peerConnection.createDataChannel("dataChannel"); - dataChannel.onopen = () => { - dataChannel.send(message); - }; - }; - - useEffect(() => { - const config = { - iceServers: [ - { - urls: "stun:stun4.l.google.com:19302", // Public STUN server - }, - { - url: "turn:192.158.29.39:3478?transport=udp", - credential: "JZEOEt2V3Qb0y27GRntt2u2PAYA=", - username: "28224511:1379330808", - }, - ], - }; - - const peerConn = new RTCPeerConnection(config); - - peerConn.ondatachannel = (event) => { - event.channel.onmessage = (e) => { - setMessage(e.data); - }; - }; - - setPeerConnection(peerConn); - }, []); - - return ( -
-

WebRTC Chat

-
- - -
-
-

Received Message:

-
{message}
-
-
- ); -} - -export default App; diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..ba9d3a5 --- /dev/null +++ b/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, +}; diff --git a/src/hooks/orderedHash.js b/src/hooks/orderedHash.js new file mode 100644 index 0000000..b030b77 --- /dev/null +++ b/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]]; + } +} diff --git a/src/hooks/useOrderedHash.js b/src/hooks/useOrderedHash.js new file mode 100644 index 0000000..4215c70 --- /dev/null +++ b/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; diff --git a/src/index.js b/src/index.js index 02df9aa..b0590e6 100644 --- a/src/index.js +++ b/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")); diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..61feb5c --- /dev/null +++ b/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}`; +};