mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-18 21:53:50 +01:00
Finished refactoring augmentations page UI to use react
This commit is contained in:
danielyxie
parent
2d37409392
commit
b744997c72
@ -10,6 +10,13 @@
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#augmentations-content {
|
||||
> p {
|
||||
font-size: $defaultFontSize * 0.875;
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.augmentations-list {
|
||||
button,
|
||||
div {
|
||||
@ -18,10 +25,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 2px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,10 +3,11 @@ import { Augmentations } from "./Augmentations";
|
||||
import { PlayerOwnedAugmentation } from "./PlayerOwnedAugmentation";
|
||||
import { AugmentationNames } from "./data/AugmentationNames";
|
||||
|
||||
import { AugmentationsRoot } from "./ui/Root";
|
||||
|
||||
import { BitNodeMultipliers } from "../BitNode/BitNodeMultipliers";
|
||||
import { CONSTANTS } from "../Constants";
|
||||
import { Factions,
|
||||
factionExists } from "../Faction/Factions";
|
||||
import { Factions, factionExists } from "../Faction/Factions";
|
||||
import { addWorkerScript } from "../NetscriptWorker";
|
||||
import { Player } from "../Player";
|
||||
import { prestigeAugmentation } from "../Prestige";
|
||||
@ -16,17 +17,23 @@ import { Script } from "../Script/Script";
|
||||
import { Server } from "../Server/Server";
|
||||
import { OwnedAugmentationsOrderSetting } from "../Settings/SettingEnums";
|
||||
import { Settings } from "../Settings/Settings";
|
||||
import { Page, routing } from "../ui/navigationTracking";
|
||||
|
||||
import { dialogBoxCreate } from "../../utils/DialogBox";
|
||||
import { createAccordionElement } from "../../utils/uiHelpers/createAccordionElement";
|
||||
import { Reviver, Generic_toJSON,
|
||||
Generic_fromJSON } from "../../utils/JSONReviver";
|
||||
import {
|
||||
Reviver,
|
||||
Generic_toJSON,
|
||||
Generic_fromJSON
|
||||
} from "../../utils/JSONReviver";
|
||||
import { formatNumber } from "../../utils/StringHelperFunctions";
|
||||
import { clearObject } from "../../utils/helpers/clearObject";
|
||||
import { createElement } from "../../utils/uiHelpers/createElement";
|
||||
import { isString } from "../../utils/helpers/isString";
|
||||
import { removeChildrenFromElement } from "../../utils/uiHelpers/removeChildrenFromElement";
|
||||
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
function AddToAugmentations(aug) {
|
||||
var name = aug.name;
|
||||
@ -2092,211 +2099,17 @@ function augmentationExists(name) {
|
||||
return Augmentations.hasOwnProperty(name);
|
||||
}
|
||||
|
||||
function displayAugmentationsContent(contentEl) {
|
||||
removeChildrenFromElement(contentEl);
|
||||
contentEl.appendChild(createElement("h1", {
|
||||
innerText:"Purchased Augmentations",
|
||||
}));
|
||||
export function displayAugmentationsContent(contentEl) {
|
||||
if (!routing.isOn(Page.Augmentations)) { return; }
|
||||
if (!(contentEl instanceof HTMLElement)) { return; }
|
||||
|
||||
contentEl.appendChild(createElement("pre", {
|
||||
width:"70%", whiteSpace:"pre-wrap", display:"block",
|
||||
innerText:"Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to install them.\n" +
|
||||
"WARNING: Installing your Augmentations resets most of your progress, including:\n\n" +
|
||||
"Stats/Skill levels and Experience\n" +
|
||||
"Money\n" +
|
||||
"Scripts on every computer but your home computer\n" +
|
||||
"Purchased servers\n" +
|
||||
"Hacknet Nodes\n" +
|
||||
"Faction/Company reputation\n" +
|
||||
"Stocks\n" +
|
||||
"Installing Augmentations lets you start over with the perks and benefits granted by all " +
|
||||
"of the Augmentations you have ever installed. Also, you will keep any scripts and RAM/Core upgrades " +
|
||||
"on your home computer (but you will lose all programs besides NUKE.exe)."
|
||||
}));
|
||||
|
||||
//Install Augmentations button
|
||||
contentEl.appendChild(createElement("a", {
|
||||
class:"a-link-button", innerText:"Install Augmentations",
|
||||
tooltip:"'I never asked for this'",
|
||||
clickListener:()=>{
|
||||
installAugmentations();
|
||||
return false;
|
||||
}
|
||||
}));
|
||||
|
||||
//Backup button
|
||||
contentEl.appendChild(createElement("a", {
|
||||
class:"a-link-button flashing-button", innerText:"Backup Save (Export)",
|
||||
tooltip:"It's always a good idea to backup/export your save!",
|
||||
clickListener:()=>{
|
||||
saveObject.exportGame();
|
||||
return false;
|
||||
}
|
||||
}));
|
||||
|
||||
//Purchased/queued augmentations list
|
||||
var queuedAugmentationsList = createElement("ul", {class:"augmentations-list"});
|
||||
|
||||
for (var i = 0; i < Player.queuedAugmentations.length; ++i) {
|
||||
var augName = Player.queuedAugmentations[i].name;
|
||||
var aug = Augmentations[augName];
|
||||
|
||||
var displayName = augName;
|
||||
if (augName === AugmentationNames.NeuroFluxGovernor) {
|
||||
displayName += " - Level " + (Player.queuedAugmentations[i].level);
|
||||
}
|
||||
|
||||
var accordion = createAccordionElement({hdrText:displayName, panelText:aug.info});
|
||||
queuedAugmentationsList.appendChild(accordion[0]);
|
||||
}
|
||||
contentEl.appendChild(queuedAugmentationsList);
|
||||
|
||||
//Installed augmentations list
|
||||
contentEl.appendChild(createElement("h1", {
|
||||
innerText:"Installed Augmentations", marginTop:"8px",
|
||||
}));
|
||||
contentEl.appendChild(createElement("p", {
|
||||
width:"70%", whiteSpace:"pre-wrap",
|
||||
innerText:"List of all Augmentations (including Source Files) that have been " +
|
||||
"installed. You have gained the effects of these Augmentations."
|
||||
}));
|
||||
|
||||
var augmentationsList = createElement("ul", {class:"augmentations-list"});
|
||||
|
||||
//Expand/Collapse All buttons
|
||||
contentEl.appendChild(createElement("a", {
|
||||
class:"a-link-button", fontSize:"14px", innerText:"Expand All", display:"inline-block",
|
||||
clickListener:()=>{
|
||||
var allHeaders = augmentationsList.getElementsByClassName("accordion-header");
|
||||
for (var i = 0; i < allHeaders.length; ++i) {
|
||||
if (!allHeaders[i].classList.contains("active")) {allHeaders[i].click();}
|
||||
}
|
||||
}
|
||||
}));
|
||||
contentEl.appendChild(createElement("a", {
|
||||
class:"a-link-button", fontSize:"14px", innerText:"Collapse All", display:"inline-block",
|
||||
clickListener:()=>{
|
||||
var allHeaders = augmentationsList.getElementsByClassName("accordion-header");
|
||||
for (var i = 0; i < allHeaders.length; ++i) {
|
||||
if (allHeaders[i].classList.contains("active")) {allHeaders[i].click();}
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
//Sort Buttons
|
||||
const sortInOrderButton = createElement("a", {
|
||||
class:"a-link-button", fontSize:"14px", innerText:"Sort in Order",
|
||||
tooltip:"Sorts the Augmentations alphabetically and Source Files in numerical order (1, 2, 3,...)",
|
||||
clickListener:()=>{
|
||||
removeChildrenFromElement(augmentationsList);
|
||||
|
||||
//Create a copy of Player's Source Files and augs array and sort them
|
||||
var sourceFiles = Player.sourceFiles.slice();
|
||||
var augs = Player.augmentations.slice();
|
||||
sourceFiles.sort((sf1, sf2)=>{
|
||||
return sf1.n - sf2.n;
|
||||
});
|
||||
augs.sort((aug1, aug2)=>{
|
||||
return aug1.name <= aug2.name ? -1 : 1;
|
||||
});
|
||||
displaySourceFiles(augmentationsList, sourceFiles);
|
||||
displayAugmentations(augmentationsList, augs);
|
||||
|
||||
Settings.OwnedAugmentationsOrder = OwnedAugmentationsOrderSetting.Alphabetically;
|
||||
}
|
||||
});
|
||||
contentEl.appendChild(sortInOrderButton);
|
||||
|
||||
const sortByAcquirementTimeButton = createElement("a", {
|
||||
class:"a-link-button", fontSize:"14px", innerText:"Sort by Acquirement Time",
|
||||
tooltip:"Sorts the Augmentations and Source Files based on when you acquired them (same as default)",
|
||||
clickListener:()=>{
|
||||
removeChildrenFromElement(augmentationsList);
|
||||
displaySourceFiles(augmentationsList, Player.sourceFiles);
|
||||
displayAugmentations(augmentationsList, Player.augmentations);
|
||||
|
||||
Settings.OwnedAugmentationsOrder = OwnedAugmentationsOrderSetting.AcquirementTime;
|
||||
}
|
||||
});
|
||||
contentEl.appendChild(sortByAcquirementTimeButton);
|
||||
|
||||
if (Settings.OwnedAugmentationsOrder === OwnedAugmentationsOrderSetting.Alphabetically) {
|
||||
sortInOrderButton.click();
|
||||
} else {
|
||||
sortByAcquirementTimeButton.click();
|
||||
}
|
||||
contentEl.appendChild(augmentationsList);
|
||||
|
||||
// Display multiplier information at the bottom
|
||||
contentEl.appendChild(createElement("p", {
|
||||
display: "block",
|
||||
innerHTML:
|
||||
`<br><br><strong><u>Total Multipliers:</u></strong><br>` +
|
||||
'Hacking Chance multiplier: ' + formatNumber(Player.hacking_chance_mult * 100, 2) + '%<br>' +
|
||||
'Hacking Speed multiplier: ' + formatNumber(Player.hacking_speed_mult * 100, 2) + '%<br>' +
|
||||
'Hacking Money multiplier: ' + formatNumber(Player.hacking_money_mult * 100, 2) + '%<br>' +
|
||||
'Hacking Growth multiplier: ' + formatNumber(Player.hacking_grow_mult * 100, 2) + '%<br><br>' +
|
||||
'Hacking Level multiplier: ' + formatNumber(Player.hacking_mult * 100, 2) + '%<br>' +
|
||||
'Hacking Experience multiplier: ' + formatNumber(Player.hacking_exp_mult * 100, 2) + '%<br><br>' +
|
||||
'Strength Level multiplier: ' + formatNumber(Player.strength_mult * 100, 2) + '%<br>' +
|
||||
'Strength Experience multiplier: ' + formatNumber(Player.strength_exp_mult * 100, 2) + '%<br><br>' +
|
||||
'Defense Level multiplier: ' + formatNumber(Player.defense_mult * 100, 2) + '%<br>' +
|
||||
'Defense Experience multiplier: ' + formatNumber(Player.defense_exp_mult * 100, 2) + '%<br><br>' +
|
||||
'Dexterity Level multiplier: ' + formatNumber(Player.dexterity_mult * 100, 2) + '%<br>' +
|
||||
'Dexterity Experience multiplier: ' + formatNumber(Player.dexterity_exp_mult * 100, 2) + '%<br><br>' +
|
||||
'Agility Level multiplier: ' + formatNumber(Player.agility_mult * 100, 2) + '%<br>' +
|
||||
'Agility Experience multiplier: ' + formatNumber(Player.agility_exp_mult * 100, 2) + '%<br><br>' +
|
||||
'Charisma Level multiplier: ' + formatNumber(Player.charisma_mult * 100, 2) + '%<br>' +
|
||||
'Charisma Experience multiplier: ' + formatNumber(Player.charisma_exp_mult * 100, 2) + '%<br><br>' +
|
||||
'Hacknet Node production multiplier: ' + formatNumber(Player.hacknet_node_money_mult * 100, 2) + '%<br>' +
|
||||
'Hacknet Node purchase cost multiplier: ' + formatNumber(Player.hacknet_node_purchase_cost_mult * 100, 2) + '%<br>' +
|
||||
'Hacknet Node RAM upgrade cost multiplier: ' + formatNumber(Player.hacknet_node_ram_cost_mult * 100, 2) + '%<br>' +
|
||||
'Hacknet Node Core purchase cost multiplier: ' + formatNumber(Player.hacknet_node_core_cost_mult * 100, 2) + '%<br>' +
|
||||
'Hacknet Node level upgrade cost multiplier: ' + formatNumber(Player.hacknet_node_level_cost_mult * 100, 2) + '%<br><br>' +
|
||||
'Company reputation gain multiplier: ' + formatNumber(Player.company_rep_mult * 100, 2) + '%<br>' +
|
||||
'Faction reputation gain multiplier: ' + formatNumber(Player.faction_rep_mult * 100, 2) + '%<br>' +
|
||||
'Salary multiplier: ' + formatNumber(Player.work_money_mult * 100, 2) + '%<br>' +
|
||||
'Crime success multiplier: ' + formatNumber(Player.crime_success_mult * 100, 2) + '%<br>' +
|
||||
'Crime money multiplier: ' + formatNumber(Player.crime_money_mult * 100, 2) + '%<br><br><br>',
|
||||
}))
|
||||
}
|
||||
|
||||
//Creates the accordion elements to display Augmentations
|
||||
// @listElement - List DOM element to append accordion elements to
|
||||
// @augs - Array of Augmentation objects
|
||||
function displayAugmentations(listElement, augs) {
|
||||
for (var i = 0; i < augs.length; ++i) {
|
||||
var augName = augs[i].name;
|
||||
var aug = Augmentations[augName];
|
||||
|
||||
var displayName = augName;
|
||||
if (augName === AugmentationNames.NeuroFluxGovernor) {
|
||||
displayName += " - Level " + (augs[i].level);
|
||||
}
|
||||
var accordion = createAccordionElement({hdrText:displayName, panelText:aug.info});
|
||||
listElement.appendChild(accordion[0]);
|
||||
}
|
||||
}
|
||||
|
||||
//Creates the accordion elements to display Source Files
|
||||
// @listElement - List DOM element to append accordion elements to
|
||||
// @sourceFiles - Array of Source File objects
|
||||
function displaySourceFiles(listElement, sourceFiles) {
|
||||
for (var i = 0; i < sourceFiles.length; ++i) {
|
||||
var srcFileKey = "SourceFile" + sourceFiles[i].n;
|
||||
var sourceFileObject = SourceFiles[srcFileKey];
|
||||
if (sourceFileObject == null) {
|
||||
console.log("ERROR: Invalid source file number: " + sourceFiles[i].n);
|
||||
continue;
|
||||
}
|
||||
const maxLevel = sourceFiles[i].n == 12 ? "∞" : "3";
|
||||
var accordion = createAccordionElement({
|
||||
hdrText:sourceFileObject.name + "<br>" + "Level " + (sourceFiles[i].lvl) + " / "+maxLevel,
|
||||
panelText:sourceFileObject.info
|
||||
});
|
||||
|
||||
listElement.appendChild(accordion[0]);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<AugmentationsRoot
|
||||
exportGameFn={saveObject.exportGame.bind(saveObject)}
|
||||
installAugmentationsFn={installAugmentations}
|
||||
/>,
|
||||
contentEl
|
||||
);
|
||||
}
|
||||
|
||||
export function isRepeatableAug(aug) {
|
||||
@ -2307,6 +2120,9 @@ export function isRepeatableAug(aug) {
|
||||
return false;
|
||||
}
|
||||
|
||||
export {installAugmentations,
|
||||
initAugmentations, applyAugmentation, augmentationExists,
|
||||
displayAugmentationsContent};
|
||||
export {
|
||||
installAugmentations,
|
||||
initAugmentations,
|
||||
applyAugmentation,
|
||||
augmentationExists,
|
||||
};
|
||||
@ -30,11 +30,13 @@ export function InstalledAugmentations(): React.ReactElement {
|
||||
}
|
||||
|
||||
return (
|
||||
<AugmentationAccordion aug={aug} key={e.name} level={level} />
|
||||
<li key={e.name}>
|
||||
<AugmentationAccordion aug={aug} level={level} />
|
||||
</li>
|
||||
)
|
||||
});
|
||||
|
||||
return (
|
||||
<ul>{augs}</ul>
|
||||
<>{augs}</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -7,18 +7,22 @@
|
||||
*/
|
||||
import * as React from "react";
|
||||
|
||||
import { InstalledAugmentations } from "./InstalledAugmentations";
|
||||
import { ListConfiguration } from "./ListConfiguration";
|
||||
import { OwnedSourceFiles } from "./OwnedSourceFiles";
|
||||
|
||||
import { Settings } from "../../Settings/Settings";
|
||||
import { OwnedAugmentationsOrderSetting } from "../../Settings/SettingEnums";
|
||||
|
||||
type IProps = {
|
||||
|
||||
}
|
||||
type IProps = {}
|
||||
|
||||
type IState = {
|
||||
rerenderFlag: boolean;
|
||||
}
|
||||
|
||||
export class InstalledAugmentationsAndSourceFiles extends React.Component<IProps, IState> {
|
||||
listRef: React.RefObject<HTMLUListElement>;
|
||||
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
@ -26,8 +30,44 @@ export class InstalledAugmentationsAndSourceFiles extends React.Component<IProps
|
||||
rerenderFlag: false,
|
||||
}
|
||||
|
||||
this.collapseAllHeaders = this.collapseAllHeaders.bind(this);
|
||||
this.expandAllHeaders = this.expandAllHeaders.bind(this);
|
||||
this.sortByAcquirementTime = this.sortByAcquirementTime.bind(this);
|
||||
this.sortInOrder = this.sortInOrder.bind(this);
|
||||
|
||||
this.listRef = React.createRef();
|
||||
}
|
||||
|
||||
collapseAllHeaders() {
|
||||
const ul = this.listRef.current;
|
||||
if (ul == null) { return; }
|
||||
const tickers = ul.getElementsByClassName("accordion-header");
|
||||
for (let i = 0; i < tickers.length; ++i) {
|
||||
const ticker = tickers[i];
|
||||
if (!(ticker instanceof HTMLButtonElement)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (ticker.classList.contains("active")) {
|
||||
ticker.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expandAllHeaders() {
|
||||
const ul = this.listRef.current;
|
||||
if (ul == null) { return; }
|
||||
const tickers = ul.getElementsByClassName("accordion-header");
|
||||
for (let i = 0; i < tickers.length; ++i) {
|
||||
const ticker = tickers[i];
|
||||
if (!(ticker instanceof HTMLButtonElement)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!ticker.classList.contains("active")) {
|
||||
ticker.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rerender() {
|
||||
@ -50,7 +90,18 @@ export class InstalledAugmentationsAndSourceFiles extends React.Component<IProps
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<>
|
||||
<ListConfiguration
|
||||
collapseAllButtonsFn={this.collapseAllHeaders}
|
||||
expandAllButtonsFn={this.expandAllHeaders}
|
||||
sortByAcquirementTimeFn={this.sortByAcquirementTime}
|
||||
sortInOrderFn={this.sortInOrder}
|
||||
/>
|
||||
<ul className="augmentations-list" ref={this.listRef}>
|
||||
<OwnedSourceFiles />
|
||||
<InstalledAugmentations />
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,3 +3,37 @@
|
||||
* Source-Files are displayed in the Augmentations UI
|
||||
*/
|
||||
import * as React from "react";
|
||||
|
||||
import { StdButton } from "../../ui/React/StdButton";
|
||||
|
||||
type IProps = {
|
||||
collapseAllButtonsFn: () => void;
|
||||
expandAllButtonsFn: () => void;
|
||||
sortByAcquirementTimeFn: () => void;
|
||||
sortInOrderFn: () => void;
|
||||
}
|
||||
|
||||
export function ListConfiguration(props: IProps): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
<StdButton
|
||||
onClick={props.expandAllButtonsFn}
|
||||
text="Expand All"
|
||||
/>
|
||||
<StdButton
|
||||
onClick={props.collapseAllButtonsFn}
|
||||
text="Collapse All"
|
||||
/>
|
||||
<StdButton
|
||||
onClick={props.sortInOrderFn}
|
||||
text="Sort in Order"
|
||||
tooltip="Sorts the Augmentations alphabetically and Source-Files in numeral order"
|
||||
/>
|
||||
<StdButton
|
||||
onClick={props.sortByAcquirementTimeFn}
|
||||
text="Sort by Acquirement Time"
|
||||
tooltip="Sorts the Augmentations and Source-Files based on when you acquired them (same as default)"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -5,36 +5,37 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { Player } from "../../Player";
|
||||
import { Augmentations } from "../../Augmentation/Augmentations";
|
||||
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
|
||||
import { Settings } from "../../Settings/Settings";
|
||||
import { OwnedAugmentationsOrderSetting } from "../../Settings/SettingEnums";
|
||||
import { SourceFiles } from "../../SourceFile/SourceFiles";
|
||||
|
||||
import { AugmentationAccordion } from "../../ui/React/AugmentationAccordion";
|
||||
import { SourceFileAccordion } from "../../ui/React/SourceFileAccordion";
|
||||
|
||||
export function OwnedSourceFiles(): React.ReactElement {
|
||||
const sourceAugs = Player.augmentations.slice();
|
||||
const sourceSfs = Player.sourceFiles.slice();
|
||||
|
||||
if (Settings.OwnedAugmentationsOrder === OwnedAugmentationsOrderSetting.Alphabetically) {
|
||||
sourceAugs.sort((aug1, aug2) => {
|
||||
return aug1.name <= aug2.name ? -1 : 1;
|
||||
sourceSfs.sort((sf1, sf2) => {
|
||||
return sf1.n - sf2.n;
|
||||
});
|
||||
}
|
||||
|
||||
const augs = sourceAugs.map((e) => {
|
||||
const aug = Augmentations[e.name];
|
||||
|
||||
let level = null;
|
||||
if (e.name === AugmentationNames.NeuroFluxGovernor) {
|
||||
level = e.level;
|
||||
const sfs = sourceSfs.map((e) => {
|
||||
const srcFileKey = "SourceFile" + e.n;
|
||||
const sfObj = SourceFiles[srcFileKey];
|
||||
if (sfObj == null) {
|
||||
console.error(`Invalid source file number: ${e.n}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<AugmentationAccordion aug={aug} key={e.name} level={level} />
|
||||
<li key={e.n}>
|
||||
<SourceFileAccordion level={e.lvl} sf={sfObj} />
|
||||
</li>
|
||||
)
|
||||
});
|
||||
|
||||
return (
|
||||
<ul>{augs}</ul>
|
||||
)
|
||||
<>{sfs}</>
|
||||
);
|
||||
}
|
||||
|
||||
96
src/Augmentation/ui/PlayerMultipliers.tsx
Normal file
96
src/Augmentation/ui/PlayerMultipliers.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
/**
|
||||
* React component for displaying the player's multipliers on the Augmentation UI page
|
||||
*/
|
||||
import * as React from "react";
|
||||
|
||||
import { Player } from "../../Player";
|
||||
import { numeralWrapper } from "../../ui/numeralFormat";
|
||||
|
||||
export function PlayerMultipliers(): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
<p><strong><u>Total Multipliers:</u></strong></p>
|
||||
|
||||
<pre>
|
||||
{'Hacking Chance multiplier: ' + numeralWrapper.formatPercentage(Player.hacking_chance_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacking Speed multiplier: ' + numeralWrapper.formatPercentage(Player.hacking_speed_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacking Money multiplier: ' + numeralWrapper.formatPercentage(Player.hacking_money_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacking Growth multiplier: ' + numeralWrapper.formatPercentage(Player.hacking_grow_mult)}
|
||||
</pre><br />
|
||||
<pre>
|
||||
{'Hacking Level multiplier: ' + numeralWrapper.formatPercentage(Player.hacking_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacking Experience multiplier: ' + numeralWrapper.formatPercentage(Player.hacking_exp_mult)}
|
||||
</pre>
|
||||
<br />
|
||||
<pre>
|
||||
{'Strength Level multiplier: ' + numeralWrapper.formatPercentage(Player.strength_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Strength Experience multiplier: ' + numeralWrapper.formatPercentage(Player.strength_exp_mult)}
|
||||
</pre>
|
||||
<br />
|
||||
<pre>
|
||||
{'Defense Level multiplier: ' + numeralWrapper.formatPercentage(Player.defense_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Defense Experience multiplier: ' + numeralWrapper.formatPercentage(Player.defense_exp_mult)}
|
||||
</pre><br />
|
||||
<pre>
|
||||
{'Dexterity Level multiplier: ' + numeralWrapper.formatPercentage(Player.dexterity_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Dexterity Experience multiplier: ' + numeralWrapper.formatPercentage(Player.dexterity_exp_mult)}
|
||||
</pre><br />
|
||||
<pre>
|
||||
{'Agility Level multiplier: ' + numeralWrapper.formatPercentage(Player.agility_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Agility Experience multiplier: ' + numeralWrapper.formatPercentage(Player.agility_exp_mult)}
|
||||
</pre><br />
|
||||
<pre>
|
||||
{'Charisma Level multiplier: ' + numeralWrapper.formatPercentage(Player.charisma_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Charisma Experience multiplier: ' + numeralWrapper.formatPercentage(Player.charisma_exp_mult)}
|
||||
</pre><br />
|
||||
<pre>
|
||||
{'Hacknet Node production multiplier: ' + numeralWrapper.formatPercentage(Player.hacknet_node_money_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacknet Node purchase cost multiplier: ' + numeralWrapper.formatPercentage(Player.hacknet_node_purchase_cost_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacknet Node RAM upgrade cost multiplier: ' + numeralWrapper.formatPercentage(Player.hacknet_node_ram_cost_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacknet Node Core purchase cost multiplier: ' + numeralWrapper.formatPercentage(Player.hacknet_node_core_cost_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Hacknet Node level upgrade cost multiplier: ' + numeralWrapper.formatPercentage(Player.hacknet_node_level_cost_mult)}
|
||||
</pre><br />
|
||||
<pre>
|
||||
{'Company reputation gain multiplier: ' + numeralWrapper.formatPercentage(Player.company_rep_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Faction reputation gain multiplier: ' + numeralWrapper.formatPercentage(Player.faction_rep_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Salary multiplier: ' + numeralWrapper.formatPercentage(Player.work_money_mult)}
|
||||
</pre><br />
|
||||
<pre>
|
||||
{'Crime success multiplier: ' + numeralWrapper.formatPercentage(Player.crime_success_mult)}
|
||||
</pre>
|
||||
<pre>
|
||||
{'Crime money multiplier: ' + numeralWrapper.formatPercentage(Player.crime_money_mult)}
|
||||
</pre>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -20,7 +20,9 @@ export function PurchasedAugmentations(): React.ReactElement {
|
||||
}
|
||||
|
||||
augs.push(
|
||||
<AugmentationAccordion aug={aug} key={ownedAug.name} level={level} />
|
||||
<li key={`${ownedAug.name}${ownedAug.level}`}>
|
||||
<AugmentationAccordion aug={aug} level={level} />
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -4,9 +4,11 @@
|
||||
*/
|
||||
import * as React from "react";
|
||||
|
||||
import { Augmentations } from "../../Augmentation/Augmentations";
|
||||
import { Player } from "../../Player";
|
||||
import { InstalledAugmentationsAndSourceFiles } from "./InstalledAugmentationsAndSourceFiles";
|
||||
import { PlayerMultipliers } from "./PlayerMultipliers";
|
||||
import { PurchasedAugmentations } from "./PurchasedAugmentations";
|
||||
|
||||
import { Player } from "../../Player";
|
||||
import { StdButton } from "../../ui/React/StdButton";
|
||||
|
||||
type IProps = {
|
||||
@ -25,7 +27,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div id="augmentations-content">
|
||||
<h1>Purchased Augmentations</h1>
|
||||
<p>
|
||||
Below is a list of all Augmentations you have purchased but not
|
||||
@ -34,14 +36,14 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
|
||||
<p>
|
||||
WARNING: Installing your Augmentations resets most of your progress,
|
||||
including:
|
||||
</p>
|
||||
</p><br />
|
||||
<p>- Stats/Skill levels and Experience</p>
|
||||
<p>- Money</p>
|
||||
<p>- Scripts on every computer but your home computer</p>
|
||||
<p>- Purchased servers</p>
|
||||
<p>- Hacknet Nodes</p>
|
||||
<p>- Faction/Company reputation</p>
|
||||
<p>- Stocks</p>
|
||||
<p>- Stocks</p><br />
|
||||
<p>
|
||||
Installing Augmentations lets you start over with the perks and
|
||||
benefits granted by all of the Augmentations you have ever
|
||||
@ -62,10 +64,19 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
|
||||
text="Backup Save (Export)"
|
||||
tooltip="It's always a good idea to backup/export your save!"
|
||||
/>
|
||||
<PurchasedAugmentations />
|
||||
|
||||
<ul className="augmentations-list">
|
||||
<h1>Installed Augmentations</h1>
|
||||
<p>
|
||||
{
|
||||
`List of all Augmentations ${Player.sourceFiles.length > 0 ? "and Source Files " : ""} ` +
|
||||
`that have been installed. You have gained the effects of these.`
|
||||
}
|
||||
</p>
|
||||
<InstalledAugmentationsAndSourceFiles />
|
||||
|
||||
</ul>
|
||||
<br /> <br />
|
||||
<PlayerMultipliers />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -25,10 +25,8 @@ class BitNode {
|
||||
}
|
||||
|
||||
|
||||
export let BitNodes: IMap<BitNode> = {};
|
||||
export const BitNodes: IMap<BitNode> = {};
|
||||
|
||||
export function initBitNodes() {
|
||||
BitNodes = {};
|
||||
BitNodes["BitNode1"] = new BitNode(1, "Source Genesis", "The original BitNode",
|
||||
"The first BitNode created by the Enders to imprison the minds of humans. It became " +
|
||||
"the prototype and testing-grounds for all of the BitNodes that followed.<br><br>" +
|
||||
@ -253,7 +251,6 @@ export function initBitNodes() {
|
||||
BitNodes["BitNode22"] = new BitNode(22, "", "COMING SOON");
|
||||
BitNodes["BitNode23"] = new BitNode(23, "", "COMING SOON");
|
||||
BitNodes["BitNode24"] = new BitNode(24, "", "COMING SOON");
|
||||
}
|
||||
|
||||
export function initBitNodeMultipliers(p: IPlayer) {
|
||||
if (p.bitNodeN == null) {
|
||||
|
||||
@ -15,7 +15,6 @@ import {
|
||||
import { AugmentationNames } from "./Augmentation/data/AugmentationNames";
|
||||
import {
|
||||
BitNodes,
|
||||
initBitNodes,
|
||||
initBitNodeMultipliers
|
||||
} from "./BitNode/BitNode";
|
||||
import { Bladeburner } from "./Bladeburner";
|
||||
@ -310,8 +309,8 @@ const Engine = {
|
||||
loadAugmentationsContent: function() {
|
||||
Engine.hideAllContent();
|
||||
Engine.Display.augmentationsContent.style.display = "block";
|
||||
displayAugmentationsContent(Engine.Display.augmentationsContent);
|
||||
routing.navigateTo(Page.Augmentations);
|
||||
displayAugmentationsContent(Engine.Display.augmentationsContent);
|
||||
MainMenuLinks.Augmentations.classList.add("active");
|
||||
},
|
||||
|
||||
@ -488,13 +487,20 @@ const Engine = {
|
||||
Engine.Display.activeScriptsContent.style.display = "none";
|
||||
clearHacknetNodesUI();
|
||||
Engine.Display.createProgramContent.style.display = "none";
|
||||
|
||||
Engine.Display.factionsContent.style.display = "none";
|
||||
ReactDOM.unmountComponentAtNode(Engine.Display.factionContent);
|
||||
|
||||
Engine.Display.factionContent.style.display = "none";
|
||||
ReactDOM.unmountComponentAtNode(Engine.Display.factionContent);
|
||||
|
||||
Engine.Display.augmentationsContent.style.display = "none";
|
||||
ReactDOM.unmountComponentAtNode(Engine.Display.augmentationsContent);
|
||||
|
||||
Engine.Display.tutorialContent.style.display = "none";
|
||||
|
||||
Engine.Display.locationContent.style.display = "none";
|
||||
ReactDOM.unmountComponentAtNode(Engine.Display.locationContent);
|
||||
|
||||
Engine.Display.workInProgressContent.style.display = "none";
|
||||
Engine.Display.redPillContent.style.display = "none";
|
||||
Engine.Display.cinematicTextContent.style.display = "none";
|
||||
@ -1038,7 +1044,6 @@ const Engine = {
|
||||
|
||||
// Load game from save or create new game
|
||||
if (loadGame(saveString)) {
|
||||
initBitNodes();
|
||||
initBitNodeMultipliers(Player);
|
||||
Engine.setDisplayElements(); // Sets variables for important DOM elements
|
||||
Engine.init(); // Initialize buttons, work, etc.
|
||||
@ -1160,7 +1165,6 @@ const Engine = {
|
||||
} else {
|
||||
// No save found, start new game
|
||||
console.log("Initializing new game");
|
||||
initBitNodes();
|
||||
initBitNodeMultipliers(Player);
|
||||
initSpecialServerIps();
|
||||
Engine.setDisplayElements(); // Sets variables for important DOM elements
|
||||
|
||||
@ -45,12 +45,12 @@ export class Accordion extends React.Component<IProps, IState> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<button className={"accordion-header"} onClick={this.handleHeaderClick}>
|
||||
{this.props.headerContent}
|
||||
</button>
|
||||
<AccordionPanel opened={this.state.panelOpened} panelContent={this.props.panelContent} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* React Component for displaying a single Augmentation as an accordion.
|
||||
*
|
||||
* The header of the accordion contains the Augmentation's name (and level, if
|
||||
* applicable), and the accordion's panel contains the Augmentation's level.
|
||||
* applicable), and the accordion's panel contains the Augmentation's description.
|
||||
*/
|
||||
import * as React from "react";
|
||||
|
||||
@ -26,8 +26,8 @@ export function AugmentationAccordion(props: IProps): React.ReactElement {
|
||||
|
||||
return (
|
||||
<Accordion
|
||||
headerContent={<p>{displayName}</p>}
|
||||
panelContent={<p>{props.aug.info}</p>}
|
||||
headerContent={<>{displayName}</>}
|
||||
panelContent={<p dangerouslySetInnerHTML={{__html: props.aug.info}}></p>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
35
src/ui/React/SourceFileAccordion.tsx
Normal file
35
src/ui/React/SourceFileAccordion.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* React Component for displaying a single Source-File as an accordion.
|
||||
*
|
||||
* The header of the accordion contains the Source-Files's name and level,
|
||||
* and the accordion's panel contains the Source-File's description.
|
||||
*/
|
||||
import * as React from "react";
|
||||
|
||||
import { Accordion } from "./Accordion";
|
||||
|
||||
import { SourceFile } from "../../SourceFile/SourceFile";
|
||||
|
||||
type IProps = {
|
||||
level: number,
|
||||
sf: SourceFile,
|
||||
}
|
||||
|
||||
export function SourceFileAccordion(props: IProps): React.ReactElement {
|
||||
const maxLevel = props.sf.n === 3 ? "∞" : "3";
|
||||
|
||||
return (
|
||||
<Accordion
|
||||
headerContent={
|
||||
<>
|
||||
{props.sf.name}
|
||||
<br />
|
||||
{`Level ${props.level} / ${maxLevel}`}
|
||||
</>
|
||||
}
|
||||
panelContent={
|
||||
<p dangerouslySetInnerHTML={{__html: props.sf.info}}></p>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user