From 0a983fa996d4286c60b73b263bf83f3473f51aab Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Sun, 25 Jan 2026 00:42:45 +0100
Subject: [PATCH] refactor: take matchup spectrum out of section

---
 frontend/components/matchup/Section.vue  | 276 +-------------------
 frontend/components/matchup/Spectrum.vue | 304 +++++++++++++++++++++++
 2 files changed, 306 insertions(+), 274 deletions(-)
 create mode 100644 frontend/components/matchup/Spectrum.vue

diff --git a/frontend/components/matchup/Section.vue b/frontend/components/matchup/Section.vue
index 186e837..a128b5e 100644
--- a/frontend/components/matchup/Section.vue
+++ b/frontend/components/matchup/Section.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { CDRAGON_BASE } from '~/utils/cdragon'
+import MatchupSpectrum from './Spectrum.vue'
 
 defineProps<{
   matchups?: Array<MatchupData>
@@ -20,42 +20,6 @@ function getWinrateColor(winrate: number): string {
 function getChampionImageUrl(championId: number): string {
   return `${CDRAGON_BASE}plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${championId}.png`
 }
-
-// Get background color based on winrate for spectrum
-function getSpectrumBackground(winrate: number): string {
-  if (winrate > 0.52) return 'rgba(76, 175, 80, 0.2)' // Light green
-  if (winrate < 0.48) return 'rgba(244, 67, 54, 0.2)' // Light red
-  return 'rgba(255, 255, 255, 0.1)' // Light gray
-}
-
-// Spectrum scrolling functionality
-const spectrumContainer = ref<HTMLDivElement | null>(null)
-
-function handleWheelScroll(event: WheelEvent) {
-  if (spectrumContainer.value) {
-    // Horizontal scrolling with mouse wheel
-    spectrumContainer.value.scrollLeft += event.deltaY
-    event.preventDefault()
-  }
-}
-
-function scrollLeft() {
-  if (spectrumContainer.value) {
-    spectrumContainer.value.scrollBy({
-      left: -200,
-      behavior: 'smooth'
-    })
-  }
-}
-
-function scrollRight() {
-  if (spectrumContainer.value) {
-    spectrumContainer.value.scrollBy({
-      left: 200,
-      behavior: 'smooth'
-    })
-  }
-}
 </script>
 
 <template>
@@ -125,44 +89,7 @@ function scrollRight() {
     </div>
 
     <!-- Matchup Spectrum - Full range from easiest to hardest -->
-    <div v-if="matchups?.length" class="spectrum-section">
-      <h3 class="spectrum-title">Matchup Spectrum</h3>
-      <!-- Navigation buttons - moved outside scrollable container -->
-      <div class="spectrum-nav spectrum-nav-left" @click="scrollLeft">
-        <span>‹</span>
-      </div>
-      <div class="spectrum-nav spectrum-nav-right" @click="scrollRight">
-        <span>›</span>
-      </div>
-
-      <div ref="spectrumContainer" class="spectrum-container" @wheel="handleWheelScroll">
-        <!-- Gradient overlays for scroll indication -->
-        <div class="spectrum-overlay spectrum-overlay-left"></div>
-        <div class="spectrum-overlay spectrum-overlay-right"></div>
-
-        <div
-          v-for="(matchup, index) in matchups"
-          :key="'spectrum-' + index"
-          class="spectrum-item"
-          :style="{ backgroundColor: getSpectrumBackground(matchup.winrate) }"
-        >
-          <NuxtImg
-            class="spectrum-icon"
-            :src="getChampionImageUrl(matchup.championId)"
-            width="32"
-            height="32"
-            format="webp"
-          />
-          <span class="spectrum-winrate" :style="{ color: getWinrateColor(matchup.winrate) }">
-            {{ formatWinrate(matchup.winrate) }}
-          </span>
-        </div>
-      </div>
-      <div class="spectrum-legend">
-        <span class="legend-easy">Easiest</span>
-        <span class="legend-hard">Hardest</span>
-      </div>
-    </div>
+    <MatchupSpectrum :matchups="matchups" :champion-id="championId" />
   </div>
 </template>
 
@@ -259,174 +186,6 @@ function scrollRight() {
   border-radius: 12px;
 }
 
-/* Spectrum Section Styles */
-.spectrum-section {
-  width: 90%;
-  max-width: 900px;
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 48px;
-  position: relative;
-}
-
-.spectrum-title {
-  font-size: 1.6rem;
-  color: var(--color-on-surface);
-  text-align: center;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.spectrum-container {
-  display: flex;
-  overflow-x: auto;
-  gap: 8px;
-  padding: 8px 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-surface) var(--color-surface-darker);
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  position: relative;
-  user-select: none;
-}
-
-/* Enhanced scrollbar styling */
-.spectrum-container::-webkit-scrollbar {
-  height: 10px;
-}
-
-.spectrum-container::-webkit-scrollbar-thumb {
-  background-color: var(--color-surface);
-  border-radius: 5px;
-  border: 2px solid var(--color-surface-darker);
-  transition: all 0.3s ease;
-}
-
-.spectrum-container::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-surface-lighter);
-  border-width: 3px;
-}
-
-.spectrum-container::-webkit-scrollbar-track {
-  background-color: var(--color-surface-darker);
-  border-radius: 5px;
-}
-
-/* Gradient overlays for scroll indication */
-.spectrum-overlay {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 60px;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.spectrum-overlay-left {
-  left: 0;
-  background: linear-gradient(to right, var(--color-surface-container) 30%, transparent 100%);
-}
-
-.spectrum-overlay-right {
-  right: 0;
-  background: linear-gradient(to left, var(--color-surface-container) 30%, transparent 100%);
-}
-
-/* Scroll navigation buttons */
-.spectrum-nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.6);
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  opacity: 0;
-  z-index: 2;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.spectrum-nav:hover {
-  background-color: rgba(0, 0, 0, 0.8);
-  transform: translateY(-50%) scale(1.1);
-}
-
-.spectrum-nav span {
-  color: white;
-  font-size: 1.4rem;
-  font-weight: bold;
-  line-height: 1;
-  user-select: none;
-}
-
-.spectrum-nav-left {
-  left: 4px;
-}
-
-.spectrum-nav-right {
-  right: 4px;
-}
-
-/* Show navigation buttons on hover */
-.spectrum-section:hover .spectrum-nav {
-  opacity: 1;
-}
-
-.spectrum-item {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 60px;
-}
-
-.spectrum-item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.spectrum-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-}
-
-.spectrum-winrate {
-  font-size: 1rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.spectrum-legend {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
-  font-size: 1.1rem;
-  color: var(--color-on-surface);
-}
-
-.legend-easy {
-  color: #4caf50;
-  font-weight: 500;
-}
-
-.legend-hard {
-  color: #f44336;
-  font-weight: 500;
-}
-
 @media (max-width: 768px) {
   .counter-section {
     flex-direction: column;
@@ -455,36 +214,5 @@ function scrollRight() {
     margin-left: 0;
     font-size: 1rem;
   }
-
-  .spectrum-section {
-    width: 100%;
-    max-width: none;
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .spectrum-container {
-    padding: 8px 0;
-    width: 100%;
-    overflow-x: auto;
-  }
-
-  .spectrum-item {
-    min-width: 50px;
-    gap: 4px;
-  }
-
-  .spectrum-icon {
-    width: 28px;
-    height: 28px;
-  }
-
-  .spectrum-winrate {
-    font-size: 0.9rem;
-  }
-
-  .spectrum-legend {
-    padding: 0 8px;
-  }
 }
 </style>
diff --git a/frontend/components/matchup/Spectrum.vue b/frontend/components/matchup/Spectrum.vue
new file mode 100644
index 0000000..c53fcf3
--- /dev/null
+++ b/frontend/components/matchup/Spectrum.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CDRAGON_BASE } from '~/utils/cdragon'
+
+defineProps<{
+  matchups?: Array<MatchupData>
+  championId: number
+}>()
+
+function formatWinrate(winrate: number): string {
+  return (winrate * 100).toFixed(1) + '%'
+}
+
+function getWinrateColor(winrate: number): string {
+  if (winrate > 0.52) return '#4CAF50' // Green for strong matchups
+  if (winrate < 0.48) return '#F44336' // Red for weak matchups
+  return '#FFFFFF' // White for neutral matchups
+}
+
+function getChampionImageUrl(championId: number): string {
+  return `${CDRAGON_BASE}plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${championId}.png`
+}
+
+// Get background color based on winrate for spectrum
+function getSpectrumBackground(winrate: number): string {
+  if (winrate > 0.52) return 'rgba(76, 175, 80, 0.2)' // Light green
+  if (winrate < 0.48) return 'rgba(244, 67, 54, 0.2)' // Light red
+  return 'rgba(255, 255, 255, 0.1)' // Light gray
+}
+
+// Spectrum scrolling functionality
+const spectrumContainer = ref<HTMLDivElement | null>(null)
+
+function handleWheelScroll(event: WheelEvent) {
+  if (spectrumContainer.value) {
+    // Horizontal scrolling with mouse wheel
+    spectrumContainer.value.scrollLeft += event.deltaY
+    event.preventDefault()
+  }
+}
+
+function scrollLeft() {
+  if (spectrumContainer.value) {
+    spectrumContainer.value.scrollBy({
+      left: -200,
+      behavior: 'smooth'
+    })
+  }
+}
+
+function scrollRight() {
+  if (spectrumContainer.value) {
+    spectrumContainer.value.scrollBy({
+      left: 200,
+      behavior: 'smooth'
+    })
+  }
+}
+</script>
+
+<template>
+  <!-- Matchup Spectrum - Full range from easiest to hardest -->
+  <div v-if="matchups?.length" class="spectrum-section">
+    <h3 class="spectrum-title">Matchup Spectrum</h3>
+    <!-- Navigation buttons - moved outside scrollable container -->
+    <div class="spectrum-nav spectrum-nav-left" @click="scrollLeft">
+      <span>‹</span>
+    </div>
+    <div class="spectrum-nav spectrum-nav-right" @click="scrollRight">
+      <span>›</span>
+    </div>
+
+    <div ref="spectrumContainer" class="spectrum-container" @wheel="handleWheelScroll">
+      <!-- Gradient overlays for scroll indication -->
+      <div class="spectrum-overlay spectrum-overlay-left"></div>
+      <div class="spectrum-overlay spectrum-overlay-right"></div>
+
+      <div
+        v-for="(matchup, index) in matchups"
+        :key="'spectrum-' + index"
+        class="spectrum-item"
+        :style="{ backgroundColor: getSpectrumBackground(matchup.winrate) }"
+      >
+        <NuxtImg
+          class="spectrum-icon"
+          :src="getChampionImageUrl(matchup.championId)"
+          width="32"
+          height="32"
+          format="webp"
+        />
+        <span class="spectrum-winrate" :style="{ color: getWinrateColor(matchup.winrate) }">
+          {{ formatWinrate(matchup.winrate) }}
+        </span>
+      </div>
+    </div>
+    <div class="spectrum-legend">
+      <span class="legend-easy">Easiest</span>
+      <span class="legend-hard">Hardest</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Spectrum Section Styles */
+.spectrum-section {
+  width: 90%;
+  max-width: 900px;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 48px;
+  position: relative;
+}
+
+.spectrum-title {
+  font-size: 1.6rem;
+  color: var(--color-on-surface);
+  text-align: center;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.spectrum-container {
+  display: flex;
+  overflow-x: auto;
+  gap: 8px;
+  padding: 8px 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-surface) var(--color-surface-darker);
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+  user-select: none;
+}
+
+/* Enhanced scrollbar styling */
+.spectrum-container::-webkit-scrollbar {
+  height: 10px;
+}
+
+.spectrum-container::-webkit-scrollbar-thumb {
+  background-color: var(--color-surface);
+  border-radius: 5px;
+  border: 2px solid var(--color-surface-darker);
+  transition: all 0.3s ease;
+}
+
+.spectrum-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-surface-lighter);
+  border-width: 3px;
+}
+
+.spectrum-container::-webkit-scrollbar-track {
+  background-color: var(--color-surface-darker);
+  border-radius: 5px;
+}
+
+/* Gradient overlays for scroll indication */
+.spectrum-overlay {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 60px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.spectrum-overlay-left {
+  left: 0;
+  background: linear-gradient(to right, var(--color-surface-container) 30%, transparent 100%);
+}
+
+.spectrum-overlay-right {
+  right: 0;
+  background: linear-gradient(to left, var(--color-surface-container) 30%, transparent 100%);
+}
+
+/* Scroll navigation buttons */
+.spectrum-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  opacity: 0;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.spectrum-nav:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.spectrum-nav span {
+  color: white;
+  font-size: 1.4rem;
+  font-weight: bold;
+  line-height: 1;
+  user-select: none;
+}
+
+.spectrum-nav-left {
+  left: 4px;
+}
+
+.spectrum-nav-right {
+  right: 4px;
+}
+
+/* Show navigation buttons on hover */
+.spectrum-section:hover .spectrum-nav {
+  opacity: 1;
+}
+
+.spectrum-item {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 60px;
+}
+
+.spectrum-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.spectrum-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.spectrum-winrate {
+  font-size: 1rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.spectrum-legend {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  font-size: 1.1rem;
+  color: var(--color-on-surface);
+}
+
+.legend-easy {
+  color: #4caf50;
+  font-weight: 500;
+}
+
+.legend-hard {
+  color: #f44336;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .spectrum-section {
+    width: 100%;
+    max-width: none;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .spectrum-container {
+    padding: 8px 0;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .spectrum-item {
+    min-width: 50px;
+    gap: 4px;
+  }
+
+  .spectrum-icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .spectrum-winrate {
+    font-size: 0.9rem;
+  }
+
+  .spectrum-legend {
+    padding: 0 8px;
+  }
+}
+</style>