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

wip
Some checks failed
CSGOWTF/csgowtf/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
vikingowl
2022-03-26 17:45:14 +01:00
parent 552188c8a9
commit 106ef97ede
7 changed files with 432 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -29,6 +29,7 @@
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.1.1",
"@types/echarts": "^4.9.13",
"@types/luxon": "^2.3.1",
"@types/node": "^16.11.26",
"@vitejs/plugin-vue": "^2.2.4",

58
src/components/EqValueGraph.vue
View File

@@ -6,9 +6,8 @@
</div>
</template>
<script>
import { GetPlayerValue } from "/src/utils";
import { useStore } from "vuex";
<script setup lang="ts">
import { GetPlayerValue } from "@/utils";
import {
onBeforeMount,
onMounted,
@@ -29,15 +28,16 @@ import {
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type { MatchRounds, MatchStats } from "@/types";
import { useMatchDetailsStore } from "@/stores/matchDetails";
import { useInfoStateStore } from "@/stores/infoState";
export default {
name: "EqValueGraph",
setup() {
const store = useStore();
const matchDetailsStore = useMatchDetailsStore();
const infoStateStore = useInfoStateStore();
let myChart1, max_rounds;
let valueList = [];
let dataList = [];
let myChart1: echarts.ECharts, max_rounds: echarts.ECharts;
let valueList: any[] = [];
let dataList: any[] = [];
const width = ref(
window.innerWidth >= 800 && window.innerWidth <= 1200
? window.innerWidth
@@ -47,30 +47,38 @@ export default {
);
const height = ref((width.value * 1) / 3);
interface eqTeamPlayer {
round: string;
player: string;
eq: number;
}
const data = reactive({
rounds: {},
rounds: {} as MatchRounds,
team: [],
eq_team_1: [],
eq_team_2: [],
eq_team_player_1: [],
eq_team_player_2: [],
eq_team_player_1: [] as eqTeamPlayer[],
eq_team_player_2: [] as eqTeamPlayer[],
});
const getTeamPlayer = (stats, team) => {
const getTeamPlayer = (stats: MatchStats[], team: number) => {
let arr = [];
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push(stats[i].player.steamid64);
const player = stats[i];
arr.push(player?.player?.steamid64);
}
return arr;
};
const parseObject = async () => {
data.rounds = await GetPlayerValue(
store,
store.state.matchDetails.match_id
const [res, info] = await GetPlayerValue(
matchDetailsStore.matchDetails.match_id
);
if (data.rounds === null) data.rounds = {};
if (info.message !== "") infoStateStore.addInfo(info);
if (res !== null) data.rounds = res;
for (const round in data.rounds) {
for (const player in data.rounds[round]) {
@@ -79,8 +87,7 @@ export default {
data.eq_team_player_1.push({
round: round,
player: player,
eq:
data.rounds[round][player][0] + data.rounds[round][player][2],
eq: data.rounds[round][player][0] + data.rounds[round][player][0],
});
}
}
@@ -89,8 +96,7 @@ export default {
data.eq_team_player_2.push({
round: round,
player: player,
eq:
data.rounds[round][player][0] + data.rounds[round][player][2],
eq: data.rounds[round][player][0] + data.rounds[round][player][2],
});
}
}
@@ -98,7 +104,9 @@ export default {
}
};
const sumArr = (arr) => {
// TODO: REWORK
const sumArr = (arr: eqTeamPlayer[]) => {
return arr.reduce(
(acc, current) => ({
...acc,
@@ -267,8 +275,6 @@ export default {
height.value = (width.value * 1) / 3;
buildCharts();
};
},
};
</script>
<style lang="scss" scoped>

1
src/components/FlashChart.vue
View File

@@ -35,6 +35,7 @@
</template>
<script>
// TODO: REWORK
import * as echarts from "echarts/core";
import {
GridComponent,

89
src/components/MatchChatHistory.vue
View File

@@ -41,13 +41,13 @@
(m.vac &&
FormatVacDate(
m.vac_date,
store.state.matchDetails.date
matchDetailsStore.matchDetails.date
) !== '') ||
(!m.vac &&
m.game_ban &&
FormatVacDate(
m.game_ban_date,
store.state.matchDetails.date
matchDetailsStore.matchDetails.date
) !== '')
? 'ban-shadow'
: ''
@@ -57,11 +57,11 @@
? 'Game-banned: ' +
FormatVacDate(
m.game_ban_date,
store.state.matchDetails.date
matchDetailsStore.matchDetails.date
)
: m.vac && !m.game_ban
? 'Vac-banned: ' +
FormatVacDate(m.vac_date, store.state.matchDetails.date)
FormatVacDate(m.vac_date, matchDetailsStore.matchDetails.date)
: ''
"
>
@@ -99,8 +99,7 @@
</div>
</template>
<script>
import { useStore } from "vuex";
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import {
constructAvatarUrl,
@@ -109,24 +108,26 @@ import {
GetChatHistory,
GoToPlayer,
truncate,
} from "/src/utils";
import TranslateChatButton from "/src/components/TranslateChatButton";
} from "@/utils";
import TranslateChatButton from "@/components/TranslateChatButton.vue";
import ISO6391 from "iso-639-1";
import {useMatchDetailsStore} from "@/stores/matchDetails";
import {useInfoStateStore} from "@/stores/infoState";
import type {MatchChat, MatchChatItem, MatchStats} from "@/types";
export default {
name: "MatchChatHistory",
components: { TranslateChatButton },
setup() {
const store = useStore();
const matchDetailsStore = useMatchDetailsStore();
const infoStoreState = useInfoStateStore();
interface ChatStats extends MatchStats, MatchChatItem {}
const data = reactive({
chat: [],
translatedText: [],
chat: [] as ChatStats[],
translatedText: [] as ChatStats[],
originalChat: [],
clientWidth: 0,
});
const handleTranslatedText = async (e) => {
const handleTranslatedText = async (e: PromiseLike<[any, any]> | [any, any]) => {
const [res, toggle] = await e;
if (res !== null) {
@@ -140,18 +141,17 @@ export default {
};
const getChatHistory = async () => {
const resData = await GetChatHistory(
store,
store.state.matchDetails.match_id
);
const [resData, info] = await GetChatHistory(matchDetailsStore.matchDetails.match_id);
if (info.message !== "") infoStoreState.addInfo(info);
if (resData !== null) {
data.chat = await setPlayer(sortChatHistory(resData));
data.originalChat = data.chat;
}
};
const sortChatHistory = (res = {}, translated = false) => {
let arr = [];
const sortChatHistory = (res: MatchChat = {}, translated = false): MatchChatItem[] => {
let arr = [] as MatchChatItem[];
if (res !== {}) {
Object.keys(res).forEach((i) => {
res[i].forEach((o) => {
@@ -171,27 +171,27 @@ export default {
return arr;
};
const setPlayer = async (chat) => {
let arr = [];
const setPlayer = async (chat: MatchChatItem[]): ChatStats[] => {
let arr: ChatStats[] = [];
for (const o of chat) {
for (const p of store.state.matchDetails.stats) {
if (o.player === p.player.steamid64) {
const obj = Object.assign({
player: truncate(p.player.name, 20),
steamid64: p.player.steamid64,
avatar: p.player.avatar,
for (const p of matchDetailsStore.matchDetails.stats || []) {
if (o.player === p.player?.steamid64) {
const obj: ChatStats = Object.assign({
player: truncate(p.player?.name || "", 20),
steamid64: p.player?.steamid64,
avatar: p.player?.avatar,
color: p.color,
startSide: p.team_id,
tracked: p.player.tracked,
vac: p.player.vac,
vac_date: p.player.vac_date,
game_ban: p.player.game_ban,
game_ban_date: p.player.game_ban_date,
tracked: p.player?.tracked,
vac: p.player?.vac,
vac_date: p.player?.vac_date,
game_ban: p.player?.game_ban,
game_ban_date: p.player?.game_ban_date,
tick: o.tick,
tick_rate:
store.state.matchDetails.tick_rate &&
store.state.matchDetails.tick_rate !== -1
? store.state.matchDetails.tick_rate
matchDetailsStore.matchDetails.tick_rate &&
matchDetailsStore.matchDetails.tick_rate !== -1
? matchDetailsStore.matchDetails.tick_rate
: 64,
all_chat: o.all_chat,
message: o.message,
@@ -221,19 +221,6 @@ export default {
getChatHistory();
sizeTable();
});
return {
data,
store,
ISO6391,
constructAvatarUrl,
GoToPlayer,
ConvertTickToTime,
FormatVacDate,
handleTranslatedText,
};
},
};
</script>
<style lang="scss" scoped>

53
src/components/TranslateChatButton.vue
View File

@@ -22,22 +22,25 @@
</div>
</template>
<script>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import ISO6391 from "iso-639-1";
import { GetChatHistoryTranslated } from "/src/utils";
import { useStore } from "vuex";
import { GetChatHistoryTranslated } from "@/utils";
import { useMatchDetailsStore } from "@/stores/matchDetails";
import { useInfoStateStore } from "@/stores/infoState";
export default {
name: "TranslateChatButton",
props: {
translated: {
type: Boolean,
required: true,
},
},
setup() {
const store = useStore();
const matchDetailsStore = useMatchDetailsStore();
const infoStateStore = useInfoStateStore();
// TODO: Maybe remove props
const props = defineProps<{
translated: boolean;
}>();
// TODO: needs more work
const emit = defineEmits<{
(e: "translate", ): [MatchChat || null, string]
}>();
const data = reactive({
browserIsoCode: "",
@@ -50,7 +53,7 @@ export default {
const setLanguageVariables = () => {
const navLangs = navigator.languages;
data.browserIsoCode = navLangs.find((l) => l.length === 5);
data.browserIsoCode = navLangs.find((l) => l.length === 5) || "";
data.browserLangCode = navLangs[0];
if (ISO6391.validate(data.browserLangCode)) {
@@ -63,18 +66,21 @@ export default {
};
const handleBtnClick = async () => {
let response;
const refreshButton = document.querySelector(".loading-icon .fa-spinner");
const refreshButton = document.querySelector(
".loading-icon .fa-spinner"
) as HTMLElement;
refreshButton.classList.add("show");
toggleShow();
response = await GetChatHistoryTranslated(
store,
store.state.matchDetails.match_id
// TODO: Needs more work
// TODO: Add langCode
const [response, info] = await GetChatHistoryTranslated(
matchDetailsStore.matchDetails.match_id
);
if (info.message !== "") infoStateStore.addInfo(info);
if (refreshButton.classList.contains("show"))
refreshButton.classList.remove("show");
@@ -82,8 +88,8 @@ export default {
};
const toggleShow = () => {
const offBtn = document.getElementById("toggle-off");
const onBtn = document.getElementById("toggle-on");
const offBtn = document.getElementById("toggle-off") as HTMLElement;
const onBtn = document.getElementById("toggle-on") as HTMLElement;
if (offBtn.classList.contains("show")) {
offBtn.classList.remove("show");
@@ -99,9 +105,6 @@ export default {
onMounted(() => {
setLanguageVariables();
});
return { data, toggle, handleBtnClick };
},
};
</script>
<style lang="scss" scoped>

8
src/types/MatchChat.ts
View File

@@ -1,8 +1,10 @@
import type { Player } from "@/types/Player";
export interface MatchChat {
[key: string]: [
{
[key: string]: MatchChatItem[];
}
export interface MatchChatItem {
player?: Player;
message: string;
all_chat: boolean;
@@ -10,5 +12,3 @@ export interface MatchChat {
translated_from?: string;
translated_to?: string;
}
];
}

17
yarn.lock
View File

@@ -141,6 +141,15 @@ __metadata:
languageName: node
linkType: hard
"@types/echarts@npm:^4.9.13":
version: 4.9.13
resolution: "@types/echarts@npm:4.9.13"
dependencies:
"@types/zrender": "*"
checksum: 19e9d6098cab817a58f949541c5f9642f77dd535ca1413128f33045db631c8ea95fe4fa2c1ff2d3f679a9b4f68d52da70c47ce59338b336dffbe468ac3b79c03
languageName: node
linkType: hard
"@types/json-schema@npm:^7.0.9":
version: 7.0.10
resolution: "@types/json-schema@npm:7.0.10"
@@ -162,6 +171,13 @@ __metadata:
languageName: node
linkType: hard
"@types/zrender@npm:*":
version: 4.0.1
resolution: "@types/zrender@npm:4.0.1"
checksum: 2d18f65241a10232d1600359821ff6ace09afee75e52d6b44f4ddc7244af6915c5b944857cd580955ae213f67f8d07187326a8bc94ef1ebd2807cc23921c548c
languageName: node
linkType: hard
"@typescript-eslint/eslint-plugin@npm:^5.0.0":
version: 5.15.0
resolution: "@typescript-eslint/eslint-plugin@npm:5.15.0"
@@ -897,6 +913,7 @@ __metadata:
dependencies:
"@popperjs/core": ^2.11.4
"@rushstack/eslint-patch": ^1.1.1
"@types/echarts": ^4.9.13
"@types/luxon": ^2.3.1
"@types/node": ^16.11.26
"@vitejs/plugin-vue": ^2.2.4