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

Use NuxtImg
All checks were successful
pipeline / build-and-push-images (push) Successful in 36s
Details
pipeline / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-11-25 00:55:02 +01:00
parent eb31fe109f
commit a874fd6c21
8 changed files with 586 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/ChampionSelector.vue
View File

@@ -28,7 +28,7 @@ async function submit() {
<div class="champion-container" style="margin-top: 20px; margin-bottom: 20px;">
<NuxtLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
<div class="champion-img-container">
<img class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
</div>
</NuxtLink>
</div>

2
frontend/components/ChampionTitle.vue
View File

@@ -32,7 +32,7 @@ const championDescription = championData.value.title
<template>
<div style="display: flex;">
<img width="160" height="160" :src="CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/' + championId + '.png'"/>
<NuxtImg width="160" height="160" :src="CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/' + championId + '.png'"/>
<div style="margin-left: 15px; margin-top: 5px;">
<h1>{{ championName }}</h1>
<h3 style="margin-top: 5px">{{ championDescription }}</h3>

8
frontend/components/ItemViewer.vue
View File

@@ -20,7 +20,7 @@ for(let item of items.value) {
<h2 class="item-box-title">start</h2>
<div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.start" >
<img v-if="item.data != null && item.data != undefined"
<NuxtImg v-if="item.data != null && item.data != undefined"
style="border: 1px solid var(--color-on-surface);"
width="64" height="64" :alt="item.data"
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
@@ -35,7 +35,7 @@ for(let item of items.value) {
</div>
<div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
<img v-if="item.data != null && item.data != undefined"
<NuxtImg v-if="item.data != null && item.data != undefined"
style="border: 1px solid var(--color-on-surface);"
width="64" height="64" :alt="item.data"
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
@@ -53,7 +53,7 @@ for(let item of items.value) {
<h2 class="item-box-title">boots</h2>
<div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
<img v-if="item.data != null && item.data != undefined"
<NuxtImg v-if="item.data != null && item.data != undefined"
style="border: 1px solid var(--color-on-surface);"
width="64" height="64" :alt="item.data"
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
@@ -66,7 +66,7 @@ for(let item of items.value) {
<h2 class="item-box-title">late game</h2>
<div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.lateGame.slice(0, 7)" >
<img v-if="item.data != null && item.data != undefined"
<NuxtImg v-if="item.data != null && item.data != undefined"
class="item-img" width="64" height="64" :alt="item.data"
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>

8
frontend/components/RunePage.vue
View File

@@ -46,19 +46,19 @@ refreshStyles()
<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"><NuxtImg 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)"/>
<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)">
<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)"/>
<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)">
<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)"/>
<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)"/>

6
frontend/components/RuneSelector.vue
View File

@@ -52,11 +52,11 @@ function runeSelect(rune) {
<div style="display: flex; margin-top: 20px;">
<div v-for="rune in runes" :class="'rune-selector-entry ' + (rune == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(rune)">
<div style="display: flex; margin-top: 20px;">
<img v-if="rune.primaryStyleValue != null && rune.primaryStyleValue != undefined"
<NuxtImg v-if="rune.primaryStyleValue != null && rune.primaryStyleValue != undefined"
style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.primaryStyleValue.iconPath)" />
<img v-if="rune.keystoneValue != null && rune.keystoneValue != undefined"
<NuxtImg v-if="rune.keystoneValue != null && rune.keystoneValue != undefined"
width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(rune.keystoneValue).iconPath))"/>
<img v-if="rune.secondaryStyleValue != null && rune.secondaryStyleValue != undefined"
<NuxtImg v-if="rune.secondaryStyleValue != null && rune.secondaryStyleValue != undefined"
style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.secondaryStyleValue.iconPath)" />
</div>
<h3 style="text-align: center; margin-top: 10px;">{{ (rune.pickrate * 100).toFixed(2) }}% pick.</h3>