diff --git a/src/BeatStore.ts b/src/BeatStore.ts index 03cc915..c4d8c50 100644 --- a/src/BeatStore.ts +++ b/src/BeatStore.ts @@ -18,6 +18,7 @@ export default class BeatStore implements ISubscriber { private activeBeat: Ref; private onBeatChangeCbs: (() => void)[] = []; private autoSave: boolean; + private orientation: "horizontal" | "vertical" | null = null; constructor(options: { loadFromLocalStorage: boolean, autoSave: boolean }) { this.autoSave = options.autoSave; @@ -103,6 +104,7 @@ export default class BeatStore implements ISubscriber { localStorage.setItem("drum-slayer-save", JSON.stringify({ beats: serials, activeBeatIndex: this.beats.indexOf(this.activeBeat.val), + orientation: this.orientation, })); } } @@ -110,15 +112,26 @@ export default class BeatStore implements ISubscriber { loadFromSave(source: any): void { this.beats.length = 0; if (Array.isArray(source.beats) - && (typeof source.activeBeatIndex === "number" || typeof source.activeBeatIndex === "undefined")) { + && (typeof source.activeBeatIndex === "number" || typeof source.activeBeatIndex === "undefined") + && typeof source.orientation === "string") { try { source.beats.forEach((beat: any) => this.beats.push(Beat.deserialise(beat))); if (typeof source.activeBeatIndex === "number") { this.activeBeat.val = this.beats[source.activeBeatIndex]; } + this.orientation = source.orientation; } catch (err) { console.error(err); } } } + + setOrientation(orientation: "horizontal" | "vertical"): void { + this.orientation = orientation; + this.save("localStorage"); + } + + getSavedOrientation(): "horizontal" | "vertical" | null { + return this.orientation; + } } \ No newline at end of file diff --git a/src/ui/Root/Root.css b/src/ui/Root/Root.css index 8d6191a..b3842a1 100644 --- a/src/ui/Root/Root.css +++ b/src/ui/Root/Root.css @@ -107,8 +107,7 @@ } .root-sidebar-left-strip { - text-align: right; - writing-mode: sideways-lr; + writing-mode: vertical-rl; background-color: var(--color-bg-light); } @@ -117,6 +116,7 @@ } .root-sidebar-left-tab { + transform: rotate(-180deg); display: inline-block; width: 100%; padding: 8px 3px 8px 3px; diff --git a/src/ui/Root/RootView.ts b/src/ui/Root/RootView.ts index 1438df6..fe299c9 100644 --- a/src/ui/Root/RootView.ts +++ b/src/ui/Root/RootView.ts @@ -30,12 +30,12 @@ export default class RootView extends UINode { loadFromLocalStorage: true, autoSave: true, }); - this.currentOrientation = options.orientation ?? "horizontal"; this.activeBeat = this.beatStore.getActiveBeat(); this.activeBeat.watch((newVal) => { this.beatSettingsView.setBeat(newVal); this.beatView.setBeat(newVal); }); + this.currentOrientation = this.beatStore.getSavedOrientation() ?? options.orientation ?? "horizontal"; this.beatView = new BeatView({ beat: this.activeBeat.val, orientation: this.currentOrientation, @@ -77,6 +77,7 @@ export default class RootView extends UINode { } else { this.getNode().classList.remove("vertical-mode"); } + this.beatStore.setOrientation(orientation); this.beatView.setOrientation(orientation); } @@ -88,14 +89,14 @@ export default class RootView extends UINode { return h("div", { className: "root-sidebar-left-strip", }, [ + h("div", { + saveTo: this.sidebarLeftTabs + }, this.buildTabs()), h("div", { className: "root-sidebar-add-beat", onclick: () => this.beatStore.addNewBeat(), innerText: "+", }), - h("div", { - saveTo: this.sidebarLeftTabs - }, this.buildTabs()), ]); } @@ -114,7 +115,7 @@ export default class RootView extends UINode { } }); return node; - }).reverse(); + }); } private buildSidebarQuickButtons(): HTMLElement {