djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: new UI and build process
Some checks are pending
Gitea djledda.de/arne-drums/pipeline/head Build started...
Details

Browse Source
This commit is contained in:
Daniel Ledda
2021-08-29 16:21:26 +02:00
parent f2bcc81330
commit ec4587bed5
30 changed files with 769 additions and 12596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/config.json → config.json
View File

10293
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@@ -4,10 +4,8 @@
"description": "Drum beat visualiser and editor", "description": "Drum beat visualiser and editor",
"main": "src/main.ts", "main": "src/main.ts",
"scripts": { "scripts": {
"build": "rollup -c", "build": "webpack",
"dev": "rollup -c -w", "dev": "webpack-dev-server"
"start": "sirv public --no-clear",
"validate": "svelte-check"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@@ -16,27 +14,14 @@
"author": "Daniel Ledda", "author": "Daniel Ledda",
"license": "ISC", "license": "ISC",
"devDependencies": { "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/eslint-plugin": "^4.29.2",
"@typescript-eslint/parser": "^4.29.2", "@typescript-eslint/parser": "^4.29.2",
"@webpack-cli/generators": "^2.3.0", "@webpack-cli/generators": "^2.3.0",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.2.0", "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", "source-map-support": "^0.5.19",
"style-loader": "^3.2.1", "style-loader": "^3.2.1",
"svelte-check": "^1.0.0",
"svelte-preprocess": "^4.0.0",
"ts-loader": "^9.2.5", "ts-loader": "^9.2.5",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"typescript": "^4.4.0-insiders.20210805", "typescript": "^4.4.0-insiders.20210805",

1
public/build/bundle.css
View File

@@ -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}

2060
public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

8
public/index.html
View File

@@ -4,16 +4,14 @@
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'> <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='icon' type='image/png' href='./favicon.png'>
<link rel='stylesheet' href='./global.css'> <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> </head>
<script>
</script>
<body> <body>
<div id="app"></div>
</body> </body>
</html> </html>

238
public/static/bundle.js Normal file
View File

File diff suppressed because one or more lines are too long

0
public/build/bundle.js.map → public/static/bundle.js.map
View File

83
rollup.config.js
View File

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

59
src/Beat.ts
View File

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

65
src/BeatGroup.ts
View File

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

42
src/BeatUnit.ts
View File

@@ -1,31 +1,51 @@
import {IPublisher, Publisher} from "./Publisher";
import ISubscriber from "./Subscriber";
export enum BeatUnitType { export enum BeatUnitType {
Normal, Normal,
GhostNote, 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 on = false;
private type: BeatUnitType = BeatUnitType.Normal; private type: BeatUnitType = BeatUnitType.Normal;
private onUpdateCallbacks: ((on: boolean, type: BeatUnitType) => void)[] = [];
constructor(on = false) { constructor(on = false) {
this.on = on; this.on = on;
} }
addSubscriber(subscriber: ISubscriber, eventType: "all" | BeatUnitEvents | BeatUnitEvents[]): { unbind: () => void } {
return this.publisher.addSubscriber(subscriber, eventType);
}
toggle(): void { toggle(): void {
this.on = !this.on; 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 { setOn(on: boolean): void {
this.on = on; this.on = on;
this.notify(); this.publisher.notifySubs(BeatUnitEvents.On);
} }
setType(type: BeatUnitType): void { setType(type: BeatUnitType): void {
this.type = type; this.type = type;
this.notify(); this.publisher.notifySubs(BeatUnitEvents.Off);
} }
getType(): BeatUnitType { getType(): BeatUnitType {
@@ -35,14 +55,4 @@ export default class BeatUnit {
isOn(): boolean { isOn(): boolean {
return this.on; 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);
}
}
} }

54
src/Publisher.ts Normal file
View File

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

5
src/Subscriber.ts Normal file
View File

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

1
src/index.ts
View File

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

0
src/main.css Normal file
View File

56
src/main.ts
View File

@@ -1,5 +1,6 @@
import App from "./ui/App.svelte"; import "./main.css";
import Store from "./Store"; import BeatGroup from "./BeatGroup";
import RootView from "./ui/Root/RootView";
const defaultSettings = { const defaultSettings = {
bars: 10, bars: 10,
@@ -9,30 +10,33 @@ const defaultSettings = {
}, },
}; };
const store = new Store({ const mainBeatGroup = new BeatGroup();
beats: [ mainBeatGroup.addBeat({
{ name: "LF"
name: "LF", });
...defaultSettings, mainBeatGroup.addBeat({
}, name: "LH"
{ });
name: "LH", mainBeatGroup.addBeat({
...defaultSettings, name: "RH"
}, });
{ mainBeatGroup.addBeat({
name: "RH", name: "RF"
...defaultSettings,
},
{
name: "RF",
...defaultSettings,
}
]
}); });
const app = new App({ const appNode = document.querySelector("#app");
target: document.body,
props: {store},
});
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!");
}

0
src/ui/BeatGroup/Beat/Beat.css Normal file
View File

7
src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.css Normal file
View File

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

58
src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts Normal file
View File

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

0
src/ui/BeatGroup/Beat/BeatUnitView/BeatUnitView.css Normal file
View File

0
src/ui/BeatGroup/Beat/BeatUnitView/BeatUnitView.ts Normal file
View File

54
src/ui/BeatGroup/Beat/BeatView.ts Normal file
View File

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

0
src/ui/BeatGroup/BeatGroup.css Normal file
View File

32
src/ui/BeatGroup/BeatGroupView.ts Normal file
View File

@@ -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())
],
});
}
}

8
src/ui/Root/Root.css Normal file
View File

@@ -0,0 +1,8 @@
.rootView {
margin: auto;
width: 80%;
}
.rootView .title {
text-align: center;
}

46
src/ui/Root/RootView.ts Normal file
View File

@@ -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"]
});
}
}

41
src/ui/UINode.ts Normal file
View File

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

11
tsconfig.json
View File

@@ -2,9 +2,12 @@
"compilerOptions": { "compilerOptions": {
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"noImplicitAny": true, "noImplicitAny": true,
"module": "es6", "module": "esnext",
"target": "es5", "target": "esnext",
"allowJs": true "allowJs": true,
"strict": true,
"moduleResolution": "Node",
"resolveJsonModule": true
}, },
"files": ["src/index.ts"] "include": ["./src/**/*"]
} }

124
webpack.config.js
View File

@@ -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 TerserWebpackPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV == 'production'; const webpackConfig = {
mode: "development",
entry: "./src/main.ts",
const stylesHandler = MiniCssExtractPlugin.loader; plugins: [new webpack.ProgressPlugin()],
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/
],
module: { module: {
rules: [ rules: [
{ {
test: /\.(ts|tsx)$/i, test: /\.(ts|tsx)$/,
loader: 'ts-loader', loader: "ts-loader",
exclude: ['/node_modules/'], include: [path.resolve(__dirname, "src")],
exclude: [/node_modules/]
}, },
{ {
test: /\.css$/i, test: /.css$/,
use: [stylesHandler,'css-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
// Add your rules for custom modules here use: [{
// Learn more about loaders from https://webpack.js.org/loaders/ loader: config.development ? "style-loader" : MiniCssExtractPlugin.loader,
], }, {
loader: "css-loader",
options: {
sourceMap: true
}
}]
},
{
test: /\.(png|jpe?g|gif|ttf|woff2?|eot|svg)$/i,
use: [
{
loader: "file-loader",
},
],
}]
}, },
resolve: { resolve: {
extensions: ['.tsx', '.ts', '.js'], 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,
}, },
}; };
module.exports = () => { if (!config.development) {
if (isProduction) { webpackConfig.optimization = {
config.mode = 'production'; minimizer: [new TerserWebpackPlugin()],
splitChunks: {
} else { cacheGroups: {
config.mode = 'development'; vendors: {
} priority: -10,
return config; test: /[\\/]node_modules[\\/]/
}; }
},
chunks: "async",
minChunks: 1,
minSize: 30000,
name: false
}
};
webpackConfig.mode = "production";
}
module.exports = {...webpackConfig};