frontend: add item tooltip, refactor with itemicon component
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
--color-surface: #312e2c;
|
||||
--color-on-surface: #b7b8e1;
|
||||
--color-surface-darker: #1f1d1c;
|
||||
--color-gold: #ffd700;
|
||||
}
|
||||
|
||||
/* Font setting */
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
||||
|
||||
interface ItemData {
|
||||
data: number
|
||||
count: number
|
||||
@@ -21,15 +19,17 @@ const maxItems = computed(() => props.maxItems ?? props.items.length)
|
||||
<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
|
||||
<template v-for="item in items.slice(0, maxItems)" :key="item.data">
|
||||
<ItemIcon
|
||||
v-if="itemMap.get(item.data)"
|
||||
class="item-img"
|
||||
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data)!.iconPath)"
|
||||
:item="itemMap.get(item.data)!"
|
||||
:show-pickrate="true"
|
||||
:pickrate="item.count / totalCount"
|
||||
:size="48"
|
||||
class="item-cell"
|
||||
/>
|
||||
<div v-else class="item-placeholder" />
|
||||
<span class="item-pickrate">{{ ((item.count / totalCount) * 100).toFixed(0) }}%</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -56,19 +56,6 @@ const maxItems = computed(() => props.maxItems ?? props.items.length)
|
||||
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;
|
||||
@@ -76,24 +63,4 @@ const maxItems = computed(() => props.maxItems ?? props.items.length)
|
||||
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>
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
title: string
|
||||
bootsFirst?: number
|
||||
sizePerc?: number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:style="
|
||||
sizePerc != undefined && sizePerc != null ? 'max-height: ' + sizePerc * 600 + 'px;' : ''
|
||||
"
|
||||
class="item-box"
|
||||
>
|
||||
<div
|
||||
style="display: flex; flex-direction: column; justify-content: center; align-items: center"
|
||||
>
|
||||
<h2 class="item-box-title">{{ title }}</h2>
|
||||
<h5 v-if="bootsFirst != undefined && bootsFirst != null" style="margin: auto">
|
||||
({{ (bootsFirst * 100).toFixed(2) }}%)
|
||||
</h5>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item-box {
|
||||
border: 1px solid var(--color-on-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
margin: 10px;
|
||||
|
||||
width: fit-content;
|
||||
height: 600px;
|
||||
}
|
||||
.item-box-title {
|
||||
font-variant: small-caps;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.item-box {
|
||||
width: 95%;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
frontend/components/item/ItemIcon.vue
Normal file
137
frontend/components/item/ItemIcon.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<script setup lang="ts">
|
||||
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
||||
|
||||
interface Props {
|
||||
item: Item
|
||||
size?: number
|
||||
showPickrate?: boolean
|
||||
pickrate?: number
|
||||
class?: string
|
||||
}
|
||||
|
||||
// Expose the icon element for external use (e.g., arrow drawing)
|
||||
const iconElement = ref<HTMLElement | null>(null)
|
||||
|
||||
defineExpose({
|
||||
iconElement
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 48,
|
||||
showPickrate: false,
|
||||
pickrate: 0,
|
||||
class: ''
|
||||
})
|
||||
|
||||
// Tooltip state - encapsulated in this component
|
||||
const tooltipState = reactive({
|
||||
show: false,
|
||||
item: null as Item | null,
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
|
||||
const handleMouseEnter = (event: MouseEvent) => {
|
||||
tooltipState.item = props.item
|
||||
|
||||
// Calculate optimal position to keep tooltip within viewport
|
||||
// Don't estimate height - position based on cursor location
|
||||
const tooltipWidth = 300 // Maximum width from CSS
|
||||
const padding = 10 // Minimum padding from edges
|
||||
const offset = 15 // Distance from cursor
|
||||
|
||||
// Get viewport dimensions
|
||||
const viewportWidth = window.innerWidth
|
||||
const viewportHeight = window.innerHeight
|
||||
|
||||
// Right edge detection: if we're in the right half, position to the left
|
||||
let x = event.clientX + offset
|
||||
if (event.clientX + tooltipWidth + offset > viewportWidth - padding) {
|
||||
x = event.clientX - tooltipWidth - offset
|
||||
// Clamp if still off-screen
|
||||
if (x < padding) {
|
||||
x = padding
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom edge detection: if we're in the bottom half, position above
|
||||
// Use a smaller offset for vertical to keep it close
|
||||
let y = event.clientY + offset
|
||||
if (event.clientY > viewportHeight * 0.7) {
|
||||
y = event.clientY - offset - 200 // Position ~200px above
|
||||
// Clamp if too high
|
||||
if (y < padding) {
|
||||
y = padding
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure Y is within reasonable bounds
|
||||
y = Math.min(y, viewportHeight - padding)
|
||||
|
||||
tooltipState.x = x
|
||||
tooltipState.y = y
|
||||
tooltipState.show = true
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
tooltipState.show = false
|
||||
tooltipState.item = null
|
||||
}
|
||||
|
||||
const itemIconPath = computed(() => CDRAGON_BASE + mapPath(props.item.iconPath))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="item-icon-wrapper" @mouseleave="handleMouseLeave">
|
||||
<div
|
||||
ref="iconElement"
|
||||
class="item-icon"
|
||||
:class="props.class"
|
||||
:style="{ width: size + 'px', height: size + 'px' }"
|
||||
@mouseenter="handleMouseEnter"
|
||||
>
|
||||
<NuxtImg :src="itemIconPath" :alt="item.name || 'Item'" class="item-img" />
|
||||
</div>
|
||||
|
||||
<span v-if="showPickrate" class="item-pickrate"> {{ (pickrate * 100).toFixed(0) }}% </span>
|
||||
|
||||
<ItemTooltip
|
||||
:show="tooltipState.show"
|
||||
:item="tooltipState.item"
|
||||
:x="tooltipState.x"
|
||||
:y="tooltipState.y"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item-icon-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-on-surface);
|
||||
overflow: hidden;
|
||||
cursor: help;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-pickrate {
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-on-surface);
|
||||
opacity: 0.6;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
349
frontend/components/item/ItemTooltip.vue
Normal file
349
frontend/components/item/ItemTooltip.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<script setup lang="ts">
|
||||
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
||||
|
||||
interface Props {
|
||||
item: Item | null
|
||||
show: boolean
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// Parse description and convert to styled HTML
|
||||
const formatDescription = (description?: string) => {
|
||||
if (!description) return ''
|
||||
|
||||
// Replace <br> and other structural tags
|
||||
const html = description
|
||||
.replace(/<br\s*\/?>/gi, '<br>')
|
||||
.replace(/<br><br><br>/gi, '') // Remove triple breaks
|
||||
.replace(/<br><br>/gi, '') // Remove double breaks
|
||||
.replace(/<mainText>/gi, '')
|
||||
.replace(/<\/mainText>/gi, '')
|
||||
.replace(/<stats>/gi, '<div class="tooltip-stats">')
|
||||
.replace(/<\/stats>/gi, '</div>')
|
||||
.replace(/<passive>/gi, '<span class="tag-passive">')
|
||||
.replace(/<\/passive>/gi, '</span>:')
|
||||
.replace(/<active>/gi, '<span class="tag-active">')
|
||||
.replace(/<\/active>/gi, '</span>')
|
||||
.replace(/<keyword>/gi, '<span class="tag-keyword">')
|
||||
.replace(/<\/keyword>/gi, '</span>')
|
||||
.replace(/<attention>/gi, '<span class="stat-highlight">')
|
||||
.replace(/<\/attention>/gi, '</span>')
|
||||
.replace(/<keywordMajor>/gi, '<span class="tag-keyword-major">')
|
||||
.replace(/<\/keywordMajor>/gi, '</span>')
|
||||
.replace(/<keywordStealth>/gi, '<span class="tag-keyword-stealth">')
|
||||
.replace(/<\/keywordStealth>/gi, '</span>')
|
||||
.replace(/<status>/gi, '<span class="tag-status">')
|
||||
.replace(/<\/status>/gi, '</span>')
|
||||
.replace(/<speed>/gi, '<span class="tag-speed">')
|
||||
.replace(/<\/speed>/gi, '</span>')
|
||||
.replace(/<scaleMana>/gi, '<span class="tag-scale-mana">')
|
||||
.replace(/<\/scaleMana>/gi, '</span>')
|
||||
.replace(/<scaleHealth>/gi, '<span class="tag-scale-health">')
|
||||
.replace(/<\/scaleHealth>/gi, '</span>')
|
||||
.replace(/<scaleAP>/gi, '<span class="tag-scale-ap">')
|
||||
.replace(/<\/scaleAP>/gi, '</span>')
|
||||
.replace(/<scaleAD>/gi, '<span class="tag-scale-ad">')
|
||||
.replace(/<\/scaleAD>/gi, '</span>')
|
||||
.replace(/<scaleArmor>/gi, '<span class="tag-scale-armor">')
|
||||
.replace(/<\/scaleArmor>/gi, '</span>')
|
||||
.replace(/<scaleMR>/gi, '<span class="tag-scale-mr">')
|
||||
.replace(/<\/scaleMR>/gi, '</span>')
|
||||
.replace(/<scaleLevel>/gi, '<span class="tag-scale-level">')
|
||||
.replace(/<\/scaleLevel>/gi, '</span>')
|
||||
.replace(/<spellName>/gi, '<span class="tag-spellname">')
|
||||
.replace(/<\/spellName>/gi, '</span>')
|
||||
.replace(/<unique>/gi, '<span class="tag-unique">UNIQUE</span>')
|
||||
.replace(/<\/unique>/gi, '')
|
||||
.replace(/<rarityMythic>/gi, '<span class="tag-rarity-mythic">Mythic</span>')
|
||||
.replace(/<\/rarityMythic>/gi, '')
|
||||
.replace(/<rarityLegendary>/gi, '<span class="tag-rarity-legendary">Legendary</span>')
|
||||
.replace(/<\/rarityLegendary>/gi, '')
|
||||
.replace(/<rarityGeneric>/gi, '<span class="tag-rarity-generic">Epic</span>')
|
||||
.replace(/<\/rarityGeneric>/gi, '')
|
||||
.replace(/<rules>/gi, '<div class="tag-rules">')
|
||||
.replace(/<\/rules>/gi, '</div>')
|
||||
.replace(/<flavorText>/gi, '<div class="tag-flavor">')
|
||||
.replace(/<\/flavorText>/gi, '</div>')
|
||||
.replace(/<li>/gi, '<div class="tag-list">')
|
||||
.replace(/<\/li>/gi, '</div>')
|
||||
.replace(/<font color='([^']+)'>/gi, '<span style="color: $1">')
|
||||
.replace(/<\/font>/gi, '</span>')
|
||||
.replace(/<b>/gi, '<strong>')
|
||||
.replace(/<\/b>/gi, '</strong>')
|
||||
.replace(/\[@@[^@]*@@\]/g, ' ') // Remove stat placeholders
|
||||
.trim()
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
const formattedDescription = computed(() =>
|
||||
props.item ? formatDescription(props.item.description) : ''
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="show && item"
|
||||
class="item-tooltip"
|
||||
:style="{
|
||||
left: x + 'px',
|
||||
top: y + 'px'
|
||||
}"
|
||||
@mouseenter.stop
|
||||
>
|
||||
<div class="tooltip-header">
|
||||
<NuxtImg class="tooltip-icon" :src="CDRAGON_BASE + mapPath(item.iconPath)" />
|
||||
<div class="tooltip-title">
|
||||
<h3>{{ item.name || 'Unknown Item' }}</h3>
|
||||
<span v-if="item.priceTotal" class="tooltip-gold"> {{ item.priceTotal }} Gold </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="item.plaintext" class="tooltip-plaintext">
|
||||
{{ item.plaintext }}
|
||||
</div>
|
||||
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="formattedDescription"
|
||||
class="tooltip-description"
|
||||
v-html="formattedDescription"
|
||||
></div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item-tooltip {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-on-surface);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
max-width: 300px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip-header {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tooltip-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-on-surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tooltip-title h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-on-surface);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tooltip-gold {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-gold);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tooltip-plaintext {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-on-surface);
|
||||
opacity: 0.8;
|
||||
margin-bottom: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-on-surface);
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Stats section */
|
||||
.tooltip-stats {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--color-on-surface-dim);
|
||||
}
|
||||
|
||||
.tooltip-stats :deep(.stat-highlight) {
|
||||
color: #ffcc00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Tag styles */
|
||||
.tooltip-description :deep(.tag-passive) {
|
||||
color: #4a9eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-active) {
|
||||
color: #ff6b6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-keyword) {
|
||||
color: #ffd700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-keyword-major) {
|
||||
color: #ff8c00;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-keyword-stealth) {
|
||||
color: #9b59b6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-status) {
|
||||
color: #e74c3c;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-speed),
|
||||
.tooltip-description :deep(.tag-scale-mana),
|
||||
.tooltip-description :deep(.tag-scale-health),
|
||||
.tooltip-description :deep(.tag-scale-ap),
|
||||
.tooltip-description :deep(.tag-scale-ad),
|
||||
.tooltip-description :deep(.tag-scale-armor),
|
||||
.tooltip-description :deep(.tag-scale-mr),
|
||||
.tooltip-description :deep(.tag-scale-level) {
|
||||
color: #3498db;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-healing),
|
||||
.tooltip-description :deep(.tag-health) {
|
||||
color: #2ecc71;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-shield) {
|
||||
color: #3498db;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-magic-damage) {
|
||||
color: #9b59b6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-physical-damage) {
|
||||
color: #e67e22;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-true-damage) {
|
||||
color: #c0392b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-onhit) {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
color: #3498db;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-spellname) {
|
||||
color: #1abc9c;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-unique) {
|
||||
color: #f39c12;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-rarity-mythic) {
|
||||
color: #ff5252;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-rarity-legendary) {
|
||||
color: #ff9800;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-rarity-generic) {
|
||||
color: #ffd54f;
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-rules) {
|
||||
margin-top: 8px;
|
||||
padding: 6px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-left: 2px solid var(--color-on-surface-dim);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-flavor) {
|
||||
margin-top: 10px;
|
||||
padding: 6px;
|
||||
background: rgba(74, 222, 255, 0.1);
|
||||
border-left: 2px solid #4a9eff;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.tooltip-description :deep(.tag-list) {
|
||||
margin: 4px 0;
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip-description strong {
|
||||
font-weight: 600;
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -12,20 +12,16 @@ const emit = defineEmits<{
|
||||
parentReady: []
|
||||
}>()
|
||||
|
||||
const { data: items, pending: itemsLoading } = useFetch<Array<{ id: number; iconPath: string }>>(
|
||||
'/api/cdragon/items',
|
||||
{
|
||||
lazy: true, // Don't block rendering
|
||||
server: false // Client-side only
|
||||
}
|
||||
)
|
||||
const { data: items, pending: itemsLoading } = useFetch<Array<Item>>('/api/cdragon/items', {
|
||||
lazy: true, // Don't block rendering
|
||||
server: false // Client-side only
|
||||
})
|
||||
|
||||
// Track image loading state
|
||||
const imagesLoaded = ref(false)
|
||||
const imageElement: Ref<HTMLImageElement | null> = ref(null)
|
||||
|
||||
// Create item map reactively
|
||||
const itemMap = reactive(new Map<number, { id: number; iconPath: string }>())
|
||||
const itemMap = reactive(new Map<number, Item>())
|
||||
watch(
|
||||
items,
|
||||
newItems => {
|
||||
@@ -39,15 +35,13 @@ watch(
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function getItemIconPath(itemId: number): string {
|
||||
const item = itemMap.get(itemId)
|
||||
return item ? CDRAGON_BASE + mapPath(item.iconPath) : ''
|
||||
}
|
||||
|
||||
const start: Ref<Element | null> = useTemplateRef('start')
|
||||
const startTreeItem = useTemplateRef('start')
|
||||
const arrows: Array<svgdomarrowsLinePath> = []
|
||||
const pendingChildMounts: Array<Element> = []
|
||||
|
||||
// Get the actual icon element for arrow drawing
|
||||
const startElement = computed(() => startTreeItem.value?.iconElement ?? null)
|
||||
|
||||
// Function to wait for an image to load
|
||||
function waitForImageLoad(imgElement: HTMLImageElement): Promise<void> {
|
||||
return new Promise(resolve => {
|
||||
@@ -91,12 +85,12 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
if (start.value) {
|
||||
const imgElement = start.value as HTMLImageElement
|
||||
imageElement.value = imgElement
|
||||
|
||||
// Wait for own image to load
|
||||
await waitForImageLoad(imgElement)
|
||||
if (startElement.value) {
|
||||
// Wait for the ItemIcon to load its image
|
||||
const imgElement = startElement.value.querySelector('img')
|
||||
if (imgElement) {
|
||||
await waitForImageLoad(imgElement as HTMLImageElement)
|
||||
}
|
||||
|
||||
// Now that image is loaded and DOM is ready, draw arrows
|
||||
imagesLoaded.value = true
|
||||
@@ -108,7 +102,7 @@ onMounted(async () => {
|
||||
if (pendingChildMounts.length > 0) {
|
||||
await nextTick()
|
||||
for (const childEnd of pendingChildMounts) {
|
||||
drawArrow(start.value!, childEnd)
|
||||
drawArrow(startElement.value!, childEnd)
|
||||
}
|
||||
pendingChildMounts.length = 0
|
||||
}
|
||||
@@ -117,7 +111,7 @@ onMounted(async () => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
refreshArrows()
|
||||
emit('mount', start.value!)
|
||||
emit('mount', startElement.value!)
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -133,12 +127,12 @@ onBeforeUpdate(() => {
|
||||
onUpdated(async () => {
|
||||
await nextTick()
|
||||
|
||||
if (start.value && imagesLoaded.value) {
|
||||
if (startElement.value && imagesLoaded.value) {
|
||||
// Redraw arrows after DOM update
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
refreshArrows()
|
||||
emit('mount', start.value!)
|
||||
emit('mount', startElement.value!)
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -168,7 +162,7 @@ function drawArrow(start: Element, end: Element) {
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
style: 'stroke:var(--color-on-surface);stroke-width:2;fill:transparent;',
|
||||
style: 'stroke:var(--color-on-surface);stroke-width:2;fill:transparent;pointer-events:none;',
|
||||
appendTo: document.body
|
||||
})
|
||||
arrows.push(arrow)
|
||||
@@ -194,12 +188,12 @@ addEventListener('scroll', _ => {
|
||||
})
|
||||
|
||||
function handleSubtreeMount(end: Element) {
|
||||
if (start.value) {
|
||||
if (startElement.value) {
|
||||
if (imagesLoaded.value) {
|
||||
// Parent is ready, draw arrow immediately
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
drawArrow(start.value!, end)
|
||||
drawArrow(startElement.value!, end)
|
||||
refreshArrows()
|
||||
})
|
||||
})
|
||||
@@ -213,7 +207,7 @@ function handleSubtreeMount(end: Element) {
|
||||
|
||||
function handleParentReady() {
|
||||
// Parent became ready, redraw all our arrows
|
||||
if (start.value && imagesLoaded.value) {
|
||||
if (startElement.value && imagesLoaded.value) {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
refreshArrows()
|
||||
@@ -233,13 +227,15 @@ function handleRefresh() {
|
||||
<template>
|
||||
<div class="item-tree-container">
|
||||
<div v-if="tree.data != undefined && tree.data != null" class="item-tree-node">
|
||||
<img
|
||||
<ItemIcon
|
||||
v-if="itemMap.get(tree.data)"
|
||||
ref="start"
|
||||
:item="itemMap.get(tree.data)!"
|
||||
:show-pickrate="true"
|
||||
:pickrate="parentCount ? tree.count / parentCount : 0"
|
||||
:size="48"
|
||||
class="item-tree-img"
|
||||
:alt="tree.data.toString()"
|
||||
:src="getItemIconPath(tree.data)"
|
||||
/>
|
||||
<span class="item-tree-pickrate">{{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%</span>
|
||||
</div>
|
||||
|
||||
<div class="item-tree-children">
|
||||
@@ -268,36 +264,23 @@ function handleRefresh() {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.item-tree-img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-on-surface);
|
||||
}
|
||||
|
||||
.item-tree-pickrate {
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-on-surface);
|
||||
opacity: 0.6;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.item-tree-children {
|
||||
margin-left: 32px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.item-tree-child {
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media only screen and (max-width: 900px) {
|
||||
.item-tree-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.item-tree-children {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@@ -23,6 +23,12 @@ declare global {
|
||||
id: number
|
||||
iconPath: string
|
||||
name?: string
|
||||
description?: string
|
||||
plaintext?: string
|
||||
into?: number[]
|
||||
from?: number[]
|
||||
price?: number
|
||||
priceTotal?: number
|
||||
}
|
||||
type SummonerSpell = {
|
||||
id: number
|
||||
|
||||
Reference in New Issue
Block a user