キューブがつながっている間は画面が自動で消えないようにする

web/src/components/ConnectionPanel.tsx

@@ -3,6 +3,7 @@ import { canWatchAdvertisements, connectBluetoothCube, isWebBluetoothAvailable,
 import { useCubeState, useCubeStore } from '../cube/hooks'
 import { MockConnection } from '../cube/mock'
 import type { GyroStatus } from '../cube/store'
+import { useScreenWakeLock } from '../cube/wake-lock'
 import { useSettings } from '../settings/hooks'
 import { useDebug } from '../ui/prefs'
 import { Dialog } from '../ui/Dialog'
@@ -136,6 +137,8 @@ function gyroNotice(useGyro: boolean, status: GyroStatus): { text: string; warn:
 export function CubeNotices() {
   const store = useCubeStore()
   const state = useCubeState()
+  // キューブを触っている間（つながっている間）は、画面が消えないようにする
+  useScreenWakeLock(state.status === 'connected')
   return (
     <>
       {state.error && (

web/src/cube/wake-lock.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+
+/**
+ * on の間、画面が自動で消えないようにする（Screen Wake Lock）。
+ * タブを裏に回すとブラウザが解除するので、表に戻ったときに取り直す。対応していないブラウザでは何もしない。
+ */
+export function useScreenWakeLock(on: boolean) {
+  useEffect(() => {
+    if (!on || !('wakeLock' in navigator)) return
+    let lock: WakeLockSentinel | null = null
+    let stopped = false
+    const acquire = async () => {
+      if (document.visibilityState !== 'visible' || (lock && !lock.released)) return
+      try {
+        const l = await navigator.wakeLock.request('screen')
+        if (stopped) void l.release()
+        else lock = l
+      } catch {
+        // 省電力モードなどで断られても、画面が消えるだけなので気にしない
+      }
+    }
+    void acquire()
+    document.addEventListener('visibilitychange', acquire)
+    return () => {
+      stopped = true
+      document.removeEventListener('visibilitychange', acquire)
+      void lock?.release()
+    }
+  }, [on])
+}