mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
327 lines
16 KiB
Vue
327 lines
16 KiB
Vue
<template>
|
|
<div v-if="overviewLoaded" key="overview" class="mt-3 flex text-center">
|
|
<div class="mt-4 w-3/12">
|
|
<SummonerChampions />
|
|
<SummonerStats />
|
|
<SummonerMates />
|
|
</div>
|
|
<div v-if="overview.matches.length" class="w-9/12">
|
|
<ul>
|
|
<Match
|
|
v-for="(match, index) in overview.matches"
|
|
:key="index"
|
|
:data="overview.matches[index]"
|
|
/>
|
|
</ul>
|
|
<LoadingButton
|
|
v-if="moreMatchesToFetch"
|
|
@clicked="moreMatches"
|
|
:loading="matchesLoading"
|
|
btn-class="mt-4 block mx-auto bg-blue-800 px-4 py-2 rounded-md font-semibold hover:bg-blue-1000 shadow-lg"
|
|
>More matches</LoadingButton>
|
|
</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>
|
|
|
|
|
|
<script>
|
|
import { ContentLoader } from 'vue-content-loader'
|
|
import { mapState, mapActions, mapGetters } from 'vuex'
|
|
import LoadingButton from '@/components/LoadingButton.vue'
|
|
import Match from '@/components/Match/Match.vue'
|
|
import SummonerChampions from '@/components/Summoner/Overview/SummonerChampions.vue'
|
|
import SummonerMates from '@/components/Summoner/Overview/SummonerMates.vue'
|
|
import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
|
|
|
|
export default {
|
|
components: {
|
|
ContentLoader,
|
|
LoadingButton,
|
|
Match,
|
|
SummonerChampions,
|
|
SummonerMates,
|
|
SummonerStats,
|
|
},
|
|
|
|
computed: {
|
|
...mapState({
|
|
overview: state => state.summoner.overview
|
|
}),
|
|
...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
|
|
},
|
|
|
|
watch: {
|
|
summonerFound() {
|
|
this.fetchData()
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.fetchData()
|
|
},
|
|
|
|
methods: {
|
|
fetchData() {
|
|
if (!this.overviewLoaded && this.summonerFound) {
|
|
this.overviewRequest()
|
|
}
|
|
},
|
|
...mapActions('summoner', ['moreMatches', 'overviewRequest']),
|
|
},
|
|
}
|
|
</script>
|