Using champions alias instead of id in urls

2024-11-24 12:13:00 +01:00
parent fc402120ba
commit 862e3f1b99
4 changed files with 27 additions and 13 deletions
--- a/frontend/pages/champion/[alias].vue
+++ b/frontend/pages/champion/[alias].vue
@@ -0,0 +1,25 @@
+<script setup>
+const route = useRoute()
+const championAlias = route.params.alias
+
+const { data : championData } = await useFetch("/api/champion/" + championAlias.toLowerCase())
+const championId = championData.value.id
+</script>
+
+<template>
+    <Head>
+        <Title>{{ championData.name }} builds</Title>
+    </Head>
+
+    <div style="display: flex; width: fit-content; margin: auto;">
+    <div style="margin-top: 64px;">
+        <ChampionTitle :champion-id="championId" :winrate="championData.winrate" :pickrate="championData.pickrate" :game-count="championData.gameCount" />
+        <RuneSelector v-if="championData.gameCount > 0" style="margin-top: 20px;" :runes="championData.runes" />
+        <h2 style="margin: auto; margin-top: 20px; width: fit-content;" v-if="championData.gameCount == 0">Sorry, there is no data for this champion :(</h2>
+    </div>
+    <ItemViewer v-if="championData.gameCount > 0" style="margin-top: 64px; margin-left: 64px;" :builds="championData.builds" />
+    </div>
+</template>
+
+<style>
+</style>