feat(vuex): start cdragon/runes module

client/src/components/Match/DetailedMatchTeam.vue

@@ -228,7 +228,7 @@
 
 <script>
 import { colors } from '@/data/data.js'
-import { mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import DotsLoader from '@/components/Common/DotsLoader.vue'
 import Tooltip from '@/components/Common/Tooltip.vue'
 import MatchItems from '@/components/Match/MatchItems.vue'
@@ -300,6 +300,14 @@ export default {
     roundStats(value) {
       return this.percentSettings ? value : this.$options.filters.kilo(value)
     },
+    selectRunes(player) {
+      const runes = {
+        primary: player.primaryRune,
+        secondary: player.secondaryRune
+      }
+      this.displayOrHideRunes(runes)
+    },
+    ...mapActions('cdragon', ['displayOrHideRunes']),
   }
 }
 </script>

client/src/components/Match/Runes/RunesContainer.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    v-if="isOpen"
+    @click="close"
+    class="fixed inset-0 z-40 flex items-center justify-center bg-gray-900"
+  >
+    <div class="text-3xl text-white bg-red-500">RUNES {{ runes.primary }}</div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    runes: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      isOpen: this.open,
+    }
+  },
+
+  watch: {
+    open () {
+      this.isOpen = this.open
+    }
+  },
+
+  methods: {
+    close() {
+      this.displayOrHideRunes({})
+    },
+    ...mapActions('cdragon', ['displayOrHideRunes'])
+  }
+}
+</script>

client/src/plugins/axios.js

@@ -15,7 +15,7 @@ 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) {
+  if (config.method === 'post' && config.url !== 'summoner/basic' && router.currentRoute.meta.season) {
     config.data.season = store.state.summoner.basic.currentSeason
   }
   return config

client/src/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import * as cdragon from '@/store/modules/cdragon'
 import * as detailedMatch from '@/store/modules/detailedMatch'
 import * as notification from '@/store/modules/notification'
 import * as settings from '@/store/modules/settings'
@@ -11,6 +12,7 @@ const debug = process.env.NODE_ENV !== 'production'
 
 export default new Vuex.Store({
   modules: {
+    cdragon,
     detailedMatch,
     notification,
     settings,

client/src/store/modules/cdragon.js

@@ -0,0 +1,36 @@
+import { axios } from '@/plugins/axios'
+
+export const namespaced = true
+
+export const state = {
+  runes: null,
+  runesOpen: false,
+  selectedRunes: {},
+}
+
+export const mutations = {
+  DISPLAY_HIDE_RUNES(state, selectedRunes) {
+    state.runesOpen = !state.runesOpen
+    state.selectedRunes = selectedRunes
+  },
+  SET_RUNES(state, runes) {
+    state.runes = runes
+  },
+}
+
+export const actions = {
+  displayOrHideRunes({ commit }, selectedRunes) {
+    commit('DISPLAY_HIDE_RUNES', selectedRunes)
+  },
+  async getRunes({ commit, getters }) {
+    if (getters.runesLoaded) { return }
+
+    const { data } = await axios.get('cdragon/runes').catch((e) => { console.log(e) })
+    console.log(data)
+    commit('SET_RUNES', data)
+  },
+}
+
+export const getters = {
+  runesLoaded: state => state.runes,
+}

client/src/views/Summoner.vue

@@ -1,51 +1,54 @@
 <template>
-  <div
+  <div>
-    v-if="overviewLoaded"
+    <div
-    key="overview"
+      v-if="overviewLoaded"
-    class="relative flex items-start justify-between mt-3 text-center vue-sticky-container"
+      key="overview"
-  >
+      class="relative flex items-start justify-between mt-3 text-center vue-sticky-container"
-    <VueStickySidebar
-      :top-spacing="48"
-      :bottom-spacing="123"
-      class="z-40 sidebar"
-      container-selector=".vue-sticky-container"
     >
-      <SummonerChampions />
+      <VueStickySidebar
-      <SummonerStats />
+        :top-spacing="48"
-      <SummonerMates />
+        :bottom-spacing="123"
-    </VueStickySidebar>
+        class="z-40 sidebar"
-    <div class="w-9/12">
+        container-selector=".vue-sticky-container"
-      <div v-if="current && current.participants" class="mb-4">
+      >
-        <LiveMatch />
+        <SummonerChampions />
-      </div>
+        <SummonerStats />
-      <div v-if="overview.matches.length">
+        <SummonerMates />
-        <ul>
+      </VueStickySidebar>
-          <Match
+      <div class="w-9/12">
-            v-for="(match, index) in overview.matches"
+        <div v-if="current && current.participants" class="mb-4">
-            :key="index"
+          <LiveMatch />
-            :data="overview.matches[index]"
+        </div>
-            :index-match="index"
+        <div v-if="overview.matches.length">
-          />
+          <ul>
-        </ul>
+            <Match
-        <LoadingButton
+              v-for="(match, index) in overview.matches"
-          v-if="moreMatchesToFetch"
+              :key="index"
-          @clicked="moreMatches"
+              :data="overview.matches[index]"
-          :loading="matchesLoading"
+              :index-match="index"
-          btn-class="block px-4 py-2 mx-auto mt-4 font-semibold bg-blue-800 rounded-md shadow-lg hover:bg-blue-1000"
+            />
-        >More matches</LoadingButton>
+          </ul>
-      </div>
+          <LoadingButton
-      <div v-else>
+            v-if="moreMatchesToFetch"
-        <div class="flex justify-center">
+            @clicked="moreMatches"
-          <div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
+            :loading="matchesLoading"
-            <div>No matches found.</div>
+            btn-class="block px-4 py-2 mx-auto mt-4 font-semibold bg-blue-800 rounded-md shadow-lg hover:bg-blue-1000"
-            <div>😕</div>
+          >More matches</LoadingButton>
+        </div>
+        <div v-else>
+          <div class="flex justify-center">
+            <div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
+              <div>No matches found.</div>
+              <div>😕</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+    <div v-else>
-  <div v-else>
+      <OverviewLoader />
-    <OverviewLoader />
+    </div>
+    <RunesContainer :open="runesOpen" :runes="selectedRunes" />
   </div>
 </template>
 
@@ -56,6 +59,7 @@ import LiveMatch from '@/components/Match/LiveMatch.vue'
 import LoadingButton from '@/components/Form/LoadingButton.vue'
 import Match from '@/components/Match/Match.vue'
 import OverviewLoader from '@/components/Summoner/Overview/OverviewLoader.vue'
+import RunesContainer from '@/components/Match/Runes/RunesContainer.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'
@@ -67,6 +71,7 @@ export default {
     LoadingButton,
     Match,
     OverviewLoader,
+    RunesContainer,
     SummonerChampions,
     SummonerMates,
     SummonerStats,
@@ -76,7 +81,9 @@ export default {
   computed: {
     ...mapState({
       current: state => state.summoner.live.match,
-      overview: state => state.summoner.overview
+      overview: state => state.summoner.overview,
+      runesOpen: state => state.cdragon.runesOpen,
+      selectedRunes: state => state.cdragon.selectedRunes
     }),
     ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
   },
@@ -92,6 +99,8 @@ export default {
 
   created() {
     this.fetchData()
+
+    this.getRunes()
   },
 
   methods: {
@@ -104,6 +113,7 @@ export default {
         this.sliceOverviewMatches(10)
       }
     },
+    ...mapActions('cdragon', ['getRunes']),
     ...mapActions('summoner', ['moreMatches', 'overviewRequest', 'sliceOverviewMatches']),
   },