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/pages/champion/[alias].vue

@@ -10,6 +10,13 @@ const error = ref<string | null>(null)
 const laneState = ref(0)
 const state = ref('build')
 
+// Data fetching
+const { itemMap } = useItemMap()
+const { perks } = useRuneStyles()
+
+// State for selected variant in alternatives tab
+const selectedAltVariant = ref(0)
+
 // Use useAsyncData with client-side fetching for faster initial page load
 const {
   data: championData,
@@ -156,28 +163,57 @@ function fetchChampionData() {
         />
 
         <div id="champion-content">
-          <ChampionTitle
-            v-if="championData.gameCount > 0 && lane"
-            id="champion-title"
-            :champion-id="championId"
-            :winrate="lane.winrate || 0"
-            :pickrate="lane.pickrate || 0"
-            :game-count="lane.count || 0"
-          />
+          <div class="champion-header">
+            <ChampionTitle
+              v-if="championData.gameCount > 0 && lane"
+              id="champion-title"
+              :champion-id="championId"
+              :winrate="lane.winrate || 0"
+              :pickrate="lane.pickrate || 0"
+              :game-count="lane.count || 0"
+            />
+            <SummonerSpells v-if="lane" :summoner-spells="lane.summonerSpells" />
+          </div>
+
           <ClientOnly>
             <LazyBuildViewer
-              v-if="state == 'build' && championData.gameCount > 0 && lane?.runes && lane?.builds"
+              v-if="state == 'build' && championData.gameCount > 0 && lane?.builds"
               style="margin: auto; margin-top: 40px"
-              :runes="lane.runes"
               :builds="lane.builds"
             />
           </ClientOnly>
           <ClientOnly>
-            <LazyItemTree
-              v-if="state == 'alternatives' && championData.gameCount > 0 && lane?.builds?.tree"
-              style="margin: auto; margin-top: 40px; width: fit-content"
-              :tree="lane.builds.tree"
-            />
+            <div
+              v-if="state == 'alternatives' && championData.gameCount > 0 && lane && lane.builds"
+              style="
+                margin: auto;
+                margin-top: 40px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 20px;
+              "
+            >
+              <div style="display: flex">
+                <LazyBuildVariantSelector
+                  v-for="(build, i) in lane.builds"
+                  :key="i"
+                  :keystone-id="build.runeKeystone"
+                  :item-id="build.items.children[0].data"
+                  :keystore="perks"
+                  :item-map="itemMap"
+                  :pickrate="build.pickrate"
+                  :selected="selectedAltVariant == i"
+                  :index="i"
+                  @select="selectedAltVariant = i"
+                />
+              </div>
+              <LazyItemTree
+                v-if="lane.builds[selectedAltVariant]?.items"
+                style="width: fit-content"
+                :tree="lane.builds[selectedAltVariant].items"
+              />
+            </div>
           </ClientOnly>
           <ClientOnly>
             <LazyMatchupSection
@@ -292,6 +328,15 @@ function fetchChampionData() {
   background-color: #45a049;
 }
 
+/* Champion header layout */
+.champion-header {
+  display: flex;
+  align-items: center;
+  margin: auto;
+  width: fit-content;
+  gap: 40px;
+}
+
 @media only screen and (max-width: 650px) {
   #champion-content {
     margin: auto;
@@ -300,7 +345,18 @@ function fetchChampionData() {
   #champion-title {
     margin: auto;
   }
+
+  .champion-header {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .layout-selector {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
 }
+
 @media only screen and (max-width: 1200px) {
   #alias-content-wrapper {
     flex-direction: column;