cubing 0.21.0-pre8 → 0.21.2

package/src/cubing/twisty/views/3D/Twisty3DVantage.ts

@@ -1,15 +1,16 @@
 import type { PerspectiveCamera, WebGLRenderer } from "three";
-import { Stats } from "../../../vendor/three/examples/jsm/libs/stats.module";
+import { Stats } from "../../../vendor/three/examples/jsm/libs/stats.modified.module";
 import { THREEJS } from "../../heavy-code-imports/3d";
-import type { OrbitCoordinatesV2 } from "../../model/depth-0/OrbitCoordinatesRequestProp";
 import { StaleDropper } from "../../model/PromiseFreshener";
+import type { TwistyPropParent } from "../../model/props/TwistyProp";
+import type { OrbitCoordinatesV2 } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
-import type { TwistyPropParent } from "../../model/TwistyProp";
 import { RenderScheduler } from "../../old/animation/RenderScheduler";
 import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
 import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
 import { pixelRatio } from "../../old/dom/viewers/canvas";
 import { twisty3DCanvasCSS } from "../../old/dom/viewers/Twisty3DCanvas.css";
+import { newRenderer, renderPooled } from "./RendererPool";
 import { DEGREES_PER_RADIAN } from "./TAU";
 import type { Twisty3DSceneWrapper } from "./Twisty3DSceneWrapper";
 import { TwistyOrbitControlsV2 } from "./TwistyOrbitControlsV2";
@@ -34,11 +35,44 @@ export async function setCameraFromOrbitCoordinates(
   camera.lookAt(0, 0, 0);
 }
 
+let shareAllNewRenderers: boolean | null = null;
+
+// WARNING: The current shared renderer implementation is not every efficient.
+// Avoid using for players that are likely to have dimensions approaching 1 megapixel or higher.
+// TODO: use a dedicated renderer while fullscreen?
+// - true: Force all new (i.e. constructed in the future) renderers to be shared
+// - false: Force all new (i.e. constructed in the future) renderers to be dedicated
+// - null: Reset to the default heuristics.
+export function experimentalForceNewRendererSharing(
+  share: boolean | null,
+): void {
+  shareAllNewRenderers = share;
+}
+
+let dedicatedRenderersSoFar = 0;
+const DEFAULT_MAX_DEDICATED_RENDERERS = 2; // This allows for a front view and a back view (or two separate front views).
+function shareRenderer(): boolean {
+  if (shareAllNewRenderers !== null) {
+    if (!shareAllNewRenderers) {
+      dedicatedRenderersSoFar++;
+    }
+    return shareAllNewRenderers;
+  }
+  if (dedicatedRenderersSoFar < DEFAULT_MAX_DEDICATED_RENDERERS) {
+    dedicatedRenderersSoFar++;
+    return false;
+  } else {
+    return true;
+  }
+}
+
 export class Twisty3DVantage extends ManagedCustomElement {
   scene: Twisty3DSceneWrapper | null = null;
 
   stats: Stats | null = null;
 
+  private rendererIsShared: boolean = shareRenderer();
+
   constructor(
     private model?: TwistyPlayerModel,
     scene?: Twisty3DSceneWrapper,
@@ -48,7 +82,7 @@ export class Twisty3DVantage extends ManagedCustomElement {
     this.scene = scene ?? null;
 
     if (SHOW_STATS) {
-      this.stats = Stats();
+      this.stats = new Stats();
       this.stats.dom.style.position = "absolute";
       this.contentWrapper.appendChild(this.stats.dom);
     }
@@ -65,18 +99,18 @@ export class Twisty3DVantage extends ManagedCustomElement {
     this.scheduleRender();
   }
 
-  #onResizeStaleDropper = new StaleDropper<
-    [PerspectiveCamera, WebGLRenderer]
-  >();
+  #onResizeStaleDropper = new StaleDropper<PerspectiveCamera>();
 
   // TODO: Why doesn't this work for the top-right back view height?
+  #width: number = 0;
+  #height: number = 0;
   async #onResize(): Promise<void> {
-    const [camera, renderer] = await this.#onResizeStaleDropper.queue(
-      Promise.all([this.camera(), this.renderer()]),
-    );
+    const camera = await this.#onResizeStaleDropper.queue(this.camera());
 
     const w = this.contentWrapper.clientWidth;
     const h = this.contentWrapper.clientHeight;
+    this.#width = w;
+    this.#height = h;
     const off = 0;
     let yoff = 0;
     let excess = 0;
@@ -88,36 +122,35 @@ export class Twisty3DVantage extends ManagedCustomElement {
     camera.setViewOffset(w, h - excess, off, yoff, w, h);
     camera.updateProjectionMatrix(); // TODO
 
-    // if (this.rendererIsShared) {
-    //   canvas.width = w * pixelRatio();
-    //   canvas.height = h * pixelRatio();
-    //   canvas.style.width = w.toString();
-    //   canvas.style.height = w.toString();
-    // } else {
-    renderer.setPixelRatio(pixelRatio());
-    renderer.setSize(w, h, true);
-    // }
+    if (this.rendererIsShared) {
+      const canvas = await this.canvas();
+      canvas.width = w * pixelRatio();
+      canvas.height = h * pixelRatio();
+      canvas.style.width = w.toString();
+      canvas.style.height = w.toString();
+    } else {
+      (await this.renderer()).setSize(w, h, true);
+    }
 
     this.scheduleRender();
   }
 
   #cachedRenderer: Promise<WebGLRenderer> | null = null;
   async renderer(): Promise<WebGLRenderer> {
-    return (this.#cachedRenderer ??= (async () => {
-      const rendererConstructor = (await THREEJS).WebGLRenderer;
-      const renderer = new rendererConstructor({
-        antialias: true,
-        alpha: true,
-      });
-      renderer.setPixelRatio(pixelRatio());
-      return renderer;
-    })());
+    if (this.rendererIsShared) {
+      throw new Error("renderer expected to be shared.");
+    }
+    return (this.#cachedRenderer ??= newRenderer());
   }
 
   #cachedCanvas: Promise<HTMLCanvasElement> | null = null;
   async canvas(): Promise<HTMLCanvasElement> {
     return (this.#cachedCanvas ??= (async () => {
-      return (await this.renderer()).domElement;
+      if (this.rendererIsShared) {
+        return this.addElement(document.createElement("canvas"));
+      }
+      const renderer = await this.renderer();
+      return this.addElement(renderer.domElement);
     })());
   }
 
@@ -197,13 +230,16 @@ export class Twisty3DVantage extends ManagedCustomElement {
 
     this.stats?.begin();
 
-    const [renderer, scene, camera] = await Promise.all([
-      this.renderer(),
+    const [scene, camera, canvas] = await Promise.all([
       this.scene.scene(),
       this.camera(),
+      this.canvas(),
     ]);
-    // console.log("rendering!!!!", renderer, scene, camera);
-    renderer.render(scene, camera); // TODO
+    if (this.rendererIsShared) {
+      renderPooled(this.#width, this.#height, canvas, scene, camera);
+    } else {
+      (await this.renderer()).render(scene, camera);
+    }
 
     this.stats?.end();
   }

package/src/cubing/twisty/views/3D/TwistyOrbitControlsV2.spec.ts

@@ -2,14 +2,14 @@
  * @jest-environment jsdom
  */
 
-import { LatitudeLimitProp } from "../../model/depth-0/LatitudeLimit";
-import { OrbitCoordinatesRequestProp } from "../../model/depth-0/OrbitCoordinatesRequestProp";
-import { PuzzleIDRequestProp } from "../../model/depth-0/PuzzleIDRequestProp";
-import { VisualizationFormatProp } from "../../model/depth-0/VisualizationProp";
-import { VisualizationStrategyProp } from "../../model/depth-3/VisualizationStrategyProp";
-import { OrbitCoordinatesProp } from "../../model/depth-4/OrbitCoordinatesProp";
+import { LatitudeLimitProp } from "../../model/props/viewer/LatitudeLimit";
+import { OrbitCoordinatesRequestProp } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
+import { PuzzleIDRequestProp } from "../../model/props/puzzle/structure/PuzzleIDRequestProp";
+import { VisualizationFormatProp } from "../../model/props/viewer/VisualizationProp";
+import { VisualizationStrategyProp } from "../../model/props/viewer/VisualizationStrategyProp";
+import { OrbitCoordinatesProp } from "../../model/props/viewer/OrbitCoordinatesProp";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
-import type { TwistyPropParent } from "../../model/TwistyProp";
+import type { TwistyPropParent } from "../../model/props/TwistyProp";
 import type { PuzzleID } from "../../old/dom/TwistyPlayerConfig";
 import { TwistyOrbitControlsV2 } from "./TwistyOrbitControlsV2";
 

package/src/cubing/twisty/views/3D/TwistyOrbitControlsV2.ts

@@ -1,7 +1,7 @@
 import { Spherical, Vector3 } from "three";
 import { DEGREES_PER_RADIAN } from "./TAU";
 import { RenderScheduler } from "../../old/animation/RenderScheduler";
-import type { OrbitCoordinatesV2 } from "../../model/depth-0/OrbitCoordinatesRequestProp";
+import type { OrbitCoordinatesV2 } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
 import type { CameraLatitudeLimits } from "../../old/dom/TwistyPlayerConfig";
 

package/src/cubing/twisty/views/TwistyAlgEditor/TwistyAlgEditor.ts

@@ -14,8 +14,11 @@
 import type { ExperimentalParsed } from "../../../alg";
 import { Alg, Move, Pause } from "../../../alg";
 import type { Parsed } from "../../../alg/parse";
-import type { AlgProp, AlgWithIssues } from "../../model/depth-0/AlgProp";
-import type { CurrentLeavesSimplified } from "../../model/depth-9/CurrentLeavesSimplified";
+import type {
+  AlgProp,
+  AlgWithIssues,
+} from "../../model/props/puzzle/state/AlgProp";
+import type { CurrentLeavesSimplified } from "../../model/props/puzzle/state/CurrentLeavesSimplified";
 import { ClassListManager } from "../../old/dom/element/ClassListManager";
 import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
 import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
@@ -76,6 +79,7 @@ export class TwistyAlgEditor extends ManagedCustomElement {
     this.#carbonCopySuffix.classList.add("suffix");
     this.#carbonCopy.appendChild(this.#carbonCopySuffix);
 
+    this.#textarea.placeholder = "Alg";
     // Prevent iOS from defaulting to smart quotes.
     this.#textarea.setAttribute("spellcheck", "false");
 

package/src/cubing/twisty/views/TwistyAlgEditor/model.ts

@@ -5,12 +5,12 @@ import type { Parsed } from "../../../alg/parse";
 import {
   AlgWithIssues,
   algWithIssuesFromString,
-} from "../../model/depth-0/AlgProp";
+} from "../../model/props/puzzle/state/AlgProp";
 import {
   SimpleTwistyPropSource,
   TwistyPropDerived,
   TwistyPropSource,
-} from "../../model/TwistyProp";
+} from "../../model/props/TwistyProp";
 import {
   AnimatedLeafUnitInfo,
   leafTokens,

package/src/cubing/twisty/views/TwistyAlgViewer.ts

@@ -13,8 +13,8 @@ import {
   Unit,
 } from "../../alg";
 import type { Parsed } from "../../alg/parse";
-import type { AlgWithIssues } from "../model/depth-0/AlgProp";
-import type { DetailedTimelineInfo } from "../model/depth-7/DetailedTimelineInfoProp";
+import type { AlgWithIssues } from "../model/props/puzzle/state/AlgProp";
+import type { DetailedTimelineInfo } from "../model/props/timeline/DetailedTimelineInfoProp";
 import type { MillisecondTimestamp } from "../old/animation/cursor/CursorTypes";
 import type { CurrentMoveInfo } from "../old/animation/indexer/AlgIndexer";
 import { ManagedCustomElement } from "../old/dom/element/ManagedCustomElement";

package/src/cubing/twisty/views/TwistyPlayer.ts

@@ -1,15 +1,15 @@
-import type { ExperimentalStickering } from "..";
-import { Alg, Move } from "../../alg";
+import type { ExperimentalStickering, PG3D } from "..";
+import { Alg, experimentalAppendMove, Move } from "../../alg";
 import type { PuzzleDescriptionString } from "../../puzzle-geometry/PGPuzzles";
 import type { TwistyAnimationControllerDelegate } from "../controllers/TwistyAnimationController";
 import { TwistyPlayerController } from "../controllers/TwistyPlayerController";
-import type { BackgroundThemeWithAuto } from "../model/depth-0/BackgroundProp";
-import type { BackViewLayoutWithAuto } from "../model/depth-0/BackViewProp";
-import type { ControlPanelThemeWithAuto } from "../model/depth-0/ControlPanelProp";
-import type { HintFaceletStyleWithAuto } from "../model/depth-0/HintFaceletProp";
-import type { ViewerLinkPageWithAuto } from "../model/depth-0/ViewerLinkProp";
-import type { VisualizationFormatWithAuto } from "../model/depth-0/VisualizationProp";
-import type { VisualizationStrategy } from "../model/depth-3/VisualizationStrategyProp";
+import type { HintFaceletStyleWithAuto } from "../model/props/puzzle/display/HintFaceletProp";
+import type { BackgroundThemeWithAuto } from "../model/props/viewer/BackgroundProp";
+import type { BackViewLayoutWithAuto } from "../model/props/viewer/BackViewProp";
+import type { ControlPanelThemeWithAuto } from "../model/props/viewer/ControlPanelProp";
+import type { ViewerLinkPageWithAuto } from "../model/props/viewer/ViewerLinkProp";
+import type { VisualizationFormatWithAuto } from "../model/props/viewer/VisualizationProp";
+import type { VisualizationStrategy } from "../model/props/viewer/VisualizationStrategyProp";
 import { ClassListManager } from "../old/dom/element/ClassListManager";
 import { customElementsShim } from "../old/dom/element/node-custom-element-shims";
 import { twistyPlayerCSS } from "../old/dom/TwistyPlayer.css";
@@ -125,6 +125,11 @@ export class TwistyPlayer
 
   buttons: TwistyButtonsV2;
 
+  experimentalCanvasClickCallback: (...args: any) => void = () => {};
+  // #onCanvasClick() {
+
+  // }
+
   constructor(config: TwistyPlayerConfig = {}) {
     super();
 
@@ -148,12 +153,29 @@ export class TwistyPlayer
     );
 
   #visualizationWrapperElem = document.createElement("div"); // TODO: Better pattern.
+  #errorElem = document.createElement("div"); // TODO: Better pattern.
+  #alreadyConnected = false; // TODO: support resetting
   async connectedCallback(): Promise<void> {
+    if (this.#alreadyConnected) {
+      return;
+    }
+    this.#alreadyConnected = true;
     this.addCSS(twistyPlayerCSS);
 
     this.addElement(this.#visualizationWrapperElem).classList.add(
       "visualization-wrapper",
     );
+    this.addElement(this.#errorElem).classList.add("error-elem");
+    this.#errorElem.textContent = "Error";
+    this.experimentalModel.userVisibleErrorTracker.addFreshListener(
+      (userVisibleError) => {
+        const errorString: string | null = userVisibleError.errors[0] ?? null;
+        this.contentWrapper.classList.toggle("error", !!errorString);
+        if (errorString) {
+          this.#errorElem.textContent = errorString;
+        }
+      },
+    );
 
     const scrubber = new TwistyScrubberV2(this.experimentalModel);
     this.contentWrapper.appendChild(scrubber);
@@ -224,6 +246,28 @@ export class TwistyPlayer
     }
   }
 
+  async experimentalCurrentCanvases(): Promise<HTMLCanvasElement[]> {
+    this.connectedCallback();
+    const wrapper = this.#visualizationWrapper;
+    const canvases: HTMLCanvasElement[] = [];
+    if (wrapper instanceof Twisty3DSceneWrapper) {
+      const vantages = wrapper.experimentalVantages();
+      for (const vantage of vantages) {
+        canvases.push(await vantage.canvas());
+      }
+    }
+    return canvases;
+  }
+
+  async experimentalPG3D(): Promise<PG3D | null> {
+    this.connectedCallback();
+    const wrapper = this.#visualizationWrapper;
+    if (wrapper instanceof Twisty3DSceneWrapper) {
+      wrapper;
+    }
+    return null;
+  }
+
   jumpToStart(options?: { flash: boolean }): void {
     this.controller.jumpToStart(options);
   }
@@ -249,11 +293,23 @@ export class TwistyPlayer
   }
 
   // TODO: Animate the new move.
-  experimentalAddMove(move: Move): void {
+  experimentalAddMove(
+    flexibleMove: Move | string,
+    options: { coalesce?: boolean } = {},
+  ): void {
+    const move =
+      typeof flexibleMove === "string" ? new Move(flexibleMove) : flexibleMove;
     (async () => {
       const alg = (await this.experimentalModel.algProp.get()).alg;
-      this.experimentalModel.algProp.set(new Alg(alg.concat([move])));
+      const newAlg = experimentalAppendMove(alg, move, {
+        coalesce: options?.coalesce,
+      });
+      this.experimentalModel.algProp.set(newAlg);
       this.experimentalModel.timestampRequestProp.set("end");
+      this.experimentalModel.catchUpMoveProp.set({
+        move: move,
+        amount: 0,
+      });
     })();
   }
 

package/src/cubing/twisty/views/TwistyPlayerSettable.ts

@@ -1,14 +1,14 @@
 import type { Alg } from "../../alg";
 import type { PuzzleDescriptionString } from "../../puzzle-geometry/PGPuzzles";
 import type { ExperimentalStickering } from "../../twisty";
-import type { BackgroundThemeWithAuto } from "../model/depth-0/BackgroundProp";
-import type { BackViewLayoutWithAuto } from "../model/depth-0/BackViewProp";
-import type { ControlPanelThemeWithAuto } from "../model/depth-0/ControlPanelProp";
-import type { HintFaceletStyleWithAuto } from "../model/depth-0/HintFaceletProp";
-import type { IndexerStrategyName } from "../model/depth-0/IndexerConstructorRequestProp";
-import type { TimestampRequest } from "../model/depth-0/TimestampRequestProp";
-import type { ViewerLinkPageWithAuto } from "../model/depth-0/ViewerLinkProp";
-import type { VisualizationFormatWithAuto } from "../model/depth-0/VisualizationProp";
+import type { BackgroundThemeWithAuto } from "../model/props/viewer/BackgroundProp";
+import type { BackViewLayoutWithAuto } from "../model/props/viewer/BackViewProp";
+import type { ControlPanelThemeWithAuto } from "../model/props/viewer/ControlPanelProp";
+import type { HintFaceletStyleWithAuto } from "../model/props/puzzle/display/HintFaceletProp";
+import type { IndexerStrategyName } from "../model/props/puzzle/state/IndexerConstructorRequestProp";
+import type { TimestampRequest } from "../model/props/timeline/TimestampRequestProp";
+import type { ViewerLinkPageWithAuto } from "../model/props/viewer/ViewerLinkProp";
+import type { VisualizationFormatWithAuto } from "../model/props/viewer/VisualizationProp";
 import { TwistyPlayerModel } from "../model/TwistyPlayerModel";
 import type { MillisecondTimestamp } from "../old/animation/cursor/CursorTypes";
 import { ManagedCustomElement } from "../old/dom/element/ManagedCustomElement";

package/src/cubing/twisty/views/control-panel/TwistyButtonsV2.ts

@@ -10,7 +10,7 @@ import {
   ButtonAppearances,
   ButtonIcon,
   buttonIcons,
-} from "../../model/depth-9/ButtonAppearanceProp";
+} from "../../model/props/viewer/ButtonAppearanceProp";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
 import type { TwistyPlayerController } from "../../controllers/TwistyPlayerController";
 import {

package/src/cubing/twisty/views/control-panel/TwistyScrubberV2.ts

@@ -1,7 +1,7 @@
 import { twistyScrubberCSS } from "../../old/dom/controls/TwistyScrubber.css";
 import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
 import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
-import type { DetailedTimelineInfo } from "../../model/depth-7/DetailedTimelineInfoProp";
+import type { DetailedTimelineInfo } from "../../model/props/timeline/DetailedTimelineInfoProp";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
 import { globalSafeDocument } from "../document";
 

package/src/cubing/vendor/three/examples/jsm/libs/stats.modified.module.ts

@@ -0,0 +1,179 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * ESM conversion by Lucas Garron, 2021-12-21
+ */
+
+const performance:
+  | null
+  | (Performance & {
+      memory?: {
+        usedJSHeapSize: number;
+        jsHeapSizeLimit: number;
+      };
+    }) = globalThis.performance;
+
+export class Stats {
+  mode = 0;
+
+  dom = document.createElement("div");
+
+  constructor() {
+    this.dom.style.cssText =
+      "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";
+    this.dom.addEventListener(
+      "click",
+      (event) => {
+        event.preventDefault();
+        this.showPanel(++this.mode % this.dom.children.length);
+      },
+      false,
+    );
+
+    this.showPanel(0);
+  }
+
+  addPanel(panel: StatsPanel): StatsPanel {
+    this.dom.appendChild(panel.dom);
+    return panel;
+  }
+
+  showPanel(id: number): void {
+    for (let i = 0; i < this.dom.children.length; i++) {
+      (this.dom.children[i] as HTMLElement).style.display =
+        i === id ? "block" : "none";
+    }
+
+    this.mode = id;
+  }
+
+  beginTime = (performance || Date).now();
+  prevTime = this.beginTime;
+  frames = 0;
+
+  fpsPanel = this.addPanel(new StatsPanel("FPS", "#0ff", "#002"));
+  msPanel = this.addPanel(new StatsPanel("MS", "#0f0", "#020"));
+  memPanel = performance?.memory
+    ? this.addPanel(new StatsPanel("MB", "#f08", "#201"))
+    : null;
+  REVISION = 16;
+
+  begin() {
+    this.beginTime = (performance || Date).now();
+  }
+
+  end() {
+    this.frames++;
+
+    const time = (performance || Date).now();
+
+    this.msPanel.update(time - this.beginTime, 200);
+
+    if (time >= this.prevTime + 1000) {
+      this.fpsPanel.update((this.frames * 1000) / (time - this.prevTime), 100);
+
+      this.prevTime = time;
+      this.frames = 0;
+
+      if (this.memPanel) {
+        const memory = performance!.memory!;
+        this.memPanel.update(
+          memory.usedJSHeapSize / 1048576,
+          memory.jsHeapSizeLimit / 1048576,
+        );
+      }
+    }
+
+    return time;
+  }
+
+  update() {
+    this.beginTime = this.end();
+  }
+}
+
+const PR = Math.round(globalThis?.window?.devicePixelRatio ?? 1);
+
+const WIDTH = 80 * PR,
+  HEIGHT = 48 * PR,
+  TEXT_X = 3 * PR,
+  TEXT_Y = 2 * PR,
+  GRAPH_X = 3 * PR,
+  GRAPH_Y = 15 * PR,
+  GRAPH_WIDTH = 74 * PR,
+  GRAPH_HEIGHT = 30 * PR;
+
+export class StatsPanel {
+  min = Infinity;
+  max = 0;
+  dom = document.createElement("canvas");
+  context = this.dom.getContext("2d")!;
+  constructor(private name: string, private fg: string, private bg: string) {
+    this.dom.width = WIDTH;
+    this.dom.height = HEIGHT;
+    this.dom.style.cssText = "width:80px;height:48px";
+
+    this.context.font = `bold ${9 * PR}px Helvetica,Arial,sans-serif`;
+    this.context.textBaseline = "top";
+
+    this.context.fillStyle = bg;
+    this.context.fillRect(0, 0, WIDTH, HEIGHT);
+
+    this.context.fillStyle = fg;
+    this.context.fillText(name, TEXT_X, TEXT_Y);
+    this.context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+
+    this.context.fillStyle = bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+  }
+
+  update(value: number, maxValue: number) {
+    this.min = Math.min(this.min, value);
+    this.max = Math.max(this.max, value);
+
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 1;
+    this.context.fillRect(0, 0, WIDTH, GRAPH_Y);
+    this.context.fillStyle = this.fg;
+    this.context.fillText(
+      Math.round(value) +
+        " " +
+        this.name +
+        " (" +
+        Math.round(this.min) +
+        "-" +
+        Math.round(this.max) +
+        ")",
+      TEXT_X,
+      TEXT_Y,
+    );
+
+    this.context.drawImage(
+      this.dom,
+      GRAPH_X + PR,
+      GRAPH_Y,
+      GRAPH_WIDTH - PR,
+      GRAPH_HEIGHT,
+      GRAPH_X,
+      GRAPH_Y,
+      GRAPH_WIDTH - PR,
+      GRAPH_HEIGHT,
+    );
+
+    this.context.fillRect(
+      GRAPH_X + GRAPH_WIDTH - PR,
+      GRAPH_Y,
+      PR,
+      GRAPH_HEIGHT,
+    );
+
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(
+      GRAPH_X + GRAPH_WIDTH - PR,
+      GRAPH_Y,
+      PR,
+      Math.round((1 - value / maxValue) * GRAPH_HEIGHT),
+    );
+  }
+}