updated frontend from typescript to javascript
This commit is contained in:
cnachtigall1991
31
src/components/Footer.vue
Normal file
31
src/components/Footer.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="bg-secondary text-center pt-5 pb-4">
|
||||
<div class="icons pb-4">
|
||||
<a class="text-white" target="_blank" href="https://git.harting.dev/CSGOWTF/csgowtf">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github"
|
||||
viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>This site is an open source project, originally created and maintained by <span class="text-warning">anonfunc</span> and <span
|
||||
class="text-warning">vikingowl</span>.</p>
|
||||
<p class="text-muted">For feedback contact us at <a class="text-muted text-decoration-none"
|
||||
href="mailto:#">EMAIL</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Footer",
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: .85rem;
|
||||
}
|
||||
</style>
|
||||
110
src/components/Nav.vue
Normal file
110
src/components/Nav.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand navbar-dark fixed-top">
|
||||
<div class="container-fluid w-75">
|
||||
<div class="navbar-nav">
|
||||
<router-link class="navbar-brand text-warning fw-bold fs-3" to="/">CSGO<span class="text-up text-white fw-bold">WTF</span>
|
||||
</router-link>
|
||||
<router-link class="nav-link" to="/explore">Explore</router-link>
|
||||
</div>
|
||||
<form class="d-flex col-5 justify-content-end" @keydown.enter.prevent="parseSearch">
|
||||
<label for="search">
|
||||
<svg class="bi bi-search" fill="currentColor" height="24" viewBox="0 0 16 16" width="24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<input id="search" v-model="data.searchInput" aria-label="Search"
|
||||
class="form-control w-75 bg-transparent border-0"
|
||||
placeholder="SteamID64, Profile Link or Custom URL"
|
||||
type="search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {reactive} from "vue";
|
||||
import {useStore} from 'vuex'
|
||||
import {sanitize} from 'string-sanitizer'
|
||||
import router from "../router";
|
||||
|
||||
export default {
|
||||
name: 'Nav',
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const data = reactive({
|
||||
searchInput: ''
|
||||
})
|
||||
|
||||
const parseSearch = () => {
|
||||
const input = data.searchInput
|
||||
const customUrlPattern = 'https://steamcommunity.com/id/'
|
||||
const profileUrlPattern = 'https://steamcommunity.com/profiles/'
|
||||
const id64Pattern = /^\d{17}$/
|
||||
|
||||
store.state.id64 = ''
|
||||
store.state.vanityUrl = ''
|
||||
|
||||
if (id64Pattern.test(input)) {
|
||||
store.state.id64 = input
|
||||
} else if (input.match(customUrlPattern)) {
|
||||
store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
|
||||
} else if (input.match(profileUrlPattern)) {
|
||||
const tmp = input.split('/')[4].split('?')[0]
|
||||
if (id64Pattern.test(tmp)) {
|
||||
store.state.id64 = tmp
|
||||
}
|
||||
} else {
|
||||
store.state.vanityUrl = sanitize(input)
|
||||
}
|
||||
|
||||
if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
|
||||
data.searchInput = ''
|
||||
|
||||
if (store.state.id64) {
|
||||
router.push(`/player/${store.state.id64}`)
|
||||
} else if (store.state.vanityUrl) {
|
||||
router.push(`/player/${store.state.vanityUrl}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
data, parseSearch
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
nav {
|
||||
height: 70px;
|
||||
width: 100vw;
|
||||
background: rgba(16, 18, 26, 0.5);
|
||||
|
||||
.text-up {
|
||||
font-size: 40%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
label {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
|
||||
transition: .2s ease-in-out;
|
||||
transform: scale(.975);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
src/components/ScoreTeam.vue
Normal file
71
src/components/ScoreTeam.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="player__avatar"></th>
|
||||
<th class="player__name"></th>
|
||||
<th class="player__rank"></th>
|
||||
<th class="player__kills cursor__help" title="Kills">K</th>
|
||||
<th class="player__assist cursor__help" title="Assists">A</th>
|
||||
<th class="player__deaths cursor__help" title="Deaths">D</th>
|
||||
<th class="player__diff cursor__help" title="Kill death difference">+/-</th>
|
||||
<th class="player__kd cursor__help" title="Kill death ratio">K/D</th>
|
||||
<th class="player__adr cursor__help" title="Average damage per round">ADR</th>
|
||||
<th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
|
||||
<th class="player__kast cursor__help" title="Percentage of rounds with a Kill, Assist, Survived or Death Traded">
|
||||
KAST
|
||||
</th>
|
||||
<th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="player in props.stats" :key="player.player.steamid64">
|
||||
<tr v-if="player.team_id === props.team_id" class="player">
|
||||
<ScoreTeamPlayer
|
||||
:assists="player.assists"
|
||||
:avatar="player.player.avatar"
|
||||
:deaths="player.deaths"
|
||||
:dmg="player.extended?.dmg?.enemy"
|
||||
:hs="player.headshot"
|
||||
:kast="player.extended?.kast"
|
||||
:kdiff="player.kills - player.deaths"
|
||||
:kills="player.kills"
|
||||
:mk_duo="player.extended?.multi_kills?.duo"
|
||||
:mk_pent="player.extended?.multi_kills?.pent"
|
||||
:mk_quad="player.extended?.multi_kills?.quad"
|
||||
:mk_triple="player.extended?.multi_kills?.triple"
|
||||
:name="player.player.name"
|
||||
:rounds_played="props.rounds_played"
|
||||
:rank="player.extended?.rank?.old"
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScoreTeamPlayer from '@/components/ScoreTeamPlayer.vue'
|
||||
|
||||
export default {
|
||||
name: 'ScoreTeam',
|
||||
components: {ScoreTeamPlayer},
|
||||
props: {
|
||||
stats: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
rounds_played: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
team_id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
return {props}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
130
src/components/ScoreTeamPlayer.vue
Normal file
130
src/components/ScoreTeamPlayer.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<td>
|
||||
<img :src="props.avatar" alt="Player avatar" class="player__avatar">
|
||||
</td>
|
||||
<td class="player__name">
|
||||
{{ props.name }}
|
||||
</td>
|
||||
<td>
|
||||
<img :src="props.rank ? require('@/images/ranks/' + props.rank + '.png') : require('@/images/ranks/0.png')"
|
||||
alt="Player rank"
|
||||
class="player__rank">
|
||||
</td>
|
||||
<td class="player__kills">
|
||||
{{ props.kills }}
|
||||
</td>
|
||||
<td class="player__assist">
|
||||
{{ props.assists }}
|
||||
</td>
|
||||
<td class="player__deaths">
|
||||
{{ props.deaths }}
|
||||
</td>
|
||||
<td :class="props.kdiff >= 0 ? 'text-success' : 'text-danger'" class="player__diff">
|
||||
{{ props.kdiff }}
|
||||
</td>
|
||||
<td class="player__kd">
|
||||
{{ (props.kills > 0 && props.deaths > 0) ? (props.kills / props.deaths).toFixed(2) : (props.kills > 0 && props.deaths === 0) ? props.kills : 0.00 }}
|
||||
</td>
|
||||
<td class="player__adr">
|
||||
{{ (props.dmg / props.rounds_played).toFixed(2) }}
|
||||
</td>
|
||||
<td class="player__hs">
|
||||
{{ (props.hs > 0 && props.kills > 0) ? (props.hs * 100 / props.kills).toFixed(0) + "%" : "0%" }}
|
||||
</td>
|
||||
<td class="player__kast">
|
||||
{{ props.kast ? props.kast + "%" : "-" }}
|
||||
</td>
|
||||
<td class="player__rating">
|
||||
{{
|
||||
GetHLTV_1(props.kills, props.rounds_played, props.deaths, props.mk_duo, props.mk_triple, props.mk_quad, props.mk_pent)
|
||||
}}
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {GetHLTV_1} from "../utils";
|
||||
|
||||
export default {
|
||||
name: 'ScoreTeamPlayer',
|
||||
props: {
|
||||
avatar: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: 'Avatar'
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: 'Name'
|
||||
},
|
||||
rank: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
kills: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
assists: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
deaths: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
kdiff: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
hs: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
rounds_played: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
mk_duo: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
mk_triple: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
mk_quad: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
mk_pent: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
kast: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
dmg: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
return {props, GetHLTV_1}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user