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,4 +1,5 @@
 <template>
+  <div>
     <div
       v-if="overviewLoaded"
       key="overview"
@@ -47,6 +48,8 @@
     <div v-else>
       <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']),
   },