87 lines
3.5 KiB
Vue
87 lines
3.5 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(let 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(let 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 s_tier = tierFromScaledPickrate(0.9, 1)
|
|
const a_tier = tierFromScaledPickrate(0.7, 0.9)
|
|
const b_tier = tierFromScaledPickrate(0.5, 0.7)
|
|
const c_tier = tierFromScaledPickrate(0.3, 0.5)
|
|
const d_tier = tierFromScaledPickrate(0.1, 0.3)
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</Title>
|
|
</Head>
|
|
|
|
<div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%;">
|
|
<NavSideBar :tierlist-list="true" />
|
|
|
|
<div 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: 45px; font-weight: 300;">Tierlist for</h1>
|
|
<img style="margin-left: 10px;" width="50" height="50" :src="LANE_IMAGES[lanePositionToIndex(lane)]" />
|
|
<h1 style="margin-left: 10px; font-size: 45px; font-weight: 300;">{{ POSITIONS_STR[lanePositionToIndex(lane)] }}</h1>
|
|
</div>
|
|
|
|
<TierlistTier title="S" :tier="s_tier" />
|
|
<TierlistTier title="A" :tier="a_tier" />
|
|
<TierlistTier title="B" :tier="b_tier" />
|
|
<TierlistTier title="C" :tier="c_tier" />
|
|
<TierlistTier title="D" :tier="d_tier" />
|
|
|
|
<TierlistChart style="margin-left: 100px; margin-right: 100px; margin-bottom: 100px; margin-top: 40px" :data="[s_tier, a_tier, b_tier, c_tier, d_tier]" />
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
</style> |