Tic Tac Toe

by gol ngaz²

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">HTML
  <div class="container">
    <div v-for="i in [0,1,2]" class="row">
      <div v-for="j in [0,1,2]" @click="play((i*3)+j)" class="cell">
        <span>{{grid[(i*3)+j]}}</span>
      </div>
    </div>
  </div>
  <div v-if="win">
    le joueur {{win}} a gagné
  </div>
</div>

CSS

.container {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
}
.row {
  height: 33.333333%;
  width:100%;
  display: flex;
  flex: 1 1 auto;
}
.cell {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  font-size: 50px;
  font-family: sans-serif;
  width:33.3333333%;
}

JavaScript

new Vue({
  el: '#app',
  data: function () {
    return {
      grid : ["", "", "", "", "", "", "", "", ""],
      player: 1,
      win: 0
    }
  },
  methods: {
  	play: function (id) {
      if (this.grid[id] == "") {
       this.grid[id] = this.player == 1 ? "O" : "X";
       this.togglePlayer();
       this.checkWin();
      }
      this.$forceUpdate();
    },
    togglePlayer: function () {
    	this.player = 3 - this.player;
    },
    checkWin: function () {
     if (this.checkAlign("O")) {
     	this.win = 1;
     } else if (this.checkAlign("X")) {
     	this.win = 2;
     }
    },
    
    checkAlign: function (char) {
    	return this.checkLine(0, char) || this.checkLine(1, char) || this.checkLine(2, char) || this.checkDiagonales(char);
    },
    checkLine: function (line, char)  {
    	return this.grid[line] == char && this.grid[line + 1] == char && this.grid[line + 2];
    },
    checkDiagonales: function (char) {
    	return this.grid[0] == char && this.grid[4] == char && this.grid[8] == char ||
      this.grid[2] == char && this.grid[4] == char && this.grid[6] == char;
    }
  }
})