Finished ironing out Gang ascension mechanic, including bugs. Refactored UI code to be part of the Gang class.

css/buttons.scss

@@ -99,9 +99,10 @@ button {
     background-color: #000;
 
     &:hover,
-    &:focus {
+    &:active {
         color: #fff;
         text-decoration: none;
         cursor: pointer;
     }
+    /* TODO focus selector? */
 }

css/gang.scss

@@ -9,6 +9,10 @@
     position: fixed;
     padding: 6px;
 
+    p, pre {
+        font-size: $defaultFontSize * 0.9375;
+    }
+
     select {
         background-color: black;
         color: white;
@@ -25,3 +29,20 @@
     float: left;
     width: 30%;
 }
+
+/**
+ * Showing owned upgrades in the Equipment Box
+ */
+
+.gang-owned-upgrades-div {
+    display: inline-block;
+    margin-left: 6px;
+    width: 75%;
+}
+
+.gang-owned-upgrade {
+    border: 1px solid white;
+    font-size: 12px;
+    margin: 1px;
+    padding: 1px;
+}

css/styles.scss

@@ -114,6 +114,29 @@ a:visited {
         position: absolute;
         z-index: 99;
     }
+
+    /* Positioned to left of element rather than right */
+    .tooltiptextleft {
+        visibility: hidden;
+        width: 300px;
+        background-color: var(--my-background-color);
+        border: 2px solid var(--my-highlight-color);
+        color: #fff;
+        text-align: center;
+        padding: 4px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-100%, -100%);
+
+         /* Backwards compatibility */
+        -webkit-transform: translate(-100%, -100%);
+        -moz-transform: translate(-100%, -100%);
+        -o-transform: translate(-100%, -100%);
+        -ms-transform: translate(-100%, -100%);
+
+        position: absolute;
+        z-index: 99;
+    }
 }
 
 /* Same thing as a normal tooltip except its a bit higher */
@@ -132,23 +155,6 @@ a:visited {
     z-index: 99;
 }
 
-/* Similar to a normal tooltip except its positioned on the left of the element
-   rather than the right to avoid exceeding the elements normal width */
-.tooltip .tooltiptextleft {
-    visibility: hidden;
-    width: 300px;
-    background-color: var(--my-background-color);
-    border: 2px solid var(--my-highlight-color);
-    color: #fff;
-    text-align: center;
-    padding: 4px;
-    left: 40%;
-    bottom: -10%;
-
-    position: absolute;
-    z-index: 99;
-}
-
 .tooltip:hover .tooltiptext,
 .tooltip:hover .tooltiptexthigh,
 .tooltip:hover .tooltiptextleft {
@@ -157,14 +163,14 @@ a:visited {
 
 /* help tip. Question mark that opens popup with info/details */
 .help-tip {
-    content: '?';
+    background-color: black;
-    padding: 1px;
-    margin-top: 5px;
-    margin-left: 3px;
-    color: #fff;
     border: 1px solid #fff;
     border-radius: 5px;
+    color: #fff;
+    content: '?';
     display: inline-block;
+    margin-left: 3px;
+    padding: 1px;
 }
 
 .help-tip-big {
@@ -413,7 +419,7 @@ a:visited {
 
     &:after {
         content: '\02795'; /* "plus" sign (+) */
-        font-size: $defaultFontSize * 0.8125;
+        font-size: $defaultFontSize * 0.875;
         float: right;
         color: transparent;
         text-shadow: 0 0 0 #fff;
@@ -480,3 +486,7 @@ a:visited {
 .charisma-purple {
     color: $my-stat-cha-color;
 }
+
+.smallfont {
+    font-size: $defaultFontSize * 0.8125;
+}

src/Bladeburner.js

@@ -1768,8 +1768,9 @@ Bladeburner.prototype.createOverviewContent = function() {
     });
 
     DomElems.overviewStaminaHelpTip = createElement("div", {
-        innerText:"?", class:"help-tip",
+        class:"help-tip",
-        clickListener:()=>{
+        innerText:"?",
+        clickListener: ()=> {
             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 " +
@@ -1781,7 +1782,7 @@ Bladeburner.prototype.createOverviewContent = function() {
                             "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.");
-        }
+        },
     });
 
     DomElems.overviewGen1 = createElement("p", {
@@ -1831,7 +1832,7 @@ Bladeburner.prototype.createOverviewContent = function() {
       innerText: "Bonus time: ",
       display: "inline-block",
       tooltip: "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."
+               "Bonus time makes the Bladeburner mechanic progress faster, up to 5x the normal speed."
     });
     DomElems.overviewSkillPoints = createElement("p", {display:"block"});
 

src/Constants.js

@@ -500,6 +500,14 @@ let CONSTANTS = {
     LatestUpdate:
     `
      v0.41.0
+     * Gang Mechanic Changes (BitNode-2):
+     *** Added new 'ascension' mechanic for Gang Members
+     *** The first three gang members are now 'free' (can be recruited instantly)
+     *** Maximum number of increased Gang Members increased from 20 to 50
+     *** Changed the formula for calculating respect needed to recruit the next gang member
+     *** Added a new category of upgrades for Gang Members: Augmentations
+     *** Non-Augmentation Gang member upgrades are now significantly weaker
+     *** Reputation for your Gang faction can no longer be gained through Infiltration
      * b1t_flum3.exe now takes significantly less time to create
      * Bug Fix: Fixed a bug that sometimes caused a blank black screen when destroying/resetting/switching BitNodes
      * Bug Fix: Netscript calls that throw errors will now no longer cause the 'concurrent calls' error if they are caught in the script. i.e. try/catch should now work properly in scripts

src/Location.js

@@ -28,10 +28,6 @@ import {yesNoBoxCreate, yesNoTxtInpBoxCreate,
         yesNoTxtInpBoxClose}                    from "../utils/YesNoBox";
 
 function displayLocationContent() {
-	if (Engine.Debug) {
-		console.log("displayLocationContent() called with location " + Player.location)
-	}
-
     var returnToWorld           = document.getElementById("location-return-to-world-button");
 
     var locationName            = document.getElementById("location-name");
@@ -1811,7 +1807,7 @@ function initLocationButtons() {
         yesBtn.innerHTML = "Purchase"; noBtn.innerHTML = "Cancel";
         yesBtn.addEventListener("click", ()=>{
             if (Player.money.lt(cost)) {
-                dialogBoxCreate("You do not have enough mone to purchase an additional CPU Core for your home computer!");
+                dialogBoxCreate("You do not have enough money to purchase an additional CPU Core for your home computer!");
             } else {
                 Player.loseMoney(cost);
                 Player.getHomeComputer().cpuCores++;

src/Player.js

@@ -1499,7 +1499,7 @@ PlayerObject.prototype.finishCrime = function(cancelled) {
             } else {
                 dialogBoxCreate("Crime successful! <br><br>" +
                                 "You gained:<br>"+
-                                "$" + formatNumber(this.workMoneyGained, 2) + "<br>" +
+                                numeralWrapper.format(this.workMoneyGained, "$0.000a") + "<br>" +
                                 formatNumber(this.workHackExpGained, 4) + " hacking experience <br>" +
                                 formatNumber(this.workStrExpGained, 4) + " strength experience<br>" +
                                 formatNumber(this.workDefExpGained, 4) + " defense experience<br>" +

src/Prestige.js

@@ -314,8 +314,8 @@ function prestigeSourceFile() {
         stockMarketList.removeChild(stockMarketList.firstChild);
     }
 
+    if (Player.inGang()) { Player.gang.clearUI(); }
     Player.gang = null;
-    deleteGangDisplayContent();
     Player.corporation = null;
     Player.bladeburner = null;
 

src/engine.js

@@ -40,8 +40,6 @@ import {FconfSettings}                                  from "./Fconf";
 import {displayLocationContent,
         initLocationButtons}                            from "./Location";
 import {Locations}                                      from "./Locations";
-import {displayGangContent, updateGangContent,
-        Gang}                                           from "./Gang";
 import {displayHacknetNodesContent, processAllHacknetNodeEarnings,
         updateHacknetNodesContent}                      from "./HacknetNode";
 import {iTutorialStart}                                 from "./InteractiveTutorial";
@@ -457,7 +455,7 @@ const Engine = {
     loadGangContent: function() {
         Engine.hideAllContent();
         if (document.getElementById("gang-container") || Player.inGang()) {
-            displayGangContent();
+            Player.gang.displayGangContent();
             routing.navigateTo(Page.Gang);
         } else {
             Engine.loadTerminalContent();
@@ -520,6 +518,9 @@ const Engine = {
             document.getElementById("gang-container").style.display = "none";
         }
 
+        if (Player.inGang()) {
+            Player.gang.clearUI();
+        }
         if (Player.corporation instanceof Corporation) {
             Player.corporation.clearUI();
         }
@@ -557,7 +558,6 @@ const Engine = {
     displayCharacterOverviewInfo: function() {
         Engine.overview.update();
 
-
         const save = document.getElementById("character-overview-save-button");
         const flashClass = "flashing-button";
         if(!Settings.AutosaveInterval) {
@@ -1076,8 +1076,8 @@ const Engine = {
         }
 
         if (Engine.Counters.updateDisplaysLong <= 0) {
-            if (routing.isOn(Page.Gang)) {
+            if (routing.isOn(Page.Gang) && Player.inGang()) {
-                updateGangContent();
+                Player.gang.updateGangContent();
             } else if (routing.isOn(Page.ScriptEditor)) {
                 updateScriptEditorContent();
             }

utils/InfiltrationBox.js

@@ -65,7 +65,8 @@ function infiltrationBoxCreate(inst) {
     var selector = document.getElementById("infiltration-faction-select");
     selector.innerHTML = "";
     for (let i = 0; i < Player.factions.length; ++i) {
-        if (Player.factions[i] === "Bladeburners") {continue;}
+        if (Player.factions[i] === "Bladeburners") { continue; }
+        if (Player.inGang() && Player.gang.facName === Player.factions[i]) { continue; }
         selector.innerHTML += "<option value='" + Player.factions[i] +
                                "'>" + Player.factions[i] + "</option>";
     }

utils/helpers/keyCodes.ts

@@ -27,4 +27,6 @@ export const KEY: IMap<number> = {
     U:              85,
     UPARROW:        38,
     W:              87,
+    "1":            49,
+    "2":            50,
 };

utils/uiHelpers/createElement.ts

@@ -66,6 +66,7 @@ interface ICreateElementStyleOptions {
 interface ICreateElementTooltipOptions {
     tooltip?: string;
     tooltipleft?: string;
+    tooltipsmall?: string;
 }
 
 /**
@@ -216,6 +217,12 @@ function setElementTooltip(el: HTMLElement, params: ICreateElementTooltipOptions
             class: "tooltiptextleft",
             innerHTML: params.tooltipleft,
         }));
+    } else if (params.tooltipsmall !== undefined) {
+        el.className += " tooltip";
+        el.appendChild(createElement("span", {
+            class: "tooltiptext smallfont",
+            innerHTML: params.tooltipsmall,
+        }))
     }
 }