feat: added saving of orientation, fixed experimental css style

src/BeatStore.ts

@@ -18,6 +18,7 @@ export default class BeatStore implements ISubscriber<EventTypeSubscriptions> {
     private activeBeat: Ref<Beat>;
     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<EventTypeSubscriptions> {
             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<EventTypeSubscriptions> {
     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;
+    }
 }

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;

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 {