Multiple changes

- backend: add summoner spells
- backend: add build variants
- backend: builds are now storing full tree with runes (keystones)
- backend: build trees are split on starter items and merged on runes
- frontend: computing core tree now
- frontend: variant selectors

frontend/composables/useBuilds.ts

@@ -1,32 +1,19 @@
 /**
- * Composable for managing build data with automatic trimming
- * Handles deep cloning and tree manipulation
+ * Composable for managing build data
  */
 import { deepClone } from '~/utils/helpers'
-import { trimBuilds, trimLateGameItems } from '~/utils/buildHelpers'
 
 export const useBuilds = (buildsProp: Ref<Builds>) => {
   const builds = ref<Builds>(deepClone(buildsProp.value))
 
-  function trimBuildData(): void {
-    trimBuilds(builds.value)
-    trimLateGameItems(builds.value)
-  }
-
   // Watch for changes and rebuild
   watch(
     () => buildsProp.value,
     newBuilds => {
       builds.value = deepClone(newBuilds)
-      trimBuildData()
     },
     { deep: true }
   )
 
-  // Initial trim on mount
-  onMounted(() => {
-    trimBuildData()
-  })
-
   return { builds }
 }

frontend/composables/useRuneStyles.ts

@@ -2,23 +2,10 @@
  * 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))
-
+export const useRuneStyles = () => {
   const { data: perksData } = useFetch('/api/cdragon/perks')
   const { data: stylesData } = useFetch('/api/cdragon/perkstyles')
+  console.log(stylesData.value)
 
   const perks = reactive(new Map<number, Perk>())
   watch(
@@ -36,62 +23,24 @@ export const useRuneStyles = (
     { 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
-              }
-            }
+  const perkStyles = reactive(new Map<number, PerkStyle>())
+  watch(
+    stylesData,
+    newPerkStyles => {
+      if (Array.isArray(newPerkStyles?.styles)) {
+        perkStyles.clear()
+        for (const perkStyle of newPerkStyles.styles) {
+          if (perkStyle?.id) {
+            perkStyles.set(perkStyle.id, perkStyle)
           }
         }
-
-        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
+    perkStyles
   }
 }