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

updated webp-images, lazyloaded map images, added fontawesome icons

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-09 00:26:04 +02:00
parent 054c9e4301
commit 7d479c4395
110 changed files with 408 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/views/Match.vue
View File

@@ -1,47 +1,68 @@
<template>
<picture v-if="data.matchDetails.map" >
<source :srcset="require('../images/map_screenshots/' + data.matchDetails.map + '.webp')" class="bg-img">
<img :alt="data.matchDetails.map"
:src="require('../images/map_screenshots/' + data.matchDetails.map + '.jpg')"
class="bg-img">
</picture>
<img class="bg-img" src="" alt="">
<div class="">
<div v-if="data.matchDetails.map" class="head row m-auto text-center">
<div class="head row m-auto text-center">
<div class="m-auto map">
<img :alt="data.matchDetails.map"
<img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
:src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
:title="data.matchDetails.map" class="map-icon">
<img v-if="!data.matchDetails.map" alt="Map icon"
:src="require('../images/map_icons/map_icon_lobby_mapveto.svg')"
title="Map unknown" class="map-icon">
</div>
<p class="text-center fs-6">Average Rank: <img
<p class="text-center text-muted fs-6">
{{ FormatFullDate(data.matchDetails.date) }}
</p>
<p class="text-center fs-6">
<span class="text-muted">Match Length:</span> {{ data.matchDetails.rounds === 16 ? 'Short' : 'Long' }}
<svg class="bi bi-circle-fill mx-2" fill="currentColor" height="8" viewBox="0 0 16 16" width="8"
xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8"/>
</svg>
<span class="text-muted">Average Rank:</span> <img
:alt="DisplayRank(data.avgRank)[1]"
:src="DisplayRank(data.avgRank)[0]"
:title="DisplayRank(data.avgRank)[1]"
class="rank-icon"/></p>
class="rank-icon"/>
</p>
</div>
</div>
<div class="nav">
<ul class="list-unstyled d-flex m-auto">
<li class="list-item active">Scoreboard</li>
<li class="list-item">Rounds</li>
<li class="list-item">Weapons</li>
<li class="list-item">Duels</li>
<li class="list-item">Heatmaps</li>
</ul>
</div>
<div class="scoreboard">
<div v-if="data.score.length === 2 && data.stats">
<ScoreTeam :rounds="data.matchDetails.rounds" :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]"
:stats="data.stats" :team_id="1"/>
<ScoreTeam :rounds="data.matchDetails.rounds" :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]"
:stats="data.stats" :team_id="2"/>
<div class="nav navbar-dark navbar-expand-lg">
<button aria-controls="matchNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
data-bs-target="#matchNav" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div id="matchNav" class="collapse navbar-collapse">
<ul class="list-unstyled d-flex m-auto">
<li class="list-item active">Scoreboard</li>
<li class="list-item">Flashes</li>
<li class="list-item">Grenades</li>
<li class="list-item">Damage</li>
</ul>
</div>
</div>
<div v-if="data.score.length === 2 && data.stats" class="scoreboard">
<div id="scoreboard">
<ScoreTeam
:rounds="data.matchDetails.max_rounds ? data.matchDetails.max_rounds : data.score[data.matchDetails.match_result - 1] === 16 ? 30 : data.score[data.matchDetails.match_result - 1] === 15 ? 30 : 16"
:rounds_played="data.score.reduce((a, b) => a + b)"
:score="data.score[0]"
:stats="data.stats" :team_id="1"/>
<ScoreTeam
:rounds="data.matchDetails.max_rounds ? data.matchDetails.max_rounds : data.score.reduce((a, b) => a + b) >= 16 ? 30 : 16"
:rounds_played="data.score.reduce((a, b) => a + b)"
:score="data.score[1]"
:stats="data.stats" :team_id="2"/>
</div>
</div>
</template>
<script>
import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
import axios from 'axios'
import {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils";
import {DisplayRank, GetHLTV_1, GoToPlayer, FormatFullDate, LoadImage} from "../utils";
const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
@@ -68,6 +89,9 @@ export default {
data.matchDetails = response.data
data.stats = response.data.stats
data.score = response.data.score
LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
console.log(response.data)
})
.catch((e) => {
@@ -102,7 +126,7 @@ export default {
})
return {
GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank
GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
}
}
}
@@ -111,11 +135,7 @@ export default {
<style lang="scss" scoped>
.bg-img {
z-index: -1;
//top: 0;
//left: 0;
position: fixed;
//max-width: 100%;
//height: auto;
display: block;
margin-left: auto;
margin-right: auto;
@@ -124,11 +144,12 @@ export default {
.head {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(15, 15, 15, 0.8) 30%,
rgba(15, 15, 15, 0.8) 70%,
rgba(0, 0, 0, 0) 100%
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.95) 30%,
rgba(0, 0, 0, 0.95) 70%,
rgba(0, 0, 0, .7) 100%
);
border-bottom: 1px solid rgba(255, 255, 255, .2);
.map img {
width: auto;
@@ -146,8 +167,8 @@ export default {
max-width: 100vw;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(15, 15, 15, 0.8) 30%,
rgba(15, 15, 15, 0.8) 70%,
rgba(15, 15, 15, 0.9) 25%,
rgba(15, 15, 15, 0.9) 75%,
rgba(0, 0, 0, 0) 100%
);