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

updated MatchChat

Browse Source
This commit is contained in:
vikingowl
2022-03-27 14:56:09 +02:00
parent 106ef97ede
commit 9ac3228f5d
4 changed files with 67 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -3,6 +3,7 @@
"version": "1.0.7",
"scripts": {
"dev": "vite",
"host": "vite --host",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview --port 5050",
"typecheck": "vue-tsc --noEmit",

109
src/components/MatchChatHistory.vue
View File

@@ -1,43 +1,42 @@
<template>
<div class="container w-50">
<TranslateChatButton
v-if="data.chat.length > 0"
:translated="data.translatedText.length > 0"
class="translate-btn"
@translated="handleTranslatedText"
v-if="data.chat.length > 0"
class="translate-btn"
@translated="handleTranslatedText"
/>
<div v-if="data.chat.length > 0" class="chat-history mt-2">
<table
id="chat"
:style="`max-width: ${data.clientWidth}px; width: ${data.clientWidth}px`"
class="table table-borderless"
id="chat"
:style="`max-width: ${data.clientWidth}px; width: ${data.clientWidth}px`"
class="table table-borderless"
>
<tbody>
<tr v-for="(m, id) in data.chat" :key="id">
<td class="td-time">
{{ ConvertTickToTime(m.tick, m.tick_rate) }}
</td>
<td class="td-avatar">
<img
<tr v-for="(m, id) in data.chat" :key="id">
<td class="td-time">
{{ ConvertTickToTime(m.tick, m.tick_rate) }}
</td>
<td class="td-avatar">
<img
:class="'team-color-' + m.color"
:src="constructAvatarUrl(m.avatar)"
alt="Player avatar"
class="avatar"
/>
</td>
<td
/>
</td>
<td
:class="m.startSide === 1 ? 'text-info' : 'text-warning'"
class="td-name d-flex"
@click="GoToPlayer(m.steamid64)"
>
>
<span>
<i
v-if="m.tracked"
class="fa fa-dot-circle-o text-success tracked"
title="Tracked user"
v-if="m.tracked"
class="fa fa-dot-circle-o text-success tracked"
title="Tracked user"
/>
<span
:class="
:class="
(m.vac &&
FormatVacDate(
m.vac_date,
@@ -52,7 +51,7 @@
? 'ban-shadow'
: ''
"
:title="
:title="
!m.vac && m.game_ban
? 'Game-banned: ' +
FormatVacDate(
@@ -68,28 +67,28 @@
{{ m.player }}
</span>
</span>
</td>
<td class="td-icon">
<i class="fa fa-caret-right" />
<span v-if="!m.all_chat" class="ms-1"> (team) </span>
</td>
<td class="td-message">
{{
data.translatedText.length === 0
</td>
<td class="td-icon">
<i class="fa fa-caret-right"/>
<span v-if="!m.all_chat" class="ms-1"> (team) </span>
</td>
<td class="td-message">
{{
data.translatedText.length === 0
? m.message
: data.originalChat[id].message
}}
<span
}}
<span
v-if="m.translated_from"
:class="m.translated_from ? 'text-success' : ''"
:title="`Translated from ${ISO6391.getName(m.translated_from)}`"
class="ms-2 helpicon"
>
<br />
>
<br/>
{{ m.message }}
</span>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</div>
@@ -100,7 +99,7 @@
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import {onMounted, reactive} from "vue";
import {
constructAvatarUrl,
ConvertTickToTime,
@@ -118,34 +117,32 @@ import type {MatchChat, MatchChatItem, MatchStats} from "@/types";
const matchDetailsStore = useMatchDetailsStore();
const infoStoreState = useInfoStateStore();
interface ChatStats extends MatchStats, MatchChatItem {}
interface ChatStats extends MatchStats, MatchChatItem {
}
const data = reactive({
chat: [] as ChatStats[],
translatedText: [] as ChatStats[],
originalChat: [],
originalChat: [] as ChatStats[],
clientWidth: 0,
});
const handleTranslatedText = async (e: PromiseLike<[any, any]> | [any, any]) => {
const [res, toggle] = await e;
if (res !== null) {
if (toggle === "translated") {
data.translatedText = await setPlayer(sortChatHistory(res, true));
data.chat = data.translatedText;
} else if (toggle === "original") {
data.chat = data.originalChat;
}
const handleTranslatedText = (e: string) => {
if (e === "translated") {
data.translatedText = setPlayer(sortChatHistory(matchDetailsStore.matchChat, true));
data.chat = data.translatedText;
} else if (e === "original") {
data.chat = data.originalChat;
}
};
console.log(matchDetailsStore.matchChat)
}
const getChatHistory = async () => {
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.chat = setPlayer(sortChatHistory(resData));
data.originalChat = data.chat;
}
};
@@ -171,7 +168,7 @@ const sortChatHistory = (res: MatchChat = {}, translated = false): MatchChatItem
return arr;
};
const setPlayer = async (chat: MatchChatItem[]): ChatStats[] => {
const setPlayer = (chat: MatchChatItem[]): ChatStats[] => {
let arr: ChatStats[] = [];
for (const o of chat) {
for (const p of matchDetailsStore.matchDetails.stats || []) {
@@ -189,10 +186,10 @@ const setPlayer = async (chat: MatchChatItem[]): ChatStats[] => {
game_ban_date: p.player?.game_ban_date,
tick: o.tick,
tick_rate:
matchDetailsStore.matchDetails.tick_rate &&
matchDetailsStore.matchDetails.tick_rate !== -1
? matchDetailsStore.matchDetails.tick_rate
: 64,
matchDetailsStore.matchDetails.tick_rate &&
matchDetailsStore.matchDetails.tick_rate !== -1
? matchDetailsStore.matchDetails.tick_rate
: 64,
all_chat: o.all_chat,
message: o.message,
translated_from: o.translated_from,

25
src/components/TranslateChatButton.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="toggle-btn text-muted">
<div class="d-flex" @click.prevent="$emit('translated', handleBtnClick())">
<div class="d-flex" @click.prevent="handleBtnClick">
<span class="text-center mx-2">
<i id="toggle-off" class="fa fa-toggle-off show" />
<i id="toggle-on" class="fa fa-toggle-on" />
@@ -22,7 +22,7 @@
</div>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import ISO6391 from "iso-639-1";
import { GetChatHistoryTranslated } from "@/utils";
@@ -32,14 +32,8 @@ import { useInfoStateStore } from "@/stores/infoState";
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]
(e: "translated", toggle: string): void;
}>();
const data = reactive({
@@ -71,20 +65,21 @@ const handleBtnClick = async () => {
) as HTMLElement;
refreshButton.classList.add("show");
toggleShow();
// TODO: Needs more work
// TODO: Add langCode
const [response, info] = await GetChatHistoryTranslated(
matchDetailsStore.matchDetails.match_id
);
if (info.message !== "") infoStateStore.addInfo(info);
if (response !== null) {
matchDetailsStore.matchChat = response;
if (refreshButton.classList.contains("show"))
refreshButton.classList.remove("show");
toggleShow();
if (refreshButton.classList.contains("show"))
refreshButton.classList.remove("show");
}
return [response, toggle.value];
emit("translated", toggle.value);
};
const toggleShow = () => {

4
src/stores/matchDetails.ts
View File

@@ -1,8 +1,9 @@
import { defineStore } from "pinia";
import type { Match } from "@/types";
import type { Match, MatchChat } from "@/types";
export type RootState = {
matchDetails: Match;
matchChat: MatchChat;
};
export const useMatchDetailsStore = defineStore({
@@ -10,6 +11,7 @@ export const useMatchDetailsStore = defineStore({
state: () =>
({
matchDetails: {},
matchChat: {},
} as RootState),
actions: {},
getters: {},