Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-10 09:43:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adds CreateGangPopup React element.

Browse Source
This commit is contained in:
vmesecher 2021-09-11 08:42:27 -07:00
parent 1edcbe88ee
commit 705b154f13
3 changed files with 69 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/Faction/ui/CreateGangPopup.tsx Normal file
View File

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

61
src/Faction/ui/Root.tsx
View File

@ -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 facName = this.props.faction.name;
let isHacking = false;
if (facName === "NiteSec" || facName === "The Black Hand") {
isHacking = true;
}
// 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();
const popupId = "create-gang-popup";
createPopup(popupId, CreateGangPopup, {
popupId: popupId,
facName: this.props.faction.name,
p: this.props.p,
engine: this.props.engine
});
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 {

4
src/ui/React/StdButton.tsx
View File

@ -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>