diff --git a/index.html b/index.html
index 133b808..984456f 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
Drum Slayer Pro
+ Drum Slayer
diff --git a/src/ui/Beat/Beat.css b/src/ui/Beat/Beat.css
index 2f7fecc..7d78f71 100644
--- a/src/ui/Beat/Beat.css
+++ b/src/ui/Beat/Beat.css
@@ -9,12 +9,8 @@
.vertical-mode .beat {
align-items: center;
-}
-
-.vertical-mode .beat {
+ overflow: visible;
height: inherit;
- overflow-x: hidden;
- overflow-y: scroll;
}
.beat-title {
@@ -31,4 +27,46 @@
}
.beat-track-container {
+ display: inline-block;
+}
+
+.beat-titles-container {
+ display: inline-flex;
+ flex-direction: column;
+}
+
+.vertical-mode .beat-main-container {
+ display: block;
+}
+
+.vertical-mode .beat-titles-container {
+ margin-bottom: 10px;
+ display: flex;
+ flex-direction: row;
+ overflow: visible;
+}
+
+.beat-main-container {
+ display: flex;
+ white-space: nowrap;
+}
+
+.beat-track-title {
+ height: 36px;
+ line-height: 36px;
+ margin: 0;
+ flex: 1;
+ text-align: right;
+ display: block;
+ white-space: nowrap;
+}
+
+.vertical-mode .beat-track-title {
+ height: auto;
+ transform: rotate(330deg);
+ transform-origin: bottom;
+ width: 36px;
+ display: inline-block;
+ writing-mode: vertical-rl;
+ text-align: right;
}
\ No newline at end of file
diff --git a/src/ui/Beat/BeatView.tsx b/src/ui/Beat/BeatView.tsx
index bf33a8f..8063407 100644
--- a/src/ui/Beat/BeatView.tsx
+++ b/src/ui/Beat/BeatView.tsx
@@ -18,6 +18,7 @@ export default class BeatView extends Rung implements ISubscriber implements ISubscriber beatView.setBeat(null));
+ deadTrackViews.forEach(beatView => beatView.setTrack(null));
if (this.currentOrientation === "horizontal") {
this.reverseDisplayOrder();
}
@@ -66,6 +74,7 @@ export default class BeatView extends Rung implements ISubscriber implements ISubscriber
{this.title}
- {...this.trackViews}
+
+
{...this.titles}
+
{...this.trackViews}
+
as HTMLDivElement;
}
}
\ No newline at end of file
diff --git a/src/ui/Track/Track.css b/src/ui/Track/Track.css
index ff7eba4..031264e 100644
--- a/src/ui/Track/Track.css
+++ b/src/ui/Track/Track.css
@@ -1,3 +1,11 @@
+.vertical-mode .track {
+ height: 36px;
+}
+
+.vertical-mode .track {
+ height: auto;
+}
+
.track > * {
padding-right: 1em;
padding-left: 1em;
@@ -17,18 +25,6 @@
width: 2em;
}
-.track-title {
- width: 3em;
- line-height: 32px;
- margin: 0;
-}
-
-.vertical-mode .track-title {
- display: block;
- width: auto;
- text-align: center;
-}
-
.track-spacer {
display: inline-block;
width: 1em;
@@ -42,7 +38,7 @@
}
.track-main {
- display: inline-flex;
+ height: 36px;
}
.vertical-mode .track-main {
@@ -57,7 +53,6 @@
.track {
width: max-content;
- margin-bottom: 4px;
}
.vertical-mode .track {
diff --git a/src/ui/Track/TrackView.tsx b/src/ui/Track/TrackView.tsx
index 032bc71..11e7151 100644
--- a/src/ui/Track/TrackView.tsx
+++ b/src/ui/Track/TrackView.tsx
@@ -19,7 +19,7 @@ type EventTypeSubscriptions = typeof EventTypeSubscriptions[number];
export default class TrackView extends Rung implements ISubscriber {
private track!: Track;
- private title = Capsule.new(null);
+ private title: HTMLHeadingElement;
private trackUnitViews: TrackUnitView[] = [];
private trackUnitViewBlock: HTMLElement | null = null;
private lastHoveredTrackUnitView: TrackUnitView | null = null;
@@ -29,10 +29,17 @@ export default class TrackView extends Rung implements ISubscriber
+ as HTMLHeadingElement;
}
- setBeat(track: Track | null): void {
+ getTitleNode(): HTMLHeadingElement {
+ return this.title;
+ }
+
+ setTrack(track: Track | null): void {
if (track) {
this.track = track;
this.sub?.unbind();
@@ -46,7 +53,7 @@ export default class TrackView extends Rung implements ISubscriber
-
-
{this.trackUnitViewBlock}
as HTMLElement;