feat: implement responsive layout and scaling for player and selector views

Author: Errant404

src/App.vue

@@ -1,16 +1,110 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+
+const route = useRoute()
+const wrapperStyle = ref<Record<string, string>>({})
+
+const updateLayout = () => {
+  const width = window.innerWidth
+  const height = window.innerHeight
+  const isPortrait = height > width
+  const isPlayer = route.name === 'player'
+
+  const style: Record<string, string> = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transformOrigin: 'center',
+    backgroundColor: 'var(--color-background)',
+    boxSizing: 'border-box'
+  }
+
+  if (isPlayer) {
+    // Force Landscape for Player
+    style.overflow = 'hidden'
+    if (isPortrait) {
+      style.width = `${height}px`
+      style.height = `${width}px`
+      style.transform = 'translate(-50%, -50%) rotate(90deg)'
+    } else {
+      style.width = `${width}px`
+      style.height = `${height}px`
+      style.transform = 'translate(-50%, -50%)'
+    }
+  } else {
+    // Normal Layout for Selector/Home
+    style.width = '100%'
+    style.height = '100%'
+    style.transform = 'translate(-50%, -50%)'
+    style.overflow = 'auto'
+  }
+
+  wrapperStyle.value = style
+}
+
+let resizeTimeout: number | null = null
+const onResize = () => {
+  if (resizeTimeout) window.clearTimeout(resizeTimeout)
+  // Immediate update
+  updateLayout()
+  // Delayed update to catch mobile browser UI changes
+  resizeTimeout = window.setTimeout(updateLayout, 300)
+}
+
+onMounted(() => {
+  updateLayout()
+  window.addEventListener('resize', onResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize)
+  if (resizeTimeout) window.clearTimeout(resizeTimeout)
+})
+
+watch(
+  () => route.name,
+  () => {
+    // Update layout when route changes (e.g. entering/leaving player)
+    // Use nextTick or small timeout if needed, but usually immediate is fine for style update
+    setTimeout(updateLayout, 50)
+  }
+)
 </script>
 
 <template>
-  <RouterView />
+  <div class="app-wrapper" :style="wrapperStyle">
+    <RouterView />
+  </div>
 </template>
 
 <style>
-/* Global reset or basic styles */
+/* Global overrides */
 body {
   margin: 0;
   padding: 0;
+  overflow: hidden !important;
+  background-color: #000;
+  display: block !important;
+  width: 100vw;
+  height: 100vh;
   font-family: sans-serif;
 }
+
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0 !important;
+  margin: 0 !important;
+  max-width: none !important;
+  display: block !important;
+}
+
+.app-wrapper {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.app-wrapper::-webkit-scrollbar {
+  display: none;
+}
 </style>

src/assets/main.css

@@ -1,9 +1,10 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
   font-weight: normal;
 }
 

src/views/PlayerView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch, ref } from 'vue'
+import { onMounted, onUnmounted, watch, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useFgoStore } from '@/stores/fgo'
 import { useScriptPlayer } from '@/composables/useScriptPlayer'
@@ -12,6 +12,27 @@ const player = useScriptPlayer()
 const debugMode = ref(true)
 const showSettings = ref(false)
 
+const containerRef = ref<HTMLElement | null>(null)
+const gameScreenScale = ref(1)
+
+const updateScale = () => {
+  if (!containerRef.value) return
+  const parentW = containerRef.value.clientWidth
+  const parentH = containerRef.value.clientHeight
+
+  // If dimensions are 0 (e.g. hidden), skip
+  if (parentW === 0 || parentH === 0) return
+
+  const targetW = 1024
+  const targetH = 626
+
+  const scaleW = parentW / targetW
+  const scaleH = parentH / targetH
+
+  // Fit inside (contain)
+  gameScreenScale.value = Math.min(scaleW, scaleH)
+}
+
 const loadScript = async () => {
   const questId = Number(route.params.questId)
   const phase = Number(route.params.phase)
@@ -29,8 +50,29 @@ const loadScript = async () => {
   }
 }
 
+let resizeObserver: ResizeObserver | null = null
+
 onMounted(() => {
   loadScript()
+
+  // Use ResizeObserver to detect container size changes
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      updateScale()
+    })
+    resizeObserver.observe(containerRef.value)
+  }
+
+  window.addEventListener('resize', updateScale)
+  // Initial scale update
+  setTimeout(updateScale, 100)
+})
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+  window.removeEventListener('resize', updateScale)
 })
 
 watch(
@@ -101,10 +143,15 @@ const exit = () => {
 </script>
 
 <template>
-  <div class="player-container">
+  <div class="player-container" ref="containerRef">
     <div v-if="store.isLoading" class="loading">Loading Script...</div>
     <div v-else-if="store.error" class="error">{{ store.error }}</div>
-    <div v-else-if="store.currentQuest" class="game-screen" @click="player.next()">
+    <div
+      v-else-if="store.currentQuest"
+      class="game-screen"
+      @click="player.next()"
+      :style="{ transform: `scale(${gameScreenScale})` }"
+    >
       <!-- Background Layer -->
       <div
         class="background"
@@ -175,33 +222,32 @@ const exit = () => {
 
 <style scoped>
 .player-container {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: #000;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
 }
 
 .game-screen {
   position: relative;
-  width: 100%;
-  height: 100%;
-  max-width: 1024px;
-  max-height: 626px;
+  width: 1024px;
+  height: 626px;
   background: #333;
   overflow: hidden;
   cursor: pointer;
-  aspect-ratio: 1024 / 626;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
+  flex-shrink: 0;
 }
 
 .background {

src/views/SelectorView.vue

@@ -195,6 +195,9 @@ const getQuestTypeLabel = (type: string): string => {
   padding: 20px;
   max-width: 1000px;
   margin: 0 auto;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
 
 .header {