character overview element reuse

css/styles.scss

@@ -433,8 +433,8 @@ a:visited {
     position: absolute; /* Stay in place */
     right: 0;
     top: 0;
-    height: 205px; /* Full height */
+    height: auto; /* Full height */
-    padding: 5px;
+    padding: 8px;
     border: 2px solid var(--my-highlight-color);
     width: 19%;
     overflow: auto; /* Enable scroll if needed */
@@ -443,12 +443,18 @@ a:visited {
 }
 
 #character-overview-text {
-    padding: 4px;
-    margin: 8px;
     color: #fff;
     background-color: #444;
 }
 
+.character-stat-text {
+    color: #fff;
+    background-color: #444;
+}
+ .character-stat-cell {
+    text-align: right;
+}
+
 #character-overview-save-button,
 #character-overview-options-button {
     @include borderRadius(12px);
@@ -461,6 +467,10 @@ a:visited {
     background-color: #000;
 }
 
+.character-quick-options {
+    padding-top: 5px;
+}
+
 #character-overview-save-button:hover,
 #character-overview-save-button:focus,
 #character-overview-options-button:hover,

index.html

@@ -781,9 +781,41 @@
     <!-- Character Overview Screen -->
     <div id="character-overview-wrapper">
     <div id="character-overview-container">
-        <p id="character-overview-text">  </p>
+        <div id="character-overview-text">
-        <span id="character-overview-save-button"> Save Game </span>
+            <table>
-        <span id="character-overview-options-button"> Options </span>
+                <tr id="character-hp-wrapper">
+                    <td>Hp:</td><td id="character-hp-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-money-wrapper">
+                    <td>Money:&nbsp;</td><td id="character-money-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-hack-wrapper">
+                    <td>Hack:&nbsp;</td><td id="character-hack-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-str-wrapper">
+                    <td>Str:&nbsp;</td><td id="character-str-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-def-wrapper">
+                    <td>Def:&nbsp;</td><td id="character-def-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-dex-wrapper">
+                    <td>Dex:&nbsp;</td><td id="character-dex-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-agi-wrapper">
+                    <td>Agi:&nbsp;</td><td id="character-agi-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-cha-wrapper">
+                    <td>Cha:&nbsp;</td><td id="character-cha-text" class="character-stat-cell"></td>
+                </tr>
+                <tr id="character-int-wrapper">
+                    <td>Int:&nbsp;</td><td id="character-int-text" class="character-stat-cell"></td>
+                </tr>
+            <table>
+        </div>
+        <div class="character-quick-options">
+            <span id="character-overview-save-button"> Save Game </span>
+            <span id="character-overview-options-button"> Options </span>
+        </div>
     </div>
     </div>
 

src/CharacterOverview.js

@@ -0,0 +1,59 @@
+import {Player}  from "./Player";
+import numeral from "numeral/min/numeral.min";
+
+function CharacterOverview() {
+	this.hp = document.getElementById("character-hp-text");
+	this.money = document.getElementById("character-money-text");
+	this.hack = document.getElementById("character-hack-text");
+	this.str = document.getElementById("character-str-text");
+	this.def = document.getElementById("character-def-text");
+	this.dex = document.getElementById("character-dex-text");
+	this.agi = document.getElementById("character-agi-text");
+	this.cha = document.getElementById("character-cha-text");
+	this.int = document.getElementById("character-int-text");
+	this.intWrapper = document.getElementById("character-int-wrapper");
+	this.repaintElem = document.getElementById("character-overview-text");
+	console.log(this.hp,this.money,this.hack,this.str,this.def,this.dex,this.agi,this.cha,this.int,this.intWrapper,this.repaintElem)
+}
+
+CharacterOverview.prototype.repaint = function() {
+	// this is an arbitrary function we can call to trigger a repaint.
+	this.repaintElem.getClientRects();
+}
+
+CharacterOverview.prototype.update = function() {
+		if (Player.hp == null) {Player.hp = Player.max_hp;}
+
+        const replaceAndChanged = function(elem, text) {
+            if(elem.textContent === text) {
+                return false;
+            }
+            elem.textContent = text;
+            return true;
+        }
+
+        let changed = false;
+        changed = replaceAndChanged(this.hp, Player.hp + " / " + Player.max_hp) || changed;
+        changed = replaceAndChanged(this.money, numeral(Player.money.toNumber()).format('($0.000a)')) || changed;
+        changed = replaceAndChanged(this.hack, (Player.hacking_skill).toLocaleString()) || changed;
+        changed = replaceAndChanged(this.str, (Player.strength).toLocaleString()) || changed;
+        changed = replaceAndChanged(this.def, (Player.defense).toLocaleString()) || changed;
+        changed = replaceAndChanged(this.dex, (Player.dexterity).toLocaleString()) || changed;
+        changed = replaceAndChanged(this.agi, (Player.agility).toLocaleString()) || changed;
+        changed = replaceAndChanged(this.cha, (Player.charisma).toLocaleString()) || changed;
+        changed = replaceAndChanged(this.int, (Player.intelligence).toLocaleString()) || changed;
+
+        // handle int appearing
+        const int = this.intWrapper;
+        const old = int.style.display;
+        const now = Player.intelligence >= 1 ? "" : "none";
+        if(old !== now) {
+            int.style.display = now;
+            changed = true;
+        }
+
+        // recalculate box size if something changed
+        if(changed) this.repaint();
+}
+
+export {CharacterOverview};

src/engine.js

@@ -20,6 +20,7 @@ import {Augmentations, installAugmentations,
 import {BitNodes, initBitNodes,
         initBitNodeMultipliers}                 from "./BitNode";
 import {Bladeburner}                            from "./Bladeburner";
+import {CharacterOverview}                      from "./CharacterOverview";
 import {cinematicTextFlag}                      from "./CinematicText";
 import {CompanyPositions, initCompanies}        from "./Company";
 import {Corporation}                            from "./CompanyManagement";
@@ -280,6 +281,7 @@ let Engine = {
         Bladeburner:        "Bladeburner",
     },
     currentPage:    null,
+    overview: new CharacterOverview(),
 
 
     //Time variables (milliseconds unix epoch time)
@@ -570,20 +572,7 @@ let Engine = {
     },
 
     displayCharacterOverviewInfo: function() {
-        if (Player.hp == null) {Player.hp = Player.max_hp;}
+        Engine.overview.update();
-        var overviewText = "Hp:    " + Player.hp + " / " + Player.max_hp + "<br>" +
-                           "Money: " + numeral(Player.money.toNumber()).format('($0.000a)') + "<br>" +
-                           "Hack:  " + (Player.hacking_skill).toLocaleString() + "<br>" +
-                           "Str:   " + (Player.strength).toLocaleString() + "<br>" +
-                           "Def:   " + (Player.defense).toLocaleString() + "<br>" +
-                           "Dex:   " + (Player.dexterity).toLocaleString() + "<br>" +
-                           "Agi:   " + (Player.agility).toLocaleString() + "<br>" +
-                           "Cha:   " + (Player.charisma).toLocaleString();
-        if (Player.intelligence >= 1) {
-            overviewText += "<br>Int:   " + (Player.intelligence).toLocaleString();
-        }
-        document.getElementById("character-overview-text").innerHTML = overviewText.replace( / /g, "&nbsp;");
-        
         
 
         const save = document.getElementById("character-overview-save-button");