More typescript :)

frontend/components/RunePage.vue

@@ -1,40 +1,29 @@
-<script setup>
-const props = defineProps({
-    // Runes styles: domination, precision, sorcery, inspiration, resolve
-    primaryStyleId: {
-    type: String,
-    required: true
-    },
-    secondaryStyleId: {
-        type:String,
-        required: true
-    },
-    selectionIds: {
-        type:Array,
-        required: false,
-        default: []
-    }
-})
+<script setup lang="ts">
+const props = defineProps<{
+    primaryStyleId: number
+    secondaryStyleId: number
+    selectionIds: Array<number>
+}>()
 
-const primaryStyle = ref({slots:[]})
-const secondaryStyle = ref({slots:[]})
+const primaryStyle : Ref<PerkStyle> = ref({id:0, name:"", iconPath:"", 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
         }
     }