From 1f7bd5a85343f9062dc310bb1047b78ea885323f Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 1 Feb 2020 17:14:03 +0100
Subject: [PATCH 1/3] feat: update layout to add season select

---
 client/src/components/Match/Match.vue         |  8 ++-
 .../src/components/Summoner/FilterSeason.vue  | 48 +++++++++++++++
 .../src/components/Summoner/HeaderLoader.vue  |  2 +-
 .../Summoner/Overview/OverviewLoader.vue      |  5 +-
 client/src/layouts/Default.vue                | 60 +++++++++++--------
 client/src/store/modules/summoner.js          |  3 +
 client/src/views/Summoner.vue                 |  3 +-
 client/src/views/SummonerChampions.vue        |  2 +-
 client/src/views/SummonerRecords.vue          |  4 +-
 client/tailwind.config.js                     |  2 +-
 10 files changed, 102 insertions(+), 35 deletions(-)
 create mode 100644 client/src/components/Summoner/FilterSeason.vue

diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index bd2695d..f490d33 100644
--- a/client/src/components/Match/Match.vue
+++ b/client/src/components/Match/Match.vue
@@ -3,8 +3,8 @@
     <Ripple
       @click.native="displayDetails"
       color="rgba(43, 108, 176, 0.7)"
-      :class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg']"
-      class="match relative mt-4 bg-blue-800 text-white text-base cursor-pointer hover:shadow-xl"
+      :class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg', {'mt-4': indexMatch !== 0 }]"
+      class="match relative bg-blue-800 text-white text-base cursor-pointer hover:shadow-xl"
     >
       <div class="relative flex flex-wrap px-5 py-3">
         <div class="first w-4/12 text-left">
@@ -169,6 +169,10 @@ export default {
       type: Object,
       required: true
     },
+    indexMatch: {
+      type: Number,
+      default: -1,
+    }
   },
 
   data() {
diff --git a/client/src/components/Summoner/FilterSeason.vue b/client/src/components/Summoner/FilterSeason.vue
new file mode 100644
index 0000000..108665d
--- /dev/null
+++ b/client/src/components/Summoner/FilterSeason.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="relative group self-end inline-block text-blue-200 leading-none">
+    <select
+      v-model="season"
+      @change="filterSeason"
+      dir="rtl"
+      class="block appearance-none bg-transparent w-full px-4 pr-8 rounded-md cursor-pointer focus:outline-none group-hover:text-white"
+    >
+      <option v-for="(s, index) in seasons" :key="index" :value="s" class="bg-blue-800">Season {{ s }}</option>
+    </select>
+    <div
+      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+    >
+      <svg class="w-4 h-4 text-blue-200 group-hover:text-white">
+        <use xlink:href="#caret-down" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      season: null
+    }
+  },
+
+  computed: {
+    ...mapState({
+      currentseason: state => state.summoner.basic.currentSeason,
+      seasons: state => state.summoner.basic.seasons,
+    }),
+  },
+
+  created() {
+    this.season = this.currentseason
+  },
+
+  methods: {
+    filterSeason() {
+      console.log('filter season', this.season)
+    }
+  }
+}
+</script>
diff --git a/client/src/components/Summoner/HeaderLoader.vue b/client/src/components/Summoner/HeaderLoader.vue
index e5da336..168afa1 100644
--- a/client/src/components/Summoner/HeaderLoader.vue
+++ b/client/src/components/Summoner/HeaderLoader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-white">
+  <div class="text-white pb-2">
     <div class="flex justify-between">
       <div style="width: 520px; height: 239px;">
         <content-loader
diff --git a/client/src/components/Summoner/Overview/OverviewLoader.vue b/client/src/components/Summoner/Overview/OverviewLoader.vue
index ae1a237..37e0d85 100644
--- a/client/src/components/Summoner/Overview/OverviewLoader.vue
+++ b/client/src/components/Summoner/Overview/OverviewLoader.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-3 flex text-center">
-    <div class="mt-4 w-3/12">
+    <div class="w-3/12">
       <div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
         <content-loader
           :height="339"
@@ -191,7 +191,8 @@
       <div
         v-for="index in 10"
         :key="index"
-        class="mt-4 ml-4 bg-blue-850 rounded-lg"
+        :class="{'mt-4': index !== 1}"
+        class="ml-4 bg-blue-850 rounded-lg"
         style="width: 884px; height: 144px;"
       >
         <content-loader
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index 2701105..d7182f0 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -62,33 +62,41 @@
               <RecentActivity :matches="basic.matchList" />
             </div>
           </div>
-          <!-- NAVIGATION -->
-          <router-link
-            :to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summoner')"
-            class="pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >overview</router-link>
-          <router-link
-            :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summonerChampions')"
-            class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >champions</router-link>
-          <router-link
-            :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summonerRecords')"
-            class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >records</router-link>
-          <router-link
-            :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summonerLive')"
-            class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >live game</router-link>
+          <div class="flex items-center justify-between">
+            <!-- NAVIGATION -->
+            <div class="pb-2">
+              <router-link
+                :to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summoner')"
+                class="pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >overview</router-link>
+              <router-link
+                :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summonerChampions')"
+                class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >champions</router-link>
+              <router-link
+                :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summonerRecords')"
+                class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >records</router-link>
+              <router-link
+                :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summonerLive')"
+                class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >live game</router-link>
+            </div>
+
+            <!-- Select Season -->
+            <FilterSeason />
+          </div>
         </template>
         <!-- View -->
+        
         <transition :name="tabTransition">
           <slot></slot>
         </transition>
@@ -110,6 +118,7 @@
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
+import FilterSeason from '@/components/Summoner/FilterSeason.vue'
 import LazyBackground from '@/components/LazyBackgroundImage.vue'
 import MainFooter from '@/components/MainFooter.vue'
 import RecentActivity from '@/components/Summoner/RecentActivity.vue'
@@ -119,6 +128,7 @@ import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
 
 export default {
   components: {
+    FilterSeason,
     LazyBackground,
     MainFooter,
     RecentActivity,
diff --git a/client/src/store/modules/summoner.js b/client/src/store/modules/summoner.js
index 7fc9da9..f89b52e 100644
--- a/client/src/store/modules/summoner.js
+++ b/client/src/store/modules/summoner.js
@@ -6,8 +6,10 @@ export const namespaced = true
 export const state = {
   basic: {
     account: {},
+    currentSeason: 10,
     matchList: [],
     ranked: {},
+    seasons: [],
     status: '',
   },
   overview: {
@@ -79,6 +81,7 @@ export const mutations = {
     state.basic.account = infos.account
     state.basic.matchList = infos.matchList
     state.basic.ranked = infos.ranked
+    state.basic.seasons = infos.seasons
     state.basic.status = 'found'
     state.live.match = infos.current
     state.live.playing = infos.playing
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index a9712ce..1fd1494 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="overviewLoaded" key="overview" class="mt-3 flex text-center">
-    <div class="mt-4 w-3/12">
+    <div class="w-3/12">
       <SummonerChampions />
       <SummonerStats />
       <SummonerMates />
@@ -15,6 +15,7 @@
             v-for="(match, index) in overview.matches"
             :key="index"
             :data="overview.matches[index]"
+            :index-match="index"
           />
         </ul>
         <LoadingButton
diff --git a/client/src/views/SummonerChampions.vue b/client/src/views/SummonerChampions.vue
index 360f1cb..997717e 100644
--- a/client/src/views/SummonerChampions.vue
+++ b/client/src/views/SummonerChampions.vue
@@ -1,6 +1,6 @@
 <template>
   <div key="champions" class="mt-3">
-    <div class="mt-4 flex items-center">
+    <div class="flex items-center">
       <ChampionsSearch @search-champions="updateSearch" />
       <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
     </div>
diff --git a/client/src/views/SummonerRecords.vue b/client/src/views/SummonerRecords.vue
index 81bd6f1..9ec4c2f 100644
--- a/client/src/views/SummonerRecords.vue
+++ b/client/src/views/SummonerRecords.vue
@@ -1,7 +1,7 @@
 <template>
-  <div key="records" class="mt-3">
+  <div key="records" class="">
     <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
-      <div class="mt-4">
+      <div class="">
         <div class="mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">basics</div>
         <div class="-mx-2 flex flex-wrap">
           <template v-if="recordsLoaded">
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index f70218d..fd24e08 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -488,7 +488,7 @@ module.exports = {
     stroke: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
-    textColor: ['responsive', 'hover', 'focus'],
+    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
     textDecoration: ['responsive', 'hover', 'focus'],
     textTransform: ['responsive'],
     userSelect: ['responsive'],

From 7beb635c806d28536ed53f2dc1fef84b14ccb885 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 1 Feb 2020 17:14:33 +0100
Subject: [PATCH 2/3] feat: get list of played seasons for a summoner from
 basic endpoint

---
 .../Controllers/Http/SummonerController.js    |  8 +++++
 server/app/Repositories/MatchRepository.js    | 36 +++++++++++++++----
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/server/app/Controllers/Http/SummonerController.js b/server/app/Controllers/Http/SummonerController.js
index 0484112..61d6336 100644
--- a/server/app/Controllers/Http/SummonerController.js
+++ b/server/app/Controllers/Http/SummonerController.js
@@ -9,6 +9,10 @@ const StatsService = use('App/Services/StatsService')
 const Summoner = use('App/Models/Summoner')
 
 class SummonerController {
+  async _getSeasons(puuid) {
+    let seasons = await MatchRepository.seasons(puuid)
+    return seasons.length ? seasons.map(s => s._id) : [10]
+  }
   /**
    * POST: get basic summoner data
    */
@@ -44,6 +48,9 @@ class SummonerController {
       const matchList = summonerDB.matchList
       finalJSON.matchList = matchList
 
+      // All seasons the summoner has played
+      finalJSON.seasons = await this._getSeasons(account.puuid)
+
       // CURRENT GAME
       const currentGame = await Jax.Spectator.summonerID(account.id, region)
       finalJSON.playing = !!currentGame
@@ -70,6 +77,7 @@ class SummonerController {
   async overview({ request, response }) {
     console.time('overview')
     const account = request.input('account')
+    const season = request.input('season')
     const finalJSON = {}
 
     // Summoner in DB
diff --git a/server/app/Repositories/MatchRepository.js b/server/app/Repositories/MatchRepository.js
index 5710497..d6bc0f1 100644
--- a/server/app/Repositories/MatchRepository.js
+++ b/server/app/Repositories/MatchRepository.js
@@ -9,6 +9,18 @@ class MatchRepository {
     this.Match = Match
   }
 
+  /**
+   * Basic matchParams used in a lot of requests
+   * @param puuid of the summoner
+   */
+  _matchParams(puuid) {
+    return {
+      summoner_puuid: puuid,
+      result: { $not: { $eq: 'Remake' } },
+      gamemode: { $nin: [800, 810, 820, 830, 840, 850] },
+    }
+  }
+
   /**
    * Build the aggregate mongo query
    * @param {Number} puuid 
@@ -22,9 +34,7 @@ class MatchRepository {
     return this.Match.query().aggregate([
       {
         $match: {
-          summoner_puuid: puuid,
-          result: { $not: { $eq: 'Remake' } },
-          gamemode: { $nin: [800, 810, 820, 830, 840, 850] },
+          ...this._matchParams(puuid),
           ...matchParams
         }
       },
@@ -140,9 +150,7 @@ class MatchRepository {
     return this.Match.query().aggregate([
       {
         $match: {
-          summoner_puuid: puuid,
-          result: { $not: { $eq: 'Remake' } },
-          gamemode: { $nin: [800, 810, 820, 830, 840, 850] },
+          ...this._matchParams(puuid),
         }
       },
       {
@@ -222,6 +230,22 @@ class MatchRepository {
     ]
     return this._aggregate(puuid, matchParams, [], '$role', {}, finalSteps)
   }
+  /**
+   * Get Summoner's played seasons
+   * @param puuid of the summoner
+   */
+  seasons(puuid) {
+    return this.Match.query().aggregate([
+      {
+        $match: {
+          ...this._matchParams(puuid),
+        }
+      },
+      {
+        $group: { _id: '$season' }
+      },
+    ])
+  }
 
   /**
    * Get Summoner's mates list

From d839eed7ad42bb545d03baca4fa9755d58e3f191 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 1 Feb 2020 20:17:14 +0100
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20filter=20by=20season=20now=20works?=
 =?UTF-8?q?=20=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Summoner/FilterSeason.vue  |   7 +-
 client/src/plugins/axios.js                   |  14 +-
 client/src/router.js                          |  15 +-
 client/src/store/modules/summoner.js          |  15 +-
 client/src/views/Summoner.vue                 |   3 +
 client/src/views/SummonerChampions.vue        |  10 +-
 client/src/views/SummonerRecords.vue          | 285 +++++++++---------
 .../Controllers/Http/SummonerController.js    |  15 +-
 server/app/Repositories/MatchRepository.js    |  20 +-
 server/app/Services/StatsService.js           |   3 +-
 10 files changed, 223 insertions(+), 164 deletions(-)

diff --git a/client/src/components/Summoner/FilterSeason.vue b/client/src/components/Summoner/FilterSeason.vue
index 108665d..0a2172e 100644
--- a/client/src/components/Summoner/FilterSeason.vue
+++ b/client/src/components/Summoner/FilterSeason.vue
@@ -6,6 +6,7 @@
       dir="rtl"
       class="block appearance-none bg-transparent w-full px-4 pr-8 rounded-md cursor-pointer focus:outline-none group-hover:text-white"
     >
+      <option :value="null" class="bg-blue-800">All seasons</option>
       <option v-for="(s, index) in seasons" :key="index" :value="s" class="bg-blue-800">Season {{ s }}</option>
     </select>
     <div
@@ -19,7 +20,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   data() {
@@ -42,7 +43,9 @@ export default {
   methods: {
     filterSeason() {
       console.log('filter season', this.season)
-    }
+      this.updateSeason(this.season)
+    },
+    ...mapActions('summoner', ['updateSeason'])
   }
 }
 </script>
diff --git a/client/src/plugins/axios.js b/client/src/plugins/axios.js
index 1cae95a..193460c 100644
--- a/client/src/plugins/axios.js
+++ b/client/src/plugins/axios.js
@@ -1,4 +1,6 @@
 import axiosHttp from 'axios'
+import router from '../router'
+import store from '../store'
 
 export const axios = axiosHttp
 
@@ -11,8 +13,16 @@ const axiosSource = CancelToken.source()
 axios.defaults.axiosSource = axiosSource
 axios.defaults.cancelToken = axiosSource.token
 
+// Add season number to data if the route need it
+axios.interceptors.request.use(function (config) {
+  if (config.url !== 'summoner-basic' && router.currentRoute.meta.season) {
+    config.data.season = store.state.summoner.basic.currentSeason
+  }
+  return config
+})
+
 export default {
-  install (Vue) {
+  install(Vue) {
     Vue.prototype.$axios = axiosHttp
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/router.js b/client/src/router.js
index 7b78ea4..9af6fda 100644
--- a/client/src/router.js
+++ b/client/src/router.js
@@ -25,17 +25,26 @@ const router = new Router({
     {
       path: '/summoner/:region/:name',
       name: 'summoner',
-      component: Summoner
+      component: Summoner,
+      meta: {
+        season: true
+      }
     },
     {
       path: '/summoner/:region/:name/champions',
       name: 'summonerChampions',
-      component: SummonerChampions
+      component: SummonerChampions,
+      meta: {
+        season: true
+      }
     },
     {
       path: '/summoner/:region/:name/records',
       name: 'summonerRecords',
-      component: SummonerRecords
+      component: SummonerRecords,
+      meta: {
+        season: true
+      }
     },
     {
       path: '/summoner/:region/:name/live',
diff --git a/client/src/store/modules/summoner.js b/client/src/store/modules/summoner.js
index f89b52e..3c03357 100644
--- a/client/src/store/modules/summoner.js
+++ b/client/src/store/modules/summoner.js
@@ -6,7 +6,7 @@ export const namespaced = true
 export const state = {
   basic: {
     account: {},
-    currentSeason: 10,
+    currentSeason: null,
     matchList: [],
     ranked: {},
     seasons: [],
@@ -37,6 +37,7 @@ export const state = {
 export const mutations = {
   BASIC_REQUEST(state) {
     state.basic.status = 'loading'
+    state.basic.currentSeason = null
     state.champions.championsLoaded = false
     state.records.recordsLoaded = false
     state.overview.loaded = false
@@ -93,7 +94,14 @@ export const mutations = {
     state.live.match = {}
     state.live.playing = false
     state.live.liveLoaded = false
-  }
+  },
+  UPDATE_SEASON(state, { season }) {
+    state.basic.currentSeason = season
+
+    state.overview.loaded = false
+    state.champions.championsLoaded = false
+    state.records.recordsLoaded = false
+  },
 }
 
 export const actions = {
@@ -171,6 +179,9 @@ export const actions = {
     const records = resp.data ? createRecordsData(resp.data) : {}
 
     commit('RECORDS_FOUND', { records })
+  },
+  updateSeason({ commit }, season) {
+    commit('UPDATE_SEASON', { season })
   }
 }
 
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index 1fd1494..f3539b5 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -63,6 +63,9 @@ export default {
   },
 
   watch: {
+    overviewLoaded() {
+      this.fetchData()
+    },
     summonerFound() {
       this.fetchData()
     }
diff --git a/client/src/views/SummonerChampions.vue b/client/src/views/SummonerChampions.vue
index 997717e..314d92a 100644
--- a/client/src/views/SummonerChampions.vue
+++ b/client/src/views/SummonerChampions.vue
@@ -24,6 +24,7 @@ export default {
 
   data() {
     return {
+      queue: null,
       searchChampions: ''
     }
   },
@@ -53,6 +54,9 @@ export default {
   },
 
   watch: {
+    championsLoaded() {
+      this.fetchData()
+    },
     summonerFound() {
       this.fetchData()
     }
@@ -65,13 +69,13 @@ export default {
   methods: {
     fetchData() {
       if (!this.championsLoaded && this.summonerFound) {
-        this.championsRequest()
+        this.championsRequest(this.queue)
       }
     },
     filterByQueue(queue) {
       queue = Number(queue)
-      queue = queue === -1 ? null : queue
-      this.championsRequest(queue)
+      this.queue = queue === -1 ? null : queue
+      this.championsRequest(this.queue)
     },
     updateSearch(search) {
       this.searchChampions = search
diff --git a/client/src/views/SummonerRecords.vue b/client/src/views/SummonerRecords.vue
index 9ec4c2f..0e28077 100644
--- a/client/src/views/SummonerRecords.vue
+++ b/client/src/views/SummonerRecords.vue
@@ -1,150 +1,148 @@
 <template>
-  <div key="records" class="">
+  <div key="records">
     <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
-      <div class="">
-        <div class="mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">basics</div>
-        <div class="-mx-2 flex flex-wrap">
-          <template v-if="recordsLoaded">
-            <RecordCard
-              color="text-blue-400"
-              property="kda"
-              :record="records.maxKda"
-              title="best kda"
-            />
-            <RecordCard
-              color="text-green-400"
-              property="kills"
-              :record="records.maxKills"
-              title="most kills"
-            />
-            <RecordCard
-              color="text-blue-500"
-              property="assists"
-              :record="records.maxAssists"
-              title="most assists"
-            />
-            <RecordCard
-              color="text-red-500"
-              property="deaths"
-              :record="records.maxDeaths"
-              title="most deaths"
-            />
-            <RecordCard
-              color="text-yellow-600"
-              property="gold"
-              :record="records.maxGold"
-              title="most gold earned"
-            />
-            <RecordCard
-              color="text-white"
-              property="time"
-              :record="records.maxTime"
-              title="longest game"
-            />
-            <RecordCard
-              color="text-pink-500"
-              property="minions"
-              :record="records.maxMinions"
-              title="most minions killed"
-            />
-          </template>
-          <template v-else>
-            <div
-              v-for="index in 7"
-              :key="index"
-              style="width: 288px; height: 146px;"
-              class="mt-6 mx-2"
+      <div class="mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">basics</div>
+      <div class="-mx-2 flex flex-wrap">
+        <template v-if="recordsLoaded">
+          <RecordCard
+            color="text-blue-400"
+            property="kda"
+            :record="records.maxKda"
+            title="best kda"
+          />
+          <RecordCard
+            color="text-green-400"
+            property="kills"
+            :record="records.maxKills"
+            title="most kills"
+          />
+          <RecordCard
+            color="text-blue-500"
+            property="assists"
+            :record="records.maxAssists"
+            title="most assists"
+          />
+          <RecordCard
+            color="text-red-500"
+            property="deaths"
+            :record="records.maxDeaths"
+            title="most deaths"
+          />
+          <RecordCard
+            color="text-yellow-600"
+            property="gold"
+            :record="records.maxGold"
+            title="most gold earned"
+          />
+          <RecordCard
+            color="text-white"
+            property="time"
+            :record="records.maxTime"
+            title="longest game"
+          />
+          <RecordCard
+            color="text-pink-500"
+            property="minions"
+            :record="records.maxMinions"
+            title="most minions killed"
+          />
+        </template>
+        <template v-else>
+          <div
+            v-for="index in 7"
+            :key="index"
+            style="width: 288px; height: 146px;"
+            class="mt-6 mx-2"
+          >
+            <content-loader
+              :height="146"
+              :width="288"
+              :speed="2"
+              primary-color="#17314f"
+              secondary-color="#2b6cb0"
             >
-              <content-loader
-                :height="146"
-                :width="288"
-                :speed="2"
-                primary-color="#17314f"
-                secondary-color="#2b6cb0"
-              >
-                <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
-              </content-loader>
-            </div>
-          </template>
-        </div>
-        <div
-          class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900"
-        >game impact</div>
-        <div class="-mx-2 flex flex-wrap">
-          <template v-if="recordsLoaded">
-            <RecordCard
-              color="text-yellow-400"
-              property="dmgTaken"
-              :record="records.maxDmgTaken"
-              title="highest damage taken"
-            />
-            <RecordCard
-              color="text-red-400"
-              property="dmgChamp"
-              :record="records.maxDmgChamp"
-              title="highest damage to champions"
-            />
-            <RecordCard
-              color="text-yellow-400"
-              property="dmgObj"
-              :record="records.maxDmgObj"
-              title="highest damage to objectives"
-            />
-            <RecordCard
-              color="text-green-400"
-              property="kp"
-              :record="records.maxKp"
-              title="highest kill participation"
-            />
-          </template>
-          <template v-else>
-            <div
-              v-for="index in 4"
-              :key="index"
-              style="width: 288px; height: 146px;"
-              class="mt-6 mx-2"
+              <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
+            </content-loader>
+          </div>
+        </template>
+      </div>
+      <div
+        class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900"
+      >game impact</div>
+      <div class="-mx-2 flex flex-wrap">
+        <template v-if="recordsLoaded">
+          <RecordCard
+            color="text-yellow-400"
+            property="dmgTaken"
+            :record="records.maxDmgTaken"
+            title="highest damage taken"
+          />
+          <RecordCard
+            color="text-red-400"
+            property="dmgChamp"
+            :record="records.maxDmgChamp"
+            title="highest damage to champions"
+          />
+          <RecordCard
+            color="text-yellow-400"
+            property="dmgObj"
+            :record="records.maxDmgObj"
+            title="highest damage to objectives"
+          />
+          <RecordCard
+            color="text-green-400"
+            property="kp"
+            :record="records.maxKp"
+            title="highest kill participation"
+          />
+        </template>
+        <template v-else>
+          <div
+            v-for="index in 4"
+            :key="index"
+            style="width: 288px; height: 146px;"
+            class="mt-6 mx-2"
+          >
+            <content-loader
+              :height="146"
+              :width="288"
+              :speed="2"
+              primary-color="#17314f"
+              secondary-color="#2b6cb0"
             >
-              <content-loader
-                :height="146"
-                :width="288"
-                :speed="2"
-                primary-color="#17314f"
-                secondary-color="#2b6cb0"
-              >
-                <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
-              </content-loader>
-            </div>
-          </template>
-        </div>
-        <div class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">team work</div>
-        <div class="-mx-2 flex flex-wrap">
-          <template v-if="recordsLoaded">
-            <RecordCard
-              color="text-blue-500"
-              property="vision"
-              :record="records.maxVision"
-              title="highest vision score"
-            />
-          </template>
-          <template v-else>
-            <div
-              v-for="index in 1"
-              :key="index"
-              style="width: 288px; height: 146px;"
-              class="mt-6 mx-2"
+              <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
+            </content-loader>
+          </div>
+        </template>
+      </div>
+      <div class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">team work</div>
+      <div class="-mx-2 flex flex-wrap">
+        <template v-if="recordsLoaded">
+          <RecordCard
+            color="text-blue-500"
+            property="vision"
+            :record="records.maxVision"
+            title="highest vision score"
+          />
+        </template>
+        <template v-else>
+          <div
+            v-for="index in 1"
+            :key="index"
+            style="width: 288px; height: 146px;"
+            class="mt-6 mx-2"
+          >
+            <content-loader
+              :height="146"
+              :width="288"
+              :speed="2"
+              primary-color="#17314f"
+              secondary-color="#2b6cb0"
             >
-              <content-loader
-                :height="146"
-                :width="288"
-                :speed="2"
-                primary-color="#17314f"
-                secondary-color="#2b6cb0"
-              >
-                <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
-              </content-loader>
-            </div>
-          </template>
-        </div>
+              <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
+            </content-loader>
+          </div>
+        </template>
       </div>
     </template>
     <template v-if="recordsLoaded && !records.maxKda">
@@ -176,6 +174,9 @@ export default {
   },
 
   watch: {
+    recordsLoaded() {
+      this.fetchData()
+    },
     summonerFound() {
       this.fetchData()
     }
diff --git a/server/app/Controllers/Http/SummonerController.js b/server/app/Controllers/Http/SummonerController.js
index 61d6336..e210ca3 100644
--- a/server/app/Controllers/Http/SummonerController.js
+++ b/server/app/Controllers/Http/SummonerController.js
@@ -87,12 +87,17 @@ class SummonerController {
     )
 
     // MATCHES BASIC
-    const gameIds = summonerDB.matchList.slice(0, 10).map(({ gameId }) => gameId)
+    const gameIds = summonerDB.matchList.slice(0)
+      .filter(m => {
+        return season ? m.seasonMatch === season : true
+      })
+      .slice(0, 10)
+      .map(({ gameId }) => gameId)
     finalJSON.matchesDetails = await MatchService.getMatches(account, gameIds, summonerDB)
 
     // STATS
     console.time('STATS')
-    finalJSON.stats = await StatsService.getSummonerStats(account)
+    finalJSON.stats = await StatsService.getSummonerStats(account, season)
     console.timeEnd('STATS')
 
     // SAVE IN DB
@@ -108,8 +113,9 @@ class SummonerController {
   async champions({ request, response }) {
     const puuid = request.input('puuid')
     const queue = request.input('queue')
+    const season = request.input('season')
     console.time('championsRequest')
-    const championStats = await MatchRepository.championCompleteStats(puuid, queue)
+    const championStats = await MatchRepository.championCompleteStats(puuid, queue, season)
     console.timeEnd('championsRequest')
     return response.json(championStats)
   }
@@ -119,8 +125,9 @@ class SummonerController {
    */
   async records({ request, response }) {
     const puuid = request.input('puuid')
+    const season = request.input('season')
     console.time('recordsRequest')
-    const records = await MatchRepository.records(puuid)
+    const records = await MatchRepository.records(puuid, season)
     console.timeEnd('recordsRequest')
     return response.json(records[0])
   }
diff --git a/server/app/Repositories/MatchRepository.js b/server/app/Repositories/MatchRepository.js
index d6bc0f1..449a442 100644
--- a/server/app/Repositories/MatchRepository.js
+++ b/server/app/Repositories/MatchRepository.js
@@ -18,6 +18,7 @@ class MatchRepository {
       summoner_puuid: puuid,
       result: { $not: { $eq: 'Remake' } },
       gamemode: { $nin: [800, 810, 820, 830, 840, 850] },
+      season: this.season ? this.season : { $exists: true }
     }
   }
 
@@ -92,11 +93,15 @@ class MatchRepository {
    * Get Summoner's complete statistics for the all played champs
    * @param puuid of the summoner
    * @param queue of the matches to fetch, if null get all matches
+   * @param season of the matches to fetch, if null get all seasons
    */
-  championCompleteStats(puuid, queue) {
-    const matchParams = queue ? {
-      gamemode: { $eq: Number(queue) },
-    } : {}
+  championCompleteStats(puuid, queue, season) {
+    const matchParams = {}
+    if (queue) {
+      matchParams.gamemode = { $eq: Number(queue) }
+    }
+    this.season = season
+
     const groupParams = {
       time: { $sum: '$time' },
       gameLength: { $avg: '$time' },
@@ -145,8 +150,11 @@ class MatchRepository {
   /**
   * Get Summoner's all records
   * @param puuid of the summoner
+  * @param season of the matches to fetch, if null get all seasons
   */
-  records(puuid) {
+  records(puuid, season) {
+    this.season = season
+
     return this.Match.query().aggregate([
       {
         $match: {
@@ -235,6 +243,8 @@ class MatchRepository {
    * @param puuid of the summoner
    */
   seasons(puuid) {
+    this.season = null
+
     return this.Match.query().aggregate([
       {
         $match: {
diff --git a/server/app/Services/StatsService.js b/server/app/Services/StatsService.js
index c552e6b..8583b37 100644
--- a/server/app/Services/StatsService.js
+++ b/server/app/Services/StatsService.js
@@ -8,7 +8,8 @@ class StatsService {
     this.matchRepository = MatchRepository
   }
 
-  async getSummonerStats(account) {
+  async getSummonerStats(account, season) {
+    this.matchRepository.season = season
     const globalStats = await this.matchRepository.globalStats(account.puuid)
     const gamemodeStats = await this.matchRepository.gamemodeStats(account.puuid)
     const roleStats = await this.matchRepository.roleStats(account.puuid)