From 9361e3e38bd496b3ca8f30946cf7a0781d699821 Mon Sep 17 00:00:00 2001
From: Ting-Yu Chen <7ingyu@gmail.com>
Date: Sat, 2 Dec 2023 11:37:41 -0800
Subject: [PATCH] Better hover colors

---
 src/App.css              | 27 +++++++++++++++++++++++----
 src/components/Board.jsx |  5 ++---
 src/utils/detectWin.js   |  6 +++---
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/App.css b/src/App.css
index f9833e3..b4cf83f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -34,6 +34,7 @@ table, td, th {
   position: relative;
   background-color: blue;
   margin-bottom: 0.25rem;
+  border-radius: 0.25rem;
 }
 
 .gamecell > button {
@@ -47,18 +48,36 @@ table, td, th {
   border: none;
 }
 
-.gamecell > button:hover {
-  background-color: palegoldenrod;
+.row.red > .gamecell > button:hover:not([disabled]) {
+  background-color: rgb(255, 197, 197);
+}
+
+.row.yellow > .gamecell > button:hover:not([disabled]) {
+  background-color: rgb(255, 255, 205);
 }
 
 .gamecell > button.yellow {
-  background-color: yellow;
+  background-color: rgb(255, 255, 130);
 }
 
 .gamecell > button.red {
-  background-color: red;
+  background-color: rgb(255, 106, 106);
 }
 
 .msg {
   margin-bottom: 0.5rem;
+  background-color: blue;
+  padding: 0.5rem;
+  color: white;
+  border-radius: 0.25rem;
+}
+
+.msg.red {
+  font-weight: bold;
+  color: rgb(255, 106, 106);
+}
+
+.msg.yellow {
+  font-weight: bold;
+  color: yellow;
 }
\ No newline at end of file
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index 186f0ac..d1adbdc 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react';
 import getWinner from '../utils/detectWin';
-
 import Cell from './Cell'
 
 export default function Board (
@@ -56,10 +55,10 @@ export default function Board (
 
   return (
     <>
-      <div className="msg">{msg}</div>
+      <div className={`msg${frozen && turn ? turn === 2 ? ' red' : turn === 1 ? ' yellow' : '' : ''}`}>{msg}</div>
       <div className="gameboard">
         {board.map((row, r) => (
-          <div className="row" key={`row-${r}`}>
+          <div className={`row ${turn === 1 ? 'red' : turn === 2 ? 'yellow' : ''}`} key={`row-${r}`}>
             {row.map((cell, c) =>
               <Cell
                 key={`cell-${r}-${c}`}
diff --git a/src/utils/detectWin.js b/src/utils/detectWin.js
index 80620cc..d2bc27b 100644
--- a/src/utils/detectWin.js
+++ b/src/utils/detectWin.js
@@ -1,6 +1,6 @@
 export default function detectWin (board) {
   // horizontals
-  console.log('checking horizontals')
+  // console.log('checking horizontals')
   for (let r = 0; r < board.length; r++) {
       let count = 0
       let player = 0
@@ -20,7 +20,7 @@ export default function detectWin (board) {
     }
 
   // verticals
-  console.log('checking verticals')
+  // console.log('checking verticals')
     for (let c = 0; c < board[0].length; c++) {
       let count = 0
       let player = 0
@@ -39,7 +39,7 @@ export default function detectWin (board) {
     }
 
   // diagonals
-  console.log('checking diagonals')
+  // console.log('checking diagonals')
   let startRow = 0
   while (startRow < 4) {
     let count = 0