feat/frontend: display patches in new format

frontend/components/nav/SideBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'
+import { displayPatch } from '~/utils/helpers'
 
 import type { LaneData } from 'match_collector'
 
@@ -132,7 +133,9 @@ if (route.path.startsWith('/tierlist/')) {
 
     <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px">
       <template v-if="stats">
-        <h3 style="font-size: 18px; font-weight: 200">Patch {{ stats.patch }}</h3>
+        <h3 style="font-size: 18px; font-weight: 200">
+          Patch {{ displayPatch(String(stats.patch)) }}
+        </h3>
         <h3 style="font-size: 18px; font-weight: 200">{{ stats.count }} games</h3>
       </template>
       <template v-else>

frontend/utils/helpers.ts

@@ -100,6 +100,19 @@ export function getRuneImageUrl(runeId: number): string {
   return `${CDRAGON_BASE}plugins/rcp-be-lol-game-data/global/default/v1/perks/${runeId}.png`
 }
 
+/**
+ * Format a patch version for display.
+ * Riot moved from the old "16.6" patch format to "26.6", so 10 is added
+ * to the major version before showing it to the user.
+ * @param patch Patch version string (e.g. "16.6")
+ * @returns Displayable patch version string (e.g. "26.6")
+ */
+export function displayPatch(patch: string): string {
+  const match = /^(\d+)(\..*)?$/.exec(patch)
+  if (!match) return patch
+  return `${Number(match[1]) + 10}${match[2] ?? ''}`
+}
+
 /**
  * Format large numbers with abbreviations (K, M)
  * @param num Number to format