frontend: refactor of the new build viewer

extracting the logic into composables

frontend/components/build/Viewer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { isEmpty, deepClone } from '~/utils/helpers'
+import { deepClone } from '~/utils/helpers'
+import { trimBuilds, trimLateGameItems, getHighestPickrateBuildIndex, getFirstCoreItems } from '~/utils/buildHelpers'
 import BuildVariantSelector from '~/components/build/BuildVariantSelector.vue'
 import SummonerSpells from '~/components/build/SummonerSpells.vue'
 import CompactRuneSelector from '~/components/build/CompactRuneSelector.vue'
@@ -14,60 +15,18 @@ const props = defineProps<{
     pickrate: number
   }>
   builds: Builds
-  summonerSpells?: Array<{ id: number; count: number; pickrate: number }> // API data when available
+  summonerSpells?: Array<{ id: number; count: number; pickrate: number }>
 }>()
 
 // State
 const currentlySelectedBuild = ref(0)
 
-// Fetch items from cached API
-const { data: items } = useFetch<Array<Item>>('/api/cdragon/items', {
-  lazy: true,
-  server: false
-})
-const itemMap = ref<Map<number, Item>>(new Map())
+// Use composables for data fetching
+const { itemMap } = useItemMap()
+const { summonerSpellMap } = useSummonerSpellMap()
 
-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 }
-)
-
-// Fetch summoner spells from cached API
-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 }
-)
+// Use composable for rune styles
+const { perks, primaryStyles, secondaryStyles, keystoneIds } = useRuneStyles(toRef(props, 'runes'))
 
 // Mock summoner spells data if not provided by API
 const mockSummonerSpells = computed(() => {
@@ -88,7 +47,7 @@ const builds = ref<Builds>(deepClone(props.builds))
 
 watch(
   () => props.builds,
-  newBuilds => {
+  (newBuilds) => {
     builds.value = deepClone(newBuilds)
     trimBuilds(builds.value)
     trimLateGameItems(builds.value)
@@ -101,117 +60,22 @@ onMounted(() => {
   trimLateGameItems(builds.value)
 })
 
-function trimBuilds(builds: Builds): void {
-  if (!builds?.tree?.children) return
-  builds.tree.children.splice(1, builds.tree.children.length - 1)
-  if (builds.tree.children[0]?.children) {
-    builds.tree.children[0].children.splice(1, builds.tree.children[0].children.length - 1)
-  }
-}
+// Computed properties using utility functions
+const firstCoreItems = computed(() => getFirstCoreItems(props.runes, builds.value))
 
-function trimLateGameItems(builds: Builds): void {
-  if (!builds?.tree || isEmpty(builds.lateGame)) return
-
-  function trimLateGameItemsFromTree(tree: ItemTree): void {
-    const foundIndex = builds.lateGame.findIndex(x => x.data === tree.data)
-    if (foundIndex !== -1) {
-      builds.lateGame.splice(foundIndex, 1)
-    }
-    for (const child of tree.children || []) {
-      trimLateGameItemsFromTree(child)
-    }
-  }
-  trimLateGameItemsFromTree(builds.tree)
-}
-
-// Get first core item for build variant display
-const firstCoreItems = computed(() => {
-  const result: number[] = []
-  for (let i = 0; i < props.runes.length; i++) {
-    const tree = builds.value?.tree
-    if (tree?.children?.[0]?.data) {
-      result.push(tree.children[0].data)
-    } else if (tree?.data) {
-      result.push(tree.data)
-    } else {
-      result.push(0)
-    }
-  }
-  return result
-})
-
-// Get the highest pickrate rune build
-const highestPickrateBuildIndex = computed(() => {
-  if (props.runes.length === 0) return 0
-  let maxIndex = 0
-  let maxPickrate = props.runes[0].pickrate
-  for (let i = 1; i < props.runes.length; i++) {
-    if (props.runes[i].pickrate > maxPickrate) {
-      maxPickrate = props.runes[i].pickrate
-      maxIndex = i
-    }
-  }
-  return maxIndex
-})
-
-// State for compact rune selector
-const selectedRuneIndex = ref(0)
-
-watch(
-  () => currentlySelectedBuild,
-  () => {
-    selectedRuneIndex.value = 0
-  }
-)
-
-function selectRune(index: number) {
-  selectedRuneIndex.value = index
-  currentlySelectedBuild.value = index
-}
-
-// Rune styles
-const primaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
-const secondaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
-const keystoneIds: Ref<Array<number>> = ref(Array(props.runes.length))
-
-const { data: perks_data }: PerksResponse = await useFetch('/api/cdragon/perks')
-const perks = reactive(new Map())
-for (const perk of perks_data.value) {
-  perks.set(perk.id, perk)
-}
-
-const { data: stylesData }: PerkStylesResponse = await useFetch('/api/cdragon/perkstyles')
-
-function refreshStylesKeystones() {
-  for (const style of stylesData.value.styles) {
-    for (const rune of props.runes) {
-      if (style.id == rune.primaryStyle) {
-        primaryStyles.value[props.runes.indexOf(rune)] = style
-        for (const perk of style.slots[0].perks) {
-          if (rune.selections.includes(perk)) {
-            keystoneIds.value[props.runes.indexOf(rune)] = perk
-          }
-        }
-      }
-      if (style.id == rune.secondaryStyle) {
-        secondaryStyles.value[props.runes.indexOf(rune)] = style
-      }
-    }
-  }
-}
+const highestPickrateBuildIndex = computed(() => getHighestPickrateBuildIndex(props.runes))
 
+// Reset selected build when runes change
 watch(
   () => props.runes,
   () => {
     currentlySelectedBuild.value = 0
-    primaryStyles.value = Array(props.runes.length)
-    secondaryStyles.value = Array(props.runes.length)
-    keystoneIds.value = Array(props.runes.length)
-    refreshStylesKeystones()
   }
 )
 
-refreshStylesKeystones()
+function selectRune(index: number): void {
+  currentlySelectedBuild.value = index
+}
 </script>
 
 <template>