feat: better item tooltips
This commit is contained in:
@@ -1,2 +1,19 @@
|
||||
export type { ItemStats, CDragonItem, ItemWithStats } from './item.js'
|
||||
export { parseItemStats, parseItem, parseItems } from './item.js'
|
||||
export type {
|
||||
ItemStats,
|
||||
CDragonItem,
|
||||
ItemWithStats,
|
||||
ItemEffect,
|
||||
TextSegment,
|
||||
ScalingValue,
|
||||
DamageValue,
|
||||
ParsedDescription,
|
||||
ItemWithParsedDescription
|
||||
} from './item.js'
|
||||
export {
|
||||
parseItemStats,
|
||||
parseItem,
|
||||
parseItems,
|
||||
parseItemDescription,
|
||||
parseItemFull,
|
||||
parseItemsFull
|
||||
} from './item.js'
|
||||
|
||||
@@ -7,6 +7,7 @@ export interface ItemStats {
|
||||
abilityPower?: number
|
||||
attackSpeed?: number
|
||||
criticalStrikeChance?: number
|
||||
criticalStrikeDamage?: number
|
||||
lifeSteal?: number
|
||||
omnivamp?: number
|
||||
physicalVamp?: number
|
||||
@@ -40,6 +41,98 @@ export interface ItemStats {
|
||||
slowResist?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents a scaling value (e.g., "5% bonus health")
|
||||
*/
|
||||
export interface ScalingValue {
|
||||
value: number
|
||||
isPercentage: boolean
|
||||
scaleType:
|
||||
| 'mana'
|
||||
| 'health'
|
||||
| 'ap'
|
||||
| 'ad'
|
||||
| 'armor'
|
||||
| 'mr'
|
||||
| 'level'
|
||||
| 'bonusHealth'
|
||||
| 'bonusMana'
|
||||
| 'maxHealth'
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents a damage value with type
|
||||
*/
|
||||
export interface DamageValue {
|
||||
value: number
|
||||
isPercentage: boolean
|
||||
damageType: 'magic' | 'physical' | 'true'
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents a colored text segment
|
||||
*/
|
||||
export interface TextSegment {
|
||||
type:
|
||||
| 'text'
|
||||
| 'highlight'
|
||||
| 'passive'
|
||||
| 'active'
|
||||
| 'keyword'
|
||||
| 'keywordMajor'
|
||||
| 'keywordStealth'
|
||||
| 'status'
|
||||
| 'speed'
|
||||
| 'scaleMana'
|
||||
| 'scaleHealth'
|
||||
| 'scaleAP'
|
||||
| 'scaleAD'
|
||||
| 'scaleArmor'
|
||||
| 'scaleMR'
|
||||
| 'scaleLevel'
|
||||
| 'scaleBonusHealth'
|
||||
| 'scaleBonusMana'
|
||||
| 'scaleMaxHealth'
|
||||
| 'spellName'
|
||||
| 'unique'
|
||||
| 'rarityMythic'
|
||||
| 'rarityLegendary'
|
||||
| 'rarityGeneric'
|
||||
| 'magicDamage'
|
||||
| 'physicalDamage'
|
||||
| 'trueDamage'
|
||||
| 'healing'
|
||||
| 'shield'
|
||||
| 'attention'
|
||||
| 'onHit'
|
||||
| 'color'
|
||||
content: string
|
||||
color?: string // For custom color spans
|
||||
scaling?: ScalingValue
|
||||
damage?: DamageValue
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents an item effect (passive, active, unique, etc.)
|
||||
*/
|
||||
export interface ItemEffect {
|
||||
type: 'passive' | 'active' | 'unique' | 'mythic' | 'legendary' | 'epic'
|
||||
name?: string
|
||||
description: TextSegment[]
|
||||
isUnique?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Parsed item description structure
|
||||
*/
|
||||
export interface ParsedDescription {
|
||||
stats: ItemStats
|
||||
effects: ItemEffect[]
|
||||
rules?: TextSegment[]
|
||||
flavorText?: TextSegment[]
|
||||
rarity?: 'mythic' | 'legendary' | 'epic'
|
||||
}
|
||||
|
||||
/**
|
||||
* Stat name mappings from CDragon description text to stat keys
|
||||
*/
|
||||
@@ -48,6 +141,7 @@ const STAT_MAPPINGS: Record<string, keyof ItemStats> = {
|
||||
'Ability Power': 'abilityPower',
|
||||
'Attack Speed': 'attackSpeed',
|
||||
'Critical Strike Chance': 'criticalStrikeChance',
|
||||
'Critical Strike Damage': 'criticalStrikeDamage',
|
||||
'Life Steal': 'lifeSteal',
|
||||
Omnivamp: 'omnivamp',
|
||||
'Physical Vamp': 'physicalVamp',
|
||||
@@ -157,6 +251,424 @@ export function parseItemStats(description: string): ItemStats {
|
||||
return stats
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove HTML tags and get plain text
|
||||
*/
|
||||
function stripHtmlTags(html: string): string {
|
||||
return html
|
||||
.replace(/<br\s*\/?>/gi, '\n')
|
||||
.replace(/<[^>]+>/g, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse scaling tags and extract scaling info
|
||||
*/
|
||||
function parseScalingTag(
|
||||
tagName: string,
|
||||
content: string
|
||||
): { scaling?: ScalingValue; text: string } {
|
||||
const scaleTypeMap: Record<string, ScalingValue['scaleType']> = {
|
||||
scaleMana: 'mana',
|
||||
scaleHealth: 'health',
|
||||
scaleAP: 'ap',
|
||||
scaleAD: 'ad',
|
||||
scaleArmor: 'armor',
|
||||
scaleMR: 'mr',
|
||||
scaleLevel: 'level',
|
||||
scaleBonusHealth: 'bonusHealth',
|
||||
scaleBonusMana: 'bonusMana',
|
||||
scaleMaxHealth: 'maxHealth'
|
||||
}
|
||||
|
||||
const scaleType = scaleTypeMap[tagName]
|
||||
if (!scaleType) {
|
||||
return { text: content }
|
||||
}
|
||||
|
||||
// Try to extract percentage or flat value
|
||||
const percentMatch = content.match(/(\d+(?:\.\d+)?)\s*%/)
|
||||
const flatMatch = content.match(/(\d+(?:\.\d+)?)/)
|
||||
|
||||
if (percentMatch) {
|
||||
return {
|
||||
scaling: {
|
||||
value: parseFloat(percentMatch[1]),
|
||||
isPercentage: true,
|
||||
scaleType
|
||||
},
|
||||
text: content
|
||||
}
|
||||
} else if (flatMatch) {
|
||||
return {
|
||||
scaling: {
|
||||
value: parseFloat(flatMatch[1]),
|
||||
isPercentage: false,
|
||||
scaleType
|
||||
},
|
||||
text: content
|
||||
}
|
||||
}
|
||||
|
||||
return { text: content }
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse damage tags (magicDamage, physicalDamage, trueDamage)
|
||||
*/
|
||||
function parseDamageTag(tagName: string, content: string): { damage?: DamageValue; text: string } {
|
||||
const damageTypeMap: Record<string, DamageValue['damageType']> = {
|
||||
magicDamage: 'magic',
|
||||
physicalDamage: 'physical',
|
||||
trueDamage: 'true'
|
||||
}
|
||||
|
||||
const damageType = damageTypeMap[tagName]
|
||||
if (!damageType) {
|
||||
return { text: content }
|
||||
}
|
||||
|
||||
// Try to extract damage value
|
||||
const percentMatch = content.match(/(\d+(?:\.\d+)?)\s*%/)
|
||||
const flatMatch = content.match(/(\d+(?:\.\d+)?)/)
|
||||
|
||||
if (percentMatch) {
|
||||
return {
|
||||
damage: {
|
||||
value: parseFloat(percentMatch[1]),
|
||||
isPercentage: true,
|
||||
damageType
|
||||
},
|
||||
text: content
|
||||
}
|
||||
} else if (flatMatch) {
|
||||
return {
|
||||
damage: {
|
||||
value: parseFloat(flatMatch[1]),
|
||||
isPercentage: false,
|
||||
damageType
|
||||
},
|
||||
text: content
|
||||
}
|
||||
}
|
||||
|
||||
return { text: content }
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse text content with HTML tags into TextSegments
|
||||
*/
|
||||
function parseTextSegments(html: string): TextSegment[] {
|
||||
const segments: TextSegment[] = []
|
||||
|
||||
if (!html) return segments
|
||||
|
||||
// Process the HTML and convert to segments
|
||||
// We'll use a simple state machine approach
|
||||
let remaining = html
|
||||
let currentText = ''
|
||||
|
||||
// Tag type mappings
|
||||
const tagTypeMap: Record<string, TextSegment['type']> = {
|
||||
passive: 'passive',
|
||||
active: 'active',
|
||||
keyword: 'keyword',
|
||||
keywordMajor: 'keywordMajor',
|
||||
keywordStealth: 'keywordStealth',
|
||||
status: 'status',
|
||||
speed: 'speed',
|
||||
scaleMana: 'scaleMana',
|
||||
scaleHealth: 'scaleHealth',
|
||||
scaleAP: 'scaleAP',
|
||||
scaleAD: 'scaleAD',
|
||||
scaleArmor: 'scaleArmor',
|
||||
scaleMR: 'scaleMR',
|
||||
scaleLevel: 'scaleLevel',
|
||||
scaleBonusHealth: 'scaleBonusHealth',
|
||||
scaleBonusMana: 'scaleBonusMana',
|
||||
scaleMaxHealth: 'scaleMaxHealth',
|
||||
spellName: 'spellName',
|
||||
attention: 'attention',
|
||||
magicDamage: 'magicDamage',
|
||||
physicalDamage: 'physicalDamage',
|
||||
trueDamage: 'trueDamage',
|
||||
healing: 'healing',
|
||||
shield: 'shield',
|
||||
onHit: 'onHit'
|
||||
}
|
||||
|
||||
// Process tags
|
||||
while (remaining.length > 0) {
|
||||
// Check for opening tag
|
||||
const openMatch = remaining.match(/^<([a-zA-Z]+)(?:\s+color='([^']+)')?\s*>/)
|
||||
|
||||
if (openMatch) {
|
||||
// Push any accumulated text
|
||||
if (currentText) {
|
||||
segments.push({ type: 'text', content: currentText })
|
||||
currentText = ''
|
||||
}
|
||||
|
||||
const tagName = openMatch[1]
|
||||
const color = openMatch[2]
|
||||
const fullTag = openMatch[0]
|
||||
|
||||
// Find closing tag
|
||||
const closeTag = new RegExp(`</${tagName}>`, 'i')
|
||||
const closeMatch = remaining.substring(fullTag.length).match(closeTag)
|
||||
|
||||
if (closeMatch && closeMatch.index !== undefined) {
|
||||
const content = remaining.substring(fullTag.length, fullTag.length + closeMatch.index)
|
||||
const segmentType = tagTypeMap[tagName] || 'text'
|
||||
|
||||
if (tagName === 'font' && color) {
|
||||
segments.push({ type: 'color', content: stripHtmlTags(content), color })
|
||||
} else if (tagName.startsWith('scale') && tagTypeMap[tagName]) {
|
||||
const { scaling, text } = parseScalingTag(tagName, content)
|
||||
segments.push({
|
||||
type: segmentType,
|
||||
content: stripHtmlTags(text),
|
||||
scaling
|
||||
})
|
||||
} else if (tagName.endsWith('Damage') && tagTypeMap[tagName]) {
|
||||
const { damage, text } = parseDamageTag(tagName, content)
|
||||
segments.push({
|
||||
type: segmentType,
|
||||
content: stripHtmlTags(text),
|
||||
damage
|
||||
})
|
||||
} else if (segmentType !== 'text') {
|
||||
segments.push({ type: segmentType, content: stripHtmlTags(content) })
|
||||
} else {
|
||||
// Unknown tag, just add as text
|
||||
currentText += stripHtmlTags(content)
|
||||
}
|
||||
|
||||
remaining = remaining.substring(
|
||||
fullTag.length + (closeMatch.index || 0) + closeMatch[0].length
|
||||
)
|
||||
} else {
|
||||
// No closing tag found, skip the opening tag
|
||||
remaining = remaining.substring(fullTag.length)
|
||||
}
|
||||
} else {
|
||||
// Add character to current text
|
||||
currentText += remaining[0]
|
||||
remaining = remaining.substring(1)
|
||||
}
|
||||
}
|
||||
|
||||
// Push any remaining text
|
||||
if (currentText) {
|
||||
segments.push({ type: 'text', content: currentText })
|
||||
}
|
||||
|
||||
return segments
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract effects section from description (everything after stats)
|
||||
*/
|
||||
function extractEffectsSection(description: string): string {
|
||||
// Remove stats section first
|
||||
const withoutStats = description.replace(/<stats>.*?<\/stats>/s, '')
|
||||
// Remove mainText wrapper
|
||||
const effects = withoutStats
|
||||
.replace(/<mainText>/gi, '')
|
||||
.replace(/<\/mainText>/gi, '')
|
||||
.replace(/<rules>.*?<\/rules>/gs, '') // Remove rules for now, handle separately
|
||||
.replace(/<flavorText>.*?<\/flavorText>/gs, '') // Remove flavor for now, handle separately
|
||||
.trim()
|
||||
|
||||
return effects
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse effects from description HTML
|
||||
*/
|
||||
function parseEffects(description: string): ItemEffect[] {
|
||||
const effects: ItemEffect[] = []
|
||||
|
||||
if (!description) return effects
|
||||
|
||||
// Extract the effects section (after stats)
|
||||
const effectsSection = extractEffectsSection(description)
|
||||
|
||||
// Split by <br> tags to process line by line
|
||||
const lines = effectsSection
|
||||
.split(/<br\s*\/?>/gi)
|
||||
.map(l => l.trim())
|
||||
.filter(l => l)
|
||||
|
||||
let currentEffect: ItemEffect | null = null
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line) continue
|
||||
|
||||
// Check for passive tag
|
||||
const passiveMatch = line.match(/<passive>([^<]*)<\/passive>/i)
|
||||
if (passiveMatch) {
|
||||
if (currentEffect) {
|
||||
effects.push(currentEffect)
|
||||
}
|
||||
// Remove the passive tag from the line before parsing description
|
||||
const lineWithoutTag = line.replace(/<passive>[^<]*<\/passive>/i, '').trim()
|
||||
currentEffect = {
|
||||
type: 'passive',
|
||||
name: passiveMatch[1].trim(),
|
||||
description: parseTextSegments(lineWithoutTag),
|
||||
isUnique: false
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
// Check for active tag
|
||||
const activeMatch = line.match(/<active>([^<]*)<\/active>/i)
|
||||
if (activeMatch) {
|
||||
if (currentEffect) {
|
||||
effects.push(currentEffect)
|
||||
}
|
||||
// Remove the active tag from the line before parsing description
|
||||
const lineWithoutTag = line.replace(/<active>[^<]*<\/active>/i, '').trim()
|
||||
currentEffect = {
|
||||
type: 'active',
|
||||
name: activeMatch[1].trim(),
|
||||
description: parseTextSegments(lineWithoutTag),
|
||||
isUnique: false
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
// Check for unique tag
|
||||
const uniqueMatch = line.match(/<unique>([^<]*)<\/unique>/i)
|
||||
if (uniqueMatch) {
|
||||
if (currentEffect) {
|
||||
effects.push(currentEffect)
|
||||
}
|
||||
// Remove the unique tag from the line before parsing description
|
||||
const lineWithoutTag = line.replace(/<unique>[^<]*<\/unique>/i, '').trim()
|
||||
currentEffect = {
|
||||
type: 'unique',
|
||||
name: uniqueMatch[1].trim() || undefined,
|
||||
description: parseTextSegments(lineWithoutTag),
|
||||
isUnique: true
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
// Check for rarity tags
|
||||
const mythicMatch = line.match(/<rarityMythic>([^<]*)<\/rarityMythic>/i)
|
||||
if (mythicMatch) {
|
||||
if (currentEffect) {
|
||||
effects.push(currentEffect)
|
||||
}
|
||||
// Remove the rarity tag from the line before parsing description
|
||||
const lineWithoutTag = line.replace(/<rarityMythic>[^<]*<\/rarityMythic>/i, '').trim()
|
||||
currentEffect = {
|
||||
type: 'mythic',
|
||||
name: mythicMatch[1].trim() || undefined,
|
||||
description: parseTextSegments(lineWithoutTag),
|
||||
isUnique: false
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
const legendaryMatch = line.match(/<rarityLegendary>([^<]*)<\/rarityLegendary>/i)
|
||||
if (legendaryMatch) {
|
||||
if (currentEffect) {
|
||||
effects.push(currentEffect)
|
||||
}
|
||||
// Remove the rarity tag from the line before parsing description
|
||||
const lineWithoutTag = line.replace(/<rarityLegendary>[^<]*<\/rarityLegendary>/i, '').trim()
|
||||
currentEffect = {
|
||||
type: 'legendary',
|
||||
name: legendaryMatch[1].trim() || undefined,
|
||||
description: parseTextSegments(lineWithoutTag),
|
||||
isUnique: false
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
// If we have a current effect, append this line to its description
|
||||
if (currentEffect) {
|
||||
const lineSegments = parseTextSegments(line)
|
||||
currentEffect.description.push(...lineSegments)
|
||||
} else if (line.trim()) {
|
||||
// Standalone effect without explicit tag - create as passive
|
||||
const segments = parseTextSegments(line)
|
||||
if (segments.length > 0 && segments.some(s => s.content.trim())) {
|
||||
currentEffect = {
|
||||
type: 'passive',
|
||||
description: segments,
|
||||
isUnique: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Don't forget the last effect
|
||||
if (currentEffect) {
|
||||
effects.push(currentEffect)
|
||||
}
|
||||
|
||||
return effects
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse rules section from description
|
||||
*/
|
||||
function parseRules(description: string): TextSegment[] | undefined {
|
||||
const rulesMatch = description.match(/<rules>(.*?)<\/rules>/s)
|
||||
if (!rulesMatch) return undefined
|
||||
|
||||
return parseTextSegments(rulesMatch[1])
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse flavor text section from description
|
||||
*/
|
||||
function parseFlavorText(description: string): TextSegment[] | undefined {
|
||||
const flavorMatch = description.match(/<flavorText>(.*?)<\/flavorText>/s)
|
||||
if (!flavorMatch) return undefined
|
||||
|
||||
return parseTextSegments(flavorMatch[1])
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect item rarity from description
|
||||
*/
|
||||
function detectRarity(description: string): 'mythic' | 'legendary' | 'epic' | undefined {
|
||||
if (/<rarityMythic>/i.test(description)) return 'mythic'
|
||||
if (/<rarityLegendary>/i.test(description)) return 'legendary'
|
||||
if (/<rarityGeneric>/i.test(description)) return 'epic'
|
||||
return undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse full item description into structured data
|
||||
*
|
||||
* @param description - The HTML description string from CDragon items.json
|
||||
* @returns ParsedDescription object with stats, effects, rules, and flavor text
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* const parsed = parseItemDescription(
|
||||
* '<mainText><stats><attention> 25</attention> Move Speed</stats><br><br><passive>Enhanced Movement:</passive> +25 Move Speed</mainText>'
|
||||
* )
|
||||
* // Returns: { stats: { moveSpeed: 25 }, effects: [...], ... }
|
||||
* ```
|
||||
*/
|
||||
export function parseItemDescription(description: string): ParsedDescription {
|
||||
return {
|
||||
stats: parseItemStats(description),
|
||||
effects: parseEffects(description),
|
||||
rules: parseRules(description),
|
||||
flavorText: parseFlavorText(description),
|
||||
rarity: detectRarity(description)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Item data structure from CDragon
|
||||
*/
|
||||
@@ -184,6 +696,13 @@ export interface ItemWithStats extends CDragonItem {
|
||||
stats: ItemStats
|
||||
}
|
||||
|
||||
/**
|
||||
* Item with fully parsed description
|
||||
*/
|
||||
export interface ItemWithParsedDescription extends CDragonItem {
|
||||
parsedDescription: ParsedDescription
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a CDragon item and add parsed stats
|
||||
*/
|
||||
@@ -200,3 +719,20 @@ export function parseItem(item: CDragonItem): ItemWithStats {
|
||||
export function parseItems(items: CDragonItem[]): ItemWithStats[] {
|
||||
return items.map(parseItem)
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a CDragon item with full description parsing
|
||||
*/
|
||||
export function parseItemFull(item: CDragonItem): ItemWithParsedDescription {
|
||||
return {
|
||||
...item,
|
||||
parsedDescription: parseItemDescription(item.description)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse an array of CDragon items with full description parsing
|
||||
*/
|
||||
export function parseItemsFull(items: CDragonItem[]): ItemWithParsedDescription[] {
|
||||
return items.map(parseItemFull)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { parseItemStats, parseItem, parseItems } from '../src/item.js'
|
||||
import {
|
||||
parseItemStats,
|
||||
parseItem,
|
||||
parseItems,
|
||||
parseItemDescription,
|
||||
parseItemFull
|
||||
} from '../src/item.js'
|
||||
|
||||
describe('parseItemStats', () => {
|
||||
describe('basic stats', () => {
|
||||
@@ -191,6 +197,189 @@ describe('parseItemStats', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('parseItemDescription', () => {
|
||||
describe('stats parsing', () => {
|
||||
it('should parse stats from description', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 75</attention> Attack Damage<br><attention> 25%</attention> Critical Strike Chance</stats><br><br></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
expect(parsed.stats.attackDamage).toBe(75)
|
||||
expect(parsed.stats.criticalStrikeChance).toBe(25)
|
||||
})
|
||||
|
||||
it('should parse Infinity Edge stats', () => {
|
||||
// Infinity Edge (id: 3031)
|
||||
const description =
|
||||
'<mainText><stats><attention> 75</attention> Attack Damage<br><attention> 25%</attention> Critical Strike Chance<br><attention> 30%</attention> Critical Strike Damage</stats><br><br></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
expect(parsed.stats.attackDamage).toBe(75)
|
||||
expect(parsed.stats.criticalStrikeChance).toBe(25)
|
||||
// Critical Strike Damage is not in our mappings, but should not crash
|
||||
})
|
||||
})
|
||||
|
||||
describe('effects parsing', () => {
|
||||
it('should parse passive effect', () => {
|
||||
// Rabadon's Deathcap (id: 3089)
|
||||
const description =
|
||||
'<mainText><stats><attention> 130</attention> Ability Power</stats><br><br><passive>Magical Opus</passive><br>Increases your total <scaleAP>Ability Power by 30%</scaleAP>.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.effects).toHaveLength(1)
|
||||
expect(parsed.effects[0].type).toBe('passive')
|
||||
expect(parsed.effects[0].name).toBe('Magical Opus')
|
||||
})
|
||||
|
||||
it('should parse active effect', () => {
|
||||
// Zhonya's Hourglass (id: 3157)
|
||||
const description =
|
||||
'<mainText><stats><attention> 105</attention> Ability Power<br><attention> 50</attention> Armor</stats><br><br><br> <br><active>Time Stop</active><br>Enter <keyword>Stasis</keyword> for 2.5 seconds.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.effects).toHaveLength(1)
|
||||
expect(parsed.effects[0].type).toBe('active')
|
||||
expect(parsed.effects[0].name).toBe('Time Stop')
|
||||
})
|
||||
|
||||
it('should parse multiple passives', () => {
|
||||
// Trinity Force (id: 3078)
|
||||
const description =
|
||||
'<mainText><stats><attention> 36</attention> Attack Damage<br><attention> 30%</attention> Attack Speed<br><attention> 333</attention> Health<br><attention> 15</attention> Ability Haste</stats><br><br><passive>Spellblade</passive><br>After using an Ability, your next Attack deals <physicalDamage>bonus physical damage</physicalDamage> <OnHit>On-Hit</OnHit>.<br> <br><passive>Quicken</passive><br>Attacking grants <speed>20 Move Speed</speed> for 2 seconds.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.effects).toHaveLength(2)
|
||||
expect(parsed.effects[0].type).toBe('passive')
|
||||
expect(parsed.effects[0].name).toBe('Spellblade')
|
||||
expect(parsed.effects[1].type).toBe('passive')
|
||||
expect(parsed.effects[1].name).toBe('Quicken')
|
||||
})
|
||||
|
||||
it('should parse passive with status tag', () => {
|
||||
// Serylda's Grudge (id: 6694)
|
||||
const description =
|
||||
'<mainText><stats><attention> 45</attention> Attack Damage<br><attention> 35%</attention> Armor Penetration<br><attention> 15</attention> Ability Haste</stats><br><br><passive>Bitter Cold</passive><br>Damaging Abilities <status>Slow</status> enemies below 50% Health by 30% for 1 second.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.effects).toHaveLength(1)
|
||||
expect(parsed.effects[0].type).toBe('passive')
|
||||
expect(parsed.effects[0].name).toBe('Bitter Cold')
|
||||
})
|
||||
|
||||
it('should handle item with no effects', () => {
|
||||
// Infinity Edge has no passive/active tags
|
||||
const description =
|
||||
'<mainText><stats><attention> 75</attention> Attack Damage<br><attention> 25%</attention> Critical Strike Chance<br><attention> 30%</attention> Critical Strike Damage</stats><br><br></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.effects).toHaveLength(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('text segments', () => {
|
||||
it('should parse scaleAP tag', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 130</attention> Ability Power</stats><br><br><passive>Magical Opus</passive><br>Increases your total <scaleAP>Ability Power by 30%</scaleAP>.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
// Find the scaleAP segment
|
||||
const effect = parsed.effects[0]
|
||||
const scaleSegment = effect.description.find(s => s.type === 'scaleAP')
|
||||
expect(scaleSegment).toBeDefined()
|
||||
expect(scaleSegment?.content).toContain('Ability Power by 30%')
|
||||
})
|
||||
|
||||
it('should parse physicalDamage tag', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 36</attention> Attack Damage</stats><br><br><passive>Spellblade</passive><br>Deals <physicalDamage>bonus physical damage</physicalDamage>.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
const effect = parsed.effects[0]
|
||||
const damageSegment = effect.description.find(s => s.type === 'physicalDamage')
|
||||
expect(damageSegment).toBeDefined()
|
||||
expect(damageSegment?.content).toContain('bonus physical damage')
|
||||
})
|
||||
|
||||
it('should parse keyword tag', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 105</attention> Ability Power</stats><br><br><active>Time Stop</active><br>Enter <keyword>Stasis</keyword> for 2.5 seconds.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
const effect = parsed.effects[0]
|
||||
const keywordSegment = effect.description.find(s => s.type === 'keyword')
|
||||
expect(keywordSegment).toBeDefined()
|
||||
expect(keywordSegment?.content).toBe('Stasis')
|
||||
})
|
||||
|
||||
it('should parse speed tag', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 36</attention> Attack Damage</stats><br><br><passive>Quicken</passive><br>Grants <speed>20 Move Speed</speed>.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
const effect = parsed.effects[0]
|
||||
const speedSegment = effect.description.find(s => s.type === 'speed')
|
||||
expect(speedSegment).toBeDefined()
|
||||
expect(speedSegment?.content).toContain('20 Move Speed')
|
||||
})
|
||||
|
||||
it('should parse status tag', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 45</attention> Attack Damage</stats><br><br><passive>Bitter Cold</passive><br><status>Slow</status> enemies.</mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
const effect = parsed.effects[0]
|
||||
const statusSegment = effect.description.find(s => s.type === 'status')
|
||||
expect(statusSegment).toBeDefined()
|
||||
expect(statusSegment?.content).toBe('Slow')
|
||||
})
|
||||
})
|
||||
|
||||
describe('rarity detection', () => {
|
||||
it('should detect mythic rarity', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 65</attention> Attack Damage</stats><br><br><rarityMythic>Mythic</rarityMythic></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.rarity).toBe('mythic')
|
||||
})
|
||||
|
||||
it('should detect legendary rarity', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 65</attention> Attack Damage</stats><br><br><rarityLegendary>Legendary</rarityLegendary></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.rarity).toBe('legendary')
|
||||
})
|
||||
|
||||
it('should detect epic rarity', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 65</attention> Attack Damage</stats><br><br><rarityGeneric>Epic</rarityGeneric></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.rarity).toBe('epic')
|
||||
})
|
||||
})
|
||||
|
||||
describe('rules and flavor text', () => {
|
||||
it('should parse rules section', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 25</attention> Move Speed</stats><br><br><rules>Ornn upgrade only</rules></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.rules).toBeDefined()
|
||||
expect(parsed.rules?.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('should parse flavor text section', () => {
|
||||
const description =
|
||||
'<mainText><stats><attention> 25</attention> Move Speed</stats><br><br><flavorText>A ancient artifact</flavorText></mainText>'
|
||||
const parsed = parseItemDescription(description)
|
||||
|
||||
expect(parsed.flavorText).toBeDefined()
|
||||
expect(parsed.flavorText?.length).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('parseItem', () => {
|
||||
it('should parse item and add stats', () => {
|
||||
const item = {
|
||||
@@ -233,3 +422,22 @@ describe('parseItems', () => {
|
||||
expect(results[1].stats.attackDamage).toBe(10)
|
||||
})
|
||||
})
|
||||
|
||||
describe('parseItemFull', () => {
|
||||
it('should parse item with full description', () => {
|
||||
const item = {
|
||||
id: 3089,
|
||||
name: "Rabadon's Deathcap",
|
||||
description:
|
||||
'<mainText><stats><attention> 130</attention> Ability Power</stats><br><br><passive>Magical Opus</passive><br>Increases your total <scaleAP>Ability Power by 30%</scaleAP>.</mainText>',
|
||||
iconPath: '/path/to/icon.png'
|
||||
}
|
||||
|
||||
const result = parseItemFull(item)
|
||||
expect(result.id).toBe(3089)
|
||||
expect(result.name).toBe("Rabadon's Deathcap")
|
||||
expect(result.parsedDescription.stats.abilityPower).toBe(130)
|
||||
expect(result.parsedDescription.effects).toHaveLength(1)
|
||||
expect(result.parsedDescription.effects[0].name).toBe('Magical Opus')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -5,6 +5,40 @@
|
||||
--color-on-surface: #b7b8e1;
|
||||
--color-surface-darker: #1f1d1c;
|
||||
--color-gold: #ffd700;
|
||||
|
||||
/* Tooltip colors */
|
||||
--tooltip-bg: #312e2c;
|
||||
--tooltip-border: #4a4543;
|
||||
--tooltip-header-border: rgba(183, 184, 225, 0.2);
|
||||
--tooltip-text: #b7b8e1;
|
||||
--tooltip-text-dim: #8a8b9e;
|
||||
--tooltip-stat-value: #ffd700;
|
||||
--tooltip-stat-label: #b7b8e1;
|
||||
|
||||
/* Effect type colors */
|
||||
--tooltip-effect-passive: #4a9eff;
|
||||
--tooltip-effect-active: #ff6b6b;
|
||||
--tooltip-effect-unique: #f39c12;
|
||||
--tooltip-effect-mythic: #ff5252;
|
||||
--tooltip-effect-legendary: #ff9800;
|
||||
--tooltip-effect-epic: #ffd54f;
|
||||
|
||||
/* Text segment colors */
|
||||
--tooltip-highlight: #ffd700;
|
||||
--tooltip-keyword: #ffd700;
|
||||
--tooltip-keyword-major: #ff8c00;
|
||||
--tooltip-keyword-stealth: #9b59b6;
|
||||
--tooltip-status: #e74c3c;
|
||||
--tooltip-speed: #5dade2;
|
||||
--tooltip-scaling: #5dade2;
|
||||
--tooltip-magic-damage: #9b59b6;
|
||||
--tooltip-physical-damage: #e67e22;
|
||||
--tooltip-true-damage: #ffffff;
|
||||
--tooltip-healing: #2ecc71;
|
||||
--tooltip-shield: #3498db;
|
||||
--tooltip-onhit: #5dade2;
|
||||
--tooltip-spellname: #1abc9c;
|
||||
--tooltip-flavor: #6a9fff;
|
||||
}
|
||||
|
||||
/* Font setting */
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
||||
import {
|
||||
parseItemDescription,
|
||||
type TextSegment,
|
||||
type ItemEffect,
|
||||
type ParsedDescription
|
||||
} from 'dragon-item-parser'
|
||||
|
||||
interface Props {
|
||||
item: Item | null
|
||||
@@ -42,78 +48,184 @@ function getTagClass(tag: ItemTag): string {
|
||||
return `tag-${tag}`
|
||||
}
|
||||
|
||||
// Parse description and convert to styled HTML
|
||||
const formatDescription = (description?: string) => {
|
||||
if (!description) return ''
|
||||
// Parse the item description once
|
||||
const parsedDescription = computed<ParsedDescription | null>(() => {
|
||||
if (!props.item?.description) return null
|
||||
return parseItemDescription(props.item.description)
|
||||
})
|
||||
|
||||
// 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()
|
||||
// Format stats for display
|
||||
const formattedStats = computed(() => {
|
||||
const stats = parsedDescription.value?.stats
|
||||
if (!stats) return []
|
||||
|
||||
return html
|
||||
const statLabels: Record<string, string> = {
|
||||
attackDamage: 'Attack Damage',
|
||||
abilityPower: 'Ability Power',
|
||||
attackSpeed: 'Attack Speed',
|
||||
criticalStrikeChance: 'Critical Strike Chance',
|
||||
criticalStrikeDamage: 'Critical Strike Damage',
|
||||
lifeSteal: 'Life Steal',
|
||||
omnivamp: 'Omnivamp',
|
||||
physicalVamp: 'Physical Vamp',
|
||||
spellVamp: 'Spell Vamp',
|
||||
health: 'Health',
|
||||
armor: 'Armor',
|
||||
magicResist: 'Magic Resist',
|
||||
mana: 'Mana',
|
||||
baseManaRegen: 'Base Mana Regen',
|
||||
baseHealthRegen: 'Base Health Regen',
|
||||
moveSpeed: 'Move Speed',
|
||||
abilityHaste: 'Ability Haste',
|
||||
armorPenetration: 'Armor Penetration',
|
||||
magicPenetration: 'Magic Penetration',
|
||||
lethality: 'Lethality',
|
||||
healAndShieldPower: 'Heal and Shield Power',
|
||||
tenacity: 'Tenacity',
|
||||
slowResist: 'Slow Resist'
|
||||
}
|
||||
|
||||
const percentageStats = [
|
||||
'attackSpeed',
|
||||
'criticalStrikeChance',
|
||||
'criticalStrikeDamage',
|
||||
'lifeSteal',
|
||||
'omnivamp',
|
||||
'physicalVamp',
|
||||
'spellVamp',
|
||||
'baseManaRegen',
|
||||
'baseHealthRegen',
|
||||
'armorPenetration',
|
||||
'magicPenetration',
|
||||
'healAndShieldPower',
|
||||
'tenacity',
|
||||
'slowResist'
|
||||
]
|
||||
|
||||
return Object.entries(stats)
|
||||
.filter(([_, value]) => value !== undefined)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
label: statLabels[key] || key,
|
||||
value: percentageStats.includes(key) ? `${value}%` : value
|
||||
}))
|
||||
})
|
||||
|
||||
// Get CSS class for text segment type
|
||||
function getSegmentClass(segment: TextSegment): string {
|
||||
const classMap: Record<TextSegment['type'], string> = {
|
||||
text: '',
|
||||
highlight: 'stat-highlight',
|
||||
passive: 'tag-passive',
|
||||
active: 'tag-active',
|
||||
keyword: 'tag-keyword',
|
||||
keywordMajor: 'tag-keyword-major',
|
||||
keywordStealth: 'tag-keyword-stealth',
|
||||
status: 'tag-status',
|
||||
speed: 'tag-speed',
|
||||
scaleMana: 'tag-scaling',
|
||||
scaleHealth: 'tag-scaling',
|
||||
scaleAP: 'tag-scaling',
|
||||
scaleAD: 'tag-scaling',
|
||||
scaleArmor: 'tag-scaling',
|
||||
scaleMR: 'tag-scaling',
|
||||
scaleLevel: 'tag-scaling',
|
||||
scaleBonusHealth: 'tag-scaling',
|
||||
scaleBonusMana: 'tag-scaling',
|
||||
scaleMaxHealth: 'tag-scaling',
|
||||
spellName: 'tag-spellname',
|
||||
unique: 'tag-unique',
|
||||
rarityMythic: 'tag-rarity-mythic',
|
||||
rarityLegendary: 'tag-rarity-legendary',
|
||||
rarityGeneric: 'tag-rarity-generic',
|
||||
magicDamage: 'tag-magic-damage',
|
||||
physicalDamage: 'tag-physical-damage',
|
||||
trueDamage: 'tag-true-damage',
|
||||
healing: 'tag-healing',
|
||||
shield: 'tag-shield',
|
||||
attention: 'stat-highlight',
|
||||
onHit: 'tag-onhit',
|
||||
color: ''
|
||||
}
|
||||
return classMap[segment.type] || ''
|
||||
}
|
||||
|
||||
const formattedDescription = computed(() =>
|
||||
props.item ? formatDescription(props.item.description) : ''
|
||||
)
|
||||
// Get effect type label
|
||||
function getEffectTypeLabel(type: ItemEffect['type']): string {
|
||||
const labels: Record<ItemEffect['type'], string> = {
|
||||
passive: 'Passive',
|
||||
active: 'Active',
|
||||
unique: 'Unique',
|
||||
mythic: 'Mythic',
|
||||
legendary: 'Legendary',
|
||||
epic: 'Epic'
|
||||
}
|
||||
return labels[type] || ''
|
||||
}
|
||||
|
||||
// Get effect type class
|
||||
function getEffectTypeClass(type: ItemEffect['type']): string {
|
||||
const classMap: Record<ItemEffect['type'], string> = {
|
||||
passive: 'effect-passive',
|
||||
active: 'effect-active',
|
||||
unique: 'effect-unique',
|
||||
mythic: 'effect-mythic',
|
||||
legendary: 'effect-legendary',
|
||||
epic: 'effect-epic'
|
||||
}
|
||||
return classMap[type] || ''
|
||||
}
|
||||
|
||||
// Render text segments to HTML
|
||||
function renderSegments(segments: TextSegment[]): string {
|
||||
return segments
|
||||
.map(segment => {
|
||||
const cssClass = getSegmentClass(segment)
|
||||
|
||||
if (segment.type === 'color' && segment.color) {
|
||||
return `<span style="color: ${segment.color}">${segment.content}</span>`
|
||||
}
|
||||
|
||||
if (cssClass) {
|
||||
return `<span class="${cssClass}">${segment.content}</span>`
|
||||
}
|
||||
|
||||
return segment.content
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
|
||||
// Render effect description
|
||||
function renderEffect(effect: ItemEffect): string {
|
||||
return renderSegments(effect.description)
|
||||
}
|
||||
|
||||
// Render rules
|
||||
function renderRules(segments: TextSegment[] | undefined): string {
|
||||
if (!segments) return ''
|
||||
return renderSegments(segments)
|
||||
}
|
||||
|
||||
// Render flavor text
|
||||
function renderFlavorText(segments: TextSegment[] | undefined): string {
|
||||
if (!segments) return ''
|
||||
return renderSegments(segments)
|
||||
}
|
||||
|
||||
// Check if we should show the effects section
|
||||
const hasEffects = computed(() => {
|
||||
return parsedDescription.value?.effects?.length
|
||||
})
|
||||
|
||||
// Check if we should show rules
|
||||
const hasRules = computed(() => {
|
||||
return parsedDescription.value?.rules?.length
|
||||
})
|
||||
|
||||
// Check if we should show flavor text
|
||||
const hasFlavorText = computed(() => {
|
||||
return parsedDescription.value?.flavorText?.length
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -128,37 +240,72 @@ const formattedDescription = computed(() =>
|
||||
}"
|
||||
@mouseenter.stop
|
||||
>
|
||||
<!-- Header -->
|
||||
<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>
|
||||
<span v-if="item.priceTotal" class="tooltip-gold">{{ item.priceTotal }} Gold</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plaintext (brief description) -->
|
||||
<div v-if="item.plaintext" class="tooltip-plaintext">
|
||||
{{ item.plaintext }}
|
||||
</div>
|
||||
|
||||
<!-- Item Tags -->
|
||||
<div v-if="tags && tags.length > 0" class="tooltip-tags">
|
||||
<span
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
:class="['item-tag', getTagClass(tag)]"
|
||||
:title="getTagTooltip(tag)"
|
||||
>
|
||||
{{ getTagLabel(tag) }}
|
||||
</span>
|
||||
<div v-if="tags && tags.length > 0" class="tooltip-tags-section">
|
||||
<div class="tooltip-tags">
|
||||
<span
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
:class="['item-tag', getTagClass(tag)]"
|
||||
:title="getTagTooltip(tag)"
|
||||
>
|
||||
{{ getTagLabel(tag) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="formattedDescription"
|
||||
class="tooltip-description"
|
||||
v-html="formattedDescription"
|
||||
></div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<!-- Stats Section -->
|
||||
<div v-if="formattedStats.length > 0" class="tooltip-stats">
|
||||
<div v-for="stat in formattedStats" :key="stat.key" class="stat-row">
|
||||
<span class="stat-value">{{ stat.value }}</span>
|
||||
<span class="stat-label">{{ stat.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Effects Section -->
|
||||
<div v-if="hasEffects" class="tooltip-effects">
|
||||
<div
|
||||
v-for="(effect, index) in parsedDescription?.effects"
|
||||
:key="index"
|
||||
:class="['effect-item', getEffectTypeClass(effect.type)]"
|
||||
>
|
||||
<div class="effect-header">
|
||||
<span class="effect-type">{{ getEffectTypeLabel(effect.type) }}</span>
|
||||
<span v-if="effect.name" class="effect-name">{{ effect.name }}</span>
|
||||
</div>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div class="effect-description" v-html="renderEffect(effect)"></div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rules Section -->
|
||||
<div v-if="hasRules" class="tooltip-rules">
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div v-html="renderRules(parsedDescription?.rules)"></div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</div>
|
||||
|
||||
<!-- Flavor Text -->
|
||||
<div v-if="hasFlavorText" class="tooltip-flavor">
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div v-html="renderFlavorText(parsedDescription?.flavorText)"></div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
@@ -168,18 +315,23 @@ const formattedDescription = computed(() =>
|
||||
.item-tooltip {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-on-surface);
|
||||
background: var(--tooltip-bg);
|
||||
border: 1px solid var(--tooltip-border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
max-width: 300px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
max-width: 320px;
|
||||
min-width: 250px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: none;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.tooltip-header {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--tooltip-header-border);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -187,212 +339,56 @@ const formattedDescription = computed(() =>
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-on-surface);
|
||||
border: 2px solid var(--tooltip-border);
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tooltip-title h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-on-surface);
|
||||
color: var(--tooltip-text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tooltip-gold {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-gold);
|
||||
margin-top: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Plaintext */
|
||||
.tooltip-plaintext {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-on-surface);
|
||||
opacity: 0.8;
|
||||
font-size: 0.8rem;
|
||||
color: var(--tooltip-text-dim);
|
||||
margin-bottom: 8px;
|
||||
font-style: italic;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-on-surface);
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
/* Item Tags Section */
|
||||
.tooltip-tags-section {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--tooltip-header-border);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Item tags in tooltip */
|
||||
.tooltip-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--color-on-surface-dim);
|
||||
}
|
||||
|
||||
.tooltip-tags .item-tag {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
@@ -401,7 +397,6 @@ const formattedDescription = computed(() =>
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Gold situation tags */
|
||||
.tooltip-tags .tag-ahead {
|
||||
background-color: #22c55e;
|
||||
color: white;
|
||||
@@ -412,7 +407,6 @@ const formattedDescription = computed(() =>
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Region tags */
|
||||
.tooltip-tags .tag-region_euw {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
@@ -433,6 +427,257 @@ const formattedDescription = computed(() =>
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.tooltip-stats {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: var(--tooltip-stat-value);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
min-width: 45px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--tooltip-stat-label);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Effects Section */
|
||||
.tooltip-effects {
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--tooltip-header-border);
|
||||
}
|
||||
|
||||
.effect-item {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid var(--tooltip-border);
|
||||
}
|
||||
|
||||
.effect-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.effect-item.effect-passive {
|
||||
border-left-color: var(--tooltip-effect-passive);
|
||||
}
|
||||
|
||||
.effect-item.effect-active {
|
||||
border-left-color: var(--tooltip-effect-active);
|
||||
}
|
||||
|
||||
.effect-item.effect-unique {
|
||||
border-left-color: var(--tooltip-effect-unique);
|
||||
}
|
||||
|
||||
.effect-item.effect-mythic {
|
||||
border-left-color: var(--tooltip-effect-mythic);
|
||||
}
|
||||
|
||||
.effect-item.effect-legendary {
|
||||
border-left-color: var(--tooltip-effect-legendary);
|
||||
}
|
||||
|
||||
.effect-item.effect-epic {
|
||||
border-left-color: var(--tooltip-effect-epic);
|
||||
}
|
||||
|
||||
.effect-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.effect-type {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.effect-passive .effect-type {
|
||||
color: var(--tooltip-effect-passive);
|
||||
}
|
||||
|
||||
.effect-active .effect-type {
|
||||
color: var(--tooltip-effect-active);
|
||||
}
|
||||
|
||||
.effect-unique .effect-type {
|
||||
color: var(--tooltip-effect-unique);
|
||||
}
|
||||
|
||||
.effect-mythic .effect-type {
|
||||
color: var(--tooltip-effect-mythic);
|
||||
}
|
||||
|
||||
.effect-legendary .effect-type {
|
||||
color: var(--tooltip-effect-legendary);
|
||||
}
|
||||
|
||||
.effect-epic .effect-type {
|
||||
color: var(--tooltip-effect-epic);
|
||||
}
|
||||
|
||||
.effect-name {
|
||||
font-weight: 600;
|
||||
color: var(--tooltip-text);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.effect-description {
|
||||
font-size: 0.8rem;
|
||||
color: var(--tooltip-text-dim);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Rules Section */
|
||||
.tooltip-rules {
|
||||
margin-top: 8px;
|
||||
padding: 6px 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-left: 2px solid var(--tooltip-border);
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: var(--tooltip-text-dim);
|
||||
}
|
||||
|
||||
/* Flavor Text */
|
||||
.tooltip-flavor {
|
||||
margin-top: 8px;
|
||||
padding: 6px 8px;
|
||||
background: rgba(74, 222, 255, 0.05);
|
||||
border-left: 2px solid var(--tooltip-flavor);
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: var(--tooltip-flavor);
|
||||
}
|
||||
|
||||
/* Text segment styles inside effects */
|
||||
.effect-description :deep(.stat-highlight) {
|
||||
color: var(--tooltip-highlight);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-passive) {
|
||||
color: var(--tooltip-effect-passive);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-active) {
|
||||
color: var(--tooltip-effect-active);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-keyword) {
|
||||
color: var(--tooltip-keyword);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-keyword-major) {
|
||||
color: var(--tooltip-keyword-major);
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-keyword-stealth) {
|
||||
color: var(--tooltip-keyword-stealth);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-status) {
|
||||
color: var(--tooltip-status);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-speed),
|
||||
.effect-description :deep(.tag-scaling) {
|
||||
color: var(--tooltip-scaling);
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-healing) {
|
||||
color: var(--tooltip-healing);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-shield) {
|
||||
color: var(--tooltip-shield);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-magic-damage) {
|
||||
color: var(--tooltip-magic-damage);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-physical-damage) {
|
||||
color: var(--tooltip-physical-damage);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-true-damage) {
|
||||
color: var(--tooltip-true-damage);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-onhit) {
|
||||
background: rgba(52, 152, 219, 0.2);
|
||||
color: var(--tooltip-onhit);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-spellname) {
|
||||
color: var(--tooltip-spellname);
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-unique) {
|
||||
color: var(--tooltip-effect-unique);
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-rarity-mythic) {
|
||||
color: var(--tooltip-effect-mythic);
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-rarity-legendary) {
|
||||
color: var(--tooltip-effect-legendary);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.effect-description :deep(.tag-rarity-generic) {
|
||||
color: var(--tooltip-effect-epic);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
@@ -54,7 +54,8 @@ function trimTreeDepth(tree: ItemTree, maxDepth: number, currentDepth: number =
|
||||
const trimmedTree: ItemTree = {
|
||||
count: tree.count,
|
||||
data: tree.data,
|
||||
children: []
|
||||
children: [],
|
||||
tags: tree.tags
|
||||
}
|
||||
|
||||
// If we haven't reached maxDepth, include children
|
||||
|
||||
Reference in New Issue
Block a user