feat: added lots of ui

src/ui/BeatGroup/Beat/Beat.css

@@ -0,0 +1,32 @@
+.beat:first-child {
+    padding-left: 5px;
+}
+
+.beat:last-child {
+    padding-right: 0;
+}
+
+.beat > * {
+    padding-right: 1em;
+    padding-left: 1em;
+}
+
+.beat-settings-btn {
+    margin: 0;
+    display: inline-block;
+}
+
+.beat-unit-block {
+    display: inline-block;
+}
+
+.beat-title {
+    display: inline-block;
+    width: 3em;
+    margin: 0;
+}
+
+.beat-spacer {
+    display: inline-block;
+    width: 1em;
+}

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

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

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

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

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

@@ -1,8 +1,8 @@
 import UINode, {UINodeOptions} from "../../../UINode";
 import Beat, {BeatEvents} from "../../../../Beat";
 import {IPublisher} from "../../../../Publisher";
-import "./BeatSettingsView.css";
 import ISubscriber from "../../../../Subscriber";
+import "./BeatSettings.css";
 
 export type BeatSettingsViewUINodeOptions = UINodeOptions & {
     beat: Beat,
@@ -22,7 +22,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
     }
 
     private setupBindings() {
-        this.beat.addSubscriber(this, BeatEvents.NewName);
+        this.beat.addSubscriber(this, "all");
     }
 
     notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T) {
@@ -34,7 +34,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
         }
     }
 
-    toggleVisible() {
+    toggleVisible(): void {
         this.visible = !this.visible;
         if (this.visible) {
             this.node?.classList.add("visible");
@@ -43,26 +43,43 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
         }
     }
 
-    isOpen() {
+    isOpen(): boolean {
         return this.visible;
     }
 
     rebuild(): HTMLElement {
-        this.timeSigUp = UINode.make("input", {});
-        this.timeSigUp.addEventListener("input",
-            (event) => this.beat.setTimeSignature({
-                up: Number((event.target as HTMLInputElement).value) }));
-        this.timeSigDown = UINode.make("input", {});
-        this.timeSigDown.addEventListener("input",
-            (event) => this.beat.setTimeSignature({
-                down: Number((event.target as HTMLInputElement).value) }));
+        this.timeSigUp = UINode.make("input", {
+            value: this.beat.getTimeSigUp().toString(),
+            oninput: (event) => {
+                this.beat.setTimeSignature({up: Number((event.target as HTMLInputElement).value) });
+            },
+        });
+        this.timeSigDown = UINode.make("input", {
+            value: this.beat.getTimeSigDown().toString(),
+            oninput: (event) => {
+                this.beat.setTimeSignature({down: Number((event.target as HTMLInputElement).value) });
+            },
+        });
+        this.barCountInput = UINode.make("input", {
+            value: this.beat.getBarCount().toString(),
+            oninput: (event) => {
+                this.beat.setBars(Number((event.target as HTMLInputElement).value));
+            },
+        });
         this.node = UINode.make("div", {
             subs: [
-                UINode.make("p", {innerText: `Settings for ${this.beat.getName()}`}),
-                this.timeSigUp,
-                this.timeSigDown,
+                UINode.make("div", {
+                    classes: ["beat-settings-time-sig"],
+                    subs: [
+                        UINode.make("label", {innerText: "Time Signature:"}),
+                        this.timeSigUp,
+                        this.timeSigDown,
+                    ]
+                }),
+                UINode.make("label", {innerText: "Bars:"}),
+                this.barCountInput,
             ],
-            classes: ["beatSettingsView"]
+            classes: ["beat-settings"]
         });
         return this.node;
     }

src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css

@@ -0,0 +1,11 @@
+.beat-unit {
+    width: 2em;
+    height: 2em;
+    background-color: white;
+    border: 0.1em solid black;
+    display: inline-block;
+}
+
+.beat-unit.on {
+    background-color: darksalmon;
+}

src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts

@@ -0,0 +1,46 @@
+import BeatUnit, {BeatUnitEvents} from "../../../../BeatUnit";
+import ISubscriber from "../../../../Subscriber";
+import UINode, {UINodeOptions} from "../../../UINode";
+import {IPublisher} from "../../../../Publisher";
+import "./BeatUnit.css";
+
+export type BeatUnitUINodeOptions = UINodeOptions & {
+    beatUnit: BeatUnit,
+};
+
+export default class BeatUnitView extends UINode implements ISubscriber {
+    private beatUnit: BeatUnit;
+
+    constructor(options: BeatUnitUINodeOptions) {
+        super(options);
+        this.beatUnit = options.beatUnit;
+        this.setupBindings();
+        this.rebuild();
+    }
+
+    private setupBindings() {
+        this.beatUnit.addSubscriber(this, "all");
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T) {
+        if (event === BeatUnitEvents.On) {
+            this.node?.classList.add("on");
+        } else if (event === BeatUnitEvents.Off) {
+            this.node?.classList.remove("on");
+        }
+    }
+
+    rebuild(): HTMLElement {
+        const classes = ["beat-unit"];
+        if (this.beatUnit.isOn()) {
+            classes.push("on");
+        }
+        this.node = UINode.make("div", {
+            classes: classes,
+            onclick: () => {
+                this.beatUnit.toggle();
+            }
+        });
+        return this.node;
+    }
+}

src/ui/BeatGroup/Beat/BeatUnitCollection/BeatUnitCollectionView.ts

@@ -0,0 +1,53 @@
+import ISubscriber from "../../../../Subscriber";
+import UINode, {UINodeOptions} from "../../../UINode";
+import BeatGroup, {BeatGroupEvents} from "../../../../BeatGroup";
+import {IPublisher} from "../../../../Publisher";
+
+export type BeatUnitCollectionUINodeOptions = UINodeOptions & {
+    beatGroup: BeatGroup,
+};
+
+export default class BeatUnitCollectionView extends UINode implements ISubscriber {
+    private beatGroup: BeatGroup;
+    private barCountInput!: HTMLInputElement;
+    private timeSigUpInput!: HTMLInputElement;
+
+    constructor(options: BeatUnitCollectionUINodeOptions) {
+        super(options);
+        this.beatGroup = options.beatGroup;
+        this.beatGroup.addSubscriber(this, []);
+        this.rebuild();
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+        if (event === BeatGroupEvents.GlobalBarCountChanged) {
+            this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();
+        } else if (event === BeatGroupEvents.GlobalTimeSigUpChanged) {
+            this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();
+        }
+    }
+
+    rebuild(): HTMLElement {
+        this.barCountInput = UINode.make("input", {
+            type: "text",
+            classes: ["beat-group-settings-view-bar-count"],
+            value: this.beatGroup.getBeatByIndex(0).getBarCount(),
+            oninput: () => {
+                this.beatGroup.setGlobalBarCount(Number(this.barCountInput.value));
+            },
+        });
+        this.timeSigUpInput = UINode.make("input", {
+            type: "text",
+            value: this.beatGroup.getBeatByIndex(0).getTimeSigUp(),
+            classes: ["beat-group-settings-view-time-sig-up"],
+            oninput: () => {
+                this.beatGroup.setGlobalTimeSigUp(Number(this.timeSigUpInput.value));
+            },
+        });
+        this.node = UINode.make("div", {
+            subs: [
+            ],
+        });
+        return this.node;
+    }
+}

src/ui/BeatGroup/Beat/BeatView.ts

@@ -3,6 +3,8 @@ import Beat, {BeatEvents} from "../../../Beat";
 import {IPublisher} from "../../../Publisher";
 import BeatSettingsView from "./BeatSettings/BeatSettingsView";
 import ISubscriber from "../../../Subscriber";
+import BeatUnitView from "./BeatUnit/BeatUnitView";
+import "./Beat.css";
 
 export type BeatUINodeOptions = UINodeOptions & {
     beat: Beat,
@@ -13,6 +15,8 @@ export default class BeatView extends UINode implements ISubscriber {
     private title!: HTMLHeadingElement;
     private settingsView!: BeatSettingsView;
     private settingsToggleButton!: HTMLButtonElement;
+    private beatUnitViews: BeatUnitView[] = [];
+    private beatUnitViewBlock!: HTMLElement;
 
     constructor(options: BeatUINodeOptions) {
         super(options);
@@ -22,12 +26,16 @@ export default class BeatView extends UINode implements ISubscriber {
     }
 
     private setupBindings() {
-        this.beat.addSubscriber(this, BeatEvents.NewName);
+        this.beat.addSubscriber(this, "all");
     }
 
-    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T) {
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
         if (event === BeatEvents.NewName) {
             this.title.innerText = this.beat.getName();
+        } else if (event === BeatEvents.NewTimeSig) {
+            this.render();
+        } else if (event === BeatEvents.NewBarCount) {
+            this.render();
         }
     }
 
@@ -36,15 +44,65 @@ export default class BeatView extends UINode implements ISubscriber {
         this.settingsToggleButton.innerText = this.settingsView.isOpen() ? "Hide Settings" : "Show Settings";
     }
 
+    private makeBeatUnits() {
+        const beatUnitCount = this.beat.getBarCount() * this.beat.getTimeSigUp();
+        this.beatUnitViews = [];
+        for (let i = 0; i < beatUnitCount; i++) {
+            const beatUnit = this.beat.getUnitByIndex(i);
+            if (beatUnit) {
+                this.beatUnitViews.push(new BeatUnitView({beatUnit}));
+            }
+        }
+    }
+
+    private respaceBeatUnits(): void {
+        this.beatUnitViewBlock.querySelectorAll(".beat-spacer").forEach(spacer => spacer.remove());
+        const barLength = this.beat.getTimeSigUp();
+        const barCount = this.beat.getBarCount();
+        let bars = 0;
+        let i = -1;
+        let spacersInserted = false;
+        while (!spacersInserted) {
+            i += barLength;
+            const newSpacer = UINode.make("div", {classes: ["beat-spacer"]});
+            const leftNeighbour = this.beatUnitViewBlock.children.item(i);
+            if (leftNeighbour) {
+                leftNeighbour.insertAdjacentElement("afterend", newSpacer);
+            } else {
+                break;
+            }
+            i++;
+            bars++;
+            if (bars === barCount) {
+                spacersInserted = true;
+            }
+        }
+    }
+
     rebuild(): HTMLElement {
-        this.title = UINode.make("h3", {innerText: this.beat.getName()});
+        this.title = UINode.make("h3", {
+            innerText: this.beat.getName(),
+            classes: ["beat-title"],
+        });
+        this.makeBeatUnits();
         this.settingsView = new BeatSettingsView({beat: this.beat});
-        this.settingsToggleButton = UINode.make("button", {innerText: this.settingsView.isOpen() ? "Hide Settings" : "Show Settings"});
+        this.settingsToggleButton = UINode.make("button", {
+            classes: ["beat-settings-btn"],
+            innerText: this.settingsView.isOpen() ? "Hide Settings" : "Show Settings",
+        });
         this.settingsToggleButton.addEventListener("click", () => this.toggleSettings());
+        this.beatUnitViewBlock = UINode.make("div", {
+            classes: ["beat-unit-block"],
+            subs: [
+                ...this.beatUnitViews.map(view => view.rebuild()),
+            ],
+        });
+        this.respaceBeatUnits();
         this.node = UINode.make("div", {
+            classes: ["beat"],
             subs: [
                 this.title,
-                UINode.make("p", {innerText: "I am a BeatGroup"}),
+                this.beatUnitViewBlock,
                 this.settingsToggleButton,
                 this.settingsView.rebuild(),
             ],

src/ui/BeatGroup/BeatGroup.css

@@ -0,0 +1,3 @@
+.beat-group {
+
+}

src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css

@@ -0,0 +1,3 @@
+.beat-group-settings {
+
+}

src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -0,0 +1,66 @@
+import BeatGroup from "../../../BeatGroup";
+import UINode, {UINodeOptions} from "../../UINode";
+import ISubscriber from "../../../Subscriber";
+import {IPublisher} from "../../../Publisher";
+import {BeatGroupEvents} from "../../../BeatGroup";
+
+export type BeatGroupSettingsUINodeOptions = UINodeOptions & {
+    beatGroup: BeatGroup,
+};
+
+export default class BeatGroupSettingsView extends UINode implements ISubscriber {
+    private beatGroup: BeatGroup;
+    private barCountInput!: HTMLInputElement;
+    private timeSigUpInput!: HTMLInputElement;
+
+    constructor(options: BeatGroupSettingsUINodeOptions) {
+        super(options);
+        this.beatGroup = options.beatGroup;
+        this.beatGroup.addSubscriber(this, [
+            BeatGroupEvents.GlobalBarCountChanged,
+            BeatGroupEvents.GlobalTimeSigUpChanged
+        ]);
+        this.rebuild();
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+        if (event === BeatGroupEvents.GlobalBarCountChanged) {
+            this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();
+        } else if (event === BeatGroupEvents.GlobalTimeSigUpChanged) {
+            this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();
+        }
+    }
+
+    rebuild(): HTMLElement {
+        this.barCountInput = UINode.make("input", {
+            type: "text",
+            classes: ["beat-group-settings-view-bar-count"],
+            value: this.beatGroup.getBeatByIndex(0).getBarCount(),
+            oninput: () => {
+                this.beatGroup.setGlobalBarCount(Number(this.barCountInput.value));
+            },
+        });
+        this.timeSigUpInput = UINode.make("input", {
+            type: "text",
+            value: this.beatGroup.getBeatByIndex(0).getTimeSigUp(),
+            classes: ["beat-group-settings-view-time-sig-up"],
+            oninput: () => {
+                this.beatGroup.setGlobalTimeSigUp(Number(this.timeSigUpInput.value));
+            },
+        });
+        this.node = UINode.make("div", {
+            subs: [
+                UINode.make("h4", {innerText: "Settings for beat"}),
+                UINode.make("label", {
+                    innerText: "Bars:",
+                }),
+                this.barCountInput,
+                UINode.make("label", {
+                    innerText: "Boxes per bar:",
+                }),
+                this.timeSigUpInput,
+            ],
+        });
+        return this.node;
+    }
+}

src/ui/BeatGroup/BeatGroupView.ts

@@ -1,6 +1,7 @@
 import UINode, {UINodeOptions} from "../UINode";
 import BeatGroup from "../../BeatGroup";
 import BeatView from "./Beat/BeatView";
+import BeatGroupSettingsView from "./BeatGroupSettings/BeatGroupSettingsView";
 
 export type BeatGroupUINodeOptions = UINodeOptions & {
     title: string,
@@ -10,6 +11,7 @@ export type BeatGroupUINodeOptions = UINodeOptions & {
 export default class BeatGroupView extends UINode {
     private title: string;
     private beatGroup: BeatGroup;
+    private beatGroupSettingsView!: BeatGroupSettingsView;
 
     constructor(options: BeatGroupUINodeOptions) {
         super(options);
@@ -22,9 +24,12 @@ export default class BeatGroupView extends UINode {
         for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {
             beatViews.push(new BeatView({beat: this.beatGroup.getBeatByIndex(i)}));
         }
+        this.beatGroupSettingsView = new BeatGroupSettingsView({beatGroup: this.beatGroup});
         return UINode.make("div", {
+            classes: ["beat-group"],
             subs: [
                 UINode.make("h3", {innerText: this.title}),
+                this.beatGroupSettingsView.rebuild(),
                 ...beatViews.map(bv => bv.rebuild())
             ],
         });

src/ui/Root/Root.css

@@ -1,8 +1,12 @@
-.rootView {
+.root {
     margin: auto;
     width: 80%;
 }
 
-.rootView .title {
+.root .title {
     text-align: center;
+}
+
+.root input {
+    width: 5em;
 }

src/ui/Root/RootView.ts

@@ -11,7 +11,7 @@ export type RootUINodeOptions = UINodeOptions & {
 
 export default class RootView extends UINode {
     private title: string;
-    private parent: HTMLElement;
+    protected parent: HTMLElement;
     private beatGroupView: BeatGroupView;
     private mainBeatGroup: BeatGroup;
 
@@ -24,23 +24,13 @@ export default class RootView extends UINode {
         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", {
+            classes: ["root"],
             subs: [
                 UINode.make("h1", {innerText: this.title, classes: ["title"]}),
                 this.beatGroupView.rebuild(),
             ],
-            classes: ["rootView"]
         });
     }
 }

src/ui/UINode.ts

@@ -12,8 +12,21 @@ type IRenderAttributes<
 
 export default abstract class UINode {
     protected node: HTMLElement | null = null;
+    protected parent: HTMLElement | null = null;
 
-    constructor(options: UINodeOptions) {
+    constructor(options: UINodeOptions) {}
+
+    render(): void {
+        const oldNode = this.node;
+        this.node = this.rebuild();
+        if (oldNode) {
+            if (!this.parent) {
+                this.parent = oldNode.parentElement;
+            }
+            this.parent!.replaceChild(this.node, oldNode);
+        } else {
+            this.parent!.appendChild(this.node);
+        }
     }
 
     abstract rebuild(): HTMLElement;