vhaudiquet/buildpath
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Lint and format
Some checks failed
pipeline / lint-and-format (push) Failing after 56s
Details
pipeline / build-and-push-images (push) Has been skipped
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2026-01-21 00:59:23 +01:00
parent 353baa6267
commit 3fc52205f6
53 changed files with 8505 additions and 2048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
frontend/components/rune/Page.vue
View File

@@ -1,116 +1,153 @@
<script setup lang="ts">
const props = defineProps<{
primaryStyleId: number
secondaryStyleId: number
selectionIds: Array<number>
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:[]})
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 { 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)
for (const 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()})
const { 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
}
for (const 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 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 class="rune-slot">
<NuxtImg
class="rune-style-img"
style="margin: auto"
:src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)"
/>
</div>
<div v-for="slot in primaryStyle.slots.slice(0, 1)" class="rune-slot">
<NuxtImg
v-for="perk in slot.perks"
width="48"
:class="
'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')
"
:src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
/>
</div>
<div v-for="slot in primaryStyle.slots.slice(1, 4)" class="rune-slot">
<NuxtImg
v-for="perk in slot.perks"
width="48"
: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-spacer-bar"/>
<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)">
<div class="rune-slot">
<img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" >
</div>
<div v-for="slot in secondaryStyle.slots.slice(1, 4)" class="rune-slot">
<NuxtImg
v-for="perk in slot.perks"
width="48"
: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>
</div>
</template>
<style>
.rune-holder {
/* align-content: end; */
justify-content: center;
/* 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;
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;
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%;
max-width: 100%;
overflow: hidden;
filter: grayscale(1);
border: 1px var(--color-on-surface) solid;
border-radius: 50%;
}
.rune-keystone {
border: none;
border: none;
}
.rune-activated {
filter: none;
filter: none;
}
.rune-spacer-bar {
margin-left: 20px;
margin-right: 20px;
border: 1px var(--color-on-surface) solid;
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;
}
.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>
</style>