Lane-dependant stats (fix #5)
All checks were successful
pipeline / build-and-push-images (push) Successful in 23s
pipeline / deploy (push) Successful in 7s

This commit is contained in:
2024-11-29 18:26:17 +01:00
parent 5b7262877d
commit d8443efd7e
12 changed files with 233 additions and 107 deletions

View File

@@ -1,11 +1,18 @@
<script setup>
<script setup lang="ts">
const route = useRoute()
const championAlias = route.params.alias
const championAlias = route.params.alias as string
const { data : championData } = await useFetch("/api/champion/" + championAlias.toLowerCase())
const { data : championData } : {data : Ref<ChampionData>} = await useFetch("/api/champion/" + championAlias.toLowerCase())
const championId = championData.value.id
const laneState = ref(0)
const state = ref("runes")
const lane = ref(championData.value.lanes[laneState.value])
function updateState(newState : string, newLane : number) {
state.value = newState
laneState.value = newLane
lane.value = championData.value.lanes[laneState.value]
}
</script>
<template>
@@ -13,13 +20,15 @@ const state = ref("runes")
<Title>{{ championData.name }} - BuildPath</Title>
</Head>
<SideBar :champion-name="championData.name" @state-change="(newState) => state = newState"/>
<SideBar :champion-name="championData.name"
:champion-lanes="championData.lanes"
@state-change="updateState"/>
<!-- <div style="display: flex; width: fit-content; margin: auto; margin-left: 330px;"> -->
<div style="margin-top: 64px; margin-left: 339px;">
<ChampionTitle :champion-id="championId" :winrate="championData.winrate" :pickrate="championData.pickrate" :game-count="championData.gameCount" />
<RuneSelector v-if="state == 'runes' && championData.gameCount > 0" style="margin: auto; margin-top: 40px;" :runes="championData.runes" />
<ItemViewer v-if="state == 'items' && championData.gameCount > 0" style="margin:auto; margin-top: 40px;" :builds="championData.builds" />
<ChampionTitle v-if="championData.gameCount > 0" :champion-id="championId" :winrate="lane.winrate" :pickrate="lane.pickrate" :game-count="lane.count" />
<RuneSelector v-if="state == 'runes' && championData.gameCount > 0" style="margin: auto; margin-top: 40px;" :runes="lane.runes" />
<ItemViewer v-if="state == 'items' && championData.gameCount > 0" style="margin:auto; margin-top: 40px;" :builds="lane.builds" />
<h2 v-if="championData.gameCount == 0" style="margin: auto; margin-top: 20px; width: fit-content;">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" /> -->