diff --git a/src/components/OXCell.vue b/src/components/OXCell.vue index 9e717023a138faadbb58f11733bf62821d363886..5e4b49a108495f12b1427eef3fb0e4baac043489 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 9f761878b5e9f7740e481f6d6913567ef7d65665..4250fa142dae1e2dd64cda5ec8721f28e114fa71 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>