Skip to content

Commit

Permalink
Merge pull request #10 from shibisuriya/new-master
Browse files Browse the repository at this point in the history 
Implemented single and and it's movement.
  • Loading branch information
@shibisuriya
shibisuriya authored Sep 28, 2023
2 parents aba3ffe + 51e963d commit d5bb8bd
Show file tree
Hide file tree
Showing 8 changed files with 234 additions and 294 deletions.
46 changes: 23 additions & 23 deletions .github/workflows/deploy.yml
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
name: Build and Deploy Docs

on:
push:
branches:
- master # Adjust this to the main branch name if it's different
push:
branches:
- new-master # Adjust this to the main branch name if it's different

jobs:
build:
runs-on: ubuntu-latest
build:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v2
with:
submodules: recursive
steps:
- name: Checkout code
uses: actions/checkout@v2
with:
submodules: recursive

- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: 18 # Adjust to the desired Node.js version
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: 18 # Adjust to the desired Node.js version

- name: Install dependencies and build
run: |
yarn install
yarn run build
- name: Install dependencies and build
run: |
yarn install
yarn run build
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GH_DEPLOY }}
publish_dir: ./dist # Adjust the path to the build output directory
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GH_DEPLOY }}
publish_dir: ./dist # Adjust the path to the build output directory
202 changes: 130 additions & 72 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,136 @@
import React, { useState, useEffect, useRef } from "react";
import useOrderedHash from "./hooks/useOrderedHash";
import Grid from "./Grid";
import React, { useState, useEffect, useRef } from 'react';
import { generateKey, getOppositeDirection } from './utils';
import { DIRECTIONS, NUMBER_OF_COLUMNS, NUMBER_OF_ROWS, DEFAULT_DIRECTION } from './constants';
import Grid from './Grid';

const DIRECTION = {
UP: "up",
DOWN: "down",
LEFT: "left",
RIGHT: "right",
};
const SPEED = 1 * 100;

function App() {
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.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);
};
}, [currentDirection]);

const [snake, setSnake] = useState({ x: 0, y: 0 });

console.log(snake);

return (
<div>
<Grid snake={snake} />
</div>
);
const currentDirection = useRef(DIRECTIONS.RIGHT);

const initialState = {
hash: {
'0-0': { x: 0, y: 0 },
'0-1': { x: 0, y: 1 },
'0-2': { x: 0, y: 2 },
'0-3': { x: 0, y: 3 },
'0-4': { x: 0, y: 4 },
'0-5': { x: 0, y: 5 },
'0-6': { x: 0, y: 6 },
'0-7': { x: 0, y: 7 },
},
list: ['0-7', '0-6', '0-5', '0-4', '0-3', '0-2', '0-1', '0-0'],
};
const [snake, setSnake] = useState(initialState);

const resetSnake = () => {
currentDirection.current = DEFAULT_DIRECTION;
setSnake(initialState);
};

function moveForward() {
const updatedHash = { ...snake.hash };
const updatedList = [...snake.list];

// Remove tail.
const tailKey = updatedList.pop(); // mutates.
delete updatedHash[tailKey];

// Create new head using prev head.
const [headKey] = updatedList;
const head = updatedHash[headKey];

let newHead;
let newHeadKey;
if (currentDirection.current == DIRECTIONS.RIGHT) {
newHead = { x: head.x, y: head.y + 1 };
newHeadKey = generateKey(newHead.x, newHead.y);
updatedHash[newHeadKey] = newHead;
updatedList.unshift(newHeadKey);
} else if (currentDirection.current == DIRECTIONS.UP) {
newHead = { x: head.x - 1, y: head.y };
newHeadKey = generateKey(newHead.x, newHead.y);
updatedHash[newHeadKey] = newHead;
updatedList.unshift(newHeadKey);
} else if (currentDirection.current == DIRECTIONS.DOWN) {
newHead = { x: head.x + 1, y: head.y };
newHeadKey = generateKey(newHead.x, newHead.y);
updatedHash[newHeadKey] = newHead;
updatedList.unshift(newHeadKey);
} else if (currentDirection.current == DIRECTIONS.LEFT) {
newHead = { x: head.x, y: head.y - 1 };
newHeadKey = generateKey(newHead.x, newHead.y);
updatedHash[newHeadKey] = newHead;
updatedList.unshift(newHeadKey);
}
if (newHeadKey in snake.hash) {
resetSnake();
} else if (newHead.x < NUMBER_OF_ROWS && newHead.x >= 0 && newHead.y >= 0 && newHead.y < NUMBER_OF_COLUMNS) {
setSnake({ hash: updatedHash, list: updatedList });
} else {
resetSnake();
}
}

const moveUp = () => {
if (currentDirection.current == DIRECTIONS.UP) {
// moving up only.
return;
} else if (getOppositeDirection(currentDirection.current) !== DIRECTIONS.UP) {
currentDirection.current = DIRECTIONS.UP;
}
};

const moveDown = () => {
if (currentDirection.current == DIRECTIONS.DOWN) {
return;
} else if (getOppositeDirection(currentDirection.current) !== DIRECTIONS.DOWN) {
currentDirection.current = DIRECTIONS.DOWN;
}
};

const moveRight = () => {
if (currentDirection.current == DIRECTIONS.RIGHT) {
return;
} else if (getOppositeDirection(currentDirection.current) !== DIRECTIONS.RIGHT) {
currentDirection.current = DIRECTIONS.RIGHT;
}
};

const moveLeft = () => {
if (currentDirection.current == DIRECTIONS.LEFT) {
return;
} else if (getOppositeDirection(currentDirection.current) !== DIRECTIONS.LEFT) {
currentDirection.current = DIRECTIONS.LEFT;
}
};

useEffect(() => {
const timer = setInterval(moveForward, SPEED);

document.addEventListener('keydown', (event) => {
const key = event.key.toLowerCase();
if (['w', 'arrowup'].includes(key)) {
moveUp();
} else if (['s', 'arrowdown'].includes(key)) {
moveDown();
} else if (['a', 'arrowleft'].includes(key)) {
moveLeft();
} else if (['d', 'arrowright'].includes(key)) {
moveRight();
}
});

return () => {
clearInterval(timer);
};
}, [snake]);

return (
<div>
<Grid snake={snake} />
</div>
);
}

export default App;
96 changes: 44 additions & 52 deletions src/Grid.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,57 @@
import React from "react";
import styles from "./grid.module.css";
import {
CELL_DIMENSION,
NUMBER_OF_COLUMNS,
NUMBER_OF_ROWS,
GRID_HEIGHT,
GRID_WIDTH,
} from "./constants";
import { generateKey } from "./utils";
import React from 'react';
import styles from './grid.module.css';
import { CELL_DIMENSION, NUMBER_OF_COLUMNS, NUMBER_OF_ROWS, GRID_HEIGHT, GRID_WIDTH } from './constants';
import { generateKey } from './utils';

const grid = [];
for (let i = 0; i < NUMBER_OF_ROWS; i++) {
const row = [];
for (let j = 0; j < NUMBER_OF_COLUMNS; j++) {
row.push([i, j]);
}
grid.push(row);
const row = [];
for (let j = 0; j < NUMBER_OF_COLUMNS; j++) {
row.push([i, j]);
}
grid.push(row);
}

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}
style={{
top: `${x * CELL_DIMENSION}px`,
left: `${y * CELL_DIMENSION}px`,
height: `${CELL_DIMENSION}px`,
width: `${CELL_DIMENSION}px`,
...cellColor(),
}}
></div>
);
const cellColor = () => {
if (body) {
return { backgroundColor: 'red' };
} else if (head) {
return { backgroundColor: 'black' };
} else {
return { backgroundColor: 'white' };
}
};
return (
<div
className={styles.cell}
style={{
top: `${x * CELL_DIMENSION}px`,
left: `${y * CELL_DIMENSION}px`,
height: `${CELL_DIMENSION}px`,
width: `${CELL_DIMENSION}px`,
...cellColor(),
}}
></div>
);
}

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}`} />;
}
};
const makeCell = (cell) => {
const [x, y] = cell;
const key = generateKey(x, y);
if (key in snake.hash) {
return <Cell x={x} y={y} key={key} head={true} />;
} else {
return <Cell x={x} y={y} key={key} />;
}
};

return (
<div
className={styles.grid}
style={{ width: `${GRID_WIDTH}px`, height: `${GRID_HEIGHT}px` }}
>
{grid.map((rows) => rows.map((col) => makeCell(col)))}
</div>
);
return (
<div className={styles.grid} style={{ width: `${GRID_WIDTH}px`, height: `${GRID_HEIGHT}px` }}>
{grid.map((rows) => rows.map((col) => makeCell(col)))}
</div>
);
}

export default Grid;
15 changes: 9 additions & 6 deletions src/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@ 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,
const DIRECTIONS = {
UP: 'up',
DOWN: 'down',
LEFT: 'left',
RIGHT: 'right',
};

const DEFAULT_DIRECTION = DIRECTIONS.RIGHT;

export { GRID_HEIGHT, GRID_WIDTH, CELL_DIMENSION, NUMBER_OF_COLUMNS, NUMBER_OF_ROWS, DIRECTIONS, DEFAULT_DIRECTION };
Loading

0 comments on commit d5bb8bd

Please sign in to comment.