Initial commit

frontend/components/RuneSelector.vue

@@ -0,0 +1,82 @@
+<script setup>
+const props = defineProps({
+    // Runes styles: domination, precision, sorcery, inspiration, resolve
+    runes: {
+    type: Array,
+    required: true
+    },
+})
+
+const runes = props.runes
+
+const currentlySelectedPage = ref(runes[0])
+const primaryStyles = ref([])
+const secondaryStyles = ref([])
+const keystoneIds = ref([])
+
+let { data: perks_data } = 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")
+for(let style of stylesData.value.styles) {
+    for(let rune of runes) {
+    if(style.id == rune.primaryStyle) {
+        rune.primaryStyleValue = style
+        primaryStyles.value.push(style)
+        for(let perk of style.slots[0].perks) {
+            if(rune.selections.includes(perk)) {
+                rune.keystoneValue = perk
+                keystoneIds.value.push(perk)
+            }
+        }
+    }
+    if(style.id == rune.secondaryStyle) {
+        secondaryStyles.value.push(style)
+        rune.secondaryStyleValue = style
+    }
+    }
+}
+
+function runeSelect(rune) {
+    currentlySelectedPage.value = rune
+}
+
+</script>
+
+<template>
+    <div style="width: fit-content;">
+    <RunePage style="margin:auto; width: fit-content;" :primaryStyleId="currentlySelectedPage.primaryStyle" :secondaryStyleId="currentlySelectedPage.secondaryStyle" :selectionIds="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 style="display: flex; margin-top: 20px;">
+        <img style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.primaryStyleValue.iconPath)" />
+        <img width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(rune.keystoneValue).iconPath))"/>
+        <img style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.secondaryStyleValue.iconPath)" />
+        </div>
+        <h3 style="text-align: center; margin-top: 10px;">{{ (rune.pickrate * 100).toFixed(2) }}% pick.</h3>
+    </div>
+    </div>
+    </div>
+</template>
+
+<style>
+.rune-selector-entry {
+    width: 200px;
+    height: 120px;
+
+    margin-left: 10px;
+    margin-right: 10px;
+
+    border-radius: 8%;
+    border: 1px solid var(--color-on-surface);
+}
+.rune-selector-entry:hover {
+    cursor: pointer;
+}
+.rune-selector-entry-selected {
+    background-color: var(--color-surface-darker);
+}
+</style>