csgowtf/src/views/HomeView.vue

<template>
  <div class="main-content content text-center">
    <div class="head pt-4 pb-4">
      <img alt="logo"
           class="logo mt-lg-5 mt-3 mb-3"
           src="/images/logo.svg">
      <h3 class="mb-lg-4">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" tabindex="0"
           @keyup.enter="GoToPlayer(player.vanity_url || player.steamid64)">
        <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 fa fa-times" tabindex="0" @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">
      <table class="table table-borderless">
        <thead>
        <tr>
          <th>
            <i class="fa fa-code-fork"/>
          </th>
          <th>
            <i class="fa fa-liberapay"/>
          </th>
          <th>
            <i class="fa fa-pie-chart"/>
          </th>
        </tr>
        </thead>
        <tbody>
        <tr class="align-middle">
          <td>
            <h4 class="fw-light">Open Source</h4>
          </td>
          <td>
            <a href="https://liberapay.com/CSGOWTF/donate" target="_blank">
              <img alt="Donate using Liberapay"
                   src="https://liberapay.com/assets/widgets/donate.svg"
                   style="height: 35px">
            </a>
          </td>
          <td>
            <h4 class="fw-light">In-Depth Data</h4>
          </td>
        </tr>
        <tr>
          <td>
            <p class="fw-light">Everything is open source and under GPL licence. Contributions welcome.</p>
          </td>
          <td>
            <p class="fw-light">We develop this site in our spare time. If you want to support us, donations are
              appreciated!</p>
          </td>
          <td>
            <p class="fw-light">Matches with parsed replay provide additional match data.</p>
          </td>
        </tr>
        <tr>
          <td/>
          <td>
            <img alt="liberapay patrons" src="https://img.shields.io/liberapay/patrons/CSGOWTF.svg"
                 style="height: 25px"/>
          </td>
          <td/>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

export default {
  name: 'HomeView',
  setup() {
    setTitle('Home')
    const store = useStore()

    const recentVisited = ref([])

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

      if (recentVisited.value !== null) {
        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)
        recentVisited.value.reverse()

        localStorage.clear()

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

      loadRecentVisited()
    }

    onBeforeMount(() => {
      loadRecentVisited()
      store.commit('resetPlayerDetails')

      document.getElementById('app').style.background = 'none'
      document.querySelector('.bg-img').style.display = 'none'
    })

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

<style lang="scss" scoped>
table {
  td {
    p {
      max-width: 40ch;
      margin: 0 auto;
    }
  }
}
.fa {
  font-size: 5rem;
  padding-bottom: 1.5rem;
}

.main-content {
  .head {
    // display jpg
    background-image: url("../../public/images/map_screenshots/default.png");
  }

  .head {
    // display webp if possible
    background-image: url("../../public/images/map_screenshots/default.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .logo {
      width: 300px;
    }

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

      &:focus {
        outline: none;
        background: var(--bs-warning) !important;
      }

      &:hover > .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: 576px) {
    .logo {
      width: 200px !important;
    }
  }

  @media screen and (max-width: 768px) {
    .head {
      .logo {
        width: 250px;
      }

      h3 {
        font-size: 2rem;
        padding: 0 2rem;
      }
    }
    .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 {
    p {
      font-size: .9rem;
    }

    .fas {
      font-size: 3rem;
    }
  }
}
</style>