Board hotkeys now work when board is not selected (#290)

Sudokuru · Apr 30, 2024 · d9d4000 · d9d4000
1 parent 07458f2
commit d9d4000
Showing 1 changed file with 73 additions and 51 deletions.
diff --git a/app/Components/Sudoku Board/SudokuBoard.tsx b/app/Components/Sudoku Board/SudokuBoard.tsx
@@ -433,65 +433,86 @@ const SudokuBoard = (props: SudokuBoardProps) => {
     ];
   };
 
+  /**
+   * When a user presses a key down, do the desired action
+   * @param event onKeyDown event for react-native-web documented here: https://necolas.github.io/react-native-web/docs/interactions/#keyboardevent-props-api
+   * @returns void
+   */
   const handleKeyDown = (event: any) => {
+    const inputValue = event.nativeEvent.key;
+
+    switch (inputValue) {
+      case "u":
+      case "U":
+        const isUndoButtonDisabled =
+          sudokuBoard.actionHistory == null ||
+          sudokuBoard.actionHistory.length == 0;
+        if (!isUndoButtonDisabled) {
+          undo();
+        }
+        return;
+      case "p":
+      case "P":
+        handlePause(sudokuBoard, navigation);
+        return;
+      case "t":
+      case "T":
+      case "n":
+      case "N":
+        toggleNoteMode();
+        return;
+      default:
+        break;
+    }
+
     if (sudokuBoard.selectedCell == null) {
       return;
     }
 
-    const inputValue = event.nativeEvent.key;
     if (/^[1-9]$/.test(inputValue)) {
       updateCellEntry(parseInt(inputValue, 10));
-    } else if (
-      inputValue == "Delete" ||
-      inputValue == "Backspace" ||
-      inputValue == "0" ||
-      inputValue == "e" ||
-      inputValue == "E" // e and E are for erase
-    ) {
-      eraseSelected();
-    } else if (inputValue == "u" || inputValue == "U") {
-      undo();
-    } else if (inputValue == "p" || inputValue == "P") {
-      handlePause(sudokuBoard, navigation);
-    } else if (
-      inputValue == "t" ||
-      inputValue == "T" ||
-      inputValue == "n" ||
-      inputValue == "N"
-    ) {
-      toggleNoteMode();
-    } else if (sudokuBoard.selectedCell) {
-      let newCol = sudokuBoard.selectedCell.c;
-      let newRow = sudokuBoard.selectedCell.r;
-      switch (inputValue) {
-        case "ArrowLeft":
-        case "a":
-        case "A":
-          newCol = wrapDigit(newCol - 1);
-          break;
-        case "ArrowRight":
-        case "d":
-        case "D":
-          newCol = wrapDigit(newCol + 1);
-          break;
-        case "ArrowUp":
-        case "w":
-        case "W":
-          newRow = wrapDigit(newRow - 1);
-          break;
-        case "ArrowDown":
-        case "s":
-        case "S":
-          newRow = wrapDigit(newRow + 1);
-          break;
-        default:
-          return;
-      }
-      setSudokuBoard({
-        ...sudokuBoard,
-        selectedCell: { r: newRow, c: newCol },
-      });
+      return;
+    }
+
+    let newCol = sudokuBoard.selectedCell.c;
+    let newRow = sudokuBoard.selectedCell.r;
+    switch (inputValue) {
+      case "Delete":
+      case "Backspace":
+      case "0":
+      case "e":
+      case "E":
+        eraseSelected();
+        return;
+      // below cases do not return to allow for update of selected cell
+      // todo create function for updating selectedCell for below cases to call
+      case "ArrowLeft":
+      case "a":
+      case "A":
+        newCol = wrapDigit(newCol - 1);
+        break;
+      case "ArrowRight":
+      case "d":
+      case "D":
+        newCol = wrapDigit(newCol + 1);
+        break;
+      case "ArrowUp":
+      case "w":
+      case "W":
+        newRow = wrapDigit(newRow - 1);
+        break;
+      case "ArrowDown":
+      case "s":
+      case "S":
+        newRow = wrapDigit(newRow + 1);
+        break;
+      default:
+        return;
     }
+    setSudokuBoard({
+      ...sudokuBoard,
+      selectedCell: { r: newRow, c: newCol },
+    });
   };
 
   const renderPuzzle = () => {
@@ -567,6 +588,7 @@ const SudokuBoard = (props: SudokuBoardProps) => {
   return (
     <View
       testID={"sudokuBoard"}
+      //@ts-ignore react-native-web types not supported: https://github.com/necolas/react-native-web/issues/1684
       onKeyDown={handleKeyDown}
       style={{
         alignItems: "center",