From e1027ddc7017497ec394ef6c94d718e2ef771490 Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Wed, 9 Mar 2022 14:12:53 +0100
Subject: [PATCH] only showing monkey during the test closes #2659

---
 frontend/src/scripts/config.ts          |  5 -----
 frontend/src/scripts/test/monkey.ts     | 28 +++++++++++++++++++++++++
 frontend/src/scripts/test/test-logic.ts |  5 +++++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/scripts/config.ts b/frontend/src/scripts/config.ts
index a976ea2c8..5b99112d5 100644
--- a/frontend/src/scripts/config.ts
+++ b/frontend/src/scripts/config.ts
@@ -1305,11 +1305,6 @@ export function setMonkey(monkey: boolean, nosave?: boolean): boolean {
   if (!isConfigValueValid("monkey", monkey, ["boolean"])) return false;
 
   config.monkey = monkey;
-  if (config.monkey) {
-    $("#monkey").removeClass("hidden");
-  } else {
-    $("#monkey").addClass("hidden");
-  }
   saveToLocalStorage("monkey", nosave);
   ConfigEvent.dispatch("monkey", config.monkey);
 
diff --git a/frontend/src/scripts/test/monkey.ts b/frontend/src/scripts/test/monkey.ts
index d0d4e4efe..e35742a30 100644
--- a/frontend/src/scripts/test/monkey.ts
+++ b/frontend/src/scripts/test/monkey.ts
@@ -1,5 +1,17 @@
 import { mapRange } from "../misc";
 import Config from "../config";
+import * as ConfigEvent from "../observables/config-event";
+import * as TestActive from "../states/test-active";
+
+ConfigEvent.subscribe((eventKey) => {
+  if (eventKey === "monkey" && TestActive.get()) {
+    if (Config.monkey) {
+      $("#monkey").removeClass("hidden");
+    } else {
+      $("#monkey").addClass("hidden");
+    }
+  }
+});
 
 let left = false;
 let right = false;
@@ -79,3 +91,19 @@ export function stop(): void {
   }
   update();
 }
+
+export function show(): void {
+  if (!Config.monkey) return;
+  $("#monkey")
+    .css("opacity", 0)
+    .removeClass("hidden")
+    .animate({ opacity: 1 }, 125);
+}
+
+export function hide(): void {
+  $("#monkey")
+    .css("opacity", 1)
+    .animate({ opacity: 1 }, 125, () => {
+      $("#monkey").addClass("hidden");
+    });
+}
diff --git a/frontend/src/scripts/test/test-logic.ts b/frontend/src/scripts/test/test-logic.ts
index 702026958..83b0cc46d 100644
--- a/frontend/src/scripts/test/test-logic.ts
+++ b/frontend/src/scripts/test/test-logic.ts
@@ -47,6 +47,7 @@ import * as PageTransition from "../states/page-transition";
 import * as ConfigEvent from "../observables/config-event";
 import * as TimerEvent from "../observables/timer-event";
 import * as Last10Average from "../elements/last-10-average";
+import * as Monkey from "./monkey";
 import NodeObjectHash from "node-object-hash";
 
 const objecthash = NodeObjectHash().hash;
@@ -260,6 +261,7 @@ export function startTest(): boolean {
   LiveBurst.show();
   TimerProgress.update();
   TestTimer.clear();
+  Monkey.show();
 
   if (Config.funbox === "memory") {
     Funbox.resetMemoryTimer();
@@ -377,6 +379,8 @@ export function restart(
   Replay.pauseReplay();
   TestInput.setBailout(false);
   PaceCaret.reset();
+  Monkey.hide();
+
   if (Config.showAvg) Last10Average.update();
   $("#showWordHistoryButton").removeClass("loaded");
   $("#restartTestButton").blur();
@@ -1359,6 +1363,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
   OutOfFocus.hide();
   TestTimer.clear();
   Funbox.clear();
+  Monkey.hide();
 
   //need one more calculation for the last word if test auto ended
   if (TestInput.burstHistory.length !== TestInput.input.getHistory().length) {