99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
defineOgImage({
|
|
url: "/buildpath-high-resolution-logo-transparent.png",
|
|
width: 192,
|
|
height: 245
|
|
})
|
|
|
|
import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon';
|
|
|
|
const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>Home</Title>
|
|
</Head>
|
|
|
|
<Logo id="index-logo"/>
|
|
|
|
<div class="index-main-content">
|
|
|
|
<div class="index-tierlist-info-container">
|
|
<div id="index-tierlists">
|
|
<h2 style="font-size: 3.4rem; margin-bottom: 10px;">Tierlist</h2>
|
|
<NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
|
|
<div style="display: flex; align-items: center;">
|
|
<img width="40" height="40" :src="LANE_IMAGES[i]" />
|
|
<h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
<div style="margin: auto; margin-left: 50px; margin-top: 50px; width: fit-content; max-width: 300px;">
|
|
<h3 id="index-statp" style="font-size: 30px; font-weight: 200;">
|
|
BuildPath analyzed {{ stats.count }} games from challenger players on patch {{ stats.patch }}
|
|
</h3>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<ChampionSelector class="index-champion-selector"/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
#index-logo {
|
|
margin: auto;
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
}
|
|
.index-main-content {
|
|
display: flex;
|
|
margin-top: 104px;
|
|
}
|
|
.index-champion-selector {
|
|
width: 80%;
|
|
}
|
|
.index-tierlist-info-container {
|
|
margin: auto;
|
|
margin-top: 0px;
|
|
width: fit-content;
|
|
}
|
|
#index-tierlists {
|
|
margin: auto;
|
|
margin-top: 10px;
|
|
width: fit-content;
|
|
}
|
|
@media only screen and (max-width: 1240px) {
|
|
.index-main-content {
|
|
flex-direction: column;
|
|
margin-top: 5px;
|
|
}
|
|
.index-champion-selector {
|
|
width: 100%;
|
|
}
|
|
.index-tierlist-info-container {
|
|
display: flex;
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
#index-logo {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
#index-statp {
|
|
display: none;
|
|
}
|
|
.index-tierlist-info-container {
|
|
margin-bottom: 10px;
|
|
margin-left: 10px;
|
|
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
</style>
|