convert unclickable inside the react tree

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>
+  );
+}

src/Exploits/unclickable.ts

@@ -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);
-}