Factions list screen converted to React.

src/engine.jsx

@@ -32,6 +32,9 @@ import {
     processPassiveFactionRepGain,
     inviteToFaction,
 } from "./Faction/FactionHelpers";
+import {
+    FactionList,
+} from "./Faction/ui/FactionList";
 import { displayGangContent } from "./Gang/Helpers";
 import { displayInfiltrationContent } from "./Infiltration/Helper";
 import { 
@@ -200,9 +203,6 @@ $(document).keydown(function(e) {
 });
 
 const Engine = {
-    version: "",
-    Debug: true,
-
     // Clickable objects
     Clickables: {
         // Main menu buttons
@@ -304,8 +304,11 @@ const Engine = {
     loadFactionsContent: function() {
         Engine.hideAllContent();
         Engine.Display.factionsContent.style.display = "block";
-        Engine.displayFactionsInfo();
         routing.navigateTo(Page.Factions);
+        ReactDOM.render(
+            <FactionList player={Player} engine={this} />,
+            Engine.Display.factionsContent,
+        )
         MainMenuLinks.Factions.classList.add("active");
     },
 
@@ -514,6 +517,7 @@ const Engine = {
         Engine.Display.createProgramContent.style.display = "none";
 
         Engine.Display.factionsContent.style.display = "none";
+        ReactDOM.unmountComponentAtNode(Engine.Display.factionsContent);
 
         Engine.Display.factionContent.style.display = "none";
         ReactDOM.unmountComponentAtNode(Engine.Display.factionContent);
@@ -599,78 +603,6 @@ const Engine = {
         ReactDOM.render(CharacterInfo(Player), Engine.Display.characterInfo)
     },
 
-    // TODO Refactor this into Faction implementation
-    displayFactionsInfo: function() {
-        removeChildrenFromElement(Engine.Display.factionsContent);
-
-        // Factions
-        Engine.Display.factionsContent.appendChild(createElement("h1", {
-            innerText:"Factions",
-        }));
-        Engine.Display.factionsContent.appendChild(createElement("p", {
-            innerText:"Lists all factions you have joined",
-        }));
-        var factionsList = createElement("ul");
-        Engine.Display.factionsContent.appendChild(createElement("br"));
-
-        // Add a button for each faction you are a member of
-        for (var i = 0; i < Player.factions.length; ++i) {
-            (function () {
-                var factionName = Player.factions[i];
-
-                factionsList.appendChild(createElement("a", {
-                    class:"a-link-button", innerText:factionName, padding:"4px", margin:"4px",
-                    display:"inline-block",
-                    clickListener: () => {
-                        Engine.loadFactionContent();
-                        displayFactionContent(factionName);
-                        return false;
-                    },
-                }));
-                factionsList.appendChild(createElement("br"));
-            }()); // Immediate invocation
-        }
-        Engine.Display.factionsContent.appendChild(factionsList);
-        Engine.Display.factionsContent.appendChild(createElement("br"));
-
-        // Invited Factions
-        Engine.Display.factionsContent.appendChild(createElement("h1", {
-            innerText:"Outstanding Faction Invitations",
-        }));
-        Engine.Display.factionsContent.appendChild(createElement("p", {
-            width:"70%",
-            innerText:"Lists factions you have been invited to. You can accept " +
-                      "these faction invitations at any time.",
-        }));
-        var invitationsList = createElement("ul");
-
-        // Add a button to accept for each faction you have invitiations for
-        for (var i = 0; i < Player.factionInvitations.length; ++i) {
-            (function () {
-                var factionName = Player.factionInvitations[i];
-
-                var item = createElement("li", {padding:"6px", margin:"6px"});
-                item.appendChild(createElement("p", {
-                    innerText:factionName, display:"inline", margin:"4px", padding:"4px",
-                }));
-                item.appendChild(createElement("a", {
-                    innerText:"Accept Faction Invitation",
-                    class:"a-link-button", display:"inline", margin:"4px", padding:"4px",
-                    clickListener: (e) => {
-                        if (!e.isTrusted) { return false; }
-                        joinFaction(Factions[factionName]);
-                        Engine.displayFactionsInfo();
-                        return false;
-                    },
-                }));
-
-                invitationsList.appendChild(item);
-            }());
-        }
-
-        Engine.Display.factionsContent.appendChild(invitationsList);
-    },
-
     // Main Game Loop
     idleTimer: function() {
         // Get time difference