From 686962b678e16612ee938b6bd0e331b6ca7f2009 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Thu, 30 Apr 2026 13:35:28 +0200
Subject: [PATCH] feat/frontend: add tooltips for runes

---
 frontend/components/rune/Page.vue        |  60 ++--
 frontend/components/rune/RuneIcon.vue    | 134 +++++++++
 frontend/components/rune/RuneTooltip.vue | 366 +++++++++++++++++++++++
 frontend/types/cdragon.ts                |   2 +
 4 files changed, 522 insertions(+), 40 deletions(-)
 create mode 100644 frontend/components/rune/RuneIcon.vue
 create mode 100644 frontend/components/rune/RuneTooltip.vue

diff --git a/frontend/components/rune/Page.vue b/frontend/components/rune/Page.vue
index 70af12f..7d91600 100644
--- a/frontend/components/rune/Page.vue
+++ b/frontend/components/rune/Page.vue
@@ -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;
diff --git a/frontend/components/rune/RuneIcon.vue b/frontend/components/rune/RuneIcon.vue
new file mode 100644
index 0000000..ac624fe
--- /dev/null
+++ b/frontend/components/rune/RuneIcon.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
+
+import type { Perk } from '~/types/cdragon'
+
+interface Props {
+  perk: Perk
+  size?: number
+  isActive?: boolean
+  isKeystone?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 48,
+  isActive: false,
+  isKeystone: false,
+  class: ''
+})
+
+// Tooltip state - encapsulated in this component
+const tooltipState = reactive({
+  show: false,
+  perk: null as Perk | null,
+  x: 0,
+  y: 0
+})
+
+const handleMouseEnter = (event: MouseEvent) => {
+  tooltipState.perk = props.perk
+
+  // Calculate optimal position to keep tooltip within viewport
+  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
+  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.perk = null
+}
+
+const perkIconPath = computed(() => CDRAGON_BASE + mapPath(props.perk.iconPath))
+</script>
+
+<template>
+  <div class="rune-icon-wrapper" @mouseleave="handleMouseLeave">
+    <div
+      class="rune-icon"
+      :class="[
+        props.class,
+        {
+          'rune-activated': isActive,
+          'rune-keystone': isKeystone
+        }
+      ]"
+      :style="{ width: size + 'px', height: size + 'px' }"
+      @mouseenter="handleMouseEnter"
+    >
+      <NuxtImg :src="perkIconPath" :alt="perk.name || 'Rune'" class="rune-img" />
+    </div>
+
+    <RuneTooltip
+      :show="tooltipState.show"
+      :perk="tooltipState.perk"
+      :x="tooltipState.x"
+      :y="tooltipState.y"
+    />
+  </div>
+</template>
+
+<style scoped>
+.rune-icon-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.rune-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--color-on-surface);
+  overflow: hidden;
+  cursor: help;
+  position: relative;
+}
+
+.rune-icon.rune-keystone {
+  border: none;
+}
+
+.rune-img {
+  width: 100%;
+  height: 100%;
+  filter: grayscale(1);
+}
+
+.rune-icon.rune-activated .rune-img {
+  filter: none;
+}
+</style>
diff --git a/frontend/components/rune/RuneTooltip.vue b/frontend/components/rune/RuneTooltip.vue
new file mode 100644
index 0000000..8d25028
--- /dev/null
+++ b/frontend/components/rune/RuneTooltip.vue
@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
+
+import type { Perk } from '~/types/cdragon'
+
+interface Props {
+  perk: Perk | null
+  show: boolean
+  x: number
+  y: number
+}
+
+const props = defineProps<Props>()
+
+// Parse the long description to extract styled content
+// Rune descriptions use HTML-like tags including special lol-uikit tags
+interface TextSegment {
+  type: string
+  content: string
+  color?: string
+}
+
+function parseRuneDescription(description: string | undefined): TextSegment[] {
+  if (!description) return []
+
+  const segments: TextSegment[] = []
+
+  // Pattern to match various tag types:
+  // - Simple tags: <status>, <keyword>, </status>
+  // - Tags with attributes: <font color='#FF8000'>, <lol-uikit-tooltipped-keyword ...>
+  // - Self-closing or complex tags
+  const tagPattern = /<(\/?)([a-zA-Z][a-zA-Z0-9-]*)([^>]*)>/g
+
+  let lastIndex = 0
+  const tagStack: Array<{ type: string; color?: string }> = []
+
+  let match
+  while ((match = tagPattern.exec(description)) !== null) {
+    // Add any text before this tag
+    if (match.index > lastIndex) {
+      const text = description.slice(lastIndex, match.index)
+      if (text) {
+        const currentStyle = tagStack.length > 0 ? tagStack[tagStack.length - 1] : { type: 'text' }
+        segments.push({
+          type: currentStyle.type,
+          content: text,
+          color: currentStyle.color
+        })
+      }
+    }
+
+    const [fullMatch, isClosing, tagName, attributes] = match
+
+    // Normalize tag name (handle lol-uikit-tooltipped-keyword -> keyword)
+    let normalizedTag = tagName
+    if (tagName === 'lol-uikit-tooltipped-keyword') {
+      normalizedTag = 'keyword'
+    } else if (tagName === 'lol-uikit-tooltipped-link') {
+      normalizedTag = 'keyword'
+    }
+
+    if (!isClosing) {
+      // Opening tag - extract color if present
+      const colorMatch = attributes.match(/color=['"]([^'"]+)['"]/i)
+      const color = colorMatch ? colorMatch[1] : undefined
+
+      tagStack.push({ type: normalizedTag, color })
+    } else {
+      // Closing tag
+      tagStack.pop()
+    }
+
+    lastIndex = match.index + fullMatch.length
+  }
+
+  // Add any remaining text
+  if (lastIndex < description.length) {
+    const text = description.slice(lastIndex)
+    if (text) {
+      const currentStyle = tagStack.length > 0 ? tagStack[tagStack.length - 1] : { type: 'text' }
+      segments.push({
+        type: currentStyle.type,
+        content: text,
+        color: currentStyle.color
+      })
+    }
+  }
+
+  return segments
+}
+
+// Get CSS class for text segment type
+function getSegmentClass(segment: TextSegment): string {
+  const classMap: Record<string, 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] || ''
+}
+
+// Render text segments to HTML
+function renderSegments(segments: TextSegment[]): string {
+  return segments
+    .map(segment => {
+      const cssClass = getSegmentClass(segment)
+
+      // If segment has a color, use it directly (handles <font color='...'> tags)
+      if (segment.color) {
+        return `<span style="color: ${segment.color}">${segment.content}</span>`
+      }
+
+      if (cssClass) {
+        return `<span class="${cssClass}">${segment.content}</span>`
+      }
+
+      return segment.content
+    })
+    .join('')
+}
+
+// Parsed description
+const parsedLongDesc = computed<TextSegment[]>(() => {
+  return parseRuneDescription(props.perk?.longDesc)
+})
+
+const hasLongDesc = computed(() => {
+  return parsedLongDesc.value.length > 0
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="show && perk"
+        class="rune-tooltip"
+        :style="{
+          left: x + 'px',
+          top: y + 'px'
+        }"
+        @mouseenter.stop
+      >
+        <!-- Header -->
+        <div class="tooltip-header">
+          <NuxtImg class="tooltip-icon" :src="CDRAGON_BASE + mapPath(perk.iconPath)" />
+          <div class="tooltip-title">
+            <h3>{{ perk.name || 'Unknown Rune' }}</h3>
+          </div>
+        </div>
+
+        <!-- Long Description (detailed) -->
+        <div v-if="hasLongDesc" class="tooltip-long-desc">
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="renderSegments(parsedLongDesc)"></div>
+          <!-- eslint-enable vue/no-v-html -->
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.rune-tooltip {
+  position: fixed;
+  z-index: 1000;
+  background: var(--tooltip-bg);
+  border: 1px solid var(--tooltip-border);
+  border-radius: 8px;
+  padding: 12px;
+  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;
+}
+
+.tooltip-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  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(--tooltip-text);
+  line-height: 1.2;
+}
+
+/* Long Description */
+.tooltip-long-desc {
+  font-size: 0.8rem;
+  color: var(--tooltip-text-dim);
+  line-height: 1.5;
+}
+
+/* Text segment styles */
+.tooltip-long-desc :deep(.stat-highlight) {
+  color: var(--tooltip-highlight);
+  font-weight: 600;
+}
+
+.tooltip-long-desc :deep(.tag-passive) {
+  color: var(--tooltip-effect-passive);
+  font-weight: 600;
+}
+
+.tooltip-long-desc :deep(.tag-active) {
+  color: var(--tooltip-effect-active);
+  font-weight: 600;
+}
+
+.tooltip-long-desc :deep(.tag-keyword) {
+  color: var(--tooltip-keyword);
+  font-weight: 600;
+}
+
+.tooltip-long-desc :deep(.tag-keyword-major) {
+  color: var(--tooltip-keyword-major);
+  font-weight: 700;
+  font-style: italic;
+}
+
+.tooltip-long-desc :deep(.tag-keyword-stealth) {
+  color: var(--tooltip-keyword-stealth);
+  font-weight: 600;
+}
+
+.tooltip-long-desc :deep(.tag-status) {
+  color: var(--tooltip-status);
+  font-weight: 500;
+  font-style: italic;
+}
+
+.tooltip-long-desc :deep(.tag-speed),
+.tooltip-long-desc :deep(.tag-scaling) {
+  color: var(--tooltip-scaling);
+  font-style: italic;
+  font-weight: 500;
+}
+
+.tooltip-long-desc :deep(.tag-healing) {
+  color: var(--tooltip-healing);
+  font-weight: 500;
+}
+
+.tooltip-long-desc :deep(.tag-shield) {
+  color: var(--tooltip-shield);
+  font-weight: 500;
+}
+
+.tooltip-long-desc :deep(.tag-magic-damage) {
+  color: var(--tooltip-magic-damage);
+  font-weight: 500;
+}
+
+.tooltip-long-desc :deep(.tag-physical-damage) {
+  color: var(--tooltip-physical-damage);
+  font-weight: 500;
+}
+
+.tooltip-long-desc :deep(.tag-true-damage) {
+  color: var(--tooltip-true-damage);
+  font-weight: 600;
+}
+
+.tooltip-long-desc :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;
+}
+
+.tooltip-long-desc :deep(.tag-spellname) {
+  color: var(--tooltip-spellname);
+  font-weight: 600;
+  font-style: italic;
+}
+
+.tooltip-long-desc :deep(.tag-unique) {
+  color: var(--tooltip-effect-unique);
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+}
+
+.tooltip-long-desc :deep(.tag-rarity-mythic) {
+  color: var(--tooltip-effect-mythic);
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+.tooltip-long-desc :deep(.tag-rarity-legendary) {
+  color: var(--tooltip-effect-legendary);
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.tooltip-long-desc :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;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/types/cdragon.ts b/frontend/types/cdragon.ts
index 7461ea4..49efacf 100644
--- a/frontend/types/cdragon.ts
+++ b/frontend/types/cdragon.ts
@@ -32,6 +32,8 @@ type Perk = {
   id: number
   name: string
   iconPath: string
+  shortDesc?: string
+  longDesc?: string
 }
 type PerkStyle = {
   id: number