diff --git a/src/components/OXCell.vue b/src/components/OXCell.vue index e2293442e58ac4e775d271afc9c9d06a8feca2d8..9e717023a138faadbb58f11733bf62821d363886 100644 --- a/src/components/OXCell.vue +++ b/src/components/OXCell.vue @@ -6,8 +6,9 @@ export default { props: ['player', 'row', 'col'], methods: { clickCell (event) { - console.log(event) - console.log('click ' + this.row + ' ' + this.col) + // console.log(event) + // console.log('click ' + this.row + ' ' + this.col) + if (this.player !== '-') return this.$emit('cell-click', this.row, this.col) } } diff --git a/src/components/OXTable.vue b/src/components/OXTable.vue index 4703a91b02eaf60f37174547fe0e71e55175709f..194fd1d01d4dbf90e5bb2545f1b2a7958d843ff5 100644 --- a/src/components/OXTable.vue +++ b/src/components/OXTable.vue @@ -1,9 +1,17 @@ <template> <div> + <div> + {{ turn }} + </div> <table> <tr v-for="(line, lineId) in table" :key="lineId"> <td v-for="(item, itemId) in line" :key="itemId"> - <OXCell :player="item" :row="lineId" :col="itemId" @cell-click="cellClick" /> + <OXCell + :player="item" + :row="lineId" + :col="itemId" + @cell-click="cellClick" + /> </td> </tr> </table> @@ -26,10 +34,28 @@ export default { cellClick (row, col) { console.log('Cell click ' + row + ' ' + col) this.table[row][col] = this.turn + this.switchTurn() + }, + switchTurn () { + if (this.turn === 'O') { + this.turn = 'X' + return + } + this.turn = 'O' + }, + randomPlayer () { + if (Math.floor(100 * Math.random()) % 2 === 0) { + this.turn = 'O' + } else { + this.turn = 'X' + } } }, components: { OXCell + }, + mounted () { + this.randomPlayer() } } </script>