Components refactor (big)

2024-12-05 00:02:31 +01:00
parent 07daa05772
commit 67d6dd5a1a
10 changed files with 73 additions and 54 deletions
--- a/frontend/components/rune/Selector.vue
+++ b/frontend/components/rune/Selector.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+const props = defineProps<{
+    runes: Array<{count: number, 
+        primaryStyle: number, 
+        secondaryStyle: number, 
+        selections: Array<number>, 
+        pickrate: number}>
+}>()
+
+const currentlySelectedPage = ref(0)
+const primaryStyles : Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
+const secondaryStyles : Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
+const keystoneIds : Ref<Array<number>> = ref(Array(props.runes.length))
+
+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 } : PerkStylesResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
+watch(() => props.runes, (newRunes, oldRunes) => {
+    currentlySelectedPage.value = 0
+    primaryStyles.value = Array(props.runes.length)
+    secondaryStyles.value = Array(props.runes.length)
+    keystoneIds.value = Array(props.runes.length)
+
+    refreshStylesKeystones()
+})
+
+function refreshStylesKeystones() {
+    for(let style of stylesData.value.styles) {
+        for(let rune of props.runes) {
+            if(style.id == rune.primaryStyle) {
+                primaryStyles.value[props.runes.indexOf(rune)] = style
+                for(let perk of style.slots[0].perks) {
+                    if(rune.selections.includes(perk)) {
+                        keystoneIds.value[props.runes.indexOf(rune)] = perk
+                    }
+                }
+            }
+            if(style.id == rune.secondaryStyle) {
+                secondaryStyles.value[props.runes.indexOf(rune)] = style
+            }
+        }
+    }
+}
+
+refreshStylesKeystones()
+
+function runeSelect(index: number) {
+    currentlySelectedPage.value = index
+}
+
+</script>
+
+<template>
+    <div style="width: fit-content;">
+    <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 class="rs-styles-container">
+        <NuxtImg class="rs-style-img" v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
+            style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
+        <NuxtImg class="rs-style-img" v-if="keystoneIds[i] != null && keystoneIds[i] != undefined" 
+            width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(keystoneIds[i]).iconPath))"/>
+        <NuxtImg class="rs-style-img" v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
+            style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
+        </div>
+        <h3 class="rs-pickrate">{{ (runes[i].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);
+}
+.rs-styles-container {
+    display: flex; 
+    margin-top: 20px;
+}
+.rs-pickrate {
+    text-align: center; 
+    margin-top: 10px;
+}
+@media only screen and (max-width: 650px) {
+    .rune-selector-entry {
+        width: 100px;
+        height: 60px;
+
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+    .rs-styles-container {
+        margin-top: 17px;
+    }
+    .rs-pickrate {
+        margin-top: 20px;
+    }
+    .rs-style-img {
+        width: 24px;
+        height: 24px;
+    }
+}
+</style>