CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

some minor updates

Browse Source
This commit is contained in:
vikingowl
2022-01-31 01:24:54 +01:00
parent fc10d9de09
commit 6df2b53708
4 changed files with 173 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.vue
View File

@@ -3,7 +3,7 @@
<Nav/> <Nav/>
</header> </header>
<main> <main>
<div class="spacer"></div> <div :style="{height: offset + 'px'}"/>
<router-view name="main"/> <router-view name="main"/>
</main> </main>
<footer class="mt-auto"> <footer class="mt-auto">
@@ -16,9 +16,27 @@
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import CookieConsentBtn from "@/components/CookieConsentBtn"; import CookieConsentBtn from "@/components/CookieConsentBtn";
import {onMounted, ref} from "vue";
export default { export default {
components: {Footer, Nav, CookieConsentBtn}, components: {Footer, Nav, CookieConsentBtn},
setup() {
const offset = ref(0)
const setOffset = () => {
return document.getElementsByTagName('nav')[0].clientHeight
}
window.onresize = () => {
offset.value = setOffset()
}
onMounted(() => {
offset.value = setOffset()
})
return {offset}
}
} }
</script> </script>
@@ -28,10 +46,6 @@ export default {
src: local("Obitron"), url("assets/fonts/Orbitron-VariableFont_wght.ttf") format("truetype"); src: local("Obitron"), url("assets/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
} }
.spacer {
height: 70px;
}
#cookie-btn { #cookie-btn {
position: fixed; position: fixed;
bottom: 30px; bottom: 30px;

9
src/components/EqValueGraph.vue
View File

@@ -261,13 +261,8 @@ export default {
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.economy { h3 {
justify-content: flex-start; margin-left: 2rem;
align-items: flex-start;
h3 {
margin-left: 2rem;
}
} }
} }

11
src/utils/ApiRequests.js
View File

@@ -2,14 +2,13 @@ import axios from "axios";
import {errorHandling} from "@/utils/Utils"; import {errorHandling} from "@/utils/Utils";
const API_URL = process.env.VUE_APP_API_URL const API_URL = process.env.VUE_APP_API_URL
const TIMEOUT = 10_000 // const TIMEOUT = 10_000
export const GetMatches = async () => { export const GetMatches = async () => {
try { try {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/matches`, url: `${API_URL}/matches`,
timeout: TIMEOUT
}) })
if (res.status === 200) if (res.status === 200)
@@ -24,7 +23,6 @@ export const GetUser = async (id) => {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/player/${id}`, url: `${API_URL}/player/${id}`,
timeout: TIMEOUT
}) })
if (res.status === 200) if (res.status === 200)
@@ -62,7 +60,6 @@ export const TrackMe = async (id64, authcode, sharecode = '') => {
method: 'post', method: 'post',
url: `${API_URL}/player/${id64}/track`, url: `${API_URL}/player/${id64}/track`,
data: `authcode=${authcode}&sharecode=${sharecode}`, data: `authcode=${authcode}&sharecode=${sharecode}`,
timeout: TIMEOUT
}) })
if (res.status === 202) { if (res.status === 202) {
@@ -88,7 +85,6 @@ export const GetPlayerValue = async (match_id) => {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/match/${match_id}/rounds`, url: `${API_URL}/match/${match_id}/rounds`,
timeout: TIMEOUT
}) })
if (res.status === 200) { if (res.status === 200) {
@@ -104,7 +100,6 @@ export const GetMatchDetails = async (match_id) => {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/match/${match_id}`, url: `${API_URL}/match/${match_id}`,
timeout: TIMEOUT
}) })
if (res.status === 200) { if (res.status === 200) {
@@ -120,7 +115,6 @@ export const LoadMoreMatches = async (player_id, date) => {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/player/${player_id}/next/${date}`, url: `${API_URL}/player/${player_id}/next/${date}`,
timeout: TIMEOUT
}) })
if (res.status === 200) { if (res.status === 200) {
@@ -136,7 +130,6 @@ export const GetPlayerMeta = async (player_id, limit = 4) => {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/player/${player_id}/meta/${limit}`, url: `${API_URL}/player/${player_id}/meta/${limit}`,
timeout: TIMEOUT
}) })
if (res.status === 200) { if (res.status === 200) {
@@ -152,7 +145,6 @@ export const GetWeaponDmg = async (match_id) => {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/match/${match_id}/weapons`, url: `${API_URL}/match/${match_id}/weapons`,
timeout: TIMEOUT
}) })
if (res.status === 200) { if (res.status === 200) {
@@ -168,7 +160,6 @@ export const LoadMoreMatchesExplore = async (date) => {
const res = await axios({ const res = await axios({
method: 'get', method: 'get',
url: `${API_URL}/matches/next/${date}`, url: `${API_URL}/matches/next/${date}`,
timeout: TIMEOUT
}) })
if (res.status === 200) { if (res.status === 200) {

282
src/views/Match.vue
View File

@@ -1,146 +1,148 @@
<template> <template>
<img alt="" class="bg-img" src=""> <div class="overlay" :style="{minHeight: pHeight + 'px'}">
<img alt="" class="bg-img" src="">
<div class="match-wrapper"> <div class="match-wrapper">
<div class="head row m-auto text-center"> <div class="head row m-auto text-center">
<div class="map-score"> <div class="map-score">
<div class="score-team-1"> <div class="score-team-1">
<h1 :class="checkWin(1)">{{ data.score[0] }}</h1> <h1 :class="checkWin(1)">{{ data.score[0] }}</h1>
<div v-if="data.score[0]" class="team-1"> <div v-if="data.score[0]" class="team-1">
<img alt="CT logo" src="../assets/images/icons/ct_logo.svg"> <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
<img alt="T logo" src="../assets/images/icons/t_logo.svg"> <img alt="T logo" src="../assets/images/icons/t_logo.svg">
</div>
<div class="team-avg-rank">
<img v-if="data.matchDetails.parsed"
:alt="DisplayRank(Math.floor(data.team1Avg || 0))[1]"
:src="DisplayRank(Math.floor(data.team1Avg || 0))[0]"
:title="'Average Team-Rank: ' + DisplayRank(Math.floor(data.team1Avg || 0))[1]"
class="team-avg-rank-icon helpicon"/>
</div>
</div> </div>
<div class="team-avg-rank"> <div class="m-auto map">
<img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
:src="require('../assets/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
:title="FixMapName(data.matchDetails.map)" class="map-icon"
>
<img v-if="!data.matchDetails.map" :src="require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
alt="Map icon"
class="map-icon" title="Map unknown"
>
</div>
<div class="score-team-2">
<h1 :class="checkWin(2)">{{ data.score[1] }}</h1>
<div v-if="data.score[1]" class="team-2">
<img alt="T logo" src="../assets/images/icons/t_logo.svg">
<img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
</div>
<div class="team-avg-rank">
<img v-if="data.matchDetails.parsed"
:alt="DisplayRank(Math.floor(data.team2Avg || 0))[1]"
:src="DisplayRank(Math.floor(data.team2Avg || 0))[0]"
:title="'Average Team-Rank: ' + DisplayRank(Math.floor(data.team2Avg || 0))[1]"
class="team-avg-rank-icon helpicon"/>
</div>
</div>
</div>
<div class="text">
<p class="text-center text-muted fs-6 mb-1">
Match lasted for
<span class="text-white">{{ FormatDuration(data.matchDetails.duration) }}</span>
</p>
<p class="text-center text-muted fs-6">
on
<span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
</p>
<div class="text-center fs-6">
<img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len helpicon"
src="../assets/images/icons/timer_short.svg" title="Short Match">
<img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
class="match-len helpicon"
src="../assets/images/icons/timer_long.svg" title="Long Match">
<span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
<img v-if="data.matchDetails.parsed" <img v-if="data.matchDetails.parsed"
:alt="DisplayRank(Math.floor(data.team1Avg || 0))[1]" :alt="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
:src="DisplayRank(Math.floor(data.team1Avg || 0))[0]" :src="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[0]"
:title="'Average Team-Rank: ' + DisplayRank(Math.floor(data.team1Avg || 0))[1]" :title="'Average Rank: ' + DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
class="team-avg-rank-icon helpicon"/> class="rank-icon helpicon"/>
</div>
</div>
<div class="m-auto map">
<img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
:src="require('../assets/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
:title="FixMapName(data.matchDetails.map)" class="map-icon"
>
<img v-if="!data.matchDetails.map" :src="require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
alt="Map icon"
class="map-icon" title="Map unknown"
>
</div>
<div class="score-team-2">
<h1 :class="checkWin(2)">{{ data.score[1] }}</h1>
<div v-if="data.score[1]" class="team-2">
<img alt="T logo" src="../assets/images/icons/t_logo.svg">
<img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
</div>
<div class="team-avg-rank">
<img v-if="data.matchDetails.parsed"
:alt="DisplayRank(Math.floor(data.team2Avg || 0))[1]"
:src="DisplayRank(Math.floor(data.team2Avg || 0))[0]"
:title="'Average Team-Rank: ' + DisplayRank(Math.floor(data.team2Avg || 0))[1]"
class="team-avg-rank-icon helpicon"/>
</div>
</div>
</div>
<div class="text">
<p class="text-center text-muted fs-6 mb-1">
Match lasted for
<span class="text-white">{{ FormatDuration(data.matchDetails.duration) }}</span>
</p>
<p class="text-center text-muted fs-6">
on
<span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
</p>
<div class="text-center fs-6">
<img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len helpicon"
src="../assets/images/icons/timer_short.svg" title="Short Match">
<img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
class="match-len helpicon"
src="../assets/images/icons/timer_long.svg" title="Long Match">
<span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span> <span v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="text-muted px-2">—</span>
<img v-if="data.matchDetails.parsed" <div v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="btn-group">
:alt="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]" <i id="downloadMenuBtn" aria-hidden="true" class="fa fa-ellipsis-h mx-2"
:src="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[0]" title="Click for more" @click.prevent="handleDownloadMenu"></i>
:title="'Average Rank: ' + DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]" <div id="downloadGroup" class="group">
class="rank-icon helpicon"/> <a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" target="_blank"
title="Download Demo">
<span v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="text-muted px-2">—</span> <i id="downloadDemo" aria-hidden="true" class="fa fa-download mx-2"></i>
</a>
<div v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="btn-group"> <a v-if="data.matchDetails.share_code"
<i id="downloadMenuBtn" aria-hidden="true" class="fa fa-ellipsis-h mx-2" :href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code"
title="Click for more" @click.prevent="handleDownloadMenu"></i> target="_blank" title="Watch Demo">
<div id="downloadGroup" class="group"> <i id="replayDemo" aria-hidden="true" class="fa fa-television mx-2"></i>
<a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" target="_blank" </a>
title="Download Demo"> </div>
<i id="downloadDemo" aria-hidden="true" class="fa fa-download mx-2"></i>
</a>
<a v-if="data.matchDetails.share_code"
:href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code"
target="_blank" title="Watch Demo">
<i id="replayDemo" aria-hidden="true" class="fa fa-television mx-2"></i>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="nav navbar-dark navbar-expand-lg"> <div class="nav navbar-dark navbar-expand-lg">
<button aria-controls="matchNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" <button aria-controls="matchNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
data-bs-target="#matchNav" data-bs-toggle="collapse" type="button"> data-bs-target="#matchNav" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div id="matchNav" class="collapse navbar-collapse justify-content-between"> <div id="matchNav" class="collapse navbar-collapse justify-content-between">
<ul class="list-unstyled d-flex m-auto"> <ul class="list-unstyled d-flex m-auto">
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''" <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item"> class="list-item nav-item">
<router-link :to="'/match/' + data.matchDetails.match_id + '/overview'" class="nav-link" <router-link :to="'/match/' + data.matchDetails.match_id + '/overview'" class="nav-link"
replace>Scoreboard replace>Scoreboard
</router-link> </router-link>
</li> </li>
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''" <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item"> class="list-item nav-item">
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed" <router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
:to="'/match/' + data.matchDetails.match_id + '/economy'" class="nav-link" :to="'/match/' + data.matchDetails.match_id + '/economy'" class="nav-link"
replace>Economy replace>Economy
</router-link> </router-link>
</li> </li>
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''" <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item"> class="list-item nav-item">
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed" <router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
:to="'/match/' + data.matchDetails.match_id + '/details'" class="nav-link" :to="'/match/' + data.matchDetails.match_id + '/details'" class="nav-link"
replace>Details replace>Details
</router-link> </router-link>
</li> </li>
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''" <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item"> class="list-item nav-item">
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed" <router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
:to="'/match/' + data.matchDetails.match_id + '/flashes'" class="nav-link" :to="'/match/' + data.matchDetails.match_id + '/flashes'" class="nav-link"
replace>Flashes replace>Flashes
</router-link> </router-link>
</li> </li>
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''" <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item"> class="list-item nav-item">
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed" <router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
:to="'/match/' + data.matchDetails.match_id + '/damage'" class="nav-link" :to="'/match/' + data.matchDetails.match_id + '/damage'" class="nav-link"
replace>Damage replace>Damage
</router-link> </router-link>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div>
<div id="scoreWrapper" class="scoreboard"> <div id="scoreWrapper" class="scoreboard">
<router-view v-if="data.score.length === 2 && data.stats" name="score"/> <router-view v-if="data.score.length === 2 && data.stats" name="score"/>
</div>
</div> </div>
</template> </template>
<script> <script>
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue"; import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch} from "vue";
import { import {
closeNav, closeNav,
CreatePlayersArray, CreatePlayersArray,
@@ -165,6 +167,7 @@ export default {
setup(props) { setup(props) {
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()
const pHeight = ref(0)
const matchIdPattern = /^\d{19}$/ const matchIdPattern = /^\d{19}$/
@@ -178,6 +181,16 @@ export default {
team2Avg: 0 team2Avg: 0
}) })
const getWindowHeight = () => {
const navHeight = document.getElementsByTagName('nav')[0].clientHeight
const footerHeight = document.getElementsByTagName('footer')[0].clientHeight
// 70 = nav-height | 108.5 = footer-height
return window.innerHeight - navHeight - footerHeight
}
pHeight.value = getWindowHeight()
// Functions // Functions
const GetMatch = async () => { const GetMatch = async () => {
if (matchIdPattern.test(props.match_id)) { if (matchIdPattern.test(props.match_id)) {
@@ -315,12 +328,16 @@ export default {
scoreWrapper.style.minHeight = height + 'px' scoreWrapper.style.minHeight = height + 'px'
}) })
window.onresize = () => {
pHeight.value = getWindowHeight()
}
document.addEventListener('click', () => { document.addEventListener('click', () => {
closeNav('matchNav') closeNav('matchNav')
}) })
return { return {
data, DisplayRank, FormatFullDate, FormatDuration, FixMapName, route, checkWin, handleDownloadMenu, getTeamAvgRank data, DisplayRank, FormatFullDate, FormatDuration, FixMapName, route, pHeight, checkWin, handleDownloadMenu, getTeamAvgRank
} }
} }
} }
@@ -339,10 +356,10 @@ export default {
.head { .head {
height: 230px; height: 230px;
background: linear-gradient(90deg, background: linear-gradient(90deg,
rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.95) 30%, rgba(0, 0, 0, 0.55) 30%,
rgba(0, 0, 0, 0.95) 70%, rgba(0, 0, 0, 0.55) 70%,
rgba(0, 0, 0, .7) 100% rgba(0, 0, 0, .3) 100%
); );
.map-score { .map-score {
@@ -488,8 +505,10 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
}
z-index: 1; .overlay {
z-index: 2;
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;
background: linear-gradient(90deg, background: linear-gradient(90deg,
@@ -524,6 +543,7 @@ export default {
height: 25px !important; height: 25px !important;
} }
} }
.team-2 { .team-2 {
left: -1.3rem !important; left: -1.3rem !important;
} }