Initial commit

2024-11-21 19:39:22 +01:00
commit 56d1075459
32 changed files with 10966 additions and 0 deletions
--- a/frontend/components/RunePage.vue
+++ b/frontend/components/RunePage.vue
@@ -0,0 +1,107 @@
+<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: []
+    }
+})
+
+const primaryStyle = ref({slots:[]})
+const secondaryStyle = ref({slots:[]})
+
+let { data: perks_data } = await useFetch("https://raw.communitydragon.org/latest/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")
+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"><img style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
+        <div class="rune-slot" v-for="slot in primaryStyle.slots.slice(0, 1)">
+            <img 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)">
+            <img 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)">
+            <img 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;
+}
+</style>