Frontend updates: caching basic data (json) from CDragon

Implement caching in the patch_detector, consume the cache from API routes in frontend

frontend/components/ChampionSelector.vue

@@ -2,8 +2,6 @@
 import { debounce, isEmpty } from '~/utils/helpers'
 
 // Constants
-const CDRAGON_CHAMPIONS_URL =
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json'
 const CHAMPIONS_API_URL = '/api/champions'
 
 // State
@@ -11,7 +9,7 @@ const {
   data: championsData,
   pending: loadingChampions,
   error: championsError
-} = useFetch(CDRAGON_CHAMPIONS_URL, {
+} = useFetch('/api/cdragon/champion-summary', {
   key: 'champions-data',
   lazy: false,
   server: false // Disable server-side fetching to avoid hydration issues

frontend/components/build/Viewer.vue

@@ -13,16 +13,11 @@ const props = defineProps<{
   summonerSpells?: Array<{ id: number; count: number; pickrate: number }> // API data when available
 }>()
 
-// Constants
-const ITEMS_API_URL = CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json'
-const SUMMONER_SPELLS_URL =
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/summoner-spells.json'
-
 // State
 const currentlySelectedBuild = ref(0)
 
-// Fetch items
-const { data: items } = useFetch<Array<Item>>(ITEMS_API_URL, {
+// Fetch items from cached API
+const { data: items } = useFetch<Array<Item>>('/api/cdragon/items', {
   lazy: true,
   server: false
 })
@@ -44,11 +39,14 @@ watch(
   { immediate: true }
 )
 
-// Fetch summoner spells
-const { data: summonerSpellsData } = useFetch<Array<SummonerSpell>>(SUMMONER_SPELLS_URL, {
-  lazy: true,
-  server: false
-})
+// Fetch summoner spells from cached API
+const { data: summonerSpellsData } = useFetch<Array<SummonerSpell>>(
+  '/api/cdragon/summoner-spells',
+  {
+    lazy: true,
+    server: false
+  }
+)
 const summonerSpellMap = ref<Map<number, SummonerSpell>>(new Map())
 
 watch(
@@ -143,17 +141,13 @@ const primaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
 const secondaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
 const keystoneIds: Ref<Array<number>> = ref(Array(props.runes.length))
 
-const { data: perks_data }: PerksResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perks.json'
-)
+const { data: perks_data }: PerksResponse = await useFetch('/api/cdragon/perks')
 const perks = reactive(new Map())
 for (const perk of perks_data.value) {
   perks.set(perk.id, perk)
 }
 
-const { data: stylesData }: PerkStylesResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json'
-)
+const { data: stylesData }: PerkStylesResponse = await useFetch('/api/cdragon/perkstyles')
 
 function refreshStylesKeystones() {
   for (const style of stylesData.value.styles) {

frontend/components/item/Tree.vue

@@ -11,13 +11,10 @@ const emit = defineEmits<{
   refresh: []
 }>()
 
-const { data: items } = useFetch<Array<{ id: number; iconPath: string }>>(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json',
-  {
-    lazy: true, // Don't block rendering
-    server: false // Client-side only
-  }
-)
+const { data: items } = useFetch<Array<{ id: number; iconPath: string }>>('/api/cdragon/items', {
+  lazy: true, // Don't block rendering
+  server: false // Client-side only
+})
 
 // Create item map reactively
 const itemMap = reactive(new Map<number, { id: number; iconPath: string }>())

frontend/components/item/Viewer.vue

@@ -7,15 +7,12 @@ const props = defineProps<{
   error?: boolean
 }>()
 
-// Constants
-const ITEMS_API_URL = CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json'
-
-// State
+// State - use cached API endpoint instead of direct CDragon fetch
 const {
   data: items,
   pending: loadingItems,
   error: itemsError
-} = useFetch(ITEMS_API_URL, {
+} = useFetch('/api/cdragon/items', {
   lazy: true, // Don't block rendering
   server: false // Client-side only
 })

frontend/components/rune/Page.vue

@@ -8,17 +8,13 @@ const props = defineProps<{
 const primaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
 const secondaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
 
-const { data: perks_data }: PerksResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perks.json'
-)
+const { data: perks_data }: PerksResponse = await useFetch('/api/cdragon/perks')
 const perks = reactive(new Map())
 for (const perk of perks_data.value) {
   perks.set(perk.id, perk)
 }
 
-const { data: stylesData }: PerkStylesResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json'
-)
+const { data: stylesData }: PerkStylesResponse = await useFetch('/api/cdragon/perkstyles')
 watch(
   () => props.primaryStyleId,
   async (_newP, _oldP) => {

frontend/components/rune/Selector.vue

@@ -14,17 +14,14 @@ const primaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
 const secondaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
 const keystoneIds: Ref<Array<number>> = ref(Array(props.runes.length))
 
-const { data: perks_data }: PerksResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perks.json'
-)
+// Use cached API endpoints instead of direct CDragon fetch
+const { data: perks_data }: PerksResponse = await useFetch('/api/cdragon/perks')
 const perks = reactive(new Map())
 for (const perk of perks_data.value) {
   perks.set(perk.id, perk)
 }
 
-const { data: stylesData }: PerkStylesResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json'
-)
+const { data: stylesData }: PerkStylesResponse = await useFetch('/api/cdragon/perkstyles')
 watch(
   () => props.runes,
   (_newRunes, _oldRunes) => {