refactor

Author: floatrx

.prettierrc

@@ -8,7 +8,11 @@
   "bracketSpacing": true,
   "endOfLine": "lf",
   "singleQuote": true,
-  "plugins": ["prettier-plugin-tailwindcss"],
+  "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["(^react|react|vite)", "<THIRD_PARTY_MODULES>", "@/components/", "@/types", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderSortSpecifiers": true,
   "jsxSingleQuote": false,
   "overrides": [
     {

README.md

@@ -13,12 +13,13 @@
    The user must choose two numbers according to the game rules.
 
 3. **Adjacent Numbers:**
-    - The user can only select adjacent numbers either vertically or horizontally.
-    - Adjacent numbers are those with no unresolved cells between them.
-    - The user can also select consecutive numbers in a row (e.g., the last number in the 1st row and the first number in the next row).
+
+   - The user can only select adjacent numbers either vertically or horizontally.
+   - Adjacent numbers are those with no unresolved cells between them.
+   - The user can also select consecutive numbers in a row (e.g., the last number in the 1st row and the first number in the next row).
 
 4. **Ignoring Resolved Cells:**
-All resolved cells are ignored when checking for adjacency.
+   All resolved cells are ignored when checking for adjacency.
 
 ![Screenshot](public/moves.png)
 
@@ -34,8 +35,8 @@ All resolved cells are ignored when checking for adjacency.
 
 7. **Booster Counter K:**
    For each successful selection, the game adds a booster counter K, which multiplies the points.
-    - The counter can reach up to x100.
-    - The counter resets to 1 after 5 seconds of inactivity.
+   - The counter can reach up to x100.
+   - The counter resets to 1 after 5 seconds of inactivity.
 
 ### Shuffle Feature
 

global.d.ts

@@ -12,8 +12,3 @@ declare global {
 declare global {
   type FC<T = object> = FunctionComponent<PropsWithChildren<T>>;
 }
-
-declare module '*.module.css' {
-  const value: { [className: string]: string };
-  export default value;
-}

package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/howler": "^2.2.11",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",

src/components/app.tsx

@@ -0,0 +1,28 @@
+import { DEFAULT_BOARD_SIZE } from '@/config/const';
+import { useApp } from '@/hooks/use-app';
+
+import { Board } from '@/components/board/board';
+import { Footer } from '@/components/layout/footer/footer';
+import { Heading } from '@/components/layout/heading/heading';
+import { Score } from '@/components/layout/score/score';
+import { Winner } from '@/components/winner/winner';
+
+export const App = () => {
+  const { isWin, board, score, boosterK, shuffle, shuffleCount, resetGame, requestSolver, boardRef } = useApp();
+  return (
+    <main className="main">
+      {isWin ? (
+        <Winner score={score} onReset={resetGame} />
+      ) : (
+        <section>
+          <header className="header">
+            <Heading onReset={resetGame} onShuffle={shuffle} canShuffle={!!shuffleCount && !isWin} size={DEFAULT_BOARD_SIZE} />
+            <Score value={score} multiplier={boosterK} />
+          </header>
+          <Board ref={boardRef} board={board} size={DEFAULT_BOARD_SIZE} onSolve={requestSolver} />
+        </section>
+      )}
+      <Footer />
+    </main>
+  );
+};

src/components/app/app.module.css

@@ -1,32 +1,35 @@
 import { forwardRef } from 'react';
-import { Cell } from '@/components/cell/cell';
+
 import { DEFAULT_BOARD_SIZE } from '@/config/const';
+import { useBoard } from '@/hooks/use-board';
 import { cn } from '@/lib/utils';
-import { useGrid } from '@/hooks/use-grid';
-import type { TBoard, TGridSize } from '@/types/game';
+
+import { Cell } from '@/components/cell/cell';
+
+import type { TBoard, TBoardSize } from '@/types/game';
 
 // Styles
-import s from './grid.module.css';
+import s from './board.module.css';
 
 interface IProps {
   className?: string;
-  size: TGridSize;
+  size: TBoardSize;
   board: TBoard;
   onSolve: (score: number, remainCount: number) => void;
 }
 
-export const Grid = forwardRef<HTMLDivElement, IProps>(({ className, ...props }, ref) => {
-  const { selectedCells, solvedCells, handleCellClick } = useGrid(props);
+export const Board = forwardRef<HTMLDivElement, IProps>(({ className, ...props }, ref) => {
+  const { selectedCells, solvedCells, handleCellClick } = useBoard(props);
   return (
     <div ref={ref} className={cn(s.wrapper, className)} style={{ grid: `auto / repeat(${DEFAULT_BOARD_SIZE.cols}, 1fr)` }}>
       {props.board.map((row, i) =>
         row.map((cell, j) => (
           <Cell
             key={`${i}-${j}`}
-            coords={cell.coordinates}
+            position={cell.coordinates}
             value={cell.value}
             selected={selectedCells.includes(cell.coordinates)}
-            passed={solvedCells.includes(cell.coordinates)}
+            solved={solvedCells.includes(cell.coordinates)}
             onClick={handleCellClick}
           />
         )),

src/components/app/app.tsx

@@ -1,26 +1,20 @@
-import { useCallback } from 'react';
+import { cn } from '@/lib/utils';
+
+import type { TCoordinates } from '@/types/game';
 
 // Styles
-import { cn } from '@/lib/utils';
 import s from './cell.module.css';
-import type { TCoordinates } from '@/types/game';
 
 interface IProps {
-  coords: [number, number];
+  position: TCoordinates;
   onClick?: (coords: TCoordinates) => void;
   value?: number;
   selected?: boolean;
-  passed?: boolean;
+  solved?: boolean;
 }
 
-export const Cell: FC<IProps> = ({ coords, value, selected, passed, onClick }) => {
-  const handleSelect = useCallback(() => {
-    onClick?.(coords);
-  }, [onClick, coords]);
-
-  return (
-    <div onClick={handleSelect} className={cn(s.cell, selected && s.selected, passed && s.passed)}>
-      {value}
-    </div>
-  );
-};
+export const Cell: FC<IProps> = ({ position, value, selected, solved, onClick }) => (
+  <div onClick={() => onClick?.(position)} className={cn(s.cell, selected && s.selected, solved && s.passed)}>
+    {value}
+  </div>
+);

src/components/grid/grid.module.css renamed to src/components/board/board.module.css

@@ -0,0 +1,7 @@
+/*  styles */
+.footer {
+    @apply pt-2 text-[12px] text-slate-500 opacity-40 transition-opacity;
+    &:hover {
+        @apply text-slate-200 opacity-100;
+    }
+}

src/components/grid/grid.tsx renamed to src/components/board/board.tsx

@@ -12,8 +12,8 @@
 
     &.shuffle {
         @apply absolute
-        bottom-8
         right-5
+        top-5
         flex
         size-9
         items-center
@@ -22,6 +22,11 @@
         border-2
         p-1.5
         text-white;
+
+        &:global {
+            will-change: transform;
+            animation: pop 0.35s ease-in-out 0.3s both;
+        }
     }
 }
 

src/components/cell/cell.tsx

@@ -1,12 +1,14 @@
 import { Shuffle } from 'lucide-react';
-import { TGridSize } from '@/types/game';
+
 import { cn } from '@/lib/utils';
 
+import { TBoardSize } from '@/types/game';
+
 // Styles
 import s from './heading.module.css';
 
 interface IProps {
-  size: TGridSize;
+  size: TBoardSize;
   onReset: () => void;
   onShuffle: () => void;
   canShuffle: boolean;

src/components/footer/footer.module.css

@@ -0,0 +1,46 @@
+.wrapper {
+    @apply flex
+    min-h-[80vh]
+    flex-col justify-center gap-2
+    text-center text-4xl text-white;
+}
+
+.icon {
+    @apply relative top-5 text-[120px];
+
+    &:global {
+        will-change: transform, filter;
+        animation: pop 0.35s ease-in-out both;
+    }
+}
+
+.text {
+    @apply text-2xl font-black tracking-widest;
+    text-shadow:
+        0 0 10px rgba(0, 0, 0, 1),
+        0 5px 5px rgba(0, 0, 0, 1);
+
+    &:global {
+        will-change: transform;
+        animation: fadeInUp 0.35s ease-in-out 0.1s both;
+    }
+}
+
+.score {
+    @apply relative my-3 bg-gradient-to-r from-primary
+    to-orange-400 bg-clip-text text-7xl font-black tracking-tighter text-transparent;
+
+    &:global {
+        will-change: transform;
+        animation: fadeInDown 0.35s ease-in-out 0.1s both;
+    }
+}
+
+.button {
+    @apply btn text-2xl font-bold tracking-tight;
+
+    &:global {
+        will-change: transform;
+        animation: fadeInUp 0.35s ease-in-out 0.3s both;
+    }
+}