feat: initial arrow funbox (#2203) by vastus

* feat: initial arrow funbox

* feat: arrows icons arrowkey input and non repeating arrows

Co-authored-by: Jack <bartnikjack@gmail.com>

src/js/config.js

@@ -938,7 +938,8 @@ export function setHighlightMode(mode, nosave) {
       config.funbox === "read_ahead" ||
       config.funbox === "read_ahead_easy" ||
       config.funbox === "read_ahead_hard" ||
-      config.funbox === "tts")
+      config.funbox === "tts" ||
+      config.funbox === "arrows")
   ) {
     Notifications.add("Can't use word highlight with this funbox", 0);
     return;

src/js/input-controller.js

@@ -77,7 +77,7 @@ function backspaceToPrevious() {
 
   TestLogic.input.current = TestLogic.input.popHistory();
   TestLogic.corrected.popHistory();
-  if (Config.funbox === "nospace") {
+  if (Config.funbox === "nospace" || Config.funbox === "arrows") {
     TestLogic.input.current = TestLogic.input.current.slice(0, -1);
   }
   TestLogic.words.decreaseCurrentIndex();
@@ -146,12 +146,12 @@ function handleSpace() {
     Caret.updatePosition();
     TestStats.incrementKeypressCount();
     TestStats.pushKeypressWord(TestLogic.words.currentIndex);
-    if (Config.funbox !== "nospace") {
+    if (Config.funbox !== "nospace" && Config.funbox !== "arrows") {
       Sound.playClick(Config.playSoundOnClick);
     }
     Replay.addReplayEvent("submitCorrectWord");
   } else {
-    if (Config.funbox !== "nospace") {
+    if (Config.funbox !== "nospace" && Config.funbox !== "arrows") {
       if (!Config.playSoundOnError || Config.blindMode) {
         Sound.playClick(Config.playSoundOnClick);
       } else {
@@ -296,6 +296,21 @@ function isCharCorrect(char, charIndex) {
     }
   }
 
+  if (Config.funbox === "arrows") {
+    if ((char === "w" || char === "ArrowUp") && originalChar == "↑") {
+      return true;
+    }
+    if ((char === "s" || char === "ArrowDown") && originalChar == "↓") {
+      return true;
+    }
+    if ((char === "a" || char === "ArrowLeft") && originalChar == "←") {
+      return true;
+    }
+    if ((char === "d" || char === "ArrowRight") && originalChar == "→") {
+      return true;
+    }
+  }
+
   if (char === "’" && originalChar == "'") {
     return true;
   }
@@ -532,7 +547,7 @@ function handleChar(char, charIndex) {
 
   //simulate space press in nospace funbox
   if (
-    (Config.funbox === "nospace" &&
+    ((Config.funbox === "nospace" || Config.funbox === "arrows") &&
       TestLogic.input.current.length === TestLogic.words.getCurrent().length) ||
     (char === "\n" && thisCharCorrect)
   ) {
@@ -736,8 +751,19 @@ $(document).keydown((event) => {
   if (Config.oppositeShiftMode !== "off") {
     correctShiftUsed = ShiftTracker.isUsingOppositeShift(event) !== false;
   }
-
-  if (
+  if (Config.funbox === "arrows") {
+    let char = event.key;
+    if (["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(char)) {
+      if (char === "ArrowLeft") char = "a";
+      if (char === "ArrowRight") char = "d";
+      if (char === "ArrowDown") char = "s";
+      if (char === "ArrowUp") char = "w";
+      event.preventDefault();
+      handleChar(char, TestLogic.input.current.length);
+      updateUI();
+      setWordsInput(" " + TestLogic.input.current);
+    }
+  } else if (
     Config.layout !== "default" &&
     !(
       event.ctrlKey ||

src/js/test/funbox.js

@@ -116,6 +116,7 @@ export async function activate(funbox) {
   }
   $("#funBoxTheme").attr("href", ``);
   $("#words").removeClass("nospace");
+  $("#words").removeClass("arrows");
   // if (funbox === "none") {
 
   reset();
@@ -230,6 +231,15 @@ export async function activate(funbox) {
       );
       UpdateConfig.setHighlightMode("letter", true);
       TestLogic.restart(false, true);
+    } else if (funbox === "arrows") {
+      $("#words").addClass("arrows");
+      rememberSetting(
+        "highlightMode",
+        Config.highlightMode,
+        UpdateConfig.setHighlightMode
+      );
+      UpdateConfig.setHighlightMode("letter", true);
+      TestLogic.restart(false, true);
     }
   }
 

src/js/test/test-logic.js

@@ -898,6 +898,21 @@ export async function init() {
             }
           }
           randomWord = randomcaseword;
+        } else if (Config.funbox === "arrows") {
+          let arrowWord = "";
+          let arrowArray = ["←", "↑", "→", "↓"];
+          let lastchar;
+          for (let i = 0; i < 5; i++) {
+            let random =
+              arrowArray[Math.floor(Math.random() * arrowArray.length)];
+            while (random === lastchar) {
+              random =
+                arrowArray[Math.floor(Math.random() * arrowArray.length)];
+            }
+            lastchar = random;
+            arrowWord += random;
+          }
+          randomWord = arrowWord;
         } else if (Config.funbox === "gibberish") {
           randomWord = Misc.getGibberish();
         } else if (Config.funbox === "58008") {
@@ -1114,7 +1129,7 @@ export function calculateWpmAndRaw() {
   if (words.getCurrent() == input.current) {
     correctWordChars += input.current.length;
   }
-  if (Config.funbox === "nospace") {
+  if (Config.funbox === "nospace" || Config.funbox === "arrows") {
     spaces = 0;
   }
   chars += input.current.length;

src/js/test/test-stats.js

@@ -400,7 +400,7 @@ function countChars() {
       spaces++;
     }
   }
-  if (Config.funbox === "nospace") {
+  if (Config.funbox === "nospace" || Config.funbox === "arrows") {
     spaces = 0;
     correctspaces = 0;
   }

src/js/test/test-ui.js

@@ -92,7 +92,20 @@ function getWordHTML(word) {
   let newlineafter = false;
   let retval = `<div class='word'>`;
   for (let c = 0; c < word.length; c++) {
-    if (word.charAt(c) === "\t") {
+    if (Config.funbox === "arrows") {
+      if (word.charAt(c) === "↑") {
+        retval += `<letter><i class="fas fa-arrow-up"></i></letter>`;
+      }
+      if (word.charAt(c) === "↓") {
+        retval += `<letter><i class="fas fa-arrow-down"></i></letter>`;
+      }
+      if (word.charAt(c) === "←") {
+        retval += `<letter><i class="fas fa-arrow-left"></i></letter>`;
+      }
+      if (word.charAt(c) === "→") {
+        retval += `<letter><i class="fas fa-arrow-right"></i></letter>`;
+      }
+    } else if (word.charAt(c) === "\t") {
       retval += `<letter class='tabChar'><i class="fas fa-long-arrow-alt-right"></i></letter>`;
     } else if (word.charAt(c) === "\n") {
       newlineafter = true;
@@ -331,7 +344,20 @@ export function updateWordElement(showError = !Config.blindMode) {
       let currentLetter = currentWord[i];
       let tabChar = "";
       let nlChar = "";
-      if (currentLetter === "\t") {
+      if (Config.funbox === "arrows") {
+        if (currentLetter === "↑") {
+          currentLetter = `<i class="fas fa-arrow-up"></i>`;
+        }
+        if (currentLetter === "↓") {
+          currentLetter = `<i class="fas fa-arrow-down"></i>`;
+        }
+        if (currentLetter === "←") {
+          currentLetter = `<i class="fas fa-arrow-left"></i>`;
+        }
+        if (currentLetter === "→") {
+          currentLetter = `<i class="fas fa-arrow-right"></i>`;
+        }
+      } else if (currentLetter === "\t") {
         tabChar = "tabChar";
         currentLetter = `<i class="fas fa-long-arrow-alt-right"></i>`;
       } else if (currentLetter === "\n") {
@@ -397,7 +423,20 @@ export function updateWordElement(showError = !Config.blindMode) {
       : input.length;
     if (inputWithSingleComposeLength < currentWord.length) {
       for (let i = inputWithSingleComposeLength; i < currentWord.length; i++) {
-        if (currentWord[i] === "\t") {
+        if (Config.funbox === "arrows") {
+          if (currentWord[i] === "↑") {
+            ret += `<letter><i class="fas fa-arrow-up"></i></letter>`;
+          }
+          if (currentWord[i] === "↓") {
+            ret += `<letter><i class="fas fa-arrow-down"></i></letter>`;
+          }
+          if (currentWord[i] === "←") {
+            ret += `<letter><i class="fas fa-arrow-left"></i></letter>`;
+          }
+          if (currentWord[i] === "→") {
+            ret += `<letter><i class="fas fa-arrow-right"></i></letter>`;
+          }
+        } else if (currentWord[i] === "\t") {
           ret += `<letter class='tabChar'><i class="fas fa-long-arrow-alt-right"></i></letter>`;
         } else if (currentWord[i] === "\n") {
           ret += `<letter class='nlChar'><i class="fas fa-angle-down"></i></letter>`;

src/sass/test.scss

@@ -334,6 +334,15 @@
   }
 }
 
+#words.arrows {
+  .word {
+    margin: 0.5rem 0;
+    letter {
+      margin: 0 0.25rem;
+    }
+  }
+}
+
 .word.error {
   /*   margin-bottom: 1px; */
   border-bottom: 2px solid var(--error-color);

static/funbox/_list.json

@@ -54,6 +54,11 @@
     "type": "script",
     "info": "Anvbuefl dizzs eoos alsb?"
   },
+  {
+    "name": "arrows",
+    "type": "script",
+    "info": "Dance Dance Revolution!"
+  },
   {
     "name": "58008",
     "type": "script",