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/Page.vue
+++ b/frontend/components/rune/Page.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+const props = defineProps<{
+    primaryStyleId: number
+    secondaryStyleId: number
+    selectionIds: Array<number>
+}>()
+
+const primaryStyle : Ref<PerkStyle> = ref({id:0, name:"", iconPath:"", slots:[]})
+const secondaryStyle : Ref<PerkStyle> = ref({id:0, name:"", iconPath:"", slots:[]})
+
+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.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)) {
+            primaryStyle.value = style
+        }
+        if(style.id == (props.secondaryStyleId)) {
+            secondaryStyle.value = style
+        }
+    }
+}
+refreshStyles()
+
+</script>
+
+<template>
+    <div style="display: flex;">
+    <div class="rune-holder">
+        <div class="rune-slot"><NuxtImg class="rune-style-img" style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
+        <div class="rune-slot" v-for="slot in primaryStyle.slots.slice(0, 1)">
+            <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
+        </div>    
+        <div class="rune-slot" v-for="slot in primaryStyle.slots.slice(1, 4)">
+            <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
+        </div>
+    </div>
+    <div class="rune-spacer-bar"></div>
+    <div class="rune-holder" style="align-content: end">
+        <div class="rune-slot"><img style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" /></div>
+        <div class="rune-slot" v-for="slot in secondaryStyle.slots.slice(1, 4)">
+            <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
+        </div>
+        <!-- <div class="rune-slot mini" v-for="slot in primaryStyle.slots.slice(4, 7)">
+            <img width="32" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
+        </div> -->
+    </div>
+        
+    </div>
+</template>
+
+<style>
+.rune-holder {
+    /* align-content: end; */
+    justify-content: center;
+}
+.rune-slot {
+    width: calc(48*3px + 60px);
+    display: flex;
+    justify-content: space-between;
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+.mini {
+    margin: auto;
+    width: calc(32*3px + 60px);
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.rune-img {
+    max-width: 100%;
+    overflow: hidden;
+    filter: grayscale(1);
+    border: 1px var(--color-on-surface) solid;
+    border-radius:50%;
+}
+.rune-keystone {
+    border: none;
+}
+.rune-activated {
+    filter: none;
+}
+.rune-spacer-bar {
+    margin-left: 20px;
+    margin-right: 20px;
+    border: 1px var(--color-on-surface) solid;
+}
+
+@media only screen and (max-width: 650px) {
+    .rune-slot {
+        width: calc(24*3px + 30px);
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .rune-img {
+        width: 24px;
+        height: 24px;
+    }
+    .rune-style-img {
+        width: 24px;
+        height: 24px;
+    }
+    .rune-spacer-bar {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}
+</style>
--- 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>