forked from CSGOWTF/csgowtf
upgrade from webpack to vite + typescript
This commit is contained in:
310
src/views/HomeView.vue
Normal file
310
src/views/HomeView.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<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 "/src/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("/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>
|
||||
Reference in New Issue
Block a user