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;
+    }
+}

src/ui/BeatGroup/BeatGroupView.ts

@@ -0,0 +1,32 @@
+import UINode, {UINodeOptions} from "../UINode";
+import BeatGroup from "../../BeatGroup";
+import BeatView from "./Beat/BeatView";
+
+export type BeatGroupUINodeOptions = UINodeOptions & {
+    title: string,
+    beatGroup: BeatGroup,
+};
+
+export default class BeatGroupView extends UINode {
+    private title: string;
+    private beatGroup: BeatGroup;
+
+    constructor(options: BeatGroupUINodeOptions) {
+        super(options);
+        this.beatGroup = options.beatGroup;
+        this.title = options.title;
+    }
+
+    rebuild(): HTMLDivElement {
+        const beatViews = [];
+        for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {
+            beatViews.push(new BeatView({beat: this.beatGroup.getBeatByIndex(i)}));
+        }
+        return UINode.make("div", {
+            subs: [
+                UINode.make("h3", {innerText: this.title}),
+                ...beatViews.map(bv => bv.rebuild())
+            ],
+        });
+    }
+}

src/ui/Root/Root.css

@@ -0,0 +1,8 @@
+.rootView {
+    margin: auto;
+    width: 80%;
+}
+
+.rootView .title {
+    text-align: center;
+}

src/ui/Root/RootView.ts

@@ -0,0 +1,46 @@
+import UINode, {UINodeOptions} from "../UINode";
+import BeatGroupView from "../BeatGroup/BeatGroupView";
+import BeatGroup from "../../BeatGroup";
+import "./Root.css";
+
+export type RootUINodeOptions = UINodeOptions & {
+    title: string,
+    mainBeatGroup: BeatGroup,
+    parent: HTMLElement,
+};
+
+export default class RootView extends UINode {
+    private title: string;
+    private parent: HTMLElement;
+    private beatGroupView: BeatGroupView;
+    private mainBeatGroup: BeatGroup;
+
+    constructor(options: RootUINodeOptions) {
+        super(options);
+        this.beatGroupView = new BeatGroupView({title: "THE BEAT", beatGroup: options.mainBeatGroup});
+        this.mainBeatGroup = options.mainBeatGroup;
+        this.title = options.title;
+        this.parent = options.parent;
+        this.rebuild();
+    }
+
+    render() {
+        const oldNode = this.node;
+        this.node = this.rebuild();
+        if (oldNode) {
+            this.parent.replaceChild(oldNode, this.node);
+        } else {
+            this.parent.appendChild(this.node);
+        }
+    }
+
+    rebuild(): HTMLDivElement {
+        return UINode.make("div", {
+            subs: [
+                UINode.make("h1", {innerText: this.title, classes: ["title"]}),
+                this.beatGroupView.rebuild(),
+            ],
+            classes: ["rootView"]
+        });
+    }
+}

src/ui/UINode.ts

@@ -0,0 +1,41 @@
+export type UINodeOptions = {
+
+};
+
+type IRenderAttributes<
+    T extends keyof HTMLElementTagNameMap,
+    K extends keyof HTMLElementTagNameMap[T]
+    > = Partial<Record<K, HTMLElementTagNameMap[T][K]> & {
+    classes: string[],
+    subs: HTMLElement[],
+}>;
+
+export default abstract class UINode {
+    protected node: HTMLElement | null = null;
+
+    constructor(options: UINodeOptions) {
+    }
+
+    abstract rebuild(): HTMLElement;
+
+    static make<
+            T extends keyof HTMLElementTagNameMap,
+            K extends keyof HTMLElementTagNameMap[T]>(
+        type: T,
+        attributes: IRenderAttributes<T, K>
+    ): HTMLElementTagNameMap[T] {
+        const element = document.createElement(type);
+        if (attributes) {
+            for (const key in attributes) {
+                if (key === "classes") {
+                    element.classList.add(...attributes[key]!);
+                } else if (key === "subs") {
+                    element.append(...attributes.subs!);
+                } else {
+                    element[key as keyof HTMLElementTagNameMap[T]] = (attributes as any)[key];
+                }
+            }
+        }
+        return element;
+    }
+}