From 163da80d099288f9ce98d0829c4256fc33645206 Mon Sep 17 00:00:00 2001
From: Hadeed Ahmad <hadeedji@gmail.com>
Date: Mon, 3 Jun 2024 22:11:17 +0400
Subject: [PATCH] Add ties
---
src/game.jsx | 26 ++++++++++++++++++--------
1 file changed, 18 insertions(+), 8 deletions(-)
diff --git a/src/game.jsx b/src/game.jsx
index 2a3bc57..95b62ef 100644
--- a/src/game.jsx
+++ b/src/game.jsx
@@ -60,10 +60,20 @@ export default ({ players }) => {
return () => clearTimeout(timeoutId);
}
- }, [winner]);
- useEffect(() => {
- if (cpuTurn && !winner && grid.filter((s) => s == "").length > 0) {
+ if (!grid.some((s) => s == "")) {
+ const timeoutId = setTimeout(() => {
+ updateScore((score) => {
+ score.ties++;
+ });
+
+ updateGrid(() => Array(9).fill(""));
+ }, 1000);
+
+ return () => clearTimeout(timeoutId);
+ }
+
+ if (cpuTurn) {
const timeoutId = setTimeout(() => {
updateGrid((grid) => {
const free = Array.from({ length: 9 }, (_, i) => i).filter(
@@ -77,7 +87,7 @@ export default ({ players }) => {
return () => clearTimeout(timeoutId);
}
- }, [cpuTurn]);
+ }, [grid]);
const renderSymbol = (symbol, index) => {
if (symbol == "") {
@@ -119,7 +129,7 @@ export default ({ players }) => {
<div className="flex-1">
<img src={logo} alt="logo" />
</div>
- <div className="inner-shadow-1-navy h-14 w-36 rounded-xl bg-navy-400 px-8 py-4">
+ <div className="h-14 w-36 rounded-xl bg-navy-400 px-8 py-4 inner-shadow-1-navy">
<div className="flex items-center justify-between text-silver-700">
<TurnIndicator className="size-5" />
<p className="text-h-xs uppercase">Turn</p>
@@ -128,7 +138,7 @@ export default ({ players }) => {
<div className="flex-1">
<button
onClick={() => setRestartModal(true)}
- className="center inner-shadow-1-silver ml-auto size-14 rounded-xl bg-silver-700 hover:bg-silver-400"
+ className="center ml-auto size-14 rounded-xl bg-silver-700 inner-shadow-1-silver hover:bg-silver-400"
>
<img src={restart} alt="restart" />
</button>
@@ -179,12 +189,12 @@ export default ({ players }) => {
className="center flex-row justify-around text-navy-700"
method="dialog"
>
- <button className="inner-shadow-1-silver rounded-xl bg-silver-700 px-5 py-4 hover:bg-silver-400">
+ <button className="rounded-xl bg-silver-700 px-5 py-4 inner-shadow-1-silver hover:bg-silver-400">
<p className="text-h-xs uppercase">No, cancel</p>
</button>
<button
onClick={restartGame}
- className="inner-shadow-1-yellow rounded-xl bg-yellow-700 px-5 py-4 hover:bg-yellow-400"
+ className="rounded-xl bg-yellow-700 px-5 py-4 inner-shadow-1-yellow hover:bg-yellow-400"
>
<p className="text-h-xs uppercase">Yes, restart</p>
</button>