From ba3f637eb13fd8d65671ff16415df680e89c1fcb Mon Sep 17 00:00:00 2001
From: Steven Evans <kopelli@gmail.com>
Date: Thu, 2 Aug 2018 12:19:21 -0400
Subject: [PATCH] [feat] Active Scripts list no longer jumps on first update

---
 css/styles.scss        |  8 ++++++++
 index.html             |  5 ++++-
 src/ActiveScriptsUI.js | 28 +++++++++++++++++-----------
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/css/styles.scss b/css/styles.scss
index 75b051143..a1943a52e 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -540,3 +540,11 @@ a:visited {
 .accordion-panel ul > li {
     background-color: #555;
 }
+
+/* override the global <span> styling */
+#active-scripts-total-production-active,
+#active-scripts-total-prod-aug-total,
+#active-scripts-total-prod-aug-avg {
+    margin: 0;
+    padding: 0;
+}
diff --git a/index.html b/index.html
index 343ee7fe4..dac70dc60 100644
--- a/index.html
+++ b/index.html
@@ -187,7 +187,10 @@
         <p id="active-scripts-text"> This page displays a list of all of your scripts that are currently running across every machine. It also
         provides information about each script's production. The scripts are categorized by the hostname of the servers on which
         they are running. </p>
-        <p id="active-scripts-total-prod"> Total online production rate: </p>
+        <p id="active-scripts-total-prod">Total online production of
+            Active scripts: <span id="active-scripts-total-production-active">$0.000</span> / sec<br />
+            Total online production since last Aug installation: <span id="active-scripts-total-prod-aug-total">$0.000</span>
+            (<span id="active-scripts-total-prod-aug-avg">$0.000</span> / sec)</p>
 		<ul class="active-scripts-list" id="active-scripts-list" style="list-style: none;">
 		</ul>
 	</div>
diff --git a/src/ActiveScriptsUI.js b/src/ActiveScriptsUI.js
index d62673031..a57cb0d74 100644
--- a/src/ActiveScriptsUI.js
+++ b/src/ActiveScriptsUI.js
@@ -1,6 +1,5 @@
 import {Engine}                    from "./engine";
 import {workerScripts,
-        addWorkerScript,
         killWorkerScript}          from "./NetscriptWorker";
 import {Player}                    from "./Player";
 import {getServer}                 from "./Server";
@@ -9,6 +8,7 @@ import {createAccordionElement}    from "../utils/uiHelpers/createAccordionEleme
 import {arrayToString}             from "../utils/helpers/arrayToString";
 import {createElement}             from "../utils/uiHelpers/createElement";
 import {exceptionAlert}            from "../utils/helpers/exceptionAlert";
+import {getElementById}            from "../utils/uiHelpers/getElementById";
 import {logBoxCreate}              from "../utils/LogBox";
 import numeral                     from "numeral/min/numeral.min";
 import {formatNumber}              from "../utils/StringHelperFunctions";
@@ -116,20 +116,27 @@ function addActiveScriptsItem(workerscript) {
                        "Args: " + arrayToString(workerscript.args)
         }));
         var panelText = createElement("p", {
-            innerText:"Loading...", fontSize:"14px",
+            innerText: "Loading...",
+            fontSize: "14px",
         });
         panel.appendChild(panelText);
         panel.appendChild(createElement("br"));
         panel.appendChild(createElement("span", {
-            innerText:"Log", class:"active-scripts-button", margin:"4px", padding:"4px",
-            clickListener:()=>{
+            innerText: "Log",
+            class: "active-scripts-button",
+            margin: "4px",
+            padding: "4px",
+            clickListener: () => {
                 logBoxCreate(workerscript.scriptRef);
                 return false;
             }
         }));
         panel.appendChild(createElement("span", {
-            innerText:"Kill Script", class:"active-scripts-button", margin:"4px", padding:"4px",
-            clickListener:()=>{
+            innerText: "Kill Script",
+            class: "active-scripts-button",
+            margin: "4px",
+            padding: "4px",
+            clickListener: () => {
                 killWorkerScript(workerscript.scriptRef, workerscript.scriptRef.scriptRef.server);
                 dialogBoxCreate("Killing script, may take a few minutes to complete...");
                 return false;
@@ -205,11 +212,10 @@ function updateActiveScriptsItems(maxTasks=150) {
             exceptionAlert(e);
         }
     }
-    document.getElementById("active-scripts-total-prod").innerHTML =
-        "Total online production of Active Scripts: " + numeral(total).format('$0.000a') + " / sec<br>" +
-        "Total online production since last Aug installation: " +
-        numeral(Player.scriptProdSinceLastAug).format('$0.000a') + " (" +
-        numeral(Player.scriptProdSinceLastAug / (Player.playtimeSinceLastAug/1000)).format('$0.000a') + " / sec)";
+
+    getElementById("active-scripts-total-production-active").innerText = numeral(total).format('$0.000a');
+    getElementById("active-scripts-total-prod-aug-total").innerText = numeral(Player.scriptProdSinceLastAug).format('$0.000a');
+    getElementById("active-scripts-total-prod-aug-avg").innerText = numeral(Player.scriptProdSinceLastAug / (Player.playtimeSinceLastAug/1000)).format('$0.000a');
     return total;
 }