mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 21:07:27 +00:00
refactor(records): new design of the records page
This commit is contained in:
Valentin Kaelin
parent
70358d1187
commit
fd55779552
2 changed files with 122 additions and 63 deletions
|
|
@ -7,26 +7,42 @@
|
|||
`${hover ? gradientHover : gradient},
|
||||
url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${record.champion.id}/${record.champion.id}000.jpg')`
|
||||
}"
|
||||
class="w-full p-2 mx-2 mt-6 leading-none bg-center bg-cover rounded-lg record-card"
|
||||
:class="borderColor"
|
||||
class="relative w-full p-4 mx-2 mt-6 leading-none bg-center bg-cover border rounded-lg record-card"
|
||||
>
|
||||
<div class="text-5xl">{{ record[property] }}</div>
|
||||
<div>
|
||||
<span class="text-gray-500">{{ title.substr(0, title.indexOf(' ')) }}</span>
|
||||
<span :class="color" class="ml-1">{{ title.substr(title.indexOf(' ') + 1) }}</span>
|
||||
<div
|
||||
:class="[
|
||||
{'bg-blue-1000 bg-opacity-75': hover},
|
||||
title.length > 15 ? 'text-sm' : 'text-base'
|
||||
]"
|
||||
:style="{borderColor: hover ? color : 'transparent'}"
|
||||
class="absolute top-0 left-0 px-3 py-2 mt-2 ml-2 font-medium leading-4 transition-colors duration-500 ease-in-out border border-transparent rounded-md"
|
||||
>
|
||||
<span :class="textColor" class="ml-0">{{ title }}</span>
|
||||
</div>
|
||||
<img
|
||||
:src="`https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${record.champion.id}.png`"
|
||||
:class="[{'opacity-0 scale-125': hover}, borderColor]"
|
||||
class="block w-16 h-16 mx-auto mt-10 transition duration-500 ease-in transform border-2 rounded-full"
|
||||
alt="Champion Played"
|
||||
/>
|
||||
<div :style="{textShadow: `-2px 1px 6px ${color}`}" class="mt-6 text-4xl">{{ record[property] }}</div>
|
||||
|
||||
<div class="text-sm">
|
||||
<div class="mt-3">
|
||||
<div class="mt-6">
|
||||
<span
|
||||
:class="record.result === 'Win' ? 'text-green-400' : 'text-red-400'"
|
||||
>{{ record.result === 'Win' ? 'won' : 'lost' }}</span>
|
||||
<span class="ml-1 font-bold">{{ timeDifference(record.date) }}</span>
|
||||
>{{ record.result === 'Win' ? 'Won' : 'Lost' }}</span>
|
||||
<span class="ml-1 font-semibold">{{ timeDifference(record.date) }}</span>
|
||||
</div>
|
||||
<div class="text-gray-500">
|
||||
as
|
||||
<span class="font-bold text-white">{{ record.champion.name }}</span>
|
||||
<div class="mt-2 text-gray-500">
|
||||
As
|
||||
<span class="font-semibold text-white">{{ record.champion.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-sm text-gray-200 opacity-25">match {{ record.gameId }}</div>
|
||||
<div
|
||||
class="mt-6 text-xs font-light text-right text-gray-200 opacity-25"
|
||||
>match {{ record.gameId }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -35,10 +51,18 @@ import { timeDifference } from '@/helpers/functions.js'
|
|||
|
||||
export default {
|
||||
props: {
|
||||
borderColor: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
property: {
|
||||
type: String,
|
||||
required: true
|
||||
|
|
@ -55,7 +79,7 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
gradient: 'linear-gradient(180deg, rgba(42, 67, 101, 0.3) 0%, rgba(42, 67, 101, 0.8) 60%, rgba(42, 67, 101, 1) 100%)',
|
||||
gradient: 'linear-gradient(180deg, rgba(42, 67, 101, 0.8) 0%, rgba(42, 67, 101, 0.95) 60%, rgba(42, 67, 101, 1) 100%)',
|
||||
gradientHover: 'linear-gradient(rgba(42, 67, 101, 0.1) 0%, rgba(42, 67, 101, 0.3) 60%, rgba(42, 67, 101, 0.5) 100%)',
|
||||
hover: false,
|
||||
}
|
||||
|
|
@ -69,7 +93,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.record-card {
|
||||
max-width: 18rem;
|
||||
max-width: 11rem;
|
||||
}
|
||||
|
||||
.record-card:hover {
|
||||
|
|
|
|||
|
|
@ -1,143 +1,169 @@
|
|||
<template>
|
||||
<div key="records">
|
||||
<template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
|
||||
<div class="mx-4 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Basics</div>
|
||||
<div
|
||||
class="relative pl-6 text-2xl text-blue-200 border-b-2 border-blue-800 category blue-900"
|
||||
>Basics</div>
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<template v-if="recordsLoaded">
|
||||
<RecordCard
|
||||
color="text-blue-400"
|
||||
color="#63b3ed"
|
||||
text-color="text-blue-400"
|
||||
border-color="border-blue-400"
|
||||
property="kda"
|
||||
:record="records.maxKda"
|
||||
title="best kda"
|
||||
title="KDA"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-green-400"
|
||||
color="#68D391"
|
||||
text-color="text-green-400"
|
||||
border-color="border-green-400"
|
||||
property="kills"
|
||||
:record="records.maxKills"
|
||||
title="most kills"
|
||||
title="Kills"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-blue-500"
|
||||
color="#9F7AEA"
|
||||
text-color="text-purple-500"
|
||||
border-color="border-purple-500"
|
||||
property="assists"
|
||||
:record="records.maxAssists"
|
||||
title="most assists"
|
||||
title="Assists"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-red-500"
|
||||
color="#F56565"
|
||||
text-color="text-red-500"
|
||||
border-color="border-red-500"
|
||||
property="deaths"
|
||||
:record="records.maxDeaths"
|
||||
title="most deaths"
|
||||
title="Deaths"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-yellow-600"
|
||||
color="#D69E2E"
|
||||
text-color="text-yellow-600"
|
||||
border-color="border-yellow-600"
|
||||
property="gold"
|
||||
:record="records.maxGold"
|
||||
title="most gold earned"
|
||||
title="Gold earned"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-white"
|
||||
property="time"
|
||||
:record="records.maxTime"
|
||||
title="longest game"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-pink-500"
|
||||
color="#81E6D9"
|
||||
text-color="text-teal-300"
|
||||
border-color="border-teal-300"
|
||||
property="minions"
|
||||
:record="records.maxMinions"
|
||||
title="most minions killed"
|
||||
title="Minions killed"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="index in 7"
|
||||
v-for="index in 6"
|
||||
:key="index"
|
||||
style="width: 288px; height: 146px;"
|
||||
style="width: 176px; height: 294px;"
|
||||
class="mx-2 mt-6"
|
||||
>
|
||||
<content-loader
|
||||
:height="146"
|
||||
:width="288"
|
||||
:height="294"
|
||||
:width="176"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
|
||||
<rect x="0" y="0" rx="8" ry="8" width="176" height="294" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Game impact</div>
|
||||
<div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900 category">Game impact</div>
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<template v-if="recordsLoaded">
|
||||
<RecordCard
|
||||
color="text-yellow-400"
|
||||
property="dmgTaken"
|
||||
:record="records.maxDmgTaken"
|
||||
title="highest damage taken"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-red-400"
|
||||
color="#FC8181"
|
||||
text-color="text-red-400"
|
||||
border-color="border-red-400"
|
||||
property="dmgChamp"
|
||||
:record="records.maxDmgChamp"
|
||||
title="highest damage to champions"
|
||||
title="Damage champions"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-yellow-400"
|
||||
color="#D69E2E"
|
||||
text-color="text-yellow-400"
|
||||
border-color="border-yellow-400"
|
||||
property="dmgObj"
|
||||
:record="records.maxDmgObj"
|
||||
title="highest damage to objectives"
|
||||
title="Damage objectives"
|
||||
/>
|
||||
<RecordCard
|
||||
color="text-green-400"
|
||||
color="#FC8181"
|
||||
text-color="text-red-400"
|
||||
border-color="border-red-400"
|
||||
property="dmgTaken"
|
||||
:record="records.maxDmgTaken"
|
||||
title="Damage taken"
|
||||
/>
|
||||
<RecordCard
|
||||
color="#68D391"
|
||||
text-color="text-green-400"
|
||||
border-color="border-green-400"
|
||||
property="kp"
|
||||
:record="records.maxKp"
|
||||
title="highest kill participation"
|
||||
title="Kill participation"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
style="width: 288px; height: 146px;"
|
||||
style="width: 176px; height: 294px;"
|
||||
class="mx-2 mt-6"
|
||||
>
|
||||
<content-loader
|
||||
:height="146"
|
||||
:width="288"
|
||||
:height="294"
|
||||
:width="176"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
|
||||
<rect x="0" y="0" rx="8" ry="8" width="176" height="294" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Team work</div>
|
||||
<div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">Extra</div>
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<template v-if="recordsLoaded">
|
||||
<RecordCard
|
||||
color="text-blue-500"
|
||||
color="#D69E2E"
|
||||
text-color="text-yellow-400"
|
||||
border-color="border-yellow-400"
|
||||
property="vision"
|
||||
:record="records.maxVision"
|
||||
title="highest vision score"
|
||||
title="Vision score"
|
||||
/>
|
||||
<RecordCard
|
||||
color="#4299E1"
|
||||
text-color="text-blue-500"
|
||||
border-color="border-blue-500"
|
||||
property="time"
|
||||
:record="records.maxTime"
|
||||
title="Longest game"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="index in 1"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
style="width: 288px; height: 146px;"
|
||||
style="width: 176px; height: 294px;"
|
||||
class="mx-2 mt-6"
|
||||
>
|
||||
<content-loader
|
||||
:height="146"
|
||||
:width="288"
|
||||
:height="294"
|
||||
:width="176"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
|
||||
<rect x="0" y="0" rx="8" ry="8" width="176" height="294" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -200,3 +226,12 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.category:before {
|
||||
@apply w-2 h-2 bg-blue-200 absolute block left-0 ml-1;
|
||||
content: "";
|
||||
top: 35%;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue