LeagueStats/client/src/components/Match.vue

<template>
  <li :class="matchResultClass" class="match mt-4 rounded-lg text-white text-sm md:text-base">
    <div class="match-container">
      <div class="flex flex-wrap px-5 py-3">
        <div class="first w-1/3 text-left">
          <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="h-6 flex items-end text-sm text-white font-extrabold leading-none"
            >{{ data.gamemode }}</div>
          </div>
        </div>

        <div class="second w-1/3 py-6 flex items-center">
          <div class="items flex flex-wrap">
            <div
              v-for="(item, index) in data.items"
              :key="index"
              :style="{background: item}"
              class="ml-1 w-8 h-8 rounded-md bg-blue-1000"
            ></div>
          </div>

          <div class="ml-12 leading-none">
            <div class="flex items-center">
              <img src="@/assets/img/icons/Creep.svg" alt="Minions" />
              <div class="ml-1 text-teal-300 text-lg font-bold">
                {{ data.minions }}
                <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>
          </div>
        </div>
      </div>
    </div>
  </li>
</template>

<script>


export default {
  props: {
    data: {
      type: Object,
      required: true
    },
  },

  computed: {
    matchResultClass() {
      return {
        'win': this.data.result === 'Win',
        'loss': this.data.result === 'Fail',
        'remake': this.data.result === 'Remake',
      }
    }
  }
}
</script>


<style scoped>
.loss {
  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%);
}

.win {
  background-image: linear-gradient(
      89.45deg,
      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%);
}

.remake {
  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%);
}

.crop-champion {
  background-size: 74px;
  background-position: center;
}

.items {
  width: 7rem;
  height: 4.5rem;
}

.gold {
  color: #f3a05a;
}

.damage {
  color: #e25656;
}

.kp {
  color: #b78787;
}
</style>