Skip to content

Commit

Permalink
feat: add cell colors
Browse files Browse the repository at this point in the history
  • Loading branch information
thisisWooyeol committed Sep 17, 2024
1 parent 0f9cb2e commit 94f70d7
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 29 deletions.
70 changes: 44 additions & 26 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@ import './App.css';

import { useEffect, useState } from 'react';

import { getRandomPos, isGameLose, isGameWin, type Map2048, moveMapIn2048Rule, resetMap, stringDirectionMap } from './Map2048';
import {
getCellColor,
getRandomPos,
isGameLose,
isGameWin,
type Map2048,
moveMapIn2048Rule,
resetMap,
stringDirectionMap
} from './Map2048';


function App() {
Expand All @@ -27,17 +36,18 @@ function App() {
};

useEffect(() => {
const handleKeyUp = (event: WindowEventMap['keyup']) => {
const handleKeyUp = (event: WindowEventMap['keydown']) => {
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
event.preventDefault();
setKeyPressed(event.key);
console.info(`Arrow key pressed: ${event.key}`);
console.debug(`Arrow key pressed: ${event.key}`);
}
};

window.addEventListener('keyup', handleKeyUp);
window.addEventListener('keydown', handleKeyUp);

return () => {
window.removeEventListener('keyup', handleKeyUp);
window.removeEventListener('keydown', handleKeyUp);
};
}, []);

Expand All @@ -53,22 +63,25 @@ function App() {
const newBlockPos: number | null = getRandomPos(result);
if (newBlockPos !== null) {
const pos = newBlockPos;
result[Math.floor(pos / rowLength)][pos % columnLength] = 2;
console.info(`New block at: ${Math.floor(pos / rowLength)}, ${pos % columnLength}`);
const row = result[Math.floor(pos / rowLength)];
if (row !== undefined) {
row[pos % columnLength] = 2;
console.debug(`New block at: ${Math.floor(pos / rowLength)}, ${pos % columnLength}`);
}
}
setMap(result);
}
}
setKeyPressed('');

// check if the game is over
if (isGameWin(map)) {
setGameStatus('win');
console.info('You win!');
}
else if (isGameLose(map)) {
setGameStatus('lose');
console.info('You lose!');
setKeyPressed('');

// check if the game is over
if (isGameWin(result)) {
setGameStatus('win');
console.info('You win!');
}
else if (isGameLose(result)) {
setGameStatus('lose');
console.info('You lose!');
}
}
}, [gameStatus, keyPressed, map]);

Expand Down Expand Up @@ -113,13 +126,18 @@ function App() {
<div className='relative box-border w-full aspect-square p-4 bg-gray-400 rounded-lg'>
<div className='grid grid-cols-4 grid-rows-4 gap-4'>
{Array.from({ length: rowLength}, (_, rowIndex) =>
Array.from({ length: columnLength }, (_, columnIndex) =>
<div
key={rowIndex * rowLength + columnIndex}
className='aspect-square bg-gray-300 rounded flex items-center justify-center text-3xl font-extrabold'>
{map[rowIndex]?.[columnIndex]}
</div>
)
Array.from({ length: columnLength }, (_, columnIndex) => {
const cellValue = map[rowIndex]?.[columnIndex];
return (
<div
key={rowIndex * rowLength + columnIndex}
className={`aspect-square rounded flex items-center justify-center text-3xl font-extrabold
${getCellColor(cellValue)} transition-colors duration-300`}
>
{cellValue}
</div>
);
})
)}
</div>

Expand All @@ -132,7 +150,7 @@ function App() {
}
{gameStatus === 'lose' &&
<div className='absolute inset-0 bg-red-300 bg-opacity-50 rounded-lg flex flex-col items-center justify-center'>
<p className='text-5xl font-extrabold mb-4'>You Lose!</p>
<p className='text-5xl font-extrabold mb-4'>Game Over!</p>
{newGameButton('Try again?')}
</div>
}
Expand Down
35 changes: 32 additions & 3 deletions src/Map2048.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ export const moveMapIn2048Rule = (
};

const validateMapIsNByM = (map: Map2048) => {
const firstColumnCount = map[0].length;
const firstColumnCount = map[0]?.length;
return map.every((row) => row.length === firstColumnCount);
};

const rotateMapCounterClockwise = (
map: Map2048,
degree: 0 | 90 | 180 | 270,
degree: RotateDegree,
): Map2048 => {
const rowLength = map.length;
const columnLength = map[0].length;

Check failure on line 33 in src/Map2048.tsx

View workflow job for this annotation

GitHub Actions / ci

Object is possibly 'undefined'.
Expand Down Expand Up @@ -196,4 +196,33 @@ export const isGameLose = (map: Map2048): boolean => {
return isMoved;
});
return !isMovable;
}
}

export const getCellColor = (value: Cell | undefined): string => {
switch (value) {
case 2:
return 'bg-blue-100';
case 4:
return 'bg-blue-200';
case 8:
return 'bg-green-200';
case 16:
return 'bg-green-300';
case 32:
return 'bg-yellow-200';
case 64:
return 'bg-yellow-300';
case 128:
return 'bg-orange-200';
case 256:
return 'bg-orange-300';
case 512:
return 'bg-red-200';
case 1024:
return 'bg-red-300';
case 2048:
return 'bg-purple-300';
default:
return 'bg-gray-300'; // Default color for empty cells or higher values
}
};

0 comments on commit 94f70d7

Please sign in to comment.