feat: button to show full contents of uicons index vs masterfile

example/App.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { getFullMons, getMasterfile } from './utils'
+import { getMonsFromIndex, getMonsFromMf, getMasterfile } from './utils'
 import { AUDIO_STYLES, ICON_STYLES } from './styles'
 import { Virtual } from './Virtual'
 import type { Props, RawMon } from './types'
@@ -10,16 +10,28 @@ export default function App() {
   const [rawMons, setRawMons] = React.useState<RawMon[]>([])
   const [icon, setIcon] = React.useState(ICON_STYLES[0])
   const [audio, setAudio] = React.useState(AUDIO_STYLES[0])
+  const [full, setFull] = React.useState(false)
 
   React.useLayoutEffect(() => {
-    getMasterfile().then((newRawMons) => setRawMons(newRawMons))
-  }, [])
+    if (!full) {
+      getMasterfile().then((newRawMons) => setRawMons(newRawMons))
+    }
+  }, [full])
 
   React.useEffect(() => {
-    getFullMons(icon, audio, rawMons).then((newMons) =>
-      setMons(newMons)
-    )
-  }, [rawMons, icon, audio])
+    ;(full
+      ? getMonsFromIndex(icon, audio)
+      : getMonsFromMf(icon, audio, rawMons)
+    ).then((newMons) => setMons(newMons))
+  }, [rawMons, icon, audio, full])
 
-  return <Virtual mons={mons} setAudio={setAudio} setIcon={setIcon} />
+  return (
+    <Virtual
+      mons={mons}
+      setAudio={setAudio}
+      setIcon={setIcon}
+      full={full}
+      setFull={setFull}
+    />
+  )
 }

example/Virtual.tsx

@@ -39,7 +39,12 @@ function GitHub() {
 
 const COMPONENTS: VirtuosoGridProps<
   Props,
-  { setIcon: Setter; setAudio: Setter }
+  {
+    setIcon: Setter
+    setAudio: Setter
+    full: boolean
+    setFull: React.Dispatch<React.SetStateAction<boolean>>
+  }
 >['components'] = {
   List: React.forwardRef(({ className, ...props }, ref) => (
     <div ref={ref} {...props} className={`${className} flex-container`} />
@@ -67,6 +72,9 @@ const COMPONENTS: VirtuosoGridProps<
           <Setter set={context.setIcon} styles={ICON_STYLES} />
           <span>Audio</span>
           <Setter set={context.setAudio} styles={AUDIO_STYLES} />
+          <button onClick={() => context.setFull((full) => !full)}>
+            {context.full ? 'Show only Masterfile' : 'Show full Repo'}
+          </button>
         </div>
       )}
     </header>
@@ -77,17 +85,21 @@ export function Virtual({
   mons,
   setIcon,
   setAudio,
+  full,
+  setFull,
 }: {
   mons: Props[]
   setIcon: Setter
   setAudio: Setter
+  full: boolean
+  setFull: React.Dispatch<React.SetStateAction<boolean>>
 }) {
   return (
     <VirtuosoGrid
       className="virtuoso-container"
       totalCount={mons.length}
       data={mons}
-      context={{ setIcon, setAudio }}
+      context={{ setIcon, setAudio, full, setFull }}
       components={COMPONENTS}
       itemContent={(_, props) => <Tile key={props.title} {...props} />}
       overscan={50}

example/utils.ts

@@ -1,4 +1,4 @@
-import { UICONS } from '../src'
+import { UICONS, UiconsIndex } from '../src'
 import { MASTERFILE_URL } from './styles'
 import type { Asset, Pokemon, Props, RawMon } from './types'
 
@@ -27,18 +27,64 @@ export async function getMasterfile() {
   return rawMons
 }
 
-export async function getFullMons(
+export async function getMonsFromMf(
   icon: Asset,
   audio: Asset,
   rawMons: RawMon[]
-) {
+): Promise<Props[]> {
   const newUicons = new UICONS(icon.path)
   const newUaudio = new UICONS(audio.path)
   await Promise.all([newUicons.remoteInit(), newUaudio.remoteInit()])
-  const newMons: Props[] = rawMons.map(({ id, form, evo }) => ({
-    title: form ? `${id}-f${form}` : evo ? `${id}-e${evo}` : `${id}`,
-    src: newUicons.pokemon(id, form, evo),
-    cry: newUaudio.pokemon(id, form, evo),
-  }))
-  return newMons
+  return rawMons.map(({ id, form, evo }) => {
+    let title = id.toString()
+    if (form) title += `_${form}`
+    if (evo) title += `_${evo}`
+    return {
+      title,
+      src: newUicons.pokemon(id, form, evo),
+      cry: newUaudio.pokemon(id, form, evo),
+    }
+  })
+}
+
+function parseArgs(args: string[], key: string): string | null {
+  const found = args.find((arg) => arg.startsWith(key))
+  return found ? found.split(key)[1] : null
+}
+
+export async function getMonsFromIndex(
+  icon: Asset,
+  audio: Asset
+): Promise<Props[]> {
+  const iconIndex = await fetch(icon.path + '/index.json')
+  const iconJson: UiconsIndex = await iconIndex.json()
+  const newUaudio = new UICONS(audio.path)
+  await newUaudio.remoteInit()
+
+  return (
+    iconJson.pokemon
+      ?.sort((a, b) => {
+        try {
+          const aId = a.split('_')[0].split('.')[0]
+          const bId = b.split('_')[0].split('.')[0]
+          return +aId - +bId
+        } catch {
+          return 0
+        }
+      })
+      .map((file) => {
+        const title = file.split('.')[0]
+        const [id, ...rest] = title.split('_')
+        const form = parseArgs(rest, '_f') ?? 0
+        const evo = parseArgs(rest, '_e') ?? 0
+        const gender = parseArgs(rest, '_g') ?? 0
+        const alignment = parseArgs(rest, '_a') ?? 0
+        const shiny = !!parseArgs(rest, '_s')
+        return {
+          title,
+          src: `${icon.path}/pokemon/${file}`,
+          cry: newUaudio.pokemon(id, form, evo, gender, 0, alignment, shiny),
+        }
+      }) || []
+  )
 }

index.html

@@ -13,9 +13,6 @@
       body {
         margin: 0;
       }
-      svg {
-        height: 50px;
-      }
       @media (prefers-color-scheme: dark) {
         body {
           background-color: #333;
@@ -25,7 +22,8 @@
           fill: #fff;
         }
       }
-      h1, h2 {
+      h1,
+      h2 {
         text-align: center;
         margin: 0;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
@@ -35,6 +33,9 @@
         display: grid;
         grid-template-columns: 1fr 3fr 1fr;
       }
+      header svg {
+        height: 50px;
+      }
       header > * {
         display: flex;
         align-items: center;
@@ -60,6 +61,10 @@
         justify-content: space-between;
         margin: 2px;
       }
+      header button {
+        width: 80%;
+        margin: 2px;
+      }
       @media screen and (max-width: 1200px) {
         .flex-item {
           width: 19%;
@@ -73,10 +78,10 @@
         .flex-item {
           width: 24%;
         }
-        .item1 { 
+        .item1 {
           order: 2;
         }
-        .item2 { 
+        .item2 {
           order: 1;
           grid-column: 1 / 3;
           margin-bottom: 20px;
@@ -109,7 +114,7 @@
         margin-bottom: 10px;
       }
       .virtuoso-container {
-        height: 100cqh !important
+        height: 100cqh !important;
       }
     </style>
   </head>