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

Sidebar and tierlist changes
All checks were successful
pipeline / build-and-push-images (push) Successful in 26s
Details
pipeline / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-11-30 13:06:44 +01:00
parent e6d771a3a5
commit a56b81835f
5 changed files with 90 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,19 +20,20 @@ function updateState(newState : string, newLane : number) {
<Title>{{ championData.name }} - BuildPath</Title>
</Head>
<div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%;">
<SideBar :champion-name="championData.name"
:champion-lanes="championData.lanes"
@state-change="updateState"/>
<!-- <div style="display: flex; width: fit-content; margin: auto; margin-left: 330px;"> -->
<div style="margin-top: 64px; margin-left: 339px;">
<div style="margin-top: 64px; margin-left: 39px; width: 100%;">
<ChampionTitle v-if="championData.gameCount > 0" :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!!" />
<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>
<!-- <ItemViewer v-if="championData.gameCount > 0" style="margin-top: 64px; margin-left: 64px;" :builds="championData.builds" /> -->
<!-- </div> -->
</div>
</template>
<style>

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

@@ -50,92 +50,27 @@ const d_tier = tierFromPickrate(0, 0.05)
<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 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>
<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>