feat: add the 10 participants of each match

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;
+}

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>

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="third w-1/3 py-1 flex items-center">
-          <div class="duration-date hidden lg:block">
+          <div>
-            <div class="duration">{{ data.time }}</div>
+            <div
-            <div class="date">{{ data.date }}</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(

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'
 }
 
 

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]
+    const champion = (({ id, name }) => ({ id, name }))(Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === player.championId)[1])
-
+    const role = getRoleName(player.timeline)
-    let role = player.timeline.lane
-    if(role === 'BOTTOM') {
-      if(player.timeline.role.includes('SUPPORT')) {
-        role = 'SUPPORT'
-      } else {
-        role = 'BOTTOM'
-      }
-    }
 
     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,
+      champion,
-      role: role,
+      role,
       primaryRune,
       secondaryRune,
       date: timeAgo,
-      time: time,
+      time,
-      kills: kills,
+      kills,
-      deaths: deaths,
+      deaths,
-      assists: assists,
+      assists,
       kda,
-      level: level,
+      level,
       damage,
       kp,
-      items: items,
+      items,
-      gold: gold,
+      gold,
-      minions: minions,
+      minions,
       firstSum: getSummonerLink(firstSum),
-      secondSum: getSummonerLink(secondSum)
+      secondSum: getSummonerLink(secondSum),
+      allyTeam,
+      enemyTeam
     })
   } // end loop matches
   console.log('matches infos just below')
@@ -142,7 +154,19 @@ function getItemLink(id) {
   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)
+}

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
 })

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 => ({
+    boxShadow: {
-      ...theme('colors'),
+      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-      default: theme('colors.gray.300', 'currentColor'),
+      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)',
-    borderRadius: {
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-      none: '0',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-      sm: '.125rem',
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      default: '.25rem',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
-      md: '.375rem',
+      none: 'none',
-      lg: '.5rem',
-      full: '9999px',
     },
+    container: {},
     cursor: {
       auto: 'auto',
       default: 'default',
       pointer: 'pointer',
       wait: 'wait',
+      text: 'text',
       move: 'move',
       'not-allowed': 'not-allowed',
     },
-    width: theme => ({
+    fill: {
-      auto: 'auto',
+      current: 'currentColor',
-      ...theme('spacing'),
+    },
-      '1/2': '50%',
+    flex: {
-      '1/3': '33.33333%',
+      '1': '1 1 0%',
-      '2/3': '66.66667%',
+      auto: '1 1 auto',
-      '1/4': '25%',
+      initial: '0 1 auto',
-      '3/4': '75%',
+      none: 'none',
-      '1/5': '20%',
+    },
-      '2/5': '40%',
+    flexGrow: {
-      '3/5': '60%',
+      '0': '0',
-      '4/5': '80%',
+      default: '1',
-      '1/6': '16.66667%',
+    },
-      '5/6': '83.33333%',
+    flexShrink: {
-      full: '100%',
+      '0': '0',
-      screen: '100vw',
+      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: {
+    letterSpacing: {
-      '0': '0',
+      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'),
+    minWidth: {
-    margin: theme => ({
+      '0': '0',
-      auto: 'auto',
+      full: '100%',
-      ...theme('spacing')
+    },
-    }),
-    negativeMargin: theme => theme('spacing'),
     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',
+      '25': '0.25',
-      '50': '.5',
+      '50': '0.5',
-      '75': '.75',
+      '75': '0.75',
       '100': '1',
     },
-    fill: {
+    order: {
-      current: 'currentColor',
+      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: {
+    textColor: theme => theme('colors'),
-      '1': '1 1 0%',
+    width: theme => ({
-      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',
+      ...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'],
+    fill: ['responsive'],
-    flexWrap: ['responsive'],
-    alignItems: ['responsive'],
-    alignSelf: ['responsive'],
-    justifyContent: ['responsive'],
-    alignContent: ['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'],
+    opacity: ['responsive', 'hover', 'focus'],
-    outline: ['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'],
+    stroke: ['responsive'],
-    fill: [],
-    stroke: [],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
     textColor: ['responsive', 'hover', 'focus'],
-    fontSize: ['responsive'],
-    fontStyle: ['responsive'],
-    textTransform: ['responsive'],
     textDecoration: ['responsive', 'hover', 'focus'],
-    fontSmoothing: ['responsive'],
+    textTransform: ['responsive'],
-    letterSpacing: ['responsive'],
     userSelect: ['responsive'],
     verticalAlign: ['responsive'],
     visibility: ['responsive'],
     whitespace: ['responsive'],
-    wordBreak: ['responsive'],
     width: ['responsive'],
+    wordBreak: ['responsive'],
     zIndex: ['responsive'],
   },
   corePlugins: {},