more cleanup in engine

src/Programs/ProgramHelpers.js

@@ -3,19 +3,6 @@ import { Programs } from "./Programs";
 import { Player } from "../Player";
 import { createElement } from "../../utils/uiHelpers/createElement";
 
-// this has the same key as 'Programs', not program names
-const aLinks = {};
-
-function displayCreateProgramContent() {
-  for (const key in aLinks) {
-    const p = Programs[key];
-    aLinks[key].style.display = "none";
-    if (!Player.hasProgram(p.name) && p.create.req(Player)) {
-      aLinks[key].style.display = "inline-block";
-    }
-  }
-}
-
 //Returns the number of programs that are currently available to be created
 function getNumAvailableCreateProgram() {
   var count = 0;
@@ -46,29 +33,4 @@ function getNumAvailableCreateProgram() {
   return count;
 }
 
-function initCreateProgramButtons() {
-  const createProgramList = document.getElementById("create-program-list");
-  for (const key in Programs) {
-    if (Programs[key].create === null) {
-      continue;
-    }
-    const elem = createElement("a", {
-      class: "a-link-button",
-      id: Programs[key].htmlID(),
-      innerText: Programs[key].name,
-      tooltip: Programs[key].create.tooltip,
-    });
-    aLinks[key] = elem;
-    createProgramList.appendChild(elem);
-  }
-
-  for (const key in aLinks) {
-    const p = Programs[key];
-    aLinks[key].addEventListener("click", function () {
-      Player.startCreateProgramWork(p.name, p.create.time, p.create.level);
-      return false;
-    });
-  }
-}
-
-export { displayCreateProgramContent, getNumAvailableCreateProgram, initCreateProgramButtons };
+export { getNumAvailableCreateProgram };

src/Programs/ui/ProgramsRoot.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Programs } from "../Programs";
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function ProgramsRoot(props: IProps): React.ReactElement {
+  const setRerender = useState(false)[1];
+  function rerender(): void {
+    setRerender((old) => !old);
+  }
+  const [divisionName, setDivisionName] = useState("Overview");
+
+  useEffect(() => {
+    const id = setInterval(rerender, 20);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <>
+      <p id="create-program-page-text">
+        This page displays any programs that you are able to create. Writing the code for a program takes time, which
+        can vary based on how complex the program is. If you are working on creating a program you can cancel at any
+        time. Your progress will be saved and you can continue later.
+      </p>
+
+      <ul id="create-program-list">
+        {Object.keys(Programs).map((programName) => {
+          const program = Programs[programName];
+          if (program == null) return <></>;
+          const create = program.create;
+          if (create === null) return <></>;
+          return (
+            <a
+              key={programName}
+              className="a-link-button tooltip"
+              onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)}
+            >
+              {program.name}
+              <span className="tooltiptext">{create.tooltip}</span>
+            </a>
+          );
+        })}
+      </ul>
+    </>
+  );
+}