feat: add in game status if the summoner is playing

client/src/helpers/summoner.js

@@ -64,7 +64,8 @@ export function createSummonerData(RiotData) {
     account: RiotData.account,
     ranked: RiotData.ranked,
     matchList: RiotData.allMatches,
-    matches: createMatchData(RiotData.matchesDetails)
+    matches: createMatchData(RiotData.matchesDetails),
+    playing: RiotData.playing
   }
 }
 

client/src/store/modules/summoner.js

@@ -9,7 +9,8 @@ export const state = {
     matchIndex: 0,
     matchList: [],
     matches: [],
-    ranked: {}
+    ranked: {},
+    playing: false
   },
   matchesLoading: false,
   status: '',
@@ -35,6 +36,7 @@ export const mutations = {
     state.infos.matches = infos.matches
     state.infos.ranked = infos.ranked
     state.infos.matchIndex = infos.matches.length
+    state.infos.playing = infos.playing
     state.status = 'found'
   },
   SUMMONER_NOT_FOUND(state) {
@@ -80,6 +82,7 @@ export const actions = {
 export const getters = {
   matchesLoading: state => state.matchesLoading,
   moreMatchesToFetch: state => state.infos.matchIndex < state.infos.matchList.length,
+  playing: state => state.infos.playing,
   summonerFound: state => state.status === 'found',
   summonerNotFound: state => state.status === 'error',
   summonerLoading: state => state.status === 'loading',

client/src/views/Summoner.vue

@@ -22,14 +22,24 @@
         <div class="mt-4 text-white pb-12">
           <div class="flex justify-between px-12">
             <div>
-              <h1 class="text-4xl font-extrabold uppercase">
-                <span class="text-5xl">{{ summonerInfos.account.name[0] }}</span>
-                <span>{{ summonerInfos.account.name.substring(1) }}</span>
-              </h1>
+              <div class="flex items-center">
+                <h1 class="text-4xl font-extrabold uppercase">
+                  <span class="text-5xl">{{ summonerInfos.account.name[0] }}</span>
+                  <span>{{ summonerInfos.account.name.substring(1) }}</span>
+                </h1>
+                <div
+                  v-if="playing"
+                  class="ml-4 flex items-center px-3 py-1 rounded-full bg-teal-800 border border-teal-400"
+                >
+                  <div class="playing-dot bg-teal-flashy w-2 h-2 rounded-full"></div>
+                  <span class="ml-2 text-teal-flashy font-semibold text-sm">In Game</span>
+                </div>
+              </div>
               <div class="flex">
-                <div>
+                <div :class="{'playing': playing}" class="relative w-24 h-24">
                   <div
-                    class="relative w-24 h-24 rounded-full bg-blue-1000 border-2 border-teal-400"
+                    :class="{'border-2': !playing}"
+                    class="relative z-10 w-24 h-24 rounded-full bg-blue-1000 border-teal-400"
                     :style="{background: getSummonerIcon}"
                   >
                     <div
@@ -124,7 +134,7 @@ export default {
       summonerInfos: state => state.summoner.infos
     }),
     ...mapGetters('ddragon', ['version']),
-    ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'summonerFound', 'summonerNotFound', 'summonerLoading'])
+    ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'playing', 'summonerFound', 'summonerNotFound', 'summonerLoading'])
   },
 
   watch: {
@@ -149,3 +159,62 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.playing::before {
+  z-index: 0;
+  background: rgba(137, 160, 181, 0.2);
+}
+
+.playing::before,
+.playing::after {
+  content: "";
+  position: absolute;
+  height: 100px;
+  width: 100px;
+  top: -2px;
+  left: -2px;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+}
+
+.playing::after {
+  z-index: 0;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0) 30%,
+    rgb(36, 232, 204) 100%
+  );
+  animation: 0.75s linear 0s infinite normal none running rotate;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.playing-dot {
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+  transform: scale(1);
+  animation: 2.5s ease-in-out 0s infinite normal none running pulse;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(36, 232, 204, 0.7);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+</style>

client/tailwind.config.js

@@ -80,6 +80,7 @@ module.exports = {
         700: '#2c7a7b',
         800: '#285e61',
         900: '#234e52',
+        'flashy': '#24e8cc',
       },
       blue: {
         100: '#ebf8ff',

server/app/Controllers/Http/SummonerController.js

@@ -28,6 +28,9 @@ class SummonerController {
       account.region = region
       finalJSON.account = account
 
+      // CURRENT GAME
+      const currentGame = await Jax.Spectator.summonerID(account.id)
+      finalJSON.playing = !!currentGame
       // RANKED STATS
       const ranked = await Jax.League.summonerID(account.id)
       finalJSON.ranked = {

server/providers/Jax/src/Endpoints/SpectatorEndpoint.js

@@ -0,0 +1,18 @@
+const JaxRequest = require('../JaxRequest')
+
+class SpectatorEndpoint {
+  constructor(config, limiter) {
+    this.config = config
+    this.limiter = limiter
+  }
+
+  summonerID(summonerID) {
+    return new JaxRequest(
+      this.config,
+      `spectator/v4/active-games/by-summoner/${summonerID}`,
+      this.limiter
+    ).execute()
+  }
+}
+
+module.exports = SpectatorEndpoint

server/providers/Jax/src/Jax.js

@@ -2,6 +2,7 @@ const RiotRateLimiter = require('riot-ratelimiter')
 const LeagueEndpoint = require('./Endpoints/LeagueEndpoint')
 const MatchEndpoint = require('./Endpoints/MatchEndpoint')
 const MatchlistEndpoint = require('./Endpoints/MatchlistEndpoint')
+const SpectatorEndpoint = require('./Endpoints/SpectatorEndpoint')
 const SummonerEndpoint = require('./Endpoints/SummonerEndpoint')
 
 const DDragonVersionEndpoint = require('./Endpoints/DDragonEndpoints/DDragonVersionEndpoint')
@@ -20,6 +21,7 @@ class Jax {
     this.League = new LeagueEndpoint(this.config, this.limiter)
     this.Match = new MatchEndpoint(this.config, this.limiter)
     this.Matchlist = new MatchlistEndpoint(this.config, this.limiter)
+    this.Spectator = new SpectatorEndpoint(this.config, this.limiter)
     this.Summoner = new SummonerEndpoint(this.config, this.limiter)
 
     this.initDDragon()