csgowtf/src/views/Home.vue

<template>
  <div class="main-content content text-center">
    <div class="head pt-5 pb-5">
      <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
      <h3 class="mb-lg-5">Open source CSGO data platform</h3>
    </div>
    <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
      <div v-for="(player, id) in recentVisited" :key="player.steamid64" class="player-card">
        <div class="p-2" @click="GoToPlayer(player.vanity_url || player.steamid64)">
          <div class="col-md-4 m-auto">
            <img :alt="player.name" :src="player.avatar">
          </div>
          <div class="col-md-8 m-auto">
            <p>{{ player.name }}</p>
          </div>
        </div>
        <i class="delete fas fa-times" @click="removeRecentVisited(id)"></i>
      </div>
    </div>
    <hr v-if="recentVisited !== null" class="m-auto text-muted">
    <div class="body container m-auto row mt-5 mb-5 justify-content-center">
      <div class="col-sm-12 col-md-4 col-lg-3">
        <i class="fas fa-code-branch"></i>

        <h4 class="fw-light">Open Source</h4>
        <p class="fw-light">All project code is open source and available for contributors to improve and
          modify.</p>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-3">
        <i class="fas fa-chart-pie"></i>
        <h4 class="fw-light">In-Depth Data</h4>
        <p class="fw-light">Parsing replay files provides highly detailed match data.</p>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-3">
        <i class="fas fa-money-bill-wave-alt"></i>
        <h4 class="fw-light">Free of Charge</h4>
        <p class="fw-light">This service is free of charge. If you want to support us, just contact us.</p>
      </div>
    </div>
  </div>
</template>

<script>
import {GoToPlayer, SaveLastVisitedToLocalStorage, setTitle} from "../utils";
import {onBeforeMount, ref} from "vue";

export default {
  name: 'Home',
  setup() {
    setTitle('Home')

    const recentVisited = ref([])

    const loadRecentVisited = () => {
      recentVisited.value = JSON.parse(localStorage.getItem('recent-visited'))

      if (recentVisited.value !== null) {
        recentVisited.value.reverse()
        if (window.innerWidth < 768) {
          recentVisited.value = recentVisited.value.filter(i => recentVisited.value.indexOf(i) < 6)
        }
      }
    }

    const removeRecentVisited = (key) => {
      if (recentVisited.value !== null) {
        recentVisited.value.splice(key, 1)

        localStorage.clear()

        if (recentVisited.value !== []) {
          recentVisited.value.map(p => {
            SaveLastVisitedToLocalStorage(p)
          })
        }
      }

      loadRecentVisited()
    }

    onBeforeMount(() => loadRecentVisited())

    return {recentVisited, GoToPlayer, removeRecentVisited}
  }
}
</script>


<style lang="scss" scoped>
.fas {
  font-size: 5rem;
  padding-bottom: 1.5rem;
}

.main-content {
  .head {
    background-image: url("../assets/images/map_screenshots/default.jpg");
    background-image: url("../assets/images/map_screenshots/default.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    h1 {
      font-size: 5rem;

      &:before {
        content: 'CSGO';
        position: absolute;
        text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
      }
    }

    .text-up {
      font-family: "OpenSans", sans-serif;
      font-size: 40%;
      vertical-align: top;
      text-shadow: 10px -5px 1rem rgba(0, 0, 0, 0.5);
    }

    h3 {
      font-size: 2.5rem;
      font-weight: lighter;
    }
  }

  .recent-search {
    max-width: 1100px;
    margin: 0 auto;

    .player-card {
      width: 180px;
      height: 75px;
      background: var(--bs-blue);
      border-radius: 15% 5%;
      position: relative;

      .delete {
        display: none;
      }

      &:hover {
        background: var(--bs-primary);
        cursor: pointer;

        .delete {
          display: initial;
          position: absolute;
          font-size: 1rem;
          top: 5px;
          right: 5px;

          &:hover {
            color: maroon;
          }
        }
      }

      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }

      p {
        font-size: .9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .recent-search {
      .player-card {
        height: 60px;

        img {
          width: 30px;
          height: 30px;
        }

        .delete {
          display: initial;
          position: absolute;
          font-size: 1rem;
          top: 5px;
          right: 5px;
          color: maroon;
        }
      }
    }
  }

  .body, hr {
    p {
      font-size: .9rem;
    }

    svg {
      height: 80px;
      width: 80px;
      fill: currentColor;
    }
  }
}
</style>