wip

package.json

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

src/components/EqValueGraph.vue

@@ -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,48 +28,57 @@ 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 = [];
-    const width = ref(
+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
     : window.innerWidth < 800
     ? 800
     : 1200
-    );
-    const height = ref((width.value * 1) / 3);
+);
+const height = ref((width.value * 1) / 3);
 
-    const data = reactive({
-      rounds: {},
+interface eqTeamPlayer {
+  round: string;
+  player: string;
+  eq: number;
+}
+
+const data = reactive({
+  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 parseObject = async () => {
+  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,16 +96,17 @@ 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],
           });
         }
       }
     }
   }
-    };
+};
 
-    const sumArr = (arr) => {
+// TODO: REWORK
+
+const sumArr = (arr: eqTeamPlayer[]) => {
   return arr.reduce(
     (acc, current) => ({
       ...acc,
@@ -106,9 +114,9 @@ export default {
     }),
     {}
   );
-    };
+};
 
-    const BuildGraphData = (team_1, team_2, max_rounds) => {
+const BuildGraphData = (team_1, team_2, max_rounds) => {
   let newArr = [];
   const half_point = max_rounds / 2 - 1;
   for (let round in team_1) {
@@ -117,9 +125,9 @@ export default {
     } else newArr.push(team_2[round] - team_1[round]);
   }
   return newArr;
-    };
+};
 
-    const optionGen = (dataList, valueList) => {
+const optionGen = (dataList, valueList) => {
   return {
     // Make gradient line here
     visualMap: [
@@ -186,15 +194,15 @@ export default {
       },
     ],
   };
-    };
+};
 
-    const disposeCharts = () => {
+const disposeCharts = () => {
   if (myChart1 != null && myChart1 !== "" && myChart1 !== undefined) {
     myChart1.dispose();
   }
-    };
+};
 
-    const buildCharts = () => {
+const buildCharts = () => {
   disposeCharts();
 
   myChart1 = echarts.init(
@@ -206,15 +214,15 @@ export default {
     }
   );
   myChart1.setOption(optionGen(dataList, valueList));
-    };
+};
 
-    onBeforeMount(() => {
+onBeforeMount(() => {
   max_rounds = store.state.matchDetails.max_rounds
     ? store.state.matchDetails.max_rounds
     : 30;
-    });
+});
 
-    onMounted(() => {
+onMounted(() => {
   if (store.state.matchDetails.stats) {
     echarts.use([
       TitleComponent,
@@ -232,13 +240,13 @@ export default {
 
     parseObject();
   }
-    });
+});
 
-    onUnmounted(() => {
+onUnmounted(() => {
   disposeCharts();
-    });
+});
 
-    watch(
+watch(
   () => data.rounds,
   () => {
     data.eq_team_1 = sumArr(data.eq_team_player_1);
@@ -251,9 +259,9 @@ export default {
 
     buildCharts();
   }
-    );
+);
 
-    window.onresize = () => {
+window.onresize = () => {
   if (window.innerWidth > 1200) {
     width.value = 1200;
   }
@@ -266,8 +274,6 @@ export default {
 
   height.value = (width.value * 1) / 3;
   buildCharts();
-    };
-  },
 };
 </script>
 

src/components/FlashChart.vue

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

src/components/MatchChatHistory.vue

@@ -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();
 
-    const data = reactive({
-      chat: [],
-      translatedText: [],
+interface ChatStats extends MatchStats, MatchChatItem {}
+
+const data = reactive({
+  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) {
@@ -137,21 +138,20 @@ export default {
       data.chat = data.originalChat;
     }
   }
-    };
+};
 
-    const getChatHistory = async () => {
-      const resData = await GetChatHistory(
-        store,
-        store.state.matchDetails.match_id
-      );
+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.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) => {
@@ -169,29 +169,29 @@ export default {
   }
   arr.sort((a, b) => a.tick - b.tick);
   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,
@@ -203,37 +203,24 @@ export default {
     }
   }
   return arr;
-    };
+};
 
-    const sizeTable = () => {
+const sizeTable = () => {
   if (document.documentElement.clientWidth <= 768) {
     data.clientWidth = document.documentElement.clientWidth - 32;
   } else {
     data.clientWidth = 700;
   }
-    };
+};
 
-    window.onresize = () => {
+window.onresize = () => {
   sizeTable();
-    };
+};
 
-    onMounted(() => {
+onMounted(() => {
   getChatHistory();
   sizeTable();
-    });
-
-    return {
-      data,
-      store,
-      ISO6391,
-      constructAvatarUrl,
-      GoToPlayer,
-      ConvertTickToTime,
-      FormatVacDate,
-      handleTranslatedText,
-    };
-  },
-};
+});
 </script>
 
 <style lang="scss" scoped>

src/components/TranslateChatButton.vue

@@ -22,35 +22,38 @@
   </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();
 
-    const data = reactive({
+// 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: "",
   browserLangCode: "",
   browserLang: "",
-    });
+});
 
-    const toggle = ref("original");
+const toggle = ref("original");
 
-    const setLanguageVariables = () => {
+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)) {
@@ -60,30 +63,33 @@ export default {
     data.browserLangCode = "en";
     data.browserLang = "English";
   }
-    };
+};
 
-    const handleBtnClick = async () => {
-      let response;
-
-      const refreshButton = document.querySelector(".loading-icon .fa-spinner");
+const handleBtnClick = async () => {
+  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");
 
   return [response, toggle.value];
-    };
+};
 
-    const toggleShow = () => {
-      const offBtn = document.getElementById("toggle-off");
-      const onBtn = document.getElementById("toggle-on");
+const toggleShow = () => {
+  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");
@@ -94,14 +100,11 @@ export default {
     offBtn.classList.add("show");
     toggle.value = "original";
   }
-    };
-
-    onMounted(() => {
-      setLanguageVariables();
-    });
-    return { data, toggle, handleBtnClick };
-  },
 };
+
+onMounted(() => {
+  setLanguageVariables();
+});
 </script>
 
 <style lang="scss" scoped>

src/types/MatchChat.ts

@@ -1,14 +1,14 @@
 import type { Player } from "@/types/Player";
 
 export interface MatchChat {
-  [key: string]: [
-    {
+  [key: string]: MatchChatItem[];
+}
+
+export interface MatchChatItem {
   player?: Player;
   message: string;
   all_chat: boolean;
   tick: number;
   translated_from?: string;
   translated_to?: string;
-    }
-  ];
 }

yarn.lock

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