wip

2022-03-26 17:45:14 +01:00
parent 552188c8a9
commit 106ef97ede
7 changed files with 432 additions and 417 deletions
--- a/package.json
+++ b/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",
--- a/src/components/EqValueGraph.vue
+++ b/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,245 +28,252 @@ 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(
-      window.innerWidth >= 800 && window.innerWidth <= 1200
-        ? window.innerWidth
-        : window.innerWidth < 800
-        ? 800
-        : 1200
-    );
-    const height = ref((width.value * 1) / 3);
+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 data = reactive({
-      rounds: {},
-      team: [],
-      eq_team_1: [],
-      eq_team_2: [],
-      eq_team_player_1: [],
-      eq_team_player_2: [],
-    });
+interface eqTeamPlayer {
+  round: string;
+  player: string;
+  eq: number;
+}

-    const getTeamPlayer = (stats, team) => {
-      let arr = [];
-      for (let i = (team - 1) * 5; i < team * 5; i++) {
-        arr.push(stats[i].player.steamid64);
-      }
+const data = reactive({
+  rounds: {} as MatchRounds,
+  team: [],
+  eq_team_1: [],
+  eq_team_2: [],
+  eq_team_player_1: [] as eqTeamPlayer[],
+  eq_team_player_2: [] as eqTeamPlayer[],
+});

-      return arr;
-    };
+const getTeamPlayer = (stats: MatchStats[], team: number) => {
+  let arr = [];
+  for (let i = (team - 1) * 5; i < team * 5; i++) {
+    const player = stats[i];
+    arr.push(player?.player?.steamid64);
+  }

-    const parseObject = async () => {
-      data.rounds = await GetPlayerValue(
-        store,
-        store.state.matchDetails.match_id
-      );
-      if (data.rounds === null) data.rounds = {};
+  return arr;
+};

-      for (const round in data.rounds) {
-        for (const player in data.rounds[round]) {
-          for (let p in data.team[0]) {
-            if (data.team[0][p] === player) {
-              data.eq_team_player_1.push({
-                round: round,
-                player: player,
-                eq:
-                  data.rounds[round][player][0] + data.rounds[round][player][2],
-              });
-            }
-          }
-          for (let p in data.team[1]) {
-            if (data.team[1][p] === player) {
-              data.eq_team_player_2.push({
-                round: round,
-                player: player,
-                eq:
-                  data.rounds[round][player][0] + data.rounds[round][player][2],
-              });
-            }
-          }
+const parseObject = async () => {
+  const [res, info] = await GetPlayerValue(
+    matchDetailsStore.matchDetails.match_id
+  );
+
+  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]) {
+      for (let p in data.team[0]) {
+        if (data.team[0][p] === player) {
+          data.eq_team_player_1.push({
+            round: round,
+            player: player,
+            eq: data.rounds[round][player][0] + data.rounds[round][player][0],
+          });
        }
      }
-    };
-
-    const sumArr = (arr) => {
-      return arr.reduce(
-        (acc, current) => ({
-          ...acc,
-          [current.round]: (acc[current.round] || 0) + current.eq,
-        }),
-        {}
-      );
-    };
-
-    const BuildGraphData = (team_1, team_2, max_rounds) => {
-      let newArr = [];
-      const half_point = max_rounds / 2 - 1;
-      for (let round in team_1) {
-        if (round <= half_point) {
-          newArr.push(team_1[round] - team_2[round]);
-        } else newArr.push(team_2[round] - team_1[round]);
+      for (let p in data.team[1]) {
+        if (data.team[1][p] === player) {
+          data.eq_team_player_2.push({
+            round: round,
+            player: player,
+            eq: data.rounds[round][player][0] + data.rounds[round][player][2],
+          });
+        }
      }
-      return newArr;
-    };
+    }
+  }
+};

-    const optionGen = (dataList, valueList) => {
-      return {
-        // Make gradient line here
-        visualMap: [
-          {
-            show: false,
-            type: "continuous",
-            seriesIndex: 0,
-            color: ["#3a6e99", "#c3a235"],
-          },
-        ],
-        tooltip: {
-          trigger: "axis",
-          formatter: "Round <b>{b0}</b><br />{a0} <b>{c0}</b>",
+// TODO: REWORK
+
+const sumArr = (arr: eqTeamPlayer[]) => {
+  return arr.reduce(
+    (acc, current) => ({
+      ...acc,
+      [current.round]: (acc[current.round] || 0) + current.eq,
+    }),
+    {}
+  );
+};
+
+const BuildGraphData = (team_1, team_2, max_rounds) => {
+  let newArr = [];
+  const half_point = max_rounds / 2 - 1;
+  for (let round in team_1) {
+    if (round <= half_point) {
+      newArr.push(team_1[round] - team_2[round]);
+    } else newArr.push(team_2[round] - team_1[round]);
+  }
+  return newArr;
+};
+
+const optionGen = (dataList, valueList) => {
+  return {
+    // Make gradient line here
+    visualMap: [
+      {
+        show: false,
+        type: "continuous",
+        seriesIndex: 0,
+        color: ["#3a6e99", "#c3a235"],
+      },
+    ],
+    tooltip: {
+      trigger: "axis",
+      formatter: "Round <b>{b0}</b><br />{a0} <b>{c0}</b>",
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: dataList,
+      },
+    ],
+    yAxis: [{}],
+    grid: [
+      {
+        bottom: "10%",
+      },
+      {
+        top: "0%",
+      },
+      {
+        right: "0%",
+      },
+      {
+        left: "0%",
+      },
+    ],
+    series: [
+      {
+        name: "Net-Worth",
+        type: "line",
+        lineStyle: {
+          width: 4,
        },
-        xAxis: [
-          {
-            type: "category",
-            data: dataList,
-          },
-        ],
-        yAxis: [{}],
-        grid: [
-          {
-            bottom: "10%",
-          },
-          {
-            top: "0%",
-          },
-          {
-            right: "0%",
-          },
-          {
-            left: "0%",
-          },
-        ],
-        series: [
-          {
-            name: "Net-Worth",
-            type: "line",
-            lineStyle: {
-              width: 4,
-            },
-            showSymbol: false,
-            data: valueList,
-            markArea: {
-              data: [
-                [
-                  {
-                    name: "Half-Point",
-                    xAxis: max_rounds / 2 - 1,
-                    label: {
-                      color: "white",
-                    },
-                  },
-                  {
-                    xAxis: max_rounds / 2,
-                  },
-                ],
-              ],
-              itemStyle: {
-                color: "rgba(200,200,200, 0.3)",
+        showSymbol: false,
+        data: valueList,
+        markArea: {
+          data: [
+            [
+              {
+                name: "Half-Point",
+                xAxis: max_rounds / 2 - 1,
+                label: {
+                  color: "white",
+                },
              },
-            },
+              {
+                xAxis: max_rounds / 2,
+              },
+            ],
+          ],
+          itemStyle: {
+            color: "rgba(200,200,200, 0.3)",
          },
-        ],
-      };
-    };
+        },
+      },
+    ],
+  };
+};

-    const disposeCharts = () => {
-      if (myChart1 != null && myChart1 !== "" && myChart1 !== undefined) {
-        myChart1.dispose();
-      }
-    };
+const disposeCharts = () => {
+  if (myChart1 != null && myChart1 !== "" && myChart1 !== undefined) {
+    myChart1.dispose();
+  }
+};

-    const buildCharts = () => {
-      disposeCharts();
+const buildCharts = () => {
+  disposeCharts();

-      myChart1 = echarts.init(
-        document.getElementById("economy-graph"),
-        {},
-        {
-          width: width.value,
-          height: height.value,
-        }
-      );
-      myChart1.setOption(optionGen(dataList, valueList));
-    };
+  myChart1 = echarts.init(
+    document.getElementById("economy-graph"),
+    {},
+    {
+      width: width.value,
+      height: height.value,
+    }
+  );
+  myChart1.setOption(optionGen(dataList, valueList));
+};

-    onBeforeMount(() => {
-      max_rounds = store.state.matchDetails.max_rounds
-        ? store.state.matchDetails.max_rounds
-        : 30;
-    });
+onBeforeMount(() => {
+  max_rounds = store.state.matchDetails.max_rounds
+    ? store.state.matchDetails.max_rounds
+    : 30;
+});

-    onMounted(() => {
-      if (store.state.matchDetails.stats) {
-        echarts.use([
-          TitleComponent,
-          TooltipComponent,
-          GridComponent,
-          VisualMapComponent,
-          LineChart,
-          CanvasRenderer,
-          UniversalTransition,
-          MarkAreaComponent,
-        ]);
+onMounted(() => {
+  if (store.state.matchDetails.stats) {
+    echarts.use([
+      TitleComponent,
+      TooltipComponent,
+      GridComponent,
+      VisualMapComponent,
+      LineChart,
+      CanvasRenderer,
+      UniversalTransition,
+      MarkAreaComponent,
+    ]);

-        data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1));
-        data.team.push(getTeamPlayer(store.state.matchDetails.stats, 2));
+    data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1));
+    data.team.push(getTeamPlayer(store.state.matchDetails.stats, 2));

-        parseObject();
-      }
-    });
+    parseObject();
+  }
+});

-    onUnmounted(() => {
-      disposeCharts();
-    });
+onUnmounted(() => {
+  disposeCharts();
+});

-    watch(
-      () => data.rounds,
-      () => {
-        data.eq_team_1 = sumArr(data.eq_team_player_1);
-        data.eq_team_2 = sumArr(data.eq_team_player_2);
+watch(
+  () => data.rounds,
+  () => {
+    data.eq_team_1 = sumArr(data.eq_team_player_1);
+    data.eq_team_2 = sumArr(data.eq_team_player_2);

-        valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds);
+    valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds);

-        dataList = Array.from(Array(valueList.length + 1).keys());
-        dataList.shift();
+    dataList = Array.from(Array(valueList.length + 1).keys());
+    dataList.shift();

-        buildCharts();
-      }
-    );
+    buildCharts();
+  }
+);

-    window.onresize = () => {
-      if (window.innerWidth > 1200) {
-        width.value = 1200;
-      }
-      if (window.innerWidth <= 1200 && window.innerWidth >= 800) {
-        width.value = window.innerWidth - 20;
-      }
-      if (window.innerWidth < 800) {
-        width.value = 800;
-      }
+window.onresize = () => {
+  if (window.innerWidth > 1200) {
+    width.value = 1200;
+  }
+  if (window.innerWidth <= 1200 && window.innerWidth >= 800) {
+    width.value = window.innerWidth - 20;
+  }
+  if (window.innerWidth < 800) {
+    width.value = 800;
+  }

-      height.value = (width.value * 1) / 3;
-      buildCharts();
-    };
-  },
+  height.value = (width.value * 1) / 3;
+  buildCharts();
 };
 </script>

--- a/src/components/FlashChart.vue
+++ b/src/components/FlashChart.vue
@@ -35,6 +35,7 @@
 </template>

 <script>
+// TODO: REWORK
 import * as echarts from "echarts/core";
 import {
  GridComponent,
--- a/src/components/MatchChatHistory.vue
+++ b/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,131 +108,119 @@ 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: [],
-      originalChat: [],
-      clientWidth: 0,
-    });
+interface ChatStats extends MatchStats, MatchChatItem {}

-    const handleTranslatedText = async (e) => {
-      const [res, toggle] = await e;
+const data = reactive({
+  chat: [] as ChatStats[],
+  translatedText: [] as ChatStats[],
+  originalChat: [],
+  clientWidth: 0,
+});

-      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 = async (e: PromiseLike<[any, any]> | [any, any]) => {
+  const [res, toggle] = await e;

-    const getChatHistory = async () => {
-      const resData = await GetChatHistory(
-        store,
-        store.state.matchDetails.match_id
-      );
-      if (resData !== null) {
-        data.chat = await setPlayer(sortChatHistory(resData));
-        data.originalChat = data.chat;
-      }
-    };
-
-    const sortChatHistory = (res = {}, translated = false) => {
-      let arr = [];
-      if (res !== {}) {
-        Object.keys(res).forEach((i) => {
-          res[i].forEach((o) => {
-            let obj = Object.assign({
-              player: i,
-              tick: o.tick,
-              all_chat: o.all_chat,
-              message: o.message,
-              translated_from: translated ? o.translated_from : null,
-              translated_to: translated ? o.translated_to : null,
-            });
-            arr.push(obj);
-          });
-        });
-      }
-      arr.sort((a, b) => a.tick - b.tick);
-      return arr;
-    };
-
-    const setPlayer = async (chat) => {
-      let arr = [];
-      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,
-              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,
-              tick: o.tick,
-              tick_rate:
-                store.state.matchDetails.tick_rate &&
-                store.state.matchDetails.tick_rate !== -1
-                  ? store.state.matchDetails.tick_rate
-                  : 64,
-              all_chat: o.all_chat,
-              message: o.message,
-              translated_from: o.translated_from,
-              translated_to: o.translated_to,
-            });
-            arr.push(obj);
-          }
-        }
-      }
-      return arr;
-    };
-
-    const sizeTable = () => {
-      if (document.documentElement.clientWidth <= 768) {
-        data.clientWidth = document.documentElement.clientWidth - 32;
-      } else {
-        data.clientWidth = 700;
-      }
-    };
-
-    window.onresize = () => {
-      sizeTable();
-    };
-
-    onMounted(() => {
-      getChatHistory();
-      sizeTable();
-    });
-
-    return {
-      data,
-      store,
-      ISO6391,
-      constructAvatarUrl,
-      GoToPlayer,
-      ConvertTickToTime,
-      FormatVacDate,
-      handleTranslatedText,
-    };
-  },
+  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 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: MatchChat = {}, translated = false): MatchChatItem[] => {
+  let arr = [] as MatchChatItem[];
+  if (res !== {}) {
+    Object.keys(res).forEach((i) => {
+      res[i].forEach((o) => {
+        let obj = Object.assign({
+          player: i,
+          tick: o.tick,
+          all_chat: o.all_chat,
+          message: o.message,
+          translated_from: translated ? o.translated_from : null,
+          translated_to: translated ? o.translated_to : null,
+        });
+        arr.push(obj);
+      });
+    });
+  }
+  arr.sort((a, b) => a.tick - b.tick);
+  return arr;
+};
+
+const setPlayer = async (chat: MatchChatItem[]): ChatStats[] => {
+  let arr: ChatStats[] = [];
+  for (const o of chat) {
+    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,
+          tick: o.tick,
+          tick_rate:
+            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,
+          translated_to: o.translated_to,
+        });
+        arr.push(obj);
+      }
+    }
+  }
+  return arr;
+};
+
+const sizeTable = () => {
+  if (document.documentElement.clientWidth <= 768) {
+    data.clientWidth = document.documentElement.clientWidth - 32;
+  } else {
+    data.clientWidth = 700;
+  }
+};
+
+window.onresize = () => {
+  sizeTable();
+};
+
+onMounted(() => {
+  getChatHistory();
+  sizeTable();
+});
 </script>

 <style lang="scss" scoped>
--- a/src/components/TranslateChatButton.vue
+++ b/src/components/TranslateChatButton.vue
@@ -22,86 +22,89 @@
  </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({
-      browserIsoCode: "",
-      browserLangCode: "",
-      browserLang: "",
-    });
+// TODO: Maybe remove props
+const props = defineProps<{
+  translated: boolean;
+}>();

-    const toggle = ref("original");
+// TODO: needs more work
+const emit = defineEmits<{
+  (e: "translate", ): [MatchChat || null, string]
+}>();

-    const setLanguageVariables = () => {
-      const navLangs = navigator.languages;
+const data = reactive({
+  browserIsoCode: "",
+  browserLangCode: "",
+  browserLang: "",
+});

-      data.browserIsoCode = navLangs.find((l) => l.length === 5);
-      data.browserLangCode = navLangs[0];
+const toggle = ref("original");

-      if (ISO6391.validate(data.browserLangCode)) {
-        data.browserLang = ISO6391.getNativeName(data.browserLangCode);
-      } else {
-        data.browserIsoCode = "en-US";
-        data.browserLangCode = "en";
-        data.browserLang = "English";
-      }
-    };
+const setLanguageVariables = () => {
+  const navLangs = navigator.languages;

-    const handleBtnClick = async () => {
-      let response;
+  data.browserIsoCode = navLangs.find((l) => l.length === 5) || "";
+  data.browserLangCode = navLangs[0];

-      const refreshButton = document.querySelector(".loading-icon .fa-spinner");
-      refreshButton.classList.add("show");
-
-      toggleShow();
-
-      response = await GetChatHistoryTranslated(
-        store,
-        store.state.matchDetails.match_id
-      );
-
-      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");
-
-      if (offBtn.classList.contains("show")) {
-        offBtn.classList.remove("show");
-        onBtn.classList.add("show");
-        toggle.value = "translated";
-      } else if (onBtn.classList.contains("show")) {
-        onBtn.classList.remove("show");
-        offBtn.classList.add("show");
-        toggle.value = "original";
-      }
-    };
-
-    onMounted(() => {
-      setLanguageVariables();
-    });
-    return { data, toggle, handleBtnClick };
-  },
+  if (ISO6391.validate(data.browserLangCode)) {
+    data.browserLang = ISO6391.getNativeName(data.browserLangCode);
+  } else {
+    data.browserIsoCode = "en-US";
+    data.browserLangCode = "en";
+    data.browserLang = "English";
+  }
 };
+
+const handleBtnClick = async () => {
+  const refreshButton = document.querySelector(
+    ".loading-icon .fa-spinner"
+  ) 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 (refreshButton.classList.contains("show"))
+    refreshButton.classList.remove("show");
+
+  return [response, toggle.value];
+};
+
+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");
+    onBtn.classList.add("show");
+    toggle.value = "translated";
+  } else if (onBtn.classList.contains("show")) {
+    onBtn.classList.remove("show");
+    offBtn.classList.add("show");
+    toggle.value = "original";
+  }
+};
+
+onMounted(() => {
+  setLanguageVariables();
+});
 </script>

 <style lang="scss" scoped>
--- a/src/types/MatchChat.ts
+++ b/src/types/MatchChat.ts
@@ -1,14 +1,14 @@
 import type { Player } from "@/types/Player";

 export interface MatchChat {
-  [key: string]: [
-    {
-      player?: Player;
-      message: string;
-      all_chat: boolean;
-      tick: number;
-      translated_from?: string;
-      translated_to?: string;
-    }
-  ];
+  [key: string]: MatchChatItem[];
+}
+
+export interface MatchChatItem {
+  player?: Player;
+  message: string;
+  all_chat: boolean;
+  tick: number;
+  translated_from?: string;
+  translated_to?: string;
 }
--- a/yarn.lock
+++ b/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