diff --git a/src/Bladeburner.jsx b/src/Bladeburner.jsx
index 2a3316fd1..93d48e668 100644
--- a/src/Bladeburner.jsx
+++ b/src/Bladeburner.jsx
@@ -52,6 +52,11 @@ import { createPopup } from "../utils/uiHelpers/createPopup";
import { removeElement } from "../utils/uiHelpers/removeElement";
import { removeElementById } from "../utils/uiHelpers/removeElementById";
+import { SkillElem } from "./Bladeburner/ui/SkillElem";
+import { BlackOpElem } from "./Bladeburner/ui/BlackOpElem";
+import { OperationElem } from "./Bladeburner/ui/OperationElem";
+import { ContractElem } from "./Bladeburner/ui/ContractElem";
+import { GeneralActionElem } from "./Bladeburner/ui/GeneralActionElem";
import { StatsTable } from "./ui/React/StatsTable";
import { CopyableText } from "./ui/React/CopyableText";
import { Money } from "./ui/React/Money";
@@ -1894,442 +1899,28 @@ Bladeburner.prototype.updateActionAndSkillsContent = function() {
}
Bladeburner.prototype.updateGeneralActionsUIElement = function(el, action) {
- removeChildrenFromElement(el);
- var isActive = el.classList.contains(ActiveActionCssClass);
- var computedActionTimeCurrent = Math.min(this.actionTimeCurrent+this.actionTimeOverflow,this.actionTimeToComplete);
-
- el.appendChild(createElement("h2", { // Header
- innerText:isActive ? action.name + " (IN PROGRESS - " +
- formatNumber(computedActionTimeCurrent, 0) + " / " +
- formatNumber(this.actionTimeToComplete, 0) + ")"
- : action.name,
- display:"inline-block",
- }));
-
- if (isActive) { // Progress bar if its active
- var progress = computedActionTimeCurrent / this.actionTimeToComplete;
- el.appendChild(createElement("p", {
- display:"block",
- innerText:createProgressBarText({progress:progress}),
- }));
- } else {
- // Start button
- el.appendChild(createElement("a", {
- innerText:"Start", class: "a-link-button",
- margin:"3px", padding:"3px",
- clickListener:() => {
- this.action.type = ActionTypes[action.name];
- this.action.name = action.name;
- this.startAction(this.action);
- this.updateActionAndSkillsContent();
- return false;
- },
- }));
- }
-
- appendLineBreaks(el, 2);
- el.appendChild(createElement("pre", { // Info
- innerHTML:action.desc, display:"inline-block",
- }));
-
-
+ ReactDOM.unmountComponentAtNode(el);
+ ReactDOM.render(
+
+
+
+export const killIcon =
+
\ No newline at end of file
diff --git a/src/Bladeburner/ui/BlackOpElem.tsx b/src/Bladeburner/ui/BlackOpElem.tsx
new file mode 100644
index 000000000..bcdd65855
--- /dev/null
+++ b/src/Bladeburner/ui/BlackOpElem.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import {
+ formatNumber,
+ convertTimeMsToTimeElapsedString,
+} from "../../../utils/StringHelperFunctions";
+import { ActionTypes } from "../data/ActionTypes";
+import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
+import { stealthIcon, killIcon } from "../data/Icons";
+
+interface IProps {
+ bladeburner: any;
+ action: any;
+}
+
+export function BlackOpElem(props: IProps): React.ReactElement {
+ const isCompleted = (props.bladeburner.blackops[props.action.name] != null);
+ if(isCompleted) {
+ return (
+ {props.action.name} (COMPLETED) );
+ }
+
+ const isActive = props.bladeburner.action.type === ActionTypes["BlackOperation"] && props.action.name === props.bladeburner.action.name;
+ const estimatedSuccessChance = props.action.getSuccessChance(props.bladeburner, {est:true});
+ const actionTime = props.action.getActionTime(props.bladeburner);
+ const hasReqdRank = props.bladeburner.rank >= props.action.reqdRank;
+ const computedActionTimeCurrent = Math.min(props.bladeburner.actionTimeCurrent+props.bladeburner.actionTimeOverflow, props.bladeburner.actionTimeToComplete);
+
+ function onStart() {
+ props.bladeburner.action.type = ActionTypes.BlackOperation;
+ props.bladeburner.action.name = props.action.name;
+ props.bladeburner.startAction(props.bladeburner.action);
+ props.bladeburner.updateActionAndSkillsContent();
+ }
+
+ function onTeam() {
+ // TODO(hydroflame): this needs some changes that are in the Gang conversion.
+ // var popupId = "bladeburner-operation-set-team-size-popup";
+ // var txt = createElement("p", {
+ // innerText:"Enter the amount of team members you would like to take on this " +
+ // "BlackOp. If you do not have the specified number of team members, " +
+ // "then as many as possible will be used. Note that team members may " +
+ // "be lost during operations.",
+
+ // });
+ // var input = createElement("input", {
+ // type:"number", placeholder: "Team size", class: "text-input",
+ // });
+ // var setBtn = createElement("a", {
+ // innerText:"Confirm", class:"a-link-button",
+ // clickListener:() => {
+ // var num = Math.round(parseFloat(input.value));
+ // if (isNaN(num) || num < 0) {
+ // dialogBoxCreate("Invalid value entered for number of Team Members (must be numeric, positive)")
+ // } else {
+ // action.teamCount = num;
+ // this.updateBlackOpsUIElement(el, action);
+ // }
+ // removeElementById(popupId);
+ // return false;
+ // },
+ // });
+ // var cancelBtn = createElement("a", {
+ // innerText:"Cancel", class:"a-link-button",
+ // clickListener:() => {
+ // removeElementById(popupId);
+ // return false;
+ // },
+ // });
+ // createPopup(popupId, [txt, input, setBtn, cancelBtn]);
+ // input.focus();
+ }
+
+ return (<>
+
+ {isActive ?
+ <>{props.action.name} (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)}) :
+ <>{props.action.name}
+ }
+
+ {isActive ?
+ {createProgressBarText({progress: computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}
:
+ <>
+ Start
+
+ Set Team Size (Curr Size: {formatNumber(props.action.teamCount, 0)})
+
+ }
+
+
+ Required Rank: {formatNumber(props.action.reqdRank, 0)}
+
+
+ Estimated Success Chance: {formatNumber(estimatedSuccessChance*100, 1)}% {props.action.isStealth?stealthIcon:<>}{props.action.isKill?killIcon:<>}
+
+ );
+}
\ No newline at end of file
diff --git a/src/Bladeburner/ui/BlackOperationsPage.tsx b/src/Bladeburner/ui/BlackOperationsPage.tsx
deleted file mode 100644
index 7f73397c1..000000000
--- a/src/Bladeburner/ui/BlackOperationsPage.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { BlackOperations } from "../BlackOperations";
-/*
-if (DomElems.actionsAndSkillsList == null || DomElems.actionsAndSkillsDesc == null) {
- throw new Error("Bladeburner.createBlackOpsContent called with either " +
- "DomElems.actionsAndSkillsList or DomElems.actionsAndSkillsDesc = null");
-}
-
-DomElems.actionsAndSkillsDesc.innerHTML =
- "Black Operations (Black Ops) are special, one-time covert operations. " +
- "Each Black Op must be unlocked successively by completing " +
- "the one before it.Your ultimate goal to climb through the ranks of Bladeburners is to complete " +
- "all of the Black Ops.
-
- Black Operations (Black Ops) are special, one-time covert operations. Each Black Op must be unlocked successively by completing the one before it.Your ultimate goal to climb through the ranks of Bladeburners is to complete all of the Black Ops.
- {blackops.map(() =>
-
,
- )}
-
) {
+ props.action.autoLevel = event.target.checked;
+ setRerender(old => !old);
+ }
+
+ return (<>
+
+ {isActive ?
+ <>{props.action.name} (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)}) :
+ <>{props.action.name}
+ }
+
+ {isActive ?
+ {createProgressBarText({progress:computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}
:
+ <>
+
+ Start
+
+ }
+
+
+ {props.action.getSuccessesNeededForNextLevel(BladeburnerConstants.ContractSuccessesPerLevel)} successes needed for next level
+
+ Level: {props.action.level} / {props.action.maxLevel}
+
+
+ {isActive && (WARNING: changing the level will restart the Operation )}
+ ↑
+
+
+ {isActive && (WARNING: changing the level will restart the Operation )}
+ ↓
+
+
+
+
+ Autolevel:
+ Automatically increase operation level when possible
+
+
+ {isActive ?
+ <>{props.action.name} (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)}) :
+ <>{props.action.name}
+ }
+
+ {isActive ?
+ {createProgressBarText({progress:computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}
:
+ <>
+
+ Start
+
+ }
+ ) {
+ props.action.autoLevel = event.target.checked;
+ setRerender(old => !old);
+ }
+
+ return (<>
+
+ {isActive ?
+ <>{props.action.name} (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)}) :
+ <>{props.action.name}
+ }
+
+ {isActive ?
+ {createProgressBarText({progress:computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}
:
+ <>
+
+ Start
+
+
+ Set Team Size (Curr Size: {formatNumber(props.action.teamCount, 0)})
+
+ }
+
+
+ {props.action.getSuccessesNeededForNextLevel(BladeburnerConstants.OperationSuccessesPerLevel)} successes needed for next level
+
+ Level: {props.action.level} / {props.action.maxLevel}
+
+
+ {isActive && (WARNING: changing the level will restart the Operation )}
+ ↑
+
+
+ {isActive && (WARNING: changing the level will restart the Operation )}
+ ↓
+
+
+
+
+ Autolevel:
+ Automatically increase operation level when possible
+
+
+
+
+ Level
+
+ Level: {currentLevel}
+ {maxLvl ?
+ MAX LEVEL
:
+ Skill Points required: {formatNumber(pointCost, 0)}
}
+
+ );
+}
\ No newline at end of file
diff --git a/src/engine.jsx b/src/engine.jsx
index 244dec641..db76bee30 100644
--- a/src/engine.jsx
+++ b/src/engine.jsx
@@ -475,6 +475,7 @@ const Engine = {
Engine.hideAllContent();
routing.navigateTo(Page.Bladeburner);
Player.bladeburner.createContent();
+ MainMenuLinks.Bladeburner.classList.add("active");
} catch(e) {
exceptionAlert(e);
}