From 57253769b42882c1c24719529aaa058c67adb9d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Fri, 22 Nov 2024 23:05:51 -0800
Subject: [PATCH] folk timer

---
 demo/llm.html     | 35 ++---------------------------------
 src/folk-timer.ts | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 33 deletions(-)
 create mode 100644 src/folk-timer.ts

diff --git a/demo/llm.html b/demo/llm.html
index 248202e..28eab7b 100644
--- a/demo/llm.html
+++ b/demo/llm.html
@@ -109,43 +109,12 @@
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
       import { FolkLLM } from '../src/folk-llm.ts';
+      import { FolkTimer } from '../src/folk-timer.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
 
       FolkGeometry.register();
       FolkLLM.register();
-
-      customElements.define(
-        'folk-timer',
-        class Timer extends HTMLElement {
-          #timeMs = 0;
-          #intervalMs = 100;
-          #timeoutId = -1;
-
-          connectedCallback() {
-            this.#updateTime(0);
-          }
-
-          start() {
-            this.#timeoutId = setInterval(this.#updateTime, this.#intervalMs);
-          }
-
-          stop() {
-            clearInterval(this.#timeoutId);
-            this.#timeoutId = -1;
-          }
-
-          reset() {
-            this.stop();
-            this.#updateTime(0);
-          }
-
-          #updateTime = (time = this.#timeMs + this.#intervalMs) => {
-            this.#timeMs = time;
-            this.textContent = (time / 1000).toFixed(1);
-          };
-        }
-      );
-
+      FolkTimer.register();
       EventPropagator.register();
     </script>
   </body>
diff --git a/src/folk-timer.ts b/src/folk-timer.ts
new file mode 100644
index 0000000..fcaa7f6
--- /dev/null
+++ b/src/folk-timer.ts
@@ -0,0 +1,41 @@
+declare global {
+  interface HTMLElementTagNameMap {
+    'folk-timer': FolkTimer;
+  }
+}
+
+export class FolkTimer extends HTMLElement {
+  static tagName = 'folk-timer';
+
+  static register() {
+    customElements.define(this.tagName, this);
+  }
+
+  #timeMs = 0;
+  #timeoutId = -1;
+
+  #intervalMs = 100;
+
+  connectedCallback() {
+    this.#updateTime(0);
+  }
+
+  start() {
+    this.#timeoutId = setInterval(this.#updateTime, this.#intervalMs);
+  }
+
+  stop() {
+    clearInterval(this.#timeoutId);
+    this.#timeoutId = -1;
+  }
+
+  reset() {
+    this.stop();
+    this.#updateTime(0);
+  }
+
+  #updateTime = (time = this.#timeMs + this.#intervalMs) => {
+    this.#timeMs = time;
+    this.textContent = (time / 1000).toFixed(1);
+  };
+}