Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(records): new design of the records page

Browse source
This commit is contained in:
Valentin Kaelin 2020-08-22 18:21:36 +02:00
parent 70358d1187
commit fd55779552
2 changed files with 122 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
client/src/components/Summoner/Records/RecordCard.vue
View file

@ -7,26 +7,42 @@
`${hover ? gradientHover : gradient}, `${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')` 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
<div> :class="[
<span class="text-gray-500">{{ title.substr(0, title.indexOf(' ')) }}</span> {'bg-blue-1000 bg-opacity-75': hover},
<span :class="color" class="ml-1">{{ title.substr(title.indexOf(' ') + 1) }}</span> 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> </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="text-sm">
<div class="mt-3"> <div class="mt-6">
<span <span
:class="record.result === 'Win' ? 'text-green-400' : 'text-red-400'" :class="record.result === 'Win' ? 'text-green-400' : 'text-red-400'"
>{{ record.result === 'Win' ? 'won' : 'lost' }}</span> >{{ record.result === 'Win' ? 'Won' : 'Lost' }}</span>
<span class="ml-1 font-bold">{{ timeDifference(record.date) }}</span> <span class="ml-1 font-semibold">{{ timeDifference(record.date) }}</span>
</div> </div>
<div class="text-gray-500"> <div class="mt-2 text-gray-500">
as As
<span class="font-bold text-white">{{ record.champion.name }}</span> <span class="font-semibold text-white">{{ record.champion.name }}</span>
</div> </div>
</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> </div>
</template> </template>
@ -35,10 +51,18 @@ import { timeDifference } from '@/helpers/functions.js'
export default { export default {
props: { props: {
borderColor: {
type: String,
required: true
},
color: { color: {
type: String, type: String,
required: true required: true
}, },
textColor: {
type: String,
required: true
},
property: { property: {
type: String, type: String,
required: true required: true
@ -55,7 +79,7 @@ export default {
data() { data() {
return { 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%)', 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, hover: false,
} }
@ -69,7 +93,7 @@ export default {
<style scoped> <style scoped>
.record-card { .record-card {
max-width: 18rem; max-width: 11rem;
} }
.record-card:hover { .record-card:hover {

133
client/src/views/SummonerRecords.vue
View file

@ -1,143 +1,169 @@
<template> <template>
<div key="records"> <div key="records">
<template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)"> <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"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
color="text-blue-400" color="#63b3ed"
text-color="text-blue-400"
border-color="border-blue-400"
property="kda" property="kda"
:record="records.maxKda" :record="records.maxKda"
title="best kda" title="KDA"
/> />
<RecordCard <RecordCard
color="text-green-400" color="#68D391"
text-color="text-green-400"
border-color="border-green-400"
property="kills" property="kills"
:record="records.maxKills" :record="records.maxKills"
title="most kills" title="Kills"
/> />
<RecordCard <RecordCard
color="text-blue-500" color="#9F7AEA"
text-color="text-purple-500"
border-color="border-purple-500"
property="assists" property="assists"
:record="records.maxAssists" :record="records.maxAssists"
title="most assists" title="Assists"
/> />
<RecordCard <RecordCard
color="text-red-500" color="#F56565"
text-color="text-red-500"
border-color="border-red-500"
property="deaths" property="deaths"
:record="records.maxDeaths" :record="records.maxDeaths"
title="most deaths" title="Deaths"
/> />
<RecordCard <RecordCard
color="text-yellow-600" color="#D69E2E"
text-color="text-yellow-600"
border-color="border-yellow-600"
property="gold" property="gold"
:record="records.maxGold" :record="records.maxGold"
title="most gold earned" title="Gold earned"
/> />
<RecordCard <RecordCard
color="text-white" color="#81E6D9"
property="time" text-color="text-teal-300"
:record="records.maxTime" border-color="border-teal-300"
title="longest game"
/>
<RecordCard
color="text-pink-500"
property="minions" property="minions"
:record="records.maxMinions" :record="records.maxMinions"
title="most minions killed" title="Minions killed"
/> />
</template> </template>
<template v-else> <template v-else>
<div <div
v-for="index in 7" v-for="index in 6"
:key="index" :key="index"
style="width: 288px; height: 146px;" style="width: 176px; height: 294px;"
class="mx-2 mt-6" class="mx-2 mt-6"
> >
<content-loader <content-loader
:height="146" :height="294"
:width="288" :width="176"
:speed="2" :speed="2"
primary-color="#17314f" primary-color="#17314f"
secondary-color="#2b6cb0" 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> </content-loader>
</div> </div>
</template> </template>
</div> </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"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
color="text-yellow-400" color="#FC8181"
property="dmgTaken" text-color="text-red-400"
:record="records.maxDmgTaken" border-color="border-red-400"
title="highest damage taken"
/>
<RecordCard
color="text-red-400"
property="dmgChamp" property="dmgChamp"
:record="records.maxDmgChamp" :record="records.maxDmgChamp"
title="highest damage to champions" title="Damage champions"
/> />
<RecordCard <RecordCard
color="text-yellow-400" color="#D69E2E"
text-color="text-yellow-400"
border-color="border-yellow-400"
property="dmgObj" property="dmgObj"
:record="records.maxDmgObj" :record="records.maxDmgObj"
title="highest damage to objectives" title="Damage objectives"
/> />
<RecordCard <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" property="kp"
:record="records.maxKp" :record="records.maxKp"
title="highest kill participation" title="Kill participation"
/> />
</template> </template>
<template v-else> <template v-else>
<div <div
v-for="index in 4" v-for="index in 4"
:key="index" :key="index"
style="width: 288px; height: 146px;" style="width: 176px; height: 294px;"
class="mx-2 mt-6" class="mx-2 mt-6"
> >
<content-loader <content-loader
:height="146" :height="294"
:width="288" :width="176"
:speed="2" :speed="2"
primary-color="#17314f" primary-color="#17314f"
secondary-color="#2b6cb0" 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> </content-loader>
</div> </div>
</template> </template>
</div> </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"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
color="text-blue-500" color="#D69E2E"
text-color="text-yellow-400"
border-color="border-yellow-400"
property="vision" property="vision"
:record="records.maxVision" :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>
<template v-else> <template v-else>
<div <div
v-for="index in 1" v-for="index in 2"
:key="index" :key="index"
style="width: 288px; height: 146px;" style="width: 176px; height: 294px;"
class="mx-2 mt-6" class="mx-2 mt-6"
> >
<content-loader <content-loader
:height="146" :height="294"
:width="288" :width="176"
:speed="2" :speed="2"
primary-color="#17314f" primary-color="#17314f"
secondary-color="#2b6cb0" 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> </content-loader>
</div> </div>
</template> </template>
@ -200,3 +226,12 @@ export default {
} }
} }
</script> </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>