Android build v1.1.10

src/App.tsx

@@ -19,7 +19,7 @@ import {
   syncCloudSave,
   type GameMode,
 } from './gameRepository'
-import { focusFirstControl } from './input.tsx'
+import { focusFirstControl, useGameAction } from './input.tsx'
 import { barFillStyle } from './components/barStyles'
 
 const CombatScreen = lazy(() => import('./components/CombatScreen').then((module) => ({ default: module.CombatScreen })))
@@ -62,6 +62,7 @@ const MENU_ITEMS: Array<{
 const LAST_DIFFICULTY_KEY = 'i-want-to-heal:last-difficulty'
 const SHOW_LEADERBOARDS = false
 const ACTIVITY_PAGE_SIZE = 4
+const HOME_MENU_COLUMNS = 2
 
 function activityInitials(name: string) {
   return name
@@ -115,6 +116,7 @@ function App() {
   const [error, setError] = useState('')
   const [syncingCloud, setSyncingCloud] = useState(false)
   const [syncMessage, setSyncMessage] = useState('')
+  const [homeSelectedIndex, setHomeSelectedIndex] = useState(0)
 
   useEffect(() => {
     loadAuthSession()
@@ -336,6 +338,49 @@ function App() {
     }
   }
 
+  const cloudSync = getCloudSyncStatus()
+  const canShowCloudSync = Boolean(account && account.id !== -1 && cloudSync.available)
+  const homeMenuOffset = canShowCloudSync ? 1 : 0
+  const homeMenuEntryCount = MENU_ITEMS.length + homeMenuOffset
+  const homeActiveIndex = Math.min(homeSelectedIndex, homeMenuEntryCount - 1)
+
+  function openHomeMenuIndex(index: number) {
+    if (canShowCloudSync && index === 0) {
+      if (!syncingCloud && cloudSync.dirty) void syncSaveNow()
+      return
+    }
+    const item = MENU_ITEMS[index - homeMenuOffset]
+    if (!item) return
+    if (item.screen === 'pvp') {
+      setRoguelikeVariant('pvp')
+      setScreen('roguelike')
+      return
+    }
+    setScreen(item.screen)
+  }
+
+  useGameAction((action, device) => {
+    if (device !== 'controller' || screen !== 'menu') return
+    if (action === 'confirm') {
+      openHomeMenuIndex(homeActiveIndex)
+      return
+    }
+    if (!action.startsWith('navigate')) return
+    setHomeSelectedIndex((current) => {
+      const bounded = Math.min(current, homeMenuEntryCount - 1)
+      const column = bounded % HOME_MENU_COLUMNS
+      if (action === 'navigateLeft') return column > 0 ? bounded - 1 : bounded
+      if (action === 'navigateRight') {
+        const next = bounded + 1
+        return column < HOME_MENU_COLUMNS - 1 && next < homeMenuEntryCount ? next : bounded
+      }
+      if (action === 'navigateUp') return bounded >= HOME_MENU_COLUMNS ? bounded - HOME_MENU_COLUMNS : bounded
+      const next = bounded + HOME_MENU_COLUMNS
+      if (next < homeMenuEntryCount) return next
+      return column > 0 ? homeMenuEntryCount - 1 : bounded
+    })
+  })
+
   if (error) {
     return (
       <main className="game-shell">
@@ -455,9 +500,6 @@ function App() {
   const activity = selectedActivityOption ?? dungeon
   const selectedDifficulty = selectedDifficultyOption ?? activity.difficulties[0]
   const difficultyLocked = profile.character.level < selectedDifficulty.unlockLevel
-  const cloudSync = getCloudSyncStatus()
-  const canShowCloudSync = account.id !== -1 && cloudSync.available
-
   return (
     <main className={`game-shell ${screen === 'dungeons' || screen === 'raids' ? 'dungeon-shell' : ''} ${screen === 'customize' ? 'workshop-shell' : ''} ${screen === 'settings' ? 'settings-shell' : ''}`}>
       {screen !== 'hunter-profile' && (
@@ -484,10 +526,14 @@ function App() {
       )}
 
       {screen === 'menu' && (
-        <section className="menu-screen">
+        <section className="menu-screen" data-game-nav-active="true">
           <div className="main-menu-grid">
             {canShowCloudSync && (
-              <div className="menu-card cloud-sync-card">
+              <div
+                className={`menu-card cloud-sync-card ${homeActiveIndex === 0 ? 'game-selected' : ''}`}
+                data-game-selected={homeActiveIndex === 0 ? 'true' : undefined}
+                onPointerDown={() => setHomeSelectedIndex(0)}
+              >
                 <span>{cloudSync.dirty ? 'S' : 'C'}</span>
                 <div>
                   <strong>Cloud Save</strong>
@@ -500,6 +546,7 @@ function App() {
                 </div>
                 <button
                   className="text-button"
+                  data-controller-nav="skip"
                   disabled={syncingCloud || !cloudSync.dirty}
                   onClick={syncSaveNow}
                   type="button"
@@ -508,27 +555,33 @@ function App() {
                 </button>
               </div>
             )}
-            {MENU_ITEMS.map((item) => (
-              <button
-                className="menu-card"
-                key={item.screen}
-                onClick={() => {
-                  if (item.screen === 'pvp') {
-                    setRoguelikeVariant('pvp')
-                    setScreen('roguelike')
-                    return
-                  }
-                  setScreen(item.screen)
-                }}
-                type="button"
-              >
-                <span>{item.glyph}</span>
-                <div>
-                  <strong>{item.label}</strong>
-                  <small>{item.description}</small>
-                </div>
-              </button>
-            ))}
+            {MENU_ITEMS.map((item, index) => {
+              const homeIndex = index + homeMenuOffset
+              return (
+                <button
+                  className={`menu-card ${homeActiveIndex === homeIndex ? 'game-selected' : ''}`}
+                  data-controller-nav="skip"
+                  data-game-selected={homeActiveIndex === homeIndex ? 'true' : undefined}
+                  key={item.screen}
+                  onClick={() => {
+                    if (item.screen === 'pvp') {
+                      setRoguelikeVariant('pvp')
+                      setScreen('roguelike')
+                      return
+                    }
+                    setScreen(item.screen)
+                  }}
+                  onPointerDown={() => setHomeSelectedIndex(homeIndex)}
+                  type="button"
+                >
+                  <span>{item.glyph}</span>
+                  <div>
+                    <strong>{item.label}</strong>
+                    <small>{item.description}</small>
+                  </div>
+                </button>
+              )
+            })}
           </div>
         </section>
       )}