First "working" version of the RecentActivity grid

Only last 100 matches are displayed

client/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="font-sans bg-gray-200">
+  <div id="app" class="font-sans bg-gray-200 antialiased">
 
 
     <!-- <div class="nav">

client/src/components/RecentActivity.vue

@@ -1,6 +1,36 @@
 <template>
   <div>
-    <h4 class="font-bold text-lg">Recent Activity</h4>
+    <div class="inline-block bg-blue-800 rounded-lg p-3">
+      <h4 class="font-bold text-base text-white text-left">Recent Activity</h4>
+      <div class="flex">
+        <span class="ml-12 text-blue-200 font-semibold text-xs">Jun</span>
+        <span class="ml-16 text-blue-200 font-semibold text-xs">Jul</span>
+        <span class="ml-16 text-blue-200 font-semibold text-xs">Aug</span>
+      </div>
+      <div class="mt-1 flex">
+        <div class="flex flex-col">
+          <span class="text-blue-200 font-semibold text-xs leading-snug">Mo</span>
+          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Tu</span>
+          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span>
+          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span>
+          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Fr</span>
+          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Sa</span>
+          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Su</span>
+        </div>
+        <div
+          class="ml-2 flex flex-col flex-wrap"
+          style="width: calc(20px * 15); height: calc(20px * 7)"
+        >
+          <div
+            v-for="(day, index) in gridDays"
+            :key="day.timestamp"
+            :title="day.date + ' : ' + day.matches + ' game(s)'"
+            :class="[getCaseMargin(index), getCaseColor(day.matches)]"
+            class="ml-1 w-4 h-4 cursor-pointer"
+          ></div>
+        </div>
+      </div>
+    </div>
     <ul>
       <li
         v-for="(day) in matchesPerDay"
@@ -19,39 +49,75 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
+      gridDays: [],
+      nbColumns: 15,
       matchesPerDay: []
-    }
+    };
   },
 
-  created () {
-    console.log('activity')
-
-    for (const key in this.matches) {
-      const match = this.matches[key]
-      const matchTime = new Date(match.timestamp)
+  methods: {
+    createGrid() {
+      const nbDaysInGrid = this.nbColumns * 7;
 
       const options = {
         year: "numeric",
         month: "2-digit",
         day: "numeric"
       };
-      const formattedTime = matchTime.toLocaleString('fr', options)
-      // const formattedTime = matchTime.getDate() + '/' + (matchTime.getMonth() + 1) + '/' + matchTime.getFullYear()
 
-      const day = this.matchesPerDay.filter(e => e.date === formattedTime)
-      if (day.length > 0) {
-        day[0].matches++
-      } else {
-        this.matchesPerDay.push({
-          date: formattedTime,
-          matches: 1
-        })
+      // Create array with all the days of the Grid
+      for (let i = 1; i <= nbDaysInGrid; i++) {
+        const day = new Date();
+        day.setDate(day.getDate() - nbDaysInGrid + i);
+        const formattedDay = day.toLocaleString("fr", options);
+        this.gridDays.push({
+          date: formattedDay,
+          matches: 0
+        });
+      }
+
+      // Add all the matches made by the summoner
+      for (const key in this.matches) {
+        const match = this.matches[key];
+        const matchTime = new Date(match.timestamp);
+        const formattedTime = matchTime.toLocaleString("fr", options);
+
+        const dayOfTheMatch = this.gridDays.filter(
+          e => e.date === formattedTime
+        );
+        if (dayOfTheMatch.length > 0) {
+          dayOfTheMatch[0].matches++;
         }
       }
 
-    this.matchesPerDay = this.matchesPerDay.reverse()
+      console.log(this.gridDays);
     },
-}
+    getCaseColor(nbMatches) {
+      /* TODO: change this */
+      if(nbMatches > 5) {
+        return 'bg-teal-200'
+      } else if (nbMatches > 4) {
+        return 'bg-teal-300'
+      } else if (nbMatches > 3) {
+        return 'bg-teal-400'
+      } else if (nbMatches > 1) {
+        return 'bg-teal-500'
+      }
+      return 'bg-teal-700'
+    },
+    getCaseMargin(index) {
+      if (index % 7 !== 0) {
+        return 'mt-1'
+      }
+    }
+  },
+
+  created() {
+    console.log("activity");
+
+    this.createGrid();
+  }
+};
 </script>

client/src/views/Summoner.vue

@@ -41,7 +41,7 @@
             class="player__ratio"
           >{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
 
-          <RecentActivity :matches="localInfos.allMatches"></RecentActivity>
+          <RecentActivity v-show="localInfos.allMatches" :matches="localInfos.allMatches"></RecentActivity>
 
           <ul class="list-matches--debug">
             <Match
@@ -220,6 +220,7 @@ export default {
           secondSum: this.getSummonerLink(secondSum)
         });
       } // end loop matches
+      console.log('matches infos just below')
       console.log(matchesInfos);
 
       this.localInfos = {

server/server.js

@@ -95,7 +95,7 @@ const getAccountInfos = function (res) {
 const getRanked = function (res) {
   request(`https://${data.region}.api.riotgames.com/lol/league/v4/entries/by-summoner/${data.summonerID}?api_key=${data.key}`, function (error, response, body) {
     if (!error && response.statusCode == 200) {
-      let JSONBody = JSON.parse(body);
+      let JSONBody = JSON.parse(body).filter(e => e.queueType !== 'RANKED_TFT');
       if (JSONBody.length > 0) {
         data.finalJSON.push(...JSONBody);
         if (JSONBody.length === 1) data.finalJSON.push(null);