diff --git a/src/components/Board.js b/src/components/Board.js index 2e96f16..8361ad5 100644 --- a/src/components/Board.js +++ b/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) { diff --git a/src/logic/gameReducer.js b/src/logic/gameReducer.js index f3e8088..7979d1e 100644 --- a/src/logic/gameReducer.js +++ b/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.