hide brush cost gauges if they're irrelevant

static/brush-cost.js

@@ -1,9 +1,10 @@
 class Gauge extends HTMLElement {
-    constructor(iconName, label) {
+    constructor(iconName, label, description) {
         super();
 
         this.iconName = iconName;
         this.label = label;
+        this.description = description;
     }
 
     connectedCallback() {
@@ -12,12 +13,23 @@ class Gauge extends HTMLElement {
 
         this.full = this.appendChild(document.createElement("div"));
         this.full.classList.add("full", "icon", `icon-${this.iconName}-white`);
+
+        this.normalizedValue = 0;
+        this.updateVisibility();
     }
 
     setValue(value, valueMax) {
         let clampedNormalized = Math.max(0, Math.min(1, value / valueMax));
+        this.normalizedValue = clampedNormalized;
         this.style.setProperty("--progress", `${clampedNormalized * 100}%`);
-        this.title = `${this.label}: ${value} / ${valueMax} (${Math.ceil(clampedNormalized * 100)}%)`;
+        this.title = `${this.label}: ${value} / ${valueMax} (${Math.ceil(clampedNormalized * 100)}%)\n${this.description}`;
+        this.updateVisibility();
+    }
+
+    updateVisibility() {
+        this.visible = this.normalizedValue > 0.25;
+        if (!this.visible) this.classList.add("hidden");
+        else this.classList.remove("hidden");
     }
 }
 
@@ -34,6 +46,10 @@ export class BrushCostGauges extends HTMLElement {
                 className: "code-size",
                 iconName: "brackets",
                 label: "Code size",
+                description:
+                    "How large your code is.\n" +
+                    "The more syntactic elements there are, the bigger it gets!\n" +
+                    "Note that this is not the same as the character count.",
             }),
         );
         this.fuelGauge = this.appendChild(
@@ -41,6 +57,10 @@ export class BrushCostGauges extends HTMLElement {
                 className: "fuel",
                 iconName: "droplet",
                 label: "Fuel",
+                description:
+                    "How long your code runs.\n" +
+                    "The longer it runs, the more fuel it consumes!\n" +
+                    "Remember that built-in functions are cheaper than ones you write yourself.",
             }),
         );
         this.memoryGauge = this.appendChild(
@@ -48,6 +68,10 @@ export class BrushCostGauges extends HTMLElement {
                 className: "memory",
                 iconName: "memory",
                 label: "Memory",
+                description:
+                    "How much memory your code uses.\n" +
+                    "This includes a baseline amount of memory for temporary data.\n" +
+                    "Excessive list transformations can fill up your memory very quickly!",
             }),
         );
 
@@ -60,13 +84,18 @@ export class BrushCostGauges extends HTMLElement {
         this.codeSizeGauge.setValue(stats.astSize, stats.astSizeMax);
         this.fuelGauge.setValue(stats.fuel, stats.fuelMax);
         this.memoryGauge.setValue(stats.memory, stats.memoryMax);
+
+        let visible =
+            this.codeSizeGauge.visible || this.fuelGauge.visible || this.memoryGauge.visible;
+        if (!visible) this.classList.add("hidden");
+        else this.classList.remove("hidden");
     }
 }
 
 customElements.define("rkgk-brush-cost-gauges", BrushCostGauges);
 
-function createGauge({ className, iconName, label }) {
-    let gauge = new Gauge(iconName, label);
+function createGauge({ className, iconName, label, description }) {
+    let gauge = new Gauge(iconName, label, description);
     gauge.classList.add(className);
     return gauge;
 }

static/index.css

@@ -425,11 +425,19 @@ rkgk-brush-cost-gauges.rkgk-panel {
 
     overflow: clip; /* clip corners */
 
+    &.hidden {
+        display: none;
+    }
+
     & > rkgk-brush-cost-gauge {
         display: block;
         height: var(--gauge-size);
         flex-grow: 1;
 
+        &.hidden {
+            display: none;
+        }
+
         & > .full {
             width: 100%;
             height: 100%;