Android build v1.1.19

src/App.tsx

@@ -1,7 +1,12 @@
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { AuthScreen } from './components/AuthScreen'
 import IWantToHeal1App from './modes/iwt1/IWantToHeal1App'
 import { IWantToHeal2App } from './modes/iwt2/IWantToHeal2App'
 import { useGameAction } from './input'
+import {
+  loadAuthSession,
+  type AuthSession,
+} from './profile'
 
 type GameVersion = 'iwt1' | 'iwt2'
 
@@ -31,9 +36,46 @@ const GAME_OPTIONS: Array<{
 function App() {
   const [selectedVersion, setSelectedVersion] = useState<GameVersion | null>(null)
   const [selectedIndex, setSelectedIndex] = useState(0)
+  const [authSession, setAuthSession] = useState<AuthSession | null>(null)
+  const [authChecked, setAuthChecked] = useState(false)
+  const [serverMessage, setServerMessage] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    loadAuthSession()
+      .then((session) => {
+        if (cancelled) return
+        setAuthSession(session.account && session.profile ? session : null)
+      })
+      .catch((reason: unknown) => {
+        if (cancelled) return
+        setServerMessage(
+          reason instanceof Error
+            ? `${reason.message} Offline play is still available.`
+            : 'Unable to reach the server. Offline play is still available.',
+        )
+      })
+      .finally(() => {
+        if (!cancelled) setAuthChecked(true)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const acceptSession = useCallback((session: AuthSession) => {
+    setAuthSession(session)
+    setSelectedVersion(null)
+    setServerMessage('')
+  }, [])
+
+  const clearAuthSession = useCallback(() => {
+    setAuthSession(null)
+    setSelectedVersion(null)
+  }, [])
 
   useGameAction((action, device) => {
-    if (selectedVersion || device !== 'controller') return
+    if (!authSession || selectedVersion || device !== 'controller') return
     if (action === 'navigateLeft' || action === 'navigateUp') {
       setSelectedIndex((current) => Math.max(0, current - 1))
     } else if (action === 'navigateRight' || action === 'navigateDown') {
@@ -43,8 +85,34 @@ function App() {
     }
   })
 
+  if (!authChecked) {
+    return (
+      <main className="game-shell">
+        <section className="message-panel">
+          <p className="eyebrow">Opening Chronicle</p>
+          <h1>Loading...</h1>
+        </section>
+      </main>
+    )
+  }
+
+  if (!authSession) {
+    return (
+      <AuthScreen
+        onAuthenticated={acceptSession}
+        serverMessage={serverMessage}
+      />
+    )
+  }
+
   if (selectedVersion === 'iwt1') {
-    return <IWantToHeal1App onBackToGameSelect={() => setSelectedVersion(null)} />
+    return (
+      <IWantToHeal1App
+        initialSession={authSession}
+        onAuthenticationCleared={clearAuthSession}
+        onBackToGameSelect={() => setSelectedVersion(null)}
+      />
+    )
   }
 
   if (selectedVersion === 'iwt2') {