vhaudiquet/buildpath
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Added basic tierlist (fix #4)
All checks were successful
pipeline / build-and-push-images (push) Successful in 25s
Details
pipeline / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-11-29 21:40:28 +01:00
parent e8743b5fab
commit 1bc273571f
2 changed files with 144 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/components/ChampionSelector.vue
View File

@@ -6,8 +6,8 @@ const champions = championsData.value.slice(1).sort((a, b) => {
return 0; return 0;
}) })
const {data: championsLanes} : {data: Ref<any>} = await useFetch("/api/champions") const {data: championsLanes} : {data: Ref<Array<ChampionData>>} = await useFetch("/api/champions")
const lanesMap = new Map() const lanesMap : Map<string, Array<LaneData>> = new Map()
for(let champion of championsLanes.value) { for(let champion of championsLanes.value) {
lanesMap.set(champion.alias, champion.lanes) lanesMap.set(champion.alias, champion.lanes)
} }
@@ -39,7 +39,7 @@ function filterToLane(filter: number) {
function onLaneFilterChange(newValue: number) { function onLaneFilterChange(newValue: number) {
if(newValue != -1) { if(newValue != -1) {
filteredChampions.value = champions.filter((champion) => { filteredChampions.value = champions.filter((champion) => {
const lanes : Array<any> = lanesMap.get(champion.alias.toLowerCase()) const lanes : Array<LaneData> | undefined = lanesMap.get(champion.alias.toLowerCase())
if(lanes == undefined) return false; if(lanes == undefined) return false;
return lanes.reduce((acc : boolean, current : {data:string, count:number}) => return lanes.reduce((acc : boolean, current : {data:string, count:number}) =>

141
frontend/pages/tierlist/[lane].vue Normal file
View File

@@ -0,0 +1,141 @@
<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="margin-left: 50px; margin-top: 20px; display: flex; margin-bottom: 30px; align-items: center">
<Logo/>
<h1 style="margin-left: 220px; font-size: 55px; font-weight: 300;">Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</h1>
<img style="margin-left: 10px;" width="60" height="60" :src="LANE_IMAGES[lanePositionToIndex(lane)]" />
</div>
<div class="tierlist-tier-container">
<h2 class="tierlist-tier-title">S</h2>
<NuxtLink v-for="champion in s_tier" :to="'/champion/' + champion.alias.toLowerCase()">
<div class="champion-img-container">
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
</div>
</NuxtLink>
</div>
<div class="tierlist-tier-container">
<h2 class="tierlist-tier-title">A</h2>
<NuxtLink v-for="champion in a_tier" :to="'/champion/' + champion.alias.toLowerCase()">
<div class="champion-img-container">
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
</div>
</NuxtLink>
</div>
<div class="tierlist-tier-container">
<h2 class="tierlist-tier-title">B</h2>
<NuxtLink v-for="champion in b_tier" :to="'/champion/' + champion.alias.toLowerCase()">
<div class="champion-img-container">
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
</div>
</NuxtLink>
</div>
<div class="tierlist-tier-container">
<h2 class="tierlist-tier-title">C</h2>
<NuxtLink v-for="champion in c_tier" :to="'/champion/' + champion.alias.toLowerCase()">
<div class="champion-img-container">
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
</div>
</NuxtLink>
</div>
<div class="tierlist-tier-container">
<h2 class="tierlist-tier-title">D</h2>
<NuxtLink v-for="champion in d_tier" :to="'/champion/' + champion.alias.toLowerCase()">
<div class="champion-img-container">
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
</div>
</NuxtLink>
</div>
</template>
<style>
.tierlist-tier-container {
width: 90%;
display: grid;
grid-template-columns: repeat(auto-fit, 128px);
grid-gap: 10px;
align-items: center;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
}
.tierlist-tier-title {
font-size: 54px;
margin-left: 20px;
margin-right: 20px;
font-weight: 300;
}
.champion-img-container {
overflow: hidden; width: 120px; height: 120px;
border: 1px solid var(--color-surface);
}
.champion-img-container:hover {
border: 1px solid var(--color-on-surface);
}
.champion-img {
width: 116px;
height: 116px;
transform: translate(4px, 4px) scale(1.2, 1.2);
user-select: none;
}
</style>