some sleeve conversion

This commit is contained in:
Olivier Gagnon
2021-09-09 16:04:36 -04:00
parent ab8937870c
commit b0fcdb8363
9 changed files with 208 additions and 537 deletions
+16 -56
View File
@@ -2,22 +2,18 @@
* Module for handling the Sleeve UI
*/
import React from "react";
import { createSleevePurchaseAugsPopup } from "./SleeveAugmentationsUI";
import { Sleeve } from "./Sleeve";
import { SleeveTaskType } from "./SleeveTaskTypesEnum";
import { SleeveFaq } from "./data/SleeveFaq";
import { IPlayer } from "../IPlayer";
import { CONSTANTS } from "../../Constants";
import { Faction } from "../../Faction/Faction";
import { Factions } from "../../Faction/Factions";
import { FactionWorkType } from "../../Faction/FactionWorkTypeEnum";
import { Crime } from "../../Crime/Crime";
import { Crimes } from "../../Crime/Crimes";
import { Cities } from "../../Locations/Cities";
import { CityName } from "../../Locations/data/CityNames";
import { LocationName } from "../../Locations/data/LocationNames";
@@ -32,13 +28,13 @@ import { exceptionAlert } from "../../../utils/helpers/exceptionAlert";
import { clearEventListeners } from "../../../utils/uiHelpers/clearEventListeners";
import { createElement } from "../../../utils/uiHelpers/createElement";
import { createOptionElement } from "../../../utils/uiHelpers/createOptionElement";
import { createPopup } from "../../../utils/uiHelpers/createPopup";
import { createPopupCloseButton } from "../../../utils/uiHelpers/createPopupCloseButton";
import { createPopup } from "../../ui/React/createPopup";
import { getSelectValue } from "../../../utils/uiHelpers/getSelectData";
import { removeChildrenFromElement } from "../../../utils/uiHelpers/removeChildrenFromElement";
import { removeElement } from "../../../utils/uiHelpers/removeElement";
import { removeElementById } from "../../../utils/uiHelpers/removeElementById";
import { SleeveAugmentationsPopup } from "./ui/SleeveAugmentationsPopup";
import { TravelPopup } from "./ui/TravelPopup";
import { EarningsTableElement } from "./ui/EarningsTableElement";
import { Money } from "../../ui/React/Money";
import { MoneyRate } from "../../ui/React/MoneyRate";
@@ -47,7 +43,6 @@ import { StatsElement } from "./ui/StatsElement";
import { MoreStatsContent } from "./ui/MoreStatsContent";
import { MoreEarningsContent } from "./ui/MoreEarningsContent";
import * as ReactDOM from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
// Object that keeps track of all DOM elements for the UI for a single Sleeve
interface ISleeveUIElems {
@@ -226,59 +221,20 @@ function createSleeveUi(sleeve: Sleeve, allSleeves: Sleeve[]): ISleeveUIElems {
class: "std-button",
innerText: "More Stats",
clickListener: () => {
dialogBoxCreate(MoreStatsContent(sleeve));
dialogBoxCreate(<MoreStatsContent sleeve={sleeve} />);
},
});
elems.travelButton = createElement("button", {
class: "std-button",
innerText: "Travel",
clickListener: () => {
if (playerRef === null) return;
if (playerRef == null) throw new Error("playerRef is null in purchaseAugsButton.click()");
const popupId = "sleeve-travel-popup";
const popupArguments: HTMLElement[] = [];
popupArguments.push(createPopupCloseButton(popupId, { class: "std-button" }));
popupArguments.push(
createElement("p", {
innerHTML:
"Have this sleeve travel to a different city. This affects " +
"the gyms and universities at which this sleeve can study. " +
`Traveling to a different city costs ${renderToStaticMarkup(
<Money money={CONSTANTS.TravelCost} player={playerRef} />,
)}. ` +
"It will also CANCEL the sleeve's current task (setting it to idle)",
}),
);
for (const cityName in Cities) {
if (sleeve.city === cityName) {
continue;
}
(function (sleeve, cityName) {
popupArguments.push(
createElement("div", {
// Reusing this css class. It adds a border and makes it so that
// the background color changes when you hover
class: "cmpy-mgmt-find-employee-option",
innerText: cityName,
clickListener: () => {
if (playerRef == null) throw new Error("playerRef is null in popupArguments.click()");
if (!playerRef.canAfford(CONSTANTS.TravelCost)) {
dialogBoxCreate("You cannot afford to have this sleeve travel to another city", false);
return false;
}
sleeve.city = cityName as CityName;
playerRef.loseMoney(CONSTANTS.TravelCost);
sleeve.resetTaskStatus();
removeElementById(popupId);
updateSleeveUi(sleeve, elems);
updateSleeveTaskSelector(sleeve, elems, allSleeves);
return false;
},
}),
);
})(sleeve, cityName);
}
createPopup(popupId, popupArguments);
createPopup(popupId, TravelPopup, {
popupId: popupId,
sleeve: sleeve,
player: playerRef,
});
},
});
elems.purchaseAugsButton = createElement("button", {
@@ -287,7 +243,11 @@ function createSleeveUi(sleeve: Sleeve, allSleeves: Sleeve[]): ISleeveUIElems {
innerText: "Manage Augmentations",
clickListener: () => {
if (playerRef == null) throw new Error("playerRef is null in purchaseAugsButton.click()");
createSleevePurchaseAugsPopup(sleeve, playerRef);
const popupId = "sleeve-augmentation-popup";
createPopup(popupId, SleeveAugmentationsPopup, {
sleeve: sleeve,
player: playerRef,
});
},
});
elems.statsPanel.appendChild(elems.stats);
@@ -350,7 +310,7 @@ function createSleeveUi(sleeve: Sleeve, allSleeves: Sleeve[]): ISleeveUIElems {
class: "std-button",
innerText: "More Earnings Info",
clickListener: () => {
dialogBoxCreate(MoreEarningsContent(sleeve));
dialogBoxCreate(<MoreEarningsContent sleeve={sleeve} />);
},
});
@@ -4,44 +4,48 @@ import { Money } from "../../../ui/React/Money";
import * as React from "react";
import { StatsTable } from "../../../ui/React/StatsTable";
export function MoreEarningsContent(sleeve: Sleeve): React.ReactElement {
interface IProps {
sleeve: Sleeve;
}
export function MoreEarningsContent(props: IProps): React.ReactElement {
return (
<>
{StatsTable(
[
["Money ", <Money money={sleeve.earningsForTask.money} />],
["Hacking Exp ", numeralWrapper.formatExp(sleeve.earningsForTask.hack)],
["Strength Exp ", numeralWrapper.formatExp(sleeve.earningsForTask.str)],
["Defense Exp ", numeralWrapper.formatExp(sleeve.earningsForTask.def)],
["Dexterity Exp ", numeralWrapper.formatExp(sleeve.earningsForTask.dex)],
["Agility Exp ", numeralWrapper.formatExp(sleeve.earningsForTask.agi)],
["Charisma Exp ", numeralWrapper.formatExp(sleeve.earningsForTask.cha)],
["Money ", <Money money={props.sleeve.earningsForTask.money} />],
["Hacking Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.hack)],
["Strength Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.str)],
["Defense Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.def)],
["Dexterity Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.dex)],
["Agility Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.agi)],
["Charisma Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.cha)],
],
"Earnings for Current Task:",
)}
<br />
{StatsTable(
[
["Money: ", <Money money={sleeve.earningsForPlayer.money} />],
["Hacking Exp: ", numeralWrapper.formatExp(sleeve.earningsForPlayer.hack)],
["Strength Exp: ", numeralWrapper.formatExp(sleeve.earningsForPlayer.str)],
["Defense Exp: ", numeralWrapper.formatExp(sleeve.earningsForPlayer.def)],
["Dexterity Exp: ", numeralWrapper.formatExp(sleeve.earningsForPlayer.dex)],
["Agility Exp: ", numeralWrapper.formatExp(sleeve.earningsForPlayer.agi)],
["Charisma Exp: ", numeralWrapper.formatExp(sleeve.earningsForPlayer.cha)],
["Money: ", <Money money={props.sleeve.earningsForPlayer.money} />],
["Hacking Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.hack)],
["Strength Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.str)],
["Defense Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.def)],
["Dexterity Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.dex)],
["Agility Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.agi)],
["Charisma Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.cha)],
],
"Total Earnings for Host Consciousness:",
)}
<br />
{StatsTable(
[
["Money: ", <Money money={sleeve.earningsForSleeves.money} />],
["Hacking Exp: ", numeralWrapper.formatExp(sleeve.earningsForSleeves.hack)],
["Strength Exp: ", numeralWrapper.formatExp(sleeve.earningsForSleeves.str)],
["Defense Exp: ", numeralWrapper.formatExp(sleeve.earningsForSleeves.def)],
["Dexterity Exp: ", numeralWrapper.formatExp(sleeve.earningsForSleeves.dex)],
["Agility Exp: ", numeralWrapper.formatExp(sleeve.earningsForSleeves.agi)],
["Charisma Exp: ", numeralWrapper.formatExp(sleeve.earningsForSleeves.cha)],
["Money: ", <Money money={props.sleeve.earningsForSleeves.money} />],
["Hacking Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.hack)],
["Strength Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.str)],
["Defense Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.def)],
["Dexterity Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.dex)],
["Agility Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.agi)],
["Charisma Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.cha)],
],
"Total Earnings for Other Sleeves:",
)}
@@ -3,40 +3,44 @@ import { numeralWrapper } from "../../../ui/numeralFormat";
import { StatsTable } from "../../../ui/React/StatsTable";
import * as React from "react";
export function MoreStatsContent(sleeve: Sleeve): React.ReactElement {
interface IProps {
sleeve: Sleeve;
}
export function MoreStatsContent(props: IProps): React.ReactElement {
return (
<>
{StatsTable(
[
["Hacking: ", sleeve.hacking_skill, `(${numeralWrapper.formatExp(sleeve.hacking_exp)} exp)`],
["Strength: ", sleeve.strength, `(${numeralWrapper.formatExp(sleeve.strength_exp)} exp)`],
["Defense: ", sleeve.defense, `(${numeralWrapper.formatExp(sleeve.defense_exp)} exp)`],
["Dexterity: ", sleeve.dexterity, `(${numeralWrapper.formatExp(sleeve.dexterity_exp)} exp)`],
["Agility: ", sleeve.agility, `(${numeralWrapper.formatExp(sleeve.agility_exp)} exp)`],
["Charisma: ", sleeve.charisma, `(${numeralWrapper.formatExp(sleeve.charisma_exp)} exp)`],
["Hacking: ", props.sleeve.hacking_skill, `(${numeralWrapper.formatExp(props.sleeve.hacking_exp)} exp)`],
["Strength: ", props.sleeve.strength, `(${numeralWrapper.formatExp(props.sleeve.strength_exp)} exp)`],
["Defense: ", props.sleeve.defense, `(${numeralWrapper.formatExp(props.sleeve.defense_exp)} exp)`],
["Dexterity: ", props.sleeve.dexterity, `(${numeralWrapper.formatExp(props.sleeve.dexterity_exp)} exp)`],
["Agility: ", props.sleeve.agility, `(${numeralWrapper.formatExp(props.sleeve.agility_exp)} exp)`],
["Charisma: ", props.sleeve.charisma, `(${numeralWrapper.formatExp(props.sleeve.charisma_exp)} exp)`],
],
"Stats:",
)}
<br />
{StatsTable(
[
["Hacking Level multiplier: ", numeralWrapper.formatPercentage(sleeve.hacking_mult)],
["Hacking Experience multiplier: ", numeralWrapper.formatPercentage(sleeve.hacking_exp_mult)],
["Strength Level multiplier: ", numeralWrapper.formatPercentage(sleeve.strength_mult)],
["Strength Experience multiplier: ", numeralWrapper.formatPercentage(sleeve.strength_exp_mult)],
["Defense Level multiplier: ", numeralWrapper.formatPercentage(sleeve.defense_mult)],
["Defense Experience multiplier: ", numeralWrapper.formatPercentage(sleeve.defense_exp_mult)],
["Dexterity Level multiplier: ", numeralWrapper.formatPercentage(sleeve.dexterity_mult)],
["Dexterity Experience multiplier: ", numeralWrapper.formatPercentage(sleeve.dexterity_exp_mult)],
["Agility Level multiplier: ", numeralWrapper.formatPercentage(sleeve.agility_mult)],
["Agility Experience multiplier: ", numeralWrapper.formatPercentage(sleeve.agility_exp_mult)],
["Charisma Level multiplier: ", numeralWrapper.formatPercentage(sleeve.charisma_mult)],
["Charisma Experience multiplier: ", numeralWrapper.formatPercentage(sleeve.charisma_exp_mult)],
["Faction Reputation Gain multiplier: ", numeralWrapper.formatPercentage(sleeve.faction_rep_mult)],
["Company Reputation Gain multiplier: ", numeralWrapper.formatPercentage(sleeve.company_rep_mult)],
["Salary multiplier: ", numeralWrapper.formatPercentage(sleeve.work_money_mult)],
["Crime Money multiplier: ", numeralWrapper.formatPercentage(sleeve.crime_money_mult)],
["Crime Success multiplier: ", numeralWrapper.formatPercentage(sleeve.crime_success_mult)],
["Hacking Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.hacking_mult)],
["Hacking Experience multiplier: ", numeralWrapper.formatPercentage(props.sleeve.hacking_exp_mult)],
["Strength Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.strength_mult)],
["Strength Experience multiplier: ", numeralWrapper.formatPercentage(props.sleeve.strength_exp_mult)],
["Defense Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.defense_mult)],
["Defense Experience multiplier: ", numeralWrapper.formatPercentage(props.sleeve.defense_exp_mult)],
["Dexterity Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.dexterity_mult)],
["Dexterity Experience multiplier: ", numeralWrapper.formatPercentage(props.sleeve.dexterity_exp_mult)],
["Agility Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.agility_mult)],
["Agility Experience multiplier: ", numeralWrapper.formatPercentage(props.sleeve.agility_exp_mult)],
["Charisma Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.charisma_mult)],
["Charisma Experience multiplier: ", numeralWrapper.formatPercentage(props.sleeve.charisma_exp_mult)],
["Faction Reputation Gain multiplier: ", numeralWrapper.formatPercentage(props.sleeve.faction_rep_mult)],
["Company Reputation Gain multiplier: ", numeralWrapper.formatPercentage(props.sleeve.company_rep_mult)],
["Salary multiplier: ", numeralWrapper.formatPercentage(props.sleeve.work_money_mult)],
["Crime Money multiplier: ", numeralWrapper.formatPercentage(props.sleeve.crime_money_mult)],
["Crime Success multiplier: ", numeralWrapper.formatPercentage(props.sleeve.crime_success_mult)],
],
"Multipliers:",
)}
@@ -0,0 +1,90 @@
import React, { useState, useEffect } from "react";
import { Sleeve } from "../Sleeve";
import { findSleevePurchasableAugs } from "../SleeveHelpers";
import { Augmentations } from "../../../Augmentation/Augmentations";
import { Augmentation } from "../../../Augmentation/Augmentation";
import { IPlayer } from "../../IPlayer";
import { Money } from "../../../ui/React/Money";
import { renderToStaticMarkup } from "react-dom/server";
interface IProps {
sleeve: Sleeve;
player: IPlayer;
}
export function SleeveAugmentationsPopup(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
useEffect(() => {
const id = setInterval(rerender, 150);
return () => clearInterval(id);
}, []);
// Array of all owned Augmentations. Names only
const ownedAugNames = props.sleeve.augmentations.map((e) => e.name);
// You can only purchase Augmentations that are actually available from
// your factions. I.e. you must be in a faction that has the Augmentation
// and you must also have enough rep in that faction in order to purchase it.
const availableAugs = findSleevePurchasableAugs(props.sleeve, props.player);
function purchaseAugmentation(aug: Augmentation): void {
props.sleeve.tryBuyAugmentation(props.player, aug);
rerender();
}
return (
<div className="noselect">
<p style={{ display: "block" }}>Owned Augmentations:</p>
<div style={{ width: "70%" }}>
{ownedAugNames.map((augName) => {
const aug = Augmentations[augName];
let tooltip = aug.info;
if (typeof tooltip !== "string") {
tooltip = renderToStaticMarkup(tooltip);
}
tooltip += "<br /><br />";
tooltip += renderToStaticMarkup(aug.stats);
return (
<div key={augName} className="gang-owned-upgrade tooltip">
{augName}
<span className="tooltiptext" dangerouslySetInnerHTML={{ __html: tooltip }}></span>
</div>
);
})}
</div>
<p>
You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they
would for you. You can only purchase Augmentations that you have unlocked through Factions.
<br />
<br />
When purchasing an Augmentation for a Duplicate Sleeve, they are immediately installed. This means that the
Duplicate Sleeve will immediately lose all of its stat experience.
</p>
{availableAugs.map((aug) => {
let info = aug.info;
if (typeof info !== "string") {
info = renderToStaticMarkup(info);
}
info += "<br /><br />";
info += renderToStaticMarkup(aug.stats);
return (
<div key={aug.name} className="cmpy-mgmt-upgrade-div" onClick={() => purchaseAugmentation(aug)}>
<div style={{ fontSize: "12px", padding: "2px" }}>
<h2>{aug.name}</h2>
<br />
Cost: <Money money={aug.startingCost} player={props.player} />
<br />
<br />
<span dangerouslySetInnerHTML={{ __html: info }}></span>
</div>
</div>
);
})}
</div>
);
}
@@ -0,0 +1,44 @@
import React from "react";
import { Sleeve } from "../Sleeve";
import { IPlayer } from "../../IPlayer";
import { CONSTANTS } from "../../../Constants";
import { Cities } from "../../../Locations/Cities";
import { removePopup } from "../../../ui/React/createPopup";
import { Money } from "../../../ui/React/Money";
import { CityName } from "../../../Locations/data/CityNames";
import { dialogBoxCreate } from "../../../../utils/DialogBox";
interface IProps {
popupId: string;
sleeve: Sleeve;
player: IPlayer;
}
export function TravelPopup(props: IProps): React.ReactElement {
function travel(city: string): void {
if (!props.player.canAfford(CONSTANTS.TravelCost)) {
dialogBoxCreate("You cannot afford to have this sleeve travel to another city");
}
props.sleeve.city = city as CityName;
props.player.loseMoney(CONSTANTS.TravelCost);
props.sleeve.resetTaskStatus();
removePopup(props.popupId);
}
return (
<>
<p>
Have this sleeve travel to a different city. This affects the gyms and universities at which this sleeve can
study. Traveling to a different city costs <Money money={CONSTANTS.TravelCost} player={props.player} />. It will
also set your current sleeve task to idle.
</p>
{Object.keys(Cities)
.filter((city: string) => props.sleeve.city !== city)
.map((city: string) => (
<div className="cmpy-mgmt-find-employee-option" onClick={() => travel(city)}>
{city}
</div>
))}
</>
);
}