Factions list screen converted to React.

src/Faction/FactionHelpers.d.ts

@@ -6,3 +6,4 @@ export declare function hasAugmentationPrereqs(aug: Augmentation): boolean;
 export declare function purchaseAugmentationBoxCreate(aug: Augmentation, fac: Faction): void;
 export declare function purchaseAugmentation(aug: Augmentation, fac: Faction, sing?: boolean): void;
 export declare function displayFactionContent(factionName: string, initiallyOnAugmentationsPage: boolean=false);
+export declare function joinFaction(faction: Faction): void;

src/Faction/ui/FactionList.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { IEngine } from "../../IEngine";
+import { Factions } from "../Factions";
+import { displayFactionContent, joinFaction } from "../FactionHelpers";
+
+interface IProps {
+    player: IPlayer;
+    engine: IEngine;
+}
+
+export function FactionList(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+
+    function openFaction(faction: string): void {
+        props.engine.loadFactionContent();
+        displayFactionContent(faction);
+    }
+
+    function acceptInvitation(event: React.MouseEvent<HTMLElement>, faction: string): void {
+        if (!event.isTrusted) return;
+        joinFaction(Factions[faction]);
+        setRerender(x => !x);
+    }
+
+    return (<>
+        <h1>Factions</h1>
+        <p>Lists all factions you have joined</p>
+        <br />
+        <ul>
+            {props.player.factions.map((faction: string) => 
+                <li key={faction}><a
+                    className="a-link-button"
+                    onClick={() => openFaction(faction)}
+                    style={{padding:"4px", margin:"4px", display:"inline-block"}}>{faction}
+                </a></li>)}
+        </ul>
+        <br />
+        <h1>Outstanding Faction Invitations</h1>
+        <p style={{width: '70%'}}>Lists factions you have been invited to. You can accept these faction invitations at any time.</p>
+        <ul>
+            {props.player.factionInvitations.map((faction: string) => 
+                <li  key={faction} style={{padding:"6px", margin:"6px"}}>
+                    <p style={{display:"inline", margin:"4px", padding:"4px"}}>{faction}</p>
+                    <a
+                        className="a-link-button"
+                        onClick={(e) => acceptInvitation(e, faction)}
+                        style={{display:"inline", margin:"4px", padding:"4px"}}>Accept Faction Invitation</a>
+                </li>)}
+        </ul>
+    </>);
+}

src/PersonObjects/IPlayer.ts

@@ -31,6 +31,7 @@ export interface IPlayer {
     corporation: any;
     currentServer: string;
     factions: string[];
+    factionInvitations: string[];
     firstProgramAvailable: boolean;
     firstTimeTraveled: boolean;
     hacknetNodes: (HacknetNode | string)[]; // HacknetNode object or IP of Hacknet Server

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