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

fixed #12

Browse Source
This commit is contained in:
vikingowl
2021-10-22 22:40:33 +02:00
parent 778ae98c7a
commit ec2617b9d6
1 changed files with 133 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/views/Match.vue
View File

@@ -3,33 +3,44 @@
<div class="">
<div class="head row m-auto text-center">
<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="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 class="map-score">
<div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-1">
<h1 :class="checkWin(1)">{{ data.score[0] }}</h1>
</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="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 v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-2">
<h1 :class="checkWin(2)">{{ data.score[1] }}</h1>
</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>
<p class="text-center fs-6">
<span class="text-muted"><i class="far fa-clock"></i></span>
{{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
<i class="fas fa-grip-lines-vertical"></i>
<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"/>
<i class="fas fa-grip-lines-vertical"></i>
<a :href="data.matchDetails.replay_url" class="text-white">Demo</a>
</p>
</div>
<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>
<p class="text-center fs-6">
<span class="text-muted"><i class="far fa-clock"></i></span> {{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
<i class="fas fa-grip-lines-vertical"></i>
<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"/>
<i class="fas fa-grip-lines-vertical"></i>
<a class="text-white" :href="data.matchDetails.replay_url">Demo</a>
</p>
</div>
</div>
<div class="nav navbar-dark navbar-expand-lg">
@@ -91,7 +102,16 @@
<script>
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
import axios from 'axios'
import {closeNav, DisplayRank, FixMapName, FormatFullDate, GetAvgRank, GoToLink, LoadImage, FormatDuration} from "../utils";
import {
closeNav,
DisplayRank,
FixMapName,
FormatDuration,
FormatFullDate,
GetAvgRank,
GoToLink,
LoadImage
} from "../utils";
import {useStore} from "vuex";
import {useRoute} from 'vue-router'
@@ -168,6 +188,25 @@ export default {
}
}
const checkWin = (team) => {
team -= 1
if (data.matchDetails.max_rounds === 16) {
if (data.score[team] === 9)
return 'text-success'
else if (data.score[team] === 8)
return 'text-warning'
else if (data.score[team] < 8)
return 'text-danger'
} else {
if (data.score[team] === 16)
return 'text-success'
else if (data.score[team] === 15)
return 'text-warning'
else if (data.score[team] < 15)
return 'text-danger'
}
}
// Watchers
watch(() => props.match_id, GetMatch)
@@ -189,7 +228,7 @@ export default {
})
return {
data, DisplayRank, FormatFullDate, FormatDuration
data, DisplayRank, FormatFullDate, FormatDuration, route, checkWin
}
}
}
@@ -213,33 +252,59 @@ export default {
rgba(0, 0, 0, .7) 100%
);
.map img {
width: auto;
height: 100px;
margin: 10px 0;
.map-score {
display: flex;
position: relative;
.map img {
width: auto;
height: 100px;
margin: 10px 0;
}
.score-team-1,
.score-team-2 {
position: absolute;
top: 5rem;
h1 {
font-size: 4rem;
}
}
.score-team-1 {
left: 25%;
}
.score-team-2 {
right: 25%;
}
}
.rank-icon {
width: 60px;
margin-right: 3px;
.text {
.rank-icon {
width: 60px;
margin-right: 3px;
}
.fas {
margin: 0 .5rem
}
a {
font-weight: 600;
text-decoration: none;
color: var(--bs-warning) !important;
transition: all .25s;
line-height: 1rem;
&:hover {
color: #b98d00 !important;
text-decoration: underline;
}
}
}
.fas {
margin: 0 .5rem
}
a {
font-weight: 600;
text-decoration: none;
color: var(--bs-warning) !important;
transition: all .25s;
line-height: 1rem;
&:hover {
color: #b98d00 !important;
text-decoration: underline;
}
}
}
.nav {
@@ -297,6 +362,23 @@ export default {
}
@media screen and (max-width: 991px) {
.score-team-1,
.score-team-2 {
top: 2rem !important;
h1 {
font-size: 3.5rem !important;
}
}
.score-team-1 {
left: 10% !important;
}
.score-team-2 {
right: 10% !important;
}
.nav {
button {
outline: 1px solid var(--bs-primary);