made some changes to the UI, removed leaderboards. updated gamesaves

src/components/TalentScreen.tsx

@@ -15,6 +15,7 @@ type Props = {
 
 export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: Props) {
   const [busyTalentId, setBusyTalentId] = useState<number | null>(null)
+  const [talentPage, setTalentPage] = useState(0)
   const [resetting, setResetting] = useState(false)
   const [message, setMessage] = useState('')
   const scrollRef = useRef<number>(0)
@@ -28,6 +29,11 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
   const tiers = Array.from(
     new Set(gameClass.talents.map((talent) => talent.tier)),
   ).sort((a, b) => a - b)
+  const tierPages = Array.from(
+    { length: Math.ceil(tiers.length / 2) },
+    (_, index) => tiers.slice(index * 2, index * 2 + 2),
+  )
+  const visibleTiers = tierPages[talentPage] ?? tierPages[0] ?? []
 
   useEffect(() => {
     window.scrollTo(0, scrollRef.current)
@@ -123,8 +129,23 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
         </div>
       </div>
 
+      <nav className="talent-page-tabs" role="tablist" aria-label="Talent tier pages">
+        {tierPages.map((pageTiers, index) => (
+          <button
+            aria-selected={talentPage === index}
+            className={talentPage === index ? 'active' : ''}
+            key={pageTiers.join('-')}
+            onClick={() => setTalentPage(index)}
+            role="tab"
+            type="button"
+          >
+            Tiers {pageTiers[0]}-{pageTiers[pageTiers.length - 1]}
+          </button>
+        ))}
+      </nav>
+
       <div className="talent-tree">
-        {tiers.map((tier) => {
+        {visibleTiers.map((tier) => {
           const requiredPoints = (tier - 1) * 5
           return (
             <section className="talent-tier" key={tier}>