100 lines
1.9 KiB
Vue
100 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
|
|
|
interface ItemData {
|
|
data: number
|
|
count: number
|
|
}
|
|
|
|
const props = defineProps<{
|
|
label: string
|
|
items: Array<ItemData>
|
|
itemMap: Map<number, Item>
|
|
totalCount: number
|
|
maxItems?: number
|
|
}>()
|
|
|
|
const maxItems = computed(() => props.maxItems ?? props.items.length)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="item-row">
|
|
<span class="item-row-label">{{ label }}</span>
|
|
<div class="item-row-content">
|
|
<div v-for="item in items.slice(0, maxItems)" :key="item.data" class="item-cell">
|
|
<NuxtImg
|
|
v-if="itemMap.get(item.data)"
|
|
class="item-img"
|
|
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data)!.iconPath)"
|
|
/>
|
|
<div v-else class="item-placeholder" />
|
|
<span class="item-pickrate">{{ ((item.count / totalCount) * 100).toFixed(0) }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.item-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.item-row-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--color-on-surface);
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.item-row-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.item-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-img {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
|
|
.item-placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-surface);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
|
|
.item-pickrate {
|
|
font-size: 0.65rem;
|
|
color: var(--color-on-surface);
|
|
opacity: 0.6;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* Responsive: Mobile */
|
|
@media only screen and (max-width: 900px) {
|
|
.item-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.item-placeholder {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
</style>
|