Merge pull request #1223 from vmesecher/dev

Adds CreateGangPopup React element.

src/Faction/ui/CreateGangPopup.tsx

@@ -0,0 +1,58 @@
+/**
+ * React Component for the popup used to create a new gang.
+ */
+ import React from "react";
+ import { removePopup } from "../../ui/React/createPopup";
+ import { IPlayer } from "../../PersonObjects/IPlayer";
+ import { StdButton } from "../../ui/React/StdButton";
+ import { IEngine } from "../../IEngine";
+
+ interface ICreateGangPopupProps {
+    popupId: string;
+    facName: string;
+    p: IPlayer;
+    engine: IEngine;
+ }
+
+ export function CreateGangPopup(props: ICreateGangPopupProps): React.ReactElement {
+
+    const combatGangText = "This is a COMBAT gang. Members in this gang will have different tasks than HACKING gangs. " +
+    "Compared to hacking gangs, progression with combat gangs can be more difficult as territory management " +
+    "is more important. However, well-managed combat gangs can progress faster than hacking ones.";
+
+    const hackingGangText = "This is a HACKING gang. Members in this gang will have different tasks than COMBAT gangs. " +
+    "Compared to combat gangs, progression with hacking gangs is more straightforward as territory warfare " +
+    "is not as important.";
+
+    function isHacking(): boolean {
+        return ["NiteSec", "The Black Hand"].includes(props.facName);
+    }
+
+    function createGang(): void {
+        props.p.startGang(props.facName, isHacking());
+        removePopup(props.popupId);
+        props.engine.loadGangContent();
+    }
+
+    function onKeyUp(event: React.KeyboardEvent): void {
+        if (event.keyCode === 13) createGang();
+    }
+
+    return (
+        <>
+            Would you like to create a new Gang with {props.facName}?
+            <br/>
+            <br/>
+            Note that this will prevent you from creating a Gang with any other Faction until this BitNode is destroyed. It also resets your reputation with this faction.
+            <br/>
+            <br/>
+            { (isHacking()) ? hackingGangText : combatGangText }
+            <br/>
+            <br/>
+            Other than hacking vs combat, there are NO differences between the Factions you can create a Gang with, and each of these Factions have all Augmentations available.
+            <div className="popup-box-input-div" >
+                <StdButton onClick={createGang} onKeyUp={onKeyUp} text="Create Gang" style={{float: "right"}} autoFocus={true}/>
+            </div>
+        </>
+   );
+ }

src/Faction/ui/Root.tsx

@@ -19,7 +19,8 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
 import { createSleevePurchasesFromCovenantPopup } from "../../PersonObjects/Sleeve/SleeveCovenantPurchases";
 import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
 
-import { yesNoBoxClose, yesNoBoxCreate, yesNoBoxGetNoButton, yesNoBoxGetYesButton } from "../../../utils/YesNoBox";
+import { createPopup } from "../../ui/React/createPopup";
+import { CreateGangPopup } from "./CreateGangPopup";
 
 type IProps = {
   engine: IEngine;
@@ -97,59 +98,13 @@ export class FactionRoot extends React.Component<IProps, IState> {
       return this.props.engine.loadGangContent();
     }
 
-    // Otherwise, we have to create the gang
+    const popupId = "create-gang-popup";
-    const facName = this.props.faction.name;
+    createPopup(popupId, CreateGangPopup, {
-    let isHacking = false;
+      popupId: popupId,
-    if (facName === "NiteSec" || facName === "The Black Hand") {
+      facName: this.props.faction.name,
-      isHacking = true;
+      p: this.props.p,
-    }
+      engine: this.props.engine
-
-    // A Yes/No popup box will allow the player to confirm gang creation
-    const yesBtn = yesNoBoxGetYesButton();
-    const noBtn = yesNoBoxGetNoButton();
-    if (yesBtn == null || noBtn == null) {
-      return;
-    }
-
-    yesBtn.innerHTML = "Create Gang";
-    yesBtn.addEventListener("click", () => {
-      this.props.p.startGang(facName, isHacking);
-      const worldMenuHeader = document.getElementById("world-menu-header");
-      if (worldMenuHeader instanceof HTMLElement) {
-        worldMenuHeader.click();
-        worldMenuHeader.click();
-      }
-
-      this.props.engine.loadGangContent();
-      yesNoBoxClose();
     });
-
-    noBtn.innerHTML = "Cancel";
-    noBtn.addEventListener("click", () => {
-      yesNoBoxClose();
-    });
-
-    // Pop-up text
-    let gangTypeText = "";
-    if (isHacking) {
-      gangTypeText =
-        "This is a HACKING gang. Members in this gang will have different tasks than COMBAT gangs. " +
-        "Compared to combat gangs, progression with hacking gangs is more straightforward as territory warfare " +
-        "is not as important.<br><br>";
-    } else {
-      gangTypeText =
-        "This is a COMBAT gang. Members in this gang will have different tasks than HACKING gangs. " +
-        "Compared to hacking gangs, progression with combat gangs can be more difficult as territory management " +
-        "is more important. However, well-managed combat gangs can progress faster than hacking ones.<br><br>";
-    }
-    yesNoBoxCreate(
-      `Would you like to create a new Gang with ${facName}?<br><br>` +
-        "Note that this will prevent you from creating a Gang with any other Faction until " +
-        "this BitNode is destroyed. It also resets your reputation with this faction.<br><br>" +
-        gangTypeText +
-        "Other than hacking vs combat, there are NO differences between the Factions you can " +
-        "create a Gang with, and each of these Factions have all Augmentations available.",
-    );
   }
 
   rerender(): void {

src/ui/React/StdButton.tsx

@@ -6,9 +6,11 @@ import * as React from "react";
 
 interface IStdButtonProps {
   addClasses?: string;
+  autoFocus?: boolean;
   disabled?: boolean;
   id?: string;
   onClick?: (e: React.MouseEvent<HTMLElement>) => any;
+  onKeyUp?: (e: React.KeyboardEvent<HTMLElement>) => any;
   style?: any;
   text: string | JSX.Element;
   tooltip?: string | JSX.Element;
@@ -43,7 +45,7 @@ export function StdButton(props: IStdButtonProps): React.ReactElement {
   }
 
   return (
-    <button className={className} id={props.id} onClick={props.onClick} style={props.style}>
+    <button className={className} id={props.id} onClick={props.onClick} onKeyUp={props.onKeyUp} style={props.style} autoFocus={props.autoFocus}>
       {props.text}
       {hasTooltip && tooltip}
     </button>