1 files changed, 52 insertions, 10 deletions
diff --git a/web/src/components/toolbar/index.ts b/web/src/components/toolbar/index.ts
index da4b69d..b8a383d 100644
--- a/web/src/components/toolbar/index.ts
+++ b/web/src/components/toolbar/index.ts
@@ -1,24 +1,66 @@
-import NotiveElement, { customElement } from "../../element";
-import h, { fragment } from "../../html";
+import NotiveElement, { customElement, eventHandler } from "../../element";
+import h from "../../html";
+import { minus16Icon, plus16Icon } from "../icons";
 import "./index.css";
 
-@customElement("ntv-toolbar")
-class NotiveToolbarElement extends NotiveElement {
-  connectedCallback() {
-    this.append(this.#view());
+export class SubdivisionsChangeEvent extends Event {
+  static readonly TYPE = "ntv:toolbar:subdivisionschange";
+
+  constructor(public subdivisions: number | undefined) {
+    super(SubdivisionsChangeEvent.TYPE);
   }
+}
 
+@customElement("ntv-toolbar")
+class NotiveToolbarElement extends NotiveElement {
   #subdivisionsInputEl: HTMLInputElement = h.input({
     title: "Subdivisions",
     disabled: true,
   });
 
-  #view() {
-    return fragment(
+  get subdivisions(): number | undefined {
+    if (this.#subdivisionsInputEl.value === "") return;
+    return parseInt(this.#subdivisionsInputEl.value);
+  }
+
+  set subdivisions(n: number | undefined) {
+    const m = n && Math.max(n, 1);
+    this.#subdivisionsInputEl.value = m === undefined ? "" : m.toString();
+  }
+
+  @eventHandler(SubdivisionsChangeEvent.TYPE)
+  onsubdivisionschange?: (event: SubdivisionsChangeEvent) => any;
+
+  connectedCallback() {
+    this.append(
       h.section(
-        h.button({ dataset: { icon: "" } }, "-"),
+        h.button(
+          {
+            dataset: { icon: "" },
+            onclick: () => {
+              if (!this.subdivisions) return;
+              this.subdivisions = this.subdivisions - 1;
+              this.dispatchEvent(
+                new SubdivisionsChangeEvent(this.subdivisions),
+              );
+            },
+          },
+          h.span(minus16Icon()),
+        ),
         this.#subdivisionsInputEl,
-        h.button({ dataset: { icon: "" } }, "+"),
+        h.button(
+          {
+            dataset: { icon: "" },
+            onclick: () => {
+              if (!this.subdivisions) return;
+              this.subdivisions = this.subdivisions + 1;
+              this.dispatchEvent(
+                new SubdivisionsChangeEvent(this.subdivisions),
+              );
+            },
+          },
+          h.span(plus16Icon()),
+        ),
       ),
       h.section(h.button("Play")),
     );