feat: new UI and build process

2021-08-29 16:21:26 +02:00
parent f2bcc81330
commit ec4587bed5
30 changed files with 769 additions and 12596 deletions
--- a/src/config.json
+++ b/src/config.json
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,10 +4,8 @@
  "description": "Drum beat visualiser and editor",
  "main": "src/main.ts",
  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear",
-    "validate": "svelte-check"
+    "build": "webpack",
+    "dev": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
@@ -16,27 +14,14 @@
  "author": "Daniel Ledda",
  "license": "ISC",
  "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@rollup/plugin-typescript": "^8.0.0",
-    "@tsconfig/svelte": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "^4.29.2",
    "@typescript-eslint/parser": "^4.29.2",
    "@webpack-cli/generators": "^2.3.0",
    "css-loader": "^6.2.0",
    "eslint": "^7.32.0",
-    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "sirv-cli": "^1.0.0",
    "source-map-support": "^0.5.19",
    "style-loader": "^3.2.1",
-    "svelte-check": "^1.0.0",
-    "svelte-preprocess": "^4.0.0",
    "ts-loader": "^9.2.5",
    "tslib": "^2.0.0",
    "typescript": "^4.4.0-insiders.20210805",
--- a/public/build/bundle.css
+++ b/public/build/bundle.css
@@ -1 +0,0 @@
-h1.svelte-pvij5y{text-align:center;color:red}.main-contianer.svelte-pvij5y{width:100%}.options.svelte-ijae3p.svelte-ijae3p{border:#333333 1px solid}.unit.svelte-ijae3p.svelte-ijae3p{display:block}.lines.landscape.svelte-ijae3p .unit.svelte-ijae3p{display:inline-block}.bar.svelte-ijae3p.svelte-ijae3p{display:block;margin-bottom:1em}.lines.landscape.svelte-ijae3p .bar.svelte-ijae3p{display:inline-block;margin-bottom:0;margin-right:1em}.drum-line.svelte-ijae3p.svelte-ijae3p{display:block;overflow-x:scroll}.drum-line.svelte-ijae3p h3.svelte-ijae3p{display:inline-block;width:3em}.drum-line.svelte-ijae3p .options-button.svelte-ijae3p{display:inline-block}.lines.landscape.svelte-ijae3p .drum-line.svelte-ijae3p{display:inline-block}.lines.svelte-ijae3p.svelte-ijae3p{width:100%;justify-content:center;display:flex;flex-direction:row;margin:auto}.lines.landscape.svelte-ijae3p.svelte-ijae3p{flex-direction:column}.unit.svelte-1lue60t{height:2em;width:2em;background-color:white;border:solid black 1px}.active.svelte-1lue60t{background-color:#d97474}.ghost.svelte-1lue60t{background-color:#bc8787}
--- a/public/build/bundle.js
+++ b/public/build/bundle.js
--- a/public/index.html
+++ b/public/index.html
@@ -4,16 +4,14 @@
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

-    <title>My Svelte App</title>
+    <title>Drum Slayer</title>

    <link rel='icon' type='image/png' href='./favicon.png'>
    <link rel='stylesheet' href='./global.css'>
-    <link rel='stylesheet' href='./build/bundle.css'>

-    <script defer src='./build/bundle.js'></script>
+    <script defer src='static/bundle.js'></script>
 </head>
-<script>
-</script>
 <body>
+<div id="app"></div>
 </body>
 </html>
--- a/public/static/bundle.js
+++ b/public/static/bundle.js
--- a/public/static/bundle.js.map
+++ b/public/static/bundle.js.map
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,83 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
-import typescript from '@rollup/plugin-typescript';
-import css from 'rollup-plugin-css-only';
-
-const production = !process.env.ROLLUP_WATCH;
-
-function serve() {
-    let server;
-
-    function toExit() {
-        if (server) server.kill(0);
-    }
-
-    return {
-        writeBundle() {
-            if (server) return;
-            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-                stdio: ['ignore', 'inherit', 'inherit'],
-                shell: true
-            });
-
-            process.on('SIGTERM', toExit);
-            process.on('exit', toExit);
-        }
-    };
-}
-
-export default {
-    input: 'src/main.ts',
-    output: {
-        sourcemap: true,
-        format: 'iife',
-        name: 'app',
-        file: 'public/build/bundle.js'
-    },
-    plugins: [
-        svelte({
-            preprocess: sveltePreprocess({ sourceMap: !production }),
-            compilerOptions: {
-                // enable run-time checks when not in production
-                dev: !production
-            }
-        }),
-        // we'll extract any component CSS out into
-        // a separate file - better for performance
-        css({ output: 'bundle.css' }),
-
-        // If you have external dependencies installed from
-        // npm, you'll most likely need these plugins. In
-        // some cases you'll need additional configuration -
-        // consult the documentation for details:
-        // https://github.com/rollup/plugins/tree/master/packages/commonjs
-        resolve({
-            browser: true,
-            dedupe: ['svelte']
-        }),
-        commonjs(),
-        typescript({
-            sourceMap: !production,
-            inlineSources: !production
-        }),
-
-        // In dev mode, call `npm run start` once
-        // the bundle has been generated
-        !production && serve(),
-
-        // Watch the `public` directory and refresh the
-        // browser on changes when not in production
-        !production && livereload('public'),
-
-        // If we're building for production (npm run build
-        // instead of npm run dev), minify
-        production && terser()
-    ],
-    watch: {
-        clearScreen: false
-    }
-};
--- a/src/Beat.ts
+++ b/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 {
--- a/src/BeatGroup.ts
+++ b/src/BeatGroup.ts
@@ -1,21 +1,34 @@
 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) {
+    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") {
@@ -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);
    }
 }
--- a/src/BeatUnit.ts
+++ b/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);
-        }
-    }
 }
--- a/src/Publisher.ts
+++ b/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};
+}
--- a/src/Subscriber.ts
+++ b/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;
+}
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +0,0 @@
-console.log("Hello World!");
--- a/src/main.css
+++ b/src/main.css
--- a/src/main.ts
+++ b/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 appNode = document.querySelector("#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!");
 }
-    ]
-});
-
-const app = new App({
-    target: document.body,
-    props: {store},
-});
-
-export default app;
--- a/src/ui/BeatGroup/Beat/Beat.css
+++ b/src/ui/BeatGroup/Beat/Beat.css
--- a/src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.css
+++ b/src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.css
@@ -0,0 +1,7 @@
+.beatSettingsView {
+    display: none;
+}
+
+.beatSettingsView.visible {
+    display: block;
+}
--- a/src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts
+++ b/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;
+    }
+}
--- a/src/ui/BeatGroup/Beat/BeatUnitView/BeatUnitView.css
+++ b/src/ui/BeatGroup/Beat/BeatUnitView/BeatUnitView.css
--- a/src/ui/BeatGroup/Beat/BeatUnitView/BeatUnitView.ts
+++ b/src/ui/BeatGroup/Beat/BeatUnitView/BeatUnitView.ts
--- a/src/ui/BeatGroup/Beat/BeatView.ts
+++ b/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;
+    }
+}
--- a/src/ui/BeatGroup/BeatGroup.css
+++ b/src/ui/BeatGroup/BeatGroup.css
--- a/src/ui/BeatGroup/BeatGroupView.ts
+++ b/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())
+            ],
+        });
+    }
+}
--- a/src/ui/Root/Root.css
+++ b/src/ui/Root/Root.css
@@ -0,0 +1,8 @@
+.rootView {
+    margin: auto;
+    width: 80%;
+}
+
+.rootView .title {
+    text-align: center;
+}
--- a/src/ui/Root/RootView.ts
+++ b/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"]
+        });
+    }
+}
--- a/src/ui/UINode.ts
+++ b/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;
+    }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,9 +2,12 @@
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
-    "module": "es6",
-    "target": "es5",
-    "allowJs": true
+    "module": "esnext",
+    "target": "esnext",
+    "allowJs": true,
+    "strict": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true
  },
-  "files": ["src/index.ts"]
+  "include": ["./src/**/*"]
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,67 +1,83 @@
-// Generated using webpack-cli https://github.com/webpack/webpack-cli
+const path = require("path");
+const webpack = require("webpack");
+const config = require("./config.json");

-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");

-const isProduction = process.env.NODE_ENV == 'production';
-
-
-const stylesHandler = MiniCssExtractPlugin.loader;
-
-
-
-const config = {
-    entry: './src/index.ts',
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-    },
-    devServer: {
-        open: true,
-        host: 'localhost',
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            template: 'index.html',
-        }),
-
-        new MiniCssExtractPlugin(),
-
-        // Add your plugins here
-        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
-    ],
+const webpackConfig = {
+    mode: "development",
+    entry: "./src/main.ts",
+    plugins: [new webpack.ProgressPlugin()],
    module: {
        rules: [
            {
-                test: /\.(ts|tsx)$/i,
-                loader: 'ts-loader',
-                exclude: ['/node_modules/'],
+                test: /\.(ts|tsx)$/,
+                loader: "ts-loader",
+                include: [path.resolve(__dirname, "src")],
+                exclude: [/node_modules/]
            },
            {
-                test: /\.css$/i,
-                use: [stylesHandler,'css-loader'],
-            },
-            {
-                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
-                type: 'asset',
-            },
+                test: /.css$/,

-            // Add your rules for custom modules here
-            // Learn more about loaders from https://webpack.js.org/loaders/
-        ],
-    },
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
-    },
-};
-
-module.exports = () => {
-    if (isProduction) {
-        config.mode = 'production';
-        
-        
-    } else {
-        config.mode = 'development';
+                use: [{
+                    loader: config.development ? "style-loader" : MiniCssExtractPlugin.loader,
+                }, {
+                    loader: "css-loader",
+                    options: {
+                        sourceMap: true
                    }
-    return config;
+                }]
+            },
+            {
+                test: /\.(png|jpe?g|gif|ttf|woff2?|eot|svg)$/i,
+                use: [
+                    {
+                        loader: "file-loader",
+                    },
+                ],
+            }]
+    },
+
+    resolve: {
+        extensions: [".tsx", ".ts", ".js"]
+    },
+
+    output: {
+        filename: "bundle.js",
+        publicPath: "/static",
+        path: path.resolve(__dirname, "./public/static/"),
+    },
+
+    devServer: {
+        static: {
+            directory: path.join(__dirname, "./public"),
+        },
+        hot: true,
+        compress: true,
+        port: 9000,
+    },
 };
+
+if (!config.development) {
+    webpackConfig.optimization = {
+        minimizer: [new TerserWebpackPlugin()],
+
+        splitChunks: {
+            cacheGroups: {
+                vendors: {
+                    priority: -10,
+                    test: /[\\/]node_modules[\\/]/
+                }
+            },
+
+            chunks: "async",
+            minChunks: 1,
+            minSize: 30000,
+            name: false
+        }
+    };
+    webpackConfig.mode = "production";
+}
+
+module.exports = {...webpackConfig};
				`@@ -1 +0,0 @@`
				h1.svelte-pvij5y{text-align:center;color:red}.main-contianer.svelte-pvij5y{width:100%}.options.svelte-ijae3p.svelte-ijae3p{border:#333333 1px solid}.unit.svelte-ijae3p.svelte-ijae3p{display:block}.lines.landscape.svelte-ijae3p .unit.svelte-ijae3p{display:inline-block}.bar.svelte-ijae3p.svelte-ijae3p{display:block;margin-bottom:1em}.lines.landscape.svelte-ijae3p .bar.svelte-ijae3p{display:inline-block;margin-bottom:0;margin-right:1em}.drum-line.svelte-ijae3p.svelte-ijae3p{display:block;overflow-x:scroll}.drum-line.svelte-ijae3p h3.svelte-ijae3p{display:inline-block;width:3em}.drum-line.svelte-ijae3p .options-button.svelte-ijae3p{display:inline-block}.lines.landscape.svelte-ijae3p .drum-line.svelte-ijae3p{display:inline-block}.lines.svelte-ijae3p.svelte-ijae3p{width:100%;justify-content:center;display:flex;flex-direction:row;margin:auto}.lines.landscape.svelte-ijae3p.svelte-ijae3p{flex-direction:column}.unit.svelte-1lue60t{height:2em;width:2em;background-color:white;border:solid black 1px}.active.svelte-1lue60t{background-color:#d97474}.ghost.svelte-1lue60t{background-color:#bc8787}