feat: better styling, add new track

public/global.css

@@ -65,7 +65,7 @@ button:focus {
     background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: rgba(0,0,0,0.25);
+    background-color: rgba(0,0,0);
 }
 
 @font-face {

src/BeatGroup.ts

@@ -8,11 +8,11 @@ type BeatGroupInitOptions = {
     barCount: number;
     isLooping: boolean;
     timeSigUp: number;
-    beats: BeatInitOptions[],
+    beats?: BeatInitOptions[],
     loopLength?: number,
     forceFullBars?: boolean,
     useAutoBeatLength?: boolean,
-}
+};
 
 export const enum BeatGroupEvents {
     BeatOrderChanged="BGE0",
@@ -206,6 +206,16 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
     }
 
     addBeat(options?: BeatInitOptions): Beat {
+        options = {
+            timeSig: {
+                up: this.timeSigUp,
+                down: 4,
+            },
+            bars: this.barCount,
+            isLooping: this.globalIsLooping,
+            loopLength: this.globalLoopLength,
+            ...options
+        };
         const newBeat = new Beat(options);
         this.beats.push(newBeat);
         this.beatKeyMap[newBeat.getKey()] = this.beats.length;

src/main.ts

@@ -3,14 +3,12 @@ import BeatGroup from "./BeatGroup";
 import RootView from "./ui/Root/RootView";
 
 const defaultSettings = {
-    bars: 10,
+    barCount: 2,
-    timeSig: {
+    isLooping: false,
-        down: 4,
+    timeSigUp: 8,
-        up: 4,
-    },
 };
 
-const mainBeatGroup = new BeatGroup();
+const mainBeatGroup = new BeatGroup(defaultSettings);
 mainBeatGroup.addBeat({
     name: "LF"
 });

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

@@ -22,7 +22,6 @@ export default class BeatUnitView extends UINode implements ISubscriber {
         this.subscription.unbind();
         this.beatUnit = beatUnit;
         this.setupBindings();
-        this.rebuild();
         this.redraw();
     }
 

src/ui/BeatGroup/BeatGroup.css

@@ -1,3 +1,4 @@
 .beat-group {
-
+    padding: 1em;
+    overflow-x: scroll;
 }

src/ui/BeatGroup/BeatGroupView.ts

@@ -1,13 +1,16 @@
 import UINode, {UINodeOptions} from "../UINode";
-import BeatGroup from "../../BeatGroup";
+import BeatGroup, {BeatGroupEvents} from "../../BeatGroup";
 import BeatView from "./Beat/BeatView";
+import "./BeatGroup.css";
+import ISubscriber from "../../Subscriber";
+import {IPublisher} from "../../Publisher";
 
 export type BeatGroupUINodeOptions = UINodeOptions & {
     title: string,
     beatGroup: BeatGroup,
 };
 
-export default class BeatGroupView extends UINode {
+export default class BeatGroupView extends UINode implements ISubscriber {
     private title: string;
     private beatGroup: BeatGroup;
     private beatViews: BeatView[] = [];
@@ -16,6 +19,13 @@ export default class BeatGroupView extends UINode {
         super(options);
         this.beatGroup = options.beatGroup;
         this.title = options.title;
+        this.beatGroup.addSubscriber(this, BeatGroupEvents.BeatListChanged);
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+        if (event === BeatGroupEvents.BeatListChanged) {
+            this.redraw();
+        }
     }
 
     rebuild(): HTMLDivElement {

src/ui/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -97,20 +97,24 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
                 UINode.make("div", {
                     classes: ["beat-group-settings-options"],
                     subs: [
-                        UINode.make("div", {
-                            classes: ["beat-group-settings-bar-count", "beat-group-settings-option"],
-                            subs: [
-                                this.barCountInput.render(),
-                            ],
-                        }),
                         UINode.make("div", {
                             classes: ["beat-group-settings-boxes", "beat-group-settings-option"],
                             subs: [
                                 this.timeSigUpInput.render(),
                             ],
                         }),
+                        UINode.make("div", {
+                            classes: ["beat-group-settings-bar-count", "beat-group-settings-option"],
+                            subs: [
+                                this.barCountInput.render(),
+                            ],
+                        }),
                         this.loopSettingsView.render(),
                         this.autoBeatOptions,
+                        UINode.make("button", {
+                            innerText: "New Track",
+                            onclick: () => this.beatGroup.addBeat(),
+                        })
                     ],
                 }),
             ],

src/ui/BeatSettings/BeatSettingsView.ts

@@ -13,9 +13,7 @@ export type BeatSettingsViewUINodeOptions = UINodeOptions & {
 export default class BeatSettingsView extends UINode implements ISubscriber {
     private beat: Beat;
     private visible = false;
-    private timeSigUp!: NumberInputView;
+    private nameInput!: HTMLInputElement;
-    private timeSigDown!: NumberInputView;
-    private barCountInput!: NumberInputView;
     private loopSettingsView!: BeatLikeLoopSettingsView;
 
     constructor(options: BeatSettingsViewUINodeOptions) {
@@ -29,11 +27,8 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
     }
 
     notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
-        if (event === BeatEvents.NewTimeSig) {
+        if (event === BeatEvents.NewName) {
-            this.timeSigUp.setValue(this.beat.getTimeSigUp());
+            this.nameInput.value = this.beat.getName();
-            this.timeSigDown.setValue(this.beat.getTimeSigDown());
-        } else if (event === BeatEvents.NewBarCount) {
-            this.barCountInput.setValue(this.beat.getBarCount());
         }
     }
 
@@ -52,37 +47,15 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
 
     rebuild(): HTMLElement {
         this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
-        this.timeSigUp = new NumberInputView({
+        this.nameInput = UINode.make("input", {
-            initialValue: this.beat.getTimeSigUp(),
+            value: this.beat.getName(),
-            setter: (value: number) => this.beat.setBarCount(value),
+            type: "text",
-            getter: () => this.beat.getBarCount(),
+            oninput: (event: Event) => this.beat.setName((event.target as HTMLInputElement).value),
-        });
-        this.timeSigDown = new NumberInputView({
-            initialValue: this.beat.getTimeSigDown(),
-            setter: (value: number) => this.beat.setBarCount(value),
-            getter: () => this.beat.getBarCount(),
-        });
-        this.barCountInput = new NumberInputView({
-            label: "Bar Count:",
-            initialValue: this.beat.getBarCount(),
-            setter: (value: number) => this.beat.setBarCount(value),
-            getter: () => this.beat.getBarCount(),
         });
         this.node = UINode.make("div", {
             classes: ["beat-settings"],
             subs: [
-                UINode.make("div", {
+                this.nameInput,
-                    classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"],
-                    subs: [
-                        UINode.make("label", {innerText: "Time Signature:"}),
-                        this.timeSigUp.render(),
-                        this.timeSigDown.render(),
-                    ]
-                }),
-                UINode.make("div", {
-                    classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"],
-                    subs: [this.barCountInput.render()],
-                }),
                 this.loopSettingsView.render(),
             ],
         });

src/ui/Root/Root.css

@@ -13,6 +13,7 @@
 }
 
 .root {
+    overflow: hidden;
     color: var(--color-p-light);
     background-color: var(--color-bg-dark);
     height: 100vh;
@@ -36,12 +37,15 @@
 .root-beat-stage-container {
     flex: 1;
     height: 100%;
+    width: calc(100vw - 30em);
     display: flex;
     justify-content: center;
     flex-direction: column;
 }
 
 .root-beat-stage {
+    max-width: calc(100vw - 30em);
+    overflow: hidden;
     margin: auto;
 }
 

src/ui/UINode.ts

@@ -32,13 +32,13 @@ export default abstract class UINode {
 
     redraw(): void {
         const oldNode = this.node;
-        this.render();
         if (!oldNode || !this.node) {
             return;
         }
         const parent = this.node.parentElement;
         if (parent) {
-            parent.replaceChild(oldNode, this.node);
+            this.node = this.rebuild();
+            parent.replaceChild(this.node, oldNode);
         }
     }