frontend: refactor of the new build viewer

extracting the logic into composables

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
+  }
+}