LeagueStats/client/src/mixins/liveGame.js

import { gameModes } from '@/data/data.js'
import { sortTeamByRole } from '@/helpers/functions.js'
import { mapState } from 'vuex'

export const liveGame = {
  data() {
    return {
      gameLength: 0,
    }
  },

  computed: {
    allyTeam() {
      if (!this.current || !this.current.participants) {
        return []
      }
      return this.current.participants
        .filter((p) => p.teamId === this.teamColor)
        .sort(this.sortTeamByRole)
    },
    displayStartTime() {
      if (this.current.gameStartTime === 0) {
        return 'Not started yet'
      }
      return this.$options.filters.secToTime(this.gameLength, true)
    },
    enemyTeam() {
      if (!this.current || !this.current.participants) {
        return []
      }
      return this.current.participants
        .filter((p) => p.teamId !== this.teamColor)
        .sort(this.sortTeamByRole)
    },
    gamemode() {
      if (this.current.participants) {
        return this.current.gameType === 'CUSTOM_GAME'
          ? { type: '', name: 'Custom Game' }
          : gameModes[this.current.gameQueueConfigId]
      } else {
        return { type: '', name: '' }
      }
    },
    gameStartTime() {
      return this.current ? this.current.gameStartTime : 0
    },
    teamColor() {
      return this.current.participants.find((p) => p.summonerId === this.account.id).teamId
    },
    ...mapState({
      account: (state) => state.summoner.basic.account,
      current: (state) => state.summoner.live.match,
    }),
  },

  created() {
    this.updateGameLength()

    setInterval(() => {
      this.gameLength++
    }, 1000)
  },

  watch: {
    gameStartTime() {
      this.updateGameLength()
    },
  },

  methods: {
    updateGameLength() {
      if (this.gameStartTime === 0) {
        return (this.gameLength = 0)
      }

      this.gameLength = (new Date() - new Date(this.gameStartTime)) / 1000
    },
    sortTeamByRole,
  },
}