137 lines
4.1 KiB
Vue
137 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'
|
|
|
|
const route = useRoute()
|
|
const lane = route.params.lane as string
|
|
|
|
const { data: championsData }: ChampionsResponse = await useFetch(
|
|
CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json'
|
|
)
|
|
|
|
const { data: championsLanes }: { data: Ref<Array<ChampionData>> } =
|
|
await useFetch('/api/champions')
|
|
const infoMap: Map<string, ChampionData> = new Map()
|
|
for (const champion of championsLanes.value) {
|
|
infoMap.set(champion.alias, champion)
|
|
}
|
|
|
|
const champions = championsData.value.slice(1).filter(champion => {
|
|
const championData: ChampionData | undefined = infoMap.get(champion.alias.toLowerCase())
|
|
if (championData == undefined) return false
|
|
|
|
const lanes = championData.lanes
|
|
return lanes.reduce(
|
|
(acc: boolean, current: { data: string; count: number }) =>
|
|
acc || current.data.toLowerCase() == lane.toLowerCase(),
|
|
false
|
|
)
|
|
})
|
|
|
|
const allChampions = champions
|
|
.map(x => {
|
|
const championData: ChampionData = infoMap.get(x.alias.toLowerCase())!
|
|
|
|
let currentLane = championData.lanes[0]
|
|
for (const championLane of championData.lanes) {
|
|
if (championLane.data.toLowerCase() == lane.toLowerCase()) {
|
|
currentLane = championLane
|
|
break
|
|
}
|
|
}
|
|
|
|
return { lane: currentLane, champion: x }
|
|
})
|
|
.sort((a, b) => b.lane.pickrate - a.lane.pickrate)
|
|
|
|
const p_min = Math.min(...allChampions.map(x => x.lane.pickrate))
|
|
const p_max = Math.max(...allChampions.map(x => x.lane.pickrate))
|
|
|
|
allChampions.map(
|
|
x =>
|
|
((x as { lane: LaneData; champion: Champion; scaledPickrate: number }).scaledPickrate =
|
|
(x.lane.pickrate - p_min) / (p_max - p_min))
|
|
)
|
|
allChampions.sort((a, b) => b.lane.pickrate - a.lane.pickrate)
|
|
function tierFromScaledPickrate(min: number, max: number) {
|
|
return (
|
|
allChampions as Array<{ lane: LaneData; champion: Champion; scaledPickrate: number }>
|
|
).filter(({ scaledPickrate: scaledPickrate }) => {
|
|
return scaledPickrate > min && scaledPickrate <= max
|
|
})
|
|
}
|
|
|
|
const tiers: Array<{ title: string; data: Array<{ lane: LaneData; champion: Champion }> }> = []
|
|
tiers.push({ title: 'S', data: tierFromScaledPickrate(0.9, 1) })
|
|
tiers.push({ title: 'A', data: tierFromScaledPickrate(0.7, 0.9) })
|
|
tiers.push({ title: 'B', data: tierFromScaledPickrate(0.5, 0.7) })
|
|
tiers.push({ title: 'C', data: tierFromScaledPickrate(0.3, 0.5) })
|
|
tiers.push({ title: 'D', data: tierFromScaledPickrate(0.1, 0.3) })
|
|
tiers.push({ title: 'F', data: tierFromScaledPickrate(0, 0.1) })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tierlist-root">
|
|
<Head>
|
|
<Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</Title>
|
|
</Head>
|
|
|
|
<div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%">
|
|
<NavBar :tierlist-list="true" />
|
|
|
|
<div id="tierlist-container" style="margin-left: 10px; width: 100%; overflow-y: scroll">
|
|
<div
|
|
style="
|
|
margin-left: 0px;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
margin-bottom: 30px;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">Tierlist for</h1>
|
|
<NuxtImg
|
|
format="webp"
|
|
style="margin-left: 10px"
|
|
width="50"
|
|
height="50"
|
|
:src="LANE_IMAGES[lanePositionToIndex(lane)]"
|
|
/>
|
|
<h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">
|
|
{{ POSITIONS_STR[lanePositionToIndex(lane)] }}
|
|
</h1>
|
|
</div>
|
|
|
|
<TierlistTier
|
|
v-for="tier in tiers"
|
|
:key="tier.title"
|
|
:title="tier.title"
|
|
:tier="tier.data"
|
|
/>
|
|
|
|
<TierlistChart id="chart" :data="tiers" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#chart {
|
|
margin-left: 100px;
|
|
margin-right: 100px;
|
|
margin-bottom: 100px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
@media only screen and (max-width: 450px) {
|
|
#chart {
|
|
margin-left: 2px;
|
|
margin-right: 12px;
|
|
margin-bottom: 40px;
|
|
margin-top: 40px;
|
|
}
|
|
#tierlist-container {
|
|
padding-bottom: 120px;
|
|
}
|
|
}
|
|
</style>
|