More typescript :)

frontend/components/RunePage.vue

@@ -1,40 +1,29 @@
-<script setup>
+<script setup lang="ts">
-const props = defineProps({
+const props = defineProps<{
-    // Runes styles: domination, precision, sorcery, inspiration, resolve
+    primaryStyleId: number
-    primaryStyleId: {
+    secondaryStyleId: number
-    type: String,
+    selectionIds: Array<number>
-    required: true
+}>()
-    },
-    secondaryStyleId: {
-        type:String,
-        required: true
-    },
-    selectionIds: {
-        type:Array,
-        required: false,
-        default: []
-    }
-})
 
-const primaryStyle = ref({slots:[]})
+const primaryStyle : Ref<PerkStyle> = ref({id:0, name:"", iconPath:"", slots:[]})
-const secondaryStyle = ref({slots:[]})
+const secondaryStyle : Ref<PerkStyle> = ref({id:0, name:"", iconPath:"", slots:[]})
 
-let { data: perks_data } = await useFetch("https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/perks.json")
+let { data: perks_data } : PerksResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perks.json")
 const perks = reactive(new Map())
 for(let perk of perks_data.value) {
     perks.set(perk.id, perk)
 }
 
-let { data: stylesData } = await useFetch("https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
+let { data: stylesData } : PerkStylesResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
 watch(() => props.primaryStyleId, async (newP, oldP) => {refreshStyles()})
 watch(() => props.secondaryStyleId, async (newP, oldP) => {refreshStyles()})
 
 function refreshStyles() {
     for(let style of stylesData.value.styles) {
-        if(style.id == props.primaryStyleId) {
+        if(style.id == (props.primaryStyleId)) {
             primaryStyle.value = style
         }
-        if(style.id == props.secondaryStyleId) {
+        if(style.id == (props.secondaryStyleId)) {
             secondaryStyle.value = style
         }
     }

frontend/components/RuneSelector.vue

@@ -1,65 +1,62 @@
-<script setup>
+<script setup lang="ts">
-const props = defineProps({
+const props = defineProps<{
-    // Runes styles: domination, precision, sorcery, inspiration, resolve
+    runes: Array<{count: number, 
-    runes: {
+        primaryStyle: number, 
-    type: Array,
+        secondaryStyle: number, 
-    required: true
+        selections: Array<number>, 
-    },
+        pickrate: number}>
-})
+}>()
 
 const runes = props.runes
 
-const currentlySelectedPage = ref(runes[0])
+const currentlySelectedPage = ref(0)
-const primaryStyles = ref([])
+const primaryStyles : Ref<Array<PerkStyle>> = ref([])
-const secondaryStyles = ref([])
+const secondaryStyles : Ref<Array<PerkStyle>> = ref([])
-const keystoneIds = ref([])
+const keystoneIds : Ref<Array<number>> = ref([])
 
-let { data: perks_data } = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perks.json")
+let { data: perks_data } : PerksResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perks.json")
 const perks = reactive(new Map())
 for(let perk of perks_data.value) {
     perks.set(perk.id, perk)
 }
 
-let { data: stylesData } = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
+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) {
+        if(style.id == rune.primaryStyle) {
-        rune.primaryStyleValue = style
+            primaryStyles.value.push(style)
-        primaryStyles.value.push(style)
+            for(let perk of style.slots[0].perks) {
-        for(let perk of style.slots[0].perks) {
+                if(rune.selections.includes(perk)) {
-            if(rune.selections.includes(perk)) {
+                    keystoneIds.value.push(perk)
-                rune.keystoneValue = perk
+                }
-                keystoneIds.value.push(perk)
             }
         }
-    }
+        if(style.id == rune.secondaryStyle) {
-    if(style.id == rune.secondaryStyle) {
+            secondaryStyles.value.push(style)
-        secondaryStyles.value.push(style)
+        }
-        rune.secondaryStyleValue = style
-    }
     }
 }
 
-function runeSelect(rune) {
+function runeSelect(index: number) {
-    currentlySelectedPage.value = rune
+    currentlySelectedPage.value = index
 }
 
 </script>
 
 <template>
     <div style="width: fit-content;">
-    <RunePage style="margin:auto; width: fit-content;" :primaryStyleId="currentlySelectedPage.primaryStyle" :secondaryStyleId="currentlySelectedPage.secondaryStyle" :selectionIds="currentlySelectedPage.selections" />
+    <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;">
-    <div v-for="rune in runes" :class="'rune-selector-entry ' + (rune == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(rune)">
+    <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="rune.primaryStyleValue != null && rune.primaryStyleValue != undefined" 
+        <NuxtImg v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
-            style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.primaryStyleValue.iconPath)" />
+            style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
-        <NuxtImg v-if="rune.keystoneValue != null && rune.keystoneValue != undefined" 
+        <NuxtImg v-if="keystoneIds[i] != null && keystoneIds[i] != undefined" 
-            width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(rune.keystoneValue).iconPath))"/>
+            width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(keystoneIds[i]).iconPath))"/>
-        <NuxtImg v-if="rune.secondaryStyleValue != null && rune.secondaryStyleValue != undefined" 
+        <NuxtImg v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
-            style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.secondaryStyleValue.iconPath)" />
+            style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
         </div>
-        <h3 style="text-align: center; margin-top: 10px;">{{ (rune.pickrate * 100).toFixed(2) }}% pick.</h3>
+        <h3 style="text-align: center; margin-top: 10px;">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
     </div>
     </div>
     </div>

frontend/types/cdragon.ts

@@ -22,6 +22,23 @@ declare global {
     type Item = {
         id: number
     }
+    type PerksResponse = {
+        data: Ref<Array<Perk>>
+    }
+    type Perk = {
+        id: number
+        name: string
+        iconPath: string
+    }
+    type PerkStylesResponse = {
+        data: Ref<{styles: Array<PerkStyle>}>
+    }
+    type PerkStyle = {
+        id: number
+        name: string
+        iconPath: string
+        slots: Array<{perks:Array<number>}>
+    }
 }
 
 export {}