booring bugfixes

gulpfile.js

@@ -90,6 +90,7 @@ const refactoredSrc = [
   "./src/js/dom-util.js",
   "./src/js/cloud-functions.js",
   "./src/js/misc.js",
+  "./src/js/monkey.js",
 ];
 
 //legacy files

src/js/commandline.js

@@ -687,6 +687,14 @@ let commands = {
         }, 150);
       },
     },
+    {
+      id: "toggleMonkey",
+      display: "Toggle Monkey",
+      visible: false,
+      exec: () => {
+        $("#monkey").toggleClass("hidden");
+      },
+    },
   ],
 };
 

src/js/global-dependencies.js

@@ -22,3 +22,4 @@ import {
 import { showBackgroundLoader, hideBackgroundLoader } from "./dom-util";
 import * as Misc from "./misc";
 import * as CloudFunctions from "./cloud-functions";
+import * as Monkey from "./monkey";

src/js/monkey.js

@@ -0,0 +1,44 @@
+let left = false;
+let right = false;
+let elements = {
+  "00": document.querySelector("#monkey .up"),
+  10: document.querySelector("#monkey .left"),
+  "01": document.querySelector("#monkey .right"),
+  11: document.querySelector("#monkey .both"),
+};
+let last = "right";
+// 0 up
+// 1 down
+
+export function type() {
+  if (!left && last == "right") {
+    left = true;
+    last = "left";
+  } else if (!right) {
+    right = true;
+    last = "right";
+  }
+  update();
+}
+
+export function stop() {
+  if (left) {
+    left = false;
+  } else if (right) {
+    right = false;
+  }
+  update();
+}
+
+function update() {
+  if (!document.querySelector("#monkey").classList.contains("hidden")) {
+    Object.keys(elements).forEach((key) => {
+      elements[key].classList.add("hidden");
+    });
+
+    let id = left ? "1" : "0";
+    id += right ? "1" : "0";
+
+    elements[id].classList.remove("hidden");
+  }
+}

src/js/script.js

@@ -4418,6 +4418,8 @@ $(document).keydown((event) => {
     keypressStats.spacing.current = now;
   }
 
+  Monkey.type();
+
   //tab
   if (
     (event.key == "Tab" && !config.swapEscAndTab) ||
@@ -4990,6 +4992,7 @@ $(document).keyup((event) => {
     keypressStats.duration.array.push(diff);
   }
   keypressStats.duration.current = now;
+  Monkey.stop();
 });
 
 window.addEventListener("beforeunload", (event) => {

src/sass/style.scss

@@ -3091,6 +3091,29 @@ key {
   opacity: 0;
 }
 
+#monkey {
+  width: 308px;
+  height: 0;
+  margin: 0 auto;
+  div {
+    height: 200px;
+    width: 308px;
+    position: fixed;
+  }
+  .up {
+    background-image: url("../m3.png");
+  }
+  .left {
+    background-image: url("../m1.png");
+  }
+  .right {
+    background-image: url("../m2.png");
+  }
+  .both {
+    background-image: url("../m4.png");
+  }
+}
+
 .keymap {
   .keymap-split-spacer,
   .keymap-stagger-split-spacer,

static/index.html

@@ -962,6 +962,12 @@
               <div id="wordsWrapper">
                 <div id="words" class="size15"></div>
               </div>
+              <div id="monkey" class="hidden">
+                <div class="up"></div>
+                <div class="left hidden"></div>
+                <div class="right hidden"></div>
+                <div class="both hidden"></div>
+              </div>
               <div class="keymap hidden">
                 <div class="row r1">
                   <div></div>