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

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

View File

@@ -1,158 +1,162 @@
<template>
<div class="container">
<div class="card mb-3 bg-transparent border-0">
<div class="row g-0">
<div class="img-container col-md-2 pt-3">
<img
:src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
</div>
<div class="col-md-8">
<div class="card-body">
<h3 class="card-title"><a
:href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
class="text-decoration-none text-white"
target="_blank"
title="Open steam profile">{{
data.playerDetails.name
}}
<svg class="bi bi-link-45deg" fill="currentColor" height="16" viewBox="0 0 16 16"
width="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path
d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</a></h3>
<table class="table table-borderless text-center">
<tr>
<th class="wlt-win text-uppercase text-muted">Wins</th>
<th class="wlt-loss text-uppercase text-muted">Losses</th>
<th class="wlt-tie text-uppercase text-muted">Ties</th>
<th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
<th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
</tr>
<tr>
<td class="wlt-win">{{ data.match_stats.win }}</td>
<td class="wlt-loss">{{ data.match_stats.loss }}</td>
<td class="wlt-tie">{{ data.match_stats.tie }}</td>
<td class="wlt-win-rate">{{
(data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
}}%
</td>
<td class="wlt-tie-rate">{{
(data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
}}%
</td>
</tr>
</table>
<small v-if="data.playerDetails.tracked" class="card-text text-muted">
Currently tracked
</small>
<div v-else class="dropdown">
<button
id="login-dropdown"
aria-expanded="false"
class="btn border-2 btn-outline-info"
data-bs-toggle="dropdown"
type="button"
>
Track Me!
</button>
<div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
style="width: 320px">
<form class="px-4 py-3">
<!-- AuthCode input -->
<div class="form-outline mb-4">
<input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
placeholder="AuthCode*"
required type="text"/>
</div>
<img class="bg-img" src="" alt="">
<div class="wrapper">
<div class="container">
<div class="card mb-3 bg-transparent border-0">
<div class="row g-0">
<div class="img-container col-md-2 pt-3">
<img
:src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
</div>
<div class="col-md-8">
<div class="card-body">
<h3 class="card-title"><a
:href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
class="text-decoration-none text-white"
target="_blank"
title="Open steam profile">{{
data.playerDetails.name
}}
<i class="fas fa-link"></i>
</a></h3>
<table class="table table-borderless text-center">
<tr>
<th class="wlt-win text-uppercase text-muted">Wins</th>
<th class="wlt-loss text-uppercase text-muted">Losses</th>
<th class="wlt-tie text-uppercase text-muted">Ties</th>
<th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
<th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
</tr>
<tr>
<td class="wlt-win">{{ data.match_stats.win }}</td>
<td class="wlt-loss">{{ data.match_stats.loss }}</td>
<td class="wlt-tie">{{ data.match_stats.tie }}</td>
<td class="wlt-win-rate">{{
(data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
}}%
</td>
<td class="wlt-tie-rate">{{
(data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
}}%
</td>
</tr>
</table>
<small v-if="data.playerDetails.tracked" class="card-text text-muted">
Currently tracked
</small>
<div v-else class="dropdown">
<button
id="login-dropdown"
aria-expanded="false"
class="btn border-2 btn-outline-info"
data-bs-toggle="dropdown"
type="button"
>
Track Me!
</button>
<div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
style="width: 320px">
<form class="px-4 py-3">
<!-- AuthCode input -->
<div class="form-outline mb-4">
<input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
placeholder="AuthCode*"
required type="text"/>
</div>
<!-- ShareCode input -->
<div class="form-outline mb-2">
<input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
placeholder="ShareCode"
type="text"/>
</div>
<!-- ShareCode input -->
<div class="form-outline mb-2">
<input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
placeholder="ShareCode"
type="text"/>
</div>
<div class="form-outline mb-4">
<small>You can find your AuthCode and ShareCode <a
href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
target="_blank">here</a>.</small>
</div>
<div class="form-outline mb-4">
<small>You can find your AuthCode and ShareCode <a
href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
target="_blank">here</a>.</small>
</div>
<!-- Submit button -->
<button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
TrackMe
</button>
</form>
<!-- Submit button -->
<button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
TrackMe
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="matches m-auto">
<table v-if="data.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 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 adr" scope="col" style="cursor: help" title="Average damage per round">ADR</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[0].team_id)"
class="match"
@click="match.map !== '' ? GoToMatch(match.match_id) : ''">
<td class="td-map text-center">
<img :alt="match.map ? match.map : 'Map not found'"
:src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/icons/image.svg')"
:title="match.map"
class="map-icon">
</td>
<td class="td-rank text-center">
<img
:alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
:src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
:title="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
class="rank-icon">
</td>
<td :class="match.stats[0].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[0].kills ? match.stats[0].kills : "0" }}
</td>
<td class="td-assists text-center">
{{ match.stats[0].assists ? match.stats[0].assists : "0" }}
</td>
<td class="td-deaths text-center">
{{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
</td>
<td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
class="td-plus text-center">
{{
(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
}}
</td>
<td class="td-adr text-center">
{{
Math.floor((match.stats[0].extended.dmg.enemy ? match.stats[0].extended.dmg.enemy : 0) / (match.score[0] + match.score[1]))
}}
</td>
<td :class="GetHLTV_1(
<div class="matches m-auto">
<table v-if="data.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">
<i class="far fa-clock"></i>
</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 adr" scope="col" style="cursor: help" title="Average damage per round">ADR</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[0].team_id)"
class="match"
@click="GoToMatch(match.match_id)">
<td class="td-map text-center">
<img :alt="match.map ? match.map : 'Map not found'"
:src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/icons/image.svg')"
:title="match.map"
class="map-icon">
</td>
<td class="td-rank text-center">
<img
:alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
:src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
:title="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
class="rank-icon">
</td>
<td class="td-length text-center">
<i v-if="match.max_rounds === 30 || !match.max_rounds" class="fas fa-circle text-muted"
title="Long match"></i>
<i v-if="match.max_rounds === 16" class="far fa-circle text-muted" title="Short match"></i>
</td>
<td :class="match.stats[0].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[0].kills ? match.stats[0].kills : "0" }}
</td>
<td class="td-assists text-center">
{{ match.stats[0].assists ? match.stats[0].assists : "0" }}
</td>
<td class="td-deaths text-center">
{{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
</td>
<td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
class="td-plus text-center">
{{
(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
}}
</td>
<td class="td-adr text-center">
{{
Math.floor((match.stats[0].extended.dmg.enemy ? match.stats[0].extended.dmg.enemy : 0) / (match.score[0] + match.score[1]))
}}
</td>
<td :class="GetHLTV_1(
match.stats[0].kills,
match.score[0] + match.score[1],
match.stats[0].deaths,
@@ -160,34 +164,30 @@
match.stats[0].extended?.multi_kills?.triple,
match.stats[0].extended?.multi_kills?.quad,
match.stats[0].extended?.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
class="td-hltv text-center fw-bold">
{{
GetHLTV_1(
match.stats[0].kills,
match.score[0] + match.score[1],
match.stats[0].deaths,
match.stats[0].extended?.multi_kills?.duo,
match.stats[0].extended?.multi_kills?.triple,
match.stats[0].extended?.multi_kills?.quad,
match.stats[0].extended?.multi_kills?.pent)
}}
</td>
<td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
{{ FormatDuration(match.duration) }}
class="td-hltv text-center fw-bold">
{{
GetHLTV_1(
match.stats[0].kills,
match.score[0] + match.score[1],
match.stats[0].deaths,
match.stats[0].extended?.multi_kills?.duo,
match.stats[0].extended?.multi_kills?.triple,
match.stats[0].extended?.multi_kills?.quad,
match.stats[0].extended?.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">
<svg v-if="match.rounds === 16" class="bi bi-circle-half" fill="currentColor" height="16"
viewBox="0 0 16 16" width="16"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</svg>
{{ FormatDate(match.date) }}
</td>
</tr>
</tbody>
</table>
<h5 v-else>No matches on record</h5>
</td>
<td :title="FormatFullDate(match.date)" class="td-date">
{{ FormatDate(match.date) }}
</td>
</tr>
</tbody>
</table>
<h5 v-else>No matches on record</h5>
</div>
</div>
</div>
</template>
@@ -203,7 +203,7 @@ import {
FormatFullDate,
FormatFullDuration,
GetHLTV_1,
GoToMatch,
GoToMatch, LoadImage,
SaveLastVisitedToLocalStorage
} from "../utils";
@@ -263,6 +263,8 @@ export default {
data.match_stats.tie = response.data.match_stats.tie ? response.data.match_stats.tie : 0
store.state.id64 = response.data.steamid64
LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
console.log(response.data)
let player = {
@@ -315,6 +317,23 @@ export default {
</script>
<style lang="scss" scoped>
.bg-img {
z-index: -1;
position: fixed;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
left: 0;
}
.wrapper {
padding-bottom: 1rem;
background: rgba(0, 0, 0, .7);
min-width: 100%;
min-height: 100%;
}
.card {
padding-top: 10px;
@@ -325,6 +344,11 @@ export default {
box-shadow: 0 0 10px black;
}
.fas, .far {
font-size: .75rem;
vertical-align: top;
}
table {
max-width: 500px;
@@ -343,30 +367,31 @@ export default {
}
.win {
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
&:hover {
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
}
}
.loss {
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
&:hover {
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
}
}
.draw {
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
&:hover {
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
}
}
table {
margin-bottom: 0;
tr {
th {
line-height: 1;
@@ -465,8 +490,8 @@ table {
font-size: 1rem !important;
}
.kills, .deaths, .assists, .kdiff, .adr, .duration, .hltv,
.td-kills, .td-deaths, .td-assists, .td-plus, .td-adr, .td-duration, .td-hltv {
.kills, .deaths, .assists, .kdiff, .adr, .duration, .hltv, .length,
.td-kills, .td-deaths, .td-assists, .td-plus, .td-adr, .td-duration, .td-hltv, .td-length {
display: none;
}
}