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

more match-info, parsed-icon on player-page, disabled score-nav-links for not-parsed demos

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-12 02:43:20 +02:00
parent 76aba61361
commit a53c4a3c14
10 changed files with 487 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/components/DamageChart.vue Normal file
View File

@@ -0,0 +1,211 @@
<template>
<div class="player-dmg">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="dmg-chart-1"></div>
<hr>
<h4 class="text-center mt-3 mb-3">Team 2</h4>
<div id="dmg-chart-2"></div>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
export default {
name: "FlashChart",
props: {
stats: {
type: Object,
required: true
}
},
setup(props) {
const checkStatEmpty = (stat) => {
if (stat)
return stat
}
const truncate = (str, len, ending) => {
if (len == null)
len = 100
if (ending == null)
ending = '..'
if (str.length > len)
return str.substring(0, len - ending.length) + ending
else
return str
}
const playerArr = (stats, team) => {
let arr = []
if (team === 1) {
for (let i = 0; i < 5; i++) {
arr.push(truncate(stats[i].player.name, 10))
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push(truncate(stats[i].player.name, 10))
}
}
return arr
}
const teamArr = (stats, team) => {
let arr = []
if (team === 1) {
for (let i = 0; i < 5; i++) {
arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
}
}
return arr
}
const enemyArr = (stats, team) => {
let arr = []
if (team === 1) {
for (let i = 0; i < 5; i++) {
arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
}
}
return arr
}
const optionGen = (stats, team) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle: {
color: 'white'
},
data: ['Enemy', 'Team']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
data: playerArr(stats, team)
}
],
series: [
{
name: 'Team',
type: 'bar',
stack: 'Total',
color: 'firebrick',
label: {
show: true,
},
emphasis: {
focus: 'series'
},
data: teamArr(stats, team)
},
{
name: 'Enemy',
type: 'bar',
stack: 'Total',
color: ['orange'],
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: enemyArr(stats, team)
}
]
}
}
onMounted(() => {
echarts.use([
TooltipComponent,
GridComponent,
LegendComponent,
BarChart,
CanvasRenderer
]);
let myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
let myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
let option1 = optionGen(props.stats, 1)
let option2 = optionGen(props.stats, 2)
myChart1.setOption(option1);
myChart2.setOption(option2);
})
return {props}
}
}
</script>
<style lang="scss" scoped>
.player-dmg {
flex-direction: column;
align-items: center;
.heading {
display: flex;
margin-top: 10px;
margin-bottom: -30px;
//color: darkolivegreen;
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 20px;
color: #ff4343;
}
h4 {
margin-top: 7px;
}
}
p {
padding-top: 40px;
margin-bottom: -20px;
}
}
@for $i from 0 through 9 {
#dmg-chart-#{$i} {
margin: 0;
}
}
</style>

4
src/components/FlashChart.vue
View File

@@ -54,7 +54,7 @@ export default {
LabelLayout
]);
let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`));
let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`), {},{width: 600, height: 400});
let option
option = {
@@ -215,8 +215,6 @@ export default {
@for $i from 0 through 9 {
#flash-chart-#{$i} {
width: 600px;
height: 400px;
margin: 40px 40px -40px 40px;
}
}

1
src/components/ScoreTeam.vue
View File

@@ -41,6 +41,7 @@
:rank="player.extended?.rank?.old"
:rounds_played="props.rounds_played"
:color="player.extended?.color"
:tracked="player.player.tracked"
/>
</tr>
</tbody>

10
src/components/ScoreTeamPlayer.vue
View File

@@ -3,6 +3,7 @@
<img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
</td>
<td class="player__name" @click="GoToPlayer(props.steamid64)">
<i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
{{ props.name }}
<i class="fas fa-link"></i>
</td>
@@ -141,6 +142,11 @@ export default {
type: String,
required: true,
default: ''
},
tracked: {
type: Boolean,
required: true,
default: false
}
},
setup(props) {
@@ -187,6 +193,10 @@ export default {
text-overflow: ellipsis;
cursor: pointer;
.tracked {
font-size: .8rem;
}
.fas {
font-size: .5rem;
vertical-align: top;

76
src/components/UtilityChart.vue
View File

@@ -1,13 +1,10 @@
<template>
<div :style="props.ud.flames || props.ud.flash || props.ud.he ? 'display: flex' : 'display: none'"
class="player-flash">
class="player-utility">
<div class="heading">
<img :src="props.avatar" alt="Player avatar" class="avatar">
<h4>{{ props.name }}</h4>
</div>
<p><span class="text-muted">Total UD:</span>
{{ (props.ud.flames ? props.ud.flames : 0) + (props.ud.flash ? props.ud.flash : 0) + (props.ud.he ? props.ud.he : 0) }}
</p>
<div :id="'utility-chart-' + props.id"></div>
</div>
</template>
@@ -18,6 +15,7 @@ import {LegendComponent, TooltipComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import { TitleComponent } from 'echarts/components';
import {onMounted} from "vue";
export default {
@@ -50,10 +48,11 @@ export default {
LegendComponent,
PieChart,
CanvasRenderer,
TitleComponent,
LabelLayout
]);
let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`));
let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`), {}, {width: 500, height: 300});
let option
option = {
@@ -62,29 +61,7 @@ export default {
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: [
{
name: 'Flames',
textStyle: {
color: 'white',
},
itemStyle: {
color: '#FF4343FF'
}
},
{
name: 'Flash',
textStyle: {
color: 'white'
}
},
{
name: 'HE',
textStyle: {
color: 'white'
}
},
]
show: false
},
series: [
{
@@ -106,21 +83,42 @@ export default {
show: false
},
data: [
{
(props.ud.flames ? {
value: props.ud.flames ? props.ud.flames : null,
name: 'Flames',
itemStyle: {
color: '#FF4343FF'
}
},
{
value: props.ud.flash ? props.ud.flash : null,
name: 'Flash',
},
{
} : {}),
(props.ud.he ? {
value: props.ud.he ? props.ud.he : null,
name: 'HE',
}
itemStyle: {
color: '#62c265'
}
} : {})
,
(props.ud.flash ? {
value: props.ud.flash ? props.ud.flash : null,
name: 'Flash',
itemStyle: {
color: '#18cff3'
}
} : {}),
(props.ud.smoke ? {
value: props.ud.smoke ? props.ud.smoke : null,
name: 'Smoke',
itemStyle: {
color: '#6e6b78'
}
} : {}),
(props.ud.decoy ? {
value: props.ud.decoy ? props.ud.decoy : null,
name: 'Decoy',
itemStyle: {
color: '#e28428'
}
} : {})
]
}
]
@@ -135,7 +133,7 @@ export default {
</script>
<style lang="scss" scoped>
.player-flash {
.player-utility {
flex-direction: column;
align-items: center;
@@ -165,9 +163,7 @@ export default {
@for $i from 0 through 9 {
#utility-chart-#{$i} {
width: 500px;
height: 300px;
margin: 40px 40px -40px 40px;
margin: 0;
}
}
</style>

141
src/components/UtilityChartTotal.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<div class="utility-chart-total">
<div class="heading">
<h4>Total Utility Damage</h4>
</div>
<div id="utility-chart-total"></div>
<hr>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
export default {
name: "FlashChart",
props: {
stats: {
type: Object,
required: true
},
},
setup(props) {
const checkStatEmpty = (stat) => {
if (stat)
return stat
else
return 0
}
const seriesArr = (stats) => {
let arr = []
for (let i = 0; i < stats.length; i++) {
const sum = checkStatEmpty(stats[i].extended.dmg.ud.flames) + checkStatEmpty(stats[i].extended.dmg.ud.flash) + checkStatEmpty(stats[i].extended.dmg.ud.he) + checkStatEmpty(stats[i].extended.dmg.ud.smoke)
if (sum !== 0) {
arr.push({
name: stats[i].player.name,
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [sum]
})
}
}
arr.sort((a, b) => parseFloat(b.data[0]) - parseFloat(a.data[0]))
return arr
}
onMounted(() => {
echarts.use([
TooltipComponent,
GridComponent,
LegendComponent,
BarChart,
CanvasRenderer
]);
let myChart = echarts.init(document.getElementById('utility-chart-total'), {}, {width: 800, height: 200});
let option
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line'
}
},
// color: ['#143147', '#39546c', '#617a94', '#89a2bd', '#b3cce8', '#eac65c', '#bd9d2c', '#917501', '#685000', '#412c00'],
// color: ['#003470', '#005a9b', '#0982c7', '#4bace5', '#90d3fe', '#febf4a', '#d7931c', '#ac6a01', '#804400', '#572000'],
// color: ['#888F98', '#10121A', '#1B2732', '#5F7892', '#C3A235'],
legend: {
textStyle: {
color: 'white'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Total']
},
aria: {
enabled: true,
show: true,
decal: {
show: true
}
},
series: seriesArr(props.stats)
};
myChart.setOption(option);
})
return {props}
}
}
</script>
<style lang="scss" scoped>
.utility-chart-total {
.heading {
display: flex;
margin-top: 10px;
margin-bottom: -30px;
h4 {
margin: 7px auto 0;
}
}
p {
padding-top: 40px;
margin-bottom: -20px;
}
}
#utility-chart-total {
margin: 40px 0;
}
</style>