added popout animation for input letters

src/components/WordsGuesser/Guess/index.module.scss

@@ -2,6 +2,10 @@ $reveal-anim-duration-ms: 500;
 $reveal-anim-duration: #{$reveal-anim-duration-ms}ms;
 $reveal-anim-timing-function: ease-in-out;
 
+$popout-anim-duration-ms: 150;
+$popout-anim-duration: #{$popout-anim-duration-ms}ms;
+$popout-anim-timing-function: ease;
+
 @keyframes reveal-anim {
     0% {
         transform: scaleY(1);
@@ -16,6 +20,16 @@ $reveal-anim-timing-function: ease-in-out;
     }
 }
 
+@keyframes popout-anim {
+    0% {
+        transform: scale(1.15);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
 @for $i from 1 through 6 {
     .lettersContainer .reveal:nth-child(#{$i}n) {
         animation-delay: #{($i - 1) * $reveal-anim-duration-ms}ms;
@@ -76,6 +90,9 @@ $reveal-anim-timing-function: ease-in-out;
 
     &.guessedLetter {
         border-color: var(--color-letter-filled-border);
+        animation: popout-anim $popout-anim-duration;
+        animation-iteration-count: 1;
+        animation-timing-function: $popout-anim-timing-function;
     }
 
     &.selected {

src/components/WordsGuesser/index.tsx

@@ -125,8 +125,16 @@ const WordsGuesser = () => {
           && e.key.length === 1
           && e.key.match(/[a-z]/i)
         ) {
-          addLetterToCurrentGuess(e.key, selectedIdx)
-          setSelectedIdx(undefined)
+          if (selectedIdx !== undefined) {
+            removeLetterFromCurrentGuess(selectedIdx)
+            setTimeout(() => {
+              addLetterToCurrentGuess(e.key, selectedIdx)
+            }, 10)
+            setSelectedIdx(undefined)
+          } else {
+            addLetterToCurrentGuess(e.key, selectedIdx)
+            setSelectedIdx(undefined)
+          }
         }
     }
   }, [lastGuess, currentGuess, currentGuessString, numberOfEmptyLetters, selectedIdx, wordsSet])