frontend: refactor of the new build viewer

extracting the logic into composables

frontend/composables/useItemMap.ts

@@ -0,0 +1,30 @@
+/**
+ * Composable for fetching and managing item data from CDragon API
+ * Returns a reactive Map of item ID to item data
+ */
+export const useItemMap = () => {
+  const { data: items } = useFetch<Array<Item>>('/api/cdragon/items', {
+    lazy: true,
+    server: false
+  })
+
+  const itemMap = ref<Map<number, Item>>(new Map())
+
+  watch(
+    items,
+    (newItems) => {
+      if (Array.isArray(newItems)) {
+        const map = new Map<number, Item>()
+        for (const item of newItems) {
+          if (item?.id) {
+            map.set(item.id, item)
+          }
+        }
+        itemMap.value = map
+      }
+    },
+    { immediate: true }
+  )
+
+  return { itemMap }
+}

frontend/composables/useRuneStyles.ts

@@ -0,0 +1,93 @@
+/**
+ * Composable for fetching and managing rune styles and keystones
+ * Transforms rune data into format needed for display components
+ */
+export const useRuneStyles = (runes: Ref<Array<{
+  count: number
+  primaryStyle: number
+  secondaryStyle: number
+  selections: Array<number>
+  pickrate: number
+}>>) => {
+  const primaryStyles = ref<Array<PerkStyle>>(Array(runes.value.length))
+  const secondaryStyles = ref<Array<PerkStyle>>(Array(runes.value.length))
+  const keystoneIds = ref<Array<number>>(Array(runes.value.length))
+
+  const { data: perksData } = useFetch('/api/cdragon/perks')
+  const { data: stylesData } = useFetch('/api/cdragon/perkstyles')
+
+  const perks = reactive(new Map<number, Perk>())
+  watch(
+    perksData,
+    (newPerks) => {
+      if (Array.isArray(newPerks)) {
+        perks.clear()
+        for (const perk of newPerks) {
+          if (perk?.id) {
+            perks.set(perk.id, perk)
+          }
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  function refreshStylesKeystones(): void {
+    if (!stylesData.value?.styles) return
+
+    primaryStyles.value = Array(runes.value.length)
+    secondaryStyles.value = Array(runes.value.length)
+    keystoneIds.value = Array(runes.value.length)
+
+    for (const style of stylesData.value.styles) {
+      for (const rune of runes.value) {
+        const runeIndex = runes.value.indexOf(rune)
+
+        if (style.id === rune.primaryStyle) {
+          primaryStyles.value[runeIndex] = style
+
+          // Find keystone from first slot
+          if (style.slots?.[0]?.perks) {
+            for (const perk of style.slots[0].perks) {
+              if (rune.selections.includes(perk)) {
+                keystoneIds.value[runeIndex] = perk
+                break
+              }
+            }
+          }
+        }
+
+        if (style.id === rune.secondaryStyle) {
+          secondaryStyles.value[runeIndex] = style
+        }
+      }
+    }
+  }
+
+  // Refresh when styles data loads or runes change
+  watch(
+    [stylesData, runes],
+    () => {
+      refreshStylesKeystones()
+    },
+    { immediate: true }
+  )
+
+  // Reset when runes array changes
+  watch(
+    () => runes.value.length,
+    () => {
+      primaryStyles.value = Array(runes.value.length)
+      secondaryStyles.value = Array(runes.value.length)
+      keystoneIds.value = Array(runes.value.length)
+      refreshStylesKeystones()
+    }
+  )
+
+  return {
+    perks,
+    primaryStyles,
+    secondaryStyles,
+    keystoneIds
+  }
+}

frontend/composables/useSummonerSpellMap.ts

@@ -0,0 +1,33 @@
+/**
+ * Composable for fetching and managing summoner spell data from CDragon API
+ * Returns a reactive Map of spell ID to spell data
+ */
+export const useSummonerSpellMap = () => {
+  const { data: summonerSpellsData } = useFetch<Array<SummonerSpell>>(
+    '/api/cdragon/summoner-spells',
+    {
+      lazy: true,
+      server: false
+    }
+  )
+
+  const summonerSpellMap = ref<Map<number, SummonerSpell>>(new Map())
+
+  watch(
+    summonerSpellsData,
+    (newData) => {
+      if (Array.isArray(newData)) {
+        const map = new Map<number, SummonerSpell>()
+        for (const spell of newData) {
+          if (spell?.id) {
+            map.set(spell.id, spell)
+          }
+        }
+        summonerSpellMap.value = map
+      }
+    },
+    { immediate: true }
+  )
+
+  return { summonerSpellMap }
+}