Fix PurgeCSS, fix backend, use localStorage

client/.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
     'eslint:recommended'
   ],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    //'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-console': 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {

client/package-lock.json

@@ -8228,6 +8228,18 @@
         }
       }
     },
+    "postcss-import": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
+      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
     "postcss-js": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.0.tgz",
@@ -8995,6 +9007,23 @@
         }
       }
     },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        }
+      }
+    },
     "read-file-stdin": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz",
@@ -10970,6 +10999,12 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-awesome": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-3.5.1.tgz",
+      "integrity": "sha512-oWPAoC1B/0aTxrw04MFxjVsXFsTz6f26KRxF5ItP59BM7uaAdJ8toHp7iFE5rpS/NOJJBheGPJIelfA5nzU4aA==",
+      "dev": true
+    },
     "vue-axios": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.4.tgz",

client/package.json

@@ -21,8 +21,10 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "postcss-import": "^12.0.1",
     "purgecss": "^1.1.0",
     "tailwindcss": "^1.0.0-beta.3",
+    "vue-awesome": "^3.5.1",
     "vue-template-compiler": "^2.5.21"
   }
 }

client/postcss.config.js

@@ -1,20 +1,29 @@
 const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
 const purgecss = require("@fullhuman/postcss-purgecss");
+const postcssImport = require('postcss-import')
+
+class TailwindExtractor {
+  static extract(content) {
+    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
+  }
+}
 
 module.exports = {
   plugins: [
-        tailwindcss("./tailwind.config.js"),
+    postcssImport,
-        autoprefixer({
+    tailwindcss('./tailwind.config.js'),
-            add: true,
+    purgecss({
-            grid: true
+      content: ['./src/**/*.vue'],
+      whitelist: ['html', 'body'],
+      extractors: [
+        {
+          extractor: TailwindExtractor,
+
+          extensions: ['html', 'js', 'vue']
+        }
+      ]
     }),
-        //Only add purgecss in production
+    autoprefixer
-        process.env.NODE_ENV === "production"? purgecss({
-            content: [
-                "./src/**/*.html", 
-                "./src/**/*.vue"
   ]
-        }): ""
+}
-    ]
-};

client/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" class="font-sans bg-gray-200">
     <div class="nav">
       <router-link to="/">Accueil</router-link> |
       <router-link :to="`/summoner/${summoner}`">
@@ -14,12 +14,8 @@
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>
 

client/src/components/Match.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="match">
+  <li class="match" :class="data.result ? 'win' : 'lose'">
     <div class="content-container">
 
       <div class="first">
@@ -62,7 +62,6 @@ export default {
 
 
 <style scoped>
-/* --- MATCHES --- */
 .match {
   background: #fff;
   padding: 10px 0;
@@ -148,4 +147,3 @@ export default {
   align-items: center;
 }
 </style>
-

client/src/data/data.js

@@ -1,13 +1,3 @@
-// import json from '@/data/item.json'
-
-// export default {
-//   data() {
-//     return {
-//       myJson: json
-//     }
-//   }
-// }
-
 export const championsId = { 266: "Aatrox", 103: "Ahri", 84: "Akali", 12: "Alistar", 32: "Amumu", 34: "Anivia", 1: "Annie", 22: "Ashe", 136: "AurelionSol", 268: "Azir", 432: "Bard", 53: "Blitzcrank", 63: "Brand", 201: "Braum", 51: "Caitlyn", 164: "Camille", 69: "Cassiopeia", 31: "Chogath", 42: "Corki", 122: "Darius", 131: "Diana", 119: "Draven", 36: "DrMundo", 245: "Ekko", 60: "Elise", 28: "Evelynn", 81: "Ezreal", 9: "Fiddlesticks", 114: "Fiora", 105: "Fizz", 3: "Galio", 41: "Gangplank", 86: "Garen", 150: "Gnar", 79: "Gragas", 104: "Graves", 120: "Hecarim", 74: "Heimerdinger", 420: "Illaoi", 39: "Irelia", 427: "Ivern", 40: "Janna", 59: "JarvanIV", 24: "Jax", 126: "Jayce", 202: "Jhin", 222: "Jinx", 145: "Kaisa", 429: "Kalista", 43: "Karma", 30: "Karthus", 38: "Kassadin", 55: "Katarina", 10: "Kayle", 141: "Kayn", 85: "Kennen", 121: "Khazix", 203: "Kindred", 240: "Kled", 96: "KogMaw", 7: "Leblanc", 64: "LeeSin", 89: "Leona", 127: "Lissandra", 236: "Lucian", 117: "Lulu", 99: "Lux", 54: "Malphite", 90: "Malzahar", 57: "Maokai", 11: "MasterYi", 21: "MissFortune", 62: "MonkeyKing", 82: "Mordekaiser", 25: "Morgana", 267: "Nami", 75: "Nasus", 111: "Nautilus", 76: "Nidalee", 56: "Nocturne", 20: "Nunu", 2: "Olaf", 61: "Orianna", 516: "Ornn", 80: "Pantheon", 78: "Poppy", 555: "Pyke", 133: "Quinn", 497: "Rakan", 33: "Rammus", 421: "RekSai", 58: "Renekton", 107: "Rengar", 92: "Riven", 68: "Rumble", 13: "Ryze", 113: "Sejuani", 35: "Shaco", 98: "Shen", 102: "Shyvana", 27: "Singed", 14: "Sion", 15: "Sivir", 72: "Skarner", 37: "Sona", 16: "Soraka", 50: "Swain", 134: "Syndra", 223: "TahmKench", 163: "Taliyah", 91: "Talon", 44: "Taric", 17: "Teemo", 412: "Thresh", 18: "Tristana", 48: "Trundle", 23: "Tryndamere", 4: "TwistedFate", 29: "Twitch", 77: "Udyr", 6: "Urgot", 110: "Varus", 67: "Vayne", 45: "Veigar", 161: "Velkoz", 254: "Vi", 112: "Viktor", 8: "Vladimir", 106: "Volibear", 19: "Warwick", 498: "Xayah", 101: "Xerath", 5: "XinZhao", 157: "Yasuo", 83: "Yorick", 154: "Zac", 238: "Zed", 115: "Ziggs", 26: "Zilean", 142: "Zoe", 143: "Zyra" };
 
 export const maps = { 10: "The Twisted Treeline", 11: "Summoner's Rift", 12: "Howling Abyss" };

client/src/helpers/functions.js

@@ -0,0 +1,55 @@
+/**
+ *  Return the relative time betweeen a chosen moment and the current time
+ * @param previous : time we want to get difference 
+ */
+export function timeDifference(previous) {
+  var current = new Date();
+  var msPerMinute = 60 * 1000;
+  var msPerHour = msPerMinute * 60;
+  var msPerDay = msPerHour * 24;
+  var msPerWeek = msPerDay * 7;
+  var elapsed = current - previous;
+
+  if (elapsed < msPerMinute) {
+    return Math.round(elapsed / 1000) + 's';
+  } else if (elapsed < msPerHour) {
+    return Math.round(elapsed / msPerMinute) + 'm';
+  } else if (elapsed < msPerDay) {
+    return Math.round(elapsed / msPerHour) + 'h';
+  } else if (elapsed < msPerWeek) {
+    return Math.round(elapsed / msPerDay) + 'j';
+  } else {
+    var oldDate = new Date(previous);
+    var day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate();
+    var month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1);
+    return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2);
+  }
+}
+
+
+/**
+ *  Return time in a formatted way
+ * @param sec  : time in seconds to convert
+ */
+export function secToTime(sec) {
+  var min = Math.floor(sec / 60);
+  var newSec = sec - min * 60;
+  return min + ':' + (newSec < 10 ? '0' + newSec : newSec); //
+}
+
+
+/**
+ *  Return the link of the rank image
+ * @param soloQStats : stats in soloQ of the player
+ */
+export function getRankImg(soloQStats) {
+  if (!soloQStats) {
+    return 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
+  }
+
+  if (soloQStats.tier != 'MASTER' && soloQStats.tier != 'CHALLENGER') {
+    return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '_' + soloQStats.rank.toLowerCase() + '.png';
+  } else {
+    return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '.png';
+  }
+}

client/src/main.js

@@ -3,13 +3,15 @@ import axios from 'axios'
 import VueAxios from 'vue-axios'
 
 import '@/assets/css/tailwind.css'
+import 'vue-awesome/icons'
 
 import App from './App.vue'
 import router from './router'
+import Icon from 'vue-awesome/components/Icon'
 
 Vue.config.productionTip = false
-
 Vue.use(VueAxios, axios)
+Vue.component('v-icon', Icon)
 
 
 new Vue({

client/src/views/Home.vue

@@ -13,7 +13,7 @@
 export default {
   data() {
     return {
-      search: ""
+      search: ''
     };
   },
   methods: {

client/src/views/Summoner.vue

@@ -1,19 +1,25 @@
 <template>
   <div>
-    <button class="debug"></button>
+    <button class="debug" @click="this.resetLocalStorage"></button>
 
     <div class="search">
       <div class="container mx-auto">
-        <form class="flex items-center mb-6" id="changeName" method="get" action="summoners">
+        <form @submit.prevent="redirect" class="flex items-center">
-          <input type="search" class="hadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline mr-1" id="name" name="username" placeholder="Pseudo du Joueur">
+          <input type="text" placeholder="Entre un pseudo" class="bg-gray-300 p-2 rounded-l outline-none focus:bg-gray-400" v-model="search">
-          <button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">Chercher</button>
+          <button class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit">Rechercher</button>
-          <button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
+          
-            <i class="fas fa-sync"></i>
+          <button
+            v-if="summonerFound"
+            id="refresh" 
+            class="block bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow ml-2"
+          >
+            <v-icon name="sync"/>
           </button>
         </form>
       </div>
     </div>
 
+    <template v-if="summonerFound">
       <div class="container mx-auto pb-16">
         <div class="player shadow-md" v-if="localInfos.name">
           <div class="player__pp" :style="{background: `url(https://cdn.valentinkaelin.ch/riot/profileicon/${localInfos.profileIconId}.png) center/cover`}"></div>
@@ -35,6 +41,10 @@
           <p>Loading player's information...</p>
         </div>
       </div>
+    </template>
+    <template v-else>
+      <p>Le joueur est introuvable.</p>
+    </template>
 
   </div>
 </template>
@@ -42,6 +52,7 @@
 <script>
 import Match from '@/components/Match.vue';
 import { championsId, maps, gameModes } from "@/data/data.js";
+import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
 
 export default {
   components: {
@@ -50,10 +61,50 @@ export default {
   data() {
     return {
       localInfos: {},
-      nameChosen: this.$route.params.name
+      nameChosen: this.$route.params.name,
+      search: '',
+      summonerFound: true
     };
   },
   methods: {
+    apiCall() {
+      const summoner = this.$route.params.name;
+      this.axios({
+        method: "POST",
+        //url: "https://vue.valentinkaelin.ch/api",
+        url: "http://localhost:5000/api",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        data: {
+          summoner
+        }
+      })
+        .then(response => {
+          return response.data;
+        })
+        .then(jsonData => {
+          if(jsonData) {
+            this.summonerFound = true
+            this.createObject(jsonData)
+          } else {
+            this.summonerFound = false
+            console.log('Summoner not found')
+          }
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    checkLocalStorage() {
+      if (localStorage[this.$route.params.name]) {
+        console.log('cached')
+        this.summonerFound = true
+        this.localInfos = JSON.parse(localStorage[this.$route.params.name])
+      } else {
+        this.apiCall()
+      }
+    },
     createObject(JSONData) {
       //console.log('--- ALL INFOS ---')
       //console.log(JSONData);
@@ -88,8 +139,8 @@ export default {
           mode = 'Undefined gamemode';
         const champion = championsId[currentMatch.participants[participantId - 1].championId];
         const role = currentMatch.participants[participantId - 1].timeline.lane;
-        const timeAgo = this.timeDifference(currentMatch.gameCreation);
+        const timeAgo = timeDifference(currentMatch.gameCreation);
-        const time = this.secToTime(currentMatch.gameDuration);
+        const time = secToTime(currentMatch.gameDuration);
         const kills = currentMatch.participants[participantId - 1].stats.kills;
         const deaths = currentMatch.participants[participantId - 1].stats.deaths;
         const assists = currentMatch.participants[participantId - 1].stats.assists;
@@ -130,7 +181,7 @@ export default {
         name: userStats.name,
         level: userStats.summonerLevel,
         rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé',
-        rankImgLink: this.getRankImg(soloQStats),
+        rankImgLink: getRankImg(soloQStats),
         rankedWins: soloQStats ? soloQStats.wins : undefined,
         rankedLosses: soloQStats ? soloQStats.losses : undefined
       }
@@ -141,68 +192,23 @@ export default {
       console.log(this.localInfos);
 
       localStorage[this.nameChosen] = JSON.stringify(this.localInfos);
-      //displayContent(localStorage[this.nameChosen]);
     },
-    getRankImg(soloQStats) {
+    redirect() {
-      if (!soloQStats) {
+      this.$router.push("/summoner/" + this.search)
-        return "https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png";
-      }
-      if (soloQStats.tier != "MASTER" && soloQStats.tier != "CHALLENGER") {
-        return ("https://cdn.valentinkaelin.ch/riot/tier-icons/" + soloQStats.tier.toLowerCase() + "_" + soloQStats.rank.toLowerCase() + ".png");
-      }
-      return ("https://cdn.valentinkaelin.ch/riot/tier-icons/" + soloQStats.tier.toLowerCase() + ".png");
     },
-    secToTime(sec) {
+    resetLocalStorage() {
-      var min = Math.floor(sec / 60);
+      console.log('CLEAR LOCALSTORAGE')
-      var newSec = sec - min * 60;
+      localStorage.clear()
-      return min + ":" + (newSec < 10 ? "0" + newSec : newSec);
-    },
-    timeDifference(previous) {
-      var current = new Date();
-      var msPerMinute = 60 * 1000;
-      var msPerHour = msPerMinute * 60;
-      var msPerDay = msPerHour * 24;
-      var msPerWeek = msPerDay * 7;
-      var elapsed = current - previous;
-
-      if (elapsed < msPerMinute) {
-        return Math.round(elapsed / 1000) + 's';
-      } else if (elapsed < msPerHour) {
-        return Math.round(elapsed / msPerMinute) + 'm';
-      } else if (elapsed < msPerDay) {
-        return Math.round(elapsed / msPerHour) + 'h';
-      } else if (elapsed < msPerWeek) {
-        return Math.round(elapsed / msPerDay) + 'j';
-      } else {
-        var oldDate = new Date(previous);
-        var day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate();
-        var month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1);
-        return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2);
-      }
     }
   },
   mounted: function () {
-    const summoner = this.$route.params.name;
+    this.checkLocalStorage()
-    this.axios({
-      method: "POST",
-      url: "http://localhost:5000/api",
-      headers: {
-        "Content-Type": "application/json"
   },
-      data: {
+  watch: {
-        summoner
+    $route() {
+      console.log('route changed')
+      this.checkLocalStorage()
     }
-    })
-      .then(response => {
-        return response.data;
-      })
-      .then(jsonData => {
-        console.log(jsonData);
-        this.createObject(jsonData);
-      })
-      .catch(err => {
-        console.log(err);
-      });
   }
 };
 </script>
@@ -234,10 +240,6 @@ export default {
   padding: 32px 0;
 }
 
-#refresh {
-  display: none;
-}
-
 .player {
   text-align: center;
   margin: 16px auto 0;

server/package-lock.json

@@ -105,6 +105,12 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "dev": true
+    },
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",

server/package.json

@@ -16,5 +16,8 @@
     "express": "^4.16.4",
     "request": "^2.88.0",
     "request-promise": "^4.2.2"
+  },
+  "devDependencies": {
+    "connect-history-api-fallback": "^1.6.0"
   }
 }

server/server.js

@@ -6,10 +6,7 @@ const bodyParser = require('body-parser');
 const rp = require('request-promise');
 const Promise = require("bluebird");
 const app = express()
-
+const history = require('connect-history-api-fallback');
-// DEV
-var cors = require('cors');
-app.use(cors({origin: '*'}));
 
 /* Global Variables */
 const key = process.env.API_KEY;
@@ -22,25 +19,29 @@ let finalJSON = [];
 /* Set Port */
 app.set('port', (process.env.PORT || 5000))
 
+/* DEV */
+var cors = require('cors');
+app.use(cors({origin: '*'}));
+
+/* PRODUCTION */
+/*const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
+app.use(staticFileMiddleware);
+app.use(history({
+  disableDotRule: true,
+  verbose: true
+}));
+app.use(staticFileMiddleware);
+
+app.get('/', function (req, res) {
+  res.render(path.join(__dirname + '/dist/index.html'));
+});*/
+
 /* To retrieve data of post request */
 app.use(bodyParser.json());    // to support JSON-encoded bodies
 app.use(bodyParser.urlencoded({  // to support URL-encoded bodies
  extended: true
 }));
 
-// /* Homepage */
-// app.get('/', function (request, response) {
-//   response.sendFile(path.join(__dirname, 'home.html'));
-// });
-
-// /* Summoners pages */
-// app.get('/summoners', function (request, response) {
-//   response.sendFile(path.join(__dirname, 'summoner.html'));
-// });
-
-// /* Public assets folder */
-// app.use('/public', express.static(__dirname + '/public'));
-
 /* Launch app */
 app.listen(app.get('port'), () => console.log(`RiotAPI app listening on port ${app.get('port')}!`))