mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 21:07:27 +00:00
Merge pull request #2 from vkaelin/refactor-loading
Refactor the loading of the pages
This commit is contained in:
Valentin Kaelin
GitHub
commit
60f1eccaf8
15 changed files with 667 additions and 372 deletions
|
|
@ -18,7 +18,7 @@
|
||||||
content="LeagueStats.gg is an Open source website for League of Legends Summoners statistics.">
|
content="LeagueStats.gg is an Open source website for League of Legends Summoners statistics.">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="min-w-1200 bg-blue-900">
|
<body class="relative min-w-1200 bg-blue-900">
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but LeagueStats doesn't work properly without JavaScript enabled. Please enable it to
|
<strong>We're sorry but LeagueStats doesn't work properly without JavaScript enabled. Please enable it to
|
||||||
continue.</strong>
|
continue.</strong>
|
||||||
|
|
|
||||||
|
|
@ -53,4 +53,25 @@
|
||||||
transform: translateX(400px);
|
transform: translateX(400px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* enter-active-class="transition-all transition-fast ease-out-quad"
|
||||||
|
enter-class="opacity-0 scale-90"
|
||||||
|
enter-to-class="opacity-100 scale-100" */
|
||||||
|
|
||||||
|
.tab-enter-active {
|
||||||
|
transition: all;
|
||||||
|
transition-duration: 150ms;
|
||||||
|
transition-timing-function: cubic-bezier(.25, .46, .45, .94);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-enter {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-enter-to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
/* purgecss end ignore */
|
/* purgecss end ignore */
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<table class="w-full table-auto bg-blue-800 rounded-lg text-center leading-none">
|
<table class="w-full table-fixed bg-blue-800 rounded-lg text-center leading-none">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="heading rounded-t-lg text-sm select-none">
|
<tr class="heading rounded-t-lg text-sm select-none">
|
||||||
<th
|
<th
|
||||||
|
|
@ -12,12 +12,15 @@
|
||||||
:key="`champHeading-${index}`"
|
:key="`champHeading-${index}`"
|
||||||
@click="sortBy(heading.props)"
|
@click="sortBy(heading.props)"
|
||||||
v-html="heading.name"
|
v-html="heading.name"
|
||||||
:class="[{'rounded-tr-lg': index === headings.length - 1}, sortedClasses(heading.props)]"
|
:class="[
|
||||||
|
{'rounded-tr-lg': index === headings.length - 1, 'w-name': heading.name === 'name'},
|
||||||
|
sortedClasses(heading.props)
|
||||||
|
]"
|
||||||
class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
|
class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
|
||||||
></th>
|
></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="bg-blue-760">
|
<tbody v-if="champions.length" class="bg-blue-760">
|
||||||
<tr
|
<tr
|
||||||
v-for="(champion, index) in championsToDisplay"
|
v-for="(champion, index) in championsToDisplay"
|
||||||
:key="champion._id"
|
:key="champion._id"
|
||||||
|
|
@ -31,7 +34,7 @@
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div
|
<div
|
||||||
:style="{backgroundImage: `url('${champion.champion.icon}')`}"
|
:style="{backgroundImage: `url('${champion.champion.icon}')`}"
|
||||||
class="w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
|
class="w-6 h-6 flex-shrink-0 bg-cover bg-center bg-blue-1000 rounded-full"
|
||||||
></div>
|
></div>
|
||||||
<div class="ml-2">{{ champion.champion.name }}</div>
|
<div class="ml-2">{{ champion.champion.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -92,13 +95,48 @@
|
||||||
>{{ champion.lastPlayed }}</td>
|
>{{ champion.lastPlayed }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
<tbody v-else>
|
||||||
|
<tr v-for="index in 11" :key="index">
|
||||||
|
<td colspan="14">
|
||||||
|
<content-loader
|
||||||
|
:height="50"
|
||||||
|
:width="1200"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="31" y="16" rx="3" ry="3" width="20" height="20" />
|
||||||
|
<circle cx="101" cy="26" r="12" />
|
||||||
|
<rect x="119" y="16" rx="3" ry="3" width="50" height="20" />
|
||||||
|
<rect x="234.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="316.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="398.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="480.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="565" y="14" rx="3" ry="3" width="40" height="10" />
|
||||||
|
<rect x="558" y="30" rx="3" ry="3" width="55" height="10" />
|
||||||
|
<rect x="644.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="726.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="808.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="890.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="972.5" y="16" rx="3" ry="3" width="45" height="20" />
|
||||||
|
<rect x="1052" y="16" rx="3" ry="3" width="50" height="20" />
|
||||||
|
<rect x="1129" y="16" rx="3" ry="3" width="60" height="20" />
|
||||||
|
</content-loader>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { ContentLoader } from 'vue-content-loader'
|
||||||
import { timeDifference } from '@/helpers/functions.js'
|
import { timeDifference } from '@/helpers/functions.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
ContentLoader,
|
||||||
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
champions: {
|
champions: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
@ -293,4 +331,8 @@ export default {
|
||||||
.sorted:hover::after {
|
.sorted:hover::after {
|
||||||
background-color: #2b6cb0;
|
background-color: #2b6cb0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-name {
|
||||||
|
width: 135px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<div class="px-2 text-white text-center text-sm select-none">
|
<div class="px-2 text-white text-center text-sm select-none">
|
||||||
<div>Stats based on</div>
|
<div>Stats based on</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="text-teal-400 font-bold">{{ stats.global.count }}</span> matches
|
<span class="text-teal-400 font-bold">{{ stats.global ? stats.global.count : 0 }}</span> matches
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
|
<div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
|
||||||
Load more matches
|
Load more matches
|
||||||
|
|
@ -105,7 +105,7 @@ export default {
|
||||||
return this.stats.champion.reduce((a, b) => a.count > b.count ? a : b).count
|
return this.stats.champion.reduce((a, b) => a.count > b.count ? a : b).count
|
||||||
},
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
stats: state => state.summoner.infos.stats
|
stats: state => state.summoner.overview.stats
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ export default {
|
||||||
return this.mates.length > 0
|
return this.mates.length > 0
|
||||||
},
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
mates: state => state.summoner.infos.stats.mates
|
mates: state => state.summoner.overview.stats.mates
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mt-4 bg-blue-800 rounded-lg">
|
<div v-if="stats.global" class="mt-4 bg-blue-800 rounded-lg">
|
||||||
<div class="relative heading flex justify-center py-4 rounded-t-lg text-blue-200">
|
<div class="relative heading flex justify-center py-4 rounded-t-lg text-blue-200">
|
||||||
<svg class="w-6 h-6">
|
<svg class="w-6 h-6">
|
||||||
<use xlink:href="#graph" />
|
<use xlink:href="#graph" />
|
||||||
|
|
@ -248,7 +248,7 @@ export default {
|
||||||
return rest
|
return rest
|
||||||
},
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
stats: state => state.summoner.infos.stats
|
stats: state => state.summoner.overview.stats
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,226 +1,152 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="text-white pb-12">
|
<div class="text-white">
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<div style="width: 517px; height: 272px;">
|
<div style="width: 520px; height: 239px;">
|
||||||
<content-loader
|
<content-loader
|
||||||
:height="272"
|
:height="239"
|
||||||
:width="517"
|
:width="520"
|
||||||
:speed="2"
|
:speed="2"
|
||||||
primary-color="#17314f"
|
primary-color="#17314f"
|
||||||
secondary-color="#2b6cb0"
|
secondary-color="#2b6cb0"
|
||||||
>
|
>
|
||||||
<rect x="2" y="23" rx="3" ry="3" width="164" height="31" />
|
<rect x="0" y="45" rx="3" ry="3" width="126.28" height="31" />
|
||||||
<circle cx="49" cy="121" r="48" />
|
<circle cx="49" cy="145" r="48" />
|
||||||
<rect x="119" y="75" rx="3" ry="3" width="123" height="31" />
|
<rect x="365" y="108" rx="3" ry="3" width="62" height="31" />
|
||||||
<rect x="119" y="116" rx="3" ry="3" width="164" height="31" />
|
<rect x="162" y="108" rx="3" ry="3" width="195" height="31" />
|
||||||
<rect x="136" y="179" rx="3" ry="3" width="80" height="80" />
|
<rect x="109" y="154" rx="6" ry="6" width="126" height="38" />
|
||||||
<rect x="222" y="209" rx="3" ry="3" width="59" height="22" />
|
<rect x="243" y="154" rx="6" ry="6" width="277" height="38" />
|
||||||
<rect x="330" y="183" rx="3" ry="3" width="75" height="19" />
|
<rect x="0" y="217" rx="3" ry="3" width="67" height="22" />
|
||||||
<rect x="458" y="185" rx="3" ry="3" width="75" height="19" />
|
<rect x="78" y="217" rx="3" ry="3" width="80" height="22" />
|
||||||
<rect x="330" y="212" rx="3" ry="3" width="75" height="10" />
|
<circle cx="133" cy="122" r="24" />
|
||||||
<rect x="340" y="232" rx="3" ry="3" width="65" height="10" />
|
|
||||||
<rect x="468" y="218" rx="3" ry="3" width="65" height="10" />
|
|
||||||
</content-loader>
|
</content-loader>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-blue-800 rounded-lg" style="width: 351px; height: 210px;">
|
<div class="bg-blue-800 rounded-lg" style="width: 347px; height: 215px;">
|
||||||
<content-loader
|
<content-loader
|
||||||
:height="210"
|
:height="215"
|
||||||
:width="351"
|
:width="347"
|
||||||
:speed="2"
|
:speed="2"
|
||||||
primary-color="#17314f"
|
primary-color="#17314f"
|
||||||
secondary-color="#2b6cb0"
|
secondary-color="#2b6cb0"
|
||||||
>
|
>
|
||||||
<rect x="11" y="15" rx="3" ry="3" width="111.65" height="19" />
|
<rect x="110" y="10" rx="3" ry="3" width="130" height="19" />
|
||||||
<rect x="53" y="40" rx="3" ry="3" width="30" height="11" />
|
<rect x="53" y="45" rx="3" ry="3" width="30" height="11" />
|
||||||
<rect x="135" y="40" rx="3" ry="3" width="30" height="11" />
|
<rect x="135" y="45" rx="3" ry="3" width="30" height="11" />
|
||||||
<rect x="220" y="40" rx="3" ry="3" width="30" height="11" />
|
<rect x="220" y="45" rx="3" ry="3" width="30" height="11" />
|
||||||
<rect x="302" y="40" rx="3" ry="3" width="30" height="11" />
|
<rect x="305" y="45" rx="3" ry="3" width="30" height="11" />
|
||||||
<rect x="10" y="61" rx="3" ry="3" width="22" height="11" />
|
<rect x="10" y="66" rx="3" ry="3" width="22" height="11" />
|
||||||
<rect x="10" y="81" rx="3" ry="3" width="22" height="11" />
|
<rect x="10" y="86" rx="3" ry="3" width="22" height="11" />
|
||||||
<rect x="10" y="101" rx="3" ry="3" width="22" height="11" />
|
<rect x="10" y="106" rx="3" ry="3" width="22" height="11" />
|
||||||
<rect x="10" y="121" rx="3" ry="3" width="22" height="11" />
|
<rect x="10" y="126" rx="3" ry="3" width="22" height="11" />
|
||||||
<rect x="10" y="141" rx="3" ry="3" width="22" height="11" />
|
<rect x="10" y="146" rx="3" ry="3" width="22" height="11" />
|
||||||
<rect x="10" y="161" rx="3" ry="3" width="22" height="11" />
|
<rect x="10" y="166" rx="3" ry="3" width="22" height="11" />
|
||||||
<rect x="10" y="181" rx="3" ry="3" width="22" height="11" />
|
<rect x="10" y="186" rx="3" ry="3" width="22" height="11" />
|
||||||
<rect x="43" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="38" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="43" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="38" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="43" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="38" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="43" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="38" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="43" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="38" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="43" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="38" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="43" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="38" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="63" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="58" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="63" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="58" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="63" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="58" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="63" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="58" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="63" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="58" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="63" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="58" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="63" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="58" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="83" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="78" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="83" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="78" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="83" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="78" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="83" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="78" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="83" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="78" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="83" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="78" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="83" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="78" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="103" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="98" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="103" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="98" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="103" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="98" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="103" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="98" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="103" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="98" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="103" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="98" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="103" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="98" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="123" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="118" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="123" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="118" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="123" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="118" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="123" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="118" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="123" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="118" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="123" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="118" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="123" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="118" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="143" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="138" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="143" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="138" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="143" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="138" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="143" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="138" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="143" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="138" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="143" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="138" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="143" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="138" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="163" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="158" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="163" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="158" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="163" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="158" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="163" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="158" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="163" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="158" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="163" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="158" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="163" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="158" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="183" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="178" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="183" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="178" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="183" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="178" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="183" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="178" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="183" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="178" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="183" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="178" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="183" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="178" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="203" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="198" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="203" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="198" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="203" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="198" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="203" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="198" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="203" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="198" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="203" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="198" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="203" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="198" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="223" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="218" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="223" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="218" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="223" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="218" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="223" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="218" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="223" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="218" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="223" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="218" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="223" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="218" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="243" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="238" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="243" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="238" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="243" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="238" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="243" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="238" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="243" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="238" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="243" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="238" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="243" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="238" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="263" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="258" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="263" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="258" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="263" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="258" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="263" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="258" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="263" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="258" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="263" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="258" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="263" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="258" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="283" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="278" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="283" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="278" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="283" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="278" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="283" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="278" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="283" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="278" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="283" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="278" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="283" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="278" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="303" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="298" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="303" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="298" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="303" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="298" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="303" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="298" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="303" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="298" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="303" y="158" rx="0" ry="0" width="16" height="16" />
|
<rect x="298" y="164" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="303" y="178" rx="0" ry="0" width="16" height="16" />
|
<rect x="298" y="184" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="323" y="58" rx="0" ry="0" width="16" height="16" />
|
<rect x="318" y="64" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="323" y="78" rx="0" ry="0" width="16" height="16" />
|
<rect x="318" y="84" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="323" y="98" rx="0" ry="0" width="16" height="16" />
|
<rect x="318" y="104" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="323" y="118" rx="0" ry="0" width="16" height="16" />
|
<rect x="318" y="124" rx="0" ry="0" width="16" height="16" />
|
||||||
<rect x="323" y="138" rx="0" ry="0" width="16" height="16" />
|
<rect x="318" y="144" rx="0" ry="0" width="16" height="16" />
|
||||||
</content-loader>
|
</content-loader>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4 text-center">
|
|
||||||
<div
|
|
||||||
v-for="index in 10"
|
|
||||||
:key="index"
|
|
||||||
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
|
|
||||||
style="width: 1160px; height: 144px;"
|
|
||||||
>
|
|
||||||
<content-loader
|
|
||||||
:height="144"
|
|
||||||
:width="1160"
|
|
||||||
:speed="2"
|
|
||||||
primary-color="#17314f"
|
|
||||||
secondary-color="#2b6cb0"
|
|
||||||
>
|
|
||||||
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
|
|
||||||
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
|
|
||||||
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
|
|
||||||
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
|
|
||||||
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
|
|
||||||
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
|
|
||||||
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
|
||||||
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
|
|
||||||
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
|
|
||||||
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
|
|
||||||
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
|
|
||||||
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
|
|
||||||
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
|
|
||||||
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
|
|
||||||
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
|
|
||||||
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
|
|
||||||
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
|
|
||||||
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
|
|
||||||
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
|
|
||||||
<circle cx="862" cy="32" r="12" />
|
|
||||||
<circle cx="862" cy="52" r="12" />
|
|
||||||
<circle cx="862" cy="72" r="12" />
|
|
||||||
<circle cx="862" cy="92" r="12" />
|
|
||||||
<circle cx="862" cy="112" r="12" />
|
|
||||||
<circle cx="926" cy="32" r="12" />
|
|
||||||
<circle cx="926" cy="52" r="12" />
|
|
||||||
<circle cx="926" cy="72" r="12" />
|
|
||||||
<circle cx="926" cy="92" r="12" />
|
|
||||||
<circle cx="926" cy="112" r="12" />
|
|
||||||
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
|
|
||||||
<circle cx="1106" cy="50.55" r="11.88" />
|
|
||||||
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
|
|
||||||
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
|
|
||||||
</content-loader>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
|
|
||||||
<content-loader
|
|
||||||
:height="40"
|
|
||||||
:width="135"
|
|
||||||
:speed="2"
|
|
||||||
primary-color="#17314f"
|
|
||||||
secondary-color="#2b6cb0"
|
|
||||||
>
|
|
||||||
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
|
|
||||||
</content-loader>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ export function createMatchData(matches) {
|
||||||
|
|
||||||
const date = new Date(match.date)
|
const date = new Date(match.date)
|
||||||
const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }
|
const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }
|
||||||
const timeOptions = { hour12: false, hour: '2-digit', minute:'2-digit' }
|
const timeOptions = { hour12: false, hour: '2-digit', minute: '2-digit' }
|
||||||
match.fullDate = { date: date.toLocaleString('fr', dateOptions), time: date.toLocaleString('fr', timeOptions) }
|
match.fullDate = { date: date.toLocaleString('fr', dateOptions), time: date.toLocaleString('fr', timeOptions) }
|
||||||
match.date = timeDifference(match.date)
|
match.date = timeDifference(match.date)
|
||||||
|
|
||||||
|
|
@ -28,10 +28,10 @@ export function createMatchData(matches) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return all the infos about a summoner built with the Riot API data
|
* Return the basic infos about a summoner built with the Riot API data
|
||||||
* @param {Object} RiotData : all data from the Riot API
|
* @param {Object} RiotData : all data from the Riot API
|
||||||
*/
|
*/
|
||||||
export function createSummonerData(RiotData) {
|
export function createBasicSummonerData(RiotData) {
|
||||||
// Ranked Stats
|
// Ranked Stats
|
||||||
RiotData.ranked.soloQ = getLeagueData(RiotData.ranked.soloQ, 'Solo/Duo')
|
RiotData.ranked.soloQ = getLeagueData(RiotData.ranked.soloQ, 'Solo/Duo')
|
||||||
if (!RiotData.ranked.soloQ) delete RiotData.ranked.soloQ
|
if (!RiotData.ranked.soloQ) delete RiotData.ranked.soloQ
|
||||||
|
|
@ -57,11 +57,9 @@ export function createSummonerData(RiotData) {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
account: RiotData.account,
|
account: RiotData.account,
|
||||||
ranked: RiotData.ranked,
|
|
||||||
matchList: RiotData.allMatches,
|
matchList: RiotData.allMatches,
|
||||||
matches: createMatchData(RiotData.matchesDetails),
|
ranked: RiotData.ranked,
|
||||||
playing: RiotData.playing,
|
playing: RiotData.playing,
|
||||||
stats: RiotData.stats,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -82,7 +80,7 @@ export function getRankImg(leagueData) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSummonerLink(id) {
|
function getSummonerLink(id) {
|
||||||
if(id === 0) return null
|
if (id === 0) return null
|
||||||
const spellName = summonersJSON.find(s => s.id === id).iconPath.split('/assets/')[1].toLowerCase()
|
const spellName = summonersJSON.find(s => s.id === id).iconPath.split('/assets/')[1].toLowerCase()
|
||||||
return `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/${spellName}`
|
return `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/${spellName}`
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
transition-name="fade"
|
transition-name="fade"
|
||||||
></LazyBackground>
|
></LazyBackground>
|
||||||
|
|
||||||
<div class="relative page-wrapper mx-auto z-10 flex-grow">
|
<div class="relative page-wrapper mx-auto z-10 flex-grow text-white">
|
||||||
<header class="text-teal-100">
|
<header class="text-teal-100">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<router-link to="/">
|
<router-link to="/">
|
||||||
|
|
@ -18,14 +18,17 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<template v-if="summonerFound">
|
<template v-if="summonerLoading || summonerFound">
|
||||||
<div class="text-white pb-12">
|
<template v-if="summonerLoading">
|
||||||
|
<SummonerLoader />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="summonerFound">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<h1 class="text-4xl font-extrabold uppercase">
|
<h1 class="text-4xl font-extrabold uppercase">
|
||||||
<span class="text-5xl">{{ summonerInfos.account.name[0] }}</span>
|
<span class="text-5xl">{{ basic.account.name[0] }}</span>
|
||||||
<span>{{ summonerInfos.account.name.substring(1) }}</span>
|
<span>{{ basic.account.name.substring(1) }}</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div
|
<div
|
||||||
v-if="playing"
|
v-if="playing"
|
||||||
|
|
@ -40,23 +43,23 @@
|
||||||
<div
|
<div
|
||||||
:class="{'border-2': !playing}"
|
:class="{'border-2': !playing}"
|
||||||
class="relative z-10 w-24 h-24 rounded-full bg-blue-1000 bg-center bg-cover border-teal-400"
|
class="relative z-10 w-24 h-24 rounded-full bg-blue-1000 bg-center bg-cover border-teal-400"
|
||||||
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${summonerInfos.account.profileIconId}.jpg')`}"
|
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${basic.account.profileIconId}.jpg')`}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="absolute left-0 bottom-0 w-8 h-8 flex items-center justify-center bg-blue-900 rounded-full text-xs text-teal-500 font-extrabold border-2 border-teal-400"
|
class="absolute left-0 bottom-0 w-8 h-8 flex items-center justify-center bg-blue-900 rounded-full text-xs text-teal-500 font-extrabold border-2 border-teal-400"
|
||||||
>{{ summonerInfos.account.summonerLevel }}</div>
|
>{{ basic.account.summonerLevel }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SummonerRanked
|
<SummonerRanked
|
||||||
v-if="Object.entries(summonerInfos.ranked).length !== 0"
|
v-if="Object.entries(basic.ranked).length !== 0"
|
||||||
:ranked="summonerInfos.ranked"
|
:ranked="basic.ranked"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<RecentActivity :matches="summonerInfos.matchList" />
|
<RecentActivity :matches="basic.matchList" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- NAVIGATION -->
|
<!-- NAVIGATION -->
|
||||||
|
|
@ -70,18 +73,11 @@
|
||||||
class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
|
class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
|
||||||
exact
|
exact
|
||||||
>champions</router-link>
|
>champions</router-link>
|
||||||
<transition
|
</template>
|
||||||
enter-active-class="transition-all transition-fast ease-out-quad"
|
<!-- View -->
|
||||||
enter-class="opacity-0 scale-90"
|
<transition :name="tabTransition">
|
||||||
enter-to-class="opacity-100 scale-100"
|
<slot></slot>
|
||||||
>
|
</transition>
|
||||||
<slot></slot>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="summonerLoading">
|
|
||||||
<SummonerLoader />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="summonerNotFound">
|
<template v-else-if="summonerNotFound">
|
||||||
|
|
@ -127,10 +123,13 @@ export default {
|
||||||
uri() {
|
uri() {
|
||||||
return `${this.summoner}|${this.region}`
|
return `${this.summoner}|${this.region}`
|
||||||
},
|
},
|
||||||
|
tabTransition() {
|
||||||
|
return this.summonerFound && this.overviewLoaded ? 'tab' : 'none'
|
||||||
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
summonerInfos: state => state.summoner.infos
|
basic: state => state.summoner.basic
|
||||||
}),
|
}),
|
||||||
...mapGetters('summoner', ['playing', 'summonerFound', 'summonerNotFound', 'summonerLoading'])
|
...mapGetters('summoner', ['playing', 'overviewLoaded', 'summonerFound', 'summonerNotFound', 'summonerLoading'])
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -148,13 +147,13 @@ export default {
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
apiCall() {
|
apiCall() {
|
||||||
this.summonerRequest({ summoner: this.summoner, region: this.region })
|
this.basicRequest({ summoner: this.summoner, region: this.region })
|
||||||
},
|
},
|
||||||
redirect(summoner, region) {
|
redirect(summoner, region) {
|
||||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||||
},
|
},
|
||||||
...mapActions(['updateCurrentRegion']),
|
...mapActions(['updateCurrentRegion']),
|
||||||
...mapActions('summoner', ['summonerRequest']),
|
...mapActions('summoner', ['basicRequest']),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,96 +1,77 @@
|
||||||
import { axios } from '@/plugins/axios'
|
import { axios } from '@/plugins/axios'
|
||||||
import { createMatchData, createSummonerData } from '@/helpers/summoner'
|
import { createMatchData, createBasicSummonerData } from '@/helpers/summoner'
|
||||||
|
|
||||||
export const namespaced = true
|
export const namespaced = true
|
||||||
|
|
||||||
export const state = {
|
export const state = {
|
||||||
infos: {
|
basic: {
|
||||||
account: {},
|
account: {},
|
||||||
champions: [],
|
|
||||||
matchIndex: 0,
|
|
||||||
matchList: [],
|
matchList: [],
|
||||||
matches: [],
|
|
||||||
mates: [],
|
|
||||||
ranked: {},
|
ranked: {},
|
||||||
stats: {},
|
playing: false,
|
||||||
playing: false
|
status: '',
|
||||||
|
},
|
||||||
|
overview: {
|
||||||
|
matchIndex: 0,
|
||||||
|
matches: [],
|
||||||
|
stats: {},
|
||||||
|
loaded: false,
|
||||||
|
matchesLoading: false,
|
||||||
|
},
|
||||||
|
champions: {
|
||||||
|
list: [],
|
||||||
|
championsLoaded: false
|
||||||
},
|
},
|
||||||
championsLoaded: false,
|
|
||||||
matchesLoading: false,
|
|
||||||
status: '',
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const mutations = {
|
export const mutations = {
|
||||||
|
BASIC_REQUEST(state) {
|
||||||
|
state.basic.status = 'loading'
|
||||||
|
state.champions.championsLoaded = false
|
||||||
|
state.overview.loaded = false
|
||||||
|
},
|
||||||
CHAMPIONS_FOUND(state, { champions }) {
|
CHAMPIONS_FOUND(state, { champions }) {
|
||||||
state.infos.champions = champions
|
state.champions.list = champions
|
||||||
state.championsLoaded = true
|
state.champions.championsLoaded = true
|
||||||
},
|
},
|
||||||
MATCHES_LOADING(state) {
|
MATCHES_LOADING(state) {
|
||||||
state.matchesLoading = true
|
state.overview.matchesLoading = true
|
||||||
},
|
},
|
||||||
MATCHES_FOUND(state, { newMatches, stats }) {
|
MATCHES_FOUND(state, { newMatches, stats }) {
|
||||||
state.matchesLoading = false
|
state.overview.matchesLoading = false
|
||||||
|
state.overview.matches = [...state.infos.matches, ...newMatches]
|
||||||
state.infos.matches = [...state.infos.matches, ...newMatches]
|
state.overview.matchIndex += newMatches.length
|
||||||
|
state.overview.stats = stats
|
||||||
state.infos.matchIndex += newMatches.length
|
state.champions.championsLoaded = false
|
||||||
|
|
||||||
state.infos.stats = stats
|
|
||||||
|
|
||||||
state.championsLoaded = false
|
|
||||||
},
|
},
|
||||||
SUMMONER_REQUEST(state) {
|
OVERVIEW_FOUND(state, infos) {
|
||||||
state.status = 'loading'
|
state.overview.matches = infos.matches
|
||||||
|
state.overview.matchIndex = infos.matches.length
|
||||||
|
state.overview.stats = infos.stats
|
||||||
|
state.overview.loaded = true
|
||||||
},
|
},
|
||||||
SUMMONER_FOUND(state, infos) {
|
SUMMONER_FOUND(state, infos) {
|
||||||
state.infos.account = infos.account
|
state.basic.account = infos.account
|
||||||
state.infos.matchList = infos.matchList
|
state.basic.matchList = infos.matchList
|
||||||
state.infos.matches = infos.matches
|
state.basic.ranked = infos.ranked
|
||||||
state.infos.ranked = infos.ranked
|
state.basic.playing = infos.playing
|
||||||
state.infos.matchIndex = infos.matches.length
|
state.basic.status = 'found'
|
||||||
state.infos.playing = infos.playing
|
|
||||||
state.infos.stats = infos.stats
|
|
||||||
state.status = 'found'
|
|
||||||
state.championsLoaded = false
|
|
||||||
},
|
},
|
||||||
SUMMONER_NOT_FOUND(state) {
|
SUMMONER_NOT_FOUND(state) {
|
||||||
state.status = 'error'
|
state.basic.status = 'error'
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export const actions = {
|
export const actions = {
|
||||||
async championStats({ commit }, queue = null) {
|
async basicRequest({ commit, dispatch, rootState }, { summoner, region }) {
|
||||||
if (Number(queue) === -1)
|
|
||||||
queue = null
|
|
||||||
const resp = await axios(({ url: 'champions', data: { puuid: state.infos.account.puuid, queue: queue }, method: 'POST' })).catch(() => { })
|
|
||||||
console.log('CHAMPIONS STATS')
|
|
||||||
console.log('queue: ', queue)
|
|
||||||
console.log(resp.data)
|
|
||||||
|
|
||||||
commit('CHAMPIONS_FOUND', { champions: resp.data })
|
|
||||||
},
|
|
||||||
async moreMatches({ commit }) {
|
|
||||||
commit('MATCHES_LOADING')
|
|
||||||
|
|
||||||
const account = state.infos.account
|
|
||||||
const gameIds = state.infos.matchList.slice(state.infos.matchIndex, state.infos.matchIndex + 10).map(({ gameId }) => gameId)
|
|
||||||
|
|
||||||
const resp = await axios(({ url: 'match', data: { account, gameIds }, method: 'POST' })).catch(() => { })
|
|
||||||
console.log('--- MATCHES INFOS ---')
|
|
||||||
console.log(resp.data)
|
|
||||||
const newMatches = createMatchData(resp.data.matches)
|
|
||||||
commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats })
|
|
||||||
},
|
|
||||||
async summonerRequest({ commit, dispatch, rootState }, { summoner, region }) {
|
|
||||||
region = rootState.regionsList[region]
|
region = rootState.regionsList[region]
|
||||||
commit('SUMMONER_REQUEST')
|
commit('BASIC_REQUEST')
|
||||||
try {
|
try {
|
||||||
const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
|
const resp = await axios(({ url: 'summoner-basic', data: { summoner, region }, method: 'POST' }))
|
||||||
if (resp.data) {
|
if (resp.data) {
|
||||||
console.log('--- SUMMONER INFOS ---')
|
console.log('---SUMMONER INFOS---')
|
||||||
console.log(resp.data)
|
console.log(resp.data)
|
||||||
dispatch('ddragon/getVersion', resp.data.version, { root: true })
|
const infos = createBasicSummonerData(resp.data)
|
||||||
const infos = createSummonerData(resp.data)
|
|
||||||
commit('SUMMONER_FOUND', infos)
|
commit('SUMMONER_FOUND', infos)
|
||||||
} else {
|
} else {
|
||||||
commit('SUMMONER_NOT_FOUND')
|
commit('SUMMONER_NOT_FOUND')
|
||||||
|
|
@ -105,14 +86,41 @@ export const actions = {
|
||||||
commit('SUMMONER_NOT_FOUND')
|
commit('SUMMONER_NOT_FOUND')
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
async championsRequest({ commit }, queue = null) {
|
||||||
|
const resp = await axios(({ url: 'summoner-champions', data: { puuid: state.basic.account.puuid, queue: queue }, method: 'POST' })).catch(() => { })
|
||||||
|
console.log('---CHAMPIONS---')
|
||||||
|
console.log(resp.data)
|
||||||
|
|
||||||
|
commit('CHAMPIONS_FOUND', { champions: resp.data })
|
||||||
|
},
|
||||||
|
async moreMatches({ commit }) {
|
||||||
|
commit('MATCHES_LOADING')
|
||||||
|
|
||||||
|
const account = state.basic.account
|
||||||
|
const gameIds = state.basic.matchList.slice(state.overview.matchIndex, state.overview.matchIndex + 10).map(({ gameId }) => gameId)
|
||||||
|
|
||||||
|
const resp = await axios(({ url: 'match', data: { account, gameIds }, method: 'POST' })).catch(() => { })
|
||||||
|
console.log('---MATCHES INFOS---')
|
||||||
|
console.log(resp.data)
|
||||||
|
const newMatches = createMatchData(resp.data.matches)
|
||||||
|
commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats })
|
||||||
|
},
|
||||||
|
async overviewRequest({ commit }) {
|
||||||
|
const resp = await axios(({ url: 'summoner-overview', data: { account: state.basic.account }, method: 'POST' })).catch(() => { })
|
||||||
|
console.log('---OVERVIEW---')
|
||||||
|
console.log(resp.data)
|
||||||
|
resp.data.matches = createMatchData(resp.data.matchesDetails)
|
||||||
|
commit('OVERVIEW_FOUND', resp.data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getters = {
|
export const getters = {
|
||||||
matchesLoading: state => state.matchesLoading,
|
matchesLoading: state => state.overview.matchesLoading,
|
||||||
moreMatchesToFetch: state => state.infos.matchIndex < state.infos.matchList.length,
|
moreMatchesToFetch: state => state.overview.matchIndex < state.basic.matchList.length,
|
||||||
playing: state => state.infos.playing,
|
overviewLoaded: state => state.overview.loaded,
|
||||||
summonerFound: state => state.status === 'found',
|
playing: state => state.basic.playing,
|
||||||
summonerNotFound: state => state.status === 'error',
|
summonerFound: state => state.basic.status === 'found',
|
||||||
summonerLoading: state => state.status === 'loading',
|
summonerNotFound: state => state.basic.status === 'error',
|
||||||
|
summonerLoading: state => state.basic.status === 'loading',
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mt-3 flex text-center">
|
<div v-if="overviewLoaded" key="overview" class="mt-3 flex text-center">
|
||||||
<div class="mt-4 w-3/12">
|
<div class="mt-4 w-3/12">
|
||||||
<SummonerChampions />
|
<SummonerChampions />
|
||||||
<SummonerStats />
|
<SummonerStats />
|
||||||
<SummonerMates />
|
<SummonerMates />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-9/12">
|
<div v-if="overview.matches.length" class="w-9/12">
|
||||||
<ul>
|
<ul>
|
||||||
<Match
|
<Match
|
||||||
v-for="(match, index) in summonerInfos.matches"
|
v-for="(match, index) in overview.matches"
|
||||||
:key="index"
|
:key="index"
|
||||||
:data="summonerInfos.matches[index]"
|
:data="overview.matches[index]"
|
||||||
/>
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
<LoadingButton
|
<LoadingButton
|
||||||
|
|
@ -21,10 +21,266 @@
|
||||||
>More matches</LoadingButton>
|
>More matches</LoadingButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="mt-3 flex text-center">
|
||||||
|
<div class="mt-4 w-3/12">
|
||||||
|
<div class="bg-blue-800 rounded-lg" style="width: 300px; height: 339px;">
|
||||||
|
<content-loader
|
||||||
|
:height="339"
|
||||||
|
:width="300"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="94" y="18" rx="3" ry="3" width="111" height="24" />
|
||||||
|
<rect x="23" y="76" rx="3" ry="3" width="74" height="12" />
|
||||||
|
<rect x="130" y="76" rx="3" ry="3" width="34" height="12" />
|
||||||
|
<rect x="185" y="76" rx="3" ry="3" width="48" height="12" />
|
||||||
|
<rect x="246" y="76" rx="3" ry="3" width="30" height="12" />
|
||||||
|
<circle cx="40" cy="123" r="16" />
|
||||||
|
<rect x="60" y="116" rx="3" ry="3" width="49" height="13" />
|
||||||
|
<rect x="130" y="116" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="185" y="116" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="246" y="116" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<circle cx="40" cy="171" r="16" />
|
||||||
|
<rect x="60" y="163" rx="3" ry="3" width="49" height="13" />
|
||||||
|
<rect x="130" y="163" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="185" y="163" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="246" y="163" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<circle cx="40" cy="219" r="16" />
|
||||||
|
<rect x="60" y="212" rx="3" ry="3" width="49" height="13" />
|
||||||
|
<rect x="130" y="212" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="185" y="212" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="246" y="212" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<circle cx="40" cy="267" r="16" />
|
||||||
|
<rect x="60" y="260" rx="3" ry="3" width="49" height="13" />
|
||||||
|
<rect x="130" y="260" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="185" y="260" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="246" y="260" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<circle cx="40" cy="315" r="16" />
|
||||||
|
<rect x="60" y="308" rx="3" ry="3" width="49" height="13" />
|
||||||
|
<rect x="130" y="308" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="185" y="308" rx="3" ry="3" width="42" height="16" />
|
||||||
|
<rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 bg-blue-800 rounded-lg" style="width: 300px; height: 828px;">
|
||||||
|
<content-loader
|
||||||
|
:height="828"
|
||||||
|
:width="300"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="122" y="17" rx="3" ry="3" width="55" height="24" />
|
||||||
|
<rect x="26" y="72" rx="4" ry="4" width="8" height="51" />
|
||||||
|
<rect x="86" y="72" rx="4" ry="4" width="8" height="51" />
|
||||||
|
<rect x="146" y="72" rx="4" ry="4" width="8" height="51" />
|
||||||
|
<rect x="206" y="72" rx="4" ry="4" width="8" height="51" />
|
||||||
|
<rect x="266" y="72" rx="4" ry="4" width="8" height="51" />
|
||||||
|
<rect x="22" y="128" rx="3" ry="3" width="16" height="16" />
|
||||||
|
<rect x="82" y="128" rx="3" ry="3" width="16" height="16" />
|
||||||
|
<rect x="142" y="128" rx="3" ry="3" width="16" height="16" />
|
||||||
|
<rect x="202" y="128" rx="3" ry="3" width="16" height="16" />
|
||||||
|
<rect x="262" y="128" rx="3" ry="3" width="16" height="16" />
|
||||||
|
<rect x="14" y="182" rx="3" ry="3" width="45" height="16" />
|
||||||
|
<rect x="93" y="182" rx="3" ry="3" width="45" height="16" />
|
||||||
|
<rect x="155" y="182" rx="3" ry="3" width="58" height="16" />
|
||||||
|
<rect x="250" y="182" rx="3" ry="3" width="33" height="16" />
|
||||||
|
<rect x="14" y="212" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="93" y="212" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="168" y="212" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="212" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="237" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="93" y="237" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="168" y="237" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="237" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="262" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="93" y="262" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="168" y="262" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="262" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="287" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="93" y="287" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="168" y="287" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="287" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="312" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="93" y="312" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="168" y="312" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="312" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="337" rx="3" ry="3" width="105" height="12" />
|
||||||
|
<rect x="238" y="337" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="362" rx="3" ry="3" width="85" height="12" />
|
||||||
|
<rect x="238" y="362" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="397" rx="3" ry="3" width="115" height="16" />
|
||||||
|
<rect x="150" y="397" rx="3" ry="3" width="65" height="16" />
|
||||||
|
<rect x="223" y="397" rx="3" ry="3" width="60" height="16" />
|
||||||
|
<rect x="14" y="427" rx="3" ry="3" width="95" height="12" />
|
||||||
|
<rect x="165" y="427" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="427" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="452" rx="3" ry="3" width="95" height="12" />
|
||||||
|
<rect x="165" y="452" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="452" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="487" rx="3" ry="3" width="115" height="16" />
|
||||||
|
<rect x="150" y="487" rx="3" ry="3" width="65" height="16" />
|
||||||
|
<rect x="223" y="487" rx="3" ry="3" width="60" height="16" />
|
||||||
|
<rect x="14" y="517" rx="3" ry="3" width="95" height="12" />
|
||||||
|
<rect x="165" y="517" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="517" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="542" rx="3" ry="3" width="95" height="12" />
|
||||||
|
<rect x="165" y="542" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="542" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="577" rx="3" ry="3" width="115" height="16" />
|
||||||
|
<rect x="150" y="577" rx="3" ry="3" width="65" height="16" />
|
||||||
|
<rect x="223" y="577" rx="3" ry="3" width="60" height="16" />
|
||||||
|
<rect x="14" y="607" rx="3" ry="3" width="50" height="12" />
|
||||||
|
<rect x="165" y="607" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="607" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="632" rx="3" ry="3" width="50" height="12" />
|
||||||
|
<rect x="165" y="632" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="632" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="657" rx="3" ry="3" width="50" height="12" />
|
||||||
|
<rect x="165" y="657" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="657" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="682" rx="3" ry="3" width="50" height="12" />
|
||||||
|
<rect x="165" y="682" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="682" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="707" rx="3" ry="3" width="50" height="12" />
|
||||||
|
<rect x="165" y="707" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="707" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="14" y="732" rx="3" ry="3" width="50" height="12" />
|
||||||
|
<rect x="165" y="732" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="238" y="732" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="122" y="762" rx="3" ry="3" width="55" height="20" />
|
||||||
|
<rect x="115" y="789" rx="3" ry="3" width="70" height="12" />
|
||||||
|
<rect x="110" y="805" rx="3" ry="3" width="80" height="12" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 bg-blue-800 rounded-lg" style="width: 300px; height: 384px;">
|
||||||
|
<content-loader
|
||||||
|
:height="384"
|
||||||
|
:width="300"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="112" y="17" rx="3" ry="3" width="75" height="24" />
|
||||||
|
<rect x="14" y="70" rx="3" ry="3" width="80" height="16" />
|
||||||
|
<rect x="150" y="70" rx="3" ry="3" width="40" height="16" />
|
||||||
|
<rect x="217" y="70" rx="3" ry="3" width="59" height="16" />
|
||||||
|
<rect x="14" y="100" rx="3" ry="3" width="85" height="12" />
|
||||||
|
<rect x="145" y="100" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="100" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="121" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="145" y="121" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="121" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="142" rx="3" ry="3" width="85" height="12" />
|
||||||
|
<rect x="145" y="142" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="142" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="163" rx="3" ry="3" width="115" height="12" />
|
||||||
|
<rect x="145" y="163" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="163" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="184" rx="3" ry="3" width="85" height="12" />
|
||||||
|
<rect x="145" y="184" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="184" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="205" rx="3" ry="3" width="85" height="12" />
|
||||||
|
<rect x="145" y="205" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="205" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="226" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="145" y="226" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="226" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="247" rx="3" ry="3" width="115" height="12" />
|
||||||
|
<rect x="145" y="247" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="247" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="268" rx="3" ry="3" width="115" height="12" />
|
||||||
|
<rect x="145" y="268" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="268" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="289" rx="3" ry="3" width="85" height="12" />
|
||||||
|
<rect x="145" y="289" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="289" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="310" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="145" y="310" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="310" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="331" rx="3" ry="3" width="115" height="12" />
|
||||||
|
<rect x="145" y="331" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="331" rx="3" ry="3" width="65" height="12" />
|
||||||
|
<rect x="14" y="352" rx="3" ry="3" width="85" height="12" />
|
||||||
|
<rect x="145" y="352" rx="3" ry="3" width="45" height="12" />
|
||||||
|
<rect x="218" y="352" rx="3" ry="3" width="65" height="12" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-9/12">
|
||||||
|
<div
|
||||||
|
v-for="index in 10"
|
||||||
|
:key="index"
|
||||||
|
class="mt-4 ml-4 bg-blue-800 rounded-lg"
|
||||||
|
style="width: 884px; height: 144px;"
|
||||||
|
>
|
||||||
|
<content-loader
|
||||||
|
:height="144"
|
||||||
|
:width="884"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
||||||
|
<rect x="140" y="40" rx="6" ry="6" width="24" height="24" />
|
||||||
|
<rect x="140" y="72" rx="6" ry="6" width="24" height="24" />
|
||||||
|
<rect x="206" y="46" rx="3" ry="3" width="81" height="22" />
|
||||||
|
<rect x="218" y="74" rx="3" ry="3" width="59" height="16" />
|
||||||
|
<rect x="305" y="36" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="341" y="36" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="377" y="36" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="305" y="72" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="341" y="72" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="377" y="72" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="430" y="45" rx="3" ry="3" width="50" height="10" />
|
||||||
|
<rect x="430" y="60" rx="3" ry="3" width="50" height="10" />
|
||||||
|
<rect x="430" y="75" rx="3" ry="3" width="70" height="10" />
|
||||||
|
<rect x="430" y="90" rx="3" ry="3" width="70" height="10" />
|
||||||
|
<circle cx="608" cy="32" r="12" />
|
||||||
|
<circle cx="608" cy="52" r="12" />
|
||||||
|
<circle cx="608" cy="72" r="12" />
|
||||||
|
<circle cx="608" cy="92" r="12" />
|
||||||
|
<circle cx="608" cy="112" r="12" />
|
||||||
|
<circle cx="672" cy="32" r="12" />
|
||||||
|
<circle cx="672" cy="52" r="12" />
|
||||||
|
<circle cx="672" cy="72" r="12" />
|
||||||
|
<circle cx="672" cy="92" r="12" />
|
||||||
|
<circle cx="672" cy="112" r="12" />
|
||||||
|
<rect x="516" y="29" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="516" y="49" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="516" y="69" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="516" y="89" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="516" y="109" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="691" y="29" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="691" y="49" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="691" y="69" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="691" y="89" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="691" y="109" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<circle cx="830" cy="50" r="12" />
|
||||||
|
<rect x="800" y="66" rx="3" ry="3" width="64" height="17" />
|
||||||
|
<rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
|
||||||
|
<content-loader
|
||||||
|
:height="40"
|
||||||
|
:width="135"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { ContentLoader } from 'vue-content-loader'
|
||||||
import { mapState, mapActions, mapGetters } from 'vuex'
|
import { mapState, mapActions, mapGetters } from 'vuex'
|
||||||
import LoadingButton from '@/components/LoadingButton.vue'
|
import LoadingButton from '@/components/LoadingButton.vue'
|
||||||
import Match from '@/components/Match/Match.vue'
|
import Match from '@/components/Match/Match.vue'
|
||||||
|
|
@ -34,6 +290,7 @@ import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
ContentLoader,
|
||||||
LoadingButton,
|
LoadingButton,
|
||||||
Match,
|
Match,
|
||||||
SummonerChampions,
|
SummonerChampions,
|
||||||
|
|
@ -43,13 +300,28 @@ export default {
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
summonerInfos: state => state.summoner.infos
|
overview: state => state.summoner.overview
|
||||||
}),
|
}),
|
||||||
...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch'])
|
...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
summonerFound() {
|
||||||
|
this.fetchData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions('summoner', ['moreMatches']),
|
fetchData() {
|
||||||
}
|
if (!this.overviewLoaded && this.summonerFound) {
|
||||||
|
this.overviewRequest()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
...mapActions('summoner', ['moreMatches', 'overviewRequest']),
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div key="champions" class="mt-3">
|
||||||
<div class="mt-3">
|
<div class="mt-4 flex items-center">
|
||||||
<template v-if="championsLoaded">
|
<ChampionsSearch @search-champions="updateSearch" />
|
||||||
<div class="mt-4 flex items-center">
|
<FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
|
||||||
<ChampionsSearch @search-champions="updateSearch" />
|
|
||||||
<FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
|
|
||||||
</div>
|
|
||||||
<ChampionsTable
|
|
||||||
v-if="champions.length"
|
|
||||||
:champions="champions"
|
|
||||||
:search="searchChampions"
|
|
||||||
class="mt-6"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
|
<ChampionsTable :champions="champions" :search="searchChampions" class="mt-6" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapActions, mapState } from 'vuex'
|
import { mapActions, mapGetters, mapState } from 'vuex'
|
||||||
import { gameModes } from '@/data/data.js'
|
import { gameModes } from '@/data/data.js'
|
||||||
import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
|
import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
|
||||||
import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
|
import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
|
||||||
|
|
@ -53,28 +44,39 @@ export default {
|
||||||
}, {})
|
}, {})
|
||||||
return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues }
|
return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues }
|
||||||
},
|
},
|
||||||
|
...mapGetters('summoner', ['summonerFound']),
|
||||||
...mapState({
|
...mapState({
|
||||||
champions: state => state.summoner.infos.champions,
|
champions: state => state.summoner.champions.list,
|
||||||
championsLoaded: state => state.summoner.championsLoaded,
|
championsLoaded: state => state.summoner.champions.championsLoaded,
|
||||||
matchList: state => state.summoner.infos.matchList
|
matchList: state => state.summoner.basic.matchList
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
watch: {
|
||||||
if (!this.championsLoaded) {
|
summonerFound() {
|
||||||
console.log('FETCH CHAMPIONS')
|
this.fetchData()
|
||||||
this.championStats()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
if (!this.championsLoaded && this.summonerFound) {
|
||||||
|
this.championsRequest()
|
||||||
|
}
|
||||||
|
},
|
||||||
filterByQueue(queue) {
|
filterByQueue(queue) {
|
||||||
this.championStats(queue)
|
queue = Number(queue)
|
||||||
|
queue = queue === -1 ? null : queue
|
||||||
|
this.championsRequest(queue)
|
||||||
},
|
},
|
||||||
updateSearch(search) {
|
updateSearch(search) {
|
||||||
this.searchChampions = search
|
this.searchChampions = search
|
||||||
},
|
},
|
||||||
...mapActions('summoner', ['championStats']),
|
...mapActions('summoner', ['championsRequest']),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ const Summoner = use('App/Models/Summoner')
|
||||||
|
|
||||||
class SummonerController {
|
class SummonerController {
|
||||||
/**
|
/**
|
||||||
* POST Endpoint : get summoner data
|
* POST: get basic summoner data
|
||||||
*/
|
*/
|
||||||
async api({ request, response }) {
|
async basic({ request, response }) {
|
||||||
console.time('all')
|
console.time('all')
|
||||||
const summoner = request.input('summoner')
|
const summoner = request.input('summoner')
|
||||||
const region = request.input('region')
|
const region = request.input('region')
|
||||||
|
|
@ -38,6 +38,11 @@ class SummonerController {
|
||||||
{ puuid: account.puuid }
|
{ puuid: account.puuid }
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// MATCH LIST
|
||||||
|
await MatchService.updateMatchList(account, summonerDB)
|
||||||
|
const matchList = summonerDB.matchList
|
||||||
|
finalJSON.allMatches = matchList
|
||||||
|
|
||||||
// CURRENT GAME
|
// CURRENT GAME
|
||||||
const currentGame = await Jax.Spectator.summonerID(account.id, region)
|
const currentGame = await Jax.Spectator.summonerID(account.id, region)
|
||||||
finalJSON.playing = !!currentGame
|
finalJSON.playing = !!currentGame
|
||||||
|
|
@ -45,23 +50,6 @@ class SummonerController {
|
||||||
// RANKED STATS
|
// RANKED STATS
|
||||||
finalJSON.ranked = await SummonerService.getRanked(account, region)
|
finalJSON.ranked = await SummonerService.getRanked(account, region)
|
||||||
|
|
||||||
// MATCH LIST
|
|
||||||
await MatchService.updateMatchList(account, summonerDB)
|
|
||||||
const matchList = summonerDB.matchList
|
|
||||||
finalJSON.allMatches = matchList
|
|
||||||
|
|
||||||
// MATCHES BASIC
|
|
||||||
const gameIds = matchList.slice(0, 10).map(({ gameId }) => gameId)
|
|
||||||
finalJSON.matchesDetails = await MatchService.getMatches(account, gameIds, summonerDB)
|
|
||||||
|
|
||||||
// PATCH VERSION
|
|
||||||
finalJSON.version = Jax.DDragon.Version
|
|
||||||
|
|
||||||
// STATS
|
|
||||||
console.time('STATS')
|
|
||||||
finalJSON.stats = await StatsService.getSummonerStats(account)
|
|
||||||
console.timeEnd('STATS')
|
|
||||||
|
|
||||||
// SAVE IN DB
|
// SAVE IN DB
|
||||||
await summonerDB.save()
|
await summonerDB.save()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
@ -74,6 +62,39 @@ class SummonerController {
|
||||||
return response.json(finalJSON)
|
return response.json(finalJSON)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST: get overview view summoner data
|
||||||
|
*/
|
||||||
|
async overview({ request, response }) {
|
||||||
|
console.time('overview')
|
||||||
|
const account = request.input('account')
|
||||||
|
const finalJSON = {}
|
||||||
|
|
||||||
|
// Summoner in DB
|
||||||
|
const summonerDB = await Summoner.findOrCreate(
|
||||||
|
{ puuid: account.puuid },
|
||||||
|
{ puuid: account.puuid }
|
||||||
|
)
|
||||||
|
|
||||||
|
// MATCHES BASIC
|
||||||
|
const gameIds = summonerDB.matchList.slice(0, 10).map(({ gameId }) => gameId)
|
||||||
|
finalJSON.matchesDetails = await MatchService.getMatches(account, gameIds, summonerDB)
|
||||||
|
|
||||||
|
// STATS
|
||||||
|
console.time('STATS')
|
||||||
|
finalJSON.stats = await StatsService.getSummonerStats(account)
|
||||||
|
console.timeEnd('STATS')
|
||||||
|
|
||||||
|
// SAVE IN DB
|
||||||
|
await summonerDB.save()
|
||||||
|
|
||||||
|
console.timeEnd('overview')
|
||||||
|
return response.json(finalJSON)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST: get champions view summoner data
|
||||||
|
*/
|
||||||
async champions({ request, response }) {
|
async champions({ request, response }) {
|
||||||
const puuid = request.input('puuid')
|
const puuid = request.input('puuid')
|
||||||
const queue = request.input('queue')
|
const queue = request.input('queue')
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,12 @@ class MatchService {
|
||||||
let alreadyIn = false
|
let alreadyIn = false
|
||||||
let index = 0
|
let index = 0
|
||||||
do {
|
do {
|
||||||
let newMatchList = (await Jax.Matchlist.accountID(account.accountId, account.region, index)).matches
|
let newMatchList = await Jax.Matchlist.accountID(account.accountId, account.region, index)
|
||||||
|
// Error while fetching Riot API
|
||||||
|
if (!newMatchList) {
|
||||||
|
return matchList
|
||||||
|
}
|
||||||
|
newMatchList = newMatchList.matches
|
||||||
matchList = [...matchList, ...newMatchList]
|
matchList = [...matchList, ...newMatchList]
|
||||||
alreadyIn = newMatchList.length === 0 || stopFetching(newMatchList)
|
alreadyIn = newMatchList.length === 0 || stopFetching(newMatchList)
|
||||||
// If the match is made in another region : we stop fetching
|
// If the match is made in another region : we stop fetching
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,9 @@ Route.get('/', async () => {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
Route.post('/api', 'SummonerController.api')
|
Route.post('/summoner-basic', 'SummonerController.basic')
|
||||||
Route.post('/champions', 'SummonerController.champions')
|
Route.post('/summoner-overview', 'SummonerController.overview')
|
||||||
|
Route.post('/summoner-champions', 'SummonerController.champions')
|
||||||
Route.post('/ddragon', 'DDragonController.index')
|
Route.post('/ddragon', 'DDragonController.index')
|
||||||
Route.post('/match', 'MatchController.index')
|
Route.post('/match', 'MatchController.index')
|
||||||
Route.post('/match-details', 'MatchController.show')
|
Route.post('/match-details', 'MatchController.show')
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue