From 911e72fa10df9fb620f111af08db6d9baa61a40c Mon Sep 17 00:00:00 2001 From: Wooyeol Lee Date: Fri, 22 Nov 2024 23:51:35 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20Use=20hsl=20color=20value=20?= =?UTF-8?q?instead=20of=20tailwind=20class?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 +-- src/components/GameBoard.tsx | 9 ++------- src/components/Tile.tsx | 6 +++--- src/utils/Map2048.ts | 29 ----------------------------- tailwind.config.js | 24 +++++++++++++++++++++++- 5 files changed, 29 insertions(+), 42 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 77716cc..c95966d 100644 --- a/src/App.tsx +++ b/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, @@ -97,7 +96,7 @@ export const App = () => {
- + {/* Game Status Overlays */} {gameStatus === 'win' && ( string; }; -export const GameBoard = ({ map, getCellColor }: GameBoardProps) => { +export const GameBoard = ({ map }: GameBoardProps) => { return (
{map.map((row, rowIndex) => row.map((cell, colIndex) => ( - + )), )}
diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx index 9eea45b..68ca6cd 100644 --- a/src/components/Tile.tsx +++ b/src/components/Tile.tsx @@ -1,13 +1,13 @@ 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 (
{value}
diff --git a/src/utils/Map2048.ts b/src/utils/Map2048.ts index 284f8d8..c8ad08b 100644 --- a/src/utils/Map2048.ts +++ b/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 - } -}; diff --git a/tailwind.config.js b/tailwind.config.js index ce0b7b5..c44334d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,25 @@ /** @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%)', + }, + }, keyframes: { zoomIn: { '0%': { @@ -24,5 +41,10 @@ export default { }, }, }, + safelist: [ + { + pattern: /bg-tile-(empty|2|4|8|16|32|64|128|256|512|1024|2048)/, + }, + ], plugins: [], }; From 5fe4a7f803704468fdd2c1d0de3d8e1df745afc0 Mon Sep 17 00:00:00 2001 From: Wooyeol Lee Date: Fri, 22 Nov 2024 23:54:44 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=91=B7=20Use=20tailwind=20prettier=20?= =?UTF-8?q?plugin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 3 +- package.json | 4 +- src/App.tsx | 8 +- src/components/GameInstructions.tsx | 2 +- src/components/GameStatusOverlay.tsx | 4 +- src/components/Header.tsx | 8 +- src/components/Tile.tsx | 3 +- yarn.lock | 295 +++++++++++++++------------ 8 files changed, 179 insertions(+), 148 deletions(-) diff --git a/.prettierrc b/.prettierrc index 1d5c2e7..91e57d5 100644 --- a/.prettierrc +++ b/.prettierrc @@ -6,5 +6,6 @@ "tabWidth": 2, "useTabs": false, "jsxSingleQuote": false, - "arrowParens": "always" + "arrowParens": "always", + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/package.json b/package.json index d4da620..4c0193c 100644 --- a/package.json +++ b/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" diff --git a/src/App.tsx b/src/App.tsx index c95966d..ea52917 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -49,7 +49,7 @@ export const App = () => { const newGameButton = (text: string) => { return (