From 73faec71e59881156e4d06fd9dbd55b12cad7293 Mon Sep 17 00:00:00 2001
From: 62160286 <62160286@go.buu.ac.th>
Date: Wed, 22 Dec 2021 22:58:44 +0700
Subject: [PATCH] Add methods switchTurn and randomPlayer
---
src/components/OXCell.vue | 5 +++--
src/components/OXTable.vue | 28 +++++++++++++++++++++++++++-
2 files changed, 30 insertions(+), 3 deletions(-)
diff --git a/src/components/OXCell.vue b/src/components/OXCell.vue
index e229344..9e71702 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 4703a91..194fd1d 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>
--
GitLab