<script>
  export default {
    name: 'App',
    components: {
    },
    data() {
      return {
        content: ["", "", "", "", "", "", "", "", ""],
        turn: true,
        isOver: false,
        winner: null,
        isTie: false
      }
    },
    methods: {
      draw(index) {
        // send event to socket.io
        if(this.turn) {
          // if turn is true then mark as X or mark as O
          this.content[index] = "X"
        } else {
          this.content[index] = "O"
        }
        this.turn = !this.turn;
        // calculate the winner
        this.calculateWinner();
        this.calculateTie()
      },
      calculateWinner() {
        const WIN_CONDITIONS = [
          // rows
          [0, 1, 2], [3, 4, 5], [6, 7, 8],
          // cols
          [0, 3, 6], [1, 4, 7], [2, 5, 8],

          // diagonals

          [0, 4, 8], [2, 4, 6]

        ];
        for (let i = 0; i < WIN_CONDITIONS.length; i++) {
          let firstIndex = WIN_CONDITIONS[i][0];
          let secondIndex = WIN_CONDITIONS[i][1];
          let thirdIndex = WIN_CONDITIONS[i][2];
          if(this.content[firstIndex] == this.content[secondIndex] &&
                  this.content[firstIndex] == this.content[thirdIndex] &&
                  this.content[firstIndex] != "") {
            this.isOver = true;
            this.winner = this.content[firstIndex];
          }
        }
      },
      calculateTie(){
        for (let i = 0 ; i<= 8 ; i++) {
          if(this.content[i] == "") {
            return
          }
        }
        this.isTie = true
      },
    }
  }
</script>