From 8f8fc0f1af75e1803d8c600c8662e819854a0dc7 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Sun, 25 Jan 2026 00:22:40 +0100
Subject: [PATCH] Matchups: implemented matchups

---
 frontend/components/matchup/Section.vue | 490 ++++++++++++++++++++++++
 frontend/components/nav/BottomBar.vue   | 226 +++++++----
 frontend/components/nav/SideBar.vue     |   9 +
 frontend/eslint.config.mjs              |   3 +-
 frontend/nuxt.config.ts                 |   2 +-
 frontend/pages/champion/[alias].vue     |   8 +
 frontend/pages/index.vue                |   1 +
 frontend/types/api.ts                   |  12 +
 match_collector/champion_stat.ts        |  81 +++-
 9 files changed, 761 insertions(+), 71 deletions(-)
 create mode 100644 frontend/components/matchup/Section.vue

diff --git a/frontend/components/matchup/Section.vue b/frontend/components/matchup/Section.vue
new file mode 100644
index 0000000..186e837
--- /dev/null
+++ b/frontend/components/matchup/Section.vue
@@ -0,0 +1,490 @@
+<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>
+  <div class="counter-section">
+    <div class="counter-column">
+      <h2 class="section-title">Strong Against</h2>
+      <div v-if="matchups?.length" class="counter-list">
+        <div
+          v-for="(counter, index) in matchups.slice(0, 5)"
+          :key="'strong-' + index"
+          class="counter-item"
+          @click="navigateTo(`/champion/${counter.championAlias.toLowerCase()}`)"
+        >
+          <NuxtImg
+            class="champion-icon"
+            :src="getChampionImageUrl(counter.championId)"
+            width="40"
+            height="40"
+            format="webp"
+          />
+          <div class="counter-info">
+            <span class="champion-name">{{
+              counter.championName || `Champion ${counter.championId}`
+            }}</span>
+            <span class="winrate" :style="{ color: getWinrateColor(counter.winrate) }">
+              {{ formatWinrate(counter.winrate) }} winrate
+            </span>
+          </div>
+          <div class="game-count">{{ counter.games }} games</div>
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <p>No strong counter data available</p>
+      </div>
+    </div>
+
+    <div class="counter-column">
+      <h2 class="section-title">Weak Against</h2>
+      <div v-if="matchups?.length" class="counter-list">
+        <div
+          v-for="(counter, index) in matchups.slice(matchups.length - 5, matchups.length).reverse()"
+          :key="'weak-' + index"
+          class="counter-item"
+          @click="navigateTo(`/champion/${counter.championAlias.toLowerCase()}`)"
+        >
+          <NuxtImg
+            class="champion-icon"
+            :src="getChampionImageUrl(counter.championId)"
+            width="40"
+            height="40"
+            format="webp"
+          />
+          <div class="counter-info">
+            <span class="champion-name">{{
+              counter.championName || `Champion ${counter.championId}`
+            }}</span>
+            <span class="winrate" :style="{ color: getWinrateColor(counter.winrate) }">
+              {{ formatWinrate(counter.winrate) }} win rate
+            </span>
+          </div>
+          <div class="game-count">{{ counter.games }} games</div>
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <p>No weak counter data available</p>
+      </div>
+    </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>
+  </div>
+</template>
+
+<style scoped>
+.counter-section {
+  display: flex;
+  gap: 32px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.counter-column {
+  flex: 1;
+  min-width: 300px;
+  max-width: 400px;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  margin-bottom: 16px;
+  color: var(--color-on-surface);
+  text-align: center;
+  font-weight: 600;
+}
+
+.counter-list {
+  /* background-color: var(--color-surface-darker); */
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.counter-item {
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  background-color: var(--color-surface);
+  border-radius: 8px;
+  border: 1px solid;
+  border-color: var(--color-on-surface);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.counter-item:hover {
+  background-color: var(--color-surface-lighter);
+  transform: translateY(-2px);
+}
+
+.champion-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.counter-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.champion-name {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--color-on-surface);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.winrate {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.game-count {
+  font-size: 1.1rem;
+  color: var(--color-on-surface);
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+.no-data {
+  text-align: center;
+  padding: 24px;
+  color: var(--color-on-surface);
+  background-color: var(--color-surface-darker);
+  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;
+    gap: 16px;
+  }
+
+  .counter-column {
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .counter-item {
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    margin-bottom: 6px;
+  }
+
+  .champion-icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .game-count {
+    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/nav/BottomBar.vue b/frontend/components/nav/BottomBar.vue
index dc28b56..7295c83 100644
--- a/frontend/components/nav/BottomBar.vue
+++ b/frontend/components/nav/BottomBar.vue
@@ -29,17 +29,7 @@ if (route.path.startsWith('/tierlist/')) {
 
 <template>
   <div class="navbar-container">
-    <NuxtLink
-      style="
-        display: flex;
-        width: fit-content;
-        text-decoration: none;
-        align-items: center;
-        margin-left: 10px;
-      "
-      to="/"
-      prefetch
-    >
+    <NuxtLink class="logo-link" to="/" prefetch>
       <NuxtImg
         id="navbar-logo-img"
         format="webp"
@@ -47,60 +37,65 @@ if (route.path.startsWith('/tierlist/')) {
       />
     </NuxtLink>
 
-    <div
-      v-for="(lane, i) in championLanes"
-      :key="i"
-      style="display: flex; align-items: center; margin-left: 20px"
-    >
-      <NuxtImg
-        format="webp"
-        width="40"
-        height="40"
-        :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
-      />
-      <div>
-        <h2
-          :class="
-            'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')
-          "
-          @click="handleStateChange('runes', i)"
-        >
-          Runes
-        </h2>
-        <h2
-          :class="
-            'navbar-link ' + (state == 'items' && laneState == i ? 'navbar-link-selected' : '')
-          "
-          @click="handleStateChange('items', i)"
-        >
-          Items
-        </h2>
+    <div class="nav-scroll-container">
+      <div v-for="(lane, i) in championLanes" :key="i" class="lane-section">
+        <div class="nav-links-with-icon">
+          <NuxtImg
+            class="lane-icon"
+            format="webp"
+            width="24"
+            height="24"
+            :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
+          />
+          <div class="nav-buttons">
+            <button
+              :class="['nav-button', { active: state == 'runes' && laneState == i }]"
+              @click="handleStateChange('runes', i)"
+            >
+              Runes
+            </button>
+            <button
+              :class="['nav-button', { active: state == 'items' && laneState == i }]"
+              @click="handleStateChange('items', i)"
+            >
+              Items
+            </button>
+            <button
+              :class="['nav-button', { active: state == 'alternatives' && laneState == i }]"
+              @click="handleStateChange('alternatives', i)"
+            >
+              Alt
+            </button>
+            <button
+              :class="['nav-button', { active: state == 'matchups' && laneState == i }]"
+              @click="handleStateChange('matchups', i)"
+            >
+              Matchups
+            </button>
+          </div>
+        </div>
       </div>
-    </div>
 
-    <div v-if="tierlistList == true" style="padding-left: 20px">
-      <h2 style="padding-left: 0px; font-size: 1.4rem; margin-top: 15px">Tierlist</h2>
-      <div style="display: flex">
-        <NuxtLink
-          v-for="(pos, i) in POSITIONS"
-          :key="i"
-          style="margin-top: 5px; margin-bottom: 5px"
-          :to="'/tierlist/' + pos"
-        >
-          <div
-            :class="selected == pos ? 'navbar-link-selected' : ''"
-            class="navbar-link"
-            style="display: flex; align-items: center"
+      <div v-if="tierlistList == true" class="tierlist-section">
+        <h3 class="tierlist-title">Tierlist</h3>
+        <div class="tierlist-icons">
+          <NuxtLink
+            v-for="(pos, i) in POSITIONS"
+            :key="i"
+            :to="'/tierlist/' + pos"
+            class="tierlist-icon-link"
           >
             <NuxtImg
+              class="tierlist-icon"
               format="webp"
-              width="30"
-              height="30"
+              width="24"
+              height="24"
               :src="LANE_IMAGES[i]"
               :alt="POSITIONS_STR[i]"
+              :class="{ active: selected == pos }"
             />
-          </div>
-        </NuxtLink>
+          </NuxtLink>
+        </div>
       </div>
     </div>
   </div>
@@ -109,6 +104,7 @@ if (route.path.startsWith('/tierlist/')) {
 <style>
 .navbar-container {
   display: flex;
+  align-items: center;
 
   position: fixed;
   bottom: 0;
@@ -116,27 +112,121 @@ if (route.path.startsWith('/tierlist/')) {
 
   background-color: #2b2826;
   width: 100%;
-  height: 100px;
+  height: 90px;
+  padding: 0 10px;
 
   margin: 0px;
+  box-sizing: border-box;
 }
-.navbar-link {
-  user-select: none;
-  margin: 5px;
-  padding: 5px;
-  border-radius: 8px;
+
+.nav-scroll-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  overflow-x: auto;
+  flex: 1;
+  padding-left: 10px;
+  scrollbar-width: none; /* Firefox */
 }
-.navbar-link:hover {
+
+.nav-scroll-container::-webkit-scrollbar {
+  display: none; /* Chrome, Safari */
+}
+
+.lane-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 90px;
+  flex-shrink: 0;
+}
+
+.nav-links-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.lane-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.nav-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav-button {
+  background: none;
+  border: none;
+  color: var(--color-on-surface);
+  font-size: 11px;
+  padding: 3px 6px;
+  border-radius: 5px;
   cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+
+.nav-button:hover {
   background-color: var(--color-surface-darker);
 }
-.navbar-link-selected {
+
+.nav-button.active {
   background-color: var(--color-surface);
+  color: var(--color-on-surface);
 }
+
+.tierlist-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+
+.tierlist-title {
+  font-size: 1.4rem;
+  margin: 0;
+  padding: 0;
+  color: var(--color-on-surface);
+  font-weight: 500;
+}
+
+.tierlist-icons {
+  display: flex;
+  gap: 6px;
+}
+
+.tierlist-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.tierlist-icon.active {
+  background-color: var(--color-surface);
+  border-radius: 4px;
+}
+
+.logo-link {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
 #navbar-logo-img {
-  height: 70px;
-  width: fit-content;
-  max-width: 55px;
+  height: 40px;
+  width: auto;
+  max-width: 32px;
 }
 
 @media only screen and (min-width: 1200px) {
diff --git a/frontend/components/nav/SideBar.vue b/frontend/components/nav/SideBar.vue
index f7b3189..5226c19 100644
--- a/frontend/components/nav/SideBar.vue
+++ b/frontend/components/nav/SideBar.vue
@@ -99,6 +99,15 @@ if (route.path.startsWith('/tierlist/')) {
       >
         Alternatives
       </h2>
+      <h2
+        :class="
+          'sidebar-link ' + (state == 'matchups' && laneState == i ? 'sidebar-link-selected' : '')
+        "
+        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        @click="handleStateChange('matchups', i)"
+      >
+        Matchups
+      </h2>
     </div>
 
     <div v-if="tierlistList == true" style="margin-top: 30px">
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index f35df02..6144aa3 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -29,7 +29,8 @@ export default withNuxt([
         Champion: 'readonly',
         ChampionsResponse: 'readonly',
         ChampionResponse: 'readonly',
-        ItemResponse: 'readonly'
+        ItemResponse: 'readonly',
+        MatchupData: 'readonly'
       }
     },
     rules: {
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 2f68045..6e4636a 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -50,7 +50,7 @@ export default defineNuxtConfig({
 
   fonts: {
     defaults: {
-      weights: [200, 400]
+      weights: [200, 400, 500, 600]
     }
   }
 })
diff --git a/frontend/pages/champion/[alias].vue b/frontend/pages/champion/[alias].vue
index 0860e2b..9f62470 100644
--- a/frontend/pages/champion/[alias].vue
+++ b/frontend/pages/champion/[alias].vue
@@ -185,6 +185,14 @@ function fetchChampionData() {
               :tree="lane.builds.tree"
             />
           </ClientOnly>
+          <ClientOnly>
+            <LazyMatchupSection
+              v-if="state == 'matchups' && championData.gameCount > 0 && lane?.matchups"
+              style="margin: auto; margin-top: 40px"
+              :matchups="lane.matchups"
+              :champion-id="championId"
+            />
+          </ClientOnly>
           <h2
             v-if="championData.gameCount == 0"
             style="margin: auto; margin-top: 20px; width: fit-content"
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index f60efe5..21cf92d 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -38,6 +38,7 @@
   .index-main-content {
     flex-direction: column;
     margin-top: 5px;
+    padding-bottom: 100px;
   }
   .index-champion-selector {
     width: 100%;
diff --git a/frontend/types/api.ts b/frontend/types/api.ts
index 112d9c7..533d20e 100644
--- a/frontend/types/api.ts
+++ b/frontend/types/api.ts
@@ -31,6 +31,17 @@ declare global {
     pickrate: number
   }
 
+  /**
+   * Represents counter data for a champion
+   */
+  interface MatchupData {
+    championId: number
+    winrate: number
+    games: number
+    championName: string
+    championAlias: string
+  }
+
   /**
    * Represents lane-specific champion data
    */
@@ -43,6 +54,7 @@ declare global {
     pickrate: number
     runes?: Rune[]
     builds?: Builds
+    matchups?: MatchupData[]
   }
 
   /**
diff --git a/match_collector/champion_stat.ts b/match_collector/champion_stat.ts
index 775599a..fc5f8bb 100644
--- a/match_collector/champion_stat.ts
+++ b/match_collector/champion_stat.ts
@@ -54,6 +54,14 @@ type Champion = {
   name: string
   alias: string
 }
+type MatchupData = {
+  championId: number
+  winrate: number
+  games: number
+  championName: string
+  championAlias: string
+}
+
 type LaneData = {
   data: string
   count: number
@@ -63,6 +71,7 @@ type LaneData = {
   pickrate: number
   runes: Array<Rune>
   builds: Builds
+  matchups?: Array<MatchupData>
 }
 type ChampionData = {
   champion: Champion
@@ -231,11 +240,17 @@ function handleMatch(match: any, champions: Map<number, ChampionData>) {
         winningMatches: 0,
         losingMatches: 0,
         winrate: 0,
-        pickrate: 0
+        pickrate: 0,
+        matchups: []
       }
       champion.lanes.push(lane)
     } else lane.count += 1
 
+    // Initialize matchups if not present
+    if (!lane.matchups) {
+      lane.matchups = []
+    }
+
     // Winrate
     if (participant.win) {
       champion.winningMatches++
@@ -245,6 +260,38 @@ function handleMatch(match: any, champions: Map<number, ChampionData>) {
       lane.losingMatches++
     }
 
+    // Track counter matchups - find opponent in same lane
+    const opponentTeam = participant.teamId === 100 ? 200 : 100
+    const opponent = match.info.participants.find(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (p: any) => p.teamId === opponentTeam && p.teamPosition === participant.teamPosition
+    )
+
+    if (opponent) {
+      const opponentChampionId = opponent.championId
+
+      // Track this matchup for current champion
+      const matchup = lane.matchups.find(c => c.championId === opponentChampionId)
+      if (matchup) {
+        matchup.games += 1
+        if (participant.win) {
+          matchup.winrate = (matchup.winrate * (matchup.games - 1) + 1) / matchup.games
+        } else {
+          matchup.winrate = (matchup.winrate * (matchup.games - 1)) / matchup.games
+        }
+      } else {
+        const opponentChampion = champions.get(opponentChampionId)
+
+        lane.matchups.push({
+          championId: opponentChampionId,
+          winrate: participant.win ? 1 : 0,
+          games: 1,
+          championName: opponentChampion.champion.name,
+          championAlias: opponentChampion.champion.alias
+        })
+      }
+    }
+
     // Runes
     handleParticipantRunes(participant, lane.runes)
 
@@ -326,6 +373,38 @@ async function finalizeChampionStats(champion: ChampionData, totalMatches: numbe
     lane.pickrate = lane.count / totalMatches
   }
 
+  // Sort matchups by score (games * winrate) in descending order
+  for (const lane of champion.lanes) {
+    if (lane.matchups && lane.matchups.length > 0) {
+      // Filter out matchups with insufficient games (minimum 5 games)
+      const filteredMatchups = lane.matchups.filter(m => m.games >= 5)
+
+      // Sort by score (games * (winrate - 0.5)^2) descending
+      filteredMatchups.sort((a, b) => {
+        // Handle special case of exactly 50% winrate
+        if (a.winrate === 0.5 && b.winrate === 0.5) {
+          // Both have 50% winrate, sort by games (more games first)
+          return b.games - a.games
+        }
+        if (a.winrate === 0.5 || b.winrate === 0.5) {
+          // a has 50% winrate, b doesn't - b comes first
+          return b.winrate - a.winrate
+        }
+
+        if (a.winrate > 0.5 && b.winrate < 0.5) return -1
+        if (a.winrate < 0.5 && b.winrate > 0.5) return 1
+        if (a.winrate > 0.5) {
+          return b.games * (b.winrate - 0.5) ** 2 - a.games * (a.winrate - 0.5) ** 2
+        } else {
+          return -1 * b.games * (0.5 - b.winrate) ** 2 - -1 * a.games * (0.5 - a.winrate) ** 2
+        }
+      })
+
+      // Limit to top matchups (or keep all if we want comprehensive data)
+      lane.matchups = filteredMatchups
+    }
+  }
+
   return {
     name: champion.champion.name,
     alias: champion.champion.alias.toLowerCase(),