From 2a12c38ab256dcf93af50a4c9fbd247695664aa7 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Thu, 4 Apr 2019 22:29:37 +0200
Subject: [PATCH] Work on responsive and add loading animation

---
 client/package-lock.json        |    6 +
 client/package.json             |    1 +
 client/postcss.config.js        |   23 +-
 client/src/App.vue              |    4 +-
 client/src/components/Match.vue |  117 +-
 client/src/data/summoner.json   | 2021 +++++++++++++++++++++++++++++++
 client/src/helpers/functions.js |   16 +-
 client/src/main.js              |    2 +
 client/src/router.js            |   30 -
 client/src/views/Summoner.vue   |   58 +-
 client/tailwind.config.js       |  448 ++++++-
 server/.gitignore               |    2 +-
 server/server.js                |    8 +-
 13 files changed, 2612 insertions(+), 124 deletions(-)
 create mode 100644 client/src/data/summoner.json

diff --git a/client/package-lock.json b/client/package-lock.json
index 665e166..e65b10e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11072,6 +11072,12 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
       "integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg=="
     },
+    "vue-spinner": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.3.tgz",
+      "integrity": "sha512-Phh6QC/Bh80ZE/0SH9ADw4irbRGwFK6VZsTksPHpPm16xga2OXwNC2nI7SEPnndUZP+Lgu1wu+pbH6i6+5siBQ==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/client/package.json b/client/package.json
index 526231b..3ecf68e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "purgecss": "^1.1.0",
     "tailwindcss": "^1.0.0-beta.3",
     "vue-awesome": "^3.5.1",
+    "vue-spinner": "^1.0.3",
     "vue-template-compiler": "^2.5.21"
   }
 }
diff --git a/client/postcss.config.js b/client/postcss.config.js
index 4b94996..a383682 100644
--- a/client/postcss.config.js
+++ b/client/postcss.config.js
@@ -13,17 +13,20 @@ module.exports = {
   plugins: [
     postcssImport,
     tailwindcss('./tailwind.config.js'),
-    purgecss({
-      content: ['./src/**/*.vue'],
-      whitelist: ['html', 'body'],
-      extractors: [
-        {
-          extractor: TailwindExtractor,
 
-          extensions: ['html', 'js', 'vue']
-        }
-      ]
-    }),
+    // --- !!! purgecss not working !!! ---
+
+    // purgecss({
+    //   content: ['./src/**/*.vue'],
+    //   whitelist: ['html', 'body'],
+    //   extractors: [
+    //     {
+    //       extractor: TailwindExtractor,
+
+    //       extensions: ['html', 'js', 'vue']
+    //     }
+    //   ]
+    // }),
     autoprefixer
   ]
 }
diff --git a/client/src/App.vue b/client/src/App.vue
index fafabc6..bd71eff 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -4,7 +4,7 @@
       <router-link to="/">Accueil</router-link> |
       <router-link :to="`/summoner/${summoner}`">
           {{ linkText }}
-        </router-link>
+      </router-link>
     </div>
     
     <router-view/>
@@ -16,6 +16,8 @@
 #app {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  
+  min-height: 100vh;
 }
 </style>
 
diff --git a/client/src/components/Match.vue b/client/src/components/Match.vue
index 5341c19..fd8500d 100644
--- a/client/src/components/Match.vue
+++ b/client/src/components/Match.vue
@@ -1,60 +1,83 @@
 <template>
-  <li class="match" :class="data.result ? 'win' : 'lose'">
-    <div class="content-container">
+  <li class="match bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'">
 
-      <div class="first">
-        <img :src="`https://cdn.valentinkaelin.ch/riot/champions/${data.champ}.png`" class="champion-icon" alt="example design">
-        <span class="level">{{ data.level }}</span>
-        <div class="summonerSpells">
-          <img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png" alt="Flash">
-          <img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png" alt="Ignite">
+ 
+
+    <div class="match-container">
+      <!-- Responsive  -->
+      <div class="flex justify-between lg:hidden text-sm text-gray-800 px-2 border-gray-300 border-b">
+        <div class="flex">
+          <div class="gamemode mr-1">{{ data.gamemode }}</div>
+          <span>•</span>
+          <div class="date ml-1">Il y a {{ data.date }}</div>
+        </div>
+        <div>
+          <div class="date">{{ data.time }}</div>
         </div>
-        <span class="champion-name">{{ data.champ }}</span>
       </div>
 
-      <div class="second">
+      <div class="flex-container">
+
+      <div class="first col w-1/3 lg:w-1/4">
+        <div class="icon-and-sums flex flex-col sm:flex-row">
+          <div class="relative">
+            <img :src="`https://cdn.valentinkaelin.ch/riot/champions/${data.champ}.png`" class="champion-icon mb-2px sm:mb-0 sm:mr-2px" alt="example design">
+            <span class="level absolute bottom-0 left-0 text-white font-bold">{{ data.level }}</span>
+          </div>
+          <div class="summonerSpells flex flex-row sm:flex-col">
+            <img class="spell-icon mr-2px sm:mr-0 sm:mb-2px" :src="data.firstSum" alt="Ignite">
+            <img class="spell-icon" :src="data.secondSum" alt="Ignite">
+          </div>
+        </div>
+        <span class="champion-name hidden sm:block">{{ data.champ }}</span>
+      </div>
+
+      <div class="second col hidden lg:block lg:w-1/4">
         <div class="map">{{ data.map }}</div>
         <div class="gamemode">{{ data.gamemode }}</div>
       </div>
 
-      <div class="third">
+      <div class="third col w-1/2 lg:w-1/4 flex-wrap md:flex-no-wrap">
         <div
           v-for="(item, index) in data.items" :key="index"
-          :style="{background: getItemLink(item)}" class="item"
+          :style="{background: item}" class="item"
          >
         </div>
       </div>
 
-      <div class="fourth">
-        <div class="score">{{ data.kills }}/{{ data.deaths }}/{{ data.assists }}</div>
-        <div class="gold-farm">
-          <div class="gold">{{ data.gold }}</div>
-          <div class="farm">{{ data.minions }}</div>
+      <div class="fourth w-1/6 lg:w-1/4 flex-col items-center justify-center sm:flex-row sm:justify-around">
+        <div class="score mb-2 sm:mb-0 font-bold">{{ data.kills }}/{{ data.deaths }}/{{ data.assists }}</div>
+        <div class="gold-farm text-center">
+          <div class="gold flex items-center justify-center mb-2 sm:mb-0">
+            {{ data.gold }}
+            <v-icon name="coins" class="h-3 ml-1 text-blue-800" />
+            </div>
+          <div class="farm flex items-center justify-center">
+            {{ data.minions }}
+            <v-icon name="skull-crossbones" class="h-3 ml-1 text-blue-800" />
+          </div>
         </div>
-        <div class="duration-date">
+        <div class="duration-date hidden lg:block">
           <div class="duration">{{ data.time }}</div>
           <div class="date">{{ data.date }}</div>
         </div>
       </div>
 
     </div>
+    </div>
   </li>
 </template>
 
 <script>
-import itemsJSON from '@/data/item.json'
+
 
 export default {
   props: {
     data: Object
   },
   methods: {
-    getItemLink(id) {
-      if(id !== 0) {
-        const itemImage = itemsJSON.data[id].image;
-        return `url('https://cdn.valentinkaelin.ch/riot/${itemImage.sprite}') -${itemImage.x}px -${itemImage.y}px`;
-      }
-      return "url('https://cdn.valentinkaelin.ch/riot/items/0.png') 0% 0% / cover";
+    tinyItem(link) {
+      return link.replace('item', 'tiny_item')
     }
   }
 }
@@ -63,48 +86,41 @@ export default {
 
 <style scoped>
 .match {
-  background: #fff;
-  padding: 10px 0;
+  /* padding: 10px 0; */
   border-bottom: 1px solid #dae1e7;
+  margin: 16px 0;
 }
 
-.match .content-container {
+.match .flex-container {
   display: flex;
   flex-wrap: wrap;
-  padding: 16px;
+  padding: 16px 8px;
 }
 
-.match.win .content-container {
-  border-left: 10px solid #51d88a;
+.match.win .match-container {
+  border-left: 10px solid #48BB78;
 }
 
-.match.lose .content-container {
-  border-left: 10px solid #ef5753;
+.match.lose .match-container {
+  border-left: 10px solid #F56565;
+}
+
+.match .col {
+  /* flex: 1 0 0; */
 }
 
 /* First col */
 .match .first {
-  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  flex: 1 0 0;
+  /* flex: 1 0 0; */
 }
 
 .champion-icon {
   width: 48px;
   height: 48px;
   display: block;
-  margin: 0 2px 0 0;
-}
-
-.match .level {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-
-  color: #fff;
-  font-weight: bold;
 }
 
 .match .summonerSpells {
@@ -117,19 +133,15 @@ export default {
   display: block;
 }
 
-.match .spell-icon:first-child {
-  margin: 0 0 2px 0;
-}
-
 /* Second col */
 .match .second {
-  flex: 1 0 0;
+  /* flex: 1 0 0; */
   text-align: left;
 }
 
 /* Third col */
 .match .third {
-  flex: 1 0 0;
+  /* flex: 1 0 0; */
   display: flex;
 }
 
@@ -141,9 +153,8 @@ export default {
 
 /* Fourth col */
 .match .fourth {
-  flex: 1 0 0;
+  /* flex: 1 0 0; */
   display: flex;
-  justify-content: space-around;
   align-items: center;
 }
 </style>
diff --git a/client/src/data/summoner.json b/client/src/data/summoner.json
new file mode 100644
index 0000000..1170c8b
--- /dev/null
+++ b/client/src/data/summoner.json
@@ -0,0 +1,2021 @@
+{
+  "type": "summoner",
+  "version": "9.6.1",
+  "data": {
+    "SummonerBarrier": {
+      "id": "SummonerBarrier",
+      "name": "Barrière",
+      "description": "Protège votre champion contre 115-455 pts de dégâts (selon le niveau du champion) pendant 2 secondes.",
+      "tooltip": "Protège temporairement votre champion contre {{ f1 }} pts de dégâts pendant 2 sec.",
+      "maxrank": 1,
+      "cooldown": [
+        180
+      ],
+      "cooldownBurn": "180",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          95
+        ],
+        [
+          20
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "95",
+        "20",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "21",
+      "summonerLevel": 4,
+      "modes": [
+        "ARAM",
+        "CLASSIC",
+        "TUTORIAL",
+        "ODIN",
+        "ASCENSION",
+        "FIRSTBLOOD",
+        "ASSASSINATE",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "STARGUARDIAN",
+        "PROJECT",
+        "ONEFORALL",
+        "GAMEMODEX",
+        "PRACTICETOOL"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        1200
+      ],
+      "rangeBurn": "1200",
+      "image": {
+        "full": "SummonerBarrier.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 0,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerBoost": {
+      "id": "SummonerBoost",
+      "name": "Purge",
+      "description": "Dissipe toutes les entraves (sauf les neutralisations et les projections en l'air) et tous les effets de sorts d'invocateur qui affectent votre champion, en plus de réduire de 65% la durée des nouveaux effets entravants subis pendant 3 sec.",
+      "tooltip": "Dissipe toutes les entraves (sauf les neutralisations et les projections en l'air) et tous les effets de sorts d'invocateur qui affectent votre champion, et réduit de 65% la durée des entraves pendant {{ f1 }} sec.",
+      "maxrank": 1,
+      "cooldown": [
+        210
+      ],
+      "cooldownBurn": "210",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          0.65
+        ],
+        [
+          3
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "0.65",
+        "3",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [
+        {
+          "link": "@text",
+          "coeff": 3,
+          "key": "f1"
+        }
+      ],
+      "key": "1",
+      "summonerLevel": 9,
+      "modes": [
+        "CLASSIC",
+        "ODIN",
+        "TUTORIAL",
+        "ARAM",
+        "ASCENSION",
+        "FIRSTBLOOD",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "PROJECT",
+        "ONEFORALL",
+        "GAMEMODEX",
+        "PRACTICETOOL"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        200
+      ],
+      "rangeBurn": "200",
+      "image": {
+        "full": "SummonerBoost.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 48,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerDarkStarChampSelect1": {
+      "id": "SummonerDarkStarChampSelect1",
+      "name": "Sorts d'invocateur désactivés",
+      "description": "Les sorts d'invocateur sont désactivés dans ce mode.",
+      "tooltip": "",
+      "maxrank": 1,
+      "cooldown": [
+        0
+      ],
+      "cooldownBurn": "0",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "35",
+      "summonerLevel": 1,
+      "modes": [
+        "DARKSTAR"
+      ],
+      "costType": "",
+      "maxammo": "-1",
+      "range": [
+        2500
+      ],
+      "rangeBurn": "2500",
+      "image": {
+        "full": "SummonerDarkStarChampSelect1.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 96,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      }
+    },
+    "SummonerDarkStarChampSelect2": {
+      "id": "SummonerDarkStarChampSelect2",
+      "name": "Sorts d'invocateur désactivés",
+      "description": "Les sorts d'invocateur sont désactivés dans ce mode.",
+      "tooltip": "",
+      "maxrank": 1,
+      "cooldown": [
+        0
+      ],
+      "cooldownBurn": "0",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "36",
+      "summonerLevel": 1,
+      "modes": [
+        "DARKSTAR"
+      ],
+      "costType": "",
+      "maxammo": "-1",
+      "range": [
+        2500
+      ],
+      "rangeBurn": "2500",
+      "image": {
+        "full": "SummonerDarkStarChampSelect2.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 144,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      }
+    },
+    "SummonerDot": {
+      "id": "SummonerDot",
+      "name": "Embrasement",
+      "description": "Inflige 70-410 pts de dégâts bruts (selon le niveau du champion) en 5 sec à un champion ennemi, permet de voir la cible et réduit les effets des soins dont elle bénéficie pendant la durée de l'effet.",
+      "tooltip": "Inflige <span class=\"colorFEFCFF\">{{ f1 }}</span> pts de dégâts bruts au champion ennemi visé en 5 sec, vous permet de voir la cible et applique Hémorragie pour la durée de l'effet.<br /><br /><rules>(Hémorragie réduit de 40% les soins. Les ennemis camouflés ne sont pas révélés.)</rules>",
+      "maxrank": 1,
+      "cooldown": [
+        180
+      ],
+      "cooldownBurn": "180",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          5
+        ],
+        [
+          10
+        ],
+        [
+          4
+        ],
+        [
+          100
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "5",
+        "10",
+        "4",
+        "100",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [
+        {
+          "link": "@player.level",
+          "coeff": [
+            70,
+            90,
+            110,
+            130,
+            150,
+            170,
+            190,
+            210,
+            230,
+            250,
+            270,
+            290,
+            310,
+            330,
+            350,
+            370,
+            390,
+            410
+          ],
+          "key": "f1"
+        }
+      ],
+      "key": "14",
+      "summonerLevel": 9,
+      "modes": [
+        "CLASSIC",
+        "ODIN",
+        "TUTORIAL",
+        "ARAM",
+        "ASCENSION",
+        "FIRSTBLOOD",
+        "ASSASSINATE",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "ONEFORALL",
+        "GAMEMODEX",
+        "PRACTICETOOL"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        600
+      ],
+      "rangeBurn": "600",
+      "image": {
+        "full": "SummonerDot.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 192,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerExhaust": {
+      "id": "SummonerExhaust",
+      "name": "Fatigue",
+      "description": "Épuise le champion ennemi ciblé, réduisant sa vitesse de déplacement de 30% et les dégâts qu'il inflige de 40% pendant 2,5 sec.",
+      "tooltip": "Épuise le champion ennemi ciblé, réduisant sa vitesse de déplacement de {{ f3 }}% et les dégâts qu'il inflige de {{ f2 }}% pendant 2,5 sec.",
+      "maxrank": 1,
+      "cooldown": [
+        210
+      ],
+      "cooldownBurn": "210",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          2.5
+        ],
+        [
+          40
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          30
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "2.5",
+        "40",
+        "0",
+        "0",
+        "30",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "3",
+      "summonerLevel": 4,
+      "modes": [
+        "CLASSIC",
+        "ODIN",
+        "TUTORIAL",
+        "ARAM",
+        "ASCENSION",
+        "FIRSTBLOOD",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "ONEFORALL",
+        "GAMEMODEX",
+        "PRACTICETOOL"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        650
+      ],
+      "rangeBurn": "650",
+      "image": {
+        "full": "SummonerExhaust.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 240,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerFlash": {
+      "id": "SummonerFlash",
+      "name": "Saut éclair",
+      "description": "Téléporte votre champion sur une courte distance vers l'emplacement de votre curseur.",
+      "tooltip": "Téléporte votre champion sur une courte distance vers l'emplacement de votre curseur.",
+      "maxrank": 1,
+      "cooldown": [
+        300
+      ],
+      "cooldownBurn": "300",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          400
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "400",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "4",
+      "summonerLevel": 7,
+      "modes": [
+        "CLASSIC",
+        "ODIN",
+        "TUTORIAL",
+        "ARAM",
+        "ASCENSION",
+        "FIRSTBLOOD",
+        "ASSASSINATE",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "STARGUARDIAN",
+        "PROJECT",
+        "SNOWURF",
+        "ONEFORALL",
+        "GAMEMODEX",
+        "PRACTICETOOL"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        425
+      ],
+      "rangeBurn": "425",
+      "image": {
+        "full": "SummonerFlash.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 288,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerHaste": {
+      "id": "SummonerHaste",
+      "name": "Fantôme",
+      "description": "Votre champion augmente sa vitesse de déplacement et peut traverser les unités pendant 10 sec. Octroie un maximum de 28-45% (selon le niveau du champion) de vitesse de déplacement après avoir accéléré pendant 2 sec.",
+      "tooltip": "Votre champion augmente sa vitesse de déplacement et peut traverser les unités pendant 10 sec. Octroie un maximum de {{ f1 }}% de vitesse de déplacement après avoir accéléré pendant 2 sec.",
+      "maxrank": 1,
+      "cooldown": [
+        180
+      ],
+      "cooldownBurn": "180",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          27
+        ],
+        [
+          0
+        ],
+        [
+          2
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "27",
+        "0",
+        "2",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [
+        {
+          "link": "@text",
+          "coeff": 27,
+          "key": "f1"
+        }
+      ],
+      "key": "6",
+      "summonerLevel": 1,
+      "modes": [
+        "CLASSIC",
+        "ODIN",
+        "TUTORIAL",
+        "ARAM",
+        "ASCENSION",
+        "FIRSTBLOOD",
+        "ASSASSINATE",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "STARGUARDIAN",
+        "PROJECT",
+        "ONEFORALL",
+        "TUTORIAL_MODULE_1",
+        "TUTORIAL_MODULE_2",
+        "GAMEMODEX",
+        "PRACTICETOOL"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        200
+      ],
+      "rangeBurn": "200",
+      "image": {
+        "full": "SummonerHaste.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 336,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerHeal": {
+      "id": "SummonerHeal",
+      "name": "Soins",
+      "description": "Rend 90-345 PV (selon le niveau du champion) à votre champion et au champion allié ciblé et augmente de 30% vos vitesses de déplacement pendant 1 sec. Ce soin est divisé par deux sur les unités récemment touchées par le sort d'invocateur Soins.",
+      "tooltip": "Rend {{ f1 }} PV à votre champion et au champion allié ciblé, en plus d'augmenter vos vitesses de déplacement de 30% pendant 1 sec. Ce soin est divisé par deux sur les unités récemment touchées par le sort d'invocateur Soins.<br /><br /><span class=\"colorFFFF00\">Si le sort n'a pas de cible, il sera lancé sur le champion allié le plus mal en point à portée.</span>",
+      "maxrank": 1,
+      "cooldown": [
+        240
+      ],
+      "cooldownBurn": "240",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          0.3
+        ],
+        [
+          75
+        ],
+        [
+          15
+        ],
+        [
+          0.5
+        ],
+        [
+          826
+        ],
+        [
+          0.5
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "0.3",
+        "75",
+        "15",
+        "0.5",
+        "826",
+        "0.5",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [
+        {
+          "link": "@player.level",
+          "coeff": [
+            90,
+            105,
+            120,
+            135,
+            150,
+            165,
+            180,
+            195,
+            210,
+            225,
+            240,
+            255,
+            270,
+            285,
+            300,
+            315,
+            330,
+            345
+          ],
+          "key": "f1"
+        }
+      ],
+      "key": "7",
+      "summonerLevel": 1,
+      "modes": [
+        "CLASSIC",
+        "ODIN",
+        "TUTORIAL",
+        "ARAM",
+        "ASCENSION",
+        "FIRSTBLOOD",
+        "ASSASSINATE",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "STARGUARDIAN",
+        "PROJECT",
+        "ONEFORALL",
+        "TUTORIAL_MODULE_1",
+        "TUTORIAL_MODULE_2",
+        "GAMEMODEX",
+        "PRACTICETOOL"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        850
+      ],
+      "rangeBurn": "850",
+      "image": {
+        "full": "SummonerHeal.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 384,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerMana": {
+      "id": "SummonerMana",
+      "name": "Clarté",
+      "description": "Rend 50% de son mana max à votre champion. Rend aussi 25% de leur mana max aux alliés proches.",
+      "tooltip": "Rend {{ f1 }}% de son mana max à votre champion et {{ f2 }}% de leur mana max aux alliés proches.",
+      "maxrank": 1,
+      "cooldown": [
+        240
+      ],
+      "cooldownBurn": "240",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          50
+        ],
+        [
+          25
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "50",
+        "25",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [
+        {
+          "link": "@player.level",
+          "coeff": [
+            190,
+            220,
+            250,
+            280,
+            310,
+            340,
+            370,
+            400,
+            430,
+            460,
+            490,
+            520,
+            550,
+            580,
+            610,
+            640,
+            670,
+            700
+          ],
+          "key": "f1"
+        },
+        {
+          "link": "@player.level",
+          "coeff": [
+            95,
+            110,
+            125,
+            140,
+            155,
+            170,
+            185,
+            200,
+            215,
+            230,
+            245,
+            260,
+            275,
+            290,
+            305,
+            320,
+            335,
+            350
+          ],
+          "key": "f2"
+        }
+      ],
+      "key": "13",
+      "summonerLevel": 6,
+      "modes": [
+        "ODIN",
+        "ARAM",
+        "ASCENSION",
+        "FIRSTBLOOD"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        600
+      ],
+      "rangeBurn": "600",
+      "image": {
+        "full": "SummonerMana.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 432,
+        "y": 0,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerOdysseyFlash": {
+      "id": "SummonerOdysseyFlash",
+      "name": "Distorsion",
+      "description": "Traversez l'espace-temps tout en devenant brièvement impossible à cibler et invulnérable.",
+      "tooltip": "Vous devenez brièvement <attention>impossible à cibler</attention> et <attention>invulnérable</attention> tout en vous projetant dans la direction ciblée.<br /><br /><rules>Gardez vos bras et vos jambes à l'intérieur du trou de ver.</rules>",
+      "maxrank": 1,
+      "cooldown": [
+        0.5
+      ],
+      "cooldownBurn": "0.5",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          1000
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "1000",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "52",
+      "summonerLevel": 1,
+      "modes": [
+        "ODYSSEY"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "3",
+      "range": [
+        825
+      ],
+      "rangeBurn": "825",
+      "image": {
+        "full": "SummonerOdysseyFlash.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 0,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerOdysseyGhost": {
+      "id": "SummonerOdysseyGhost",
+      "name": "Fantôme",
+      "description": "Votre champion augmente sa vitesse de déplacement et peut traverser les unités pendant 10 sec. Octroie un maximum de 28-45% (selon le niveau du champion) de vitesse de déplacement après avoir accéléré pendant 2 sec.",
+      "tooltip": "Votre champion augmente sa vitesse de déplacement et peut traverser les unités pendant 10 sec. Octroie un maximum de {{ f1 }}% de vitesse de déplacement après avoir accéléré pendant 2 sec.",
+      "maxrank": 1,
+      "cooldown": [
+        120
+      ],
+      "cooldownBurn": "120",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          40
+        ],
+        [
+          0
+        ],
+        [
+          2
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "40",
+        "0",
+        "2",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "51",
+      "summonerLevel": 1,
+      "modes": [],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        200
+      ],
+      "rangeBurn": "200",
+      "image": {
+        "full": "SummonerOdysseyGhost.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 48,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerOdysseyRevive": {
+      "id": "SummonerOdysseyRevive",
+      "name": "Défibrillation",
+      "description": "Réanimez un membre d'équipage tombé au combat en restant près de lui pendant 2 sec. Quitter la zone prématurément ne déclenche pas le délai de récupération. ",
+      "tooltip": "<keywordWard>Réanimez</keywordWard> un membre d'équipage tombé au combat en restant près de lui pendant <attention>2</attention> sec. <br /><br /><rules>Quitter la zone prématurément ne déclenche pas le délai de récupération. </rules>",
+      "maxrank": 1,
+      "cooldown": [
+        100
+      ],
+      "cooldownBurn": "100",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          1
+        ],
+        [
+          2
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "1",
+        "2",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "50",
+      "summonerLevel": 1,
+      "modes": [
+        "ODYSSEY"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        350
+      ],
+      "rangeBurn": "350",
+      "image": {
+        "full": "SummonerOdysseyRevive.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 96,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerPoroRecall": {
+      "id": "SummonerPoroRecall",
+      "name": "Au roi !",
+      "description": "Rendez-vous rapidement près du roi des Poros.",
+      "tooltip": "<span class=\"colorFFE076\">Passive :</span> toucher un champion ennemi avec un Poro octroie une Marque de Poro à votre équipe. À 10 Marques de Poro, votre équipe invoque le roi des Poros pour qu'il combatte à vos côtés. Tant que le roi des Poros est actif, les équipes ne gagnent aucune Marque de Poro.<br /><br /><span class=\"colorFFE076\">Active :</span> permet de foncer rapidement auprès du roi des Poros. Ne peut être utilisé que si le roi des Poros a été invoqué par votre équipe.<br /><br /><i><span class=\"colorFDD017\">''Les Poros font vibrer votre corde sensible, et ce sont ces vibrations qui vous rapprochent d'eux.''</span></i>",
+      "maxrank": 1,
+      "cooldown": [
+        10
+      ],
+      "cooldownBurn": "10",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          3000
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "3000",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "30",
+      "summonerLevel": 1,
+      "modes": [
+        "KINGPORO"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        200
+      ],
+      "rangeBurn": "200",
+      "image": {
+        "full": "SummonerPoroRecall.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 144,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerPoroThrow": {
+      "id": "SummonerPoroThrow",
+      "name": "Jet de Poro",
+      "description": "Lancez un Poro sur vos ennemis. S'il touche une cible, vous pouvez vous rendre rapidement près de la cible.",
+      "tooltip": "Lance un Poro sur une longue distance, infligeant {{ f2 }} pts de dégâts bruts au premier ennemi touché et vous octroyant une <span class=\"coloree91d7\">vision pure</span> de la cible.<br /><br />Si le Poro touche un ennemi, cette compétence peut être réactivée dans les 3 sec pour foncer sur la cible touchée, infligeant de nouveau {{ f2 }} pts de dégâts bruts et réduisant de {{ e4 }} sec le délai de récupération du prochain Jet de Poro.<br /><br />Les Poros ne sont pas bloqués par les boucliers antisorts ou par les murs de vent, parce que ce sont des animaux, pas des sorts !<br /><br /><i><span class=\"colorFDD017\">''Les Poros sont la parfaite incarnation de l'aérodynamisme runeterran.''</span></i>",
+      "maxrank": 1,
+      "cooldown": [
+        20
+      ],
+      "cooldownBurn": "20",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          20
+        ],
+        [
+          10
+        ],
+        [
+          3
+        ],
+        [
+          5
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "20",
+        "10",
+        "3",
+        "5",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "31",
+      "summonerLevel": 1,
+      "modes": [
+        "KINGPORO"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        2500
+      ],
+      "rangeBurn": "2500",
+      "image": {
+        "full": "SummonerPoroThrow.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 192,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerSiegeChampSelect1": {
+      "id": "SummonerSiegeChampSelect1",
+      "name": "Emplacement d'arme de siège",
+      "description": "En mode Siège du Nexus, les sorts d'invocateur sont remplacés par des emplacements d'arme de siège. Dépensez des Éclats de cristal pour acheter des armes de siège à usage unique dans la boutique, puis utilisez les touches des sorts d'invocateur pour les activer !",
+      "tooltip": "",
+      "maxrank": 1,
+      "cooldown": [
+        0
+      ],
+      "cooldownBurn": "0",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "33",
+      "summonerLevel": 1,
+      "modes": [
+        "SIEGE"
+      ],
+      "costType": "",
+      "maxammo": "-1",
+      "range": [
+        2500
+      ],
+      "rangeBurn": "2500",
+      "image": {
+        "full": "SummonerSiegeChampSelect1.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 240,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      }
+    },
+    "SummonerSiegeChampSelect2": {
+      "id": "SummonerSiegeChampSelect2",
+      "name": "Emplacement d'arme de siège",
+      "description": "En mode Siège du Nexus, les sorts d'invocateur sont remplacés par des emplacements d'arme de siège. Dépensez des Éclats de cristal pour acheter des armes de siège à usage unique dans la boutique, puis utilisez les touches des sorts d'invocateur pour les activer !",
+      "tooltip": "",
+      "maxrank": 1,
+      "cooldown": [
+        0
+      ],
+      "cooldownBurn": "0",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "34",
+      "summonerLevel": 1,
+      "modes": [
+        "SIEGE"
+      ],
+      "costType": "",
+      "maxammo": "-1",
+      "range": [
+        2500
+      ],
+      "rangeBurn": "2500",
+      "image": {
+        "full": "SummonerSiegeChampSelect2.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 288,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      }
+    },
+    "SummonerSmite": {
+      "id": "SummonerSmite",
+      "name": "Châtiment",
+      "description": "Inflige 390-1000 pts de dégâts bruts (selon le niveau du champion) au monstre épique, au grand monstre, au monstre moyen ou au sbire ennemi ciblé. Châtiment vous rend des PV en fonction de vos PV max quand il est utilisé sur des monstres.",
+      "tooltip": "Inflige <span class=\"colorFEFCFF\">{{ f1 }}</span> pts de dégâts bruts au monstre épique, au grand monstre, au monstre moyen ou au sbire ennemi ciblé. Contre les monstres, restaure également <span class=\"colorFFFFFF\">{{ f6 }}</span> <span class=\"colorFF6666\">(+{{ f7 }})</span> PV.<br /><br />Châtiment regagne une charge toutes les {{ ammorechargetime }} sec, jusqu'à un maximum de 2 charges.",
+      "maxrank": 1,
+      "cooldown": [
+        15
+      ],
+      "cooldownBurn": "15",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          15
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "15",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [
+        {
+          "link": "@player.level",
+          "coeff": [
+            390,
+            410,
+            430,
+            450,
+            480,
+            510,
+            540,
+            570,
+            600,
+            640,
+            680,
+            720,
+            760,
+            800,
+            850,
+            900,
+            950,
+            1000
+          ],
+          "key": "f1"
+        }
+      ],
+      "key": "11",
+      "summonerLevel": 9,
+      "modes": [
+        "CLASSIC",
+        "TUTORIAL",
+        "FIRSTBLOOD",
+        "URF",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "ONEFORALL",
+        "PRACTICETOOL",
+        "GAMEMODEX"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "2",
+      "range": [
+        500
+      ],
+      "rangeBurn": "500",
+      "image": {
+        "full": "SummonerSmite.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 336,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerSnowURFSnowball_Mark": {
+      "id": "SummonerSnowURFSnowball_Mark",
+      "name": "Marquage ultra (rudement froid)",
+      "description": "C'est une boule de neige ! C'est un Poro ! C'est... euh... un machin.",
+      "tooltip": "Lance une boule de neige à une distance d'environ 1 unité relativement fantastique, infligeant {{ f1 }} pts de dégâts bruts au premier ennemi touché et vous octroyant une <span class=\"coloree91d7\">vision pure</span> de la cible.<br /><br />Si votre Marquage ultra touche un ennemi, cette compétence peut être réactivée dans les {{ e3 }} sec pour foncer sur la cible touchée, infligeant {{ f1 }} pts de dégâts bruts supplémentaires et augmentant votre classe de treize millions par centimètre carré.<br /><br />Si des Poros vous suivent, vous lancez un Poro au lieu d'une boule de neige, parce que nous sommes des gens sans cœur.",
+      "maxrank": 1,
+      "cooldown": [
+        80
+      ],
+      "cooldownBurn": "80",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          10
+        ],
+        [
+          5
+        ],
+        [
+          3
+        ],
+        [
+          0.25
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "10",
+        "5",
+        "3",
+        "0.25",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "39",
+      "summonerLevel": 6,
+      "modes": [
+        "SNOWURF"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        8000
+      ],
+      "rangeBurn": "8000",
+      "image": {
+        "full": "SummonerSnowURFSnowball_Mark.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 384,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerSnowball": {
+      "id": "SummonerSnowball",
+      "name": "Marquage",
+      "description": "Lancez une boule de neige en ligne droite. Si elle touche un ennemi, celui-ci est marqué, vous obtenez une vision pure de cet ennemi et votre champion peut foncer vers lui.",
+      "tooltip": "Lancez une boule de neige sur une longue distance, infligeant {{ f1 }} pts de dégâts bruts à la première unité ennemie touchée et vous octroyant une <span class=\"coloree91d7\">vision pure</span> de la cible. Si la boule touche un ennemi, ce sort peut être relancé dans les {{ e3 }} sec pour foncer vers l'unité marquée et infliger {{ f1 }} pts de dégâts bruts supplémentaires. Foncer vers la cible réduira de {{ e4 }}% le délai de récupération de Marquage.<br /><br /><span class=\"colorFFFF00\">Les projectiles de Marquage ne sont pas affectés par les boucliers antisorts ou par l'affaiblissement des projectiles.</span>",
+      "maxrank": 1,
+      "cooldown": [
+        80
+      ],
+      "cooldownBurn": "80",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          10
+        ],
+        [
+          5
+        ],
+        [
+          3
+        ],
+        [
+          25
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "10",
+        "5",
+        "3",
+        "25",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [],
+      "key": "32",
+      "summonerLevel": 6,
+      "modes": [
+        "ARAM",
+        "FIRSTBLOOD"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        1600
+      ],
+      "rangeBurn": "1600",
+      "image": {
+        "full": "SummonerSnowball.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 432,
+        "y": 48,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    },
+    "SummonerTeleport": {
+      "id": "SummonerTeleport",
+      "name": "Téléportation",
+      "description": "Après 4 sec de canalisation, votre champion est téléporté près du bâtiment, du sbire ou de la balise alliés ciblés.",
+      "tooltip": "Après {{ f1 }} sec de canalisation, votre champion est téléporté près du bâtiment, du sbire ou de la balise alliés ciblés.",
+      "maxrank": 1,
+      "cooldown": [
+        360
+      ],
+      "cooldownBurn": "360",
+      "cost": [
+        0
+      ],
+      "costBurn": "0",
+      "datavalues": {},
+      "effect": [
+        null,
+        [
+          4
+        ],
+        [
+          240
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ],
+        [
+          0
+        ]
+      ],
+      "effectBurn": [
+        null,
+        "4",
+        "240",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0",
+        "0"
+      ],
+      "vars": [
+        {
+          "link": "@text",
+          "coeff": 4,
+          "key": "f1"
+        }
+      ],
+      "key": "12",
+      "summonerLevel": 7,
+      "modes": [
+        "CLASSIC",
+        "TUTORIAL",
+        "ASSASSINATE",
+        "ARSR",
+        "DOOMBOTSTEEMO",
+        "ONEFORALL",
+        "PRACTICETOOL",
+        "GAMEMODEX"
+      ],
+      "costType": "Pas de coût",
+      "maxammo": "-1",
+      "range": [
+        25000
+      ],
+      "rangeBurn": "25000",
+      "image": {
+        "full": "SummonerTeleport.png",
+        "sprite": "spell0.png",
+        "group": "spell",
+        "x": 0,
+        "y": 96,
+        "w": 48,
+        "h": 48
+      },
+      "resource": "Pas de coût"
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/helpers/functions.js b/client/src/helpers/functions.js
index 08cc69e..f594493 100644
--- a/client/src/helpers/functions.js
+++ b/client/src/helpers/functions.js
@@ -46,10 +46,14 @@ 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';
-  }
+  return 'https://cdn.valentinkaelin.ch/riot/tier-icons/Emblem_' + capitalize(soloQStats.tier.toLowerCase()) + '.png';
+}
+
+
+/**
+ * Capitalize first letter of params string
+ * @param string  : string to capitalize
+ */
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
 }
diff --git a/client/src/main.js b/client/src/main.js
index 420fba1..510cbfa 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import DotLoader from 'vue-spinner/src/DotLoader.vue'
 
 import '@/assets/css/tailwind.css'
 import 'vue-awesome/icons'
@@ -12,6 +13,7 @@ import Icon from 'vue-awesome/components/Icon'
 Vue.config.productionTip = false
 Vue.use(VueAxios, axios)
 Vue.component('v-icon', Icon)
+Vue.component('dot-loader', DotLoader);
 
 
 new Vue({
diff --git a/client/src/router.js b/client/src/router.js
index 720f71f..2b5c7ca 100644
--- a/client/src/router.js
+++ b/client/src/router.js
@@ -1,24 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-
-
-
-
-
-
 import Home from '@/views/Home.vue'
 import Summoner from '@/views/Summoner.vue'
 
-
-
-
-
-
-//import Cats from './views/Cats.vue'
-//import Dogs from './views/Dogs.vue'
-//import Pet from './views/Pet.vue'
-
 Vue.use(Router)
 
 export default new Router({
@@ -35,20 +20,5 @@ export default new Router({
       name: 'summoner',
       component: Summoner
     }
-    /*{
-      path: '/cats',
-      name: 'cats',
-      component: Cats
-    },
-    {
-      path: '/dogs',
-      name: 'dogs',
-      component: Dogs
-    },
-    {
-      path: '/pets/:species/:id',
-      name: 'pet',
-      component: Pet
-    }*/
   ]
 })
\ No newline at end of file
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index 651fb49..a90890e 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -2,26 +2,28 @@
   <div>
     <button class="debug" @click="this.resetLocalStorage"></button>
 
-    <div class="search">
+    <div class="search mb-4">
       <div class="container mx-auto">
         <form @submit.prevent="redirect" class="flex items-center">
           <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 class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit">Rechercher</button>
+          <button class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit" :disabled="loading">Rechercher</button>
           
           <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"
+            :disabled="loading"
+            @click="apiCall"
           >
             <v-icon name="sync"/>
           </button>
         </form>
       </div>
     </div>
-
-    <template v-if="summonerFound">
+   
+    <template v-if="summonerFound && !loading">
       <div class="container mx-auto pb-16">
-        <div class="player shadow-md" v-if="localInfos.name">
+        <div class="player bg-blue-100" v-if="localInfos.name">
           <div class="player__pp" :style="{background: `url(https://cdn.valentinkaelin.ch/riot/profileicon/${localInfos.profileIconId}.png) center/cover`}"></div>
           <h1 class="player__name">{{ localInfos.name }}</h1>
           <h3 class="player__level">{{ localInfos.level }}</h3>
@@ -42,6 +44,11 @@
         </div>
       </div>
     </template>
+    <template v-else-if="loading">
+      <div class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl">
+        <dot-loader :loading="loading"></dot-loader>   
+      </div>
+    </template>
     <template v-else>
       <p>Le joueur est introuvable.</p>
     </template>
@@ -50,6 +57,8 @@
 </template>
 
 <script>
+import itemsJSON from '@/data/item.json'
+import summonersJSON from '@/data/summoner.json'
 import Match from '@/components/Match.vue';
 import { championsId, maps, gameModes } from "@/data/data.js";
 import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
@@ -63,16 +72,18 @@ export default {
       localInfos: {},
       nameChosen: this.$route.params.name,
       search: '',
-      summonerFound: true
+      summonerFound: true,
+      loading: false
     };
   },
   methods: {
     apiCall() {
       const summoner = this.$route.params.name;
+      this.loading = true;
       this.axios({
         method: "POST",
-        //url: "https://vue.valentinkaelin.ch/api",
-        url: "http://localhost:5000/api",
+        url: "https://vue.valentinkaelin.ch/api",
+        //url: "http://localhost:5000/api",
         headers: {
           "Content-Type": "application/json"
         },
@@ -81,6 +92,7 @@ export default {
         }
       })
         .then(response => {
+          this.loading = false;
           return response.data;
         })
         .then(jsonData => {
@@ -93,6 +105,7 @@ export default {
           }
         })
         .catch(err => {
+          this.loading = false;
           console.log(err);
         });
     },
@@ -106,8 +119,8 @@ export default {
       }
     },
     createObject(JSONData) {
-      //console.log('--- ALL INFOS ---')
-      //console.log(JSONData);
+      console.log('--- ALL INFOS ---')
+      console.log(JSONData);
 
       const userStats = JSONData[0];
       const rankedStats = JSONData[1];
@@ -149,12 +162,15 @@ export default {
         const items = [];
         for (let i = 0; i < 6; i++) {
           const currentItem = 'item' + i;
-          items.push(currentMatch.participants[participantId - 1].stats[currentItem]);
+          items.push(this.getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]));
         }
 
         const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
         const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
 
+        const firstSum = currentMatch.participants[participantId - 1].spell1Id;
+        const secondSum = currentMatch.participants[participantId - 1].spell2Id;
+
         matchesInfos.push({
           result: win,
           map: map,
@@ -169,7 +185,9 @@ export default {
           level: level,
           items: items,
           gold: gold,
-          minions: minions
+          minions: minions,
+          firstSum: this.getSummonerLink(firstSum),
+          secondSum: this.getSummonerLink(secondSum)
         });
       }
       console.log(matchesInfos);
@@ -193,6 +211,20 @@ export default {
 
       localStorage[this.nameChosen] = JSON.stringify(this.localInfos);
     },
+    getItemLink(id) {
+      if(id === 0) { 
+        return "url('https://cdn.valentinkaelin.ch/riot/items/0.png') 0% 0% / cover";
+      }
+      const itemImage = itemsJSON.data[id].image;
+      return `url('https://cdn.valentinkaelin.ch/riot/${itemImage.sprite}') -${itemImage.x}px -${itemImage.y}px`;
+    },
+    getSummonerLink(id) {
+     for(var prop in summonersJSON.data) {
+        if(summonersJSON.data[prop].key == id) {
+          return `https://cdn.valentinkaelin.ch/riot/spells/${summonersJSON.data[prop].id}.png`;
+        }
+      }
+    },
     redirect() {
       this.$router.push("/summoner/" + this.search)
     },
@@ -245,7 +277,7 @@ export default {
   margin: 16px auto 0;
   border: 1px solid #ebebeb;
   padding: 16px;
-  background: #fff;
+  /* background: #fff; */
 }
 
 .player__pp {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 5d8a996..ca09992 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,11 +1,447 @@
 module.exports = {
+  prefix: '',
+  important: false,
+  separator: ':',
   theme: {
-    // Some useful comment
+    colors: {
+      transparent: 'transparent',
+
+      black: '#000',
+      white: '#fff',
+
+      gray: {
+        100: '#f7fafc',
+        200: '#edf2f7',
+        300: '#e2e8f0',
+        400: '#cbd5e0',
+        500: '#a0aec0',
+        600: '#718096',
+        700: '#4a5568',
+        800: '#2d3748',
+        900: '#1a202c',
+      },
+      red: {
+        100: '#fff5f5',
+        200: '#fed7d7',
+        300: '#feb2b2',
+        400: '#fc8181',
+        500: '#f56565',
+        600: '#e53e3e',
+        700: '#c53030',
+        800: '#9b2c2c',
+        900: '#742a2a',
+      },
+      orange: {
+        100: '#fffaf0',
+        200: '#feebc8',
+        300: '#fbd38d',
+        400: '#f6ad55',
+        500: '#ed8936',
+        600: '#dd6b20',
+        700: '#c05621',
+        800: '#9c4221',
+        900: '#7b341e',
+      },
+      yellow: {
+        100: '#fffff0',
+        200: '#fefcbf',
+        300: '#faf089',
+        400: '#f6e05e',
+        500: '#ecc94b',
+        600: '#d69e2e',
+        700: '#b7791f',
+        800: '#975a16',
+        900: '#744210',
+      },
+      green: {
+        100: '#f0fff4',
+        200: '#c6f6d5',
+        300: '#9ae6b4',
+        400: '#68d391',
+        500: '#48bb78',
+        600: '#38a169',
+        700: '#2f855a',
+        800: '#276749',
+        900: '#22543d',
+      },
+      teal: {
+        100: '#e6fffa',
+        200: '#b2f5ea',
+        300: '#81e6d9',
+        400: '#4fd1c5',
+        500: '#38b2ac',
+        600: '#319795',
+        700: '#2c7a7b',
+        800: '#285e61',
+        900: '#234e52',
+      },
+      blue: {
+        100: '#ebf8ff',
+        200: '#bee3f8',
+        300: '#90cdf4',
+        400: '#63b3ed',
+        500: '#4299e1',
+        600: '#3182ce',
+        700: '#2b6cb0',
+        800: '#2c5282',
+        900: '#2a4365',
+      },
+      indigo: {
+        100: '#ebf4ff',
+        200: '#c3dafe',
+        300: '#a3bffa',
+        400: '#7f9cf5',
+        500: '#667eea',
+        600: '#5a67d8',
+        700: '#4c51bf',
+        800: '#434190',
+        900: '#3c366b',
+      },
+      purple: {
+        100: '#faf5ff',
+        200: '#e9d8fd',
+        300: '#d6bcfa',
+        400: '#b794f4',
+        500: '#9f7aea',
+        600: '#805ad5',
+        700: '#6b46c1',
+        800: '#553c9a',
+        900: '#44337a',
+      },
+      pink: {
+        100: '#fff5f7',
+        200: '#fed7e2',
+        300: '#fbb6ce',
+        400: '#f687b3',
+        500: '#ed64a6',
+        600: '#d53f8c',
+        700: '#b83280',
+        800: '#97266d',
+        900: '#702459',
+      },
+    },
+    spacing: {
+      px: '1px',
+      '2px': '2px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem',
+      '40': '10rem',
+      '48': '12rem',
+      '56': '14rem',
+      '64': '16rem',
+    },
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
+    fontFamily: {
+      sans: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: [
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        '"Liberation Mono"',
+        '"Courier New"',
+        'monospace',
+      ],
+    },
+    fontSize: {
+      xs: '.75rem',
+      sm: '.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+    },
+    fontWeight: {
+      hairline: 100,
+      thin: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900,
+    },
+    lineHeight: {
+      none: 1,
+      tight: 1.25,
+      snug: 1.375,
+      normal: 1.5,
+      relaxed: 1.625,
+      loose: 2,
+    },
+    letterSpacing: {
+      tighter: '-.05em',
+      tight: '-.025em',
+      normal: '0',
+      wide: '.025em',
+      wider: '.05em',
+      widest: '.1em',
+    },
+    textColor: theme => theme('colors'),
+    backgroundColor: theme => theme('colors'),
+    backgroundPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain',
+    },
+    borderWidth: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
+    },
+    borderColor: theme => ({
+      ...theme('colors'),
+      default: theme('colors.gray.300', 'currentColor'),
+    }),
+    borderRadius: {
+      none: '0',
+      sm: '.125rem',
+      default: '.25rem',
+      lg: '.5rem',
+      full: '9999px',
+    },
+    cursor: {
+      auto: 'auto',
+      default: 'default',
+      pointer: 'pointer',
+      wait: 'wait',
+      move: 'move',
+      'not-allowed': 'not-allowed',
+    },
+    width: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.33333%',
+      '2/3': '66.66667%',
+      '1/4': '25%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.66667%',
+      '5/6': '83.33333%',
+      full: '100%',
+      screen: '100vw',
+    }),
+    height: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+    }),
+    minWidth: {
+      '0': '0',
+      full: '100%',
+    },
+    minHeight: {
+      '0': '0',
+      full: '100%',
+      screen: '100vh',
+    },
+    maxWidth: {
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      full: '100%',
+    },
+    maxHeight: {
+      full: '100%',
+      screen: '100vh',
+    },
+    padding: theme => theme('spacing'),
+    margin: theme => ({ auto: 'auto', ...theme('spacing') }),
+    negativeMargin: theme => theme('spacing'),
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    boxShadow: {
+      default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, .25)',
+      inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+      outline: '0 0 0 3px rgba(66,153,225,0.5)',
+      none: 'none',
+    },
+    zIndex: {
+      auto: 'auto',
+      '0': 0,
+      '10': 10,
+      '20': 20,
+      '30': 30,
+      '40': 40,
+      '50': 50,
+    },
+    opacity: {
+      '0': '0',
+      '25': '.25',
+      '50': '.5',
+      '75': '.75',
+      '100': '1',
+    },
+    fill: {
+      current: 'currentColor',
+    },
+    stroke: {
+      current: 'currentColor',
+    },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
+    flexGrow: {
+      '0': 0,
+      default: 1,
+    },
+    flexShrink: {
+      '0': 0,
+      default: 1,
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    inset: {
+      '0': 0,
+      auto: 'auto',
+    },
+    container: {}
   },
   variants: {
-    // Some useful comment
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderCollapse: [],
+    borderColor: ['responsive', 'hover', 'focus'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidth: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    flexDirection: ['responsive'],
+    flexWrap: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
+    justifyContent: ['responsive'],
+    alignContent: ['responsive'],
+    flex: ['responsive'],
+    flexGrow: ['responsive'],
+    flexShrink: ['responsive'],
+    float: ['responsive'],
+    fontFamily: ['responsive'],
+    fontWeight: ['responsive', 'hover', 'focus'],
+    height: ['responsive'],
+    lineHeight: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    negativeMargin: ['responsive'],
+    objectFit: ['responsive'],
+    objectPosition: ['responsive'],
+    opacity: ['responsive'],
+    outline: ['focus'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    inset: ['responsive'],
+    resize: ['responsive'],
+    boxShadow: ['responsive', 'hover', 'focus'],
+    fill: [],
+    stroke: [],
+    tableLayout: ['responsive'],
+    textAlign: ['responsive'],
+    textColor: ['responsive', 'hover', 'focus'],
+    fontSize: ['responsive'],
+    fontStyle: ['responsive'],
+    textTransform: ['responsive'],
+    textDecoration: ['responsive', 'hover', 'focus'],
+    fontSmoothing: ['responsive'],
+    letterSpacing: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    wordBreak: ['responsive'],
+    width: ['responsive'],
+    zIndex: ['responsive'],
   },
-  plugins: [
-    // Some useful comment
-  ]
-}
+  corePlugins: {},
+  plugins: [],
+}
\ No newline at end of file
diff --git a/server/.gitignore b/server/.gitignore
index a3b9a47..e786cf8 100644
--- a/server/.gitignore
+++ b/server/.gitignore
@@ -1,3 +1,3 @@
 /node_modules
-/Patch9.5
+/DDragon
 .env
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 4ba73f7..a23fa91 100644
--- a/server/server.js
+++ b/server/server.js
@@ -20,11 +20,11 @@ let finalJSON = [];
 app.set('port', (process.env.PORT || 5000))
 
 /* DEV */
-var cors = require('cors');
-app.use(cors({origin: '*'}));
+//var cors = require('cors');
+//app.use(cors({origin: '*'}));
 
 /* PRODUCTION */
-/*const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
+const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
 app.use(staticFileMiddleware);
 app.use(history({
   disableDotRule: true,
@@ -34,7 +34,7 @@ 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