From b7f098c6d22be92e11e37cf80cd341c955f7f48b Mon Sep 17 00:00:00 2001
From: 62160286 <62160286@go.buu.ac.th>
Date: Thu, 23 Dec 2021 01:11:53 +0700
Subject: [PATCH] Add font-size and font-color
---
src/components/OXCell.vue | 19 +++++++++++++++++--
src/components/OXTable.vue | 6 ++++++
2 files changed, 23 insertions(+), 2 deletions(-)
diff --git a/src/components/OXCell.vue b/src/components/OXCell.vue
index 9e71702..5e4b49a 100644
--- a/src/components/OXCell.vue
+++ b/src/components/OXCell.vue
@@ -1,5 +1,10 @@
<template>
- <div @click="clickCell">{{ player }}</div>
+ <div
+ @click="clickCell"
+ :class="{ cell: true, cellX: player === 'X', cellO: player === 'O' }"
+ >
+ {{ player }}
+ </div>
</template>
<script>
export default {
@@ -14,4 +19,14 @@ export default {
}
}
</script>
-<style></style>
+<style>
+.cell {
+ font-size: 30pt;
+}
+.cellX {
+ color: blue;
+}
+.cellO {
+ color: red;
+}
+</style>
diff --git a/src/components/OXTable.vue b/src/components/OXTable.vue
index 9f76187..4250fa1 100644
--- a/src/components/OXTable.vue
+++ b/src/components/OXTable.vue
@@ -149,4 +149,10 @@ table {
margin-right: auto;
border: 1px solid black;
}
+td {
+ text-align: center;
+ vertical-align: middle;
+ width: 50pt;
+ height: 50pt;
+}
</style>
--
GitLab