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

refactored code

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-13 15:44:05 +02:00
parent 544ef95722
commit 5f3d0b981f
14 changed files with 250 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.editorconfig Normal file
View File

@@ -0,0 +1,10 @@
root = true
[*]
end_of_line = lf
insert_final_newline = true
[*.{js,json,yml}]
charset = utf-8
indent_style = space
indent_size = 2

1
.env.production
View File

@@ -1 +0,0 @@
VUE_APP_API_URL=https://api.csgow.tf

10
scss/custom.scss
View File

@@ -27,9 +27,9 @@ $success: #609926;
:root {
// CSGO COLORS
--csgo-Orange: #FE9A28;
--csgo-Blue: #5BA7FE;
--csgo-Yellow: #F7F52F;
--csgo-Purple: #A01BEF;
--csgo-Green: #04B462;
--csgo-orange: #FE9A28;
--csgo-blue: #5BA7FE;
--csgo-yellow: #F7F52F;
--csgo-purple: #A01BEF;
--csgo-green: #04B462;
}

126
src/components/Nav.vue
View File

@@ -33,6 +33,9 @@
>
Search!
</button>
<div v-if="data.error" class="alert alert-warning" role="alert">
{{ data.error }}
</div>
</form>
</div>
@@ -44,18 +47,18 @@
import {reactive} from "vue";
import {useStore} from 'vuex'
import {sanitize} from 'string-sanitizer'
import router from "../router";
import {GoToLink} from '../utils'
import {GetUser, GoToLink, GoToPlayer} from '../utils'
export default {
name: 'Nav',
setup() {
const store = useStore()
const data = reactive({
searchInput: ''
searchInput: '',
error: ''
})
const parseSearch = () => {
const parseSearch = async () => {
const input = data.searchInput
const customUrlPattern = 'https://steamcommunity.com/id/'
const profileUrlPattern = 'https://steamcommunity.com/profiles/'
@@ -64,30 +67,42 @@ export default {
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
if (data.searchInput !== '') {
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)
}
} else {
store.state.vanityUrl = sanitize(input)
}
if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
data.searchInput = ''
if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
const [res, resData] = await GetUser(store.state.vanityUrl || store.state.id64)
if (store.state.id64) {
router.push(`/player/${store.state.id64}`)
} else if (store.state.vanityUrl) {
router.push(`/player/${store.state.vanityUrl}`)
if (res === 200) {
data.searchInput = ''
document.activeElement.blur()
if (resData.vanity_url) {
GoToPlayer(resData.vanity_url)
} else if (resData.steamid64) {
GoToPlayer(resData.steamid64)
}
} else if (res === 404) {
data.searchInput = ''
data.error = `${resData} - Try again`
setTimeout(() => {
data.error = ''
}, 5000)
}
}
}
document.activeElement.blur()
}
return {
@@ -111,10 +126,15 @@ nav {
li {
font-size: 1.5rem;
font-weight: lighter;
margin: 22px 10px 0 10px;
margin: 22px 0 0 10px;
cursor: pointer;
transition: 100ms ease-in-out;
.text-up {
font-size: 40%;
vertical-align: top;
}
&:first-child {
font-size: 2rem;
font-weight: bold;
@@ -122,41 +142,46 @@ nav {
margin-left: 0;
}
&:hover {
&:hover router-link {
color: var(--bs-info);
transition: 100ms ease-in-out;
}
}
}
.text-up {
font-size: 40%;
vertical-align: top;
}
form {
position: relative;
svg {
width: 24px;
height: 24px;
fill: currentColor;
}
label {
padding-top: 6px;
font-size: 1.4rem;
}
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);
svg {
width: 24px;
height: 24px;
fill: currentColor;
}
&::placeholder {
color: #aaa;
label {
padding-top: 6px;
font-size: 1.4rem;
}
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;
}
}
.alert {
position: absolute;
right: 0;
top: 55px;
}
}
}
@@ -179,7 +204,6 @@ nav {
}
#mainNav {
ul {
display: flex;
flex-direction: column;

6
src/components/ScoreTeamPlayer.vue
View File

@@ -161,7 +161,11 @@ export default {
</script>
<style scoped lang="scss">
.team-color-Blue, .team-color-Orange, .team-color-Green, .team-color-Purple, .team-color-Yellow {
.team-color-Blue,
.team-color-Orange,
.team-color-Green,
.team-color-Purple,
.team-color-Yellow {
outline: 3px solid;
}
.team-color-Orange {

6
src/router/index.js
View File

@@ -16,12 +16,6 @@ const routes = [
component: lazyLoad('Player'),
props: true
},
{
path: '/player/:id/matches',
name: 'MyMatches',
component: lazyLoad('MyMatches'),
props: true
},
{
path: '/match/:match_id',
name: 'Match',

2
src/store/index.js
View File

@@ -3,7 +3,7 @@ import { createStore } from 'vuex'
export default createStore({
state: {
id64: '',
vanityUrl: ''
vanityUrl: '',
},
mutations: {
},

19
src/utils/ApiRequests.js Normal file
View File

@@ -0,0 +1,19 @@
import axios from "axios";
export const GetUser = async (id) => {
try {
const res = await axios.get(`${process.env.VUE_APP_API_URL}/player/${id}`)
if (res.status === 200) {
return [200, res.data]
}
} catch (err) {
if (err.response) {
if (err.response.status === 404) {
return [404, 'Player not found']
}
} else {
console.log(err.response)
}
}
}

2
src/utils/Display.js
View File

@@ -28,7 +28,9 @@ export const LoadImage = (mapName) => {
let background = document.querySelector('.bg-img')
img.onload = function() {
if (background) {
background.src = img.src
}
}
img.onerror = function () {

4
src/utils/GoTo.js
View File

@@ -1,11 +1,11 @@
import router from "../router";
export const GoToMatch = (id) => {
router.push(`/match/${id}`)
router.push({name: 'Match', params: {match_id: id}})
}
export const GoToPlayer = (id) => {
router.push(`/player/${id}`)
router.push({name: 'Player', params: {id: id}})
}
export const GoToLink = (link) => {

52
src/utils/Utils.js Normal file
View File

@@ -0,0 +1,52 @@
import axios from "axios";
export const GetWinLoss = (matchResult, teamId) => {
if (matchResult === teamId) {
return 'win'
} else if (matchResult === 0) {
return 'draw'
} else {
return 'loss'
}
}
export const TrackMe = async (id64, authcode, sharecode) => {
let statusError = ''
let status = 200
const shareCodeRegex = /^CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}$/
const authCodeRegex = /^[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{5}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}$/
if (!shareCodeRegex.test(sharecode)) {
statusError = 'Is not a valid sharecode'
status = 418
return [status, statusError]
}
if (!authCodeRegex.test(authcode)) {
statusError = 'Is not a valid authcode'
status = 418
return [status, statusError]
}
try {
const res = await axios
.post(`${process.env.VUE_APP_API_URL}/player/trackme`, `id=${id64}&authcode=${authcode}&sharecode=${sharecode}`)
if (res.status === 202) {
statusError = 'Hurray!! Your Matches will now be tracked!'
status = res.status
}
} catch (err) {
if (err.response.status === 401) {
statusError = 'Data does not match player'
status = err.response.status
} else if (err.response.status === 400) {
statusError = 'Userinput was wrong'
status = err.response.status
} else {
console.log(`${err.response.status}: ${err.response.statusText}`)
}
}
return [status, statusError]
}

16
src/utils/index.js
View File

@@ -1,13 +1,17 @@
import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration} from "./DateTime";
import {GoToMatch, GoToPlayer, GoToLink} from "./GoTo";
import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
import {GetHLTV_1} from "./HLTV";
import {DisplayRank, LoadImage} from "./Display";
import {GetUser} from "./ApiRequests";
import {GetWinLoss, TrackMe} from "./Utils";
export {
FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
GoToMatch, GoToPlayer, GoToLink,
SaveLastVisitedToLocalStorage,
GetHLTV_1,
DisplayRank, LoadImage
FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
GoToMatch, GoToPlayer, GoToLink,
SaveLastVisitedToLocalStorage,
GetHLTV_1,
DisplayRank, LoadImage,
GetUser,
GetWinLoss, TrackMe
}

12
src/views/MyMatches.vue
View File

@@ -1,12 +0,0 @@
<template>
<table class="matches-table">
MyMatches
</table>
</template>
<script>
export default{
name: "MyMatches",
}
</script>

130
src/views/Player.vue
View File

@@ -44,6 +44,17 @@
</td>
</tr>
</table>
<div v-if="data.statusErrorCode === 200" class="alert alert-success" role="alert">
{{ data.statusError }}
</div>
<div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
{{ data.statusError }}
</div>
<div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 200 && data.statusErrorCode !== 418"
class="alert alert-danger"
role="alert">
{{ data.statusError }}
</div>
</div>
<div v-if="!data.playerDetails.tracked" class="dropdown trackme-btn">
<button
@@ -79,7 +90,8 @@
</div>
<!-- Submit button -->
<button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
<button class="btn btn-outline-warning border-2" type="submit"
@click.prevent="TrackPlayer">
TrackMe
</button>
</form>
@@ -189,8 +201,8 @@
</template>
<script>
import {onBeforeMount, reactive, watch} from "vue";
import axios from "axios";
import {onMounted, reactive} from "vue";
import router from "../router";
import {useStore} from "vuex";
import {
DisplayRank,
@@ -198,16 +210,21 @@ import {
FormatDuration,
FormatFullDate,
FormatFullDuration,
GetHLTV_1, GoToLink,
GetHLTV_1,
GetUser,
GetWinLoss,
GoToLink,
GoToMatch,
LoadImage,
SaveLastVisitedToLocalStorage
SaveLastVisitedToLocalStorage,
TrackMe
} from "../utils";
export default {
name: 'Player',
props: ['id'],
setup(props) {
// Variables
const store = useStore()
const data = reactive({
@@ -216,8 +233,10 @@ export default {
sharecode: ''
},
playerDetails: {},
tracked: false,
matches: [],
statusError: '',
statusErrorCode: 0,
match_stats: {
loss: 0,
win: 0,
@@ -225,83 +244,62 @@ export default {
}
})
// Functions
const TrackMe = async () => {
const shareCodeRegex = /^CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}$/
const authCodeRegex = /^[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{5}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}$/
const GetPlayer = async () => {
if (router.currentRoute.value.params.id) {
const [res, resData] = await GetUser(router.currentRoute.value.params.id)
if (!shareCodeRegex.test(data.userData.sharecode))
data.statusError = 'Is not a valid sharecode'
if (!authCodeRegex.test(data.userData.authcode))
data.statusError = 'Is not a valid authcode'
const res = await axios
.post(`${process.env.VUE_APP_API_URL}/player/trackme`, `id=${store.state.id64}&authcode=${data.userData.authcode}&sharecode=${data.userData.sharecode}`)
if (res.status === 401) {
data.statusError = 'Data does not match player'
} else if (res.status === 400) {
data.statusError = 'Userinput was wrong'
} else if (res.status === 200) {
data.statusError = ''
} else {
console.log(`${res.status}: ${res.statusText}`)
}
}
const GetUser = () => {
axios
.get(`${process.env.VUE_APP_API_URL}/player/${props.id}`)
.then((response) => {
data.playerDetails = response.data
data.matches = response.data.matches
data.match_stats.loss = response.data.match_stats.loss ? response.data.match_stats.loss : 0
data.match_stats.win = response.data.match_stats.win ? response.data.match_stats.win : 0
data.match_stats.tie = response.data.match_stats.tie ? response.data.match_stats.tie : 0
store.state.id64 = response.data.steamid64
if (res === 200 && resData) {
data.playerDetails = resData
data.tracked = resData.tracked
data.matches = data.playerDetails.matches
data.match_stats.loss = data.playerDetails.match_stats.loss || 0
data.match_stats.win = data.playerDetails.match_stats.win || 0
data.match_stats.tie = data.playerDetails.match_stats.tie || 0
if (data.matches)
LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
// console.log(response.data)
let player = {
'steamid64': data.playerDetails.steamid64,
'vanity_url': data.playerDetails.vanity_url || '',
'name': data.playerDetails.name,
'avatar': data.playerDetails.avatar
}
SaveLastVisitedToLocalStorage(player)
let player = {
'steamid64': response.data.steamid64,
'name': response.data.name,
'avatar': response.data.avatar
}
SaveLastVisitedToLocalStorage(player)
document.title = `${data.playerDetails.name} | csgoWTF`
document.title = `${response.data.name} | csgoWTF`
})
.catch((e) => {
if (e.response.status === 404) {
GoToLink('/')
}
// console.log(e.response.status, e.response.statusText);
});
}
const GetWinLoss = (matchResult, teamId) => {
if (matchResult === teamId) {
return 'win'
} else if (matchResult === 0) {
return 'draw'
console.log(data.playerDetails)
}
} else {
return 'loss'
GoToLink('/')
}
}
watch(() => props.id, GetUser)
const TrackPlayer = async () => {
[data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
onBeforeMount(() => {
GetUser()
})
// setTimeout(() => {
if (data.statusErrorCode === 202) {
data.statusErrorCode = 0
data.statusError = ''
data.tracked = true
}
// }, 2000)
}
onMounted(() => {
setTimeout(() => {
GetPlayer()
}, 200)
}
)
return {
data,
store,
props,
GetUser,
TrackPlayer,
TrackMe,
GetWinLoss,
FormatDate,