trigger rainbow mode on sudoku win

ayan4m1 · Dec 26, 2023 · c2c2fed · c2c2fed
1 parent e79aaf9
commit c2c2fed
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/src/components/sudokuBoard.js b/src/components/sudokuBoard.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { hsl } from 'd3-color';
 import { chunk } from 'lodash-es';
 import { getSudoku } from 'sudoku-gen';
 import useLocalStorageState from 'use-local-storage-state';
@@ -22,6 +23,7 @@ import {
 
 import SudokuCell from 'components/sudokuCell';
 import { checkSolution, getInvalids } from 'utils/sudoku';
+import useRainbow from 'hooks/useRainbow';
 
 export default function SudokuBoard() {
   const [solved, setSolved] = useState(false);
@@ -81,9 +83,17 @@ export default function SudokuBoard() {
     setValues(savedState.values);
   }, [savedState]);
   const handleClear = useCallback(() => setSavedState(null), []);
+  const { color: animationColor, start, stop } = useRainbow(false, false);
 
   useEffect(() => {
-    setSolved(checkSolution(cells, values, puzzle.solution));
+    const solved = checkSolution(cells, values, puzzle.solution);
+
+    if (solved) {
+      setSolved(solved);
+      start();
+    } else {
+      stop();
+    }
   }, [cells, values, puzzle]);
 
   return (
@@ -123,19 +133,28 @@ export default function SudokuBoard() {
         </Row>
         {cells.map((row, rowIdx) => (
           <Row key={rowIdx} className="d-flex justify-content-center">
-            {row.map((value, colIdx) => (
-              <SudokuCell
-                row={rowIdx}
-                column={colIdx}
-                key={colIdx}
-                value={!value ? values[rowIdx][colIdx] : value}
-                unknown={!value}
-                active={activeCell[0] === rowIdx && activeCell[1] === colIdx}
-                valid={invalids[rowIdx][colIdx]}
-                onClick={handleClick}
-                onChange={handleChange}
-              />
-            ))}
+            {row.map((value, colIdx) => {
+              const cellColor = hsl(solved ? animationColor : '#ffffff');
+
+              if (solved) {
+                cellColor.h += (rowIdx * 9 + colIdx) * 5;
+              }
+
+              return (
+                <SudokuCell
+                  row={rowIdx}
+                  column={colIdx}
+                  key={colIdx}
+                  value={!value ? values[rowIdx][colIdx] : value}
+                  unknown={!value}
+                  active={activeCell[0] === rowIdx && activeCell[1] === colIdx}
+                  valid={invalids[rowIdx][colIdx]}
+                  onClick={handleClick}
+                  onChange={handleChange}
+                  bg={cellColor.formatHex()}
+                />
+              );
+            })}
           </Row>
         ))}
       </Container>

diff --git a/src/components/sudokuCell.js b/src/components/sudokuCell.js
@@ -7,6 +7,7 @@ export default function SudokuCell({
   row,
   column,
   value,
+  bg = '#ffffff',
   unknown = false,
   active = false,
   valid = true,
@@ -65,8 +66,9 @@ export default function SudokuCell({
         'text-dark',
         column > 0 && column % 3 === 2 && 'border-end',
         row > 0 && row % 3 === 2 && 'border-bottom',
-        valid ? 'bg-white' : 'bg-danger'
+        !valid && 'bg-danger'
       )}
+      style={{ backgroundColor: bg }}
     >
       {unknown && active ? (
         <Form.Control
@@ -88,6 +90,7 @@ SudokuCell.propTypes = {
   row: PropTypes.number.isRequired,
   column: PropTypes.number.isRequired,
   value: PropTypes.number,
+  bg: PropTypes.string,
   unknown: PropTypes.bool,
   active: PropTypes.bool,
   valid: PropTypes.bool,

diff --git a/src/hooks/useRainbow.js b/src/hooks/useRainbow.js
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 
 export default function useRainbow(
   run = true,
+  loop = true,
   startColor = '#ff0000',
   endColor = '#0000ff',
   timeDilation = 2000
@@ -18,7 +19,11 @@ export default function useRainbow(
   const stop = useCallback(() => setRunning(false), []);
 
   const animate = (time) => {
-    setColor(interpolator(Math.abs(Math.sin(time / timeDilation))));
+    setColor(
+      interpolator(
+        loop ? Math.abs(Math.sin(time / timeDilation)) : time / timeDilation
+      )
+    );
 
     if (running) {
       requestId.current = requestAnimationFrame(animate);