feat: new UI and build process

src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.css

@@ -0,0 +1,7 @@
+.beatSettingsView {
+    display: none;
+}
+
+.beatSettingsView.visible {
+    display: block;
+}

src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts

@@ -0,0 +1,58 @@
+import UINode, {UINodeOptions} from "../../../UINode";
+import Beat, {BeatEvents} from "../../../../Beat";
+import {IPublisher} from "../../../../Publisher";
+import "./BeatSettingsView.css";
+import ISubscriber from "../../../../Subscriber";
+
+export type BeatSettingsViewUINodeOptions = UINodeOptions & {
+    beat: Beat,
+};
+
+export default class BeatSettingsView extends UINode implements ISubscriber {
+    private beat: Beat;
+    private visible = false;
+    private timeSigUp: HTMLInputElement | null = null;
+    private timeSigDown: HTMLInputElement | null = null;
+
+    constructor(options: BeatSettingsViewUINodeOptions) {
+        super(options);
+        this.beat = options.beat;
+        this.setupBindings();
+    }
+
+    private setupBindings() {
+        this.beat.addSubscriber(this, BeatEvents.NewName);
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T) {
+        if (event === BeatEvents.NewTimeSig) {
+            if (this.timeSigUp && this.timeSigDown) {
+                this.timeSigUp.value = this.beat.getTimeSigUp().toString();
+                this.timeSigDown.value = this.beat.getTimeSigDown().toString();
+            }
+        }
+    }
+
+    toggleVisible() {
+        this.visible = !this.visible;
+        if (this.visible) {
+            this.node?.classList.add("visible");
+        } else {
+            this.node?.classList.remove("visible");
+        }
+    }
+
+    isOpen() {
+        return this.visible;
+    }
+
+    rebuild(): HTMLElement {
+        this.node = UINode.make("div", {
+            subs: [
+                UINode.make("p", {innerText: `Settings for ${this.beat.getName()}`}),
+            ],
+            classes: ["beatSettingsView"]
+        });
+        return this.node;
+    }
+}

src/ui/BeatGroup/Beat/BeatView.ts

@@ -0,0 +1,54 @@
+import UINode, {UINodeOptions} from "../../UINode";
+import Beat, {BeatEvents} from "../../../Beat";
+import {IPublisher} from "../../../Publisher";
+import BeatSettingsView from "./BeatSettings/BeatSettingsView";
+import ISubscriber from "../../../Subscriber";
+
+export type BeatUINodeOptions = UINodeOptions & {
+    beat: Beat,
+};
+
+export default class BeatView extends UINode implements ISubscriber {
+    private beat: Beat;
+    private title!: HTMLHeadingElement;
+    private settingsView!: BeatSettingsView;
+    private settingsToggleButton!: HTMLButtonElement;
+
+    constructor(options: BeatUINodeOptions) {
+        super(options);
+        this.beat = options.beat;
+        this.setupBindings();
+        this.rebuild();
+    }
+
+    private setupBindings() {
+        this.beat.addSubscriber(this, BeatEvents.NewName);
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T) {
+        if (event === BeatEvents.NewName) {
+            this.title.innerText = this.beat.getName();
+        }
+    }
+
+    private toggleSettings() {
+        this.settingsView.toggleVisible();
+        this.settingsToggleButton.innerText = this.settingsView.isOpen() ? "Hide Settings" : "Show Settings";
+    }
+
+    rebuild(): HTMLElement {
+        this.title = UINode.make("h3", {innerText: this.beat.getName()});
+        this.settingsView = new BeatSettingsView({beat: this.beat});
+        this.settingsToggleButton = UINode.make("button", {innerText: this.settingsView.isOpen() ? "Hide Settings" : "Show Settings"});
+        this.settingsToggleButton.addEventListener("click", () => this.toggleSettings());
+        this.node = UINode.make("div", {
+            subs: [
+                this.title,
+                UINode.make("p", {innerText: "I am a BeatGroup"}),
+                this.settingsToggleButton,
+                this.settingsView.rebuild(),
+            ],
+        });
+        return this.node;
+    }
+}