Feat/dark mode (#15)

* feat: refactor the grid to be simpler and add dark mode to it * feat: add dark mode everywhere
TN1ck · Sep 26, 2024 · 1795e05 · 1795e05
1 parent 20cb3e6
commit 1795e05
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 56 deletions.
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -32,7 +32,7 @@ const routes = [
 
 const location = new ReactLocation();
 
-const App: React.StatelessComponent = () => {
+const App = () => {
   return (
     <Provider store={store}>
       <Header />

diff --git a/src/components/modules/Button.tsx b/src/components/modules/Button.tsx
@@ -20,7 +20,7 @@ const Button = ({
       onClick={onClick}
       className={overrideTailwindClasses(
         clsx(
-          "rounded-sm border-none bg-white md:px-4 md:py-2 px-2 py-1 text-black shadow-sm transition-transform hover:brightness-90 focus:outline-none disabled:brightness-75",
+          "rounded-sm border-none bg-white dark:text-white dark:bg-gray-500 md:px-4 md:py-2 px-2 py-1 text-black shadow-sm transition-transform hover:brightness-90 focus:outline-none disabled:brightness-75",
           className,
           {
             "scale-110 brightness-90": active,

diff --git a/src/components/modules/Header.tsx b/src/components/modules/Header.tsx
@@ -73,7 +73,7 @@ const NewGameButton: React.FC<NewGamePropsFromRedux> = ({pauseGame, chooseGame})
   };
 
   return (
-    <Button className="bg-teal-600 text-white" onClick={pauseAndChoose}>
+    <Button className="bg-teal-600 dark:bg-teal-600 text-white" onClick={pauseAndChoose}>
       {"New"}
     </Button>
   );
@@ -82,11 +82,40 @@ const NewGameButton: React.FC<NewGamePropsFromRedux> = ({pauseGame, chooseGame})
 const ConnectedNewGameButton = newGameConnector(NewGameButton);
 
 const Header = () => {
+  const [darkMode, setDarkMode] = React.useState(false);
+
+  React.useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [darkMode]);
+
+  const toggleDarkMode = () => {
+    setDarkMode((prevMode) => !prevMode);
+  };
+
   return (
-    <div className="flex justify-center bg-gray-900 py-4 text-white">
+    <div className="flex justify-center bg-gray-900 dark:bg-black py-4 text-white">
       <div className="flex justify-between items-center max-w-screen-xl w-full px-4">
         <div>{"Super Sudoku"}</div>
         <div className="flex space-x-2">
+          <button
+            onClick={toggleDarkMode}
+            className="h-10 w-10 rounded-sm p-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <svg className="fill-violet-700 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+            <svg className="fill-yellow-500 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
           <ConnectedClearGameButton />
           <ConnectedNewGameButton />
         </div>

diff --git a/src/components/pages/Game/GameControls/GameControlNumbers.tsx b/src/components/pages/Game/GameControls/GameControlNumbers.tsx
@@ -79,9 +79,10 @@ class SudokuMenuNumbers extends React.Component<PropsFromRedux> {
             <NumberButton
               className={clsx("relative font-bold", {
                 "bg-gray-400": occurrences == 9,
-                "bg-red-400": this.props.showOccurrences && occurrences > 9,
-                "bg-sky-600 text-white": this.props.notesMode && userNotes.includes(n) && activeCell?.number === 0,
-                "bg-sky-300":
+                "bg-red-400 dark:bg-red-400": this.props.showOccurrences && occurrences > 9,
+                "bg-sky-600 dark:bg-sky-600 text-white":
+                  this.props.notesMode && userNotes.includes(n) && activeCell?.number === 0,
+                "bg-sky-300 dark:bg-sky-300":
                   this.props.notesMode &&
                   userNotes.length === 0 &&
                   autoNotes.includes(n) &&

diff --git a/src/components/pages/Game/Sudoku/Sudoku.styles.tsx b/src/components/pages/Game/Sudoku/Sudoku.styles.tsx
@@ -1,13 +1,7 @@
 import * as React from "react";
-import styled, {css} from "styled-components";
-import THEME from "src/theme";
 import {Bounds} from "src/utils/types";
 import clsx from "clsx";
 
-export const SudokuContainer = styled.div.attrs({
-  className: "absolute h-full w-full rounded-sm bg-white",
-})``;
-
 export const GridLineX = ({top, width, makeBold}: {top: number; width: number; makeBold: boolean}) => {
   return (
     <div
@@ -17,8 +11,8 @@ export const GridLineX = ({top, width, makeBold}: {top: number; width: number; m
         height: makeBold ? 2 : 1,
       }}
       className={clsx("absolute left-0 -translate-y-1/2", {
-        "z-10 bg-gray-300": makeBold,
-        "bg-gray-200": !makeBold,
+        "z-10 bg-gray-400 dark:bg-gray-500": makeBold,
+        "z-10 bg-gray-300 dark:bg-gray-600": !makeBold,
       })}
     />
   );
@@ -33,8 +27,8 @@ export const GridLineY = ({left, height, makeBold}: {left: number; height: numbe
         width: makeBold ? 2 : 1,
       }}
       className={clsx("absolute left-0 -translate-x-1/2", {
-        "z-10 bg-gray-300": makeBold,
-        "bg-gray-200": !makeBold,
+        "z-10 bg-gray-400 dark:bg-gray-500": makeBold,
+        "z-10 bg-gray-300 dark:bg-gray-600": !makeBold,
       })}
     />
   );
@@ -96,38 +90,50 @@ export const GridCell = ({
   onClick: () => void;
   onRightClick: () => void;
 }) => {
+  let backgroundColor = "bg-white dark:bg-gray-700";
+  if (highlight) {
+    backgroundColor = "bg-gray-300 dark:bg-gray-800";
+  }
+  if (highlightNumber) {
+    backgroundColor = "bg-gray-400 dark:bg-gray-600";
+  }
+  if (conflict) {
+    backgroundColor = "bg-red-300 dark:bg-red-900";
+  }
+
+  let borderColor = "border-transparent";
+  if (active) {
+    borderColor = "border-teal-400 dark:border-teal-600";
+    if (notesMode) {
+      borderColor = "border-sky-400 dark:border-sky-600";
+    }
+  }
+
+  const dimensions = {
+    width: `${bounds.width}%`,
+    height: `${bounds.height}%`,
+    top: `${bounds.top}%`,
+    left: `${bounds.left}%`,
+  };
+
   return (
-    <div
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick();
-      }}
-      onContextMenu={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onRightClick();
-      }}
-      style={{
-        width: `${bounds.width}%`,
-        height: `${bounds.height}%`,
-        top: `${bounds.top}%`,
-        left: `${bounds.left}%`,
-      }}
-      className={clsx(
-        "absolute z-0 bg-opacity-50 transition-colors duration-0 hover:z-20 hover:border-2 hover:bg-opacity-50",
-        {
-          "hover:border-sky-400 hover:bg-gray-300": notesMode,
-          "hover:border-teal-400 hover:bg-gray-300": !notesMode,
-          "duration-300 bg-gray-400": highlightNumber && !conflict && !active,
-          "duration-300 bg-gray-300": highlight && !conflict && !active,
-          "z-20 border-2 border-sky-400 bg-gray-300": active && notesMode,
-          "z-20 border-2 border-teal-400 bg-gray-300": active && !notesMode,
-          "z-20 border-2 border-red-400 bg-red-300": active && conflict,
-          "duration-300 bg-red-300 hover:border-red-400 hover:bg-red-300": conflict,
-        },
-      )}
-    />
+    <>
+      <div style={dimensions} className={clsx("absolute z-20 border-2", borderColor)} />
+      <div
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClick();
+        }}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onRightClick();
+        }}
+        style={dimensions}
+        className={clsx("absolute z-0 bg-opacity-50 transition-colors duration-0 hover:bg-opacity-50", backgroundColor)}
+      />
+    </>
   );
 };
 
@@ -154,10 +160,10 @@ export const GridCellNumber = ({
         top: `${top}%`,
       }}
       className={clsx("pointer-events-none absolute z-20 -translate-x-1/2 -translate-y-1/2 text-lg font-bold", {
-        "text-black": initial,
-        "text-amber-600": highlight && !conflict && !conflict,
+        "text-black dark:text-white": initial,
+        "text-amber-600": highlight && !conflict,
         "text-teal-600": !initial && !highlight && !conflict,
-        "text-red-600": conflict && !initial,
+        "text-red-600 dark:text-red-300": conflict && !initial,
       })}
     >
       {children}

diff --git a/src/components/pages/Game/Sudoku/Sudoku.tsx b/src/components/pages/Game/Sudoku/Sudoku.tsx
@@ -10,7 +10,6 @@ import {
   GridCellNumber,
   CellNote,
   CellNoteContainer,
-  SudokuContainer,
 } from "src/components/pages/Game/Sudoku/Sudoku.styles";
 import SudokuGame from "src/sudoku-game/SudokuGame";
 import {Bounds} from "src/utils/types";
@@ -188,7 +187,7 @@ export class Sudoku extends React.PureComponent<SudokuProps> {
     };
 
     return (
-      <SudokuContainer>
+      <div className="absolute h-full w-full rounded-sm bg-white">
         {wonGame && (
           <div className="absolute top-0 bottom-0 right-0 left-0 z-30 flex items-center justify-center rounded-sm bg-white bg-opacity-80 text-black">
             <div className="grid gap-8">
@@ -293,7 +292,7 @@ export class Sudoku extends React.PureComponent<SudokuProps> {
             </MenuWrapper>
           </MenuContainer>
         ) : null}
-      </SudokuContainer>
+      </div>
     );
   }
 }
diff --git a/src/components/pages/Game/index.tsx b/src/components/pages/Game/index.tsx
@@ -98,7 +98,7 @@ const CenteredContinueButton = styled.div<{visible: boolean}>`
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 1;
+  z-index: 30;
 
   &:hover {
     cursor: pointer;

diff --git a/src/main.css b/src/main.css
@@ -3,7 +3,7 @@
 @import "tailwindcss/utilities";
 
 body {
-  @apply bg-gray-800;
+  @apply bg-gray-800 dark:bg-gray-900;
 }
 
 html, body, #root {

diff --git a/src/state/sudoku.ts b/src/state/sudoku.ts
@@ -111,6 +111,7 @@ export const emptyGrid: Cell[] = simpleSudokuToCells([
   [0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0],
 ]);
 
 export const INITIAL_SUDOKU_STATE: SudokuState = {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: "selector",
   mode: "jit",
   content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
   plugins: [require("@tailwindcss/forms")],