♻️ Refactor/tailwind color (#9)

* 💄 Use hsl color value instead of tailwind class

* 👷 Use tailwind prettier plugin

* 💄 Use hsl color value on GameStatusOverlay instead of tailwindcss classname

.prettierrc

@@ -6,5 +6,6 @@
   "tabWidth": 2,
   "useTabs": false,
   "jsxSingleQuote": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -21,15 +21,17 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
+    "@types/node": "22.7.4",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react-swc": "3.7.0",
-    "@woohm402/eslint-config-react": "0.6.1",
+    "@woohm402/eslint-config-react": "0.7.1",
     "autoprefixer": "10.4.20",
     "eslint": "9.10.0",
     "knip": "5.30.2",
     "postcss": "8.4.45",
     "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.9",
     "tailwindcss": "3.4.11",
     "typescript": "5.6.2",
     "vite": "5.4.5"

src/App.tsx

@@ -11,7 +11,6 @@ import { useKeyPress } from '@/hooks/useKeyPress';
 import { loadGameState, saveGameState } from '@/utils/localStorage';
 import {
   addRandomBlock,
-  getCellColor,
   isGameLose,
   isGameWin,
   type Map2048,
@@ -50,7 +49,7 @@ export const App = () => {
   const newGameButton = (text: string) => {
     return (
       <button
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
         onClick={newGameHandler}
       >
         {text}
@@ -91,13 +90,13 @@ export const App = () => {
   useKeyPress(keyPressHandler);
 
   return (
-    <div className="flex items-center justify-center h-dvh max-w-7xl p-8">
-      <div className="grid grid-flow-row gap-5 max-w-lg w-full">
+    <div className="flex h-dvh max-w-7xl items-center justify-center p-8">
+      <div className="grid w-full max-w-lg grid-flow-row gap-5">
         <Header score={score} bestScore={bestScore} />
         <GameInstructions newGameButton={newGameButton('New Game')} />
 
-        <div className="relative box-border w-full aspect-square p-4 bg-gray-400 rounded-lg">
-          <GameBoard map={map} getCellColor={getCellColor} />
+        <div className="relative box-border aspect-square w-full rounded-lg bg-gray-400 p-4">
+          <GameBoard map={map} />
           {/* Game Status Overlays */}
           {gameStatus === 'win' && (
             <GameStatusOverlay

src/components/GameBoard.tsx

@@ -3,19 +3,14 @@ import { Tile } from './Tile';
 
 type GameBoardProps = {
   map: Map2048;
-  getCellColor: (value: number | null) => string;
 };
 
-export const GameBoard = ({ map, getCellColor }: GameBoardProps) => {
+export const GameBoard = ({ map }: GameBoardProps) => {
   return (
     <div className="grid grid-cols-4 grid-rows-4 gap-4">
       {map.map((row, rowIndex) =>
         row.map((cell, colIndex) => (
-          <Tile
-            key={`${rowIndex}-${colIndex}`}
-            value={cell}
-            getCellColor={getCellColor}
-          />
+          <Tile key={`${rowIndex}-${colIndex}`} value={cell} />
         )),
       )}
     </div>

src/components/GameInstructions.tsx

@@ -6,7 +6,7 @@ type GameInstructionsProps = {
 
 export const GameInstructions = ({ newGameButton }: GameInstructionsProps) => {
   return (
-    <div className="grid grid-cols-4 gap-4 items-center">
+    <div className="grid grid-cols-4 items-center gap-4">
       <div className="col-span-3 text-left">
         <p>
           Join the tiles, get to <strong>2048!</strong>

src/components/GameStatusOverlay.tsx

@@ -10,16 +10,14 @@ export const GameStatusOverlay = ({
   newGameButton,
 }: GameStatusOverlayProps) => {
   const isWin = status === 'win';
-  const bgColor = isWin
-    ? 'bg-teal-300 bg-opacity-50'
-    : 'bg-red-300 bg-opacity-50';
+  const bgColor = `bg-overlay-${isWin ? 'win' : 'lose'}`;
   const message = isWin ? 'You Win!' : 'Game Over!';
 
   return (
     <div
-      className={`${bgColor} absolute inset-0 rounded-lg flex flex-col items-center justify-center`}
+      className={`${bgColor} absolute inset-0 flex flex-col items-center justify-center rounded-lg bg-opacity-50`}
     >
-      <p className="text-5xl font-extrabold mb-4">{message}</p>
+      <p className="mb-4 text-5xl font-extrabold">{message}</p>
       {newGameButton}
     </div>
   );

src/components/Header.tsx

@@ -5,19 +5,19 @@ type HeaderProps = {
 
 export const Header = ({ score, bestScore }: HeaderProps) => {
   return (
-    <div className="flex flex-col sm:flex-row justify-between items-center w-full space-y-2">
+    <div className="flex w-full flex-col items-center justify-between space-y-2 sm:flex-row">
       {/* Game Title */}
-      <div className="font-sans font-extrabold text-5xl">2048</div>
+      <div className="font-sans text-5xl font-extrabold">2048</div>
 
       {/* Score and Best Score Container */}
       <div className="flex space-x-4">
         {/* Score Block */}
-        <div className="flex flex-col items-center bg-gray-200 rounded-lg shadow-md p-4">
+        <div className="flex flex-col items-center rounded-lg bg-gray-200 p-4 shadow-md">
           <div className="text-sm font-semibold text-gray-700">SCORE</div>
           <div className="text-2xl font-bold text-gray-900">{score}</div>
         </div>
         {/* Best Score Block */}
-        <div className="flex flex-col items-center bg-gray-200 rounded-lg shadow-md p-4">
+        <div className="flex flex-col items-center rounded-lg bg-gray-200 p-4 shadow-md">
           <div className="text-sm font-semibold text-gray-700">BEST</div>
           <div className="text-2xl font-bold text-gray-900">{bestScore}</div>
         </div>

src/components/Tile.tsx

@@ -1,13 +1,12 @@
 type TileProps = {
   value: number | null;
-  getCellColor: (value: number | null) => string;
 };
 
-export const Tile = ({ value, getCellColor }: TileProps) => {
+export const Tile = ({ value }: TileProps) => {
+  const colorName = `bg-tile-${value ?? 'empty'}`;
   return (
     <div
-      className={`aspect-square rounded flex items-center justify-center text-3xl font-extrabold 
-        ${getCellColor(value)} transition-colors duration-300`}
+      className={`flex aspect-square items-center justify-center rounded text-3xl font-extrabold ${colorName} transition-colors duration-300`}
     >
       {value}
     </div>

src/utils/Map2048.ts

@@ -203,32 +203,3 @@ export const isGameLose = (map: Map2048): boolean => {
   });
   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
-  }
-};

tailwind.config.js

@@ -1,8 +1,29 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {
+      colors: {
+        tile: {
+          empty: 'hsl(216, 12.2%, 83.9%)',
+          2: 'hsl(214, 94.6%, 92.7%)',
+          4: 'hsl(213, 96.9%, 87.3%)',
+          8: 'hsl(141, 78.9%, 85.1%)',
+          16: 'hsl(142, 76.6%, 73.1%)',
+          32: 'hsl(53, 98.3%, 76.9%)',
+          64: 'hsl(50, 97.8%, 63.5%)',
+          128: 'hsl(32, 97.7%, 83.1%)',
+          256: 'hsl(31, 97.2%, 72.4%)',
+          512: 'hsl(0, 96.3%, 89.4%)',
+          1024: 'hsl(0, 93.5%, 81.8%)',
+          2048: 'hsl(269, 97.4%, 85.1%)',
+        },
+        overlay: {
+          win: 'hsl(171, 76.9%, 64.3%)',
+          lose: 'hsl(0, 93.5%, 81.8%)',
+        },
+      },
       keyframes: {
         zoomIn: {
           '0%': {
@@ -24,5 +45,11 @@ export default {
       },
     },
   },
+  safelist: [
+    {
+      pattern:
+        /bg-tile-(empty|2|4|8|16|32|64|128|256|512|1024|2048)|bg-overlay-(win|lose)/,
+    },
+  ],
   plugins: [],
 };