updated MatchChat

package.json

@@ -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",

src/components/MatchChatHistory.vue

@@ -1,43 +1,42 @@
 <template>
   <div class="container w-50">
     <TranslateChatButton
-      v-if="data.chat.length > 0"
+        v-if="data.chat.length > 0"
-      :translated="data.translatedText.length > 0"
+        class="translate-btn"
-      class="translate-btn"
+        @translated="handleTranslatedText"
-      @translated="handleTranslatedText"
     />
     <div v-if="data.chat.length > 0" class="chat-history mt-2">
       <table
-        id="chat"
+          id="chat"
-        :style="`max-width: ${data.clientWidth}px; width: ${data.clientWidth}px`"
+          :style="`max-width: ${data.clientWidth}px; width: ${data.clientWidth}px`"
-        class="table table-borderless"
+          class="table table-borderless"
       >
         <tbody>
-          <tr v-for="(m, id) in data.chat" :key="id">
+        <tr v-for="(m, id) in data.chat" :key="id">
-            <td class="td-time">
+          <td class="td-time">
-              {{ ConvertTickToTime(m.tick, m.tick_rate) }}
+            {{ ConvertTickToTime(m.tick, m.tick_rate) }}
-            </td>
+          </td>
-            <td class="td-avatar">
+          <td class="td-avatar">
-              <img
+            <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"
+                    v-if="m.tracked"
-                  class="fa fa-dot-circle-o text-success tracked"
+                    class="fa fa-dot-circle-o text-success tracked"
-                  title="Tracked user"
+                    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>
-            <td class="td-icon">
+          <td class="td-icon">
-              <i class="fa fa-caret-right" />
+            <i class="fa fa-caret-right"/>
-              <span v-if="!m.all_chat" class="ms-1"> (team) </span>
+            <span v-if="!m.all_chat" class="ms-1"> (team) </span>
-            </td>
+          </td>
-            <td class="td-message">
+          <td class="td-message">
-              {{
+            {{
-                data.translatedText.length === 0
+              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>
+          </td>
-          </tr>
+        </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 handleTranslatedText = (e: string) => {
-  const [res, toggle] = await e;
+  if (e === "translated") {
-
+    data.translatedText = setPlayer(sortChatHistory(matchDetailsStore.matchChat, true));
-  if (res !== null) {
+    data.chat = data.translatedText;
-    if (toggle === "translated") {
+  } else if (e === "original") {
-      data.translatedText = await setPlayer(sortChatHistory(res, true));
+    data.chat = data.originalChat;
-      data.chat = data.translatedText;
-    } else if (toggle === "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 &&
-            matchDetailsStore.matchDetails.tick_rate !== -1
+              matchDetailsStore.matchDetails.tick_rate !== -1
-              ? matchDetailsStore.matchDetails.tick_rate
+                  ? matchDetailsStore.matchDetails.tick_rate
-              : 64,
+                  : 64,
           all_chat: o.all_chat,
           message: o.message,
           translated_from: o.translated_from,

src/components/TranslateChatButton.vue

@@ -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"))
+    toggleShow();
-    refreshButton.classList.remove("show");
+    if (refreshButton.classList.contains("show"))
+      refreshButton.classList.remove("show");
+  }
 
-  return [response, toggle.value];
+  emit("translated", toggle.value);
 };
 
 const toggleShow = () => {

src/stores/matchDetails.ts

@@ -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: {},