81 lines
2.3 KiB
Vue
81 lines
2.3 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
|
|
|
|
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>
|
|
|
|
<NavBar :champion-name="championData.name"
|
|
:champion-lanes="championData.lanes"
|
|
@state-change="updateState"/>
|
|
|
|
<div id="alias-content-wrapper">
|
|
|
|
<SideBar :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!!" />
|
|
<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;
|
|
margin-bottom: 120px;
|
|
}
|
|
}
|
|
</style> |