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>