updated core-js
This commit is contained in:
278
src/views/HomeView.vue
Normal file
278
src/views/HomeView.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<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("/images/map_screenshots/default.png");
|
||||
}
|
||||
|
||||
.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: .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>
|
||||
Reference in New Issue
Block a user