112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<template>
|
|
<img alt="" class="bg-img" src="">
|
|
|
|
<div class="wrapper">
|
|
<div class="container-lg text-center">
|
|
<h3>Recent matches</h3>
|
|
<MatchesTable v-if="data.matches" :key="data.matches" :explore="true" :matches="data.matches"/>
|
|
|
|
<div class="load-more text-center">
|
|
<button :key="scrollToPos(store.state.scroll_state)" class="btn border-2 btn-outline-info"
|
|
@click="setMoreMatches">Load More
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {onBeforeUnmount, onMounted, reactive} from "vue";
|
|
import {GetMatches, LoadImage, LoadMoreMatchesExplore, MatchNotParsedTime, scrollToPos} from "@/utils";
|
|
import MatchesTable from "@/components/MatchesTable";
|
|
import {useStore} from "vuex";
|
|
import router from "@/router";
|
|
|
|
export default {
|
|
name: 'Explore',
|
|
components: {MatchesTable},
|
|
// TODO: Events / Lans etc. +
|
|
setup() {
|
|
document.title = "Matches | csgoWTF"
|
|
|
|
const store = useStore()
|
|
|
|
const data = reactive({
|
|
matches: []
|
|
})
|
|
|
|
const setMoreMatches = async () => {
|
|
const res = await LoadMoreMatchesExplore(data.matches[data.matches.length - 1].date)
|
|
|
|
res.forEach(e => data.matches.push(e))
|
|
|
|
scrollToPos(window.scrollY)
|
|
|
|
console.log(data.matches)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
data.matches = await GetMatches()
|
|
|
|
if (data.matches[0].map) {
|
|
await LoadImage(data.matches[0].map)
|
|
} else if (!data.matches[0].map && MatchNotParsedTime(data.matches[0].date) && data.matches[1].map) {
|
|
await LoadImage(data.matches[1].map)
|
|
} else {
|
|
await LoadImage('random')
|
|
}
|
|
|
|
scrollToPos(store.state.scroll_state)
|
|
|
|
console.log(data.matches)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
store.commit('changeScrollState', window.scrollY)
|
|
|
|
router.beforeEach((to, from, next) => {
|
|
if (!to.fullPath.match('/match/') && !from.fullPath.match('/match/')) {
|
|
store.commit('changeScrollState', 0)
|
|
}
|
|
next()
|
|
})
|
|
})
|
|
|
|
return {data, setMoreMatches, store, scrollToPos}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg-img {
|
|
z-index: -1;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wrapper {
|
|
background: rgba(0, 0, 0, .7);
|
|
}
|
|
|
|
.container-lg {
|
|
padding: 2rem;
|
|
|
|
h3 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.load-more {
|
|
padding: 1rem 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.container-lg {
|
|
padding: 2rem 1rem;
|
|
}
|
|
}
|
|
</style>
|