refactor: start the new design of the matches

client/src/assets/img/icons/Creep.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.04 1.04912C7.97335 0.971025 7.89055 0.908316 7.79733 0.865316C7.7041 0.822316 7.60266 0.800049 7.5 0.800049C7.39734 0.800049 7.2959 0.822316 7.20267 0.865316C7.10945 0.908316 7.02665 0.971025 6.96 1.04912C5.5 2.79946 2.5 7.60041 2.5 8.42057C2.5 9.24073 5.74 12.9315 7.09 14.0717C7.20224 14.1736 7.34841 14.23 7.5 14.23C7.65159 14.23 7.79776 14.1736 7.91 14.0717C9.26 12.9315 12.5 9.26074 12.5 8.42057C12.5 7.58041 9.5 2.79946 8.04 1.04912ZM7.32 12.1813L4.58 8.53059C4.55791 8.49446 4.54621 8.45292 4.54621 8.41057C4.54621 8.36821 4.55791 8.32668 4.58 8.29054L5.38 6.69023C5.40154 6.66315 5.42891 6.64127 5.46008 6.62624C5.49124 6.6112 5.5254 6.60339 5.56 6.60339C5.5946 6.60339 5.62876 6.6112 5.65992 6.62624C5.69109 6.64127 5.71846 6.66315 5.74 6.69023L7.34 8.26054C7.36057 8.28233 7.38536 8.2997 7.41288 8.31157C7.44039 8.32343 7.47004 8.32956 7.5 8.32956C7.52996 8.32956 7.55961 8.32343 7.58712 8.31157C7.61464 8.2997 7.63943 8.28233 7.66 8.26054L9.28 6.64022C9.30154 6.61314 9.32891 6.59126 9.36008 6.57623C9.39124 6.56119 9.4254 6.55338 9.46 6.55338C9.4946 6.55338 9.52876 6.56119 9.55992 6.57623C9.59109 6.59126 9.61846 6.61314 9.64 6.64022L10.44 8.24054C10.4621 8.27667 10.4738 8.3182 10.4738 8.36056C10.4738 8.40291 10.4621 8.44445 10.44 8.48058L7.68 12.1813C7.6597 12.2102 7.63275 12.2338 7.60142 12.2501C7.57009 12.2663 7.5353 12.2748 7.5 12.2748C7.4647 12.2748 7.42991 12.2663 7.39858 12.2501C7.36725 12.2338 7.3403 12.2102 7.32 12.1813Z" fill="#81E6D9"/>
+</svg>

client/src/assets/img/icons/Damage.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0714 1.92857V1H12.1429V1.92857L11.2143 2.85714H9.35714V1.92857H8.42857V2.85714H6.57143V1.92857H5.64286V2.85714H3.78571L2.85714 1.92857V1H1.92857V1.92857H1V2.85714H1.92857L2.85714 3.78571V5.64286H1.92857V6.57143H2.85714V7.5H3.78571V6.57143H5.64286L6.57143 5.64286V3.78571H8.42857V5.64286L1 11.2143V14H3.78571L9.35714 6.57143H11.2143V7.5H12.1429V6.57143H13.0714V5.64286H12.1429V3.78571L13.0714 2.85714H14V1.92857H13.0714Z" fill="#E25656"/>
+<path d="M8.02929 9.75643L11.2143 14H14V11.2143L9.75643 8.02929L8.02929 9.75643Z" fill="#E25656"/>
+</svg>

client/src/assets/img/icons/Gold.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.63324C14 3.57057 11.7157 1.8999 8.89286 1.8999C6.07 1.8999 3.78571 3.57057 3.78571 5.63324C3.7765 5.76685 3.7765 5.90095 3.78571 6.03457C2.12357 6.65057 1 7.90124 1 9.36657C1 11.4292 3.28429 13.0999 6.10714 13.0999C8.93 13.0999 11.2143 11.4292 11.2143 9.36657C11.2235 9.23295 11.2235 9.09885 11.2143 8.96524C12.8486 8.34924 14 7.08924 14 5.63324ZM6.10714 11.3172C4.315 11.3172 2.85714 10.2999 2.85714 8.94657C2.90787 8.55215 3.06303 8.17865 3.3064 7.86507C3.54978 7.55149 3.87244 7.30934 4.24071 7.1639C4.77538 7.8881 5.47991 8.46817 6.29158 8.85247C7.10324 9.23677 7.99686 9.41338 8.89286 9.36657H9.30143C9.03214 10.4679 7.71357 11.3172 6.10714 11.3172Z" fill="#F3A05A"/>
+</svg>

client/src/assets/img/icons/KillParticipation.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 1.5C4.18594 1.5 1.5 3.85078 1.5 6.75C1.5 8.39297 2.36484 9.85781 3.71484 10.8211C3.93984 10.9828 4.07109 11.2453 4.03125 11.5219L3.81094 13.0734C3.77813 13.2984 3.95156 13.5 4.17891 13.5H6V12.1875C6 12.0844 6.08437 12 6.1875 12H6.5625C6.66563 12 6.75 12.0844 6.75 12.1875V13.5H8.25V12.1875C8.25 12.0844 8.33437 12 8.4375 12H8.8125C8.91563 12 9 12.0844 9 12.1875V13.5H10.8211C11.0484 13.5 11.2219 13.2984 11.1891 13.0734L10.9688 11.5219C10.9289 11.2477 11.0578 10.9828 11.2852 10.8211C12.6352 9.85781 13.5 8.39297 13.5 6.75C13.5 3.85078 10.8141 1.5 7.5 1.5ZM5.25 9C4.42266 9 3.75 8.32734 3.75 7.5C3.75 6.67266 4.42266 6 5.25 6C6.07734 6 6.75 6.67266 6.75 7.5C6.75 8.32734 6.07734 9 5.25 9ZM9.75 9C8.92266 9 8.25 8.32734 8.25 7.5C8.25 6.67266 8.92266 6 9.75 6C10.5773 6 11.25 6.67266 11.25 7.5C11.25 8.32734 10.5773 9 9.75 9Z" fill="#B78787"/>
+</svg>

client/src/components/Match.vue

@@ -1,69 +1,105 @@
 <template>
-  <li class="match mt-4 bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'">
+  <li :class="matchResultClass" class="match mt-4 rounded-lg text-white text-sm md:text-base">
     <div class="match-container">
-      <!-- Responsive  -->
+      <div class="flex flex-wrap px-5 py-3">
-      <div
+        <div class="first w-1/3 text-left">
-        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
+              class="h-6 text-lg text-teal-500 font-extrabold uppercase leading-none"
+            >{{ data.champ }}</div>
+
+            <div class="flex">
+              <div class="flex flex-col justify-center items-center">
+                <div
+                  class="w-10 h-10 bg-blue-1000"
+                  :style="{background: `url(${require('@/assets/img/roles/Bot.png')}) center/cover`}"
+                ></div>
+                <span class="text-xs text-teal-500 font-extrabold">LVL {{ data.level }}</span>
+              </div>
+              <div
+                class="ml-2 w-16 h-16 crop-champion bg-blue-1000 rounded-lg mb-2px sm:mb-0 sm:mr-2px"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champ}.png')`}"
+              ></div>
+              <div class="ml-2 flex flex-row sm:flex-col sm:justify-around">
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.firstSum}) center/cover`}"
+                ></div>
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.secondSum}) center/cover`}"
+                ></div>
+              </div>
+              <div class="ml-1 flex flex-row sm:flex-col sm:justify-around">
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.primaryRune}) center/cover`}"
+                ></div>
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.secondaryRune}) center/cover`}"
+                ></div>
+              </div>
+              <div class="ml-12 flex items-center">
+                <div class="text-3xl font-extrabold text-teal-500">
+                  <span class>{{ data.kills }}</span>
+                  <span class>/</span>
+                  <span class>{{ data.deaths }}</span>
+                  <span class>/</span>
+                  <span class>{{ data.assists }}</span>
+                </div>
               </div>
             </div>
 
-      <div class="flex-container">
+            <div
-        <div class="first col w-1/3 lg:w-1/4">
+              class="h-6 flex items-end text-sm text-white font-extrabold leading-none"
-          <div class="icon-and-sums flex flex-col sm:flex-row">
+            >{{ data.gamemode }}</div>
-            <div class="relative">
-              <img
-                :src="`https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${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="second w-1/3 py-6 flex items-center">
-          <div class="map">{{ data.map }}</div>
+          <div class="items flex flex-wrap">
-          <div class="gamemode">{{ data.gamemode }}</div>
-        </div>
-
-        <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: item}"
-            class="item"
+              class="ml-1 w-8 h-8 rounded-md bg-blue-1000"
             ></div>
           </div>
 
-        <div
+          <div class="ml-12 leading-none">
-          class="fourth w-1/6 lg:w-1/4 flex-col items-center justify-center sm:flex-row sm:justify-around"
+            <div class="flex items-center">
-        >
+              <img src="@/assets/img/icons/Creep.svg" alt="Minions" />
-          <div
+              <div class="ml-1 text-teal-300 text-lg font-bold">
-            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" />
+                <span class="font-normal">cs</span>
               </div>
             </div>
+            <div class="flex items-center">
+              <img src="@/assets/img/icons/Gold.svg" alt="Gold" />
+              <div class="ml-1 gold text-lg font-bold">
+                {{ data.gold }}
+                <span class="font-normal">gold</span>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <img src="@/assets/img/icons/Damage.svg" alt="Damage" />
+              <div class="ml-1 damage text-lg font-bold">
+                {{ data.damage }}
+                <span class="font-normal">damage</span>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />
+              <div class="ml-1 kp text-lg font-bold">
+                {{ data.kp }}
+                <span class="font-normal">kp</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="third w-1/3 py-6 flex items-center justify-around">
           <div class="duration-date hidden lg:block">
             <div class="duration">{{ data.time }}</div>
             <div class="date">{{ data.date }}</div>
@@ -82,6 +118,16 @@ export default {
     data: {
       type: Object,
       required: true
+    },
+  },
+
+  computed: {
+    matchResultClass() {
+      return {
+        'win': this.data.result === 'Win',
+        'loss': this.data.result === 'Fail',
+        'remake': this.data.result === 'Remake',
+      }
     }
   }
 }
@@ -89,66 +135,52 @@ export default {
 
 
 <style scoped>
-.match {
+.loss {
-  border-bottom: 1px solid #dae1e7;
+  background-image: linear-gradient(
+      89.21deg,
+      rgba(140, 0, 0, 0.38) 0.09%,
+      rgba(44, 82, 130, 0) 68.58%
+    ),
+    linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
 }
 
-.match .flex-container {
+.win {
-  display: flex;
+  background-image: linear-gradient(
-  flex-wrap: wrap;
+      89.45deg,
-  padding: 16px 8px;
+      rgba(1, 97, 28, 0.38) -18.36%,
+      rgba(44, 82, 130, 0) 85.07%
+    ),
+    linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
 }
 
-.match.win .match-container {
+.remake {
-  border-left: 10px solid #48bb78;
+  background-image: linear-gradient(
+      89.45deg,
+      rgba(233, 169, 75, 0.38) -1.14%,
+      rgba(44, 82, 130, 0) 58.83%
+    ),
+    linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
 }
 
-.match.lose .match-container {
+.crop-champion {
-  border-left: 10px solid #f56565;
+  background-size: 74px;
+  background-position: center;
 }
 
-/* First col */
+.items {
-.match .first {
+  width: 7rem;
-  display: flex;
+  height: 4.5rem;
-  flex-direction: row;
-  align-items: center;
 }
 
-.champion-icon {
+.gold {
-  width: 48px;
+  color: #f3a05a;
-  height: 48px;
-  display: block;
 }
 
-.match .summonerSpells {
+.damage {
-  margin: 0 8px 0 0;
+  color: #e25656;
 }
 
-.spell-icon {
+.kp {
-  width: 23px;
+  color: #b78787;
-  height: 23px;
-  display: block;
-}
-
-/* Second col */
-.match .second {
-  text-align: left;
-}
-
-/* Third col */
-.match .third {
-  display: flex;
-}
-
-.third .item {
-  width: 48px;
-  height: 48px;
-  margin: 0 2px 0 0;
-}
-
-/* Fourth col */
-.match .fourth {
-  display: flex;
-  align-items: center;
 }
 </style>

client/src/data/data.js

@@ -1,3 +1,3 @@
 export const maps = { 10: 'The Twisted Treeline', 11: "Summoner's Rift", 12: 'Howling Abyss' }
 
-export const gameModes = { 76: 'URF', 100: 'ARAM', 400: 'Normal (Draft)', 420: 'Ranked (Solo)', 430: 'Normal (Blind)', 440: 'Ranked (Flex)', 460: '3v3 Blind', 470: '3v3 Ranked (Flex)', 800: '3v3 Co-op vs. AI (Intermediate)', 810: '3v3 Co-op vs. AI (Intro)', 820: '3v3 Co-op vs. AI (Beginner)', 830: 'Co-op vs. AI (Intro)', 840: 'Co-op vs. AI (Beginner)', 850: 'Co-op vs. AI (Intermediate)' }
+export const gameModes = { 76: 'URF', 100: 'ARAM', 400: 'DRAFT 5vs5', 420: 'Solo/Duo', 430: 'BLIND 5v5', 440: 'FLEX 5vs5', 460: 'BLIND 3vs3', 470: 'FLEX 3vs3', 800: '3v3 Co-op vs. AI (Intermediate)', 810: '3v3 Co-op vs. AI (Intro)', 820: '3v3 Co-op vs. AI (Beginner)', 830: 'Co-op vs. AI (Intro)', 840: 'Co-op vs. AI (Beginner)', 850: 'Co-op vs. AI (Intermediate)' }

client/src/helpers/summoner.js

@@ -7,7 +7,7 @@ import summonersJSON from '@/data/summoner.json'
  * @param {Object} RiotData : all data from the Riot API
  * @param {Object} championsInfos : champions data from the Riot API
  */
-export function createSummonerData(RiotData, championsInfos) {
+export function createSummonerData(RiotData, championsInfos, runesInfos) {
   console.log('--- ALL INFOS ---')
   console.log(RiotData)
 
@@ -29,35 +29,63 @@ export function createSummonerData(RiotData, championsInfos) {
   // Loop on all matches
   for (let i = 0; i < matches.length; i++) {
     const currentMatch = matches[i]
-    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId
+    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId - 1
 
-    const teamId = currentMatch.participants[participantId - 1].teamId
+    const teamId = currentMatch.participants[participantId].teamId
-    const win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
+    let win = currentMatch.teams.find((t) => t.teamId === teamId).win
+
+    // Match less than 5min
+    if (currentMatch.gameDuration < 300) {
+      win = 'Remake'
+    }
 
     const map = maps[currentMatch.mapId]
     let mode = gameModes[currentMatch.queueId]
     if (!mode)
       mode = 'Undefined gamemode'
-    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
+    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId].championId)[0]
-    const role = currentMatch.participants[participantId - 1].timeline.lane
+    const role = currentMatch.participants[participantId].timeline.lane
     const timeAgo = timeDifference(currentMatch.gameCreation)
     const time = secToTime(currentMatch.gameDuration)
-    const kills = currentMatch.participants[participantId - 1].stats.kills
+    const kills = currentMatch.participants[participantId].stats.kills
-    const deaths = currentMatch.participants[participantId - 1].stats.deaths
+    const deaths = currentMatch.participants[participantId].stats.deaths
-    const assists = currentMatch.participants[participantId - 1].stats.assists
+    const assists = currentMatch.participants[participantId].stats.assists
-    const level = currentMatch.participants[participantId - 1].stats.champLevel
+    const kda = ((kills + assists) / deaths).toFixed(2)
+    const level = currentMatch.participants[participantId].stats.champLevel
+    const damage = (currentMatch.participants[participantId].stats.totalDamageDealtToChampions / 1000).toFixed(1) + 'k'
+
+    const primaryRuneCategory = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkPrimaryStyle)
+    let primaryRune
+    for (const subCat of primaryRuneCategory.slots) {
+      primaryRune = subCat.runes.find(r => r.id === currentMatch.participants[participantId].stats.perk0)
+      if (primaryRune) {
+        break
+      }
+    }
+    primaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${primaryRune.icon}`
+    let secondaryRune = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkSubStyle)
+    secondaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${secondaryRune.icon}`
+
+
+    const totalKills = currentMatch.participants.reduce((prev, current) => {
+      if (current.teamId !== teamId) {
+        return prev
+      }
+      return prev + current.stats.kills
+    }, 0)
+    const kp = ((kills + assists) * 100 / totalKills).toFixed(1) + '%'
 
     const items = []
     for (let i = 0; i < 6; i++) {
       const currentItem = 'item' + i
-      items.push(getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]))
+      items.push(getItemLink(currentMatch.participants[participantId].stats[currentItem]))
     }
 
-    const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k'
+    const gold = (currentMatch.participants[participantId].stats.goldEarned / 1000).toFixed(1) + 'k'
-    const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled
+    const minions = currentMatch.participants[participantId].stats.totalMinionsKilled + currentMatch.participants[participantId].stats.neutralMinionsKilled
 
-    const firstSum = currentMatch.participants[participantId - 1].spell1Id
+    const firstSum = currentMatch.participants[participantId].spell1Id
-    const secondSum = currentMatch.participants[participantId - 1].spell2Id
+    const secondSum = currentMatch.participants[participantId].spell2Id
 
     matchesInfos.push({
       result: win,
@@ -65,12 +93,17 @@ export function createSummonerData(RiotData, championsInfos) {
       gamemode: mode,
       champ: champion,
       role: role,
+      primaryRune,
+      secondaryRune,
       date: timeAgo,
       time: time,
       kills: kills,
       deaths: deaths,
       assists: assists,
+      kda,
       level: level,
+      damage,
+      kp,
       items: items,
       gold: gold,
       minions: minions,

client/src/store/modules/ddragon.js

@@ -3,12 +3,16 @@ import { axios } from '@/plugins/axios'
 export const namespaced = true
 
 export const state = {
-  champions: []
+  champions: [],
+  runes: []
 }
 
 export const mutations = {
   PUSH_CHAMPIONS(state, champions) {
     state.champions = champions
+  },
+  PUSH_RUNES(state, runes) {
+    state.runes = runes
   }
 }
 
@@ -18,7 +22,14 @@ export const actions = {
     const endpoint = 'Champion'
     const resp = await axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
     commit('PUSH_CHAMPIONS', resp.data.data)
-  }
+  },
+
+  async getRunes({ commit }) {
+    console.log('API CALL FOR RUNES')
+    const endpoint = 'Rune'
+    const resp = await axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
+    commit('PUSH_RUNES', resp.data)
+  },
 }
 
 export const getters = {

client/src/store/modules/summoner.js

@@ -28,7 +28,7 @@ export const actions = {
     try {
       const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
       if (resp.data) {
-        const infos = createSummonerData(resp.data, rootState.ddragon.champions)
+        const infos = createSummonerData(resp.data, rootState.ddragon.champions, rootState.ddragon.runes)
         commit('SUMMONER_FOUND', infos)
       } else {
         commit('SUMMONER_NOT_FOUND')

client/src/views/Summoner.vue

@@ -152,12 +152,14 @@ export default {
       if (!this.areChampionsLoaded)
         await this.getChampions()
 
+      await this.getRunes()
+
       this.summonerRequest({ summoner: this.summoner, region: this.region })
     },
     redirect(summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },
-    ...mapActions('ddragon', ['getChampions']),
+    ...mapActions('ddragon', ['getChampions', 'getRunes']),
     ...mapActions('summoner', ['summonerRequest'])
   }
 }

client/tailwind.config.js

@@ -248,6 +248,7 @@ module.exports = {
       none: '0',
       sm: '.125rem',
       default: '.25rem',
+      md: '.375rem',
       lg: '.5rem',
       full: '9999px',
     },

server/providers/Jax/src/Endpoints/DDragonEndpoints/DDragonRuneEndpoint.js

@@ -0,0 +1,17 @@
+const DDragonRequest = require('../../DDragonRequest')
+
+class DDragonRuneEndpoint {
+  constructor(version) {
+    this.version = version
+  }
+
+  list() {
+    return new DDragonRequest(
+      `runesReforged.json`,
+      'cdn',
+      this.version
+    ).execute()
+  }
+}
+
+module.exports = DDragonRuneEndpoint

server/providers/Jax/src/Jax.js

@@ -7,6 +7,7 @@ const SummonerEndpoint = require('./Endpoints/SummonerEndpoint')
 
 const DDragonVersionEndpoint = require('./Endpoints/DDragonEndpoints/DDragonVersionEndpoint')
 const DDragonChampionEndpoint = require('./Endpoints/DDragonEndpoints/DDragonChampionEndpoint')
+const DDragonRuneEndpoint = require('./Endpoints/DDragonEndpoints/DDragonRuneEndpoint')
 
 class Jax {
   constructor(key, env) {
@@ -30,6 +31,7 @@ class Jax {
 
     this.DDragon = {
       Champion: new DDragonChampionEndpoint(this.version),
+      Rune: new DDragonRuneEndpoint(this.version),
       Version: this.version
     }
   }