Lane-dependant stats (fix #5)

frontend/components/RuneSelector.vue

@@ -7,8 +7,6 @@ const props = defineProps<{
         pickrate: number}>
 }>()
 
-const runes = props.runes
-
 const currentlySelectedPage = ref(0)
 const primaryStyles : Ref<Array<PerkStyle>> = ref([])
 const secondaryStyles : Ref<Array<PerkStyle>> = ref([])
@@ -21,22 +19,35 @@ for(let perk of perks_data.value) {
 }
 
 let { data: stylesData } : PerkStylesResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
-for(let style of stylesData.value.styles) {
-    for(let rune of runes) {
-        if(style.id == rune.primaryStyle) {
-            primaryStyles.value.push(style)
-            for(let perk of style.slots[0].perks) {
-                if(rune.selections.includes(perk)) {
-                    keystoneIds.value.push(perk)
+watch(() => props.runes, (newRunes, oldRunes) => {
+    currentlySelectedPage.value = 0
+    primaryStyles.value = []
+    secondaryStyles.value = []
+    keystoneIds.value = []
+
+    refreshStylesKeystones()
+})
+
+function refreshStylesKeystones() {
+    for(let style of stylesData.value.styles) {
+        for(let rune of props.runes) {
+            if(style.id == rune.primaryStyle) {
+                primaryStyles.value.push(style)
+                for(let perk of style.slots[0].perks) {
+                    if(rune.selections.includes(perk)) {
+                        keystoneIds.value.push(perk)
+                    }
                 }
             }
-        }
-        if(style.id == rune.secondaryStyle) {
-            secondaryStyles.value.push(style)
+            if(style.id == rune.secondaryStyle) {
+                secondaryStyles.value.push(style)
+            }
         }
     }
 }
 
+refreshStylesKeystones()
+
 function runeSelect(index: number) {
     currentlySelectedPage.value = index
 }
@@ -45,8 +56,12 @@ function runeSelect(index: number) {
 
 <template>
     <div style="width: fit-content;">
-    <RunePage style="margin:auto; width: fit-content;" :primaryStyleId="runes[currentlySelectedPage].primaryStyle" :secondaryStyleId="runes[currentlySelectedPage].secondaryStyle" :selectionIds="runes[currentlySelectedPage].selections" />
-    <div style="display: flex; margin-top: 20px;">
+    <RunePage v-if="runes[currentlySelectedPage] != undefined && runes[currentlySelectedPage] != null" 
+        style="margin:auto; width: fit-content;" 
+        :primaryStyleId="runes[currentlySelectedPage].primaryStyle" 
+        :secondaryStyleId="runes[currentlySelectedPage].secondaryStyle" 
+        :selectionIds="runes[currentlySelectedPage].selections" />
+    <div style="display: flex; margin-top: 20px; justify-content: center;">
     <div v-for="(_, i) in runes" :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(i)">
         <div style="display: flex; margin-top: 20px;">
         <NuxtImg v-if="primaryStyles[i] != null && primaryStyles[i] != undefined"