feat: new UI and build process

src/Beat.ts

@@ -1,45 +1,52 @@
 import BeatUnit, {BeatUnitType} from "./BeatUnit";
+import {IPublisher, Publisher} from "./Publisher";
+import ISubscriber from "./Subscriber";
 
 export type BeatInitOptions = {
-    timeSig: {
+    timeSig?: {
         up: number,
         down: number,
     },
-    name: string,
-    bars: number,
+    name?: string,
+    bars?: number,
 };
 
-export default class Beat {
+export enum BeatEvents {
+    NewTimeSig,
+    NewBarCount,
+    NewName,
+    UnitChanged,
+}
+
+export default class Beat implements IPublisher<BeatEvents>{
     private static count = 0;
     private readonly key: string;
     private name: string;
     private timeSigUp = 4;
     private timeSigDown = 4;
     private readonly unitRecord: BeatUnit[] = [];
-    private observers: (() => void)[] = [];
     private barCount = 1;
+    private publisher = new Publisher<BeatEvents>();
 
-    constructor(options: BeatInitOptions) {
+    constructor(options?: BeatInitOptions) {
         this.key = `Beat-${Beat.count}`;
-        if (options.timeSig) {
-            this.name = options.name;
-            this.setTimeSignature(options.timeSig.up, options.timeSig.down);
-            this.setBars(options.bars);
-        } else {
-            this.name = this.key;
-            this.setTimeSignature(4, 4);
-            this.setBars(48);
-        }
+        this.name = options?.name ?? this.key;
+        this.setTimeSignature(options?.timeSig?.up ?? 4, options?.timeSig?.down ?? 4);
+        this.setBars(options?.bars ?? 48);
         Beat.count++;
     }
 
+    addSubscriber(subscriber: ISubscriber, eventType: BeatEvents | "all"): { unbind: () => void } {
+        return this.publisher.addSubscriber(subscriber, eventType);
+    }
+
     setTimeSignature(up: number, down: number): void {
         if (Beat.isValidTimeSigRange(up)) {
             if (Beat.isValidTimeSigRange(down)) {
                 this.timeSigUp = up | 0;
                 this.timeSigDown = down | 0;
                 this.updateBeatUnitLength();
-                this.notify();
+                this.publisher.notifySubs(BeatEvents.NewTimeSig);
             }
         }
     }
@@ -51,7 +58,7 @@ export default class Beat {
         }
         this.barCount = barCount;
         this.updateBeatUnitLength();
-        this.notify();
+        this.publisher.notifySubs(BeatEvents.NewBarCount);
     }
 
     private updateBeatUnitLength() {
@@ -81,7 +88,7 @@ export default class Beat {
         const unit = this.getUnit(index);
         if (unit) {
             unit.setOn(true);
-            this.notify();
+            this.publisher.notifySubs(BeatEvents.UnitChanged);
         }
     }
 
@@ -92,7 +99,7 @@ export default class Beat {
         const unit = this.getUnit(index);
         if (unit) {
             unit.setOn(false);
-            this.notify();
+            this.publisher.notifySubs(BeatEvents.UnitChanged);
         }
     }
 
@@ -104,7 +111,7 @@ export default class Beat {
         const unit = this.getUnit(index);
         if (unit) {
             unit.toggle();
-            this.notify();
+            this.publisher.notifySubs(BeatEvents.UnitChanged);
         }
     }
 
@@ -113,7 +120,7 @@ export default class Beat {
             return;
         }
         this.getUnit(index).setType(type);
-        this.notify();
+        this.publisher.notifySubs(BeatEvents.UnitChanged);
     }
 
     unitIsOn(index: number): boolean {
@@ -124,10 +131,6 @@ export default class Beat {
         return this.getUnit(index)?.getType();
     }
 
-    onUpdate(updateCallback: () => void): void {
-        this.observers.push(updateCallback);
-    }
-
     private getUnit(index: number): BeatUnit {
         if (!this.unitRecord[index]) {
             throw new Error(`Invalid beat unit index! - ${index}`);
@@ -147,13 +150,9 @@ export default class Beat {
         return sig >= 2 && sig <= 64;
     }
 
-    private notify(): void {
-        this.observers.forEach(observer => observer());
-    }
-
     setName(newName: string): void {
         this.name = newName;
-        this.notify();
+        this.publisher.notifySubs(BeatEvents.NewName);
     }
 
     getName(): string {

src/BeatGroup.ts

@@ -1,22 +1,35 @@
 import Beat, {BeatInitOptions} from "./Beat";
+import {IPublisher, Publisher} from "./Publisher";
+import ISubscriber from "./Subscriber";
 
 type BeatGroupInitOptions = {
     beats: BeatInitOptions[],
 }
 
-export default class BeatGroup {
+const enum BeatGroupEvents {
+    BeatOrderChanged,
+    BeatListChanged,
+}
+
+export default class BeatGroup implements IPublisher<BeatGroupEvents> {
     private beats: Beat[] = [];
     private beatKeyMap: Record<string, number> = {};
-    private subscribers: (() => void)[] = [];
+    private publisher: Publisher<BeatGroupEvents> = new Publisher<BeatGroupEvents>();
 
-    constructor(options: BeatGroupInitOptions) {
-        for (const beatOptions of options.beats) {
-            const newBeat = new Beat(beatOptions);
-            this.beats.push(newBeat);
-            this.beatKeyMap[newBeat.getKey()] = this.beats.length - 1;
+    constructor(options?: BeatGroupInitOptions) {
+        if (options?.beats) {
+            for (const beatOptions of options.beats) {
+                const newBeat = new Beat(beatOptions);
+                this.beats.push(newBeat);
+                this.beatKeyMap[newBeat.getKey()] = this.beats.length - 1;
+            }
         }
     }
 
+    addSubscriber(subscriber: ISubscriber, eventType: "all" | BeatGroupEvents | BeatGroupEvents[]): { unbind: () => void } {
+        return this.publisher.addSubscriber(subscriber, eventType);
+    }
+
     getBeatByKey(beatKey: string): Beat {
         if (typeof this.beatKeyMap[beatKey] === "undefined") {
             throw new Error(`Could not find the beat with key: ${beatKey}`);
@@ -46,7 +59,7 @@ export default class BeatGroup {
         this.beats[beatIndex2] = beat1;
         this.beatKeyMap[beat1.getKey()] = beatIndex2;
         this.beatKeyMap[beat2.getKey()] = beatIndex1;
-        this.notify();
+        this.publisher.notifySubs(BeatGroupEvents.BeatOrderChanged);
     }
 
     swapBeatsByKeys(beatKey1: string, beatKey2: string): void {
@@ -55,28 +68,12 @@ export default class BeatGroup {
         this.swapBeatsByIndices(index1, index2);
     }
 
-    private notify(): void {
-        this.subscribers.forEach(subscriber => subscriber());
-    }
-
-    onBeatChangeByKey(beatKey: string, subscriber: (beatKey: string) => void): void {
-        this.getBeatByKey(beatKey).onUpdate(() => subscriber(beatKey));
-    }
-
-    onBeatChangeByIndex(beatIndex: number, subscriber: (beatIndex: number) => void): void {
-        this.getBeatByIndex(beatIndex).onUpdate(() => subscriber(beatIndex));
-    }
-
-    onBeatsChange(subscriber: () => void): void {
-        this.subscribers.push(subscriber);
-    }
-
     moveBeatBack(beatKey: string): void {
         const index = this.beatKeyMap[beatKey];
         if (typeof index !== "undefined" && index > 0) {
             this.swapBeatsByIndices(index, index - 1);
         }
-        this.notify();
+        this.publisher.notifySubs(BeatGroupEvents.BeatOrderChanged);
     }
 
     moveBeatForward(beatKey: string): void {
@@ -84,7 +81,7 @@ export default class BeatGroup {
         if (typeof index !== "undefined" && index < this.getBeatCount()) {
             this.swapBeatsByIndices(index, index + 1);
         }
-        this.notify();
+        this.publisher.notifySubs(BeatGroupEvents.BeatOrderChanged);
     }
 
     canMoveBeatBack(beatKey: string): boolean {
@@ -95,8 +92,22 @@ export default class BeatGroup {
         return this.beatKeyMap[beatKey] < this.beats.length - 1;
     }
 
+    addBeat(options?: BeatInitOptions): Beat {
+        const newBeat = new Beat(options);
+        this.beats.push(newBeat);
+        this.beatKeyMap[newBeat.getKey()] = this.beats.length;
+        this.publisher.notifySubs(BeatGroupEvents.BeatListChanged);
+        return newBeat;
+    }
+
+    removeBeat(beatKey: string): void {
+        const beat = this.getBeatByKey(beatKey);
+        this.publisher.notifySubs(BeatGroupEvents.BeatListChanged);
+        this.beats.splice(this.beats.indexOf(beat), 1);
+    }
+
     setBeatName(beatKey: string, newName: string): void {
         this.getBeatByKey(beatKey).setName(newName);
-        this.notify();
+        this.publisher.notifySubs(BeatGroupEvents.BeatOrderChanged);
     }
 }

src/BeatUnit.ts

@@ -1,31 +1,51 @@
+import {IPublisher, Publisher} from "./Publisher";
+import ISubscriber from "./Subscriber";
+
 export enum BeatUnitType {
     Normal,
     GhostNote,
 }
 
 
-export default class BeatUnit {
+const enum BeatUnitEvents {
+    Toggle,
+    On,
+    Off,
+    TypeChange,
+}
+
+
+export default class BeatUnit implements IPublisher<BeatUnitEvents> {
+    private publisher: Publisher<BeatUnitEvents> = new Publisher<BeatUnitEvents>();
     private on = false;
     private type: BeatUnitType = BeatUnitType.Normal;
-    private onUpdateCallbacks: ((on: boolean, type: BeatUnitType) => void)[] = [];
 
     constructor(on = false) {
         this.on = on;
     }
- 
+
+    addSubscriber(subscriber: ISubscriber, eventType: "all" | BeatUnitEvents | BeatUnitEvents[]): { unbind: () => void } {
+        return this.publisher.addSubscriber(subscriber, eventType);
+    }
+
     toggle(): void {
         this.on = !this.on;
-        this.notify();
+        this.publisher.notifySubs(BeatUnitEvents.Toggle);
+        if (this.on) {
+            this.publisher.notifySubs(BeatUnitEvents.On);
+        } else {
+            this.publisher.notifySubs(BeatUnitEvents.Off);
+        }
     }
 
     setOn(on: boolean): void {
         this.on = on;
-        this.notify();
+        this.publisher.notifySubs(BeatUnitEvents.On);
     }
 
     setType(type: BeatUnitType): void {
         this.type = type;
-        this.notify();
+        this.publisher.notifySubs(BeatUnitEvents.Off);
     }
 
     getType(): BeatUnitType {
@@ -35,14 +55,4 @@ export default class BeatUnit {
     isOn(): boolean {
         return this.on;
     }
-
-    onUpdate(callback: (on: boolean, type: BeatUnitType) => void): void {
-        this.onUpdateCallbacks.push(callback);
-    }
-
-    notify(): void {
-        for (const cb of this.onUpdateCallbacks) {
-            cb(this.on, this.type);
-        }
-    }
 }

src/Publisher.ts

@@ -0,0 +1,54 @@
+import ISubscriber from "./Subscriber";
+
+export class Publisher<T extends (string | number)> implements IPublisher<T> {
+    private subscribers: Map<T | "all", ISubscriber[]>;
+
+    constructor() {
+        this.subscribers = new Map();
+        this.subscribers.set("all", []);
+    }
+
+    addSubscriber(subscriber: ISubscriber, eventType: (T | "all") | T[]): {unbind: () => void} {
+        let eventTypes: (T | "all")[] = [];
+        if (!Array.isArray(eventType)) {
+            eventTypes.push(eventType);
+        } else {
+            eventTypes = eventType as (T | "all")[];
+        }
+        for (const key of eventTypes) {
+            this.getSubscribers(key).push(subscriber);
+        }
+        return {
+            unbind: () => {
+                for (const key of eventTypes) {
+                    const subs = this.getSubscribers(key);
+                    subs.splice(subs.indexOf(subscriber), 1);
+                }
+            }
+        };
+    }
+
+    private getSubscribers(key: T | "all"): ISubscriber[] {
+        const subscribersList = this.subscribers.get(key);
+        if (subscribersList === undefined) {
+            const newList: ISubscriber[] = [];
+            this.subscribers.set(key, newList);
+            return newList;
+        } else {
+            return subscribersList;
+        }
+    }
+
+    notifySubs(eventType: T) {
+        for (const sub of this.getSubscribers(eventType)) {
+            sub.notify(this, eventType);
+        }
+        for (const sub of this.getSubscribers("all")) {
+            sub.notify(this, "all");
+        }
+    }
+}
+
+export interface IPublisher<T extends string | number> {
+    addSubscriber(subscriber: ISubscriber, eventType: (T | "all") | T[]): {unbind: () => void};
+}

src/Subscriber.ts

@@ -0,0 +1,5 @@
+import {IPublisher} from "./Publisher";
+
+export default interface ISubscriber {
+    notify<T extends string | number>(publisher: IPublisher<T>, event: T | "all" | T[]): void;
+}

src/config.json

@@ -1,3 +0,0 @@
-{
-  "development": true
-}

src/index.ts

@@ -1 +0,0 @@
-console.log("Hello World!");

src/main.ts

@@ -1,5 +1,6 @@
-import App from "./ui/App.svelte";
-import Store from "./Store";
+import "./main.css";
+import BeatGroup from "./BeatGroup";
+import RootView from "./ui/Root/RootView";
 
 const defaultSettings = {
     bars: 10,
@@ -9,30 +10,33 @@ const defaultSettings = {
     },
 };
 
-const store = new Store({
-    beats: [
-        {
-            name: "LF",
-            ...defaultSettings,
-        },
-        {
-            name: "LH",
-            ...defaultSettings,
-        },
-        {
-            name: "RH",
-            ...defaultSettings,
-        },
-        {
-            name: "RF",
-            ...defaultSettings,
-        }
-    ]
+const mainBeatGroup = new BeatGroup();
+mainBeatGroup.addBeat({
+    name: "LF"
+});
+mainBeatGroup.addBeat({
+    name: "LH"
+});
+mainBeatGroup.addBeat({
+    name: "RH"
+});
+mainBeatGroup.addBeat({
+    name: "RF"
 });
 
-const app = new App({
-    target: document.body,
-    props: {store},
-});
+const appNode = document.querySelector("#app");
 
-export default app;
+
+if (appNode) {
+    const appRoot = new RootView({
+        parent: appNode as HTMLDivElement,
+        title: "Drum Slayer",
+        mainBeatGroup: mainBeatGroup,
+    });
+    //@ts-ignore
+    window.appRoot = appRoot;
+    appRoot.render();
+    console.log("OK!");
+} else {
+    console.error("FUCK!");
+}

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