diff --git a/src/components/pages/Game/GameControls/GameControlNumbers.tsx b/src/components/pages/Game/GameControls/GameControlNumbers.tsx index f1a2cf7..cc60185 100644 --- 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 { 9, + "bg-red-400": this.props.showOccurrences && occurrences > 9, })} onClick={setNumberOrNote} key={n} > -
- {occurrences} -
+ {this.props.showOccurrences && ( +
+ {occurrences} +
+ )} {n}
); diff --git a/src/components/pages/Game/index.tsx b/src/components/pages/Game/index.tsx index 3eebc49..d1592bc 100644 --- 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 { {"Highlight conflicts"} - {"Show circle menu when a cell is selected (desktop only)"} + {"Show circle menu when a cell is clicked (desktop only)"} + + + {"Show occurrences of numbers in number buttons"} diff --git a/src/state/game.ts b/src/state/game.ts index 20a0934..647ca0b 100644 --- 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,