From 95bab9affad11ca8e3faceb2129ffdcad07b9748 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Fri, 20 Sep 2019 23:32:28 +0200
Subject: [PATCH] feat: add the 10 participants of each match

---
 client/src/assets/css/base.css            |   4 +
 client/src/assets/img/icons/Stopwatch.svg |   3 +
 client/src/components/Match.vue           |  53 ++-
 client/src/helpers/functions.js           |  10 +-
 client/src/helpers/summoner.js            |  72 ++--
 client/src/store/index.js                 |   3 +-
 client/tailwind.config.js                 | 397 ++++++++++++----------
 7 files changed, 324 insertions(+), 218 deletions(-)
 create mode 100644 client/src/assets/img/icons/Stopwatch.svg

diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
index e3149af..8edf202 100644
--- a/client/src/assets/css/base.css
+++ b/client/src/assets/css/base.css
@@ -18,3 +18,7 @@ button:focus {
 .bg-gradient {
   background: linear-gradient(180deg, #2C5282 0%, rgba(44, 82, 130, 0) 100%);
 }
+
+.text-overflow {
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/client/src/assets/img/icons/Stopwatch.svg b/client/src/assets/img/icons/Stopwatch.svg
new file mode 100644
index 0000000..2d54a0b
--- /dev/null
+++ b/client/src/assets/img/icons/Stopwatch.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.999 11.875C16.999 16.3633 13.1946 20 8.49949 20C3.80434 20 0 16.3633 0 11.875C0 7.8125 3.11784 4.44531 7.19188 3.84766V2.5H6.04771C5.77802 2.5 5.55736 2.28906 5.55736 2.03125V0.46875C5.55736 0.210938 5.77802 0 6.04771 0H10.9513C11.221 0 11.4416 0.210938 11.4416 0.46875V2.03125C11.4416 2.28906 11.221 2.5 10.9513 2.5H9.8071V3.84766C11.3395 4.07422 12.737 4.69141 13.8811 5.58984L15.0049 4.51562C15.1969 4.33203 15.5075 4.33203 15.6995 4.51562L16.856 5.62109C17.048 5.80469 17.048 6.10156 16.856 6.28516L15.6546 7.43359L15.6301 7.45703C16.4964 8.72266 16.999 10.2422 16.999 11.875ZM9.8071 13.2812V7.36328C9.8071 7.10547 9.58644 6.89453 9.31675 6.89453H7.68223C7.41254 6.89453 7.19188 7.10547 7.19188 7.36328V13.2812C7.19188 13.5391 7.41254 13.75 7.68223 13.75H9.31675C9.58644 13.75 9.8071 13.5391 9.8071 13.2812Z" fill="#BEE3F8"/>
+</svg>
diff --git a/client/src/components/Match.vue b/client/src/components/Match.vue
index ad57a00..2c195bf 100644
--- a/client/src/components/Match.vue
+++ b/client/src/components/Match.vue
@@ -6,7 +6,7 @@
           <div>
             <div
               class="h-6 text-lg text-teal-500 font-extrabold uppercase leading-none"
-            >{{ data.champ }}</div>
+            >{{ data.champion.name }}</div>
 
             <div class="flex">
               <div class="flex flex-col justify-end items-center">
@@ -15,11 +15,13 @@
                   class="w-10 h-10 bg-center bg-cover"
                   :style="{backgroundImage: `url(${require('@/assets/img/roles/' + data.role + '.png')})`}"
                 ></div>
-                <div class="w-10 text-center text-xs text-teal-500 font-extrabold">LVL {{ data.level }}</div>
+                <div
+                  class="w-10 text-center text-xs text-teal-500 font-extrabold"
+                >LVL {{ data.level }}</div>
               </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')`}"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champion.id}.png')`}"
               ></div>
               <div class="ml-2 flex flex-row sm:flex-col sm:justify-around">
                 <div
@@ -101,10 +103,39 @@
           </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>
+        <div class="third w-1/3 py-1 flex items-center">
+          <div>
+            <div
+              v-for="(ally, index) in data.allyTeam"
+              :key="'player-' + index"
+              class="flex items-center leading-none"
+            >
+              <div
+                class="w-20 text-right overflow-hidden text-overflow whitespace-no-wrap text-sm text-blue-200 font-medium"
+              >{{ ally.name }}</div>
+              <div
+                class="ml-1 w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full overflow-hidden"
+                :class="index !== 0 ? '-mt-1': ''"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${ally.champion.id}.png')`}"
+              ></div>
+              <div
+                class="mx-3 w-4 h-4 bg-center bg-cover"
+                :style="{backgroundImage: `url(${require('@/assets/img/roles/' + roles[index] + '.png')})`}"
+              ></div>
+              <div
+                class="w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full"
+                :class="index !== 0 ? '-mt-1' : ''"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.enemyTeam[index].champion.id}.png')`}"
+              ></div>
+              <div
+                class="ml-1 w-20 text-left overflow-hidden text-overflow whitespace-no-wrap text-sm text-blue-200 font-medium"
+              >{{ data.enemyTeam[index].name }}</div>
+            </div>
+          </div>
+          <div class="ml-auto flex flex-col items-center justify-center">
+            <img class="w-5 h-5" src="@/assets/img/icons/Stopwatch.svg" alt="Stopwatch" />
+            <div class="text-lg text-teal-400 font-medium">{{ data.time }}</div>
+            <div class="text-xs text-white font-medium">{{ data.date }}</div>
           </div>
         </div>
       </div>
@@ -113,7 +144,7 @@
 </template>
 
 <script>
-
+import { mapState } from 'vuex'
 
 export default {
   props: {
@@ -130,12 +161,14 @@ export default {
         'loss': this.data.result === 'Fail',
         'remake': this.data.result === 'Remake',
       }
-    }
+    },
+    ...mapState({
+      roles: state => state.roles
+    }),
   }
 }
 </script>
 
-
 <style scoped>
 .loss {
   background-image: linear-gradient(
diff --git a/client/src/helpers/functions.js b/client/src/helpers/functions.js
index 0b4ed5e..3485525 100644
--- a/client/src/helpers/functions.js
+++ b/client/src/helpers/functions.js
@@ -11,13 +11,13 @@ export function timeDifference(previous) {
   const elapsed = current - previous
 
   if (elapsed < msPerMinute) {
-    return Math.round(elapsed / 1000) + 's'
+    return Math.round(elapsed / 1000) + ' seconds ago'
   } else if (elapsed < msPerHour) {
-    return Math.round(elapsed / msPerMinute) + 'm'
+    return Math.round(elapsed / msPerMinute) + ' minutes ago'
   } else if (elapsed < msPerDay) {
-    return Math.round(elapsed / msPerHour) + 'h'
+    return Math.round(elapsed / msPerHour) + ' hours ago'
   } else if (elapsed < msPerWeek) {
-    return Math.round(elapsed / msPerDay) + 'j'
+    return Math.round(elapsed / msPerDay) + ' days ago'
   } else {
     const oldDate = new Date(previous)
     const day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate()
@@ -34,7 +34,7 @@ export function timeDifference(previous) {
 export function secToTime(sec) {
   const min = Math.floor(sec / 60)
   const newSec = sec - min * 60
-  return min + ':' + (newSec < 10 ? '0' + newSec : newSec) //
+  return min + 'm' + (newSec < 10 ? '0' + newSec : newSec) + 's'
 }
 
 
diff --git a/client/src/helpers/summoner.js b/client/src/helpers/summoner.js
index 65a1b2e..3cdf24f 100644
--- a/client/src/helpers/summoner.js
+++ b/client/src/helpers/summoner.js
@@ -44,16 +44,8 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
     let mode = gameModes[currentMatch.queueId]
     if (!mode)
       mode = 'Undefined gamemode'
-    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === player.championId)[0]
-
-    let role = player.timeline.lane
-    if(role === 'BOTTOM') {
-      if(player.timeline.role.includes('SUPPORT')) {
-        role = 'SUPPORT'
-      } else {
-        role = 'BOTTOM'
-      }
-    }
+    const champion = (({ id, name }) => ({ id, name }))(Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === player.championId)[1])
+    const role = getRoleName(player.timeline)
 
     const timeAgo = timeDifference(currentMatch.gameCreation)
     const time = secToTime(currentMatch.gameDuration)
@@ -76,7 +68,6 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
     let secondaryRune = runesInfos.find(r => r.id === player.stats.perkSubStyle)
     secondaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${secondaryRune.icon}`
 
-
     const totalKills = currentMatch.participants.reduce((prev, current) => {
       if (current.teamId !== teamId) {
         return prev
@@ -97,28 +88,49 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
     const firstSum = player.spell1Id
     const secondSum = player.spell2Id
 
+    const allyTeam = []
+    const enemyTeam = []
+    for (let summoner of currentMatch.participantIdentities) {
+      const allData = currentMatch.participants[summoner.participantId - 1]
+      const playerInfos = {
+        name: summoner.player.summonerName,
+        role: getRoleName(allData.timeline),
+        champion: (({ id, name }) => ({ id, name }))(Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === allData.championId)[1])
+      }
+
+      if (allData.teamId === teamId) {
+        allyTeam.push(playerInfos)
+      } else {
+        enemyTeam.push(playerInfos)
+      }
+    }
+    allyTeam.sort(sortTeamByRole)
+    enemyTeam.sort(sortTeamByRole)
+
     matchesInfos.push({
       result: win,
-      map: map,
+      map,
       gamemode: mode,
-      champ: champion,
-      role: role,
+      champion,
+      role,
       primaryRune,
       secondaryRune,
       date: timeAgo,
-      time: time,
-      kills: kills,
-      deaths: deaths,
-      assists: assists,
+      time,
+      kills,
+      deaths,
+      assists,
       kda,
-      level: level,
+      level,
       damage,
       kp,
-      items: items,
-      gold: gold,
-      minions: minions,
+      items,
+      gold,
+      minions,
       firstSum: getSummonerLink(firstSum),
-      secondSum: getSummonerLink(secondSum)
+      secondSum: getSummonerLink(secondSum),
+      allyTeam,
+      enemyTeam
     })
   } // end loop matches
   console.log('matches infos just below')
@@ -136,13 +148,25 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
 }
 
 function getItemLink(id) {
-  if(id === 0) {
+  if (id === 0) {
     return null
   }
   return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id}.png')`
 }
 
+function getRoleName(timeline) {
+  if (timeline.lane === 'BOTTOM' && timeline.role.includes('SUPPORT')) {
+    return 'SUPPORT'
+  }
+  return timeline.lane
+}
+
 function getSummonerLink(id) {
   const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
   return `https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/spell/${spellName}.png`
 }
+
+function sortTeamByRole(a, b) {
+  const sortingArr = [ 'TOP', 'JUNGLE', 'MIDDLE', 'BOTTOM', 'SUPPORT']
+  return sortingArr.indexOf(a.role) - sortingArr.indexOf(b.role)
+}
diff --git a/client/src/store/index.js b/client/src/store/index.js
index c436fcc..fa34ffc 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -27,7 +27,8 @@ export default new Vuex.Store({
       'oce': 'oc1',
       'tr': 'tr1',
       'ru': 'ru'
-    }
+    },
+    roles: ['TOP', 'JUNGLE', 'MIDDLE', 'BOTTOM', 'SUPPORT']
   },
   strict: debug
 })
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 3d58e42..9d39f98 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -3,6 +3,12 @@ module.exports = {
   important: false,
   separator: ':',
   theme: {
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
     colors: {
       transparent: 'transparent',
 
@@ -144,78 +150,6 @@ module.exports = {
       '56': '14rem',
       '64': '16rem',
     },
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-    },
-    fontFamily: {
-      sans: [
-        'Lato',
-        '-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',
@@ -233,6 +167,18 @@ module.exports = {
       cover: 'cover',
       contain: 'contain',
     },
+    borderColor: theme => ({
+      ...theme('colors'),
+      default: theme('colors.gray.300', 'currentColor'),
+    }),
+    borderRadius: {
+      none: '0',
+      sm: '0.125rem',
+      default: '0.25rem',
+      md: '.375rem',
+      lg: '0.5rem',
+      full: '9999px',
+    },
     borderWidth: {
       default: '1px',
       '0': '0',
@@ -240,56 +186,135 @@ module.exports = {
       '4': '4px',
       '8': '8px',
     },
-    borderColor: theme => ({
-      ...theme('colors'),
-      default: theme('colors.gray.300', 'currentColor'),
-    }),
-    borderRadius: {
-      none: '0',
-      sm: '.125rem',
-      default: '.25rem',
-      md: '.375rem',
-      lg: '.5rem',
-      full: '9999px',
+    boxShadow: {
+      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 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',
     },
+    container: {},
     cursor: {
       auto: 'auto',
       default: 'default',
       pointer: 'pointer',
       wait: 'wait',
+      text: 'text',
       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',
-    }),
+    fill: {
+      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',
+    },
+    fontFamily: {
+      sans: [
+        'Lato',
+        '-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: '0.75rem',
+      sm: '0.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',
+    },
     height: theme => ({
       auto: 'auto',
       ...theme('spacing'),
       full: '100%',
       screen: '100vh',
-      '200': '50rem'
     }),
-    minWidth: {
+    inset: {
       '0': '0',
-      full: '100%',
+      auto: 'auto',
     },
-    minHeight: {
-      '0': '0',
+    letterSpacing: {
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    maxHeight: {
       full: '100%',
       screen: '100vh',
     },
@@ -306,16 +331,15 @@ module.exports = {
       '6xl': '72rem',
       full: '100%',
     },
-    maxHeight: {
+    minHeight: {
+      '0': '0',
       full: '100%',
       screen: '100vh',
     },
-    padding: theme => theme('spacing'),
-    margin: theme => ({
-      auto: 'auto',
-      ...theme('spacing')
-    }),
-    negativeMargin: theme => theme('spacing'),
+    minWidth: {
+      '0': '0',
+      full: '100%',
+    },
     objectPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -327,90 +351,113 @@ module.exports = {
       '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',
+      '25': '0.25',
+      '50': '0.5',
+      '75': '0.75',
       '100': '1',
     },
-    fill: {
-      current: 'currentColor',
+    order: {
+      first: '-9999',
+      last: '9999',
+      none: '0',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
     },
+    padding: theme => theme('spacing'),
+    placeholderColor: theme => theme('colors'),
     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,
+    textColor: theme => theme('colors'),
+    width: theme => ({
       auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      screen: '100vw',
+    }),
+    zIndex: {
+      auto: 'auto',
+      '0': '0',
+      '10': '10',
+      '20': '20',
+      '30': '30',
+      '40': '40',
+      '50': '50',
     },
-    container: {}
   },
   variants: {
+    accessibility: ['responsive', 'focus'],
+    alignContent: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
     backgroundColor: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
-    borderCollapse: [],
+    borderCollapse: ['responsive'],
     borderColor: ['responsive', 'hover', 'focus'],
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
     borderWidth: ['responsive'],
+    boxShadow: ['responsive', 'hover', 'focus'],
     cursor: ['responsive'],
     display: ['responsive'],
-    flexDirection: ['responsive'],
-    flexWrap: ['responsive'],
-    alignItems: ['responsive'],
-    alignSelf: ['responsive'],
-    justifyContent: ['responsive'],
-    alignContent: ['responsive'],
+    fill: ['responsive'],
     flex: ['responsive'],
+    flexDirection: ['responsive'],
     flexGrow: ['responsive'],
     flexShrink: ['responsive'],
+    flexWrap: ['responsive'],
     float: ['responsive'],
     fontFamily: ['responsive'],
+    fontSize: ['responsive'],
+    fontSmoothing: ['responsive'],
+    fontStyle: ['responsive'],
     fontWeight: ['responsive', 'hover', 'focus'],
     height: ['responsive'],
+    inset: ['responsive'],
+    justifyContent: ['responsive'],
+    letterSpacing: ['responsive'],
     lineHeight: ['responsive'],
     listStylePosition: ['responsive'],
     listStyleType: ['responsive'],
@@ -419,35 +466,29 @@ module.exports = {
     maxWidth: ['responsive'],
     minHeight: ['responsive'],
     minWidth: ['responsive'],
-    negativeMargin: ['responsive'],
     objectFit: ['responsive'],
     objectPosition: ['responsive'],
-    opacity: ['responsive'],
-    outline: ['focus'],
+    opacity: ['responsive', 'hover', 'focus'],
+    order: ['responsive'],
+    outline: ['responsive', 'focus'],
     overflow: ['responsive'],
     padding: ['responsive'],
+    placeholderColor: ['responsive', 'focus'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
-    inset: ['responsive'],
     resize: ['responsive'],
-    boxShadow: ['responsive', 'hover', 'focus'],
-    fill: [],
-    stroke: [],
+    stroke: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
     textColor: ['responsive', 'hover', 'focus'],
-    fontSize: ['responsive'],
-    fontStyle: ['responsive'],
-    textTransform: ['responsive'],
     textDecoration: ['responsive', 'hover', 'focus'],
-    fontSmoothing: ['responsive'],
-    letterSpacing: ['responsive'],
+    textTransform: ['responsive'],
     userSelect: ['responsive'],
     verticalAlign: ['responsive'],
     visibility: ['responsive'],
     whitespace: ['responsive'],
-    wordBreak: ['responsive'],
     width: ['responsive'],
+    wordBreak: ['responsive'],
     zIndex: ['responsive'],
   },
   corePlugins: {},