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

Lint frontend
Some checks failed
pipeline / lint-and-format (push) Failing after 4m18s
Details
pipeline / build-and-push-images (push) Has been skipped
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2026-01-21 23:39:03 +01:00
parent f307e3a8fc
commit 3d79d9e495
21 changed files with 356 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/pages/about.vue
View File

@@ -1,36 +1,38 @@
<script setup lang="ts"></script>
<template>
<Head>
<Title>About</Title>
</Head>
<div class="about-root">
<Head>
<Title>About</Title>
</Head>
<div class="about-main-content">
<NavBar :tierlist-list="true" />
<div class="about-main-content">
<NavBar :tierlist-list="true" />
<div style="width: fit-content; margin: auto">
<Logo />
<div style="width: fit-content; margin: auto">
<Logo />
<div style="margin-top: 20px">
<h1>About</h1>
<h3 style="margin-top: 20px">
BuildPath: a tool for League of Legends champions runes and build paths.
</h3>
<h3 style="margin-top: 10px">Copyright (C) Valentin Haudiquet (@vhaudiquet)</h3>
<h3 style="margin-top: 20px">Acknowledgments:</h3>
<h3>- Sarah Emery, for the feedback on the designs and code</h3>
<h3>- Martin Andrieux, for the nice algorithms :)</h3>
<h3>- Paul Chaurand, for the feedback on the league data organization</h3>
<h3>- Nathan Mérillon, for the tierlists ideas</h3>
<h3>- Jean-Baptiste Döderlein, for the feedback on the mobile design</h3>
<h3 style="margin-top: 20px">Libraries used:</h3>
<h3>Vue.JS, Nuxt.JS, Chart.JS, svg-dom-arrows</h3>
<h2 style="font-size: 1rem; font-weight: 200; margin-top: 25px; max-width: 800px">
BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
Games or anyone officially involved in producing or managing Riot Games properties. Riot
Games, and all associated properties are trademarks or registered trademarks of Riot
Games, Inc.
</h2>
<div style="margin-top: 20px">
<h1>About</h1>
<h3 style="margin-top: 20px">
BuildPath: a tool for League of Legends champions runes and build paths.
</h3>
<h3 style="margin-top: 10px">Copyright (C) Valentin Haudiquet (@vhaudiquet)</h3>
<h3 style="margin-top: 20px">Acknowledgments:</h3>
<h3>- Sarah Emery, for the feedback on the designs and code</h3>
<h3>- Martin Andrieux, for the nice algorithms :)</h3>
<h3>- Paul Chaurand, for the feedback on the league data organization</h3>
<h3>- Nathan Mérillon, for the tierlists ideas</h3>
<h3>- Jean-Baptiste Döderlein, for the feedback on the mobile design</h3>
<h3 style="margin-top: 20px">Libraries used:</h3>
<h3>Vue.JS, Nuxt.JS, Chart.JS, svg-dom-arrows</h3>
<h2 style="font-size: 1rem; font-weight: 200; margin-top: 25px; max-width: 800px">
BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
Games or anyone officially involved in producing or managing Riot Games properties. Riot
Games, and all associated properties are trademarks or registered trademarks of Riot
Games, Inc.
</h2>
</div>
</div>
</div>
</div>

80
frontend/pages/champion/[alias].vue
View File

@@ -35,47 +35,49 @@ function updateState(newState: string, newLane: number) {
</script>
<template>
<Head>
<Title>{{ championData.name }}</Title>
</Head>
<div class="champion-root">
<Head>
<Title>{{ championData.name }}</Title>
</Head>
<div id="alias-content-wrapper">
<NavBar
:champion-name="championData.name"
:champion-lanes="championData.lanes"
@state-change="updateState"
/>
<div id="alias-content-wrapper">
<NavBar
:champion-name="championData.name"
:champion-lanes="championData.lanes"
@state-change="updateState"
/>
<div id="champion-content">
<ChampionTitle
v-if="championData.gameCount > 0"
id="champion-title"
:champion-id="championId"
:winrate="lane.winrate"
:pickrate="lane.pickrate"
:game-count="lane.count"
/>
<RuneSelector
v-if="state == 'runes' && championData.gameCount > 0"
style="margin: auto; margin-top: 40px"
:runes="lane.runes!!"
/>
<ItemViewer
v-if="state == 'items' && championData.gameCount > 0"
style="margin: auto; margin-top: 40px"
:builds="lane.builds!!"
/>
<ItemTree
v-if="state == 'alternatives' && championData.gameCount > 0"
style="margin: auto; margin-top: 40px; width: fit-content"
:tree="lane.builds!!.tree"
/>
<h2
v-if="championData.gameCount == 0"
style="margin: auto; margin-top: 20px; width: fit-content"
>
Sorry, there is no data for this champion :(
</h2>
<div id="champion-content">
<ChampionTitle
v-if="championData.gameCount > 0"
id="champion-title"
:champion-id="championId"
:winrate="lane.winrate"
:pickrate="lane.pickrate"
:game-count="lane.count"
/>
<RuneSelector
v-if="state == 'runes' && championData.gameCount > 0"
style="margin: auto; margin-top: 40px"
:runes="lane.runes!!"
/>
<ItemViewer
v-if="state == 'items' && championData.gameCount > 0"
style="margin: auto; margin-top: 40px"
:builds="lane.builds!!"
/>
<ItemTree
v-if="state == 'alternatives' && championData.gameCount > 0"
style="margin: auto; margin-top: 40px; width: fit-content"
:tree="lane.builds!!.tree"
/>
<h2
v-if="championData.gameCount == 0"
style="margin: auto; margin-top: 20px; width: fit-content"
>
Sorry, there is no data for this champion :(
</h2>
</div>
</div>
</div>
</template>

16
frontend/pages/index.vue
View File

@@ -1,16 +1,18 @@
<script setup lang="ts">
import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon'
// Removed unused imports
</script>
<template>
<Head>
<Title>Home</Title>
</Head>
<div class="index-root">
<Head>
<Title>Home</Title>
</Head>
<div class="index-main-content">
<NavBar :tierlist-list="true" />
<div class="index-main-content">
<NavBar :tierlist-list="true" />
<ChampionSelector class="index-champion-selector" />
<ChampionSelector class="index-champion-selector" />
</div>
</div>
</template>

65
frontend/pages/tierlist/[lane].vue
View File

@@ -70,39 +70,46 @@ tiers.push({ title: 'F', data: tierFromScaledPickrate(0, 0.1) })
</script>
<template>
<Head>
<Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</Title>
</Head>
<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 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)]"
<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"
/>
<h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">
{{ POSITIONS_STR[lanePositionToIndex(lane)] }}
</h1>
<TierlistChart id="chart" :data="tiers" />
</div>
<TierlistTier v-for="tier in tiers" :title="tier.title" :tier="tier.data" />
<TierlistChart id="chart" :data="tiers" />
</div>
</div>
</template>