<template>
  <div class="game">
    <canvas
      class="game-canvas"
      ref="canvas">
    </canvas>
  </div>
</template>

<script>
import { send } from '@/store/socketPlugin'
export default {
  name: 'Game',
  data () {
    return {
      mouse: {
        x: 0,
        y: 0
      },
      camera: {
        x: 0,
        y: 0
      },
      leaderboard: [],
      renderTimer: null
    }
  },
  computed: {
    canvas () {
      return this.$refs.canvas
    },
    context () {
      return this.canvas.getContext('2d')
    },
    settings () {
      return this.$store.state.game.settings
    },
    player () {
      return this.$store.state.game.player
    },
    players () {
      const pastUpdate = this.$store.state.game.updates[0]
      const nextUpdate = this.$store.state.game.updates[1]

      if (pastUpdate === undefined) return []
      if (pastUpdate.players === undefined) return []
      if (nextUpdate === undefined) return pastUpdate.players

      return pastUpdate.players

      /*
      const currentTime = Date.now() / 1000
      const dt = (currentTime - pastUpdate.time) / (nextUpdate.time - pastUpdate.time)
      return pastUpdate.players.map(player => this.interpolatePlayer(player, nextUpdate.players.find(nextPlayer => player.color === nextPlayer.color), dt))
      */
    },
    isPaused () {
      return this.$store.state.game.paused
    }
  },
  mounted () {
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    this.canvas.addEventListener('mousemove', this.mouseEvent)
    this.canvas.addEventListener('touchmove', this.touchEvent)
    this.renderTimer = setInterval(this.render, 1000 / 60)
  },
  methods: {
    render () {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.renderBorders()

      if (!this.players) return

      this.players.sort((a, b) => {
        return a.walls.length - b.walls.length
      })
      this.leaderboard = []

      this.players.forEach(player => {
        if (player.color === this.player.color) {
          this.camera.x = player.x
          this.camera.y = player.y
          this.renderDebug(player)
        }
        this.renderPlayer(player)
        this.renderWalls(player)
        this.leaderboard.push(player.id + ' - ' + player.walls.length)
      })

      this.renderLeaderboard()
    },
    renderBorders () {
      this.context.strokeStyle = 'black'
      this.context.lineWidth = 1
      this.context.strokeRect(this.canvas.width / 2 - this.camera.x, this.canvas.height / 2 - this.camera.y, this.settings.arenaSize, this.settings.arenaSize)
    },
    renderPlayer (player) {
      this.context.save()

      const canvasX = this.canvas.width / 2 + player.x - this.camera.x
      const canvasY = this.canvas.height / 2 + player.y - this.camera.y

      this.context.translate(canvasX, canvasY)
      this.context.rotate(player.angle)
      this.context.fillStyle = player.color
      this.context.fillRect(-this.settings.playerSize, -this.settings.playerSize, this.settings.playerSize * 2, this.settings.playerSize * 2)
      this.context.translate(0, 0)

      this.context.restore()
    },
    renderWalls (player) {
      this.context.beginPath()
      this.context.lineWidth = this.settings.wallSize
      this.context.strokeStyle = player.color
      player.walls.forEach(wall => {
        const canvasX = this.canvas.width / 2 + wall.x - this.camera.x
        const canvasY = this.canvas.height / 2 + wall.y - this.camera.y
        this.context.lineTo(canvasX, canvasY)
      })
      this.context.lineTo(this.canvas.width / 2 + player.x - this.camera.x, this.canvas.height / 2 + player.y - this.camera.y)
      this.context.stroke()
    },
    renderDebug (player) {
      const canvasX = this.canvas.width / 2
      const canvasY = this.canvas.height / 2

      this.context.textAlign = 'start'
      this.context.fillText('player x: ' + player.x + ' y:' + player.y, 10, 12)
      this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 24)
      this.context.fillText('canvasX: ' + canvasX + ' canvasY:' + canvasY, 10, 36)
      this.context.fillText('walls: ' + player.walls.length, 10, 48)

      this.context.beginPath()
      this.context.arc(this.mouse.x, this.mouse.y, 25, 0, 2 * Math.PI, false)
      this.context.lineWidth = 1
      this.context.strokeStyle = player.color
      this.context.stroke()
    },
    renderLeaderboard () {
      this.context.textAlign = 'end'
      this.context.fillText('Leaderboard: ', this.canvas.width - 50, 10)
      for (var i = 0; i < this.leaderboard.length; i++) {
        this.context.fillText(this.players[i].color + ' - ' + this.players[i].walls.length, this.canvas.width - 50, 15 + (i + 1) * 10)
      }
    },
    mouseEvent (event) {
      var rect = this.canvas.getBoundingClientRect()
      this.mouse.x = event.clientX - rect.left
      this.mouse.y = event.clientY - rect.top

      this.sendAngleUpdate()
    },
    touchEvent (event) {
      var rect = this.canvas.getBoundingClientRect()
      this.mouse.x = event.touch[0].clientX - rect.left
      this.mouse.y = event.touch[0].clientY - rect.top

      this.sendAngleUpdate()
    },
    sendAngleUpdate () {
      var dx = this.mouse.x - this.canvas.width / 2
      var dy = this.mouse.y - this.canvas.height / 2

      this.player.targetAngle = Math.atan2(dy, dx)
      this.player.angle = this.player.targetAngle
      send({ message: this.player, type: 'update' })
    },
    updatePlayer (player) {
      player.x += this.settings.playerSpeed * Math.cos(player.angle)
      player.y += this.settings.playerSpeed * Math.sin(player.angle)

      player.angle = player.targetAngle
      // angle lag
      /*
      if (this.player.targetAngle !== this.player.angle) {
        const delta = this.player.targetAngle - this.player.angle
        if (delta < 0) this.player.angle += delta / this.settings.playerTurnSpeed
        if (delta > 0) this.player.angle += delta / this.settings.playerTurnSpeed
        if (delta <= 0.1 && delta >= -0.1) this.player.angle = this.player.targetAngle
      }
      */
    },
    interpolatePlayer (pastPlayer, nextPlayer, dt) {
      var player = {}
      player.color = pastPlayer.color
      player.walls = pastPlayer.walls
      player.lastWall = pastPlayer.lastWall

      player.x = pastPlayer.x + (nextPlayer.x - pastPlayer.x) * dt
      player.y = pastPlayer.y + (nextPlayer.y - pastPlayer.y) * dt

      player.angle = pastPlayer.angle + (nextPlayer.angle - pastPlayer.angle) * dt
      player.targetAngle = pastPlayer.targetAngle + (nextPlayer.targetAngle - pastPlayer.targetAngle) * dt

      return player
    }
  }
}
</script>
