From 59f00a30bf6f6d5db00b8e9978a7e85ac12a4559 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Mon, 16 Feb 2026 12:19:49 +0100
Subject: [PATCH] feat(nds): fullscreen button

---
 app/assets/app.css  |  1 +
 app/pages/index.vue | 75 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/app/assets/app.css b/app/assets/app.css
index c37c484..9050fd3 100644
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -41,6 +41,7 @@
 
 body {
   background: #000000;
+  overflow: hidden;
 }
 
 @theme {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 200b2f1..b059305 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -12,6 +12,43 @@ const bottomScreen = useTemplateRef<ScreenInstance>("bottomScreen");
 
 const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
 const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
+
+const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
+const isTouchDevice = () =>
+  "ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+const showFullscreenBtn = ref(true);
+
+const toggleFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    document.documentElement.requestFullscreen();
+  }
+};
+
+onMounted(() => {
+  if (isIOS()) {
+    showFullscreenBtn.value = false;
+    return;
+  }
+
+  if (!isTouchDevice()) return;
+
+  const landscape = window.matchMedia("(orientation: landscape)");
+
+  const onOrientationChange = (e: MediaQueryListEvent | MediaQueryList) => {
+    if (e.matches && !document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch(() => {});
+    }
+  };
+
+  landscape.addEventListener("change", onOrientationChange);
+
+  onUnmounted(() => {
+    landscape.removeEventListener("change", onOrientationChange);
+  });
+});
 </script>
 
 <template>
@@ -67,5 +104,43 @@ const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
         </Screen>
       </template>
     </NDS2D>
+
+    <button
+      v-if="showFullscreenBtn"
+      class="fullscreen-btn"
+      @click="toggleFullscreen"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
+        />
+      </svg>
+    </button>
   </div>
 </template>
+
+<style scoped>
+.fullscreen-btn {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+
+.fullscreen-btn:hover {
+  opacity: 1;
+}
+</style>