new feature "Explore Site"
This commit is contained in:
455
src/components/MatchesTable.vue
Normal file
455
src/components/MatchesTable.vue
Normal file
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<div v-if="data.matches" id="matches">
|
||||
<table class="table table-borderless">
|
||||
<thead class="border-bottom">
|
||||
<tr>
|
||||
<th class="text-center map" scope="col">Map</th>
|
||||
<th class="text-center rank" scope="col">Rank</th>
|
||||
<th class="text-center length" scope="col" title="Match Length">
|
||||
<img alt="Match length" class="match-len" src="../assets/images/icons/timer_both.svg">
|
||||
</th>
|
||||
<th class="text-center score" scope="col">Score</th>
|
||||
<th class="text-center kills" scope="col" v-if="!props.explore">K</th>
|
||||
<th class="text-center assists" scope="col" v-if="!props.explore">A</th>
|
||||
<th class="text-center deaths" scope="col" v-if="!props.explore">D</th>
|
||||
<th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio" v-if="!props.explore">+/-</th>
|
||||
<th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating" v-if="!props.explore">Rating</th>
|
||||
<th class="text-center duration" scope="col">Duration</th>
|
||||
<th class="date" scope="col">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="match in data.matches"
|
||||
:key="match.match_id"
|
||||
:class="(match.stats ? GetWinLoss(match.match_result, match.stats.team_id) : '') + (match.vac || match.game_ban ? ' ban' : '')"
|
||||
:title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
|
||||
class="match default"
|
||||
@click="GoToMatch(match.match_id)"
|
||||
>
|
||||
<td class="td-map text-center">
|
||||
<i v-if="match.parsed" class="fa fa-bar-chart parsed" style="cursor: help"
|
||||
title="Demo has been parsed for additional data"></i>
|
||||
<i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed"
|
||||
style="cursor: help"
|
||||
title="Match has not been parsed yet"></i>
|
||||
<img v-if="match.map"
|
||||
:alt="match.map ? match.map : 'Map not found'"
|
||||
:src="match.map !== '' ? require('../assets/images/map_icons/map_icon_' + match.map + '.svg') : require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
|
||||
:title="match.map"
|
||||
class="map-icon">
|
||||
<i v-else class="fa fa-question-circle-o map-not-found" title="Match not parsed"></i>
|
||||
</td>
|
||||
<td class="td-rank text-center">
|
||||
<img
|
||||
:alt="DisplayRank(match.stats.rank?.new)[1]"
|
||||
:class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
|
||||
:src="DisplayRank(match.stats.rank?.new)[0]"
|
||||
:title="DisplayRank(match.stats.rank?.new)[1]"
|
||||
class="rank-icon" v-if="!props.explore">
|
||||
<img
|
||||
:alt="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
|
||||
:src="DisplayRank(Math.floor(match.avg_rank || 0))[0]"
|
||||
:title="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
|
||||
class="rank-icon" v-if="props.explore">
|
||||
</td>
|
||||
<td class="td-length text-center">
|
||||
<img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
|
||||
class="match-len" src="../assets/images/icons/timer_long.svg">
|
||||
<img v-if="match.max_rounds === 16" alt="Match short" class="match-len"
|
||||
src="../assets/images/icons/timer_short.svg">
|
||||
</td>
|
||||
<td :class="match.stats ? match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger' : ''"
|
||||
class="td-score text-center fw-bold">
|
||||
{{ match.score[0] }} - {{ match.score[1] }}
|
||||
</td>
|
||||
<td class="td-kills text-center" v-if="match.stats">
|
||||
{{ match.stats.kills ? match.stats.kills : "0" }}
|
||||
</td>
|
||||
<td class="td-assists text-center" v-if="match.stats">
|
||||
{{ match.stats.assists ? match.stats.assists : "0" }}
|
||||
</td>
|
||||
<td class="td-deaths text-center" v-if="match.stats">
|
||||
{{ match.stats.deaths ? match.stats.deaths : "0" }}
|
||||
</td>
|
||||
<td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
|
||||
class="td-plus text-center" v-if="match.stats">
|
||||
{{
|
||||
(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
|
||||
}}
|
||||
</td>
|
||||
<td :class="GetHLTV_1(
|
||||
match.stats.kills,
|
||||
match.score[0] + match.score[1],
|
||||
match.stats.deaths,
|
||||
match.stats.multi_kills?.duo,
|
||||
match.stats.multi_kills?.triple,
|
||||
match.stats.multi_kills?.quad,
|
||||
match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
|
||||
class="td-hltv text-center fw-bold" v-if="match.stats">
|
||||
{{
|
||||
GetHLTV_1(
|
||||
match.stats.kills,
|
||||
match.score[0] + match.score[1],
|
||||
match.stats.deaths,
|
||||
match.stats.multi_kills?.duo,
|
||||
match.stats.multi_kills?.triple,
|
||||
match.stats.multi_kills?.quad,
|
||||
match.stats.multi_kills?.pent)
|
||||
}}
|
||||
</td>
|
||||
<td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
|
||||
{{ FormatDuration(match.duration) }}
|
||||
|
||||
</td>
|
||||
<td :title="FormatFullDate(match.date)" class="td-date">
|
||||
{{ FormatDate(match.date) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank} from "@/utils";
|
||||
import {onMounted, reactive, watch} from "vue";
|
||||
|
||||
export default {
|
||||
name: "MatchesTable",
|
||||
props: {
|
||||
matches: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
explore: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const data = reactive({
|
||||
matches: []
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
data.matches = props.matches
|
||||
})
|
||||
|
||||
watch(() => props.matches, () => {
|
||||
data.matches = props.matches
|
||||
})
|
||||
|
||||
return {props, data, FormatDate, FormatFullDate, FormatDuration, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
|
||||
tr {
|
||||
th {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
td {
|
||||
line-height: 60px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
th:last-child, td:last-child {
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
th[title] {
|
||||
text-decoration: underline dotted grey;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.map {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.match-len {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.td-map {
|
||||
position: relative;
|
||||
padding-left: 3rem;
|
||||
text-align: left !important;
|
||||
width: 50px;
|
||||
|
||||
.parsed {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
bottom: 23px;
|
||||
color: var(--bs-warning);
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.not-yet-parsed {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 25px;
|
||||
color: darkgrey;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.map-not-found {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 48px;
|
||||
font-size: 4.35rem;
|
||||
color: rgba(255, 193, 7, .86);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.td-rank {
|
||||
.uprank {
|
||||
box-shadow: 0 0 20px greenyellow;
|
||||
border: 1px solid greenyellow;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.downrank {
|
||||
box-shadow: 0 0 20px #ff2f2f;
|
||||
border: 1px solid #ff2f2f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: auto;
|
||||
|
||||
.rank-icon {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.td-score {
|
||||
font-size: 1.2rem;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.td-date, .date {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.match {
|
||||
$first: rgb(0, 0, 0);
|
||||
$last: rgb(0, 0, 0);
|
||||
$win: false;
|
||||
$loss: false;
|
||||
$draw: false;
|
||||
$ban: false;
|
||||
|
||||
&.default {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.win {
|
||||
$first: rgb(0, 255, 0);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.draw {
|
||||
$first: rgb(255, 255, 0);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.loss {
|
||||
$first: rgb(255, 0, 0);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.ban {
|
||||
$last: rgb(93, 3, 3);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom: 1px solid rgba(73, 73, 73, 0.73);
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.map {
|
||||
padding-left: 2.2rem !important;
|
||||
}
|
||||
|
||||
.td-map {
|
||||
position: relative;
|
||||
padding-left: 2.2rem !important;
|
||||
width: 35px !important;
|
||||
|
||||
.parsed {
|
||||
position: absolute;
|
||||
left: .3rem !important;
|
||||
}
|
||||
|
||||
.not-yet-parsed {
|
||||
position: absolute;
|
||||
left: .3rem !important;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.td-rank img {
|
||||
width: 50px !important;
|
||||
height: auto;
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.td-score {
|
||||
font-size: 1rem !important;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.td-date {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
|
||||
.td-kills, .td-deaths, .td-assists, .td-plus, .td-duration, .td-hltv, .td-length {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.avatar {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
.trackme-btn {
|
||||
top: 25px;
|
||||
}
|
||||
.map, .td-map {
|
||||
padding-left: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.td-plus, .kdiff {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,8 +14,8 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/explore" @click="closeNav('mainNav')">
|
||||
Explore
|
||||
<router-link class="nav-link" to="/matches" @click="closeNav('mainNav')">
|
||||
Matches
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -17,7 +17,7 @@ const routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/explore',
|
||||
path: '/matches',
|
||||
name: 'Explore',
|
||||
components: {
|
||||
main: lazyLoadView('Explore')
|
||||
|
||||
@@ -2,6 +2,17 @@ import axios from "axios";
|
||||
|
||||
const API_URL = process.env.VUE_APP_API_URL
|
||||
|
||||
export const GetMatches = async () => {
|
||||
try {
|
||||
const res = await axios.get(`${API_URL}/matches`)
|
||||
|
||||
if (res.status === 200)
|
||||
return res.data
|
||||
} catch (err) {
|
||||
// TODO: Error handling
|
||||
console.log(err.response.status, err.response.statusText)
|
||||
}
|
||||
}
|
||||
|
||||
export const GetUser = async (id) => {
|
||||
try {
|
||||
|
||||
@@ -67,20 +67,6 @@ export const constructAvatarUrl = (hash, size) => {
|
||||
}
|
||||
}
|
||||
|
||||
export const GetAvgRank = (stats) => {
|
||||
let count = 0
|
||||
let fullRank = 0
|
||||
|
||||
stats.map(player => {
|
||||
if (player.rank?.old) {
|
||||
fullRank += player.rank?.old
|
||||
count += 1
|
||||
}
|
||||
})
|
||||
|
||||
return count === 0 ? 0 : Math.floor(fullRank / count)
|
||||
}
|
||||
|
||||
export const sortObjectValue = (obj, direction = 'asc') => {
|
||||
const sortable = []
|
||||
for (let key in obj) {
|
||||
|
||||
@@ -3,13 +3,12 @@ import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
|
||||
import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
|
||||
import {GetHLTV_1} from "./HLTV";
|
||||
import {DisplayRank, LoadImage} from "./Display";
|
||||
import {GetMatchDetails, GetPlayerMeta, GetPlayerValue, GetUser, LoadMoreMatches, TrackMe, GetWeaponDmg} from "./ApiRequests";
|
||||
import {GetMatchDetails, GetPlayerMeta, GetPlayerValue, GetUser, LoadMoreMatches, TrackMe, GetWeaponDmg, GetMatches} from "./ApiRequests";
|
||||
import {
|
||||
checkStatEmpty,
|
||||
closeNav,
|
||||
constructAvatarUrl,
|
||||
FixMapName,
|
||||
GetAvgRank,
|
||||
getPlayerArr,
|
||||
GetWinLoss,
|
||||
setTitle,
|
||||
@@ -44,10 +43,10 @@ export {
|
||||
checkStatEmpty,
|
||||
getPlayerArr,
|
||||
constructAvatarUrl,
|
||||
GetAvgRank,
|
||||
FixMapName,
|
||||
closeNav,
|
||||
sortObjectValue,
|
||||
GetWeaponDmg,
|
||||
CreatePlayersArray
|
||||
CreatePlayersArray,
|
||||
GetMatches
|
||||
}
|
||||
|
||||
@@ -1,21 +1,73 @@
|
||||
<template>
|
||||
<div class="container text-center">
|
||||
<h1>This site will be available soon</h1>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {onMounted, reactive} from "vue";
|
||||
import {GetMatches, LoadImage, MatchNotParsedTime} from "@/utils";
|
||||
import MatchesTable from "@/components/MatchesTable";
|
||||
|
||||
export default {
|
||||
name: 'Explore',
|
||||
components: {MatchesTable},
|
||||
// TODO: Events / Lans etc. +
|
||||
setup() {
|
||||
document.title = "Explore | csgoWTF"
|
||||
document.title = "Matches | csgoWTF"
|
||||
const data = reactive({
|
||||
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')
|
||||
}
|
||||
|
||||
console.log(data.matches)
|
||||
})
|
||||
|
||||
return {data}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
margin: 200px auto;
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.container-lg {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -48,9 +48,9 @@
|
||||
<span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
|
||||
|
||||
<img v-if="data.matchDetails.parsed"
|
||||
:alt="DisplayRank(data.avgRank)[1]"
|
||||
:src="DisplayRank(data.avgRank)[0]"
|
||||
:title="'Average Rank: ' + DisplayRank(data.avgRank)[1]"
|
||||
:alt="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
|
||||
:src="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[0]"
|
||||
:title="'Average Rank: ' + DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
|
||||
class="rank-icon"/>
|
||||
|
||||
<span v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="text-muted px-2">—</span>
|
||||
@@ -63,7 +63,8 @@
|
||||
<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" title="Watch Demo">
|
||||
:href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code"
|
||||
title="Watch Demo">
|
||||
<i id="replayDemo" aria-hidden="true" class="fa fa-television mx-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -130,7 +131,6 @@ import {
|
||||
FixMapName,
|
||||
FormatDuration,
|
||||
FormatFullDate,
|
||||
GetAvgRank,
|
||||
GetMatchDetails,
|
||||
GoToLink,
|
||||
LoadImage
|
||||
@@ -154,7 +154,6 @@ export default {
|
||||
matchDetails: {},
|
||||
stats: [],
|
||||
score: [0],
|
||||
avgRank: 0,
|
||||
})
|
||||
|
||||
// Functions
|
||||
@@ -182,7 +181,6 @@ export default {
|
||||
type: 'changePlayesArr',
|
||||
data: CreatePlayersArray(data.stats)
|
||||
})
|
||||
data.avgRank = GetAvgRank(data.stats)
|
||||
|
||||
console.log(data.matchDetails)
|
||||
} else {
|
||||
|
||||
@@ -117,109 +117,12 @@
|
||||
</div>
|
||||
<div class="match-container d-flex">
|
||||
<div class="matches">
|
||||
<table v-if="store.state.playerDetails.matches" class="table table-borderless">
|
||||
<thead class="border-bottom">
|
||||
<tr>
|
||||
<th class="text-center map" scope="col">Map</th>
|
||||
<th class="text-center rank" scope="col">Rank</th>
|
||||
<th class="text-center length" scope="col" title="Match Length">
|
||||
<img alt="Match length" class="match-len" src="../assets/images/icons/timer_both.svg">
|
||||
</th>
|
||||
<th class="text-center score" scope="col">Score</th>
|
||||
<th class="text-center kills" scope="col">K</th>
|
||||
<th class="text-center assists" scope="col">A</th>
|
||||
<th class="text-center deaths" scope="col">D</th>
|
||||
<th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
|
||||
<th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
|
||||
<th class="text-center duration" scope="col">Duration</th>
|
||||
<th class="date" scope="col">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="match in data.matches"
|
||||
:key="match.match_id"
|
||||
:class="GetWinLoss(match.match_result, match.stats.team_id) + (match.vac || match.game_ban ? ' ban' : '')"
|
||||
:title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
|
||||
class="match"
|
||||
@click="GoToMatch(match.match_id)"
|
||||
>
|
||||
<td class="td-map text-center">
|
||||
<i v-if="match.parsed" class="fa fa-bar-chart parsed" style="cursor: help"
|
||||
title="Demo has been parsed for additional data"></i>
|
||||
<i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed" style="cursor: help"
|
||||
title="Match has not been parsed yet"></i>
|
||||
<img v-if="match.map"
|
||||
:alt="match.map ? match.map : 'Map not found'"
|
||||
:src="match.map !== '' ? require('../assets/images/map_icons/map_icon_' + match.map + '.svg') : require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
|
||||
:title="match.map"
|
||||
class="map-icon">
|
||||
<i v-else title="Match not parsed" class="fa fa-question-circle-o map-not-found"></i>
|
||||
</td>
|
||||
<td class="td-rank text-center">
|
||||
<img
|
||||
:alt="DisplayRank(match.stats.rank?.new)[1]"
|
||||
:class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
|
||||
:src="DisplayRank(match.stats.rank?.new)[0]"
|
||||
:title="DisplayRank(match.stats.rank?.new)[1]"
|
||||
class="rank-icon">
|
||||
</td>
|
||||
<td class="td-length text-center">
|
||||
<img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
|
||||
class="match-len" src="../assets/images/icons/timer_long.svg">
|
||||
<img v-if="match.max_rounds === 16" alt="Match short" class="match-len"
|
||||
src="../assets/images/icons/timer_short.svg">
|
||||
</td>
|
||||
<td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
|
||||
class="td-score text-center fw-bold">
|
||||
{{ match.score[0] }} - {{ match.score[1] }}
|
||||
</td>
|
||||
<td class="td-kills text-center">
|
||||
{{ match.stats.kills ? match.stats.kills : "0" }}
|
||||
</td>
|
||||
<td class="td-assists text-center">
|
||||
{{ match.stats.assists ? match.stats.assists : "0" }}
|
||||
</td>
|
||||
<td class="td-deaths text-center">
|
||||
{{ match.stats.deaths ? match.stats.deaths : "0" }}
|
||||
</td>
|
||||
<td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
|
||||
class="td-plus text-center">
|
||||
{{
|
||||
(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
|
||||
}}
|
||||
</td>
|
||||
<td :class="GetHLTV_1(
|
||||
match.stats.kills,
|
||||
match.score[0] + match.score[1],
|
||||
match.stats.deaths,
|
||||
match.stats.multi_kills?.duo,
|
||||
match.stats.multi_kills?.triple,
|
||||
match.stats.multi_kills?.quad,
|
||||
match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
|
||||
class="td-hltv text-center fw-bold">
|
||||
{{
|
||||
GetHLTV_1(
|
||||
match.stats.kills,
|
||||
match.score[0] + match.score[1],
|
||||
match.stats.deaths,
|
||||
match.stats.multi_kills?.duo,
|
||||
match.stats.multi_kills?.triple,
|
||||
match.stats.multi_kills?.quad,
|
||||
match.stats.multi_kills?.pent)
|
||||
}}
|
||||
</td>
|
||||
<td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
|
||||
{{ FormatDuration(match.duration) }}
|
||||
|
||||
</td>
|
||||
<td :title="FormatFullDate(match.date)" class="td-date">
|
||||
{{ FormatDate(match.date) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<MatchesTable v-if="store.state.playerDetails.matches" :matches="store.state.playerDetails.matches"/>
|
||||
<h5 v-else>No matches on record</h5>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="store.state.playerDetails.matches" class="side-info">
|
||||
<div v-if="data.playerMeta.most_mates" class="side-info-box most-played-with">
|
||||
<div class="heading">
|
||||
@@ -314,30 +217,26 @@ import {
|
||||
constructAvatarUrl,
|
||||
DisplayRank,
|
||||
FixMapName,
|
||||
FormatDate,
|
||||
FormatDuration,
|
||||
FormatFullDate,
|
||||
FormatFullDuration,
|
||||
FormatVacDate,
|
||||
GetHLTV_1,
|
||||
GetPlayerMeta,
|
||||
GetUser,
|
||||
GetWinLoss,
|
||||
GoToLink,
|
||||
GoToMatch,
|
||||
GoToPlayer,
|
||||
LoadImage,
|
||||
LoadMoreMatches,
|
||||
MatchNotParsedTime,
|
||||
SaveLastVisitedToLocalStorage,
|
||||
setTitle,
|
||||
sortObjectValue,
|
||||
TrackMe,
|
||||
MatchNotParsedTime
|
||||
TrackMe
|
||||
} from "../utils";
|
||||
import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
|
||||
import MatchesTable from "@/components/MatchesTable";
|
||||
|
||||
export default {
|
||||
name: 'Player',
|
||||
components: {MatchesTable},
|
||||
props: ['id'],
|
||||
setup(props) {
|
||||
// Variables
|
||||
@@ -562,12 +461,6 @@ export default {
|
||||
RefreshData,
|
||||
TrackMe,
|
||||
GetWinLoss,
|
||||
FormatDate,
|
||||
FormatFullDate,
|
||||
FormatDuration,
|
||||
FormatFullDuration,
|
||||
GoToMatch,
|
||||
GetHLTV_1,
|
||||
DisplayRank,
|
||||
constructAvatarUrl,
|
||||
FormatVacDate,
|
||||
@@ -806,225 +699,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
|
||||
tr {
|
||||
th {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
td {
|
||||
line-height: 60px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
th:last-child, td:last-child {
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
th[title] {
|
||||
text-decoration: underline dotted grey;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.map {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.match-len {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.td-map {
|
||||
position: relative;
|
||||
padding-left: 3rem;
|
||||
text-align: left !important;
|
||||
width: 50px;
|
||||
|
||||
.parsed {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
bottom: 23px;
|
||||
color: var(--bs-warning);
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.not-yet-parsed {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 25px;
|
||||
color: darkgrey;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.map-not-found {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 48px;
|
||||
font-size: 4.35rem;
|
||||
color: rgba(255, 193, 7, .86);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.td-rank {
|
||||
.uprank {
|
||||
box-shadow: 0 0 20px greenyellow;
|
||||
border: 1px solid greenyellow;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.downrank {
|
||||
box-shadow: 0 0 20px #ff2f2f;
|
||||
border: 1px solid #ff2f2f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: auto;
|
||||
|
||||
.rank-icon {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.td-score {
|
||||
font-size: 1.2rem;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.td-date, .date {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.match {
|
||||
$first: rgb(0, 0, 0);
|
||||
$last: rgb(0, 0, 0);
|
||||
$win: false;
|
||||
$loss: false;
|
||||
$draw: false;
|
||||
$ban: false;
|
||||
|
||||
&.win {
|
||||
$first: rgb(0, 255, 0);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.draw {
|
||||
$first: rgb(255, 255, 0);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.loss {
|
||||
$first: rgb(255, 0, 0);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.ban {
|
||||
$last: rgb(93, 3, 3);
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.2) 0%,
|
||||
rgba($first, 0.1) 15%,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
rgba(0, 0, 0, 0.4) 70%,
|
||||
rgba($last, 0.6) 80%,
|
||||
rgba($last, 0.6) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right,
|
||||
rgba($first, 0.3) 0%,
|
||||
rgba($first, 0.2) 15%,
|
||||
rgba(0, 0, 0, 0.5) 30%,
|
||||
rgba(0, 0, 0, 0.5) 70%,
|
||||
rgba($last, 0.7) 80%,
|
||||
rgba($last, 0.7) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom: 1px solid rgba(73, 73, 73, 0.73);
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.card {
|
||||
.avatar {
|
||||
@@ -1045,50 +719,6 @@ table {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
padding-left: 2.2rem !important;
|
||||
}
|
||||
|
||||
.td-map {
|
||||
position: relative;
|
||||
padding-left: 2.2rem !important;
|
||||
width: 35px !important;
|
||||
|
||||
.parsed {
|
||||
position: absolute;
|
||||
left: .3rem !important;
|
||||
}
|
||||
|
||||
.not-yet-parsed {
|
||||
position: absolute;
|
||||
left: .3rem !important;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.td-rank img {
|
||||
width: 50px !important;
|
||||
height: auto;
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.td-score {
|
||||
font-size: 1rem !important;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.td-date {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
|
||||
.td-kills, .td-deaths, .td-assists, .td-plus, .td-duration, .td-hltv, .td-length {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
@@ -1098,18 +728,5 @@ table {
|
||||
.side-info {
|
||||
display: none !important;
|
||||
}
|
||||
.avatar {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
.trackme-btn {
|
||||
top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.td-plus, .kdiff {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user