Files
buildpath/frontend/pages/tierlist/[lane].vue
vhaudiquet a56b81835f
All checks were successful
pipeline / build-and-push-images (push) Successful in 26s
pipeline / deploy (push) Successful in 7s
Sidebar and tierlist changes
2024-11-30 13:06:44 +01:00

76 lines
3.0 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)
})
function tierFromPickrate(pickrate: number, previousTier: number) {
return champions.filter((champion) => {
const championData : ChampionData | undefined = infoMap.get(champion.alias.toLowerCase())
if(championData == undefined) return false;
let currentLane = championData.lanes[0]
for(let championLane of championData.lanes) {
if(championLane.data.toLowerCase() == lane.toLowerCase()) {
currentLane = championLane
break
}
}
return currentLane.pickrate > pickrate && currentLane.pickrate < previousTier
}).sort((a, b) => infoMap.get(b.alias.toLowerCase())?.pickrate!! - infoMap.get(a.alias.toLowerCase())?.pickrate!!)
}
const s_tier = tierFromPickrate(0.22, 1)
const a_tier = tierFromPickrate(0.15, 0.22)
const b_tier = tierFromPickrate(0.10, 0.15)
const c_tier = tierFromPickrate(0.05, 0.10)
const d_tier = tierFromPickrate(0, 0.05)
</script>
<template>
<Head>
<Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }} - BuildPath</Title>
</Head>
<div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%;">
<SideBar/>
<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" />
</div>
</div>
</template>
<style>
</style>