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

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

Browse Source
This commit is contained in:
Valentin Haudiquet
2026-01-21 00:59:23 +01:00
parent 353baa6267
commit 3fc52205f6
53 changed files with 8505 additions and 2048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/components/tierlist/Chart.vue
View File

@@ -1,38 +1,47 @@
<script lang="ts" setup>
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, plugins, scales } from 'chart.js'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale,
plugins,
scales
} from 'chart.js'
import { Bar } from 'vue-chartjs'
// Register
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
const props = defineProps<{
data: Array<{title:string, data: Array<{lane: LaneData, champion: Champion}>}>
data: Array<{ title: string; data: Array<{ lane: LaneData; champion: Champion }> }>
}>()
const labels: Array<string> = []
const pickrates: Array<number> = []
const pickrates: Array<number> = []
const images: Array<string> = []
const backgroundColors: Array<string> = []
const CHAMPION_CUT_THRESHOLD = 32
const TIER_COLORS = ["#ff7f7e", "#ffbf7f", "#ffdf80", "#feff7f", "#beff7f", "#7eff80"]
const TIER_COLORS = ['#ff7f7e', '#ffbf7f', '#ffdf80', '#feff7f', '#beff7f', '#7eff80']
let count = 0
let colorIndex = 0
for(let tier of props.data) {
for(let {champion: champion, lane: lane} of tier.data) {
if(count > CHAMPION_CUT_THRESHOLD) break;
for (const tier of props.data) {
for (const { champion: champion, lane: lane } of tier.data) {
if (count > CHAMPION_CUT_THRESHOLD) break
labels.push(champion.name)
pickrates.push(lane.pickrate * 100)
images.push(CDRAGON_BASE + mapPath(champion.squarePortraitPath))
backgroundColors.push(TIER_COLORS[colorIndex])
labels.push(champion.name)
pickrates.push(lane.pickrate * 100)
images.push(CDRAGON_BASE + mapPath(champion.squarePortraitPath))
backgroundColors.push(TIER_COLORS[colorIndex])
count++
}
colorIndex++
count++
}
colorIndex++
}
const chartData = ref({
labels: labels,
datasets: [
@@ -40,43 +49,45 @@ const chartData = ref({
label: 'Pickrate',
backgroundColor: backgroundColors,
barPercentage: 1.0,
data: pickrates,
},
],
data: pickrates
}
]
})
const chartOptions = ref({
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
ticks: {
callback: (() => "")
}
ticks: {
callback: () => ''
}
}
},
plugins: {
legend: {
display: false
display: false
}
}
})
const chartPlugins = [{
id: "image-draw",
afterDraw: ((chart: any) => {
const ctx : CanvasRenderingContext2D = chart.ctx
var xAxis = chart.scales.x;
xAxis.ticks.forEach((value: any, index: number) => {
var x = xAxis.getPixelForTick(index)
var image = new Image()
image.src = images[index]
ctx.drawImage(image, x - 14, xAxis.bottom - 28, 28, 28)
})
})
}]
const chartPlugins = [
{
id: 'image-draw',
afterDraw: (chart: any) => {
const ctx: CanvasRenderingContext2D = chart.ctx
const xAxis = chart.scales.x
xAxis.ticks.forEach((value: any, index: number) => {
const x = xAxis.getPixelForTick(index)
const image = new Image()
image.src = images[index]
ctx.drawImage(image, x - 14, xAxis.bottom - 28, 28, 28)
})
}
}
]
</script>
<template>
<div>
<Bar :data="chartData" :options="chartOptions" :plugins="chartPlugins" />
</div>
</template>
</template>

93
frontend/components/tierlist/Tier.vue
View File

@@ -1,73 +1,82 @@
<script setup lang="ts">
defineProps<{
title: string
tier: Array<{champion: Champion, lane: LaneData}>
title: string
tier: Array<{ champion: Champion; lane: LaneData }>
}>()
</script>
<template>
<div style="display: flex;">
<div style="display: flex">
<h2 class="tierlist-tier-title">{{ title }}</h2>
<div class="tierlist-tier-container">
<NuxtLink v-for="{champion: champion} in tier" :to="'/champion/' + champion.alias.toLowerCase()">
<NuxtLink
v-for="{ champion: champion } in tier"
:to="'/champion/' + champion.alias.toLowerCase()"
>
<div class="champion-img-container">
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
<NuxtImg
class="champion-img"
:src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)"
:alt="champion.name"
/>
</div>
</NuxtLink>
</NuxtLink>
</div>
</div>
</div>
</template>
<style>
.tierlist-tier-container {
width: 90%;
min-height: 122px;
width: 90%;
min-height: 122px;
display: grid;
grid-template-columns: repeat(auto-fit, 128px);
grid-gap: 10px;
display: grid;
grid-template-columns: repeat(auto-fit, 128px);
grid-gap: 10px;
align-items: center;
align-items: center;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.tierlist-tier-title {
font-size: 3.3rem;
margin-left: 20px;
margin-right: 20px;
margin-top: 40px;
font-weight: 300;
font-size: 3.3rem;
margin-left: 20px;
margin-right: 20px;
margin-top: 40px;
font-weight: 300;
}
.champion-img-container {
overflow: hidden; width: 120px; height: 120px;
border: 1px solid var(--color-surface);
overflow: hidden;
width: 120px;
height: 120px;
border: 1px solid var(--color-surface);
}
.champion-img-container:hover {
border: 1px solid var(--color-on-surface);
border: 1px solid var(--color-on-surface);
}
.champion-img {
width: 116px;
height: 116px;
transform: translate(4px, 4px) scale(1.2, 1.2);
width: 116px;
height: 116px;
transform: translate(4px, 4px) scale(1.2, 1.2);
user-select: none;
user-select: none;
}
@media only screen and (max-width: 450px) {
.champion-img-container {
width: 80px;
height: 80px;
}
.champion-img {
width: 76px;
height: 76px;
}
.tierlist-tier-container {
grid-template-columns: repeat(auto-fit, 80px);
min-height: 82px;
}
.champion-img-container {
width: 80px;
height: 80px;
}
.champion-img {
width: 76px;
height: 76px;
}
.tierlist-tier-container {
grid-template-columns: repeat(auto-fit, 80px);
min-height: 82px;
}
}
</style>
</style>