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.vanityUrl || player.steamId64)"
      >
        <div
          class="p-2"
          @click="GoToPlayer(player.vanityUrl || 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 setup lang="ts">
import {
  GoToPlayer,
  SaveLastVisitedToLocalStorage,
  setAppDivBackground,
  setBgImgDisplay,
  setTitle,
} from "@/utils";
import { onBeforeMount, ref } from "vue";
import { usePlayerDetailsStore } from "@/stores/playerDetails";

setTitle("Home");

const playerDetailsStore = usePlayerDetailsStore();
const recentVisited = ref([]);

const loadRecentVisited = () => {
  const localString = localStorage.getItem("recent-visited");
  if (typeof localString === "string")
    recentVisited.value = JSON.parse(localString);

  if (recentVisited.value !== []) {
    if (window.innerWidth < 768) {
      recentVisited.value = recentVisited.value.filter(
        (i) => recentVisited.value.indexOf(i) < 6
      );
    }
  }
};

const removeRecentVisited = (key: number) => {
  if (recentVisited.value !== []) {
    recentVisited.value.splice(key, 1);
    recentVisited.value.reverse();

    localStorage.clear();

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

  loadRecentVisited();
};

onBeforeMount(() => {
  loadRecentVisited();
  playerDetailsStore.$reset();

  setAppDivBackground("none", HTMLDivElement);
  setBgImgDisplay("none", HTMLImageElement);
});
</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("/images/map_screenshots/default.jpg");
  }

  .head {
    // display webp if possible
    background-image: url("/images/map_screenshots/default.webp");
    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: 0.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: 0.9rem;
    }

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