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

Components refactor (big)
All checks were successful
pipeline / build-and-push-images (push) Successful in 32s
Details
pipeline / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-12-05 00:02:31 +01:00
parent 07daa05772
commit 67d6dd5a1a
10 changed files with 73 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/components/item/Box.vue Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts" setup>
defineProps<{
title: string,
bootsFirst?: number
}>()
</script>
<template>
<div class="item-box">
<div style="display:flex; flex-direction: column; justify-content: center; align-items: center;">
<h2 class="item-box-title">{{ title }}</h2>
<h5 v-if="bootsFirst != undefined && bootsFirst != null"
style="margin: auto;">({{ (bootsFirst * 100).toFixed(2) }}%)</h5>
</div>
<slot/>
</div>
</template>
<style scoped>
.item-box {
border: 1px solid var(--color-on-surface);
border-radius: 8px;
margin: 10px;
width: fit-content;
height: 600px;
}
.item-box-title {
font-variant: small-caps;
text-align: center;
margin: 10px;
}
@media only screen and (max-width: 1000px) {
.item-box {
width: 95%;
height: fit-content;
}
}
</style>

9
frontend/components/TreeItem.vue → frontend/components/item/Tree.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
const props = defineProps<{
defineProps<{
tree: ItemTree,
parentCount?: number
}>()
@@ -15,11 +15,10 @@ for(let item of items.value) {
itemMap.set(item.id, item)
}
import pkg from 'svg-dom-arrows';
const { LinePath } = pkg;
import { LinePath } from 'svg-dom-arrows';
const start : Ref<Element | null> = useTemplateRef("start")
const arrows : Array<pkg.LinePath> = []
const arrows : Array<LinePath> = []
onMounted(() => {
refreshArrows()
@@ -101,7 +100,7 @@ function handleRefresh() {
<div style="margin-left: 30px;">
<div style="width: fit-content; height: fit-content;" v-for="child in tree.children">
<TreeItem @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" :parent-count="tree.count" />
<ItemTree @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" :parent-count="tree.count" />
</div>
</div>
</div>

53
frontend/components/ItemViewer.vue → frontend/components/item/Viewer.vue
View File

@@ -24,8 +24,7 @@ function trimBuilds(builds : Builds) {
<div id="iv-container">
<!-- Start items -->
<div class="item-box">
<h2 class="item-box-title">start</h2>
<ItemBox title="start">
<div class="iv-items-container">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.start" >
<NuxtImg v-if="item.data != null && item.data != undefined"
@@ -34,13 +33,10 @@ function trimBuilds(builds : Builds) {
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
</div>
</div>
</div>
</ItemBox>
<div v-if="builds.bootsFirst > 0.5" class="item-box">
<div style="display:flex; flex-direction: column; justify-content: center; align-items: baseline;">
<h2 class="item-box-title">boots rush</h2>
<h5 style="margin: auto;">({{ (builds.bootsFirst * 100).toFixed(2) }}%)</h5>
</div>
<!-- Boots first : when champion rush boots -->
<ItemBox v-if="builds.bootsFirst > 0.5" title="boots rush" :bootsFirst="builds.bootsFirst">
<div class="iv-items-container">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
<NuxtImg v-if="item.data != null && item.data != undefined"
@@ -49,15 +45,15 @@ function trimBuilds(builds : Builds) {
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
</div>
</div>
</div>
</ItemBox>
<div class="item-box">
<h2 class="item-box-title">core</h2>
<TreeItem style="margin:auto; width: fit-content;" :tree="builds.tree" />
</div>
<!-- Core items -->
<ItemBox title="core">
<ItemTree style="margin:auto; width: fit-content;" :tree="builds.tree" />
</ItemBox>
<div v-if="builds.bootsFirst <= 0.5" class="item-box">
<h2 class="item-box-title">boots</h2>
<!-- Boots -->
<ItemBox v-if="builds.bootsFirst <= 0.5" title="boots">
<div class="iv-items-container">
<div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots.slice(0, 4)" >
<NuxtImg v-if="item.data != null && item.data != undefined"
@@ -66,11 +62,10 @@ function trimBuilds(builds : Builds) {
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
</div>
</div>
</div>
<div class="item-box">
<h2 class="item-box-title">late game</h2>
</ItemBox>
<!-- Late game items -->
<ItemBox title="late game">
<div id="iv-late-game-container">
<div class="iv-items-container">
@@ -92,7 +87,7 @@ function trimBuilds(builds : Builds) {
</div>
</div>
</div>
</ItemBox>
</div>
</template>
@@ -113,20 +108,6 @@ function trimBuilds(builds : Builds) {
border: 1px solid var(--color-on-surface);
margin: 10px;
}
.item-box {
border: 1px solid var(--color-on-surface);
border-radius: 8px;
margin: 10px;
width: fit-content;
height: 600px;
}
.item-box-title {
font-variant: small-caps;
text-align: center;
margin: 10px;
}
#iv-late-game-container {
display: flex;
}
@@ -136,10 +117,6 @@ function trimBuilds(builds : Builds) {
flex-direction: column;
width: 100%;
}
.item-box {
width: 95%;
height: fit-content;
}
.iv-items-container {
flex-direction: row;
}

0
frontend/components/NavBar.vue → frontend/components/nav/BottomBar.vue
View File

7
frontend/components/SideBar.vue → frontend/components/nav/SideBar.vue
View File

@@ -2,7 +2,7 @@
import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon';
defineProps<{
championName: string
championName?: string
championLanes?: Array<LaneData>
}>()
const emit = defineEmits<{
@@ -28,7 +28,10 @@ function handleStateChange(newState : string, newLane: number) {
<div style="display: flex; align-items: center; margin-top: 30px; padding-right: 10px; overflow: hidden;">
<h1 style="font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
<img style="margin-left: 10px;" width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
<h2 v-if="championName.length < 8" style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">{{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}</h2>
<h2 v-if="championName != null && championName != undefined && championName.length < 8"
style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">
{{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}
</h2>
</div>
<h2 :class="'sidebar-link ' + (state == 'runes' && laneState == i ? 'sidebar-link-selected' : '')"

0
frontend/components/OgImage/OgChampion.vue → frontend/components/opengraph/OgChampion.vue
View File

0
frontend/components/RunePage.vue → frontend/components/rune/Page.vue
View File

0
frontend/components/RuneSelector.vue → frontend/components/rune/Selector.vue
View File

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

@@ -28,13 +28,13 @@ function updateState(newState : string, newLane : number) {
<Title>{{ championData.name }}</Title>
</Head>
<NavBar :champion-name="championData.name"
<NavBottomBar :champion-name="championData.name"
:champion-lanes="championData.lanes"
@state-change="updateState"/>
<div id="alias-content-wrapper">
<SideBar :champion-name="championData.name"
<NavSideBar :champion-name="championData.name"
:champion-lanes="championData.lanes"
@state-change="updateState"/>

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

@@ -51,7 +51,7 @@ const d_tier = tierFromPickrate(0, 0.05)
</Head>
<div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%;">
<SideBar/>
<NavSideBar/>
<div style="margin-left: 10px; width: 100%; overflow-y: scroll;">