feat: more ui, looping

src/ui/BeatGroup/Beat/Beat.css

@@ -12,16 +12,31 @@
 }
 
 .beat-settings-btn {
-    margin: 0;
+    cursor: pointer;
+    line-height: 2em;
     display: inline-block;
+    height: 2em;
+    border: 1px solid grey;
+    border-radius: 1em;
+    user-select: none;
+    transition: background-color 150ms;
+}
+
+.beat-settings-btn:hover {
+    background-color: #eaeaea;
+}
+
+.beat-settings-btn.active {
+    background-color: lightgrey;
+    transition: none;
 }
 
 .beat-unit-block {
-    display: inline-block;
+    height: 2em;
 }
 
 .beat-title {
-    display: inline-block;
+    line-height: 2em;
     width: 3em;
     margin: 0;
 }
@@ -29,4 +44,17 @@
 .beat-spacer {
     display: inline-block;
     width: 1em;
+    height: 2em;
+}
+
+.beat-main {
+    display: inline-flex;
+}
+
+.beat-settings-container {
+    display: flex;
+}
+
+.beat {
+    width: max-content;
 }

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

@@ -1,7 +1,31 @@
 .beat-settings {
+    padding: 1em;
     display: none;
+    text-align: center;
+    width: 40em;
+    justify-content: space-evenly;
 }
 
 .beat-settings.visible {
+    display: inline-flex;
+}
+
+.beat-settings-time-sig-up {
     display: block;
-}
+}
+
+.beat-settings-time-sig-down {
+    display: block;
+}
+
+.beat-settings-option {
+    display: inline-block;
+}
+
+.beat-settings-option-group {
+    align-self: stretch;
+}
+
+.beat-settings-time-sig input {
+    margin: auto;
+}

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

@@ -3,6 +3,8 @@ import Beat, {BeatEvents} from "../../../../Beat";
 import {IPublisher} from "../../../../Publisher";
 import ISubscriber from "../../../../Subscriber";
 import "./BeatSettings.css";
+import BeatLike from "../../../../BeatLike";
+import BeatLikeLoopSettingsView from "../../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
 
 export type BeatSettingsViewUINodeOptions = UINodeOptions & {
     beat: Beat,
@@ -14,6 +16,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
     private timeSigUp!: HTMLInputElement;
     private timeSigDown!: HTMLInputElement;
     private barCountInput!: HTMLInputElement;
+    private loopSettingsView!: BeatLikeLoopSettingsView;
 
     constructor(options: BeatSettingsViewUINodeOptions) {
         super(options);
@@ -25,7 +28,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
         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.NewTimeSig) {
             this.timeSigUp.value = this.beat.getTimeSigUp().toString();
             this.timeSigDown.value = this.beat.getTimeSigDown().toString();
@@ -48,38 +51,51 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
     }
 
     rebuild(): HTMLElement {
+        this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
         this.timeSigUp = UINode.make("input", {
+            classes: ["time-sig-up"],
+            type: "number",
             value: this.beat.getTimeSigUp().toString(),
-            oninput: (event) => {
+            oninput: (event: Event) => {
                 this.beat.setTimeSignature({up: Number((event.target as HTMLInputElement).value) });
             },
         });
         this.timeSigDown = UINode.make("input", {
+            classes: ["beat-settings-time-sig-down"],
+            type: "number",
             value: this.beat.getTimeSigDown().toString(),
-            oninput: (event) => {
+            oninput: (event: Event) => {
                 this.beat.setTimeSignature({down: Number((event.target as HTMLInputElement).value) });
             },
         });
         this.barCountInput = UINode.make("input", {
+            classes: ["beat-settings-bars-count"],
+            type: "number",
             value: this.beat.getBarCount().toString(),
-            oninput: (event) => {
-                this.beat.setBars(Number((event.target as HTMLInputElement).value));
+            oninput: (event: Event) => {
+                this.beat.setBarCount(Number((event.target as HTMLInputElement).value));
             },
         });
         this.node = UINode.make("div", {
+            classes: ["beat-settings"],
             subs: [
                 UINode.make("div", {
-                    classes: ["beat-settings-time-sig"],
+                    classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"],
                     subs: [
                         UINode.make("label", {innerText: "Time Signature:"}),
                         this.timeSigUp,
                         this.timeSigDown,
                     ]
                 }),
-                UINode.make("label", {innerText: "Bars:"}),
-                this.barCountInput,
+                UINode.make("div", {
+                    classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"],
+                    subs: [
+                        UINode.make("label", {innerText: "Bar Count:"}),
+                        this.barCountInput,
+                    ],
+                }),
+                this.loopSettingsView.render(),
             ],
-            classes: ["beat-settings"]
         });
         return this.node;
     }

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

@@ -1,11 +1,30 @@
 .beat-unit {
     width: 2em;
     height: 2em;
+    margin-right: 0.2em;
     background-color: white;
-    border: 0.1em solid black;
+    border-width: 0.1em 0.1em 0.1em 0.1em;
+    border-color: black;
+    border-style: solid;
     display: inline-block;
+    transition: background-color 150ms;
+    cursor: pointer;
 }
 
-.beat-unit.on {
+.beat-unit:hover {
+    background-color: #f1c3b6;
+    transition: none;
+}
+
+.beat-unit.beat-unit-ghost:hover {
+    background-color: #c9e2c9;
+}
+
+.beat-unit.beat-unit-on {
     background-color: darksalmon;
+    transition: none;
+}
+
+.beat-unit.beat-unit-on.beat-unit-ghost {
+    background-color: darkseagreen;
 }

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

@@ -1,4 +1,4 @@
-import BeatUnit, {BeatUnitEvents} from "../../../../BeatUnit";
+import BeatUnit, {BeatUnitEvents, BeatUnitType} from "../../../../BeatUnit";
 import ISubscriber from "../../../../Subscriber";
 import UINode, {UINodeOptions} from "../../../UINode";
 import {IPublisher} from "../../../../Publisher";
@@ -10,37 +10,79 @@ export type BeatUnitUINodeOptions = UINodeOptions & {
 
 export default class BeatUnitView extends UINode implements ISubscriber {
     private beatUnit: BeatUnit;
+    private subscription!: {unbind: () => void};
 
     constructor(options: BeatUnitUINodeOptions) {
         super(options);
         this.beatUnit = options.beatUnit;
         this.setupBindings();
+    }
+
+    setUnit(beatUnit: BeatUnit): void {
+        this.subscription.unbind();
+        this.beatUnit = beatUnit;
+        this.setupBindings();
         this.rebuild();
+        this.redraw();
     }
 
     private setupBindings() {
-        this.beatUnit.addSubscriber(this, "all");
+        this.subscription = this.beatUnit.addSubscriber(this, "all");
     }
 
-    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T) {
+    toggle(): void {
+        this.beatUnit.toggle();
+    }
+
+    turnOn(): void {
+        this.beatUnit.setOn(true);
+    }
+
+    turnOff(): void {
+        this.beatUnit.setOn(false);
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
         if (event === BeatUnitEvents.On) {
-            this.node?.classList.add("on");
+            this.node?.classList.add("beat-unit-on");
         } else if (event === BeatUnitEvents.Off) {
-            this.node?.classList.remove("on");
+            this.node?.classList.remove("beat-unit-on");
+        } else if (event === BeatUnitEvents.TypeChange) {
+            if (this.beatUnit.getType() === BeatUnitType.GhostNote) {
+                this.node?.classList.add("beat-unit-ghost");
+            } else {
+                this.node?.classList.remove("beat-unit-ghost");
+            }
         }
     }
 
     rebuild(): HTMLElement {
         const classes = ["beat-unit"];
         if (this.beatUnit.isOn()) {
-            classes.push("on");
+            classes.push("beat-unit-on");
         }
         this.node = UINode.make("div", {
             classes: classes,
-            onclick: () => {
-                this.beatUnit.toggle();
+            oncontextmenu: () => false,
+        });
+        this.onMouseUp((ev: MouseEvent) => {
+            if (ev.button === 1) {
+                const currentType = this.beatUnit.getType();
+                this.beatUnit.setType(currentType === BeatUnitType.GhostNote ? BeatUnitType.Normal : BeatUnitType.GhostNote);
             }
         });
         return this.node;
     }
+
+    onHover(cb: () => void): void {
+        this.getNode().onmouseover = cb;
+    }
+
+    onMouseDown(cb: (ev: MouseEvent) => void): void {
+        this.getNode().onmousedown = cb;
+    }
+
+    onMouseUp(cb: (ev: MouseEvent) => void): void {
+        this.getNode().onmouseup = cb;
+    }
 }

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

@@ -1,53 +0,0 @@
-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

@@ -14,15 +14,17 @@ export default class BeatView extends UINode implements ISubscriber {
     private beat: Beat;
     private title!: HTMLHeadingElement;
     private settingsView!: BeatSettingsView;
-    private settingsToggleButton!: HTMLButtonElement;
+    private settingsToggleButton!: HTMLDivElement;
     private beatUnitViews: BeatUnitView[] = [];
-    private beatUnitViewBlock!: HTMLElement;
+    private beatUnitViewBlock: HTMLElement | null = null;
+    private lastHoveredBeatUnitView: BeatUnitView | null = null;
+    private static deselectingUnits = false;
+    private static selectingUnits = false;
 
     constructor(options: BeatUINodeOptions) {
         super(options);
         this.beat = options.beat;
         this.setupBindings();
-        this.rebuild();
     }
 
     private setupBindings() {
@@ -33,29 +35,85 @@ export default class BeatView extends UINode implements ISubscriber {
         if (event === BeatEvents.NewName) {
             this.title.innerText = this.beat.getName();
         } else if (event === BeatEvents.NewTimeSig) {
-            this.render();
+            this.setupBeatUnits();
         } else if (event === BeatEvents.NewBarCount) {
-            this.render();
+            this.setupBeatUnits();
+        } else if (event === BeatEvents.DisplayTypeChanged) {
+            this.setupBeatUnits();
+        } else if (event === BeatEvents.LoopLengthChanged) {
+            this.setupBeatUnits();
         }
     }
 
     private toggleSettings() {
         this.settingsView.toggleVisible();
-        this.settingsToggleButton.innerText = this.settingsView.isOpen() ? "Hide Settings" : "Show Settings";
+        if (this.settingsView.isOpen()) {
+            this.settingsToggleButton.classList.add("active");
+        } else {
+            this.settingsToggleButton.classList.remove("active");
+        }
     }
 
-    private makeBeatUnits() {
+    private rebuildBeatUnitViews() {
         const beatUnitCount = this.beat.getBarCount() * this.beat.getTimeSigUp();
-        this.beatUnitViews = [];
+        this.beatUnitViews.splice(beatUnitCount, this.beatUnitViews.length - beatUnitCount);
         for (let i = 0; i < beatUnitCount; i++) {
             const beatUnit = this.beat.getUnitByIndex(i);
             if (beatUnit) {
-                this.beatUnitViews.push(new BeatUnitView({beatUnit}));
+                let view: BeatUnitView;
+                if (this.beatUnitViews[i]) {
+                    view = this.beatUnitViews[i];
+                    view.setUnit(beatUnit);
+                } else {
+                    view = new BeatUnitView({beatUnit});
+                    this.beatUnitViews.push(view);
+                }
+                view.onMouseDown((event: MouseEvent) => this.onBeatUnitClick(event.button, i));
+                window.addEventListener("mouseup", (event: MouseEvent) => {
+                    BeatView.selectingUnits = false;
+                    BeatView.deselectingUnits = false;
+                });
+                view.onHover(() => {
+                    this.lastHoveredBeatUnitView = view;
+                    if (BeatView.selectingUnits) {
+                        this.lastHoveredBeatUnitView.turnOn();
+                    } else if (BeatView.deselectingUnits) {
+                        this.lastHoveredBeatUnitView.turnOff();
+                    }
+                });
             }
         }
     }
 
+    private onBeatUnitClick(button: number, index: number) {
+        if (button === 0) {
+            BeatView.selectingUnits = true;
+            this.beat.getUnitByIndex(index)?.toggle();
+        } else if (button === 2) {
+            BeatView.deselectingUnits = true;
+            this.beat.getUnitByIndex(index)?.setOn(false);
+        }
+    }
+
+    private buildBeatUnitViewBlock(): void {
+        const beatUnitNodes: HTMLElement[] = [];
+        for (let i = 0; i < this.beatUnitViews.length; i++) {
+            beatUnitNodes.push(this.beatUnitViews[i].render());
+        }
+        if (this.beatUnitViewBlock) {
+            this.beatUnitViewBlock.replaceChildren(...beatUnitNodes);
+        } else {
+            this.beatUnitViewBlock = UINode.make("div", {
+                classes: ["beat-unit-block"],
+                subs: [...beatUnitNodes],
+            });
+        }
+    }
+
     private respaceBeatUnits(): void {
+        if (!this.beatUnitViewBlock) {
+            return;
+        }
         this.beatUnitViewBlock.querySelectorAll(".beat-spacer").forEach(spacer => spacer.remove());
         const barLength = this.beat.getTimeSigUp();
         const barCount = this.beat.getBarCount();
@@ -79,32 +137,39 @@ export default class BeatView extends UINode implements ISubscriber {
         }
     }
 
+    private setupBeatUnits(): void {
+        this.rebuildBeatUnitViews();
+        this.buildBeatUnitViewBlock();
+        this.respaceBeatUnits();
+    }
+
     rebuild(): HTMLElement {
         this.title = UINode.make("h3", {
             innerText: this.beat.getName(),
             classes: ["beat-title"],
         });
-        this.makeBeatUnits();
+        this.setupBeatUnits();
         this.settingsView = new BeatSettingsView({beat: this.beat});
-        this.settingsToggleButton = UINode.make("button", {
+        this.settingsToggleButton = UINode.make("div", {
             classes: ["beat-settings-btn"],
-            innerText: this.settingsView.isOpen() ? "Hide Settings" : "Show Settings",
+            innerText: "Settings",
+            onclick: () => this.toggleSettings()
         });
-        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,
-                this.beatUnitViewBlock,
+                UINode.make("div", {
+                    classes: ["beat-main"],
+                    subs: [
+                        this.title,
+                        this.beatUnitViewBlock!,
+                    ]
+                }),
                 this.settingsToggleButton,
-                this.settingsView.rebuild(),
+                UINode.make("div", {
+                    classes: ["beat-settings-container"],
+                    subs: [this.settingsView.render()],
+                }),
             ],
         });
         return this.node;

src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css

@@ -1,3 +1,14 @@
 .beat-group-settings {
+}
 
-}
+.beat-group-settings-options {
+    padding: 1em;
+    display: inline-flex;
+    width: 40em;
+    justify-content: space-evenly;
+}
+
+.beat-group-settings-option {
+    display: inline-block;
+    text-align: center;
+}

src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -3,6 +3,8 @@ import UINode, {UINodeOptions} from "../../UINode";
 import ISubscriber from "../../../Subscriber";
 import {IPublisher} from "../../../Publisher";
 import {BeatGroupEvents} from "../../../BeatGroup";
+import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
+import "./BeatGroupSettings.css";
 
 export type BeatGroupSettingsUINodeOptions = UINodeOptions & {
     beatGroup: BeatGroup,
@@ -12,6 +14,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
     private beatGroup: BeatGroup;
     private barCountInput!: HTMLInputElement;
     private timeSigUpInput!: HTMLInputElement;
+    private loopSettingsView!: BeatLikeLoopSettingsView;
 
     constructor(options: BeatGroupSettingsUINodeOptions) {
         super(options);
@@ -20,7 +23,6 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
             BeatGroupEvents.GlobalBarCountChanged,
             BeatGroupEvents.GlobalTimeSigUpChanged
         ]);
-        this.rebuild();
     }
 
     notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
@@ -32,33 +34,45 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
     }
 
     rebuild(): HTMLElement {
+        this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beatGroup});
         this.barCountInput = UINode.make("input", {
-            type: "text",
-            classes: ["beat-group-settings-view-bar-count"],
-            value: this.beatGroup.getBeatByIndex(0).getBarCount(),
+            type: "number",
+            value: this.beatGroup.getBeatByIndex(0).getBarCount().toString(),
             oninput: () => {
-                this.beatGroup.setGlobalBarCount(Number(this.barCountInput.value));
+                this.beatGroup.setBarCount(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"],
+            type: "number",
+            value: this.beatGroup.getBeatByIndex(0).getTimeSigUp().toString(),
             oninput: () => {
                 this.beatGroup.setGlobalTimeSigUp(Number(this.timeSigUpInput.value));
             },
         });
         this.node = UINode.make("div", {
+            classes: ["beat-group-settings"],
             subs: [
-                UINode.make("h4", {innerText: "Settings for beat"}),
-                UINode.make("label", {
-                    innerText: "Bars:",
+                UINode.make("h4", { innerText: "Settings for beat" }),
+                UINode.make("div", {
+                    classes: ["beat-group-settings-options"],
+                    subs: [
+                        UINode.make("div", {
+                            classes: ["beat-group-settings-bar-count", "beat-group-settings-option"],
+                            subs: [
+                                UINode.make("label", { innerText: "Bars:" }),
+                                this.barCountInput,
+                            ],
+                        }),
+                        UINode.make("div", {
+                            classes: ["beat-group-settings-boxes", "beat-group-settings-option"],
+                            subs: [
+                                UINode.make("label", { innerText: "Boxes per bar:" }),
+                                this.timeSigUpInput,
+                            ],
+                        }),
+                        this.loopSettingsView.render(),
+                    ],
                 }),
-                this.barCountInput,
-                UINode.make("label", {
-                    innerText: "Boxes per bar:",
-                }),
-                this.timeSigUpInput,
             ],
         });
         return this.node;

src/ui/BeatGroup/BeatGroupView.ts

@@ -12,6 +12,7 @@ export default class BeatGroupView extends UINode {
     private title: string;
     private beatGroup: BeatGroup;
     private beatGroupSettingsView!: BeatGroupSettingsView;
+    private beatViews: BeatView[] = [];
 
     constructor(options: BeatGroupUINodeOptions) {
         super(options);
@@ -20,17 +21,17 @@ export default class BeatGroupView extends UINode {
     }
 
     rebuild(): HTMLDivElement {
-        const beatViews = [];
+        this.beatViews = [];
         for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {
-            beatViews.push(new BeatView({beat: this.beatGroup.getBeatByIndex(i)}));
+            this.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())
+                this.beatGroupSettingsView.render(),
+                ...this.beatViews.map(bv => bv.render())
             ],
         });
     }

src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css

@@ -0,0 +1,17 @@
+.loop-settings-option-group {
+    margin-top: 1em;
+}
+
+.loop-settings-option > label {
+    width: 5em;
+    text-align: left;
+}
+
+.loop-settings > p {
+    margin: 0;
+    text-align: center;
+}
+
+.loop-settings-option {
+    display: flex;
+}

src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts

@@ -0,0 +1,79 @@
+import BeatLike from "../../../BeatLike";
+import UINode, {UINodeOptions} from "../../UINode";
+import ISubscriber from "../../../Subscriber";
+import {IPublisher} from "../../../Publisher";
+import {BeatEvents} from "../../../Beat";
+import "./BeatLikeLoopSettings.css";
+
+export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & {
+    beatLike: BeatLike,
+};
+
+export default class BeatLikeLoopSettingsView extends UINode implements ISubscriber {
+    private beatLike: BeatLike;
+    private loopLengthInput!: HTMLInputElement;
+    private loopCheckbox!: HTMLInputElement;
+
+    constructor(options: BeatLikeLoopSettingsViewUINodeOptions) {
+        super(options);
+        this.beatLike = options.beatLike;
+        this.setupBindings();
+    }
+
+    private setupBindings() {
+        this.beatLike.addSubscriber(this, "all");
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+        if (event === BeatEvents.LoopLengthChanged) {
+            this.loopLengthInput.value = this.beatLike.getLoopLength().toString();
+        } else if (event === BeatEvents.DisplayTypeChanged) {
+            this.loopCheckbox.checked = this.beatLike.isLooping();
+        }
+    }
+
+    rebuild(): HTMLElement {
+        this.loopLengthInput = UINode.make("input", {
+            classes: ["loop-settings-loop-length"],
+            type: "number",
+            value: this.beatLike.getLoopLength().toString(),
+            oninput: (event: Event) => {
+                this.beatLike.setLoopLength(Number((event.target as HTMLInputElement).value));
+            },
+        });
+        this.loopCheckbox = UINode.make("input", {
+            classes: ["loop-settings-loop-toggle"],
+            type: "checkbox",
+            checked: this.beatLike.isLooping(),
+            oninput: (event: Event) => {
+                this.beatLike.setLooping((event.target as HTMLInputElement).checked);
+            },
+        });
+        this.node = UINode.make("div", {
+            classes: ["loop-settings"],
+            subs: [
+                UINode.make("p", {innerText: "Looping:"}),
+                UINode.make("div", {
+                    classes: ["loop-settings-option-group"],
+                    subs: [
+                        UINode.make("div", {
+                            classes: ["loop-settings-option"],
+                            subs: [
+                                UINode.make("label", {innerText: "Length:"}),
+                                this.loopLengthInput,
+                            ],
+                        }),
+                        UINode.make("div", {
+                            classes: ["loop-settings-option"],
+                            subs: [
+                                UINode.make("label", {innerText: "On:"}),
+                                this.loopCheckbox,
+                            ],
+                        }),
+                    ],
+                }),
+            ]
+        });
+        return this.node;
+    }
+}