fem-projects/tic-tac-toe
Archived
1
Fork 0
Code Activity

Add ties

Browse source
This commit is contained in:
Hadeed 2024-06-03 22:11:17 +04:00
parent 935c266889
commit 163da80d09
1 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/game.jsx
View file

@ -60,10 +60,20 @@ export default ({ players }) => {
return () => clearTimeout(timeoutId); return () => clearTimeout(timeoutId);
} }
}, [winner]);
useEffect(() => { if (!grid.some((s) => s == "")) {
if (cpuTurn && !winner && grid.filter((s) => s == "").length > 0) { const timeoutId = setTimeout(() => {
updateScore((score) => {
score.ties++;
});
updateGrid(() => Array(9).fill(""));
}, 1000);
return () => clearTimeout(timeoutId);
}
if (cpuTurn) {
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
updateGrid((grid) => { updateGrid((grid) => {
const free = Array.from({ length: 9 }, (_, i) => i).filter( const free = Array.from({ length: 9 }, (_, i) => i).filter(
@ -77,7 +87,7 @@ export default ({ players }) => {
return () => clearTimeout(timeoutId); return () => clearTimeout(timeoutId);
} }
}, [cpuTurn]); }, [grid]);
const renderSymbol = (symbol, index) => { const renderSymbol = (symbol, index) => {
if (symbol == "") { if (symbol == "") {
@ -119,7 +129,7 @@ export default ({ players }) => {
<div className="flex-1"> <div className="flex-1">
<img src={logo} alt="logo" /> <img src={logo} alt="logo" />
</div> </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"> <div className="flex items-center justify-between text-silver-700">
<TurnIndicator className="size-5" /> <TurnIndicator className="size-5" />
<p className="text-h-xs uppercase">Turn</p> <p className="text-h-xs uppercase">Turn</p>
@ -128,7 +138,7 @@ export default ({ players }) => {
<div className="flex-1"> <div className="flex-1">
<button <button
onClick={() => setRestartModal(true)} 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" /> <img src={restart} alt="restart" />
</button> </button>
@ -179,12 +189,12 @@ export default ({ players }) => {
className="center flex-row justify-around text-navy-700" className="center flex-row justify-around text-navy-700"
method="dialog" 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> <p className="text-h-xs uppercase">No, cancel</p>
</button> </button>
<button <button
onClick={restartGame} 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> <p className="text-h-xs uppercase">Yes, restart</p>
</button> </button>