LeagueStats/client/src/components/Match.vue

<template>
  <li class="match bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'">
    <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>
      </div>

      <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://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="map">{{ data.map }}</div>
          <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"
          ></div>
        </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 hidden lg:block">
            <div class="duration">{{ data.time }}</div>
            <div class="date">{{ data.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </li>
</template>

<script>


export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  }
}
</script>


<style scoped>
.match {
  border-bottom: 1px solid #dae1e7;
  margin: 16px 0;
}

.match .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 16px 8px;
}

.match.win .match-container {
  border-left: 10px solid #48bb78;
}

.match.lose .match-container {
  border-left: 10px solid #f56565;
}

/* First col */
.match .first {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.champion-icon {
  width: 48px;
  height: 48px;
  display: block;
}

.match .summonerSpells {
  margin: 0 8px 0 0;
}

.spell-icon {
  width: 23px;
  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>