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/components/build/BuildVariantSelector.vue

@@ -7,12 +7,18 @@ const props = defineProps<{
   keystore: Map<number, Perk>
   itemMap: Map<number, Item>
   pickrate: number
+  selected: boolean
+  index: number
+}>()
+
+const emit = defineEmits<{
+  select: [index: number]
 }>()
 </script>
 
 <template>
   <div class="build-variant-selector">
-    <div :class="['build-variant-card', { selected: true }]">
+    <div :class="['build-variant-card', { selected }]" @click="emit('select', index)">
       <div class="variant-content">
         <!-- Keystone -->
         <NuxtImg

frontend/components/build/CompactRuneSelector.vue

@@ -9,23 +9,22 @@ interface RuneBuild {
   pickrate: number
 }
 
-interface PerkStyle {
-  id: number
-  iconPath: string
-}
-
 const props = defineProps<{
   runes: Array<RuneBuild>
-  primaryStyles: Array<PerkStyle>
-  secondaryStyles: Array<PerkStyle>
-  keystoneIds: Array<number>
   perks: Map<number, Perk>
-  selectedIndex: number
+  perkStyles: Map<number, PerkStyle>
 }>()
 
+const selectedIndex = ref(0)
+
 const emit = defineEmits<{
   select: [index: number]
 }>()
+
+function select(index: number) {
+  emit('select', index)
+  selectedIndex.value = index
+}
 </script>
 
 <template>
@@ -33,24 +32,24 @@ const emit = defineEmits<{
     <div
       v-for="(rune, index) in props.runes"
       :key="index"
-      :class="['compact-rune-option', { active: index === props.selectedIndex }]"
-      @click="emit('select', index)"
+      :class="['compact-rune-option', { active: index === selectedIndex }]"
+      @click="select(index)"
     >
       <div class="compact-rune-content">
         <NuxtImg
-          v-if="primaryStyles[index]"
+          v-if="runes[index].primaryStyle"
           class="compact-rune-img"
-          :src="CDRAGON_BASE + mapPath(primaryStyles[index].iconPath)"
+          :src="CDRAGON_BASE + mapPath(perkStyles.get(runes[index].primaryStyle)?.iconPath!)"
         />
         <NuxtImg
-          v-if="keystoneIds[index] && props.perks.get(keystoneIds[index])"
+          v-if="perks.get(runes[index].selections[0])"
           class="compact-rune-img"
-          :src="CDRAGON_BASE + mapPath(props.perks.get(keystoneIds[index])!.iconPath)"
+          :src="CDRAGON_BASE + mapPath(perks.get(runes[index].selections[0])!.iconPath)"
         />
         <NuxtImg
-          v-if="secondaryStyles[index]"
+          v-if="runes[index].secondaryStyle"
           class="compact-rune-img"
-          :src="CDRAGON_BASE + mapPath(secondaryStyles[index].iconPath)"
+          :src="CDRAGON_BASE + mapPath(perkStyles.get(runes[index].secondaryStyle)?.iconPath!)"
         />
       </div>
       <span class="compact-rune-pickrate">{{ (rune.pickrate * 100).toFixed(1) }}%</span>

frontend/components/build/SummonerSpells.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
-
-interface SummonerSpellData {
-  id: number
-  count: number
-  pickrate: number
-}
-
-const props = defineProps<{
-  spells: Array<SummonerSpellData>
-  summonerSpellMap: Map<number, SummonerSpell>
-}>()
-</script>
-
-<template>
-  <div class="summoner-spells-section">
-    <h3 class="section-title">Summoner Spells</h3>
-    <div class="summoner-spells-row">
-      <div v-for="(spell, i) in props.spells.slice(0, 2)" :key="i" class="summoner-spell-item">
-        <NuxtImg
-          v-if="summonerSpellMap.get(spell.id)"
-          class="summoner-spell-img"
-          :src="CDRAGON_BASE + mapPath(summonerSpellMap.get(spell.id)!.iconPath)"
-        />
-        <div v-else class="summoner-spell-placeholder" />
-        <span class="spell-pickrate">{{ (spell.pickrate * 100).toFixed(0) }}%</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.summoner-spells-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.section-title {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 10px;
-  color: #4a9eff;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.summoner-spells-row {
-  display: flex;
-  gap: 8px;
-}
-
-.summoner-spell-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.summoner-spell-img {
-  width: 36px;
-  height: 36px;
-  border-radius: 4px;
-  border: 1px solid var(--color-on-surface);
-}
-
-.summoner-spell-placeholder {
-  width: 36px;
-  height: 36px;
-  background: var(--color-surface);
-  border-radius: 4px;
-  border: 1px solid var(--color-on-surface);
-}
-
-.spell-pickrate {
-  font-size: 0.7rem;
-  color: var(--color-on-surface);
-  opacity: 0.7;
-}
-
-/* Responsive: Mobile */
-@media only screen and (max-width: 900px) {
-  .section-title {
-    font-size: 0.9rem;
-  }
-
-  .summoner-spell-img,
-  .summoner-spell-placeholder {
-    width: 36px;
-    height: 36px;
-  }
-}
-</style>

frontend/components/build/Viewer.vue

@@ -1,21 +1,11 @@
 <script setup lang="ts">
-import { getHighestPickrateBuildIndex, getFirstCoreItems } from '~/utils/buildHelpers'
-import { MOCK_SUMMONER_SPELLS } from '~/utils/mockData'
+import { getCoreItems, getLateGameItems } from '~/utils/buildHelpers'
 import BuildVariantSelector from '~/components/build/BuildVariantSelector.vue'
-import SummonerSpells from '~/components/build/SummonerSpells.vue'
 import CompactRuneSelector from '~/components/build/CompactRuneSelector.vue'
 import ItemRow from '~/components/build/ItemRow.vue'
 
 const props = defineProps<{
-  runes: Array<{
-    count: number
-    primaryStyle: number
-    secondaryStyle: number
-    selections: Array<number>
-    pickrate: number
-  }>
   builds: Builds
-  summonerSpells?: Array<{ id: number; count: number; pickrate: number }>
 }>()
 
 // State
@@ -23,76 +13,75 @@ const currentlySelectedBuild = ref(0)
 
 // Use composables for data fetching
 const { itemMap } = useItemMap()
-const { summonerSpellMap } = useSummonerSpellMap()
-
-// Use composable for rune styles
-const { perks, primaryStyles, secondaryStyles, keystoneIds } = useRuneStyles(toRef(props, 'runes'))
+const { perks, perkStyles } = useRuneStyles()
 
 // Use composable for builds management
 const { builds } = useBuilds(toRef(props, 'builds'))
+const currentBuild = computed(() => builds.value[currentlySelectedBuild.value])
 
-// Summoner spells data - use提供的 or fall back to mock
-const displaySummonerSpells = computed(() =>
-  props.summonerSpells && props.summonerSpells.length > 0
-    ? props.summonerSpells
-    : MOCK_SUMMONER_SPELLS
-)
+// Late game items for current build
+const lateGameItems = computed(() => {
+  if (!currentBuild.value) return []
+  return getLateGameItems(currentBuild.value).slice(0, 6)
+})
 
-// Computed properties using utility functions
-const firstCoreItems = computed(() => getFirstCoreItems(props.runes, builds.value))
+const currentlySelectedRunes = ref(0)
 
-const highestPickrateBuildIndex = computed(() => getHighestPickrateBuildIndex(props.runes))
-
-// Reset selected build when runes change
+// Reset selected build when variant changes
 watch(
-  () => props.runes,
+  () => currentBuild,
   () => {
     currentlySelectedBuild.value = 0
+    currentlySelectedRunes.value = 0
   }
 )
 
 function selectRune(index: number): void {
+  currentlySelectedRunes.value = index
+}
+function selectBuild(index: number): void {
   currentlySelectedBuild.value = index
 }
 </script>
 
 <template>
-  <div class="build-viewer">
-    <!-- Global Build Variant Selector - Single variant with highest pickrate -->
-    <BuildVariantSelector
-      :keystone-id="keystoneIds[highestPickrateBuildIndex]"
-      :item-id="firstCoreItems[highestPickrateBuildIndex]"
-      :keystore="perks"
-      :item-map="itemMap"
-      :pickrate="1"
-    />
+  <div v-if="currentBuild" class="build-viewer">
+    <div style="display: flex">
+      <BuildVariantSelector
+        v-for="(build, i) in builds"
+        :key="i"
+        :keystone-id="build.runeKeystone"
+        :item-id="build.items.children[0].data"
+        :keystore="perks"
+        :item-map="itemMap"
+        :pickrate="build.pickrate"
+        :selected="currentBuild == build"
+        :index="i"
+        @select="selectBuild"
+      />
+    </div>
 
     <!-- Main Build Content -->
     <div class="build-content">
       <!-- Left Column: Summoner Spells + Runes -->
       <div class="build-left-column">
-        <!-- Summoner Spells -->
-        <SummonerSpells :spells="displaySummonerSpells" :summoner-spell-map="summonerSpellMap" />
-
         <!-- Rune Page -->
         <div class="rune-section">
           <h3 class="section-title">Runes</h3>
           <div class="rune-page-wrapper">
             <RunePage
-              v-if="runes[currentlySelectedBuild]"
-              :primary-style-id="runes[currentlySelectedBuild].primaryStyle"
-              :secondary-style-id="runes[currentlySelectedBuild].secondaryStyle"
-              :selection-ids="runes[currentlySelectedBuild].selections"
+              v-if="currentBuild.runes"
+              :primary-style-id="currentBuild.runes[currentlySelectedRunes].primaryStyle"
+              :secondary-style-id="currentBuild.runes[currentlySelectedRunes].secondaryStyle"
+              :selection-ids="currentBuild.runes[currentlySelectedRunes].selections"
             />
           </div>
 
           <!-- Compact Rune Selector -->
           <CompactRuneSelector
-            :runes="runes"
-            :primary-styles="primaryStyles"
-            :secondary-styles="secondaryStyles"
-            :keystone-ids="keystoneIds"
+            :runes="currentBuild.runes"
             :perks="perks"
+            :perk-styles="perkStyles"
             :selected-index="currentlySelectedBuild"
             @select="selectRune"
           />
@@ -105,46 +94,47 @@ function selectRune(index: number): void {
 
         <!-- Start/Support + Boots Container -->
         <div class="item-row-group">
-          <!-- Start Items -->
+          <!-- Start Item (root of the tree) -->
           <ItemRow
-            v-if="!builds.suppItems"
+            v-if="currentBuild.startItems && currentBuild.startItems.length > 0"
             label="Start"
-            :items="builds.start"
+            :items="currentBuild.startItems"
             :item-map="itemMap"
-            :total-count="builds.tree.count"
+            :total-count="currentBuild.count"
           />
 
           <!-- Support Items -->
           <ItemRow
-            v-if="builds.suppItems"
+            v-if="currentBuild.suppItems && currentBuild.suppItems.length > 0"
             label="Support"
-            :items="builds.suppItems"
+            :items="currentBuild.suppItems"
             :item-map="itemMap"
-            :total-count="builds.tree.count"
+            :total-count="currentBuild.count"
           />
 
           <!-- Boots (regular or rush) -->
           <ItemRow
-            :label="builds.bootsFirst > 0.5 ? 'Boots Rush' : 'Boots'"
-            :items="builds.boots.slice(0, 2)"
+            :label="currentBuild.bootsFirst > 0.5 ? 'Boots Rush' : 'Boots'"
+            :items="currentBuild.boots.slice(0, 2)"
             :item-map="itemMap"
-            :total-count="builds.tree.count"
+            :total-count="currentBuild.count"
             :max-items="2"
           />
         </div>
 
-        <!-- Core Items Tree -->
-        <div class="item-row">
+        <!-- Core Items Tree (children of start item) -->
+        <div v-if="currentBuild.items?.children?.length" class="item-row">
           <span class="item-row-label">Core</span>
-          <ItemTree :tree="builds.tree" />
+          <ItemTree :tree="getCoreItems(currentBuild)" />
         </div>
 
         <!-- Late Game -->
         <ItemRow
+          v-if="lateGameItems.length > 0"
           label="Late Game"
-          :items="builds.lateGame.slice(0, 6)"
+          :items="lateGameItems"
           :item-map="itemMap"
-          :total-count="builds.tree.count"
+          :total-count="currentBuild.count"
           :max-items="6"
         />
       </div>