Show previousCompletedPhraseAsTyped

didoesdigital · Jun 20, 2022 · e93d24e · e93d24e
1 parent ada0194
commit e93d24e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/src/pages/games/SHUFL/SHUFLGame.jsx b/src/pages/games/SHUFL/SHUFLGame.jsx
@@ -28,6 +28,8 @@ export default function SHUFLGame({
   const [rightAnswers, setRightAnswers] = useState([]);
   const [typedText, setTypedText] = useState("");
   const [currentStroke, setCurrentStroke] = useState("");
+  const [previousCompletedPhraseAsTyped, setPreviousCompletedPhraseAsTyped] =
+    useState("");
   const [showHint, setShowHint] = useState(false);
   const [state, dispatch] = useReducer(
     gameReducer,
@@ -52,6 +54,7 @@ export default function SHUFLGame({
     if (rightAnswers.includes(inputText.trim())) {
       updateMetWords(inputText);
       setTypedText("");
+      setPreviousCompletedPhraseAsTyped(inputText);
       const pickedWord = pickAWord(material);
       setPuzzleText(shuffleWord(pickedWord));
       setCurrentStroke(
@@ -83,8 +86,10 @@ export default function SHUFLGame({
             </div>
             <SHUFLPuzzle puzzleText={puzzleText} />
             <SHUFLInput
-              typedText={typedText}
               onChangeSHUFLInput={onChangeSHUFLInput}
+              previousCompletedPhraseAsTyped={previousCompletedPhraseAsTyped}
+              round={state.roundIndex + 1}
+              typedText={typedText}
             />
             <SHUFLHint
               currentStroke={currentStroke}

diff --git a/src/pages/games/SHUFL/SHUFLInput.jsx b/src/pages/games/SHUFL/SHUFLInput.jsx
@@ -1,7 +1,14 @@
 import React, { useEffect, useRef } from "react";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 
-export default function SHUFLInput({ typedText, onChangeSHUFLInput }) {
+export default function SHUFLInput({
+  onChangeSHUFLInput,
+  previousCompletedPhraseAsTyped,
+  round,
+  typedText,
+}) {
   const SHUFLInput = useRef(null);
+
   useEffect(() => {
     if (SHUFLInput) {
       SHUFLInput.current.focus();
@@ -21,21 +28,41 @@ export default function SHUFLInput({ typedText, onChangeSHUFLInput }) {
       >
         Enter the correct word:
       </label>
-      <textarea
-        ref={SHUFLInput}
-        autoCapitalize="off"
-        autoComplete="off"
-        autoCorrect="off"
-        className={
-          "input-textarea typed-text-input-positioning typed-text-input-textarea text-center"
-        }
-        id="SHUFL-input"
-        onChange={onChangeTypedText}
-        rows="1"
-        spellCheck="false"
-        value={typedText}
-        wrap="off"
-      ></textarea>
+      <div className="relative">
+        <samp className="pointer-none absolute absolute--fill w-100">
+          <TransitionGroup
+            className={"dib flex justify-center"}
+            component={"span"}
+            key={round}
+          >
+            <CSSTransition timeout={50000} classNames="dissolve" appear={true}>
+              <kbd
+                className={
+                  "color-success successfully-typed-text typed-text-input-positioning pre relative text-center"
+                }
+                aria-hidden="true"
+              >
+                {previousCompletedPhraseAsTyped}
+              </kbd>
+            </CSSTransition>
+          </TransitionGroup>
+        </samp>
+        <textarea
+          ref={SHUFLInput}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          className={
+            "input-textarea typed-text-input-positioning typed-text-input-textarea text-center"
+          }
+          id="SHUFL-input"
+          onChange={onChangeTypedText}
+          rows="1"
+          spellCheck="false"
+          value={typedText}
+          wrap="off"
+        ></textarea>
+      </div>
     </>
   );
 }