v0.52.9

Switch out test runner for jest

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-react"]
-}

.gitignore

@@ -1,3 +1,4 @@
+.vscode
 Changelog.txt
 Netburner.txt
 /doc/build
@@ -6,3 +7,6 @@ Netburner.txt
 /test/*.map
 /test/*.bundle.*
 /test/*.css
+
+# editor files
+.vscode

babel.config.js

@@ -0,0 +1,9 @@
+const TEST = process.env.NODE_ENV === "test";
+
+module.exports = {
+    "presets": [
+        "@babel/preset-react",
+        TEST && "@babel/preset-env",
+        TEST && "@babel/preset-typescript",
+    ].filter(Boolean),
+}

css/buttons.scss

@@ -1,5 +1,6 @@
 @import "mixins";
 @import "theme";
+@import "styles";
 
 /**
  * Styling for all buttons
@@ -16,6 +17,7 @@ button {
 
 .a-link-button,
 .std-button {
+    @extend .noselect;
     text-decoration: none;
     background-color: #555;
     color: #fff;
@@ -23,11 +25,6 @@ button {
     margin: 5px;
     border: 1px solid #333;
 
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-
     &:hover {
         background-color: #666;
     }
@@ -68,6 +65,7 @@ button {
 
 .a-link-button-bought,
 .std-button-bought {
+    @extend .noselect;
     text-decoration: none;
     background-color: #0a0;
     color: #fff;

css/popupboxes.scss

@@ -1,5 +1,6 @@
 @import "mixins";
 @import "theme";
+@import "styles";
 
 /* Pop-up boxes */
 .popup-box-container {
@@ -12,7 +13,6 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    overflow: auto;
     background-color: rbga(var(--my-background-color), 0.4);
 }
 
@@ -23,6 +23,7 @@
     width: 70%;
     max-height: 80%;
     overflow-y: auto;
+    z-index: 11; /* Sit on top of the container */
     color: var(--my-font-color);
 }
 
@@ -56,8 +57,7 @@
     background-color: #000;
 }
 
-.dialog-box-container,
-#log-box-container {
+.dialog-box-container {
     display: block;
     position: absolute;
     z-index: 10;
@@ -72,8 +72,54 @@
     border: 5px solid var(--my-highlight-color);
 }
 
-.dialog-box-content,
-#log-box-content {
+
+.log-box-container {
+    display: flex;
+    flex-flow: column;
+    background-color: gray;
+    width: 50%;
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    margin: -10% 0 0 -25%;
+    height: auto;
+    max-height: 50%;
+    z-index: 10;
+    background-color: var(--my-background-color);
+    border: 2px solid var(--my-highlight-color);
+}
+
+.log-box-header {
+    background-color: #333;
+    border: 1px solid var(--my-highlight-color);
+    display: flex;
+    flex: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.log-box-log-container {
+    overflow-y: auto;
+}
+
+.log-box-button {
+    color: #aaa;
+    font-size: $defaultFontSize;
+    font-weight: bold;
+    padding: 2px;
+    margin: 6px;
+    border: 1px solid #fff;
+    background-color: #000;
+}
+
+.log-box-button:hover,
+.log-box-button:focus {
+    color: var(--my-font-color);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.dialog-box-content {
     z-index: 2;
     background-color: var(--my-background-color);
     padding: 10px;
@@ -87,6 +133,7 @@
 .dialog-box-close-button {
     @include borderRadius(12px);
     @include boxShadow(1px 1px 3px #000);
+    @extend .noselect;
 
     float: right;
     color: #aaa;

css/scripteditor.scss

@@ -9,19 +9,6 @@
     background-color: transparent;
 }
 
-#ace-editor {
-    margin: 10px;
-    height: 80%;
-    width: 100%;
-    margin-left: 6px;
-    padding-left: 6px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    border: 2px solid var(--my-highlight-color);
-    z-index: 1;
-    font-family: $fontFamily;
-}
-
 /* This temp element is used for auto adjusting filename field */
 .tmp-element {
     visibility: hidden;
@@ -47,7 +34,6 @@
 
 #script-editor-filename-wrapper {
     background-color: #555;
-    margin-left: 6px;
     margin-right: 0;
     padding-left: 6px;
     width: 100%;
@@ -108,17 +94,14 @@
     }
 }
 
-/* Specific overrides for Ace Editor */
-.ace_line,
-.ace_line * {
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
+.editor-options-container {
+    display: flex;
+    flex-flow: column;
 }
 
-.ace_text-input {
-    font-size: $defaultFontSize;
-    background-color: transparent;
-}
-
-/* Specified overrides for Code mirror Editor are defined in codemirror-override.scss */
+.editor-options-line {
+    display: flex;
+    flex: row nowrap;
+    align-items: center;
+    justify-content: start;
+}

css/styles.scss

@@ -17,6 +17,8 @@ body {
 p,
 pre,
 h2,
+h3,
+h4,
 .text,
 td {
     color: var(--my-font-color);
@@ -36,6 +38,10 @@ li {
     list-style-type: none;
 }
 
+br {
+    @extend .noselect;
+}
+
 #entire-game-container {
     background-color: transparent;
 }

dist/engineStyle.bundle.js

@@ -1,2 +1,2 @@
-!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],p=0,s=[];p<f.length;p++)i=f[p],u[i]&&s.push(u[i][0]),u[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(a&&a(t);s.length;)s.shift()();return r.push.apply(r,l||[]),o()}function o(){for(var n,t=0;t<r.length;t++){for(var o=r[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==u[c]&&(e=!1)}e&&(r.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},u={1:0},r=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var a=c;r.push([853,0]),o()}({790:function(n,t,o){},792:function(n,t,o){},794:function(n,t,o){},796:function(n,t,o){},798:function(n,t,o){},800:function(n,t,o){},802:function(n,t,o){},804:function(n,t,o){},806:function(n,t,o){},808:function(n,t,o){},810:function(n,t,o){},812:function(n,t,o){},814:function(n,t,o){},816:function(n,t,o){},818:function(n,t,o){},820:function(n,t,o){},822:function(n,t,o){},824:function(n,t,o){},826:function(n,t,o){},828:function(n,t,o){},830:function(n,t,o){},832:function(n,t,o){},834:function(n,t,o){},836:function(n,t,o){},838:function(n,t,o){},840:function(n,t,o){},842:function(n,t,o){},844:function(n,t,o){},846:function(n,t,o){},848:function(n,t,o){},850:function(n,t,o){},853:function(n,t,o){"use strict";o.r(t);o(852),o(850),o(848),o(846),o(844),o(842),o(840),o(838),o(836),o(834),o(832),o(830),o(828),o(826),o(824),o(822),o(820),o(818),o(816),o(814),o(812),o(810),o(808),o(806),o(804),o(802),o(800),o(798),o(796),o(794),o(792),o(790)}});
+!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],p=0,s=[];p<f.length;p++)i=f[p],u[i]&&s.push(u[i][0]),u[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(a&&a(t);s.length;)s.shift()();return r.push.apply(r,l||[]),o()}function o(){for(var n,t=0;t<r.length;t++){for(var o=r[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==u[c]&&(e=!1)}e&&(r.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},u={1:0},r=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var a=c;r.push([866,0]),o()}({803:function(n,t,o){},805:function(n,t,o){},807:function(n,t,o){},809:function(n,t,o){},811:function(n,t,o){},813:function(n,t,o){},815:function(n,t,o){},817:function(n,t,o){},819:function(n,t,o){},821:function(n,t,o){},823:function(n,t,o){},825:function(n,t,o){},827:function(n,t,o){},829:function(n,t,o){},831:function(n,t,o){},833:function(n,t,o){},835:function(n,t,o){},837:function(n,t,o){},839:function(n,t,o){},841:function(n,t,o){},843:function(n,t,o){},845:function(n,t,o){},847:function(n,t,o){},849:function(n,t,o){},851:function(n,t,o){},853:function(n,t,o){},855:function(n,t,o){},857:function(n,t,o){},859:function(n,t,o){},861:function(n,t,o){},863:function(n,t,o){},866:function(n,t,o){"use strict";o.r(t);o(865),o(863),o(861),o(859),o(857),o(855),o(853),o(851),o(849),o(847),o(845),o(843),o(841),o(839),o(837),o(835),o(833),o(831),o(829),o(827),o(825),o(823),o(821),o(819),o(817),o(815),o(813),o(811),o(809),o(807),o(805),o(803)}});
 //# sourceMappingURL=engineStyle.bundle.js.map

doc/source/changelog.rst

@@ -3,6 +3,178 @@
 Changelog
 =========
 
+v0.52.9 - 2021-07-27 Less lag! (hydroflame & community)
+-------------------------------------------
+
+** Active Scripts page **
+
+* Now less laggy, has pagination.
+
+** File diagnostic ** 
+
+* Added a popup found under options that shows the files you own and how
+  large they are. This help find bugs and leftover massive logs files.
+
+** Corporation **
+
+* Added safeguard against a very specific bug that causes NaN money. I'm
+  still not sure what the root cause is but it should prevent corp from
+  breaking.
+
+** Netscript ** 
+
+* tprintf is a new function that doesn't print the filename.
+
+** Misc. **
+
+* Infiltration kills you if you try to automate it. (@threehams)
+* Fix beautify button not working
+* Added bladeburner_analysis_mult to getPlayer() (@brubsby)
+* Fixed joining bladeburner via netscript functions. (@omuretsu)
+* All bladeburner actions are click-to-copy
+* nerf noodle bar
+
+v0.52.8 - 2021-07-23 Fixing the previous patch tbh ROUND 2 (hydroflame)
+-------------------------------------------
+
+** Script editor **
+
+* Correctly reloads old script when clicking "Script Editor"
+* No longer jumps to the end of the text for no reason.
+
+** Hash upgrades ** 
+
+* Fixed an issue where the default option would say ecorp but was really
+  foodnstuff
+
+** Misc. **
+
+* The "Delete all active script" button under the options has a clearer
+  description.
+* Removed some debug console.log
+* nerf noodle bar
+
+v0.52.7 - 2021-07-21 Fixing the previous patch tbh (hydroflame)
+-------------------------------------------
+
+** Netscript ** 
+
+* API BREAKING CHANGE: getActionEstimatedSuccessChance now returns a pair of
+  value to reflect the UI changes. I'm very sorry.
+
+** Bladeburner **
+
+* General actions now display time required.
+* Recruitment now displays success chance.
+* All other success chance now display a range instead of a single value
+  The real value is guaranteed to be within that range.
+
+** Misc. **
+
+* Fix tutorial not working after Monaco upate
+* Fix logbox logs not taking up the whole logbox
+* Fix script editor shortcut (ctrl+b)
+* Fix Corporation popup appearing in the wrong order, hiding one of them
+* Fix error when loading Corp
+* Fix logbox dragging (smoother now)
+* Fix logbox name collision
+* Fix logbox allowing to open the same box multiple times
+* Fix netscript write.
+* nerf noodle bar
+
+v0.52.6 - 2021-07-21 Logboxes and VS-code (hydroflame)
+-------------------------------------------
+
+** Text Editor **
+
+* Ace and Codemirror have been removed in favor of monaco (web version of
+  vs-code). The options are a bit lackluster but more will be added as
+  feedback comes.
+
+** Log boxes **
+
+* Multiple log boxes can be opened at once. They can be moved around the
+  screen. (but the movement behavior is a bit weird.)
+
+** Misc. **
+
+* Job promotion now correctly updates the UI.
+* Milestones now call the faction CyberSec instead of CSEC
+* Can no longer create file that break the filesystem.
+* Remove dollar sign in blade contract UI element
+* nerf noodle bar
+
+v0.52.5 - 2021-07-19 CPU cores are useful!? (hydroflame)
+-------------------------------------------
+
+** Terminal ** 
+
+* When executing 'run SCRIPT' any script can now add '--tail' to
+  automatically bring up the logs.
+
+** Netscript ** 
+
+* The 'flags' function now works with single letter flags but they only take
+  one dash.
+* Fix several broken bladeburner netscript functions.
+* Fix gang.getMemberInformation returning inconsistent data after the gang
+  rework.
+
+** CPU Cores **
+
+* CPU Cores on the home computer now provide a bonus to grow() money gain
+  and makes weaken lower more security. Only for scripts running on 'home'
+
+** Misc. **
+
+* Fix weird scrolling in the new Bladeburner React console.
+* nerf noodle bar
+
+v0.52.4 - 2021-07-19 Bladeburner in React (hydroflame)
+-------------------------------------------
+
+** Bladeburner **
+
+* The entire UI was rebuild in React. It should be more responsive
+
+** Hacknet ** 
+
+* Displays how many time each hash upgrade was bought.
+* Displays cummulative effect of the upgrade.
+* Removed "Close" button from hash upgrade menu.
+
+** Misc. **
+
+* More popup/modals have dark background, can be dismissed by clicking
+  outside, or by pressing escape.
+* Small reword in the guide.
+* Fix several typos in the bladeburner documentation.
+* Linting (no one cares except the dev)
+* nerf noodle bar
+
+v0.52.3 - 2021-07-15 Gangs were OP (hydroflame)
+-------------------------------------------
+
+** Gang **
+
+* Significant rework. Ascension is now based on exp gained.
+* All upgrades give exp bonuses.
+* Maximum gang members reduced to 12.
+* Respect required to recruit sharply increased.
+* Rewritten in React, the UI should be smoother and less laggy now.
+
+** Infiltration **
+
+* Now isTrusted protected.
+
+** Misc. **
+
+* Many UI element are now "noselect" protected.
+* Fixed an issue where you could join the same faction twice via script and
+  UI simultaneously.
+* Factions list screen converted to React.
+* nerf noodle bar
+
 v0.52.2 - 2021-07-15 Oh yeah, BN11 is a thing (drunk hydroflame tbh)
 -------------------------------------------
 
@@ -17,6 +189,10 @@ v0.52.2 - 2021-07-15 Oh yeah, BN11 is a thing (drunk hydroflame tbh)
   programs.
 * Augmentation descriptions are now more concise and consistent.
 
+** Misc. ** 
+
+* nerf noodle bar
+
 v0.52.1 - 2021-07-10 bugfixing (hydroflame & community)
 -------------------------------------------
 
@@ -36,6 +212,7 @@ v0.52.1 - 2021-07-10 bugfixing (hydroflame & community)
 * Plenty of typo/description fixed (@MageKing17)
 * Cleanup description of singularity function on readthedocs (@PurePandemonium)
 * Fix bug when autolinking a server while backdooring (@schroederIT)
+* nerf noodle bar
 
 v0.52.0 - 2021-06-13 Infiltration 2.0 (hydroflame & community)
 --------------------------------------------------------------
@@ -85,6 +262,7 @@ v0.52.0 - 2021-06-13 Infiltration 2.0 (hydroflame & community)
 * Fixed an issue where reputation could be transfered to new jobs when unfocused.
 * Empty stack traces should no longer appear.
 * Purchasing anything with Infinity money doesn't result in NaN.
+* nerf noodle bar
 
 v0.51.10 - 2021-05-31 Focus Mark, Focus! (hydroflame)
 -----------------------------------------------------
@@ -128,6 +306,7 @@ v0.51.10 - 2021-05-31 Focus Mark, Focus! (hydroflame)
 
 * Very large number will no longer appear as "$NaNt"
 * Hash capacity now displays in the "big number" format.
+* nerf noodle bar
 
 v0.51.9 - 2021-05-17 offline progress and exports! (hydroflame & community)
 ---------------------------------------------------------------
@@ -181,6 +360,7 @@ v0.51.9 - 2021-05-17 offline progress and exports! (hydroflame & community)
 * Updated several dependencies (big who cares, I know)
 * ls no longer prints lingering newline.
 * Money earned/spent by sleeves is now tracked under Character>Money
+* nerf noodle bar
 
 
 v0.51.8 - 2021-05-07 It was there all along (hydroflame & community)
@@ -238,6 +418,7 @@ v0.51.8 - 2021-05-07 It was there all along (hydroflame & community)
 * Fix infiltration number formatting.
 * script income transfers to parent on death. This helps keep track of
   income for scripts that spawn short lived scripts.
+* nerf noodle bar
 
 v0.51.7 - 2021-04-28 n00dles (hydroflame & community)
 -----------------------------------------
@@ -295,6 +476,7 @@ v0.51.7 - 2021-04-28 n00dles (hydroflame & community)
 * Money amount under 1000 dont display 3 decimal anymore.
 * Fix nextSourceFile flag miscalculation on the bitverse (for Bn12)
 * Faction invite text says "Decide later"/"Join!" instead of "No"/"Yes"
+* nerf noodle bar
 
 
 v0.51.6 - 2021-04-28 Backdoor! (hydroflame & community)
@@ -345,6 +527,7 @@ v0.51.6 - 2021-04-28 Backdoor! (hydroflame & community)
 * so many documentation and typos fixes (@Pimgd)
 * A corruption visual effect has been added to location with servers that
   have backdoor installed. (@dewint)
+* nerf noodle bar
 
 
 v0.51.5 - 2021-04-20 Flags! (hydroflame)
@@ -369,6 +552,7 @@ v0.51.5 - 2021-04-20 Flags! (hydroflame)
 * Souce-File typo fix
 * Fix 'while you were away' screen.
 * Bladeburner team size can no longer be set to negative amounts.
+* nerf noodle bar
 
 v0.51.4 - 2021-04-19 Manual hacking is fun (hydroflame)
 -------------------------------------------------------
@@ -404,6 +588,7 @@ v0.51.4 - 2021-04-19 Manual hacking is fun (hydroflame)
 * The text editor now remembers the location of your cursor and restores it.
 * skills are recalculated instantly.
 * Fix typo in Operation Zero description.
+* nerf noodle bar
 
 v0.51.3 - 2021-04-16 Y'all broke it on the first day (hydroflame)
 -----------------------------------------------------------------
@@ -445,6 +630,7 @@ v0.51.3 - 2021-04-16 Y'all broke it on the first day (hydroflame)
 * Hacknet node names is easier to handle for screen readers.
 * Money spent on classes is now tracked independently of work money.
 * running coding contract from the terminal will display its name.
+* nerf noodle bar
 
 v0.51.2 - 2021-04-09 Vegas, Baby! (hydroflame)
 ----------------------------------------------
@@ -459,6 +645,7 @@ v0.51.2 - 2021-04-09 Vegas, Baby! (hydroflame)
 * Link to discord added under options
 * 'getMemberInformation' doc updated, oops
 * tech vendor now handle max ram and cores.
+* nerf noodle bar
 
 v0.51.1 - 2021-04-06 Bugfixes because the author of the last patch sucks (it's hydroflame)
 ------------------------------------------------------------------------------------------
@@ -490,6 +677,7 @@ v0.51.1 - 2021-04-06 Bugfixes because the author of the last patch sucks (it's h
 
 * 'fl1ght.exe' will no longer suggest the combat path. Related faction
   requirements unchanged.
+* nerf noodle bar
 
 v0.51.0 - 2021-03-31 Formulas (hydroflame)
 ------------------------------------------
@@ -516,6 +704,10 @@ v0.51.0 - 2021-03-31 Formulas (hydroflame)
 
 * Certain UI elements are now 'click-to-copy'
 
+** Misc. **
+
+* nerf noodle bar
+
 v0.50.2 - 2021-03-25 Everyone asked for this one. (hydroflame)
 --------------------------------------------------------------
 
@@ -533,6 +725,7 @@ v0.50.2 - 2021-03-25 Everyone asked for this one. (hydroflame)
 
 * New shortcut, Alt + b, brings you to bladeburner
 * New shortcut, Alt + g, brings you to gang
+* nerf noodle bar
 
 v0.50.1 - 2021-03-22 (hydroflame)
 ---------------------------------
@@ -555,6 +748,7 @@ v0.50.1 - 2021-03-22 (hydroflame)
 **Misc.**
 
 * Minor spacing in stats tables.
+* nerf noodle bar
 
 v0.50.0 - 2021-03-20 Intelligence (hydroflame)
 ----------------------------------------------
@@ -575,6 +769,7 @@ v0.50.0 - 2021-03-20 Intelligence (hydroflame)
 * number formatting
 * remove wiki button in Hacking Missions.
 * Fix NaN displayed when very very large numbers are reached.
+* nerf noodle bar
 
 v0.49.2 - 2021-03-13 (hydroflame)
 ---------------------------------
@@ -612,6 +807,7 @@ v0.49.2 - 2021-03-13 (hydroflame)
 **Misc.**
 
 * Fix issue where the effective stats under Character>Stats were being calculated.
+* nerf noodle bar
 
 v0.49.0 - 2021-03-11 Source-File -1 (hydroflame)
 ------------------------------------------------
@@ -639,6 +835,7 @@ v0.49.0 - 2021-03-11 Source-File -1 (hydroflame)
 
 * Minor formatting under Hacking>Active Scripts
 * option menu colors now match the rest of the game, kinda.
+* nerf noodle bar
 
 
 v0.48.0 - ASCII - 2021-03-07 (hydroflame)
@@ -686,6 +883,7 @@ v0.48.0 - ASCII - 2021-03-07 (hydroflame)
     has bought but not installed
 * Character>Factions has a badge indicating how many factions have pending
     invites.
+* nerf noodle bar
 
 v0.47.2 - 7/15/2019
 -------------------

doc/source/conf.py

@@ -66,7 +66,7 @@ documentation_title = '{0} Documentation'.format(project)
 # The short X.Y version.
 version = '0.52'
 # The full version, including alpha/beta/rc tags.
-release = '0.52.2'
+release = '0.52.9'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

doc/source/guidesandtips/gettingstartedguideforbeginnerprogrammers.rst

@@ -636,7 +636,7 @@ This tells me that I can reach :code:`CSEC` by going through :code:`iron-gym`::
     from CSEC once you hit 50 hacking, you cannot actually pass their test
     until your hacking is high enough to install a backdoor on their server.
 
-After you are connected to the :code:`CSEC` server, you can hack it. Note that this
+After you are connected to the :code:`CSEC` server, you can backdoor it. Note that this
 server requires one open port in order to gain root access. We can open the SSH port
 using the :code:`BruteSSH.exe` program we created earlier. In |Terminal|::
 

doc/source/netscript/basicfunctions/tprintf.rst

@@ -0,0 +1,17 @@
+tprint() Netscript Function
+===========================
+
+.. js:function:: tprintf(format, args...)
+
+    :RAM cost: 0 GB
+    :param format: Format of the string to be printed.
+    :param args: Values to be formatted
+
+    Prints a raw formatted string to the terminal.
+
+    Example:
+
+    .. code-block:: javascript
+
+        tprintf("Hello world!"); // Prints "Hello world!" to the terminal.
+        tprintf("Hello %s", "world!"); // Prints "Hello world!" to the terminal.

doc/source/netscript/bladeburnerapi/getActionCountRemaining.rst

@@ -12,7 +12,7 @@ getActionCountRemaining() Netscript Function
     This function will return 'Infinity' for actions such as 'Training' and
     'Field Analysis'.
     This function will return 1 for BlackOps not yet completed regardless of
-    wether the player has the required rank to attempt the mission or not.
+    whether the player has the required rank to attempt the mission or not.
 
     Example:
 

doc/source/netscript/bladeburnerapi/getActionCurrentLevel.rst

@@ -12,4 +12,4 @@ getActionCurrentLevel() Netscript Function
 
     .. code-block:: javascript
 
-        bladeburner.getActionCountRemaining("Contracts", "Tracking"); // returns: 7
+        bladeburner.getActionCurrentLevel("Contracts", "Tracking"); // returns: 9

doc/source/netscript/bladeburnerapi/getActionEstimatedSuccessChance.rst

@@ -6,10 +6,10 @@ getActionEstimatedSuccessChance() Netscript Function
     :RAM cost: 4 GB
     :param string type: Type of action. See :ref:`bladeburner_action_types`
     :param string name: Name of action. Must be an exact match
-    :returns: Estimated success chance in decimal
+    :returns: Array of 2 number, lower and upper bound of the action chance.
 
     Example:
 
     .. code-block:: javascript
 
-        bladeburner.getActionEstimatedSuccessChance("Contracts", "Tracking"); // returns: .3
+        bladeburner.getActionEstimatedSuccessChance("Contracts", "Tracking"); // returns: [.3, .6]

doc/source/netscript/formulasapi/basic/growPercent.rst

@@ -1,12 +1,13 @@
 growPercent() Netscript Function
 =================================
 
-.. js:function:: growPercent(server, threads, player)
+.. js:function:: growPercent(server, threads, player, cores)
 
     :RAM cost: 0 GB
     :param server server: The server that receives the growth.
     :param number threads: The number of thread that would be used.
     :param player player: The player.
+    :param number cores: The amount of cores on the host computer.
     :returns: The amount the server's money would be multiplied by with these
         parameters.
 

doc/source/netscript/formulasapi/hacknetServers/hashGainRate.rst

@@ -8,7 +8,7 @@ hashGainRate() Netscript Function
     :param number ramUsed: ram used on the server.
     :param number maxRam: max ram of the server.
     :param number core: cores of the server.
-    :returns: Money per second that a server with those stats would gain per second.
+    :returns: Hashes per second that a server with those stats would gain.
 
     If you are not in BitNode-5, then you must have Source-File 5-1 in order to
     use this function. In addition, if you are not in BitNode-9, then you must

doc/source/netscript/gangapi/getMemberInformation.rst

@@ -13,30 +13,42 @@ getMemberInformation() Netscript Function
             name:          Name of this member.
             task:          Name of currently assigned task.
             earnedRespect: Total amount of respect earned by this member.
+
             hack:          Hacking stat
             str:           Strength stat
             def:           Defense stat
             dex:           Dexterity stat
             agi:           Agility stat
             cha:           Charisma stat
+
             hack_exp:      Hacking experience
             str_exp:       Strength experience
             def_exp:       Defense experience
             dex_exp:       Dexterity experience
             agi_exp:       Agility experience
             cha_exp:       Charisma experience
+
             hack_mult:     Hacking multiplier from equipment. Decimal form
             str_mult:      Strength multiplier from equipment. Decimal form
             def_mult:      Defense multiplier from equipment. Decimal form
             dex_mult:      Dexterity multiplier from equipment. Decimal form
             agi_mult:      Agility multiplier from equipment. Decimal form
             cha_mult:      Charisma multiplier from equipment. Decimal form
+
             hack_asc_mult: Hacking multiplier from ascension. Decimal form
             str_asc_mult:  Strength multiplier from ascension. Decimal form
             def_asc_mult:  Defense multiplier from ascension. Decimal form
             dex_asc_mult:  Dexterity multiplier from ascension. Decimal form
             agi_asc_mult:  Agility multiplier from ascension. Decimal form
             cha_asc_mult:  Charisma multiplier from ascension. Decimal form
+
+            hack_asc_points: Hacking ascension points.
+            str_asc_points:  Strength ascension points.
+            def_asc_points:  Defense ascension points.
+            dex_asc_points:  Dexterity ascension points.
+            agi_asc_points:  Agility ascension points.
+            cha_asc_points:  Charisma ascension points.
+
             upgrades:      Array of names of all owned Non-Augmentation Equipment
             augmentations: Array of names of all owned Augmentations
         }

doc/source/netscript/netscriptfunctions.rst

@@ -19,6 +19,7 @@ This includes information such as function signatures, what they do, and their r
     sleep() <basicfunctions/sleep>
     print() <basicfunctions/print>
     tprint() <basicfunctions/tprint>
+    tprintf() <basicfunctions/tprint>
     clearLog() <basicfunctions/clearLog>
     disableLog() <basicfunctions/disableLog>
     enableLog() <basicfunctions/enableLog>

index.html

@@ -33,83 +33,83 @@
         <ul id="mainmenu" class="mainmenu noscrollbar">
             <!-- Hacking dropdown -->
             <li id="hacking-menu-header-li">
-                <button id="hacking-menu-header" class="mainmenu-accordion-header"> Hacking </button>
+                <button id="hacking-menu-header" class="mainmenu-accordion-header noselect"> Hacking </button>
             </li>
-            <li id="terminal-tab" class="mainmenu-accordion-panel">
+            <li id="terminal-tab" class="mainmenu-accordion-panel noselect">
                 <button id="terminal-menu-link"> Terminal </button>
             </li>
-            <li id="create-script-tab" class="mainmenu-accordion-panel">
+            <li id="create-script-tab" class="mainmenu-accordion-panel noselect">
                 <button id="create-script-menu-link"> Create Script </button>
             </li>
-            <li id="active-scripts-tab" class="mainmenu-accordion-panel">
+            <li id="active-scripts-tab" class="mainmenu-accordion-panel noselect">
                 <button id="active-scripts-menu-link"> Active Scripts </button>
             </li>
-            <li id="create-program-tab" class="mainmenu-accordion-panel">
+            <li id="create-program-tab" class="mainmenu-accordion-panel noselect">
                 <button id="create-program-menu-link"> Create Program </button>
                 <span id="create-program-notification" class="notification-off"> </span>
             </li>
 
             <!-- Character dropdown -->
             <li id="character-menu-header-li">
-                <button id="character-menu-header" class="mainmenu-accordion-header"> Character </button>
+                <button id="character-menu-header" class="mainmenu-accordion-header noselect"> Character </button>
             </li>
-            <li id="stats-tab" class="mainmenu-accordion-panel">
+            <li id="stats-tab" class="mainmenu-accordion-panel noselect">
                 <button id="stats-menu-link"> Stats </button>
             </li>
-            <li id="factions-tab" class="mainmenu-accordion-panel">
+            <li id="factions-tab" class="mainmenu-accordion-panel noselect">
                 <button id="factions-menu-link"> Factions </button>
                 <span id="factions-notification" class="notification-off"> </span>
             </li>
-            <li id="augmentations-tab" class="mainmenu-accordion-panel">
+            <li id="augmentations-tab" class="mainmenu-accordion-panel noselect">
                 <button id="augmentations-menu-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Augmentations </button>
                 <span id="augmentations-notification" class="notification-off"> </span>
             </li>
-            <li id="hacknet-nodes-tab" class="mainmenu-accordion-panel">
+            <li id="hacknet-nodes-tab" class="mainmenu-accordion-panel noselect">
                 <button id="hacknet-nodes-menu-link"> Hacknet </button>
             </li>
-            <li id="sleeves-tab" class="mainmenu-accordion-panel">
+            <li id="sleeves-tab" class="mainmenu-accordion-panel noselect">
                 <button id="sleeves-menu-link"> Sleeves </button>
             </li>
 
             <!-- World dropdown -->
             <li id="world-menu-header-li">
-                <button id="world-menu-header" class="mainmenu-accordion-header">World</button>
+                <button id="world-menu-header" class="mainmenu-accordion-header noselect">World</button>
             </li>
-			<li id="city-tab" class="mainmenu-accordion-panel">
+			<li id="city-tab" class="mainmenu-accordion-panel noselect">
                 <button id="city-menu-link"> City </button>
             </li>
-            <li id="travel-tab" class="mainmenu-accordion-panel">
+            <li id="travel-tab" class="mainmenu-accordion-panel noselect">
                 <button id="travel-menu-link"> Travel </button>
             </li>
-            <li id="job-tab" class="mainmenu-accordion-panel">
+            <li id="job-tab" class="mainmenu-accordion-panel noselect">
                 <button id="job-menu-link"> Job </button>
             </li>
-            <li id="stock-market-tab" class="mainmenu-accordion-panel">
+            <li id="stock-market-tab" class="mainmenu-accordion-panel noselect">
                 <button id="stock-market-menu-link"> Stock Market </button>
             </li>
-            <li id="bladeburner-tab" class="mainmenu-accordion-panel">
+            <li id="bladeburner-tab" class="mainmenu-accordion-panel noselect">
                 <button id="bladeburner-menu-link"> Bladeburner </button>
             </li>
-            <li id="corporation-tab" class="mainmenu-accordion-panel">
+            <li id="corporation-tab" class="mainmenu-accordion-panel noselect">
                 <button id="corporation-menu-link"> Corp </button>
             </li>
-            <li id="gang-tab" class="mainmenu-accordion-panel">
+            <li id="gang-tab" class="mainmenu-accordion-panel noselect">
                 <button id="gang-menu-link"> Gang </button>
             </li>
 
             <li id="help-menu-header-li">
-                <button id="help-menu-header" class="mainmenu-accordion-header"> Help </button>
+                <button id="help-menu-header" class="mainmenu-accordion-header noselect"> Help </button>
             </li>
-            <li id="milestones-tab" class="mainmenu-accordion-panel">
+            <li id="milestones-tab" class="mainmenu-accordion-panel noselect">
                 <button id="milestones-menu-link"> Milestones </button>
             </li>
-            <li id="tutorial-tab" class="mainmenu-accordion-panel">
+            <li id="tutorial-tab" class="mainmenu-accordion-panel noselect">
                 <button id="tutorial-menu-link"> Tutorial </button>
             </li>
-            <li id="options-tab" class="mainmenu-accordion-panel">
+            <li id="options-tab" class="mainmenu-accordion-panel noselect">
                 <button id="options-menu-link"> Options </button>
             </li>
-            <li id="dev-tab" class="mainmenu-accordion-panel">
+            <li id="dev-tab" class="mainmenu-accordion-panel noselect">
                 <button id="dev-menu-link"> Dev </button>
             </li>
         </ul>
@@ -123,11 +123,8 @@
             <input id="script-editor-filename" type="text" maxlength="100" tabindex="1"/>
         </div>
 
-        <div id="ace-editor"></div>
-        <form id="codemirror-form-wrapper"><textarea id="codemirror-editor"></textarea></form>
-        <div id="codemirror-vim-command-display-wrapper">
-            Key Buffer: <span id="codemirror-vim-command-display"></span>
-        </div>
+        <div id="monaco-editor"></div>
+
 
         <div id="script-editor-buttons-wrapper"></div> <!-- Buttons below script editor -->
         </div> <!-- End wrapper -->
@@ -173,6 +170,14 @@
             <fieldset id="script-editor-option-flex4-fieldset"></fieldset>
 
         </div> <!-- End script editor options panel -->
+
+
+        <!-- TODO(hydroflame): remove this once Monaco is implemented -->
+        <div id="ace-editor" style="display: none"></div>
+        <form id="codemirror-form-wrapper" style="display: none"><textarea id="codemirror-editor"></textarea></form>
+        <div id="codemirror-vim-command-display-wrapper" style="display: none">
+            Key Buffer: <span id="codemirror-vim-command-display"></span>
+        </div>
 	</div>
 
 	<!-- Terminal page -->
@@ -230,8 +235,10 @@
 	<div id="augmentations-container" class="generic-menupage-container"></div>
 
     <!-- Milestones content -->
-    <div id="milestones-container" class="generic-menupage-container">
-    </div>
+    <div id="milestones-container" class="generic-menupage-container"></div>
+    
+    <!-- Bladeburner -->
+    <div id="bladeburner-container" class="generic-menupage-container"></div>
 
 	<!-- Tutorial content -->
 	<div id="tutorial-container" class="generic-menupage-container">
@@ -271,14 +278,8 @@
         <!-- React Component -->
     </div>
 
-    <!-- Log Box -->
-    <div id="log-box-container">
-        <div id="log-box-content">
-            <button id="log-box-close" class="popup-box-button"> Close </button>
-            <button id="log-box-kill-script" class="popup-box-button">Kill Script</button>
-            <p id="log-box-text-header"> </p>
-            <p id="log-box-text"> </p>
-        </div>
+    <div id="gang-container" class="generic-menupage-container">
+        <!-- React Component -->
     </div>
 
     <!-- Generic Yes/No Pop Up box -->
@@ -362,7 +363,7 @@
         <div id="character-overview-text">
             <!-- ReactJS Component -->
         </div>
-        <div class="character-quick-options">
+        <div class="character-quick-options noselect">
             <button id="character-overview-save-button" class="character-overview-btn">Save Game</button>
             <button id="character-overview-options-button" class="character-overview-btn">Options</button>
         </div>
@@ -580,10 +581,12 @@
                     Copy Save data to Clipboard
                 </button>
                 <button id="debug-delete-scripts-link" class="a-link-button tooltip">
-                    Delete all active scripts
+                    Force kill all active scripts
                     <span class="tooltiptextleft">
                         Forcefully kill all active running scripts, in case there is a bug or some unexpected issue with the game. After
-                        using this, save the game and then reload the page.
+                        using this, save the game and then reload the page. This is different then normal kill in that normal kill
+                        will tell the script to shut down while force kill just removes the references to it (and it should crash on it's own).
+                        This will not remove the files on your computer. Just forcefully kill all running instance of all scripts.
                     </span>
                 </button>
                 <button id="debug-soft-reset" class="a-link-button tooltip">
@@ -592,6 +595,14 @@
                         Perform a soft reset. Resets everything as if you had just purchased an Augmentation.
                     </span>
                 </button>
+                <button id="debug-files" class="a-link-button tooltip">
+                    Diagnose files
+                    <span class="tooltiptextleft">
+                        If your save file is extremely big you can use this button
+                        to view a map of all the files on every server. Be careful
+                        there might be spoilers.
+                    </span>
+                </button>
             </div>
         </div>
     </div>

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    setupFiles: ["./jest.setup.js"],
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+    transform: {
+        "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+    },
+    // testMatch: ["**/?(*.)+(test).[jt]s?(x)"],
+    testEnvironment: "jsdom",
+};

jest.setup.js

@@ -0,0 +1,2 @@
+import "regenerator-runtime/runtime";
+global.$ = require("jquery");

package.json

@@ -7,6 +7,8 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.3",
+    "@monaco-editor/react": "^4.2.2",
+    "@types/js-beautify": "^1.13.2",
     "@types/numeral": "0.0.25",
     "@types/react": "^16.8.6",
     "@types/react-dom": "^16.8.2",
@@ -33,6 +35,7 @@
     "loader-runner": "^2.3.0",
     "loader-utils": "^1.1.0",
     "memory-fs": "~0.4.1",
+    "monaco-editor": "^0.27.0",
     "node-sass": "^6.0.1",
     "normalize.css": "^8.0.0",
     "numeral": "2.0.6",
@@ -47,17 +50,18 @@
   "description": "A cyberpunk-themed incremental game",
   "devDependencies": {
     "@babel/core": "^7.3.4",
+    "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.0.0",
-    "@types/chai": "^4.1.7",
+    "@babel/preset-typescript": "^7.15.0",
+    "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.168",
-    "@types/mocha": "^5.2.7",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.0.5",
     "beautify-lint": "^1.0.3",
     "benchmark": "^2.1.1",
     "bundle-loader": "~0.5.0",
-    "chai": "^4.2.0",
     "css-loader": "^0.28.11",
     "es6-promise-polyfill": "^1.1.1",
     "eslint": "^7.24.0",
@@ -66,6 +70,7 @@
     "html-webpack-plugin": "^3.2.0",
     "i18n-webpack-plugin": "^1.0.0",
     "istanbul": "^0.4.5",
+    "jest": "^27.0.6",
     "js-beautify": "^1.5.10",
     "jsdom": "^15.0.0",
     "jsdom-global": "^3.0.2",
@@ -75,10 +80,9 @@
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^0.4.1",
     "mkdirp": "^0.5.1",
-    "mocha": "^6.1.4",
-    "mochapack": "^1.1.1",
     "null-loader": "^1.0.0",
     "raw-loader": "~0.5.0",
+    "regenerator-runtime": "^0.13.9",
     "sass-loader": "^7.0.3",
     "script-loader": "~0.7.0",
     "should": "^11.1.1",
@@ -121,10 +125,10 @@
     "lint:jsts": "eslint --fix '*.{js,jsx,ts,tsx}' './src/**/*.{js,jsx,ts,tsx}' './test/**/*.{js,jsx,ts,tsx}' './utils/**/*.{js,jsx,ts,tsx}'",
     "lint:style": "stylelint --fix ./css/*",
     "preinstall": "node ./scripts/engines-check.js",
-    "test": "mochapack --webpack-config webpack.config-test.js -r jsdom-global/register ./test/index.js",
-    "test:container": "mochapack --webpack-config webpack.config-test.js --slow 2000 --timeout 10000 -r jsdom-global/register ./test/index.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "watch": "webpack --watch --mode production",
     "watch:dev": "webpack --watch --mode development"
   },
-  "version": "0.52.2"
+  "version": "0.52.9"
 }

src/Augmentation/Augmentation.tsx

@@ -55,7 +55,7 @@ interface IConstructorParams {
 }
 
 function generateStatsDescription(mults: IMap<number>, programs?: string[], startingMoney?: number): JSX.Element {
-    const f = (x: number, decimals: number = 0) => {
+    const f = (x: number, decimals = 0): string => {
         // look, I don't know how to make a "smart decimals"
         // todo, make it smarter
         if(x === 1.0777-1) return "7.77%";

src/Augmentation/AugmentationHelpers.jsx

@@ -18,8 +18,6 @@ import { SourceFileFlags } from "../SourceFile/SourceFileFlags";
 
 import { dialogBoxCreate } from "../../utils/DialogBox";
 import { clearObject } from "../../utils/helpers/clearObject";
-import { Money } from "../ui/React/Money";
-import { CorruptableText } from "../ui/React/CorruptableText";
 
 import { WHRNG } from "../Casino/RNG";
 
@@ -1865,11 +1863,6 @@ function initAugmentations() {
         resetAugmentation(BladesSimulacrum);
     }
 
-    try {
-        console.log([1, 0.96, 0.94, 0.93][SourceFileFlags[11]]);
-    } catch(err) {
-        console.log(err);
-    }
     // Update costs based on how many have been purchased
     mult = Math.pow(CONSTANTS.MultipleAugMultiplier * [1, 0.96, 0.94, 0.93][SourceFileFlags[11]], Player.queuedAugmentations.length);
     for (var name in Augmentations) {

src/Augmentation/ui/PurchasedAugmentations.tsx

@@ -7,7 +7,6 @@ import * as React from "react";
 import { Augmentations } from "../../Augmentation/Augmentations";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
 import { Player } from "../../Player";
-import { IPlayerOwnedAugmentation } from "../../Augmentation/PlayerOwnedAugmentation";
 
 import { AugmentationAccordion } from "../../ui/React/AugmentationAccordion";
 

src/Bladeburner/Action.ts

@@ -194,6 +194,23 @@ export class Action implements IAction {
         return 1;
     }
 
+    getEstSuccessChance(inst: IBladeburner): number[] {
+        function clamp(x: number): number {
+            return Math.max(0, Math.min(x, 1));
+        }
+        const est = this.getSuccessChance(inst, {est: true});
+        const real = this.getSuccessChance(inst);
+        const diff = Math.abs(real-est);
+        let low = real-diff;
+        let high = real+diff;
+        const city = inst.getCurrentCity();
+        const r = city.pop / city.popEst;
+
+        if(r < 1) low *= r;
+        else high *= r;
+        return [clamp(low), clamp(high)];
+    }
+
     /**
      * @inst - Bladeburner Object
      * @params - options:

src/Bladeburner/ActionIdentifier.ts

@@ -0,0 +1,28 @@
+import { IActionIdentifier } from "./IActionIdentifier";
+import { Generic_fromJSON, Generic_toJSON, Reviver } from "../../utils/JSONReviver";
+
+interface IParams {
+    name?: string;
+    type?: number;
+}
+
+export class ActionIdentifier implements IActionIdentifier {
+    name = "";
+    type = -1;
+
+    constructor(params: IParams = {}) {
+        if (params.name) this.name = params.name;
+        if (params.type) this.type = params.type;
+    }
+
+    toJSON(): any {
+        return Generic_toJSON("ActionIdentifier", this);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    static fromJSON(value: any): ActionIdentifier {
+        return Generic_fromJSON(ActionIdentifier, value.data);
+    }
+}
+
+Reviver.constructors.ActionIdentifier = ActionIdentifier;

src/Bladeburner/City.ts

@@ -4,14 +4,14 @@ import { getRandomInt } from "../../utils/helpers/getRandomInt";
 import { Generic_fromJSON, Generic_toJSON, Reviver } from "../../utils/JSONReviver";
 import { addOffset } from "../../utils/helpers/addOffset";
 
-export class ChangePopulationByCountParams {
-    estChange = 0;
-    estOffset = 0;
+interface IChangePopulationByCountParams {
+    estChange: number;
+    estOffset: number;
 }
 
-export class ChangePopulationByPercentageParams {
-    nonZero = false;
-    changeEstEqually = false;
+interface IChangePopulationByPercentageParams {
+    nonZero: boolean;
+    changeEstEqually: boolean;
 }
 
 export class City {
@@ -113,7 +113,7 @@ export class City {
      *  estChange(int): How much the estimate should change by
      *  estOffset(int): Add offset to estimate (offset by percentage)
      */
-    changePopulationByCount(n: number, params: ChangePopulationByCountParams=new ChangePopulationByCountParams()): void {
+    changePopulationByCount(n: number, params: IChangePopulationByCountParams = {estChange: 0, estOffset: 0}): void {
         if (isNaN(n)) {throw new Error("NaN passed into City.changePopulationByCount()");}
         this.pop += n;
         if (params.estChange && !isNaN(params.estChange)) {this.popEst += params.estChange;}
@@ -129,7 +129,7 @@ export class City {
      *  changeEstEqually(bool) - Change the population estimate by an equal amount
      *  nonZero (bool)         - Set to true to ensure that population always changes by at least 1
      */
-    changePopulationByPercentage(p: number, params: ChangePopulationByPercentageParams=new ChangePopulationByPercentageParams()): number {
+    changePopulationByPercentage(p: number, params: IChangePopulationByPercentageParams={nonZero: false, changeEstEqually: false}): number {
         if (isNaN(p)) {throw new Error("NaN passed into City.changePopulationByPercentage()");}
         if (p === 0) {return 0;}
         let change = Math.round(this.pop * (p/100));

src/Bladeburner/IAction.ts

@@ -64,6 +64,7 @@ export interface IAction {
     getActionTypeSkillSuccessBonus(inst: IBladeburner): number;
     getChaosCompetencePenalty(inst: IBladeburner, params: ISuccessChanceParams): number;
     getChaosDifficultyBonus(inst: IBladeburner): number;
+    getEstSuccessChance(inst: IBladeburner): number[];
     getSuccessChance(inst: IBladeburner, params: ISuccessChanceParams): number;
     getSuccessesNeededForNextLevel(baseSuccessesPerLevel: number): number;
     setMaxLevel(baseSuccessesPerLevel: number): void;

src/Bladeburner/IActionIdentifier.ts

@@ -1,4 +1,4 @@
 export interface IActionIdentifier {
     name: string;
-    type: string;
+    type: number;
 }

src/Bladeburner/IBladeburner.ts

@@ -1,20 +1,33 @@
 import { IActionIdentifier } from "./IActionIdentifier";
 import { City } from "./City";
+import { Skill } from "./Skill";
+import { IAction } from "./IAction";
+import { IPlayer } from "../PersonObjects/IPlayer";
+import { WorkerScript } from "../Netscript/WorkerScript";
 
 export interface IBladeburner {
     numHosp: number;
     moneyLost: number;
     rank: number;
     maxRank: number;
+
     skillPoints: number;
     totalSkillPoints: number;
+
     teamSize: number;
     teamLost: number;
+    hpLost: number;
+
     storedCycles: number;
+
     randomEventCounter: number;
+
     actionTimeToComplete: number;
     actionTimeCurrent: number;
+    actionTimeOverflow: number;
+
     action: IActionIdentifier;
+
     cities: any;
     city: string;
     skills: any;
@@ -27,13 +40,66 @@ export interface IBladeburner {
     blackops: any;
     logging: any;
     automateEnabled: boolean;
-    automateActionHigh: number;
+    automateActionHigh: IActionIdentifier;
     automateThreshHigh: number;
-    automateActionLow: number;
+    automateActionLow: IActionIdentifier;
     automateThreshLow: number;
     consoleHistory: string[];
     consoleLogs: string[];
 
     getCurrentCity(): City;
     calculateStaminaPenalty(): number;
+    startAction(player: IPlayer, action: IActionIdentifier): void;
+    upgradeSkill(skill: Skill): void;
+    executeConsoleCommands(player: IPlayer, command: string): void;
+    postToConsole(input: string, saveToLogs?: boolean): void;
+    log(input: string): void;
+    resetAction(): void;
+    clearConsole(): void;
+
+    prestige(): void;
+    storeCycles(numCycles?: number): void;
+    getTypeAndNameFromActionId(actionId: IActionIdentifier): {type: string; name: string};
+    getContractNamesNetscriptFn(): string[];
+    getOperationNamesNetscriptFn(): string[];
+    getBlackOpNamesNetscriptFn(): string[];
+    getGeneralActionNamesNetscriptFn(): string[];
+    getSkillNamesNetscriptFn(): string[];
+    startActionNetscriptFn(player: IPlayer, type: string, name: string, workerScript: WorkerScript): boolean;
+    getActionTimeNetscriptFn(player: IPlayer, type: string, name: string, workerScript: WorkerScript): number;
+    getActionEstimatedSuccessChanceNetscriptFn(player: IPlayer, type: string, name: string, workerScript: WorkerScript): number[];
+    getActionCountRemainingNetscriptFn(type: string, name: string, workerScript: WorkerScript): number;
+    getSkillLevelNetscriptFn(skillName: string, workerScript: WorkerScript): number;
+    getSkillUpgradeCostNetscriptFn(skillName: string, workerScript: WorkerScript): number;
+    upgradeSkillNetscriptFn(skillName: string, workerScript: WorkerScript): boolean;
+    getTeamSizeNetscriptFn(type: string, name: string, workerScript: WorkerScript): number;
+    setTeamSizeNetscriptFn(type: string, name: string, size: number, workerScript: WorkerScript): number;
+    joinBladeburnerFactionNetscriptFn(workerScript: WorkerScript): boolean;
+    getActionIdFromTypeAndName(type: string, name: string): IActionIdentifier | null;
+    executeStartConsoleCommand(player: IPlayer, args: string[]): void;
+    executeSkillConsoleCommand(args: string[]): void;
+    executeLogConsoleCommand(args: string[]): void;
+    executeHelpConsoleCommand(args: string[]): void;
+    executeAutomateConsoleCommand(args: string[]): void;
+    parseCommandArguments(command: string): string[];
+    executeConsoleCommand(player: IPlayer, command: string): void;
+    triggerMigration(sourceCityName: string): void;
+    triggerPotentialMigration(sourceCityName: string, chance: number): void;
+    randomEvent(): void;
+    gainActionStats(player: IPlayer, action: IAction, success: boolean): void;
+    getDiplomacyEffectiveness(player: IPlayer): number;
+    getRecruitmentSuccessChance(player: IPlayer): number;
+    getRecruitmentTime(player: IPlayer): number;
+    resetSkillMultipliers(): void;
+    updateSkillMultipliers(): void;
+    completeOperation(success: boolean): void;
+    getActionObject(actionId: IActionIdentifier): IAction | null;
+    completeContract(success: boolean): void;
+    completeAction(player: IPlayer): void;
+    changeRank(player: IPlayer, change: number): void;
+    processAction(player: IPlayer, seconds: number): void;
+    calculateStaminaGainPerSecond(player: IPlayer): number;
+    calculateMaxStamina(player: IPlayer): void;
+    create(): void;
+    process(player: IPlayer): void;
 }

src/Bladeburner/Skill.ts

@@ -103,5 +103,28 @@ export class Skill {
     calculateCost(currentLevel: number): number {
         return Math.floor((this.baseCost + (currentLevel * this.costInc)) * BitNodeMultipliers.BladeburnerSkillCost);
     }
+
+    getMultiplier(name: string): number {
+        if(name === "successChanceAll") return this.successChanceAll;
+        if(name === "successChanceStealth") return this.successChanceStealth;
+        if(name === "successChanceKill") return this.successChanceKill;
+        if(name === "successChanceContract") return this.successChanceContract;
+        if(name === "successChanceOperation") return this.successChanceOperation;
+        if(name === "successChanceEstimate") return this.successChanceEstimate;
+
+        if(name === "actionTime") return this.actionTime;
+
+        if(name === "effHack") return this.effHack;
+        if(name === "effStr") return this.effStr;
+        if(name === "effDef") return this.effDef;
+        if(name === "effDex") return this.effDex;
+        if(name === "effAgi") return this.effAgi;
+        if(name === "effCha") return this.effCha;
+
+        if(name === "stamina") return this.stamina;
+        if(name === "money") return this.money;
+        if(name === "expGain") return this.expGain;
+        return 0;
+    }
 }
 

src/Bladeburner/data/ActionTypes.ts

@@ -1,5 +1,18 @@
 // Action Identifier enum
-export const ActionTypes = Object.freeze({
+export const ActionTypes: {
+    [key: string]: number;
+    "Idle": number;
+    "Contract": number;
+    "Operation": number;
+    "BlackOp": number;
+    "BlackOperation": number;
+    "Training": number;
+    "Recruitment": number;
+    "FieldAnalysis": number;
+    "Field Analysis": number;
+    "Diplomacy": number;
+    "Hyperbolic Regeneration Chamber": number;
+} = {
     "Idle":                             1,
     "Contract":                         2,
     "Operation":                        3,
@@ -11,4 +24,4 @@ export const ActionTypes = Object.freeze({
     "Field Analysis":                   7,
     "Diplomacy":                        8,
     "Hyperbolic Regeneration Chamber":  9,
-});
+};

src/Bladeburner/data/Help.ts

@@ -1,4 +1,5 @@
 export const ConsoleHelpText: {
+  [key: string]: string[];
   helpList: string[];
   automate: string[];
   clear: string[];

src/Bladeburner/data/Icons.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export const stealthIcon = <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 166 132" style={{fill:'#adff2f'}}>
+    <g>
+        <path d="M132.658-0.18l-24.321,24.321c-7.915-2.71-16.342-4.392-25.087-4.392c-45.84,0-83,46-83,46   s14.1,17.44,35.635,30.844L12.32,120.158l12.021,12.021L144.68,11.841L132.658-0.18z M52.033,80.445   c-2.104-4.458-3.283-9.438-3.283-14.695c0-19.054,15.446-34.5,34.5-34.5c5.258,0,10.237,1.179,14.695,3.284L52.033,80.445z" />
+        <path d="M134.865,37.656l-18.482,18.482c0.884,3.052,1.367,6.275,1.367,9.612c0,19.055-15.446,34.5-34.5,34.5   c-3.337,0-6.56-0.483-9.611-1.367l-10.124,10.124c6.326,1.725,12.934,2.743,19.735,2.743c45.84,0,83-46,83-46   S153.987,50.575,134.865,37.656z" />
+    </g>
+</svg>
+export const killIcon = <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="-22 0 511 511.99561" style={{fill:'#adff2f'}}>
+    <path d="m.496094 466.242188 39.902344-39.902344 45.753906 45.753906-39.898438 39.902344zm0 0" />
+    <path d="m468.421875 89.832031-1.675781-89.832031-300.265625 300.265625 45.753906 45.753906zm0 0" />
+    <path d="m95.210938 316.785156 16.84375 16.847656h.003906l83.65625 83.65625 22.753906-22.753906-100.503906-100.503906zm0 0" />
+    <path d="m101.445312 365.300781-39.902343 39.902344 45.753906 45.753906 39.902344-39.902343-39.90625-39.902344zm0 0" />
+</svg>

src/Bladeburner/ui/AllPages.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import { GeneralActionPage } from "./GeneralActionPage";
+import { ContractPage } from "./ContractPage";
+import { OperationPage } from "./OperationPage";
+import { BlackOpPage } from "./BlackOpPage";
+import { SkillPage } from "./SkillPage";
+import { stealthIcon, killIcon } from "../data/Icons";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function AllPages(props: IProps): React.ReactElement {
+    const [page, setPage] = useState('General');
+    const setRerender = useState(false)[1];
+
+    useEffect(() => {
+        const id = setInterval(() => setRerender(old => !old), 1000);
+        return () => clearInterval(id);
+    }, []);
+
+    function Header(props: {name: string}): React.ReactElement {
+        return (<a
+                onClick={()=>setPage(props.name)}
+                className={page !== props.name ?
+                    "bladeburner-nav-button" :
+                    "bladeburner-nav-button-inactive"}>
+            {props.name}
+        </a>);
+    }
+    return (<>
+        <Header name={'General'} />
+        <Header name={'Contracts'} />
+        <Header name={'Operations'} />
+        <Header name={'BlackOps'} />
+        <Header name={'Skills'} />
+        <div style={{display:"block", margin:"4px", padding:"4px"}}>
+            {page === 'General' && <GeneralActionPage bladeburner={props.bladeburner} player={props.player} />}
+            {page === 'Contracts' && <ContractPage bladeburner={props.bladeburner} player={props.player} />}
+            {page === 'Operations' && <OperationPage bladeburner={props.bladeburner} player={props.player} />}
+            {page === 'BlackOps' && <BlackOpPage bladeburner={props.bladeburner} player={props.player} />}
+            {page === 'Skills' && <SkillPage bladeburner={props.bladeburner} />}
+        </div>
+        <span className="text">{stealthIcon} = This action requires stealth, {killIcon} = This action involves retirement</span>
+    </>);
+}

src/Bladeburner/ui/BlackOpElem.tsx

@@ -0,0 +1,89 @@
+import React, { useState } 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";
+import { createPopup } from "../../ui/React/createPopup";
+import { TeamSizePopup } from "./TeamSizePopup";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { SuccessChance } from "./SuccessChance";
+import { CopyableText } from "../../ui/React/CopyableText";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+    action: any;
+}
+
+export function BlackOpElem(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    const isCompleted = (props.bladeburner.blackops[props.action.name] != null);
+    if(isCompleted) {
+        return (
+            <h2 style={{display: 'block'}}>{props.action.name} (COMPLETED)</h2>);
+    }
+
+    const isActive = props.bladeburner.action.type === ActionTypes["BlackOperation"] && props.action.name === props.bladeburner.action.name;
+    const estimatedSuccessChance = props.action.getEstSuccessChance(props.bladeburner);
+    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(): void {
+        props.bladeburner.action.type = ActionTypes.BlackOperation;
+        props.bladeburner.action.name = props.action.name;
+        props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    function onTeam(): void {
+        const popupId = "bladeburner-operation-set-team-size-popup";
+        createPopup(popupId, TeamSizePopup, {
+            bladeburner: props.bladeburner,
+            action: props.action,
+            popupId: popupId,
+        });
+    }
+
+    return (<>
+        <h2 style={{display: 'inline-block'}}>
+            {isActive ? 
+                <><CopyableText value={props.action.name} /> (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)})</> :
+                <CopyableText value={props.action.name} />
+            }
+        </h2>
+        {isActive ? 
+        <p style={{display: 'block'}}>{createProgressBarText({progress: computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}</p> :
+        <>
+            <a
+                className={hasReqdRank ? "a-link-button" : "a-link-button-inactive"}
+                style={{margin:"3px", padding:"3px"}}
+                onClick={onStart}
+                >Start</a>
+            <a
+                onClick={onTeam}
+                style={{margin:"3px", padding:"3px"}}
+                className="a-link-button">
+                Set Team Size (Curr Size: {formatNumber(props.action.teamCount, 0)})
+            </a>
+        </>}
+        <br />
+        <br />
+        <p style={{display:"inline-block"}} dangerouslySetInnerHTML={{__html: props.action.desc}} />
+        <br />
+        <br />
+        <p style={{display:"block", color:hasReqdRank ? "white" : "red"}}>
+            Required Rank: {formatNumber(props.action.reqdRank, 0)}
+        </p>
+        <br />
+        <pre style={{display:"inline-block"}}>
+            Estimated Success Chance: <SuccessChance chance={estimatedSuccessChance} /> {props.action.isStealth?stealthIcon:<></>}{props.action.isKill?killIcon:<></>}
+            <br />
+            Time Required: {convertTimeMsToTimeElapsedString(actionTime*1000)}
+        </pre>
+    </>);
+}

src/Bladeburner/ui/BlackOpList.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { BlackOperations } from "../BlackOperations";
+import { BlackOperation } from "../BlackOperation";
+import { BlackOpElem } from "./BlackOpElem";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function BlackOpList(props: IProps): React.ReactElement {
+    let blackops: BlackOperation[] = [];
+    for (const blackopName in BlackOperations) {
+        if (BlackOperations.hasOwnProperty(blackopName)) {
+            blackops.push(BlackOperations[blackopName]);
+        }
+    }
+    blackops.sort(function(a, b) {
+        return (a.reqdRank - b.reqdRank);
+    });
+
+    blackops = blackops.filter((blackop: BlackOperation, i: number) => !(props.bladeburner.blackops[blackops[i].name] == null &&
+            i !== 0 &&
+            props.bladeburner.blackops[blackops[i-1].name] == null));
+
+    blackops = blackops.reverse();
+
+    return (<>
+        {blackops.map((blackop: BlackOperation) => <li key={blackop.name} className="bladeburner-action">
+                <BlackOpElem bladeburner={props.bladeburner} action={blackop} player={props.player} />
+            </li>,
+        )}
+    </>);
+}

src/Bladeburner/ui/BlackOpPage.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { BlackOpList } from "./BlackOpList";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { CopyableText } from "../../ui/React/CopyableText";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function BlackOpPage(props: IProps): React.ReactElement {
+    return (<>
+        <p style={{display: 'block', margin: '4px', padding: '4px'}}>
+            Black Operations (Black Ops) are special, one-time covert operations. 
+            Each Black Op must be unlocked successively by completing 
+            the one before it.
+            <br />
+            <br />
+            <b>Your ultimate goal to climb through the ranks of Bladeburners is to complete 
+            all of the Black Ops.</b>
+            <br />
+            <br />
+            Like normal operations, you may use a team for Black Ops. Failing 
+            a black op will incur heavy HP and rank losses.
+        </p>
+        <BlackOpList bladeburner={props.bladeburner} player={props.player} />
+    </>);
+}

src/Bladeburner/ui/BlackOperationsPage.tsx

@@ -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.<br><br>" +
-    "<b>Your ultimate goal to climb through the ranks of Bladeburners is to complete " +
-    "all of the Black Ops.</b><br><br>" +
-    "Like normal operations, you may use a team for Black Ops. Failing " +
-    "a black op will incur heavy HP and rank losses.";
-
-// Put Black Operations in sequence of required rank
-var blackops = [];
-for (var blackopName in BlackOperations) {
-    if (BlackOperations.hasOwnProperty(blackopName)) {
-        blackops.push(BlackOperations[blackopName]);
-    }
-}
-blackops.sort(function(a, b) {
-    return (a.reqdRank - b.reqdRank);
-});
-
-for (var i = blackops.length-1; i >= 0 ; --i) {
-  if (this.blackops[[blackops[i].name]] == null && i !== 0 && this.blackops[[blackops[i-1].name]] == null) {continue;} // If this one nor the next are completed then this isn't unlocked yet.
-    DomElems.blackops[blackops[i].name] = createElement("div", {
-        class:"bladeburner-action", name:blackops[i].name
-    });
-    DomElems.actionsAndSkillsList.appendChild(DomElems.blackops[blackops[i].name]);
-}
-*/
-
-
-
-import * as React from "react";
-
-export function BlackOperationsPage(): React.ReactElement {
-    // Put Black Operations in sequence of required rank
-    const blackops = [];
-    for (const name in BlackOperations) {
-        if (BlackOperations.hasOwnProperty(name)) {
-            blackops.push(BlackOperations[name]);
-        }
-    }
-    blackops.sort(function(a, b) {
-        return (a.reqdRank - b.reqdRank);
-    });
-
-    return (<div>
-        <p>
-            Black Operations (Black Ops) are special, one-time covert operations. Each Black Op must be unlocked successively by completing the one before it.<br /><br />
-        <b>Your ultimate goal to climb through the ranks of Bladeburners is to complete all of the Black Ops.</b><br /><br />
-        Like normal operations, you may use a team for Black Ops. Failing a black op will incur heavy HP and rank losses.</p>
-        {blackops.map(() => <div className="bladeburner-action">
-            </div>,
-        )}
-    </div>)
-}

src/Bladeburner/ui/Console.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useRef, useEffect } from "react";
+import { IBladeburner } from "../IBladeburner";
+
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface ILineProps {
+    content: any;
+}
+
+function Line(props: ILineProps): React.ReactElement {
+    return (<tr>
+        <td className="bladeburner-console-line" style={{color: 'var(--my-font-color)', whiteSpace: 'pre-wrap'}}>{props.content}</td>
+    </tr>)
+}
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function Console(props: IProps): React.ReactElement {
+    const lastRef = useRef<HTMLDivElement>(null);
+    const setRerender = useState(false)[1];
+
+    const [consoleHistoryIndex, setConsoleHistoryIndex] = useState(props.bladeburner.consoleHistory.length);
+
+    // TODO: Figure out how to actually make the scrolling work correctly.
+    function scrollToBottom(): void {
+        if(!lastRef.current) return;
+        lastRef.current.scrollTop = lastRef.current.scrollHeight;
+    }
+
+    function rerender(): void {
+        setRerender(old => !old);
+    }
+
+    useEffect(() => {
+        const id = setInterval(rerender, 1000);
+        const id2 = setInterval(scrollToBottom, 100);
+        return () => {
+            clearInterval(id);
+            clearInterval(id2);
+        };
+    }, []);
+
+    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+        if (event.keyCode === 13) {
+            event.preventDefault();
+            const command = event.currentTarget.value;
+            event.currentTarget.value = "";
+            if (command.length > 0) {
+                props.bladeburner.postToConsole("> " + command);
+                props.bladeburner.executeConsoleCommands(props.player, command);
+                setConsoleHistoryIndex(props.bladeburner.consoleHistory.length);
+                rerender();
+            }
+        }
+
+        const consoleHistory = props.bladeburner.consoleHistory;
+
+        if (event.keyCode === 38) { // up
+            let i = consoleHistoryIndex;
+            const len = consoleHistory.length;
+            if (len === 0) {return;}
+            if (i < 0 || i > len) {
+                setConsoleHistoryIndex(len);
+            }
+
+            if (i !== 0) {
+                i = i-1;
+            }
+            setConsoleHistoryIndex(i);
+            const prevCommand = consoleHistory[i];
+            event.currentTarget.value = prevCommand;
+        }
+
+        if (event.keyCode === 40) {
+            const i = consoleHistoryIndex;
+            const len = consoleHistory.length;
+
+            if (len == 0) {return;}
+            if (i < 0 || i > len) {
+                setConsoleHistoryIndex(len);
+            }
+
+            // Latest command, put nothing
+            if (i == len || i == len-1) {
+                setConsoleHistoryIndex(len);
+                event.currentTarget.value = "";
+            } else {
+                setConsoleHistoryIndex(consoleHistoryIndex+1);
+                const prevCommand = consoleHistory[consoleHistoryIndex+1];
+                event.currentTarget.value = prevCommand;
+            }
+        }
+    }
+
+    return (<div ref={lastRef} className="bladeburner-console-div">
+        <table className="bladeburner-console-table">
+            <tbody>
+                {/*
+                    TODO: optimize this.
+                    using `i` as a key here isn't great because it'll re-render everything
+                    everytime the console reaches max length.
+                */}
+                {props.bladeburner.consoleLogs.map((log: any, i: number) => <Line key={i} content={log} />)}
+                <tr key="input" id="bladeburner-console-input-row" className="bladeburner-console-input-row">
+                    <td className="bladeburner-console-input-cell">
+                        <pre>{"> "}</pre><input autoFocus className="bladeburner-console-input" tabIndex={1} type="text" onKeyDown={handleKeyDown} />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>);
+}

src/Bladeburner/ui/ContractElem.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { ActionTypes } from "../data/ActionTypes";
+import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
+import {
+    formatNumber,
+    convertTimeMsToTimeElapsedString,
+} from "../../../utils/StringHelperFunctions";
+import { stealthIcon, killIcon } from "../data/Icons";
+import { BladeburnerConstants } from "../data/Constants";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { SuccessChance } from "./SuccessChance";
+import { CopyableText } from "../../ui/React/CopyableText";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+    action: any;
+}
+
+export function ContractElem(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    const isActive = props.bladeburner.action.type === ActionTypes["Contract"] && props.action.name === props.bladeburner.action.name;
+    const estimatedSuccessChance = props.action.getEstSuccessChance(props.bladeburner);
+    const successChance = props.action.getSuccessChance(props.bladeburner);
+    const computedActionTimeCurrent = Math.min(props.bladeburner.actionTimeCurrent+props.bladeburner.actionTimeOverflow, props.bladeburner.actionTimeToComplete);
+    const maxLevel = (props.action.level >= props.action.maxLevel);
+    const actionTime = props.action.getActionTime(props.bladeburner);
+    const autolevelCheckboxId = `bladeburner-${props.action.name}-autolevel-checkbox`;
+
+    function onStart(): void {
+        props.bladeburner.action.type = ActionTypes.Contract;
+        props.bladeburner.action.name = props.action.name;
+        props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    function increaseLevel(): void {
+        ++props.action.level;
+        if (isActive) props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    function decreaseLevel(): void {
+        --props.action.level;
+        if (isActive) props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    function onAutolevel(event: React.ChangeEvent<HTMLInputElement>): void {
+        props.action.autoLevel = event.target.checked;
+        setRerender(old => !old);
+    }
+
+    return (<>
+        <h2 style={{display: 'inline-block'}}>
+            {isActive ? 
+                <><CopyableText value={props.action.name} /> (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)})</> :
+                <CopyableText value={props.action.name} />
+            }
+        </h2>
+        {isActive ? 
+        <p style={{display: 'block'}}>{createProgressBarText({progress:computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}</p> :
+        <>
+            <a
+                onClick={onStart}
+                className="a-link-button"
+                style={{margin:"3px", padding:"3px"}}>
+                Start
+            </a>
+        </>}
+        <br />
+        <br />
+        <pre className="tooltip" style={{display:"inline-block"}}>
+            <span className="tooltiptext">
+                {props.action.getSuccessesNeededForNextLevel(BladeburnerConstants.ContractSuccessesPerLevel)} successes needed for next level
+            </span>
+            Level: {props.action.level} / {props.action.maxLevel}
+        </pre>
+        <a
+            onClick={increaseLevel}
+            style={{padding:"2px", margin:"2px"}}
+            className={`tooltip ${maxLevel ? "a-link-button-inactive" : "a-link-button"}`}>
+            {isActive && (<span className="tooltiptext">WARNING: changing the level will restart the Operation</span>)}
+            ↑
+        </a>
+        <a
+            onClick={decreaseLevel}
+            style={{padding:"2px", margin:"2px"}}
+            className={`tooltip ${props.action.level <= 1 ? "a-link-button-inactive" : "a-link-button"}`}>
+            {isActive && (<span className="tooltiptext">WARNING: changing the level will restart the Operation</span>)}
+            ↓
+        </a>
+        <br />
+        <br />
+        <pre style={{display: 'inline-block'}}>
+<span dangerouslySetInnerHTML={{__html: props.action.desc}} />
+<br /><br />
+Estimated success chance: <SuccessChance chance={estimatedSuccessChance} /> {props.action.isStealth?stealthIcon:<></>}{props.action.isKill?killIcon:<></>}<br />
+Time Required: {convertTimeMsToTimeElapsedString(actionTime*1000)}<br />
+Contracts remaining: {Math.floor(props.action.count)}<br />
+Successes: {props.action.successes}<br />
+Failures: {props.action.failures}
+        </pre>
+        <br />
+        <label
+            className="tooltip"
+            style={{color: 'white'}}
+            htmlFor={autolevelCheckboxId}>
+            Autolevel: 
+            <span className="tooltiptext">Automatically increase operation level when possible</span>
+        </label>
+        <input
+            type="checkbox"
+            id={autolevelCheckboxId}
+            checked={props.action.autoLevel}
+            onChange={onAutolevel}/>
+    </>);
+}

src/Bladeburner/ui/ContractList.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ContractElem } from "./ContractElem";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function ContractList(props: IProps): React.ReactElement {
+    const names = Object.keys(props.bladeburner.contracts);
+    const contracts = props.bladeburner.contracts;
+    return (<>
+        {names.map((name: string) => <li key={name} className="bladeburner-action">
+                <ContractElem bladeburner={props.bladeburner} action={contracts[name]} player={props.player} />
+            </li>,
+        )}
+    </>);
+}

src/Bladeburner/ui/ContractPage.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { ContractList } from "./ContractList";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function ContractPage(props: IProps): React.ReactElement {
+    return (<>
+        <p style={{display: 'block', margin: '4px', padding: '4px'}}>
+            Complete contracts in order to increase your Bladeburner rank and earn money. 
+            Failing a contract will cause you to lose HP, which can lead to hospitalization.
+            <br />
+            <br />
+            You can unlock higher-level contracts by successfully completing them. 
+            Higher-level contracts are more difficult, but grant more rank, experience, and money.
+        </p>
+        <ContractList bladeburner={props.bladeburner} player={props.player} />
+    </>);
+}

src/Bladeburner/ui/GeneralActionElem.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { ActionTypes } from "../data/ActionTypes";
+import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
+import {
+    formatNumber,
+    convertTimeMsToTimeElapsedString,
+} from "../../../utils/StringHelperFunctions";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { CopyableText } from "../../ui/React/CopyableText";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+    action: any;
+}
+
+export function GeneralActionElem(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    const isActive = props.action.name === props.bladeburner.action.name;
+    const computedActionTimeCurrent = Math.min(props.bladeburner.actionTimeCurrent+props.bladeburner.actionTimeOverflow, props.bladeburner.actionTimeToComplete);
+    const actionTime = (function(): number{
+        switch(props.action.name) {
+        case "Training":
+        case "Field Analysis":
+            return 30;
+        case "Diplomacy":
+        case "Hyperbolic Regeneration Chamber":
+            return 60;
+        case "Recruitment":
+            return props.bladeburner.getRecruitmentTime(props.player);
+        }
+        return -1; // dead code
+    })();
+    const successChance = props.action.name === "Recruitment" ? Math.max(0, Math.min(props.bladeburner.getRecruitmentSuccessChance(props.player), 1)) : -1;
+
+    function onStart(): void {
+        props.bladeburner.action.type = ActionTypes[(props.action.name as string)];
+        props.bladeburner.action.name = props.action.name;
+        props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    return (<>
+        <h2 style={{display: 'inline-block'}}>
+            {isActive ? 
+                <><CopyableText value={props.action.name} /> (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)})</> :
+                <CopyableText value={props.action.name} />
+            }
+        </h2>
+        {isActive ? 
+        <p style={{display: 'block'}}>{createProgressBarText({progress:computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}</p> :
+        <>
+            <a
+                onClick={onStart}
+                className="a-link-button"
+                style={{margin:"3px", padding:"3px"}}>
+                Start
+            </a>
+        </>}
+        <br />
+        <br />
+        <pre style={{display: 'inline-block'}} dangerouslySetInnerHTML={{__html: props.action.desc}}></pre><br /><br />
+        <pre style={{display: 'inline-block'}}>
+            Time Required: {convertTimeMsToTimeElapsedString(actionTime*1000)}
+            {successChance !== -1 && <><br />Estimated success chance: {formatNumber(successChance*100, 1)}%</>}
+        </pre>
+    </>);
+}

src/Bladeburner/ui/GeneralActionList.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { GeneralActionElem } from "./GeneralActionElem";
+import { Action } from "../Action";
+import { GeneralActions } from "../GeneralActions";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function GeneralActionList(props: IProps): React.ReactElement {
+    const actions: Action[] = [];
+    for (const name in GeneralActions) {
+        if (GeneralActions.hasOwnProperty(name)) {
+            actions.push(GeneralActions[name]);
+        }
+    }
+    return (<>
+        {actions.map((action: Action) => <li key={action.name} className="bladeburner-action">
+                <GeneralActionElem bladeburner={props.bladeburner} action={action} player={props.player} />
+            </li>,
+        )}
+    </>);
+}

src/Bladeburner/ui/GeneralActionPage.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { GeneralActionList } from "./GeneralActionList";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function GeneralActionPage(props: IProps): React.ReactElement {
+    return (<>
+        <p style={{display: 'block', margin: '4px', padding: '4px'}}>
+            These are generic actions that will assist you in your Bladeburner 
+            duties. They will not affect your Bladeburner rank in any way.
+        </p>
+        <GeneralActionList bladeburner={props.bladeburner} player={props.player} />
+    </>);
+}

src/Bladeburner/ui/OperationElem.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import { ActionTypes } from "../data/ActionTypes";
+import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
+import {
+    formatNumber,
+    convertTimeMsToTimeElapsedString,
+} from "../../../utils/StringHelperFunctions";
+import { stealthIcon, killIcon } from "../data/Icons";
+import { BladeburnerConstants } from "../data/Constants";
+import { createPopup } from "../../ui/React/createPopup";
+import { TeamSizePopup } from "./TeamSizePopup";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { SuccessChance } from "./SuccessChance";
+import { CopyableText } from "../../ui/React/CopyableText";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+    action: any;
+}
+
+export function OperationElem(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    const isActive = props.bladeburner.action.type === ActionTypes["Operation"] && props.action.name === props.bladeburner.action.name;
+    const estimatedSuccessChance = props.action.getEstSuccessChance(props.bladeburner);
+    const computedActionTimeCurrent = Math.min(props.bladeburner.actionTimeCurrent+props.bladeburner.actionTimeOverflow,props.bladeburner.actionTimeToComplete);
+    const maxLevel = (props.action.level >= props.action.maxLevel);
+    const actionTime = props.action.getActionTime(props.bladeburner);
+    const autolevelCheckboxId = `bladeburner-${props.action.name}-autolevel-checkbox`;
+
+    function onStart(): void {
+        props.bladeburner.action.type = ActionTypes.Operation;
+        props.bladeburner.action.name = props.action.name;
+        props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    function onTeam(): void {
+        const popupId = "bladeburner-operation-set-team-size-popup";
+        createPopup(popupId, TeamSizePopup, {
+            bladeburner: props.bladeburner,
+            action: props.action,
+            popupId: popupId,
+        });
+    }
+
+    function increaseLevel(): void {
+        ++props.action.level;
+        if (isActive) props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    function decreaseLevel(): void {
+        --props.action.level;
+        if (isActive) props.bladeburner.startAction(props.player, props.bladeburner.action);
+        setRerender(old => !old);
+    }
+
+    function onAutolevel(event: React.ChangeEvent<HTMLInputElement>): void {
+        props.action.autoLevel = event.target.checked;
+        setRerender(old => !old);
+    }
+
+    return (<>
+        <h2 style={{display: 'inline-block'}}>
+            {isActive ? 
+                <><CopyableText value={props.action.name} /> (IN PROGRESS - {formatNumber(computedActionTimeCurrent, 0)} / {formatNumber(props.bladeburner.actionTimeToComplete, 0)})</> :
+                <CopyableText value={props.action.name} />
+            }
+        </h2>
+        {isActive ? 
+        <p style={{display: 'block'}}>{createProgressBarText({progress:computedActionTimeCurrent / props.bladeburner.actionTimeToComplete})}</p> :
+        <>
+            <a
+                onClick={onStart}
+                className="a-link-button"
+                style={{margin:"3px", padding:"3px"}}>
+                Start
+            </a>
+            <a
+                onClick={onTeam}
+                style={{margin:"3px", padding:"3px"}}
+                className="a-link-button">
+                Set Team Size (Curr Size: {formatNumber(props.action.teamCount, 0)})
+            </a>
+        </>}
+        <br />
+        <br />
+        <pre className="tooltip" style={{display:"inline-block"}}>
+            <span className="tooltiptext">
+                {props.action.getSuccessesNeededForNextLevel(BladeburnerConstants.OperationSuccessesPerLevel)} successes needed for next level
+            </span>
+            Level: {props.action.level} / {props.action.maxLevel}
+        </pre>
+        <a
+            onClick={increaseLevel}
+            style={{padding:"2px", margin:"2px"}}
+            className={`tooltip ${maxLevel ? "a-link-button-inactive" : "a-link-button"}`}>
+            {isActive && (<span className="tooltiptext">WARNING: changing the level will restart the Operation</span>)}
+            ↑
+        </a>
+        <a
+            onClick={decreaseLevel}
+            style={{padding:"2px", margin:"2px"}}
+            className={`tooltip ${props.action.level <= 1 ? "a-link-button-inactive" : "a-link-button"}`}>
+            {isActive && (<span className="tooltiptext">WARNING: changing the level will restart the Operation</span>)}
+            ↓
+        </a>
+        <br />
+        <br />
+        <pre style={{display:"inline-block"}}>
+<span dangerouslySetInnerHTML={{__html: props.action.desc}} />
+<br /><br />
+Estimated success chance: <SuccessChance chance={estimatedSuccessChance} /> {props.action.isStealth?stealthIcon:<></>}{props.action.isKill?killIcon:<></>}<br />
+Time Required: {convertTimeMsToTimeElapsedString(actionTime*1000)}<br />
+Operations remaining: {Math.floor(props.action.count)}<br />
+Successes: {props.action.successes}<br />
+Failures: {props.action.failures}
+        </pre>
+        <br />
+        <label
+            className="tooltip"
+            style={{color: 'white'}}
+            htmlFor={autolevelCheckboxId}>
+            Autolevel: 
+            <span className="tooltiptext">Automatically increase operation level when possible</span>
+        </label>
+        <input
+            type="checkbox"
+            id={autolevelCheckboxId}
+            checked={props.action.autoLevel}
+            onChange={onAutolevel}/>
+    </>);
+}

src/Bladeburner/ui/OperationList.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { OperationElem } from "./OperationElem";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function OperationList(props: IProps): React.ReactElement {
+    const names = Object.keys(props.bladeburner.operations);
+    const operations = props.bladeburner.operations;
+    return (<>
+        {names.map((name: string) => <li key={name} className="bladeburner-action">
+                <OperationElem bladeburner={props.bladeburner} action={operations[name]} player={props.player} />
+            </li>,
+        )}
+    </>);
+}

src/Bladeburner/ui/OperationPage.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { OperationList } from "./OperationList";
+import { IBladeburner } from "../IBladeburner";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    player: IPlayer;
+}
+
+export function OperationPage(props: IProps): React.ReactElement {
+    return (<>
+        <p style={{display: 'block', margin: '4px', padding: '4px'}}>
+            Carry out operations for the Bladeburner division. 
+            Failing an operation will reduce your Bladeburner rank. It will also 
+            cause you to lose HP, which can lead to hospitalization. In general, 
+            operations are harder and more punishing than contracts, 
+            but are also more rewarding.
+            <br />
+            <br />
+            Operations can affect the chaos level and Synthoid population of your 
+            current city. The exact effects vary between different Operations.
+            <br />
+            <br />
+            For operations, you can use a team. You must first recruit team members. 
+            Having a larger team will improves your chances of success.
+            <br />
+            <br />
+            You can unlock higher-level operations by successfully completing them. 
+            Higher-level operations are more difficult, but grant more rank and experience.
+        </p>
+        <OperationList bladeburner={props.bladeburner} player={props.player} />
+    </>);
+}

src/Bladeburner/ui/Root.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Stats } from "./Stats";
+import { Console } from "./Console";
+import { AllPages } from "./AllPages";
+
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { IEngine } from "../../IEngine";
+import { IBladeburner } from "../IBladeburner";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    engine: IEngine;
+    player: IPlayer;
+}
+
+export function Root(props: IProps): React.ReactElement {
+    return (<div id="bladeburner-container">
+        <div style={{height:"60%", display:"block", position:"relative"}}>
+            <div style={{height: '100%', width:"30%", display:"inline-block", border:"1px solid white"}}>
+                <Stats bladeburner={props.bladeburner} player={props.player} engine={props.engine} />
+            </div>
+            <Console bladeburner={props.bladeburner} player={props.player} />
+        </div>
+        <div style={{width:"70%", display:"block", border:"1px solid white", marginTop:"6px", padding: "6px", position:"relative"}}>
+            <AllPages bladeburner={props.bladeburner} player={props.player} />
+        </div>
+    </div>);
+}

src/Bladeburner/ui/SkillElem.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { CopyableText } from "../../ui/React/CopyableText";
+import { formatNumber } from "../../../utils/StringHelperFunctions";
+import { IBladeburner } from "../IBladeburner";
+
+interface IProps {
+    skill: any;
+    bladeburner: IBladeburner;
+    onUpgrade: () => void;
+}
+
+export function SkillElem(props: IProps): React.ReactElement {
+    const skillName = props.skill.name;
+    let currentLevel = 0;
+    if (props.bladeburner.skills[skillName] && !isNaN(props.bladeburner.skills[skillName])) {
+        currentLevel = props.bladeburner.skills[skillName];
+    }
+    const pointCost = props.skill.calculateCost(currentLevel);
+
+    const canLevel = props.bladeburner.skillPoints >= pointCost;
+    const maxLvl = props.skill.maxLvl ? currentLevel >= props.skill.maxLvl : false;
+
+    function onClick(): void {
+        if (props.bladeburner.skillPoints < pointCost) return;
+        props.bladeburner.skillPoints -= pointCost;
+        props.bladeburner.upgradeSkill(props.skill);
+        props.onUpgrade();
+    }
+
+    return (<>
+        <h2 style={{display: 'inline-block'}}>
+            <CopyableText value={props.skill.name} />
+        </h2>
+        <a
+            onClick={onClick}
+            style={{display: "inline-block", margin: "3px", padding: "3px"}}
+            className={canLevel && !maxLvl ? "a-link-button" : "a-link-button-inactive"}>
+            Level
+        </a>
+        <br />
+        <br />
+        <p style={{display: 'block'}}>Level: {currentLevel}</p>
+        {maxLvl ?
+        <p style={{color:"red", display:"block"}}>MAX LEVEL</p> :
+        <p style={{display:"block"}}>Skill Points required: {formatNumber(pointCost, 0)}</p>}
+        <p style={{display:"inline-block"}} dangerouslySetInnerHTML={{__html: props.skill.desc}} />
+    </>);
+}

src/Bladeburner/ui/SkillList.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SkillElem } from "./SkillElem";
+import { Skills } from "../Skills";
+import { IBladeburner } from "../IBladeburner";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    onUpgrade: () => void;
+}
+
+export function SkillList(props: IProps): React.ReactElement {
+    return (<>
+        {Object.keys(Skills).map((skill: string) => <li key={skill} className="bladeburner-action">
+                <SkillElem bladeburner={props.bladeburner} skill={Skills[skill]} onUpgrade={props.onUpgrade} />
+            </li>,
+        )}
+    </>);
+}

src/Bladeburner/ui/SkillPage.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { SkillList } from "./SkillList";
+import { BladeburnerConstants } from "../data/Constants";
+import { formatNumber } from "../../../utils/StringHelperFunctions";
+import { IBladeburner } from "../IBladeburner";
+
+interface IProps {
+    bladeburner: IBladeburner;
+}
+
+
+export function SkillPage(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    const mults = props.bladeburner.skillMultipliers;
+
+    function valid(mult: any): boolean {
+        return mult && mult !== 1
+    }
+
+    return (<>
+        <p>
+            <strong>Skill Points: {formatNumber(props.bladeburner.skillPoints, 0)}</strong>
+        </p>
+        <p>
+            You will gain one skill point every {BladeburnerConstants.RanksPerSkillPoint} ranks.
+            <br />
+            <br />
+            Note that when upgrading a skill, the benefit for that skill is additive. 
+            However, the effects of different skills with each other is multiplicative.
+            <br />
+        </p>
+        <br />
+        {valid(mults["successChanceAll"]) && <p>Total Success Chance: x{formatNumber(mults["successChanceAll"], 3)}</p>}
+        {valid(mults["successChanceStealth"]) && <p>Stealth Success Chance: x{formatNumber(mults["successChanceStealth"], 3)}</p>}
+        {valid(mults["successChanceKill"]) && <p>Retirement Success Chance: x{formatNumber(mults["successChanceKill"], 3)}</p>}
+        {valid(mults["successChanceContract"]) && <p>Contract Success Chance: x{formatNumber(mults["successChanceContract"], 3)}</p>}
+        {valid(mults["successChanceOperation"]) && <p>Operation Success Chance: x{formatNumber(mults["successChanceOperation"], 3)}</p>}
+        {valid(mults["successChanceEstimate"]) && <p>Synthoid Data Estimate: x{formatNumber(mults["successChanceEstimate"], 3)}</p>}
+        {valid(mults["actionTime"]) && <p>Action Time: x{formatNumber(mults["actionTime"], 3)}</p>}
+        {valid(mults["effHack"]) && <p>Hacking Skill: x{formatNumber(mults["effHack"], 3)}</p>}
+        {valid(mults["effStr"]) && <p>Strength: x{formatNumber(mults["effStr"], 3)}</p>}
+        {valid(mults["effDef"]) && <p>Defense: x{formatNumber(mults["effDef"], 3)}</p>}
+        {valid(mults["effDex"]) && <p>Dexterity: x{formatNumber(mults["effDex"], 3)}</p>}
+        {valid(mults["effAgi"]) && <p>Agility: x{formatNumber(mults["effAgi"], 3)}</p>}
+        {valid(mults["effCha"]) && <p>Charisma: x{formatNumber(mults["effCha"], 3)}</p>}
+        {valid(mults["effInt"]) && <p>Intelligence: x{formatNumber(mults["effInt"], 3)}</p>}
+        {valid(mults["stamina"]) && <p>Stamina: x{formatNumber(mults["stamina"], 3)}</p>}
+        {valid(mults["money"]) && <p>Contract Money: x{formatNumber(mults["money"], 3)}</p>}
+        {valid(mults["expGain"]) && <p>Exp Gain: x{formatNumber(mults["expGain"], 3)}</p>}
+        <br />
+        <SkillList bladeburner={props.bladeburner} onUpgrade={() => setRerender(old => !old)} />
+    </>);
+}
+
+/*
+
+
+
+
+var multKeys = Object.keys(this.skillMultipliers);
+for (var i = 0; i < multKeys.length; ++i) {
+    var mult = this.skillMultipliers[multKeys[i]];
+    if (mult && mult !== 1) {
+        mult = formatNumber(mult, 3);
+        switch(multKeys[i]) {
+            
+        }
+    }
+}
+*/

src/Bladeburner/ui/Stats.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from "react";
+import {
+    formatNumber,
+    convertTimeMsToTimeElapsedString,
+} from "../../../utils/StringHelperFunctions";
+import { BladeburnerConstants } from "../data/Constants";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { IEngine } from "../../IEngine";
+import { Money } from "../../ui/React/Money";
+import { StatsTable } from "../../ui/React/StatsTable";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { createPopup } from "../../ui/React/createPopup";
+import { Factions } from "../../Faction/Factions";
+import {
+    joinFaction,
+    displayFactionContent,
+} from "../../Faction/FactionHelpers";
+import { IBladeburner } from "../IBladeburner"
+
+import { TravelPopup } from "./TravelPopup";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    engine: IEngine;
+    player: IPlayer;
+}
+
+export function Stats(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+
+    useEffect(() => {
+        const id = setInterval(() => setRerender(old => !old), 1000);
+        return () => clearInterval(id);
+    }, []);
+
+    function openStaminaHelp(): void {
+      dialogBoxCreate("Performing actions will use up your stamina.<br><br>" +
+                        "Your max stamina is determined primarily by your agility stat.<br><br>" +
+                        "Your stamina gain rate is determined by both your agility and your " +
+                        "max stamina. Higher max stamina leads to a higher gain rate.<br><br>" +
+                        "Once your " +
+                        "stamina falls below 50% of its max value, it begins to negatively " +
+                        "affect the success rate of your contracts/operations. This penalty " +
+                        "is shown in the overview panel. If the penalty is 15%, then this means " +
+                        "your success rate would be multipled by 85% (100 - 15).<br><br>" +
+                        "Your max stamina and stamina gain rate can also be increased by " +
+                        "training, or through skills and Augmentation upgrades.");
+    }
+
+    function openPopulationHelp(): void {
+      dialogBoxCreate("The success rate of your contracts/operations depends on " +
+                        "the population of Synthoids in your current city. " +
+                        "The success rate that is shown to you is only an estimate, " +
+                        "and it is based on your Synthoid population estimate.<br><br>" +
+                        "Therefore, it is important that this Synthoid population estimate " +
+                        "is accurate so that you have a better idea of your " +
+                        "success rate for contracts/operations. Certain " +
+                        "actions will increase the accuracy of your population " +
+                        "estimate.<br><br>" +
+                        "The Synthoid populations of cities can change due to your " +
+                        "actions or random events. If random events occur, they will " +
+                        "be logged in the Bladeburner Console.");
+    }
+
+    function openTravel(): void {
+        const popupId = "bladeburner-travel-popup";
+        createPopup(popupId, TravelPopup, {
+            bladeburner: props.bladeburner,
+            popupId: popupId,
+        });
+    }
+
+    function openFaction(): void {
+        const faction = Factions["Bladeburners"];
+        if (faction.isMember) {
+            props.engine.loadFactionContent();
+            displayFactionContent("Bladeburners");
+        } else {
+            if (props.bladeburner.rank >= BladeburnerConstants.RankNeededForFaction) {
+                joinFaction(faction);
+                dialogBoxCreate("Congratulations! You were accepted into the Bladeburners faction");
+            } else {
+                dialogBoxCreate("You need a rank of 25 to join the Bladeburners Faction!")
+            }
+        }
+    }
+
+    return (<>
+        <p className="tooltip" style={{display: 'inline-block'}}>
+            Rank: {formatNumber(props.bladeburner.rank, 2)}
+            <span className="tooltiptext">Your rank within the Bladeburner division.</span>
+        </p><br />
+        <p>Stamina: {formatNumber(props.bladeburner.stamina, 3)} / {formatNumber(props.bladeburner.maxStamina, 3)}</p>
+        <div className="help-tip" onClick={openStaminaHelp}>?</div><br />
+        <p>Stamina Penalty: {formatNumber((1-props.bladeburner.calculateStaminaPenalty())*100, 1)}%</p><br />
+        <p>Team Size: {formatNumber(props.bladeburner.teamSize, 0)}</p>
+        <p>Team Members Lost: {formatNumber(props.bladeburner.teamLost, 0)}</p><br />
+        <p>Num Times Hospitalized: {props.bladeburner.numHosp}</p>
+        <p>Money Lost From Hospitalizations: {Money(props.bladeburner.moneyLost)}</p><br />
+        <p>Current City: {props.bladeburner.city}</p>
+        <p className="tooltip" style={{display: 'inline-block'}}>
+            Est. Synthoid Population: {numeralWrapper.formatPopulation(props.bladeburner.getCurrentCity().popEst)}
+            <span className="tooltiptext">This is your Bladeburner division's estimate of how many Synthoids exist in your current city.</span>
+        </p>
+        <div className="help-tip" onClick={openPopulationHelp}>?</div><br />
+        <p className="tooltip" style={{display: 'inline-block'}}>
+            Est. Synthoid Communities: {formatNumber(props.bladeburner.getCurrentCity().comms, 0)}
+            <span className="tooltiptext">This is your Bladeburner divison's estimate of how many Synthoid communities exist in your current city.</span>
+        </p><br />
+        <p className="tooltip" style={{display: 'inline-block'}}>
+            City Chaos: {formatNumber(props.bladeburner.getCurrentCity().chaos)}
+            <span className="tooltiptext">The city's chaos level due to tensions and conflicts between humans and Synthoids. Having too high of a chaos level can make contracts and operations harder.</span>
+        </p><br />
+        <br />
+        <p className="tooltip" style={{display: 'inline-block'}}>
+            Bonus time: {convertTimeMsToTimeElapsedString(props.bladeburner.storedCycles/BladeburnerConstants.CyclesPerSecond*1000)}<br />
+            <span className="tooltiptext">
+                You gain bonus time while offline or when the game is inactive (e.g. when the tab is throttled by browser).
+                Bonus time makes the Bladeburner mechanic progress faster, up to 5x the normal speed.
+            </span>
+        </p>
+        <p>Skill Points: {formatNumber(props.bladeburner.skillPoints, 0)}</p><br />
+        {StatsTable([
+            ["Aug. Success Chance mult: ", formatNumber(props.player.bladeburner_success_chance_mult*100, 1) + "%"],
+            ["Aug. Max Stamina mult: ", formatNumber(props.player.bladeburner_max_stamina_mult*100, 1) + "%"],
+            ["Aug. Stamina Gain mult: ", formatNumber(props.player.bladeburner_stamina_gain_mult*100, 1) + "%"],
+            ["Aug. Field Analysis mult: ", formatNumber(props.player.bladeburner_analysis_mult*100, 1) + "%"],
+        ])}
+        <br />
+        <a onClick={openTravel} className="a-link-button" style={{display:"inline-block"}}>Travel</a>
+        <a onClick={openFaction} className="a-link-button tooltip" style={{display:"inline-block"}}>
+            <span className="tooltiptext">Apply to the Bladeburner Faction, or go to the faction page if you are already a member</span>
+            Faction
+        </a>
+        <br />
+        <br />
+    </>);
+}

src/Bladeburner/ui/SuccessChance.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { formatNumber } from "../../../utils/StringHelperFunctions";
+
+interface IProps {
+    chance: number[];
+}
+
+export function SuccessChance(props: IProps): React.ReactElement {
+    if(props.chance[0] === props.chance[1]) {
+        return (<>{formatNumber(props.chance[0]*100, 1)}%</>);
+    }
+
+    return (<>{formatNumber(props.chance[0]*100, 1)}% ~ {formatNumber(props.chance[1]*100, 1)}%</>);
+}

src/Bladeburner/ui/TeamSizePopup.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { removePopup } from "../../ui/React/createPopup";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { Action } from "../Action";
+import { IBladeburner } from "../IBladeburner";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    action: Action;
+    popupId: string;
+}
+
+export function TeamSizePopup(props: IProps): React.ReactElement {
+    const [teamSize, setTeamSize] = useState<number | undefined>();
+    
+    function confirmTeamSize(): void {
+        if(teamSize === undefined) return;
+        const num = Math.round(teamSize);
+        if (isNaN(num) || num < 0) {
+            dialogBoxCreate("Invalid value entered for number of Team Members (must be numeric, positive)")
+        } else {
+            props.action.teamCount = num;
+        }
+        removePopup(props.popupId);
+    }
+
+    return (<>
+        <p>
+            Enter the amount of team members you would like to take on this
+            Op. 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.
+        </p>
+        <input autoFocus type="number" placeholder= "Team size" className= "text-input" onChange={event => setTeamSize(parseFloat(event.target.value))} />
+        <a className="a-link-button" onClick={confirmTeamSize}>Confirm</a>
+    </>);
+}

src/Bladeburner/ui/TravelPopup.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { removePopup } from "../../ui/React/createPopup";
+import { BladeburnerConstants } from "../data/Constants";
+import { IBladeburner } from "../IBladeburner";
+
+interface IProps {
+    bladeburner: IBladeburner;
+    popupId: string;
+}
+
+export function TravelPopup(props: IProps): React.ReactElement {
+    function travel(city: string): void {
+        props.bladeburner.city = city;
+        removePopup(props.popupId);
+    }
+
+    return (<>
+        <p>
+            Travel to a different city for your Bladeburner
+            activities. This does not cost any money. The city you are
+            in for your Bladeburner duties does not affect
+            your location in the game otherwise.
+        </p>
+        {BladeburnerConstants.CityNames.map(city =>  {
+            // Reusing this css class...it adds a border and makes it
+            // so that background color changes when you hover
+            return <div key={city} className="cmpy-mgmt-find-employee-option"
+                onClick={() => travel(city)}>
+                {city}
+            </div>})}
+    </>);
+}

src/Casino/Roulette.tsx

@@ -147,7 +147,7 @@ export class Roulette extends Game<IProps, IState> {
 
 
     componentDidMount(): void {
-        this.interval = setInterval(this.step, 50);
+        this.interval = window.setInterval(this.step, 50);
     }
 
     step(): void {

src/Casino/SlotMachine.tsx

@@ -87,7 +87,7 @@ export class SlotMachine extends Game<IProps, IState> {
     }
 
     componentDidMount(): void {
-        this.interval = setInterval(this.step, 50);
+        this.interval = window.setInterval(this.step, 50);
     }
 
     step(): void {

src/CodingContracts.ts

@@ -172,7 +172,7 @@ export class CodingContract {
     async prompt(): Promise<CodingContractResult> {
         const popupId = `coding-contract-prompt-popup-${this.fn}`;
         return new Promise<CodingContractResult>((resolve) => {
-            const popup = new CodingContractPopup({
+            createPopup(popupId, CodingContractPopup, {
                 c: this,
                 popupId: popupId,
                 onClose: () => {
@@ -188,7 +188,6 @@ export class CodingContract {
                     removePopup(popupId);
                 },
             });
-            createPopup(popupId, CodingContractPopup, popup.props);
         });
     }
 

src/Constants.ts

@@ -6,7 +6,10 @@
 import { IMap } from "./types";
 
 export const CONSTANTS: IMap<any> = {
-    Version:                "0.52.2",
+    Version:                "0.52.9",
+
+    // Speed (in ms) at which the main loop is updated
+    _idleSpeed: 200,
 
     /** Max level for any skill, assuming no multipliers. Determined by max numerical value in javascript for experience
      * and the skill level formula in Player.js. Note that all this means it that when experience hits MAX_INT, then
@@ -225,18 +228,40 @@ export const CONSTANTS: IMap<any> = {
     TotalNumBitNodes: 24,
 
     LatestUpdate: `
-    v0.52.2 - 2021-07-15 Oh yeah, BN11 is a thing (drunk hydroflame tbh)
+    v0.52.9 - 2021-07-27 Less lag! (hydroflame & community)
     -------------------------------------------
 
-    ** Source-Files **
+    ** Active Scripts page **
 
-    * Source-File 11 now also provides a small reduction to the price increase
-      multiplier.
+    * Now less laggy, has pagination.
 
-    ** Augmentations **
+    ** File diagnostic ** 
 
-    * New Augmentation offered by Aevum, themed around 777 and offers some basic
-      programs.
-    * Augmentation descriptions are now more concise and consistent.
+    * Added a popup found under options that shows the files you own and how
+      large they are. This help find bugs and leftover massive logs files.
+
+    ** Corporation **
+
+    * Added safeguard against a very specific bug that causes NaN money. I'm
+      still not sure what the root cause is but it should prevent corp from
+      breaking.
+
+    ** Netscript ** 
+
+    * tprintf is a new function that doesn't print the filename.
+
+    ** Misc. **
+
+    * Infiltration kills you if you try to automate it. (@threehams)
+    * Fix beautify button not working
+    * Added bladeburner_analysis_mult to getPlayer() (@brusby)
+    * Fixed joining bladeburner via netscript functions. (@omuretsu)
+    * All bladeburner actions are click-to-copy
+    * nerf noodle bar
 `,
+
+/*
+
+
+*/
 }

src/Corporation/Corporation.jsx

@@ -119,7 +119,7 @@ function Industry(params={}) {
     };
 
     this.name   = params.name ? params.name : 0;
-    this.type   = params.type ? params.type : 0;
+    this.type   = params.type ? params.type : Industries.Agriculture;
 
     this.sciResearch    = new Material({name: "Scientific Research"});
     this.researched = {}; // Object of acquired Research. Keys = research name
@@ -958,7 +958,6 @@ Industry.prototype.processProducts = function(marketCycles=1, corporation) {
                 const mgmtProd  = office.employeeProd[EmployeePositions.Management];
                 const opProd    = office.employeeProd[EmployeePositions.Operations];
                 const total = engrProd + mgmtProd + opProd;
-
                 if (total <= 0) { break; }
 
                 // Management is a multiplier for the production from Engineers
@@ -1113,8 +1112,13 @@ Industry.prototype.processProduct = function(marketCycles=1, product, corporatio
             } else if (product.marketTa1) {
                 sCost = product.pCost + markupLimit;
             } else if (isString(product.sCost)) {
+                if(product.mku === 0) {
+                    console.error(`mku is zero, reverting to 1 to avoid Infinity`);
+                    product.mku = 1;
+                }
                 sCost = product.sCost.replace(/MP/g, product.pCost + product.rat / product.mku);
                 sCost = eval(sCost);
+
             } else {
                 sCost = product.sCost;
             }
@@ -1397,11 +1401,12 @@ Industry.prototype.createResearchBox = function() {
                 researchTree.research(allResearch[i]);
                 this.researched[allResearch[i]] = true;
 
+                const researchBox = this.createResearchBox();
                 dialogBoxCreate(`Researched ${allResearch[i]}. It may take a market cycle ` +
                                 `(~${SecsPerMarketCycle} seconds) before the effects of ` +
                                 `the Research apply.`);
 
-                return this.createResearchBox();
+                return researchBox;
             } else {
                 dialogBoxCreate(`You do not have enough Scientific Research for ${research.name}`);
             }
@@ -1439,11 +1444,11 @@ Industry.prototype.createResearchBox = function() {
 }
 
 Industry.prototype.toJSON = function() {
-	return Generic_toJSON("Industry", this);
+    return Generic_toJSON("Industry", this);
 }
 
 Industry.fromJSON = function(value) {
-	return Generic_fromJSON(Industry, value.data);
+    return Generic_fromJSON(Industry, value.data);
 }
 
 Reviver.constructors.Industry = Industry;
@@ -1600,11 +1605,11 @@ Employee.prototype.createUI = function(panel, corporation, industry) {
 }
 
 Employee.prototype.toJSON = function() {
-	return Generic_toJSON("Employee", this);
+    return Generic_toJSON("Employee", this);
 }
 
 Employee.fromJSON = function(value) {
-	return Generic_fromJSON(Employee, value.data);
+    return Generic_fromJSON(Employee, value.data);
 }
 
 Reviver.constructors.Employee = Employee;
@@ -1899,11 +1904,11 @@ OfficeSpace.prototype.unassignEmployeeFromJob = function(job) {
 }
 
 OfficeSpace.prototype.toJSON = function() {
-	return Generic_toJSON("OfficeSpace", this);
+    return Generic_toJSON("OfficeSpace", this);
 }
 
 OfficeSpace.fromJSON = function(value) {
-	return Generic_fromJSON(OfficeSpace, value.data);
+    return Generic_fromJSON(OfficeSpace, value.data);
 }
 
 Reviver.constructors.OfficeSpace = OfficeSpace;
@@ -1941,6 +1946,14 @@ function Corporation(params={}) {
     this.state = new CorporationState();
 }
 
+Corporation.prototype.addFunds = function(amt) {
+    if(!isFinite(amt)) {
+        console.error('Trying to add invalid amount of funds. Report to a developper.');
+        return;
+    }
+    this.funds = this.funds.plus(amt);
+}
+
 Corporation.prototype.getState = function() {
     return this.state.getState();
 }
@@ -1980,7 +1993,7 @@ Corporation.prototype.process = function() {
             });
             var profit = this.revenue.minus(this.expenses);
             const cycleProfit = profit.times(marketCycles * SecsPerMarketCycle);
-            if (isNaN(this.funds)) {
+            if (isNaN(this.funds) || this.funds === Infinity || this.funds === -Infinity) {
                 dialogBoxCreate("There was an error calculating your Corporations funds and they got reset to 0. " +
                                 "This is a bug. Please report to game developer.<br><br>" +
                                 "(Your funds have been set to $150b for the inconvenience)");
@@ -1999,10 +2012,10 @@ Corporation.prototype.process = function() {
                     const profit = this.numShares * dividendsPerShare * (1 - (this.dividendTaxPercentage / 100));
                     Player.gainMoney(profit);
                     Player.recordMoneySource(profit, "corporation");
-                    this.funds = this.funds.plus(retainedEarnings);
+                    this.addFunds(retainedEarnings);
                 }
             } else {
-                this.funds = this.funds.plus(cycleProfit);
+                this.addFunds(cycleProfit);
             }
 
             this.updateSharePrice();
@@ -2069,7 +2082,7 @@ Corporation.prototype.getInvestment = function() {
     noBtn.innerHML = "Reject";
     yesBtn.addEventListener("click", () => {
         ++this.fundingRound;
-        this.funds = this.funds.plus(funding);
+        this.addFunds(funding);
         this.numShares -= investShares;
         this.rerender();
         return yesNoBoxClose();
@@ -2123,7 +2136,7 @@ Corporation.prototype.goPublic = function() {
             this.sharePrice = initialSharePrice;
             this.issuedShares = numShares;
             this.numShares -= numShares;
-            this.funds = this.funds.plus(numShares * initialSharePrice);
+            this.addFunds(numShares * initialSharePrice);
             this.rerender();
             removeElementById(goPublicPopupId);
             dialogBoxCreate(`You took your ${this.name} public and earned ` +
@@ -2376,11 +2389,11 @@ Corporation.prototype.clearUI = function() {
 }
 
 Corporation.prototype.toJSON = function() {
-	return Generic_toJSON("Corporation", this);
+    return Generic_toJSON("Corporation", this);
 }
 
 Corporation.fromJSON = function(value) {
-	return Generic_fromJSON(Corporation, value.data);
+    return Generic_fromJSON(Corporation, value.data);
 }
 
 Reviver.constructors.Corporation = Corporation;

src/Corporation/Product.ts

@@ -187,6 +187,11 @@ export class Product {
         this.calculateRating(industry);
         const advMult = 1 + (Math.pow(this.advCost, 0.1) / 100);
         this.mku = 100 / (advMult * Math.pow((this.qlt + 0.001), 0.65) * (busRatio + mgmtRatio));
+        
+        // I actually don't understand well enough to know if this is right.
+        // I'm adding this to prevent a crash.
+        if(this.mku === 0) this.mku = 1;
+
         this.dmd = industry.awareness === 0 ? 20 : Math.min(100, advMult * (100 * (industry.popularity / industry.awareness)));
         this.cmp = getRandomInt(0, 70);
 

src/DevMenu.jsx

@@ -14,7 +14,7 @@ import { AllServers } from "./Server/AllServers";
 import { GetServerByHostname } from "./Server/ServerHelpers";
 import { hackWorldDaemon } from "./RedPill";
 import { StockMarket } from "./StockMarket/StockMarket";
-import { Bladeburner } from "./Bladeburner";
+import { Bladeburner } from "./Bladeburner/Bladeburner";
 import { Stock } from "./StockMarket/Stock";
 import { Engine } from "./engine";
 import { saveObject } from "./SaveObject";
@@ -502,7 +502,7 @@ class DevMenuComponent extends Component {
     modifyBladeburnerRank(modify) {
         return function(rank) {
             if (Player.bladeburner) {
-                Player.bladeburner.changeRank(rank*modify);
+                Player.bladeburner.changeRank(Player, rank*modify);
             }
         }
     }
@@ -514,7 +514,7 @@ class DevMenuComponent extends Component {
 
     addTonsBladeburnerRank() {
         if (Player.bladeburner) {
-            Player.bladeburner.changeRank(tonsP);
+            Player.bladeburner.changeRank(Player, tonsP);
         }
     }
 

src/Diagnostic/FileDiagnosticPopup.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { AllServers } from "../Server/AllServers";
+import { Script } from "../Script/Script";
+import { TextFile } from "../TextFile";
+import { Accordion } from "../ui/React/Accordion";
+import { numeralWrapper } from "../ui/numeralFormat";
+
+interface IServerProps {
+    ip: string;
+}
+
+export function ServerAccordion(props: IServerProps): React.ReactElement {
+    const server = AllServers[props.ip];
+    let totalSize = 0;
+    for(const f of server.scripts) {
+        totalSize += f.code.length;
+    }
+
+    for(const f of server.textFiles) {
+        totalSize += f.text.length;
+    }
+
+    if(totalSize === 0) {
+        return <></>
+    }
+
+    interface File {
+        name: string;
+        size: number;
+    }
+
+    const files: File[] = [];
+
+    for(const f of server.scripts) {
+        files.push({name: f.filename, size: f.code.length});
+    }
+
+    for(const f of server.textFiles) {
+        files.push({name: f.fn, size: f.text.length});
+    }
+
+    files.sort((a: File, b: File): number => b.size-a.size);
+
+    return <Accordion
+        headerContent={<>{server.hostname} ({numeralWrapper.formatBigNumber(totalSize)}b)</>}
+        panelContent={<ul>
+            {files.map((file: File) => <li key={file.name}>{file.name}: {numeralWrapper.formatBigNumber(file.size)}b</li>) }
+        </ul>}
+    />
+}
+
+interface IProps {}
+
+export function FileDiagnosticPopup(props: IProps): React.ReactElement {
+    const ips: string[] = [];
+    for(const ip of Object.keys(AllServers)) {
+        ips.push(ip);
+    }
+
+    return (<>
+        <p>
+            Welcome to the file diagnostic! If your save file is really big it's
+            likely because you have too many text/scripts. This tool can help you
+            narrow down where they are.
+        </p>
+        {ips.map((ip: string) => <ServerAccordion key={ip} ip={ip} />)}
+    </>);
+}

src/Faction/FactionHelpers.d.ts

@@ -5,3 +5,5 @@ export declare function getNextNeurofluxLevel(): number;
 export declare function hasAugmentationPrereqs(aug: Augmentation): boolean;
 export declare function purchaseAugmentationBoxCreate(aug: Augmentation, fac: Faction): void;
 export declare function purchaseAugmentation(aug: Augmentation, fac: Faction, sing?: boolean): void;
+export declare function displayFactionContent(factionName: string, initiallyOnAugmentationsPage: boolean=false);
+export declare function joinFaction(faction: Faction): void;

src/Faction/FactionHelpers.jsx

@@ -46,6 +46,7 @@ export function inviteToFaction(faction) {
 }
 
 export function joinFaction(faction) {
+    if(faction.isMember) return;
 	faction.isMember = true;
     Player.factions.push(faction.name);
     const factionInfo = faction.getInfo();

src/Faction/ui/FactionList.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { IEngine } from "../../IEngine";
+import { Factions } from "../Factions";
+import { displayFactionContent, joinFaction } from "../FactionHelpers";
+
+interface IProps {
+    player: IPlayer;
+    engine: IEngine;
+}
+
+export function FactionList(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+
+    function openFaction(faction: string): void {
+        props.engine.loadFactionContent();
+        displayFactionContent(faction);
+    }
+
+    function acceptInvitation(event: React.MouseEvent<HTMLElement>, faction: string): void {
+        if (!event.isTrusted) return;
+        joinFaction(Factions[faction]);
+        setRerender(x => !x);
+    }
+
+    return (<>
+        <h1>Factions</h1>
+        <p>Lists all factions you have joined</p>
+        <br />
+        <ul>
+            {props.player.factions.map((faction: string) => <li key={faction}><a
+                    className="a-link-button"
+                    onClick={() => openFaction(faction)}
+                    style={{padding:"4px", margin:"4px", display:"inline-block"}}>{faction}
+                </a></li>)}
+        </ul>
+        <br />
+        <h1>Outstanding Faction Invitations</h1>
+        <p style={{width: '70%'}}>Lists factions you have been invited to. You can accept these faction invitations at any time.</p>
+        <ul>
+            {props.player.factionInvitations.map((faction: string) => <li  key={faction} style={{padding:"6px", margin:"6px"}}>
+                    <p style={{display:"inline", margin:"4px", padding:"4px"}}>{faction}</p>
+                    <a
+                        className="a-link-button"
+                        onClick={(e) => acceptInvitation(e, faction)}
+                        style={{display:"inline", margin:"4px", padding:"4px"}}>Accept Faction Invitation</a>
+                </li>)}
+        </ul>
+    </>);
+}

src/Fconf/Fconf.d.ts

@@ -0,0 +1 @@
+export declare function parseFconfSettings(config: string): void;

src/Gang/AllGangs.ts

@@ -0,0 +1,76 @@
+import { Reviver } from "../../utils/JSONReviver";
+
+interface GangTerritory {
+    power: number;
+    territory: number;
+}
+
+export let AllGangs: {
+    [key: string]: GangTerritory;
+} = {
+    "Slum Snakes" : {
+        power: 1,
+        territory: 1/7,
+    },
+    "Tetrads" : {
+        power: 1,
+        territory: 1/7,
+    },
+    "The Syndicate" : {
+        power: 1,
+        territory: 1/7,
+    },
+    "The Dark Army" : {
+        power: 1,
+        territory: 1/7,
+    },
+    "Speakers for the Dead" : {
+        power: 1,
+        territory: 1/7,
+    },
+    "NiteSec" : {
+        power: 1,
+        territory: 1/7,
+    },
+    "The Black Hand" : {
+        power: 1,
+        territory: 1/7,
+    },
+}
+
+export function resetGangs(): void {
+    AllGangs = {
+        "Slum Snakes" : {
+            power: 1,
+            territory: 1/7,
+        },
+        "Tetrads" : {
+            power: 1,
+            territory: 1/7,
+        },
+        "The Syndicate" : {
+            power: 1,
+            territory: 1/7,
+        },
+        "The Dark Army" : {
+            power: 1,
+            territory: 1/7,
+        },
+        "Speakers for the Dead" : {
+            power: 1,
+            territory: 1/7,
+        },
+        "NiteSec" : {
+            power: 1,
+            territory: 1/7,
+        },
+        "The Black Hand" : {
+            power: 1,
+            territory: 1/7,
+        },
+    }
+}
+
+export function loadAllGangs(saveString: string): void {
+    AllGangs = JSON.parse(saveString, Reviver);
+}

src/Gang/Gang.ts

@@ -0,0 +1,411 @@
+
+/**
+ * TODO
+ * Add police clashes
+ * balance point to keep them from running out of control
+*/
+
+import { Faction } from "../Faction/Faction";
+import { Factions } from "../Faction/Factions";
+
+import { dialogBoxCreate } from "../../utils/DialogBox";
+import {
+    Reviver,
+    Generic_toJSON,
+    Generic_fromJSON,
+} from "../../utils/JSONReviver";
+
+import { exceptionAlert } from "../../utils/helpers/exceptionAlert";
+import { getRandomInt } from "../../utils/helpers/getRandomInt";
+
+import { GangMemberUpgrade } from "./GangMemberUpgrade";
+import { GangConstants } from "./data/Constants";
+import { CONSTANTS } from "../Constants";
+import { GangMemberTasks } from "./GangMemberTasks";
+import { IAscensionResult } from "./IAscensionResult";
+
+import { AllGangs } from "./AllGangs";
+import { GangMember } from "./GangMember";
+
+import { WorkerScript } from "../Netscript/WorkerScript";
+import { IPlayer } from "../PersonObjects/IPlayer";
+
+
+export class Gang {
+    facName: string;
+    members: GangMember[];
+    wanted: number;
+    respect: number;
+
+    isHackingGang: boolean;
+
+    respectGainRate: number;
+    wantedGainRate: number;
+    moneyGainRate: number;
+
+    storedCycles: number;
+
+    storedTerritoryAndPowerCycles: number;
+
+    territoryClashChance: number;
+    territoryWarfareEngaged: boolean;
+
+    notifyMemberDeath: boolean;
+
+    constructor(facName = "", hacking = false) {
+        this.facName    = facName;
+        this.members    = [];
+        this.wanted     = 1;
+        this.respect    = 1;
+
+        this.isHackingGang = hacking;
+
+        this.respectGainRate = 0;
+        this.wantedGainRate = 0;
+        this.moneyGainRate = 0;
+
+        // When processing gains, this stores the number of cycles until some
+        // limit is reached, and then calculates and applies the gains only at that limit
+        this.storedCycles   = 0;
+
+        // Separate variable to keep track of cycles for Territry + Power gang, which
+        // happens on a slower "clock" than normal processing
+        this.storedTerritoryAndPowerCycles = 0;
+
+        this.territoryClashChance = 0;
+        this.territoryWarfareEngaged = false;
+
+        this.notifyMemberDeath = true;
+    }
+
+    getPower(): number {
+        return AllGangs[this.facName].power;
+    }
+
+    getTerritory(): number {
+        return AllGangs[this.facName].territory;
+    }
+
+    process(numCycles = 1, player: IPlayer): void {
+        const CyclesPerSecond = 1000 / CONSTANTS._idleSpeed;
+
+        if (isNaN(numCycles)) {
+            console.error(`NaN passed into Gang.process(): ${numCycles}`);
+        }
+        this.storedCycles += numCycles;
+
+        // Only process if there are at least 2 seconds, and at most 5 seconds
+        if (this.storedCycles < 2 * CyclesPerSecond) return;
+        const cycles = Math.min(this.storedCycles, 5 * CyclesPerSecond);
+
+        try {
+            this.processGains(cycles, player);
+            this.processExperienceGains(cycles);
+            this.processTerritoryAndPowerGains(cycles);
+            this.storedCycles -= cycles;
+        } catch(e) {
+            console.error(`Exception caught when processing Gang: ${e}`);
+        }
+    }
+
+
+    processGains(numCycles = 1, player: IPlayer): void {
+        // Get gains per cycle
+        let moneyGains = 0;
+        let respectGains = 0;
+        let wantedLevelGains = 0;
+        let justice = 0;
+        for (let i = 0; i < this.members.length; ++i) {
+            respectGains += (this.members[i].calculateRespectGain(this));
+            moneyGains += (this.members[i].calculateMoneyGain(this));
+            const wantedLevelGain = this.members[i].calculateWantedLevelGain(this);
+            wantedLevelGains += wantedLevelGain;
+            if(this.members[i].getTask().baseWanted < 0) justice++; // this member is lowering wanted.
+        }
+        this.respectGainRate = respectGains;
+        this.wantedGainRate = wantedLevelGains;
+        this.moneyGainRate = moneyGains;
+
+        const gain = respectGains * numCycles;
+        this.respect += gain;
+        // Faction reputation gains is respect gain divided by some constant
+        const fac = Factions[this.facName];
+        if (!(fac instanceof Faction)) {
+            dialogBoxCreate("ERROR: Could not get Faction associates with your gang. This is a bug, please report to game dev");
+            throw new Error('Could not find the faction associated with this gang.');
+        }
+        const favorMult = 1 + (fac.favor / 100);
+        fac.playerReputation += ((player.faction_rep_mult * gain * favorMult) / GangConstants.GangRespectToReputationRatio);
+
+        // Keep track of respect gained per member
+        for (let i = 0; i < this.members.length; ++i) {
+            this.members[i].recordEarnedRespect(numCycles, this);
+        }
+        if (!(this.wanted === 1 && wantedLevelGains < 0)) {
+            const oldWanted = this.wanted;
+            let newWanted = oldWanted + (wantedLevelGains * numCycles);
+            newWanted = newWanted * (1 - justice * 0.001); // safeguard
+            // Prevent overflow
+            if (wantedLevelGains <= 0 && newWanted > oldWanted) newWanted = 1;
+
+            this.wanted = newWanted;
+            if (this.wanted < 1) this.wanted = 1;
+        }
+        player.gainMoney(moneyGains * numCycles);
+        player.recordMoneySource(moneyGains * numCycles, "gang");
+    }
+
+    processTerritoryAndPowerGains(numCycles = 1): void {
+        this.storedTerritoryAndPowerCycles += numCycles;
+        if (this.storedTerritoryAndPowerCycles < GangConstants.CyclesPerTerritoryAndPowerUpdate) return;
+        this.storedTerritoryAndPowerCycles -= GangConstants.CyclesPerTerritoryAndPowerUpdate;
+
+        // Process power first
+        const gangName = this.facName;
+        for (const name in AllGangs) {
+            if (AllGangs.hasOwnProperty(name)) {
+                if (name == gangName) {
+                    AllGangs[name].power += this.calculatePower();
+                } else {
+                    // All NPC gangs get random power gains
+                    const gainRoll = Math.random();
+                    if (gainRoll < 0.5) {
+                        // Multiplicative gain (50% chance)
+                        // This is capped per cycle, to prevent it from getting out of control
+                        const multiplicativeGain = AllGangs[name].power * 0.005;
+                        AllGangs[name].power += Math.min(0.85, multiplicativeGain);
+                    } else {
+                        // Additive gain (50% chance)
+                        const additiveGain = 0.75 * gainRoll * AllGangs[name].territory;
+                        AllGangs[name].power += (additiveGain);
+                    }
+                }
+            }
+        }
+
+        // Determine if territory should be processed
+        if (this.territoryWarfareEngaged) {
+            this.territoryClashChance = 1;
+        } else if (this.territoryClashChance > 0) {
+            // Engagement turned off, but still a positive clash chance. So there's
+            // still a chance of clashing but it slowly goes down over time
+            this.territoryClashChance = Math.max(0, this.territoryClashChance - 0.01);
+        }
+
+        // Then process territory
+        for (let i = 0; i < GangConstants.Names.length; ++i) {
+            const others = GangConstants.Names.filter((e) => {
+                return e !== GangConstants.Names[i];
+            });
+            const other = getRandomInt(0, others.length - 1);
+
+            const thisGang = GangConstants.Names[i];
+            const otherGang = others[other];
+
+            // If either of the gangs involved in this clash is the player, determine
+            // whether to skip or process it using the clash chance
+            if (thisGang === gangName || otherGang === gangName) {
+                if (!(Math.random() < this.territoryClashChance)) continue;
+            }
+
+            const thisPwr = AllGangs[thisGang].power;
+            const otherPwr = AllGangs[otherGang].power;
+            const thisChance = thisPwr / (thisPwr + otherPwr);
+
+            function calculateTerritoryGain(winGang: string, loseGang: string): number {
+                const powerBonus = Math.max(1, 1+Math.log(AllGangs[winGang].power/AllGangs[loseGang].power)/Math.log(50));
+                const gains = Math.min(AllGangs[loseGang].territory, powerBonus*0.0001*(Math.random()+.5))
+                return gains;
+            }
+
+            if (Math.random() < thisChance) {
+                if (AllGangs[otherGang].territory <= 0) return;
+                const territoryGain = calculateTerritoryGain(thisGang, otherGang);
+                AllGangs[thisGang].territory += territoryGain;
+                AllGangs[otherGang].territory -= territoryGain;
+                if (thisGang === gangName) {
+                    this.clash(true); // Player won
+                    AllGangs[otherGang].power *= (1 / 1.01);
+                } else if (otherGang === gangName) {
+                    this.clash(false); // Player lost
+                } else {
+                    AllGangs[otherGang].power *= (1 / 1.01);
+                }
+            } else {
+                if (AllGangs[thisGang].territory <= 0) return;
+                const territoryGain = calculateTerritoryGain(otherGang, thisGang);
+                AllGangs[thisGang].territory -= territoryGain;
+                AllGangs[otherGang].territory += territoryGain;
+                if (thisGang === gangName) {
+                    this.clash(false); // Player lost
+                } else if (otherGang === gangName) {
+                    this.clash(true); // Player won
+                    AllGangs[thisGang].power *= (1 / 1.01);
+                } else {
+                    AllGangs[thisGang].power *= (1 / 1.01);
+                }
+            }
+        }
+    }
+
+    processExperienceGains(numCycles = 1): void {
+        for (let i = 0; i < this.members.length; ++i) {
+            this.members[i].gainExperience(numCycles);
+            this.members[i].updateSkillLevels();
+        }
+    }
+
+    clash(won = false): void {
+        // Determine if a gang member should die
+        let baseDeathChance = 0.01;
+        if (won) baseDeathChance /= 2;
+
+        // If the clash was lost, the player loses a small percentage of power
+        else AllGangs[this.facName].power *= (1 / 1.008);
+
+        // Deaths can only occur during X% of clashes
+        if (Math.random() < 0.65) return;
+
+        for (let i = this.members.length - 1; i >= 0; --i) {
+            const member = this.members[i];
+
+            // Only members assigned to Territory Warfare can die
+            if (member.task !== "Territory Warfare") continue;
+
+            // Chance to die is decreased based on defense
+            const modifiedDeathChance = baseDeathChance / Math.pow(member.def, 0.6);
+            if (Math.random() < modifiedDeathChance) {
+                this.killMember(member);
+            }
+        }
+    }
+
+    canRecruitMember(): boolean {
+        if (this.members.length >= GangConstants.MaximumGangMembers) return false;
+        return (this.respect >= this.getRespectNeededToRecruitMember());
+    }
+
+    getRespectNeededToRecruitMember(): number {
+        // First N gang members are free (can be recruited at 0 respect)
+        const numFreeMembers = 3;
+        if (this.members.length < numFreeMembers) return 0;
+
+        const i = this.members.length - (numFreeMembers - 1);
+        return Math.pow(5, i);
+    }
+
+    recruitMember(name: string): boolean {
+        name = String(name);
+        if (name === "" || !this.canRecruitMember()) return false;
+
+        // Check for already-existing names
+        const sameNames = this.members.filter((m) => m.name === name);
+        if (sameNames.length >= 1) return false;
+
+        const member = new GangMember(name);
+        this.members.push(member);
+        return true;
+    }
+
+    // Money and Respect gains multiplied by this number (< 1)
+    getWantedPenalty(): number {
+        return (this.respect) / (this.respect + this.wanted);
+    }
+
+
+    //Calculates power GAIN, which is added onto the Gang's existing power
+    calculatePower(): number {
+        let memberTotal = 0;
+        for (let i = 0; i < this.members.length; ++i) {
+            if (!GangMemberTasks.hasOwnProperty(this.members[i].task) ||
+                this.members[i].task !== "Territory Warfare") continue;
+            memberTotal += this.members[i].calculatePower();
+        }
+        return (0.015 * Math.max(0.002, this.getTerritory()) * memberTotal);
+    }
+
+
+    killMember(member: GangMember): void {
+        // Player loses a percentage of total respect, plus whatever respect that member has earned
+        const totalRespect = this.respect;
+        const lostRespect = (0.05 * totalRespect) + member.earnedRespect;
+        this.respect = Math.max(0, totalRespect - lostRespect);
+
+        for (let i = 0; i < this.members.length; ++i) {
+            if (member.name === this.members[i].name) {
+                this.members.splice(i, 1);
+                break;
+            }
+        }
+
+        // Notify of death
+        if (this.notifyMemberDeath) {
+            dialogBoxCreate(`${member.name} was killed in a gang clash! You lost ${lostRespect} respect`);
+        }
+    }
+
+    ascendMember(member: GangMember, workerScript?: WorkerScript): IAscensionResult {
+        try {
+            const res = member.ascend();
+            this.respect = Math.max(1, this.respect - res.respect);
+            if (workerScript) {
+                workerScript.log('ascend', `Ascended Gang member ${member.name}`);
+            }
+            return res;
+        } catch(e) {
+            if (workerScript == null) {
+                exceptionAlert(e);
+            }
+            throw e; // Re-throw, will be caught in the Netscript Function
+        }
+    }
+
+    // Cost of upgrade gets cheaper as gang increases in respect + power
+    getDiscount(): number {
+        const power = this.getPower();
+        const respect = this.respect;
+
+        const respectLinearFac = 5e6;
+        const powerLinearFac = 1e6;
+        const discount = Math.pow(respect, 0.01) +
+            respect / respectLinearFac +
+            Math.pow(power, 0.01) +
+            power / powerLinearFac - 1;
+        return Math.max(1, discount);
+    }
+
+    // Returns only valid tasks for this gang. Excludes 'Unassigned'
+    getAllTaskNames(): string[] {
+        return Object.keys(GangMemberTasks).filter((taskName: string) => {
+            const task = GangMemberTasks[taskName];
+            if (task == null) return false;
+            if (task.name === "Unassigned") return false;
+            // yes you need both checks
+            return this.isHackingGang === task.isHacking ||
+                !this.isHackingGang === task.isCombat;
+        });
+    }
+
+    getUpgradeCost(upg: GangMemberUpgrade | null): number {
+        if (upg == null) { return Infinity; }
+        return upg.cost/this.getDiscount();
+    }
+
+    /**
+     * Serialize the current object to a JSON save state.
+     */
+    toJSON(): any {
+        return Generic_toJSON("Gang", this);
+    }
+
+    /**
+     * Initiatizes a Gang object from a JSON save state.
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    static fromJSON(value: any): Gang {
+        return Generic_fromJSON(Gang, value.data);
+    }
+
+}
+
+Reviver.constructors.Gang = Gang;

src/Gang/GangMember.ts

@@ -0,0 +1,320 @@
+import { GangMemberTask } from "./GangMemberTask";
+import { GangMemberTasks } from "./GangMemberTasks";
+import { GangMemberUpgrade } from "./GangMemberUpgrade";
+import { GangMemberUpgrades } from "./GangMemberUpgrades";
+import { IAscensionResult } from "./IAscensionResult";
+import { IPlayer } from "../PersonObjects/IPlayer";
+import { AllGangs } from "./AllGangs";
+import { IGang } from "./IGang";
+import { Generic_fromJSON, Generic_toJSON, Reviver } from "../../utils/JSONReviver";
+
+interface IMults {
+    hack: number;
+    str: number;
+    def: number;
+    dex: number;
+    agi: number;
+    cha: number;
+}
+
+export class GangMember {
+    name: string;
+    task = "Unassigned";
+
+    earnedRespect = 0;
+
+    hack = 1;
+    str = 1;
+    def = 1;
+    dex = 1;
+    agi = 1;
+    cha = 1;
+
+    hack_exp = 0;
+    str_exp = 0;
+    def_exp = 0;
+    dex_exp = 0;
+    agi_exp = 0;
+    cha_exp = 0;
+
+    hack_mult = 1;
+    str_mult = 1;
+    def_mult = 1;
+    dex_mult = 1;
+    agi_mult = 1;
+    cha_mult = 1;
+
+    hack_asc_points = 0;
+    str_asc_points = 0;
+    def_asc_points = 0;
+    dex_asc_points = 0;
+    agi_asc_points = 0;
+    cha_asc_points = 0;
+
+    upgrades: string[] = []; // Names of upgrades
+    augmentations: string[] = []; // Names of augmentations only
+
+    constructor(name = "") {
+        this.name   = name;
+    }
+
+    calculateSkill(exp: number, mult = 1): number {
+        return Math.max(Math.floor(mult * (32 * Math.log(exp + 534.5) - 200)), 1);
+    }
+
+    calculateAscensionMult(points: number): number {
+        return Math.max(Math.pow(points/4000, 0.7), 1);
+    }
+
+    updateSkillLevels(): void {
+        this.hack   = this.calculateSkill(this.hack_exp, this.hack_mult * this.calculateAscensionMult(this.hack_asc_points));
+        this.str    = this.calculateSkill(this.str_exp, this.str_mult * this.calculateAscensionMult(this.str_asc_points));
+        this.def    = this.calculateSkill(this.def_exp, this.def_mult * this.calculateAscensionMult(this.def_asc_points));
+        this.dex    = this.calculateSkill(this.dex_exp, this.dex_mult * this.calculateAscensionMult(this.dex_asc_points));
+        this.agi    = this.calculateSkill(this.agi_exp, this.agi_mult * this.calculateAscensionMult(this.agi_asc_points));
+        this.cha    = this.calculateSkill(this.cha_exp, this.cha_mult * this.calculateAscensionMult(this.cha_asc_points));
+    }
+
+    calculatePower(): number {
+        return (this.hack +
+                this.str +
+                this.def +
+                this.dex +
+                this.agi +
+                this.cha) / 95;
+    }
+
+    assignToTask(taskName: string): boolean {
+        if (!GangMemberTasks.hasOwnProperty(taskName)) {
+            this.task = "Unassigned";
+            return false;
+        }
+        this.task = taskName;
+        return true;
+    }
+
+    unassignFromTask(): void {
+        this.task = "Unassigned";
+    }
+
+    getTask(): GangMemberTask {
+        // TODO(hydroflame): transfer that to a save file migration function
+        // Backwards compatibility
+        if ((this.task as any) instanceof GangMemberTask) {
+            this.task = (this.task as any).name;
+        }
+
+        if (GangMemberTasks.hasOwnProperty(this.task)) {
+            return GangMemberTasks[this.task];
+        }
+        return GangMemberTasks["Unassigned"];
+    }
+
+    calculateRespectGain(gang: IGang): number {
+        const task = this.getTask();
+        if (task.baseRespect === 0) return 0;
+        let statWeight = (task.hackWeight/100) * this.hack +
+                         (task.strWeight/100) * this.str +
+                         (task.defWeight/100) * this.def +
+                         (task.dexWeight/100) * this.dex +
+                         (task.agiWeight/100) * this.agi +
+                         (task.chaWeight/100) * this.cha;
+        statWeight -= (4 * task.difficulty);
+        if (statWeight <= 0) return 0;
+        const territoryMult = Math.max(0.005, Math.pow(AllGangs[gang.facName].territory * 100, task.territory.respect) / 100);
+        if (isNaN(territoryMult) || territoryMult <= 0) return 0;
+        const respectMult = gang.getWantedPenalty();
+        return 11 * task.baseRespect * statWeight * territoryMult * respectMult;
+    }
+
+    calculateWantedLevelGain(gang: IGang): number {
+        const task = this.getTask();
+        if (task.baseWanted === 0) return 0;
+        let statWeight = (task.hackWeight / 100) * this.hack +
+                         (task.strWeight / 100) * this.str +
+                         (task.defWeight / 100) * this.def +
+                         (task.dexWeight / 100) * this.dex +
+                         (task.agiWeight / 100) * this.agi +
+                         (task.chaWeight / 100) * this.cha;
+        statWeight -= (3.5 * task.difficulty);
+        if (statWeight <= 0) return 0;
+        const territoryMult = Math.max(0.005, Math.pow(AllGangs[gang.facName].territory * 100, task.territory.wanted) / 100);
+        if (isNaN(territoryMult) || territoryMult <= 0) return 0;
+        if (task.baseWanted < 0) {
+            return 0.4 * task.baseWanted * statWeight * territoryMult;
+        }
+        const calc = 7 * task.baseWanted / (Math.pow(3 * statWeight * territoryMult, 0.8));
+
+        // Put an arbitrary cap on this to prevent wanted level from rising too fast if the
+        // denominator is very small. Might want to rethink formula later
+        return Math.min(100, calc);
+    }
+
+    calculateMoneyGain(gang: IGang): number {
+        const task = this.getTask();
+        if (task.baseMoney === 0) return 0;
+        let statWeight =    (task.hackWeight/100) * this.hack +
+                            (task.strWeight/100) * this.str +
+                            (task.defWeight/100) * this.def +
+                            (task.dexWeight/100) * this.dex +
+                            (task.agiWeight/100) * this.agi +
+                            (task.chaWeight/100) * this.cha;
+
+        statWeight -= (3.2 * task.difficulty);
+        if (statWeight <= 0) return 0;
+        const territoryMult = Math.max(0.005, Math.pow(AllGangs[gang.facName].territory * 100, task.territory.money) / 100);
+        if (isNaN(territoryMult) || territoryMult <= 0) return 0;
+        const respectMult = gang.getWantedPenalty();
+        return 5 * task.baseMoney * statWeight * territoryMult * respectMult;
+    }
+
+    expMult(): IMults {
+        return {
+            hack: (this.hack_mult-1)/4+1,
+            str: (this.str_mult-1)/4+1,
+            def: (this.def_mult-1)/4+1,
+            dex: (this.dex_mult-1)/4+1,
+            agi: (this.agi_mult-1)/4+1,
+            cha: (this.cha_mult-1)/4+1,
+        };
+    }
+
+    gainExperience(numCycles = 1): void {
+        const task = this.getTask();
+        if (task === GangMemberTasks["Unassigned"]) return;
+        const difficultyMult = Math.pow(task.difficulty, 0.9);
+        const difficultyPerCycles = difficultyMult * numCycles;
+        const weightDivisor = 1500;
+        const expMult = this.expMult();
+        this.hack_exp   += (task.hackWeight / weightDivisor) * difficultyPerCycles * expMult.hack;
+        this.str_exp    += (task.strWeight / weightDivisor) * difficultyPerCycles * expMult.str;
+        this.def_exp    += (task.defWeight / weightDivisor) * difficultyPerCycles * expMult.def;
+        this.dex_exp    += (task.dexWeight / weightDivisor) * difficultyPerCycles * expMult.dex;
+        this.agi_exp    += (task.agiWeight / weightDivisor) * difficultyPerCycles * expMult.agi;
+        this.cha_exp    += (task.chaWeight / weightDivisor) * difficultyPerCycles * expMult.cha;
+    }
+
+    recordEarnedRespect(numCycles = 1, gang: IGang): void {
+        this.earnedRespect += (this.calculateRespectGain(gang) * numCycles);
+    }
+
+    getGainedAscensionPoints(): IMults {
+        return {
+            hack: Math.max(this.hack_exp - 1000, 0),
+            str:  Math.max(this.str_exp - 1000, 0),
+            def:  Math.max(this.def_exp - 1000, 0),
+            dex:  Math.max(this.dex_exp - 1000, 0),
+            agi:  Math.max(this.agi_exp - 1000, 0),
+            cha:  Math.max(this.cha_exp - 1000, 0),
+        }
+    }
+
+    canAscend(): boolean {
+        const points = this.getGainedAscensionPoints();
+        return points.hack > 0 ||
+                points.str > 0 ||
+                points.def > 0 ||
+                points.dex > 0 ||
+                points.agi > 0 ||
+                points.cha > 0;
+    }
+
+    getAscensionResults(): IMults {
+        const points = this.getGainedAscensionPoints();
+        return {
+            hack: this.calculateAscensionMult(this.hack_asc_points+points.hack)/this.calculateAscensionMult(this.hack_asc_points),
+            str:  this.calculateAscensionMult(this.str_asc_points+points.str)/this.calculateAscensionMult(this.str_asc_points),
+            def:  this.calculateAscensionMult(this.def_asc_points+points.def)/this.calculateAscensionMult(this.def_asc_points),
+            dex:  this.calculateAscensionMult(this.dex_asc_points+points.dex)/this.calculateAscensionMult(this.dex_asc_points),
+            agi:  this.calculateAscensionMult(this.agi_asc_points+points.agi)/this.calculateAscensionMult(this.agi_asc_points),
+            cha:  this.calculateAscensionMult(this.cha_asc_points+points.cha)/this.calculateAscensionMult(this.cha_asc_points),
+        }
+    }
+
+    ascend(): IAscensionResult {
+        const res = this.getAscensionResults();
+        const points = this.getGainedAscensionPoints();
+        this.hack_asc_points += points.hack;
+        this.str_asc_points += points.str;
+        this.def_asc_points += points.def;
+        this.dex_asc_points += points.dex;
+        this.agi_asc_points += points.agi;
+        this.cha_asc_points += points.cha;
+
+        // Remove upgrades. Then re-calculate multipliers and stats
+        this.upgrades.length = 0;
+        this.hack_mult = 1;
+        this.str_mult = 1;
+        this.def_mult = 1;
+        this.dex_mult = 1;
+        this.agi_mult = 1;
+        this.cha_mult = 1;
+        for (let i = 0; i < this.augmentations.length; ++i) {
+            const aug = GangMemberUpgrades[this.augmentations[i]];
+            this.applyUpgrade(aug);
+        }
+
+        // Clear exp and recalculate stats
+        this.hack_exp = 0;
+        this.str_exp = 0;
+        this.def_exp = 0;
+        this.dex_exp = 0;
+        this.agi_exp = 0;
+        this.cha_exp = 0;
+        this.updateSkillLevels();
+
+        const respectToDeduct = this.earnedRespect;
+        this.earnedRespect = 0;
+        return {
+            respect: respectToDeduct,
+            hack: res.hack,
+            str: res.str,
+            def: res.def,
+            dex: res.dex,
+            agi: res.agi,
+            cha: res.cha,
+        };
+    }
+
+    applyUpgrade(upg: GangMemberUpgrade): void {
+        if (upg.mults.str != null)  this.str_mult *= upg.mults.str;
+        if (upg.mults.def != null)  this.def_mult *= upg.mults.def;
+        if (upg.mults.dex != null)  this.dex_mult *= upg.mults.dex;
+        if (upg.mults.agi != null)  this.agi_mult *= upg.mults.agi;
+        if (upg.mults.cha != null)  this.cha_mult *= upg.mults.cha;
+        if (upg.mults.hack != null) this.hack_mult *= upg.mults.hack;
+    }
+
+    buyUpgrade(upg: GangMemberUpgrade, player: IPlayer, gang: IGang): boolean {
+        // Prevent purchasing of already-owned upgrades
+        if (this.augmentations.includes(upg.name) ||
+            this.upgrades.includes(upg.name)) return false;
+
+        if (player.money.lt(gang.getUpgradeCost(upg))) return false;
+        player.loseMoney(gang.getUpgradeCost(upg));
+        if (upg.type === "g") {
+            this.augmentations.push(upg.name);
+        } else {
+            this.upgrades.push(upg.name);
+        }
+        this.applyUpgrade(upg);
+        return true;
+    }
+
+    /**
+     * Serialize the current object to a JSON save state.
+     */
+    toJSON(): any {
+        return Generic_toJSON("GangMember", this);
+    }
+
+    /**
+     * Initiatizes a GangMember object from a JSON save state.
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    static fromJSON(value: any): GangMember {
+        return Generic_fromJSON(GangMember, value.data);
+    }
+}
+
+Reviver.constructors.GangMember = GangMember;

src/Gang/GangMemberTask.ts

@@ -0,0 +1,62 @@
+import { ITaskParams, ITerritory } from "./ITaskParams";
+
+export class GangMemberTask {
+    name: string;
+    desc: string;
+
+    isHacking: boolean;
+    isCombat: boolean;
+
+    baseRespect: number;
+    baseWanted: number;
+    baseMoney: number;
+
+    hackWeight: number;
+    strWeight: number;
+    defWeight: number;
+    dexWeight: number;
+    agiWeight: number;
+    chaWeight: number;
+
+    difficulty: number;
+
+    territory: ITerritory;
+
+    // Defines tasks that Gang Members can work on
+    constructor(name: string, desc: string, isHacking: boolean, isCombat: boolean, params: ITaskParams) {
+        this.name = name;
+        this.desc = desc;
+
+        // Flags that describe whether this Task is applicable for Hacking/Combat gangs
+        this.isHacking = isHacking;
+        this.isCombat = isCombat;
+
+        // Base gain rates for respect/wanted/money
+        this.baseRespect = params.baseRespect ? params.baseRespect : 0;
+        this.baseWanted  = params.baseWanted  ? params.baseWanted  : 0;
+        this.baseMoney   = params.baseMoney   ? params.baseMoney   : 0;
+
+        // Weighting for the effect that each stat has on the tasks effectiveness.
+        // Weights must add up to 100
+        this.hackWeight = params.hackWeight ? params.hackWeight : 0;
+        this.strWeight  = params.strWeight  ? params.strWeight  : 0;
+        this.defWeight  = params.defWeight  ? params.defWeight  : 0;
+        this.dexWeight  = params.dexWeight  ? params.dexWeight  : 0;
+        this.agiWeight  = params.agiWeight  ? params.agiWeight  : 0;
+        this.chaWeight  = params.chaWeight  ? params.chaWeight  : 0;
+
+        if (Math.round(this.hackWeight + this.strWeight + this.defWeight + this.dexWeight + this.agiWeight + this.chaWeight) != 100) {
+            console.error(`GangMemberTask ${this.name} weights do not add up to 100`);
+        }
+
+        // 1 - 100
+        this.difficulty = params.difficulty ? params.difficulty : 1;
+
+        // Territory Factors. Exponential factors that dictate how territory affects gains
+        // Formula: Territory Mutiplier = (Territory * 100) ^ factor / 100
+        // So factor should be > 1 if something should scale exponentially with territory
+        // and should be < 1 if it should have diminshing returns
+        this.territory  = params.territory ? params.territory : {money: 1, respect: 1, wanted: 1};
+    }
+
+}

src/Gang/GangMemberTasks.ts

@@ -0,0 +1,12 @@
+import { gangMemberTasksMetadata } from "./data/tasks";
+import { GangMemberTask } from "./GangMemberTask";
+
+export const GangMemberTasks: {
+    [key: string]: GangMemberTask;
+} = {};
+
+(function() {
+    gangMemberTasksMetadata.forEach((e) => {
+        GangMemberTasks[e.name] = new GangMemberTask(e.name, e.desc, e.isHacking, e.isCombat, e.params);
+    });
+})();

src/Gang/GangMemberUpgrade.ts

@@ -0,0 +1,66 @@
+import { IMults, UpgradeType } from "./data/upgrades";
+import { numeralWrapper } from "../ui/numeralFormat";
+
+export class GangMemberUpgrade {
+    name: string;
+    cost: number;
+    type: UpgradeType;
+    desc: string;
+    mults: IMults;
+
+    constructor(name = "", cost = 0, type: UpgradeType = UpgradeType.Weapon, mults: IMults = {}) {
+        this.name = name;
+        this.cost = cost;
+        this.type = type;
+        this.mults = mults;
+
+        this.desc = this.createDescription();
+    }
+
+    createDescription(): string {
+        const lines = ["Effects:"];
+        if (this.mults.str != null) {
+            lines.push(`+${numeralWrapper.formatPercentage(this.mults.str-1, 0)} strength skill`);
+            lines.push(`+${numeralWrapper.formatPercentage((this.mults.str-1)/4, 2)} strength exp`);
+        }
+        if (this.mults.def != null) {
+            lines.push(`+${numeralWrapper.formatPercentage(this.mults.def-1, 0)} defense skill`);
+            lines.push(`+${numeralWrapper.formatPercentage((this.mults.def-1)/4, 2)} defense exp`);
+        }
+        if (this.mults.dex != null) {
+            lines.push(`+${numeralWrapper.formatPercentage(this.mults.dex-1, 0)} dexterity skill`);
+            lines.push(`+${numeralWrapper.formatPercentage((this.mults.dex-1)/4, 2)} dexterity exp`);
+        }
+        if (this.mults.agi != null) {
+            lines.push(`+${numeralWrapper.formatPercentage(this.mults.agi-1, 0)} agility skill`);
+            lines.push(`+${numeralWrapper.formatPercentage((this.mults.agi-1)/4, 2)} agility exp`);
+        }
+        if (this.mults.cha != null) {
+            lines.push(`+${numeralWrapper.formatPercentage(this.mults.cha-1, 0)} charisma skill`);
+            lines.push(`+${numeralWrapper.formatPercentage((this.mults.cha-1)/4, 2)} charisma exp`);
+        }
+        if (this.mults.hack != null) {
+            lines.push(`+${numeralWrapper.formatPercentage(this.mults.hack-1, 0)} hacking skill`);
+            lines.push(`+${numeralWrapper.formatPercentage((this.mults.hack-1)/4, 2)} hacking exp`);
+        }
+        return lines.join("<br>");
+    }
+
+    // User friendly version of type.
+    getType(): string {
+        switch (this.type) {
+            case UpgradeType.Weapon:
+                return "Weapon";
+            case UpgradeType.Armor:
+                return "Armor";
+            case UpgradeType.Vehicle:
+                return "Vehicle";
+            case UpgradeType.Rootkit:
+                return "Rootkit";
+            case UpgradeType.Augmentation:
+                return "Augmentation";
+            default:
+                return "";
+        }
+    }
+}

src/Gang/GangMemberUpgrades.ts

@@ -0,0 +1,12 @@
+import { gangMemberUpgradesMetadata } from "./data/upgrades";
+import { GangMemberUpgrade } from "./GangMemberUpgrade";
+
+export const GangMemberUpgrades: {
+    [key: string]: GangMemberUpgrade;
+} = {};
+
+(function() {
+    gangMemberUpgradesMetadata.forEach((e) => {
+        GangMemberUpgrades[e.name] = new GangMemberUpgrade(e.name, e.cost, e.upgType, e.mults);
+    });
+})();

src/Gang/Helpers.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { IPlayer } from "../PersonObjects/IPlayer";
+import { IEngine } from "../IEngine";
+import { Root } from "./ui/Root";
+import { Gang } from "./Gang";
+import { Page, routing } from ".././ui/navigationTracking";
+
+let gangContainer: HTMLElement;
+
+(function() {
+    function set(): void {
+        const c = document.getElementById("gang-container");
+        if(c === null) throw new Error("Could not find element 'gang-container'");
+        gangContainer = c;
+        document.removeEventListener("DOMContentLoaded", set);
+    }
+
+    document.addEventListener("DOMContentLoaded", set);
+})();
+
+
+export function displayGangContent(engine: IEngine, gang: Gang, player: IPlayer): void {
+    if (!routing.isOn(Page.Gang)) {
+        return;
+    }
+
+    ReactDOM.render(<Root
+        engine={engine}
+        gang={gang}
+        player={player} />, gangContainer);
+}

src/Gang/IAscensionResult.ts

@@ -0,0 +1,9 @@
+export interface IAscensionResult {
+    respect: number;
+    hack: number;
+    str: number;
+    def: number;
+    dex: number;
+    agi: number;
+    cha: number;
+}

src/Gang/IGang.ts

@@ -0,0 +1,44 @@
+import { GangMemberUpgrade } from "./GangMemberUpgrade";
+import { GangMember } from "./GangMember";
+import { WorkerScript } from "../Netscript/WorkerScript";
+import { IPlayer } from "../PersonObjects/IPlayer";
+
+export interface IGang {
+    facName: string;
+    members: GangMember[];
+    wanted: number;
+    respect: number;
+
+    isHackingGang: boolean;
+
+    respectGainRate: number;
+    wantedGainRate: number;
+    moneyGainRate: number;
+
+    storedCycles: number;
+
+    storedTerritoryAndPowerCycles: number;
+
+    territoryClashChance: number;
+    territoryWarfareEngaged: boolean;
+
+    notifyMemberDeath: boolean;
+
+    getPower(): number;
+    getTerritory(): number;
+    process(numCycles: number, player: IPlayer): void;
+    processGains(numCycles: number, player: IPlayer): void;
+    processTerritoryAndPowerGains(numCycles: number): void;
+    processExperienceGains(numCycles: number): void;
+    clash(won: boolean): void;
+    canRecruitMember(): boolean;
+    getRespectNeededToRecruitMember(): number;
+    recruitMember(name: string): boolean;
+    getWantedPenalty(): number;
+    calculatePower(): number;
+    killMember(member: GangMember): void;
+    ascendMember(member: GangMember, workerScript: WorkerScript): void;
+    getDiscount(): number;
+    getAllTaskNames(): string[];
+    getUpgradeCost(upg: GangMemberUpgrade): number;
+}

src/Gang/ITaskParams.ts

@@ -0,0 +1,20 @@
+
+export interface ITerritory {
+    money: number;
+    respect: number;
+    wanted: number;
+}
+
+export interface ITaskParams {
+    baseRespect?: number;
+    baseWanted?: number;
+    baseMoney?: number;
+    hackWeight?: number;
+    strWeight?: number;
+    defWeight?: number;
+    dexWeight?: number;
+    agiWeight?: number;
+    chaWeight?: number;
+    difficulty?: number;
+    territory?: ITerritory;
+}

src/Gang/data/Constants.ts

@@ -0,0 +1,24 @@
+export const GangConstants: {
+    GangRespectToReputationRatio: number;
+    MaximumGangMembers: number;
+    CyclesPerTerritoryAndPowerUpdate: number;
+    AscensionMultiplierRatio: number;
+    Names: string[];
+} = {
+     // Respect is divided by this to get rep gain
+    GangRespectToReputationRatio: 25,
+    MaximumGangMembers: 12,
+    CyclesPerTerritoryAndPowerUpdate: 100,
+     // Portion of upgrade multiplier that is kept after ascending
+    AscensionMultiplierRatio: .15,
+    // Names of possible Gangs
+    Names: [
+        "Slum Snakes",
+        "Tetrads",
+        "The Syndicate",
+        "The Dark Army",
+        "Speakers for the Dead",
+        "NiteSec",
+        "The Black Hand",
+    ],
+};

src/Gang/data/tasks.ts

@@ -1,3 +1,4 @@
+import { ITaskParams } from "../ITaskParams";
 /* tslint:disable:max-line-length */
 
 /**
@@ -29,7 +30,7 @@ export interface IGangMemberTaskMetadata {
      * An object containing weighting parameters for the task. These parameters are used for
      * various calculations (respect gain, wanted gain, etc.)
      */
-    params?: any;
+    params: ITaskParams;
 }
 
 /**
@@ -254,7 +255,7 @@ export const gangMemberTasksMetadata: IGangMemberTaskMetadata[] = [
         name: "Train Combat",
         params: {
             strWeight: 25, defWeight: 25, dexWeight: 25, agiWeight: 25,
-            difficulty: 5,
+            difficulty: 100,
         },
     },
     {
@@ -262,7 +263,7 @@ export const gangMemberTasksMetadata: IGangMemberTaskMetadata[] = [
         isCombat: true,
         isHacking: true,
         name: "Train Hacking",
-        params: {hackWeight: 100, difficulty: 8},
+        params: {hackWeight: 100, difficulty: 45},
     },
     {
         desc: "Assign this gang member to train their charisma",
@@ -281,4 +282,4 @@ export const gangMemberTasksMetadata: IGangMemberTaskMetadata[] = [
             difficulty: 5,
         },
     },
-];
+];

src/Gang/data/upgrades.ts

@@ -1,12 +1,29 @@
+export interface IMults {
+    hack?: number;
+    str?: number;
+    def?: number;
+    dex?: number;
+    agi?: number;
+    cha?: number;
+}
+
+export enum UpgradeType {
+    Weapon = "w",
+    Armor = "a",
+    Vehicle = "v",
+    Rootkit = "r",
+    Augmentation = "g",
+}
+
 /**
  * Defines the parameters that can be used to initialize and describe a GangMemberUpgrade
  * (defined in Gang.js)
  */
 export interface IGangMemberUpgradeMetadata {
     cost: number;
-    mults: any;
+    mults: IMults;
     name: string;
-    upgType: string;
+    upgType: UpgradeType;
 }
 
 /**
@@ -18,192 +35,192 @@ export const gangMemberUpgradesMetadata: IGangMemberUpgradeMetadata[] = [
         cost: 1e6,
         mults: {str: 1.04, def: 1.04},
         name: "Baseball Bat",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 12e6,
         mults: {str: 1.08, def: 1.08, dex: 1.08},
         name: "Katana",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 25e6,
         mults: {str: 1.1, def: 1.1, dex: 1.1, agi: 1.1},
         name: "Glock 18C",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 50e6,
         mults: {str: 1.12, def: 1.1, agi: 1.1},
         name: "P90C",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 60e6,
         mults: {str: 1.2, def: 1.15},
         name: "Steyr AUG",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 100e6,
         mults: {str: 1.25, def: 1.2},
         name: "AK-47",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 150e6,
         mults: {str: 1.3, def: 1.25},
         name: "M15A10 Assault Rifle",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 225e6,
         mults: {str: 1.3, dex: 1.25, agi: 1.3},
         name: "AWM Sniper Rifle",
-        upgType: "w",
+        upgType: UpgradeType.Weapon,
     },
     {
         cost: 2e6,
         mults: {def: 1.04},
         name: "Bulletproof Vest",
-        upgType: "a",
+        upgType: UpgradeType.Armor,
     },
     {
         cost: 5e6,
         mults: {def: 1.08},
         name: "Full Body Armor",
-        upgType: "a",
+        upgType: UpgradeType.Armor,
     },
     {
         cost: 25e6,
         mults: {def: 1.15, agi: 1.15},
         name: "Liquid Body Armor",
-        upgType: "a",
+        upgType: UpgradeType.Armor,
     },
     {
         cost: 40e6,
         mults: {def: 1.2},
         name: "Graphene Plating Armor",
-        upgType: "a",
+        upgType: UpgradeType.Armor,
     },
     {
         cost: 3e6,
         mults: {agi: 1.04, cha: 1.04},
         name: "Ford Flex V20",
-        upgType: "v",
+        upgType: UpgradeType.Vehicle,
     },
     {
         cost: 9e6,
         mults: {agi: 1.08, cha: 1.08},
         name: "ATX1070 Superbike",
-        upgType: "v",
+        upgType: UpgradeType.Vehicle,
     },
     {
         cost: 18e6,
         mults: {agi: 1.12, cha: 1.12},
         name: "Mercedes-Benz S9001",
-        upgType: "v",
+        upgType: UpgradeType.Vehicle,
     },
     {
         cost: 30e6,
         mults: {agi: 1.16, cha: 1.16},
         name: "White Ferrari",
-        upgType: "v",
+        upgType: UpgradeType.Vehicle,
     },
     {
         cost: 5e6,
         mults: {hack: 1.05},
         name: "NUKE Rootkit",
-        upgType: "r",
+        upgType: UpgradeType.Rootkit,
     },
     {
         cost: 25e6,
         mults: {hack: 1.1},
         name: "Soulstealer Rootkit",
-        upgType: "r",
+        upgType: UpgradeType.Rootkit,
     },
     {
         cost: 75e6,
         mults: {hack: 1.15},
         name: "Demon Rootkit",
-        upgType: "r",
+        upgType: UpgradeType.Rootkit,
     },
     {
         cost: 40e6,
         mults: {hack: 1.12},
         name: "Hmap Node",
-        upgType: "r",
+        upgType: UpgradeType.Rootkit,
     },
     {
         cost: 75e6,
         mults: {hack: 1.15},
         name: "Jack the Ripper",
-        upgType: "r",
+        upgType: UpgradeType.Rootkit,
     },
     {
         cost: 10e9,
         mults: {str: 1.3, dex: 1.3},
         name: "Bionic Arms",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 10e9,
         mults: {agi: 1.6},
         name: "Bionic Legs",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 15e9,
         mults: {str: 1.15, def: 1.15, dex: 1.15, agi: 1.15},
         name: "Bionic Spine",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 20e9,
         mults: {str: 1.4, def: 1.4},
         name: "BrachiBlades",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 12e9,
         mults: {str: 1.2, def: 1.2},
         name: "Nanofiber Weave",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 25e9,
         mults: {str: 1.5, agi: 1.5},
         name: "Synthetic Heart",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 15e9,
         mults: {str: 1.3, def: 1.3},
         name: "Synfibril Muscle",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 5e9,
         mults: {hack: 1.05},
         name: "BitWire",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 10e9,
         mults: {hack: 1.15},
         name: "Neuralstimulator",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 7.5e9,
         mults: {hack: 1.1},
         name: "DataJack",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
     {
         cost: 50e9,
         mults: {str: 1.7, def: 1.7},
         name: "Graphene Bone Lacings",
-        upgType: "g",
+        upgType: UpgradeType.Augmentation,
     },
 ];

src/Gang/ui/AscensionPopup.tsx

@@ -0,0 +1,70 @@
+/**
+ * React Component for the content of the popup before the player confirms the
+ * ascension of a gang member.
+ */
+import React, { useState, useEffect } from "react";
+import { Gang } from "../Gang";
+import { GangMember } from "../GangMember";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { removePopup } from "../../ui/React/createPopup";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+
+interface IProps {
+    member: GangMember;
+    gang: Gang;
+    popupId: string;
+    onAscend: () => void;
+}
+
+export function AscensionPopup(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+
+    useEffect(() => {
+        const id = setInterval(() => setRerender(old => !old), 1000);
+        return () => clearInterval(id);
+    }, []);
+
+    function confirm(): void {
+        props.onAscend();
+        const res = props.gang.ascendMember(props.member);
+        dialogBoxCreate(<p>
+            You ascended {props.member.name}!<br />
+            <br />
+            Your gang lost {numeralWrapper.formatRespect(res.respect)} respect.<br />
+            <br />
+            {props.member.name} gained the following stat multipliers for ascending:<br />
+            Hacking:   x{numeralWrapper.format(res.hack, '0.000')}<br />
+            Strength:  x{numeralWrapper.format(res.str, '0.000')}<br />
+            Defense:   x{numeralWrapper.format(res.def, '0.000')}<br />
+            Dexterity: x{numeralWrapper.format(res.dex, '0.000')}<br />
+            Agility:   x{numeralWrapper.format(res.agi, '0.000')}<br />
+            Charisma:  x{numeralWrapper.format(res.cha, '0.000')}<br />
+        </p>);
+        removePopup(props.popupId);
+    }
+
+    function cancel(): void {
+        removePopup(props.popupId);
+    }
+
+    const ascendBenefits = props.member.getAscensionResults();
+
+    return (<>
+        <pre>
+Are you sure you want to ascend this member? They will lose all of<br />
+their non-Augmentation upgrades and their stats will reset back to 1.<br />
+<br />
+Furthermore, your gang will lose {numeralWrapper.formatRespect(props.member.earnedRespect)} respect<br />
+<br />
+In return, they will gain the following permanent boost to stat multipliers:<br />
+Hacking:   x{numeralWrapper.format(ascendBenefits.hack, '0.000')}<br />
+Strength:  x{numeralWrapper.format(ascendBenefits.str, '0.000')}<br />
+Defense:   x{numeralWrapper.format(ascendBenefits.def, '0.000')}<br />
+Dexterity: x{numeralWrapper.format(ascendBenefits.dex, '0.000')}<br />
+Agility:   x{numeralWrapper.format(ascendBenefits.agi, '0.000')}<br />
+Charisma:  x{numeralWrapper.format(ascendBenefits.cha, '0.000')}<br />
+        </pre>
+        <button className="std-button" onClick={confirm}>Ascend</button>
+        <button className="std-button" onClick={cancel}>Cancel</button>
+    </>);
+}

src/Gang/ui/BonusTime.tsx

@@ -0,0 +1,29 @@
+/**
+ * React Component for displaying the bonus time remaining.
+ */
+import * as React from "react";
+import { Gang } from "../Gang";
+import { CONSTANTS } from "../../Constants";
+import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFunctions";
+
+interface IProps {
+    gang: Gang;
+}
+
+export function BonusTime(props: IProps): React.ReactElement {
+    const CyclerPerSecond = 1000 / CONSTANTS._idleSpeed;
+    if (props.gang.storedCycles / CyclerPerSecond*1000 <= 5000) return (<></>);
+    const bonusMillis = props.gang.storedCycles / CyclerPerSecond * 1000;
+    return (<>
+        <p className="tooltip" style={{display: "inline-block"}}>
+            Bonus time: {convertTimeMsToTimeElapsedString(bonusMillis)}
+            <span className="tooltiptext noselect">
+                You gain bonus time while offline or when the game is inactive
+                (e.g. when the tab is throttled by the browser). Bonus time
+                makes the Gang mechanic progress faster, up to 5x the normal
+                speed.
+            </span>
+        </p>
+        <br />
+    </>);
+}

src/Gang/ui/GangMemberAccordion.tsx

@@ -0,0 +1,22 @@
+/**
+ * React Component for a gang member on the management subpage.
+ */
+import React from "react";
+import { Gang } from "../Gang";
+import { GangMember } from "../GangMember";
+import { Accordion } from "../../ui/React/Accordion";
+import { GangMemberAccordionContent } from "./GangMemberAccordionContent";
+
+interface IProps {
+    gang: Gang;
+    member: GangMember;
+}
+
+export function GangMemberAccordion(props: IProps): React.ReactElement {
+    return <Accordion
+            panelInitiallyOpened={true}
+            headerContent={<>{props.member.name}</>}
+            panelContent={<GangMemberAccordionContent
+                gang={props.gang}
+                member={props.member} />} />
+}

src/Gang/ui/GangMemberAccordionContent.tsx

@@ -0,0 +1,36 @@
+/**
+ * React Component for the content of the accordion of gang members on the 
+ * management subpage.
+ */
+import React, { useState } from "react";
+import { GangMemberStats } from "./GangMemberStats";
+import { TaskSelector } from "./TaskSelector";
+import { TaskDescription } from "./TaskDescription";
+import { Gang } from "../Gang";
+import { GangMember } from "../GangMember";
+
+interface IProps {
+    gang: Gang;
+    member: GangMember;
+}
+
+export function GangMemberAccordionContent(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    return (<>
+        <div className={"gang-member-info-div tooltip"}>
+            <GangMemberStats
+                onAscend={()=>setRerender(old => !old)}
+                gang={props.gang}
+                member={props.member} />
+        </div>
+        <div className={"gang-member-info-div"}>
+            <TaskSelector
+                onTaskChange={()=>setRerender(old => !old)}
+                gang={props.gang}
+                member={props.member} />
+        </div>
+        <div className={"gang-member-info-div"}>
+            <TaskDescription member={props.member} />
+        </div>
+    </>);
+}

src/Gang/ui/GangMemberList.tsx

@@ -0,0 +1,58 @@
+/**
+ * React Component for the list of gang members on the management subpage.
+ */
+import React, { useState } from "react";
+import { GangMemberUpgradePopup } from "./GangMemberUpgradePopup";
+import { GangMemberAccordion } from "./GangMemberAccordion";
+import { createPopup } from "../../ui/React/createPopup";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Gang } from "../Gang";
+import { GangMember } from "../GangMember";
+import { RecruitButton } from "./RecruitButton";
+
+interface IProps {
+    gang: Gang;
+    player: IPlayer;
+}
+
+export function GangMemberList(props: IProps): React.ReactElement {
+    const [filter, setFilter] = useState("");
+    const setRerender = useState(false)[1];
+
+    function openUpgradePopup(): void {
+        const popupId = `gang-upgrade-popup`;
+        createPopup(popupId, GangMemberUpgradePopup, {
+            gang: props.gang,
+            player: props.player,
+            popupId: popupId,
+        });
+    }
+
+    function onFilterChange(event: React.ChangeEvent<HTMLInputElement>): void {
+        setFilter(event.target.value);
+    }
+
+    const members = props.gang.members.filter((member: GangMember) => member.name.indexOf(filter) > -1 || member.task.indexOf(filter) > -1);
+
+    return (<>
+        <RecruitButton
+            onRecruit={() => setRerender(old => !old)}
+            gang={props.gang} />
+        <br />
+        <input
+            className="text-input noselect"
+            placeholder="Filter gang member"
+            style={{margin: "5px", padding: "5px"}}
+            value={filter}
+            onChange={onFilterChange} />
+        <a
+            className="a-link-button"
+            style={{display: 'inline-block'}}
+            onClick={openUpgradePopup}>Manage Equipment</a>
+        <ul>
+            {members.map((member: GangMember) => <li key={member.name}>
+                <GangMemberAccordion gang={props.gang} member={member} />
+            </li>)}
+        </ul>
+    </>);
+}

src/Gang/ui/GangMemberStats.tsx

@@ -0,0 +1,77 @@
+/**
+ * React Component for the first part of a gang member details.
+ * Contains skills and exp.
+ */
+import React from "react";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { formatNumber } from "../../../utils/StringHelperFunctions";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { createPopup } from "../../ui/React/createPopup";
+import { Gang } from "../Gang";
+import { GangMember } from "../GangMember";
+import { AscensionPopup } from "./AscensionPopup";
+
+interface IProps {
+    member: GangMember;
+    gang: Gang;
+    onAscend: () => void;
+}
+
+export function GangMemberStats(props: IProps): React.ReactElement {
+    function ascend(): void {
+        const popupId = `gang-management-ascend-member ${props.member.name}`;
+        createPopup(popupId, AscensionPopup, {
+            member: props.member,
+            gang: props.gang,
+            popupId: popupId,
+            onAscend: props.onAscend,
+        });
+    }
+
+    function openAscensionHelp(): void {
+        dialogBoxCreate(<>
+            Ascending a Gang Member resets the member's progress and stats in
+            exchange for a permanent boost to their stat multipliers.
+            <br /><br />
+            The additional stat multiplier that the Gang Member gains upon
+            ascension is based on the amount of exp they have.
+            <br /><br />
+            Upon ascension, the member will lose all of its non-Augmentation
+            Equipment and your gang will lose respect equal to the total respect
+            earned by the member.
+        </>);
+    }
+
+    const asc = {
+        hack: props.member.calculateAscensionMult(props.member.hack_asc_points),
+        str: props.member.calculateAscensionMult(props.member.str_asc_points),
+        def: props.member.calculateAscensionMult(props.member.def_asc_points),
+        dex: props.member.calculateAscensionMult(props.member.dex_asc_points),
+        agi: props.member.calculateAscensionMult(props.member.agi_asc_points),
+        cha: props.member.calculateAscensionMult(props.member.cha_asc_points),
+    };
+
+    return (<>
+        <span className="tooltiptext smallfont">
+Hk: x{numeralWrapper.formatMultiplier(props.member.hack_mult * asc.hack)}(x{numeralWrapper.formatMultiplier(props.member.hack_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.hack)} Asc)<br />
+St: x{numeralWrapper.formatMultiplier(props.member.str_mult * asc.str)}(x{numeralWrapper.formatMultiplier(props.member.str_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.str)} Asc)<br />
+Df: x{numeralWrapper.formatMultiplier(props.member.def_mult * asc.def)}(x{numeralWrapper.formatMultiplier(props.member.def_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.def)} Asc)<br />
+Dx: x{numeralWrapper.formatMultiplier(props.member.dex_mult * asc.dex)}(x{numeralWrapper.formatMultiplier(props.member.dex_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.dex)} Asc)<br />
+Ag: x{numeralWrapper.formatMultiplier(props.member.agi_mult * asc.agi)}(x{numeralWrapper.formatMultiplier(props.member.agi_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.agi)} Asc)<br />
+Ch: x{numeralWrapper.formatMultiplier(props.member.cha_mult * asc.cha)}(x{numeralWrapper.formatMultiplier(props.member.cha_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.cha)} Asc)
+        </span>
+        <pre>
+Hacking: {formatNumber(props.member.hack, 0)} ({numeralWrapper.formatExp(props.member.hack_exp)} exp)<br />
+Strength: {formatNumber(props.member.str, 0)} ({numeralWrapper.formatExp(props.member.str_exp)} exp)<br />
+Defense: {formatNumber(props.member.def, 0)} ({numeralWrapper.formatExp(props.member.def_exp)} exp)<br />
+Dexterity: {formatNumber(props.member.dex, 0)} ({numeralWrapper.formatExp(props.member.dex_exp)} exp)<br />
+Agility: {formatNumber(props.member.agi, 0)} ({numeralWrapper.formatExp(props.member.agi_exp)} exp)<br />
+Charisma: {formatNumber(props.member.cha, 0)} ({numeralWrapper.formatExp(props.member.cha_exp)} exp)<br />
+        </pre>
+        <br />
+        { props.member.canAscend() && <>
+        <button className="accordion-button noselect" onClick={ascend}>Ascend</button>
+        <div className="help-tip noselect" style={{marginTop: "5px"}} onClick={openAscensionHelp}>?</div>
+        </>}
+    </>);
+}

src/Gang/ui/GangMemberUpgradePopup.tsx

@@ -0,0 +1,149 @@
+/**
+ * React Component for the popup that manages gang members upgrades
+ */
+import React, { useState, useEffect } from "react";
+import { formatNumber } from "../../../utils/StringHelperFunctions";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { GangMemberUpgrades } from "../GangMemberUpgrades";
+import { GangMemberUpgrade } from "../GangMemberUpgrade";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Money } from "../../ui/React/Money";
+import { removePopup } from "../../ui/React/createPopup";
+import { GangMember } from "../GangMember";
+import { Gang } from "../Gang";
+import { UpgradeType } from "../data/upgrades";
+
+interface IPanelProps {
+    member: GangMember;
+    gang: Gang;
+    player: IPlayer;
+}
+
+function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    function filterUpgrades(list: string[], type: UpgradeType): GangMemberUpgrade[] {
+        return Object.keys(GangMemberUpgrades).filter((upgName: string) => {
+            const upg = GangMemberUpgrades[upgName];
+            if (props.player.money.lt(props.gang.getUpgradeCost(upg)))
+                return false;
+            if(upg.type !== type) return false;
+            if(list.includes(upgName)) return false;
+            return true;
+        }).map((upgName: string) => GangMemberUpgrades[upgName]);
+    }
+    const weaponUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Weapon);
+    const armorUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Armor);
+    const vehicleUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Vehicle);
+    const rootkitUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Rootkit);
+    const augUpgrades = filterUpgrades(props.member.augmentations, UpgradeType.Augmentation);
+
+    function purchasedUpgrade(upgName: string): React.ReactElement {
+        const upg = GangMemberUpgrades[upgName]
+        return (<div key={upgName} className="gang-owned-upgrade tooltip">
+            {upg.name}
+            <span className="tooltiptext" dangerouslySetInnerHTML={{__html: upg.desc}} />
+        </div>);
+    }
+
+    function upgradeButton(upg: GangMemberUpgrade, left = false): React.ReactElement {
+        function onClick(): void {
+            props.member.buyUpgrade(upg, props.player, props.gang);
+            setRerender(old => !old);
+        }
+        return (<a key={upg.name} className="a-link-button tooltip" style={{margin:"2px",  padding:"2px", display:"block", fontSize:"11px"}} onClick={onClick}>
+            {upg.name} - {Money(props.gang.getUpgradeCost(upg))}
+            <span className={left?"tooltiptextleft":"tooltiptext"} dangerouslySetInnerHTML={{__html: upg.desc}} />
+        </a>);
+    }
+
+    const asc = {
+        hack: props.member.calculateAscensionMult(props.member.hack_asc_points),
+        str: props.member.calculateAscensionMult(props.member.str_asc_points),
+        def: props.member.calculateAscensionMult(props.member.def_asc_points),
+        dex: props.member.calculateAscensionMult(props.member.dex_asc_points),
+        agi: props.member.calculateAscensionMult(props.member.agi_asc_points),
+        cha: props.member.calculateAscensionMult(props.member.cha_asc_points),
+    };
+    return (<div style={{border: '1px solid white'}}>
+        <h1>{props.member.name}({props.member.task})</h1>
+        <pre style={{fontSize:"14px", display: "inline-block", width:"20%"}}>
+Hack: {props.member.hack} (x{formatNumber(props.member.hack_mult * asc.hack, 2)})<br />
+Str:  {props.member.str} (x{formatNumber(props.member.str_mult * asc.str, 2)})<br />
+Def:  {props.member.def} (x{formatNumber(props.member.def_mult * asc.def, 2)})<br />
+Dex:  {props.member.dex} (x{formatNumber(props.member.dex_mult * asc.dex, 2)})<br />
+Agi:  {props.member.agi} (x{formatNumber(props.member.agi_mult * asc.agi, 2)})<br />
+Cha:  {props.member.cha} (x{formatNumber(props.member.cha_mult * asc.cha, 2)})
+        </pre>
+        <div className="gang-owned-upgrades-div noselect">
+        Purchased Upgrades: {props.member.upgrades.map((upg: string) => purchasedUpgrade(upg))}
+        {props.member.augmentations.map((upg: string) => purchasedUpgrade(upg))}
+        </div>
+        <div className="noselect" style={{width: "20%", display: "inline-block"}}>
+            <h2>Weapons</h2>
+            {weaponUpgrades.map(upg => upgradeButton(upg))}
+        </div>
+        <div className="noselect" style={{width: "20%", display: "inline-block"}}>
+            <h2>Armor</h2>
+            {armorUpgrades.map(upg => upgradeButton(upg))}
+        </div>
+        <div className="noselect" style={{width: "20%", display: "inline-block"}}>
+            <h2>Vehicles</h2>
+            {vehicleUpgrades.map(upg => upgradeButton(upg))}
+        </div>
+        <div className="noselect" style={{width: "20%", display: "inline-block"}}>
+            <h2>Rootkits</h2>
+            {rootkitUpgrades.map(upg => upgradeButton(upg, true))}
+        </div>
+        <div className="noselect" style={{width: "20%", display: "inline-block"}}>
+            <h2>Augmentations</h2>
+            {augUpgrades.map(upg => upgradeButton(upg, true))}
+        </div>
+    </div>);
+}
+
+interface IProps {
+    gang: Gang;
+    player: IPlayer;
+    popupId: string;
+}
+
+export function GangMemberUpgradePopup(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    const [filter, setFilter] = useState("");
+
+    function closePopup(this: Window, ev: KeyboardEvent): void {
+        if(ev.keyCode !== 27) return;
+        removePopup(props.popupId);
+    }
+
+    useEffect(() => {
+        window.addEventListener<'keydown'>('keydown', closePopup);
+        const id = setInterval(() => setRerender(old => !old), 1000);
+        return () => {
+            clearInterval(id);
+            window.removeEventListener<'keydown'>('keydown', closePopup);
+        }
+    }, []);
+
+    return (<>
+        <input
+            className="text-input noselect"
+            value={filter}
+            placeholder="Filter gang member"
+            onChange={event => setFilter(event.target.value)} />
+        <p className="tooltip" style={{marginLeft: '6px', display: 'inline-block'}}>
+            Discount: -{numeralWrapper.formatPercentage(1 - 1 / props.gang.getDiscount())}
+            <span className="tooltiptext noselect">
+                You get a discount on equipment and upgrades based on your
+                gang's respect and power. More respect and power leads to more
+                discounts.
+            </span>
+        </p>
+        {props.gang.members.map((member: GangMember) => <GangMemberUpgradePanel
+                key={member.name}
+                player={props.player}
+                gang={props.gang}
+                member={member} />)
+        }
+    </>);
+}