support letter removal

src/components/Board.js

@@ -28,14 +28,17 @@ function Letter({letter, letterAvailability, index, dispatchGameState}) {
   function handlePointerEnter(e, index, letterAvailability) {
     e.preventDefault();
     if (!letterAvailability) {
-      return;
+      dispatchGameState({
+        action: "removeLetter",
+        letterIndex: index,
+      });
+    } else {
+      // Add the letter to the list of letters
+      dispatchGameState({
+        action: "addLetter",
+        letterIndex: index,
+      });
     }
-
-    // Add the letter to the list of letters
-    dispatchGameState({
-      action: "addLetter",
-      letterIndex: index,
-    });
   }
 
   function handlePointerUp(e) {

src/logic/gameReducer.js

@@ -46,6 +46,26 @@ export function gameReducer(currentGameState, payload) {
       playedIndexes: newPlayedIndexes,
       result: "",
     };
+  } else if (payload.action === "removeLetter") {
+    if (!currentGameState.wordInProgress) {
+      return currentGameState;
+    }
+    // Don't remove a letter if the player didn't go back to the letter before the last letter
+    let newPlayedIndexes = [...currentGameState.playedIndexes];
+    const lastIndexPlayed = newPlayedIndexes[newPlayedIndexes.length - 2];
+    if (lastIndexPlayed !== payload.letterIndex) {
+      return currentGameState;
+    }
+
+    newPlayedIndexes = currentGameState.playedIndexes.slice(
+      0,
+      newPlayedIndexes.length - 1
+    );
+
+    return {
+      ...currentGameState,
+      playedIndexes: newPlayedIndexes,
+    };
   } else if (payload.action === "endWord") {
     // Since we end the word on board up or on app up (in case the user swipes off the board), we can end up calling this case twice.
     // Return early if we no longer have a word in progress.