Android build v1.0.38

src/components/TalentScreen.tsx

@@ -16,6 +16,7 @@ type Props = {
 
 const EFFECT_SLOT_LEVELS = [5, 10, 15, 20] as const
 const EFFECT_CLASS_ID = 1
+const EFFECTS_PER_PAGE = 8
 const EFFECT_SOURCE_LABELS: Record<string, string> = {
   mend: 'Mend',
   radiance: 'Radiance',
@@ -42,6 +43,7 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
   const [busyTalentId, setBusyTalentId] = useState<number | null>(null)
   const [resetting, setResetting] = useState(false)
   const [selectedTalentId, setSelectedTalentId] = useState<number | null>(null)
+  const [effectPage, setEffectPage] = useState(0)
   const [message, setMessage] = useState('')
   const scrollRef = useRef<number>(0)
   const gameClass = profile.classes.find(
@@ -54,6 +56,11 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
     ?? selectedEffects[0]
     ?? gameClass.talents[0]
     ?? null
+  const effectPageCount = Math.max(1, Math.ceil(gameClass.talents.length / EFFECTS_PER_PAGE))
+  const visibleTalents = gameClass.talents.slice(
+    effectPage * EFFECTS_PER_PAGE,
+    effectPage * EFFECTS_PER_PAGE + EFFECTS_PER_PAGE,
+  )
 
   useEffect(() => {
     window.scrollTo(0, scrollRef.current)
@@ -64,6 +71,10 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
     setSelectedTalentId(selectedTalent?.id ?? null)
   }, [gameClass.talents, selectedTalent?.id, selectedTalentId])
 
+  useEffect(() => {
+    setEffectPage((page) => Math.min(page, effectPageCount - 1))
+  }, [effectPageCount])
+
   function saveScroll() {
     scrollRef.current = window.scrollY
   }
@@ -225,7 +236,7 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
               )}
             </div>
             <div className="effect-pool">
-              {gameClass.talents.map((talent) => {
+              {visibleTalents.map((talent) => {
                 const reason = lockReason(talent)
                 const active = talent.rank > 0
                 const selected = selectedTalent?.id === talent.id
@@ -244,13 +255,32 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
                     <span>{talent.glyph}</span>
                     <div>
                       <strong>{talent.name}</strong>
-                      <small>{talent.description}</small>
+                      <small>{EFFECT_SOURCE_LABELS[effectSource(talent.effectType)] ?? 'Spell'}</small>
                     </div>
                     <i>{isBusy ? 'Saving' : active ? 'Active' : reason || 'Available'}</i>
                   </button>
                 )
               })}
             </div>
+            {effectPageCount > 1 && (
+              <div className="effect-pager">
+                <button
+                  disabled={effectPage === 0}
+                  onClick={() => setEffectPage((page) => Math.max(0, page - 1))}
+                  type="button"
+                >
+                  Prev
+                </button>
+                <span>{effectPage + 1}/{effectPageCount}</span>
+                <button
+                  disabled={effectPage >= effectPageCount - 1}
+                  onClick={() => setEffectPage((page) => Math.min(effectPageCount - 1, page + 1))}
+                  type="button"
+                >
+                  Next
+                </button>
+              </div>
+            )}
           </section>
         </div>
       )}