Gate debug guide and disclaimer by cookie

app/app.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 const { currentSong, isPlaying } = usePlayer()
+const debugView = useCookie("DEBUG_VIEW")
+const debugViewEnabled = computed(() => String(debugView.value ?? "") === "1")
 
 useHead({
 	titleTemplate: (titleChunk) =>
@@ -15,8 +17,24 @@ useHead({
 		<NuxtPage />
 		<Player />
 	</NuxtLayout>
+	<div v-if="debugViewEnabled" class="debug-view-disclaimer">
+		Debug view: everything may not align correctly on different screens.
+		It's made for 1920x1080
+	</div>
 </template>
 
 <style lang="scss">
 @use "styles/global.scss";
+
+.debug-view-disclaimer {
+	position: fixed;
+	right: 1rem;
+	bottom: 1rem;
+	z-index: 200;
+	padding: 0.5rem 0.75rem;
+	border-radius: 0.25rem;
+	background: rgba(0, 0, 0, 0.7);
+	color: white;
+	font-size: 0.875rem;
+}
 </style>

app/components/Player/Fullscreen/LyricsDisplay.vue

@@ -8,6 +8,8 @@ const { animationDuration, offset, showScrollBar } = defineProps<{
 const song = useSong()
 const { fullscreen } = useFullscreen()
 const { secondsPlayed } = usePlayer()
+const debugView = useCookie("DEBUG_VIEW")
+const debugViewEnabled = computed(() => String(debugView.value ?? "") === "1")
 
 const parsedLyrics = computed(() => {
 	if (!song.value?.lyrics?.synced) return
@@ -135,6 +137,22 @@ const finalTransform = computed(() => {
 </script>
 
 <template>
+	<div
+		v-if="debugViewEnabled"
+		:style="[
+			{
+				position: 'absolute',
+				top: '455px',
+				width: '100px',
+				height: '1px',
+				backgroundColor: 'red',
+				right: '900px',
+			},
+			{
+				transform: 'translateY(20px)',
+			},
+		]"
+	/>
 	<div
 		ref="outer-ref"
 		v-if="song && song.lyrics && song.lyrics.synced"