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

feat/frontend: add tooltips for runes
All checks were successful
pipeline / lint-and-format (push) Successful in 4m18s
Details
pipeline / build-and-push-images (push) Successful in 1m21s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2026-04-30 13:35:28 +02:00
parent a467046c55
commit 686962b678
4 changed files with 522 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
import type { PerkStyle, Perk } from '~/types/cdragon'
const props = defineProps<{
@@ -59,14 +60,13 @@ refreshStyles()
:key="slotIndex"
class="rune-slot"
>
<NuxtImg
v-for="perk in slot.perks"
:key="perk"
width="48"
:class="
'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')
"
:src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
<RuneIcon
v-for="perkId in slot.perks"
:key="perkId"
:perk="perks.get(perkId)"
:size="48"
:is-active="props.selectionIds.includes(perkId)"
:is-keystone="true"
/>
</div>
<div
@@ -74,12 +74,12 @@ refreshStyles()
:key="slotIndex"
class="rune-slot"
>
<NuxtImg
v-for="perk in slot.perks"
:key="perk"
width="48"
:class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
:src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
<RuneIcon
v-for="perkId in slot.perks"
:key="perkId"
:perk="perks.get(perkId)"
:size="48"
:is-active="props.selectionIds.includes(perkId)"
/>
</div>
</div>
@@ -93,17 +93,14 @@ refreshStyles()
:key="slotIndex"
class="rune-slot"
>
<NuxtImg
v-for="perk in slot.perks"
:key="perk"
width="48"
:class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
:src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
<RuneIcon
v-for="perkId in slot.perks"
:key="perkId"
:perk="perks.get(perkId)"
:size="48"
:is-active="props.selectionIds.includes(perkId)"
/>
</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>
@@ -126,19 +123,6 @@ refreshStyles()
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;
@@ -151,10 +135,6 @@ refreshStyles()
margin-top: 20px;
margin-bottom: 20px;
}
.rune-img {
width: 24px;
height: 24px;
}
.rune-style-img {
width: 24px;
height: 24px;