114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const championAlias = route.params.alias as string
|
|
|
|
const { data: championData }: { data: Ref<ChampionData> } = await useFetch(
|
|
'/api/champion/' + championAlias.toLowerCase()
|
|
)
|
|
const championId = championData.value.id
|
|
|
|
// Prefetch home page for faster navigation
|
|
useHead({
|
|
link: [{ rel: 'prefetch', href: '/' }]
|
|
})
|
|
|
|
defineOgImageComponent('Champion', {
|
|
title: championData.value.name,
|
|
id: championId,
|
|
winrate: championData.value.winrate,
|
|
pickrate: championData.value.pickrate,
|
|
gameCount: championData.value.gameCount
|
|
})
|
|
useSeoMeta({
|
|
title: championData.value.name,
|
|
description: 'Build path and runes for ' + championData.value.name + ' on BuildPath'
|
|
})
|
|
|
|
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>
|
|
<Head>
|
|
<Title>{{ championData.name }}</Title>
|
|
</Head>
|
|
|
|
<div id="alias-content-wrapper">
|
|
<NavBar
|
|
:champion-name="championData.name"
|
|
:champion-lanes="championData.lanes"
|
|
@state-change="updateState"
|
|
/>
|
|
|
|
<div id="champion-content">
|
|
<ChampionTitle
|
|
v-if="championData.gameCount > 0"
|
|
id="champion-title"
|
|
: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!!"
|
|
/>
|
|
<ItemTree
|
|
v-if="state == 'alternatives' && championData.gameCount > 0"
|
|
style="margin: auto; margin-top: 40px; width: fit-content"
|
|
:tree="lane.builds!!.tree"
|
|
/>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
#alias-content-wrapper {
|
|
display: flex;
|
|
/* min-height: 100vh; */
|
|
align-items: stretch;
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
}
|
|
#champion-content {
|
|
margin-top: 64px;
|
|
margin-left: 39px;
|
|
width: 100%;
|
|
}
|
|
@media only screen and (max-width: 650px) {
|
|
#champion-content {
|
|
margin: auto;
|
|
margin-top: 10px;
|
|
}
|
|
#champion-title {
|
|
margin: auto;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1200px) {
|
|
#alias-content-wrapper {
|
|
flex-direction: column;
|
|
padding-bottom: 120px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
</style>
|