implement brush cost gauges

they're a little ugly at the moment, and can be a little useless for most simple brushes, but whatever we'll make them better later
2024-10-25 21:38:18 +02:00 · 2024-10-25 21:38:18 +02:00 · 913d65b0a8
commit 913d65b0a8
parent 43e6951f7d
19 changed files with 378 additions and 65 deletions
--- a/static/brush-cost.js
+++ b/static/brush-cost.js
@ -0,0 +1,81 @@
+class Gauge extends HTMLElement {
+    constructor(iconName, label) {
+        super();
+
+        this.iconName = iconName;
+        this.label = label;
+    }
+
+    connectedCallback() {
+        this.role = "progressbar";
+        this.classList.add("icon", `icon-${this.iconName}`);
+
+        this.full = this.appendChild(document.createElement("div"));
+        this.full.classList.add("full", "icon", `icon-${this.iconName}-white`);
+    }
+
+    setValue(value, valueMax) {
+        let clampedNormalized = Math.max(0, Math.min(1, value / valueMax));
+        this.style.setProperty("--progress", `${clampedNormalized * 100}%`);
+        this.title = `${this.label}: ${value} / ${valueMax} (${Math.ceil((value / valueMax) * 100)}%)`;
+    }
+}
+
+customElements.define("rkgk-brush-cost-gauge", Gauge);
+
+export class BrushCostGauges extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.codeSizeGauge = this.appendChild(
+            createGauge({
+                className: "code-size",
+                iconName: "brackets",
+                label: "Code size",
+            }),
+        );
+        this.fuelGauge = this.appendChild(
+            createGauge({
+                className: "fuel",
+                iconName: "droplet",
+                label: "Fuel",
+            }),
+        );
+        this.objectsGauge = this.appendChild(
+            createGauge({
+                className: "objects",
+                iconName: "object",
+                label: "Objects",
+            }),
+        );
+        this.memoryGauge = this.appendChild(
+            createGauge({
+                className: "memory",
+                iconName: "memory",
+                label: "Bulk memory",
+            }),
+        );
+
+        this.codeSizeGauge.setValue(0);
+        this.fuelGauge.setValue(0);
+        this.objectsGauge.setValue(0);
+        this.memoryGauge.setValue(0);
+    }
+
+    update(stats) {
+        this.codeSizeGauge.setValue(stats.astSize, stats.astSizeMax);
+        this.fuelGauge.setValue(stats.fuel, stats.fuelMax);
+        this.objectsGauge.setValue(stats.numRefs, stats.numRefsMax);
+        this.memoryGauge.setValue(stats.memory, stats.memoryMax);
+    }
+}
+
+customElements.define("rkgk-brush-cost-gauges", BrushCostGauges);
+
+function createGauge({ className, iconName, label }) {
+    let gauge = new Gauge(iconName, label);
+    gauge.classList.add(className);
+    return gauge;
+}