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>
+<script setup lang="ts">
-import { GetPlayerValue } from "/src/utils";
+import { GetPlayerValue } from "@/utils";
-import { useStore } from "vuex";
 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 {
+const matchDetailsStore = useMatchDetailsStore();
-  name: "EqValueGraph",
+const infoStateStore = useInfoStateStore();
-  setup() {
-    const store = useStore();
 
-    let myChart1, max_rounds;
+let myChart1: echarts.ECharts, max_rounds: echarts.ECharts;
-    let valueList = [];
+let valueList: any[] = [];
-    let dataList = [];
+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_1: [] as eqTeamPlayer[],
-      eq_team_player_2: [],
+  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(
+  const [res, info] = await GetPlayerValue(
-        store,
+    matchDetailsStore.matchDetails.match_id
-        store.state.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:
+            eq: data.rounds[round][player][0] + data.rounds[round][player][0],
-                  data.rounds[round][player][0] + data.rounds[round][player][2],
           });
         }
       }
@@ -89,8 +96,7 @@ export default {
           data.eq_team_player_2.push({
             round: round,
             player: player,
-                eq:
+            eq: data.rounds[round][player][0] + data.rounds[round][player][2],
-                  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>

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>
+<script setup lang="ts">
-import { useStore } from "vuex";
 import { onMounted, reactive } from "vue";
 import {
   constructAvatarUrl,
@@ -109,24 +108,26 @@ import {
   GetChatHistory,
   GoToPlayer,
   truncate,
-} from "/src/utils";
+} from "@/utils";
-import TranslateChatButton from "/src/components/TranslateChatButton";
+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 {
+const matchDetailsStore = useMatchDetailsStore();
-  name: "MatchChatHistory",
+const infoStoreState = useInfoStateStore();
-  components: { TranslateChatButton },
+
-  setup() {
+interface ChatStats extends MatchStats, MatchChatItem {}
-    const store = useStore();
 
 const data = reactive({
-      chat: [],
+  chat: [] as ChatStats[],
-      translatedText: [],
+  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(
+  const [resData, info] = await GetChatHistory(matchDetailsStore.matchDetails.match_id);
-        store,
+
-        store.state.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) => {
+const sortChatHistory = (res: MatchChat = {}, translated = false): MatchChatItem[] => {
-      let arr = [];
+  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) => {
+const setPlayer = async (chat: MatchChatItem[]): ChatStats[] => {
-      let arr = [];
+  let arr: ChatStats[] = [];
   for (const o of chat) {
-        for (const p of store.state.matchDetails.stats) {
+    for (const p of matchDetailsStore.matchDetails.stats || []) {
-          if (o.player === p.player.steamid64) {
+      if (o.player === p.player?.steamid64) {
-            const obj = Object.assign({
+        const obj: ChatStats = Object.assign({
-              player: truncate(p.player.name, 20),
+          player: truncate(p.player?.name || "", 20),
-              steamid64: p.player.steamid64,
+          steamid64: p.player?.steamid64,
-              avatar: p.player.avatar,
+          avatar: p.player?.avatar,
           color: p.color,
           startSide: p.team_id,
-              tracked: p.player.tracked,
+          tracked: p.player?.tracked,
-              vac: p.player.vac,
+          vac: p.player?.vac,
-              vac_date: p.player.vac_date,
+          vac_date: p.player?.vac_date,
-              game_ban: p.player.game_ban,
+          game_ban: p.player?.game_ban,
-              game_ban_date: p.player.game_ban_date,
+          game_ban_date: p.player?.game_ban_date,
           tick: o.tick,
           tick_rate:
-                store.state.matchDetails.tick_rate &&
+            matchDetailsStore.matchDetails.tick_rate &&
-                store.state.matchDetails.tick_rate !== -1
+            matchDetailsStore.matchDetails.tick_rate !== -1
-                  ? store.state.matchDetails.tick_rate
+              ? 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>

src/components/TranslateChatButton.vue

@@ -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 { GetChatHistoryTranslated } from "@/utils";
-import { useStore } from "vuex";
+import { useMatchDetailsStore } from "@/stores/matchDetails";
+import { useInfoStateStore } from "@/stores/infoState";
 
-export default {
+const matchDetailsStore = useMatchDetailsStore();
-  name: "TranslateChatButton",
+const infoStateStore = useInfoStateStore();
-  props: {
+
-    translated: {
+// TODO: Maybe remove props
-      type: Boolean,
+const props = defineProps<{
-      required: true,
+  translated: boolean;
-    },
+}>();
-  },
+
-  setup() {
+// TODO: needs more work
-    const store = useStore();
+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(
+  // TODO: Needs more work
-        store,
+  // TODO: Add langCode
-        store.state.matchDetails.match_id
+  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 offBtn = document.getElementById("toggle-off") as HTMLElement;
-      const onBtn = document.getElementById("toggle-on");
+  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>

src/types/MatchChat.ts

@@ -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;
 }
-  ];
-}

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