feat(nds): use key codes instead of keys to handle multiple layouts

app/assets/app.css

@@ -41,6 +41,7 @@
 
 body {
   background: #000000;
+  overflow: hidden;
 }
 
 @theme {

app/components/Intro/BottomScreen/BottomScreen.vue

@@ -69,7 +69,7 @@ onRender((ctx) => {
   fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y, LOGICAL_WIDTH);
 
   ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
+  assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
 });
 
 onClick(() => {

app/composables/useKeyDown.ts

@@ -1,4 +1,4 @@
-import { mapKeyToNDS } from "~/utils/input";
+import { mapCodeToNDS } from "~/utils/input";
 
 export type KeyDownCallback = (params: {
   key: string;
@@ -8,7 +8,7 @@ export type KeyDownCallback = (params: {
 
 export const useKeyDown = (callback: KeyDownCallback) => {
   const handleKeyDown = (event: KeyboardEvent) => {
-    const ndsButton = mapKeyToNDS(event.key);
+    const ndsButton = mapCodeToNDS(event.code);
     callback({
       key: ndsButton ? `NDS_${ndsButton}` : event.key,
       ndsButton,

app/composables/useKeyUp.ts

@@ -1,4 +1,4 @@
-import { mapKeyToNDS } from "~/utils/input";
+import { mapCodeToNDS } from "~/utils/input";
 
 export type KeyUpCallback = (params: {
   key: string;
@@ -7,7 +7,7 @@ export type KeyUpCallback = (params: {
 
 export const useKeyUp = (callback: KeyUpCallback) => {
   const handleKeyUp = (event: KeyboardEvent) => {
-    const ndsButton = mapKeyToNDS(event.key);
+    const ndsButton = mapCodeToNDS(event.code);
     callback({
       key: ndsButton ? `NDS_${ndsButton}` : event.key,
       ndsButton,

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>

app/utils/input.ts

@@ -1,19 +1,18 @@
-const KEY_TO_NDS_BUTTON: Record<string, string> = {
+const CODE_TO_NDS_BUTTON: Record<string, string> = {
   ArrowUp: "UP",
   ArrowDown: "DOWN",
   ArrowLeft: "LEFT",
   ArrowRight: "RIGHT",
-  D: "A",
+  KeyD: "A",
-  S: "B",
+  KeyS: "B",
-  Z: "X",
+  KeyW: "X",
-  Q: "Y",
+  KeyA: "Y",
-  " ": "SELECT",
+  Space: "SELECT",
   Enter: "START",
 };
 
-export const mapKeyToNDS = (key: string): string | null => {
+export const mapCodeToNDS = (code: string): string | null => {
-  key = key.length === 1 ? key.toUpperCase() : key;
+  return CODE_TO_NDS_BUTTON[code] ?? null;
-  return KEY_TO_NDS_BUTTON[key] ?? null;
 };
 
 export const useMouseUp = (callback: () => void) => {