From d49fea4cbcc73c772ffff80e155bc2f9db307b47 Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Sat, 25 Sep 2021 14:00:38 -0400
Subject: [PATCH] convert unclickable inside the react tree

---
 src/Exploits/Unclickable.tsx | 20 ++++++++++++++++++++
 src/Exploits/unclickable.ts  | 22 ----------------------
 src/engine.tsx               |  2 --
 src/index.html               |  3 ---
 src/ui/GameRoot.tsx          |  2 ++
 5 files changed, 22 insertions(+), 27 deletions(-)
 create mode 100644 src/Exploits/Unclickable.tsx
 delete mode 100644 src/Exploits/unclickable.ts

diff --git a/src/Exploits/Unclickable.tsx b/src/Exploits/Unclickable.tsx
new file mode 100644
index 000000000..3dbc2d004
--- /dev/null
+++ b/src/Exploits/Unclickable.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { use } from "../ui/Context";
+import { Exploit } from "./Exploit";
+
+export function Unclickable(): React.ReactElement {
+  const player = use.Player();
+
+  function unclickable(event: React.MouseEvent<HTMLDivElement>): void {
+    if (!event.target || !(event.target instanceof Element)) return;
+    const display = window.getComputedStyle(event.target as Element).display;
+    const visibility = window.getComputedStyle(event.target as Element).visibility;
+    if (display === "none" && visibility === "hidden" && event.isTrusted) player.giveExploit(Exploit.Unclickable);
+  }
+
+  return (
+    <div id="unclickable" onClick={unclickable} style={{ display: "none", visibility: "hidden" }}>
+      Click on this to upgrade your Source-File -1!
+    </div>
+  );
+}
diff --git a/src/Exploits/unclickable.ts b/src/Exploits/unclickable.ts
deleted file mode 100644
index 18eb73d44..000000000
--- a/src/Exploits/unclickable.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Player } from "../Player";
-import { Exploit } from "./Exploit";
-
-export function startUnclickable(): void {
-  function clickTheUnclickable(event: MouseEvent): void {
-    if (!event.target || !(event.target instanceof Element)) return;
-    const display = window.getComputedStyle(event.target as Element).display;
-    if (display === "none" && event.isTrusted) Player.giveExploit(Exploit.Unclickable);
-  }
-
-  function targetElement(): void {
-    const elem = document.getElementById("unclickable");
-    if (elem == null) {
-      console.error("Could not find the unclickable elem for the related exploit.");
-      return;
-    }
-    elem.addEventListener("click", clickTheUnclickable);
-    document.removeEventListener("DOMContentLoaded", targetElement);
-  }
-
-  document.addEventListener("DOMContentLoaded", targetElement);
-}
diff --git a/src/engine.tsx b/src/engine.tsx
index 4083b460d..e1be45dfd 100644
--- a/src/engine.tsx
+++ b/src/engine.tsx
@@ -46,7 +46,6 @@ import { dialogBoxCreate } from "../utils/DialogBox";
 import { exceptionAlert } from "../utils/helpers/exceptionAlert";
 
 import { startTampering } from "./Exploits/tampering";
-import { startUnclickable } from "./Exploits/unclickable";
 
 import React from "react";
 
@@ -270,7 +269,6 @@ const Engine: {
 
   load: function (saveString) {
     startTampering();
-    startUnclickable();
     // Load game from save or create new game
     if (loadGame(saveString)) {
       ThemeEvents.emit();
diff --git a/src/index.html b/src/index.html
index bf9e9d926..a66f84005 100644
--- a/src/index.html
+++ b/src/index.html
@@ -46,9 +46,6 @@
         <p id="status-text"></p>
       </div>
     </div>
-
-    <div id="modal-portal"></div>
-    <div id="unclickable" style="display: none">Click on this to upgrade your Source-File -1!</div>
   </body>
 
   <script src="src/ThirdParty/raphael.min.js"></script>
diff --git a/src/ui/GameRoot.tsx b/src/ui/GameRoot.tsx
index 41ccc8e57..a74225b49 100644
--- a/src/ui/GameRoot.tsx
+++ b/src/ui/GameRoot.tsx
@@ -65,6 +65,7 @@ import { BitverseRoot } from "../BitNode/ui/BitverseRoot";
 import { CharacterOverview } from "./React/CharacterOverview";
 import { BladeburnerCinematic } from "../Bladeburner/ui/BladeburnerCinematic";
 import { workerScripts } from "../Netscript/WorkerScripts";
+import { Unclickable } from "../Exploits/Unclickable";
 
 import { enterBitNode } from "../RedPill";
 import { Context } from "./Context";
@@ -390,6 +391,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
             </Box>
           </Box>
         )}
+        <Unclickable />
       </Context.Router.Provider>
     </Context.Player.Provider>
   );