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

feat: better styling, add new track

Browse Source
This commit is contained in:
Daniel Ledda
2021-09-05 17:42:05 +02:00
parent f3f966c9ca
commit 9967de43dd
10 changed files with 55 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/global.css
View File

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

14
src/BeatGroup.ts
View File

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

10
src/main.ts
View File

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

1
src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts
View File

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

3
src/ui/BeatGroup/BeatGroup.css
View File

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

14
src/ui/BeatGroup/BeatGroupView.ts
View File

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

16
src/ui/BeatGroupSettings/BeatGroupSettingsView.ts
View File

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

43
src/ui/BeatSettings/BeatSettingsView.ts
View File

@@ -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 timeSigDown!: NumberInputView;
private barCountInput!: NumberInputView;
private nameInput!: HTMLInputElement;
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) {
this.timeSigUp.setValue(this.beat.getTimeSigUp());
this.timeSigDown.setValue(this.beat.getTimeSigDown());
} else if (event === BeatEvents.NewBarCount) {
this.barCountInput.setValue(this.beat.getBarCount());
if (event === BeatEvents.NewName) {
this.nameInput.value = this.beat.getName();
}
}
@@ -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({
initialValue: this.beat.getTimeSigUp(),
setter: (value: number) => this.beat.setBarCount(value),
getter: () => this.beat.getBarCount(),
});
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.nameInput = UINode.make("input", {
value: this.beat.getName(),
type: "text",
oninput: (event: Event) => this.beat.setName((event.target as HTMLInputElement).value),
});
this.node = UINode.make("div", {
classes: ["beat-settings"],
subs: [
UINode.make("div", {
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.nameInput,
this.loopSettingsView.render(),
],
});

4
src/ui/Root/Root.css
View File

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

4
src/ui/UINode.ts
View File

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