feat: make show occurrences a feature

TN1ck · Apr 27, 2024 · bd7e76a · bd7e76a
1 parent 8ef99da
commit bd7e76a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/components/pages/Game/GameControls/GameControlNumbers.tsx b/src/components/pages/Game/GameControls/GameControlNumbers.tsx
@@ -19,6 +19,7 @@ const NumberButton = styled(Button).attrs({
 export interface SudokuMenuNumbersStateProps {
   notesMode: boolean;
   activeCell: CellCoordinates;
+  showOccurrences: boolean;
   sudoku: SudokuState;
 }
 
@@ -30,6 +31,7 @@ export interface SudokuMenuNumbersDispatchProps {
 const connector = connect(
   (state: RootState) => ({
     notesMode: state.game.notesMode,
+    showOccurrences: state.game.showOccurrences,
     activeCell: state.game.activeCellCoordinates,
     sudoku: state.sudoku,
   }),
@@ -58,14 +60,16 @@ class SudokuMenuNumbers extends React.Component<PropsFromRedux> {
             <NumberButton
               className={clsx("relative font-bold", {
                 "bg-gray-400": occurrences == 9,
-                "bg-red-400": occurrences > 9,
+                "bg-red-400": this.props.showOccurrences && occurrences > 9,
               })}
               onClick={setNumberOrNote}
               key={n}
             >
-              <div className="absolute right-0 bottom-0 h-3 w-3 rounded-xl bg-teal-700 text-xxs text-white opacity-70 sm:right-1 sm:bottom-1 sm:h-4 sm:w-4 sm:text-xs ">
-                {occurrences}
-              </div>
+              {this.props.showOccurrences && (
+                <div className="absolute right-0 bottom-0 h-3 w-3 rounded-xl bg-teal-700 text-xxs text-white opacity-70 sm:right-1 sm:bottom-1 sm:h-4 sm:w-4 sm:text-xs ">
+                  {occurrences}
+                </div>
+              )}
               {n}
             </NumberButton>
           );

diff --git a/src/components/pages/Game/index.tsx b/src/components/pages/Game/index.tsx
@@ -14,6 +14,7 @@ import {
   toggleShowCircleMenu,
   toggleShowWrongEntries,
   toggleShowConflicts,
+  toggleShowOccurrences,
 } from "src/state/game";
 
 import {chooseGame} from "src/state/application";
@@ -196,6 +197,7 @@ const connector = connect(
     selectCell,
     hideMenu,
     toggleShowHints,
+    toggleShowOccurrences,
     toggleShowCircleMenu,
     toggleShowWrongEntries,
     toggleShowConflicts,
@@ -360,7 +362,14 @@ class Game extends React.Component<PropsFromRedux> {
                       {"Highlight conflicts"}
                     </Checkbox>
                     <Checkbox id="circle_menu" checked={game.showCircleMenu} onChange={this.props.toggleShowCircleMenu}>
-                      {"Show circle menu when a cell is selected (desktop only)"}
+                      {"Show circle menu when a cell is clicked (desktop only)"}
+                    </Checkbox>
+                    <Checkbox
+                      id="show_occurrences"
+                      checked={game.showOccurrences}
+                      onChange={this.props.toggleShowOccurrences}
+                    >
+                      {"Show occurrences of numbers in number buttons"}
                     </Checkbox>
                   </div>
                 </div>

diff --git a/src/state/game.ts b/src/state/game.ts
@@ -16,6 +16,7 @@ const SHOW_MENU = "game/SHOW_MENU";
 const HIDE_MENU = "game/HIDE_MENU";
 const SELECT_CELL = "game/SELECT_MENU";
 const TOGGLE_SHOW_HINTS = "game/TOGGLE_SHOW_HINTS";
+const TOGGLE_SHOW_OCCURRENCES = "game/TOGGLE_SHOW_OCCURRENCES";
 const TOGGLE_SHOW_CONFLICTS = "game/TOGGLE_SHOW_CONFLICTS";
 const TOGGLE_SHOW_CIRCLE_MENU = "game/TOGGLE_SHOW_CIRCLE_MENU";
 const TOGGLE_SHOW_WRONG_ENTRIES = "game/TOGGLE_SHOW_WRONG_ENTRIES";
@@ -115,6 +116,12 @@ export function toggleShowHints() {
   };
 }
 
+export function toggleShowOccurrences() {
+  return {
+    type: TOGGLE_SHOW_OCCURRENCES,
+  };
+}
+
 export function toggleShowWrongEntries() {
   return {
     type: TOGGLE_SHOW_WRONG_ENTRIES,
@@ -140,6 +147,7 @@ export interface GameState {
   showCircleMenu: boolean;
   showHints: boolean;
   showMenu: boolean;
+  showOccurrences: boolean;
   showWrongEntries: boolean;
   showConflicts: boolean;
   showNotes: boolean; // local overwrite
@@ -159,6 +167,7 @@ const INITIAL_GAME_STATE: GameState = {
   showCircleMenu: true,
   showHints: false,
   showConflicts: true,
+  showOccurrences: false,
   showWrongEntries: false,
   showMenu: false,
   showNotes: false,
@@ -198,6 +207,12 @@ export default function gameReducer(state: GameState = INITIAL_GAME_STATE, actio
         showHints: !state.showHints,
       };
     }
+    case TOGGLE_SHOW_OCCURRENCES: {
+      return {
+        ...state,
+        showOccurrences: !state.showOccurrences,
+      };
+    }
     case TOGGLE_SHOW_CIRCLE_MENU: {
       return {
         ...state,