Lint and format
This commit is contained in:
@@ -2,99 +2,112 @@
|
||||
const route = useRoute()
|
||||
const championAlias = route.params.alias as string
|
||||
|
||||
const { data : championData } : {data : Ref<ChampionData>} = await useFetch("/api/champion/" + championAlias.toLowerCase())
|
||||
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: '/' }
|
||||
]
|
||||
link: [{ rel: 'prefetch', href: '/' }]
|
||||
})
|
||||
|
||||
defineOgImageComponent('Champion', {
|
||||
title: championData.value.name,
|
||||
id: championId,
|
||||
winrate: championData.value.winrate,
|
||||
pickrate: championData.value.pickrate,
|
||||
gameCount: championData.value.gameCount,
|
||||
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'
|
||||
title: championData.value.name,
|
||||
description: 'Build path and runes for ' + championData.value.name + ' on BuildPath'
|
||||
})
|
||||
|
||||
const laneState = ref(0)
|
||||
const state = ref("runes")
|
||||
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]
|
||||
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>
|
||||
<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="alias-content-wrapper">
|
||||
<NavBar
|
||||
:champion-name="championData.name"
|
||||
:champion-lanes="championData.lanes"
|
||||
@state-change="updateState"
|
||||
/>
|
||||
|
||||
<div id="champion-content">
|
||||
<ChampionTitle id="champion-title" 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!!" />
|
||||
<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>
|
||||
|
||||
<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%;
|
||||
display: flex;
|
||||
/* min-height: 100vh; */
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
#champion-content {
|
||||
margin-top: 64px;
|
||||
margin-left: 39px;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
#alias-content-wrapper {
|
||||
flex-direction: column;
|
||||
padding-bottom: 120px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user