From fa36199c307b78f85451ae16e51010693de5febd Mon Sep 17 00:00:00 2001 From: Selim Eser <2211482@stud.hs-mannheim.de> Date: Sun, 29 Dec 2024 18:48:05 +0100 Subject: [PATCH] Winning condition shown with offset outline instead of color --- src/App.jsx | 40 +++++++++++++++++---------- src/functions.js | 70 ++++++++++++++++++++++++++++-------------------- src/index.css | 1 + 3 files changed, 68 insertions(+), 43 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 0a6228a..8c496c6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -15,6 +15,12 @@ export default function App() { params.colorBoard = colorBoard; params.setColorBoard = setColorBoard; + const [outlineBoard, setOutlineBoard] = useState( + Array.from(Array(6), () => new Array(7).fill("0px solid black")) + ); + params.outlineBoard = outlineBoard; + params.setOutlineBoard = setOutlineBoard; + const [gameOver, setGameOver] = useState(false); params.gameOver = gameOver; params.setGameOver = setGameOver; @@ -51,15 +57,18 @@ export default function App() { function Field({ row, col, style, disabled }) { const [pointer, setPointer] = useState(false); - const [color, setColor] = useState("white"); + const [hoverColor, setHoverColor] = useState("white"); const styling = { backgroundColor: !pointer ? style.backgroundColor : params.currentPlayer === "red" && row === 0 - ? color - : params.currentPlayer === "yellow" && row === 0 && color, + ? hoverColor + : params.currentPlayer === "yellow" && row === 0 && hoverColor, cursor: pointer && "pointer", + outlineWidth: style.outlineWidth, + outlineColor: style.outlineColor, + outlineStyle: style.outlineStyle, }; return ( @@ -69,26 +78,24 @@ function Field({ row, col, style, disabled }) { col={col} style={styling} onClick={async () => { - await clickHandlerTurn(col, params); + await clickHandlerTurn(params, col); if (params.gamemode === 2) { params.currentPlayer === "red" - ? setColor("lightcoral") - : setColor("#f2f28d"); + ? setHoverColor("hsla(0, 100%, 80%, 1)") + : setHoverColor("hsla(60, 100%, 80%, 1)"); } }} disabled={disabled} onMouseEnter={() => { - params.gameOver && setPointer(false); - - if (!disabled && !params.gameOver) { - setPointer(true); + if (!disabled) { + setPointer(!params.gameOver); } params.currentPlayer === "red" - ? setColor("lightcoral") - : setColor("#f2f28d"); + ? setHoverColor("hsla(0, 100%, 80%, 1)") + : setHoverColor("hsla(60, 100%, 80%, 1)"); }} onMouseLeave={() => { - setColor(style.backgroundColor); + setHoverColor(style.backgroundColor); setPointer(false); }} > @@ -105,7 +112,12 @@ function Board() { key={row.toString() + col.toString()} row={row} col={col} - style={{ backgroundColor: color }} + style={{ + backgroundColor: color, + outlineWidth: params.outlineBoard[row][col].split(" ")[0], + outlineColor: params.outlineBoard[row][col].split(" ")[2], + outlineStyle: params.outlineBoard[row][col].split(" ")[1], + }} disabled={row === 0 ? params.gameOver : true} /> ); diff --git a/src/functions.js b/src/functions.js index 475f756..b3cbd1c 100644 --- a/src/functions.js +++ b/src/functions.js @@ -25,60 +25,65 @@ async function putChip( return false; } -async function checkWin(colorBoard, setColorBoard, currentPlayer) { - const mem = colorBoard; +async function checkWin( + colorBoard, + currentPlayer, + outlineBoard, + setOutlineBoard +) { + const memOutlineBoard = outlineBoard; for (let row = 0; row <= 5; row++) { for (let col = 0; col <= 6; col++) { if ( row <= 2 && - mem[row][col] === currentPlayer && - mem[row + 1][col] === currentPlayer && - mem[row + 2][col] === currentPlayer && - mem[row + 3][col] === currentPlayer + colorBoard[row][col] === currentPlayer && + colorBoard[row + 1][col] === currentPlayer && + colorBoard[row + 2][col] === currentPlayer && + colorBoard[row + 3][col] === currentPlayer ) { for (let i = 0; i <= 3; i++) { - mem[row + i][col] = "orange"; + memOutlineBoard[row + i][col] = "7px outset black"; } - await setColorBoard(mem); + await setOutlineBoard(memOutlineBoard); return true; } else if ( col <= 3 && - mem[row][col] === currentPlayer && - mem[row][col + 1] === currentPlayer && - mem[row][col + 2] === currentPlayer && - mem[row][col + 3] === currentPlayer + colorBoard[row][col] === currentPlayer && + colorBoard[row][col + 1] === currentPlayer && + colorBoard[row][col + 2] === currentPlayer && + colorBoard[row][col + 3] === currentPlayer ) { for (let i = 0; i <= 3; i++) { - mem[row][col + i] = "orange"; + memOutlineBoard[row][col + i] = "7px outset black"; } - await setColorBoard(mem); + await setOutlineBoard(memOutlineBoard); return true; } else if ( row <= 2 && col <= 3 && - mem[row][col] === currentPlayer && - mem[row + 1][col + 1] === currentPlayer && - mem[row + 2][col + 2] === currentPlayer && - mem[row + 3][col + 3] === currentPlayer + colorBoard[row][col] === currentPlayer && + colorBoard[row + 1][col + 1] === currentPlayer && + colorBoard[row + 2][col + 2] === currentPlayer && + colorBoard[row + 3][col + 3] === currentPlayer ) { for (let i = 0; i <= 3; i++) { - mem[row + i][col + i] = "orange"; + memOutlineBoard[row + i][col + i] = "7px outset black"; } - await setColorBoard(mem); + await setOutlineBoard(memOutlineBoard); return true; } else if ( row <= 2 && col <= 3 && - mem[row][col + 3] === currentPlayer && - mem[row + 1][col + 2] === currentPlayer && - mem[row + 2][col + 1] === currentPlayer && - mem[row + 3][col] === currentPlayer + colorBoard[row][col + 3] === currentPlayer && + colorBoard[row + 1][col + 2] === currentPlayer && + colorBoard[row + 2][col + 1] === currentPlayer && + colorBoard[row + 3][col] === currentPlayer ) { for (let i = 0; i <= 3; i++) { - mem[row + i][col + 3 - i] = "orange"; + memOutlineBoard[row + i][col + 3 - i] = "7px outset black"; } - await setColorBoard(mem); + await setOutlineBoard(memOutlineBoard); return true; } } @@ -106,7 +111,7 @@ export function colFull(col, colorBoard) { } } -export async function clickHandlerTurn(col, params) { +export async function clickHandlerTurn(params, col) { const iMax = params.gamemode === 1 ? 2 : 1; for (let i = 0; i < iMax; i++) { @@ -134,8 +139,9 @@ export async function clickHandlerTurn(col, params) { const win = await checkWin( params.colorBoard, - params.setColorBoard, - memCurrentPlayer + memCurrentPlayer, + params.outlineBoard, + params.setOutlineBoard ); await params.setTurns(params.turns + 1); @@ -163,6 +169,9 @@ export function clickHandlerRestart(params) { params.setTurns(0); params.setGameOver(false); params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white"))); + params.setOutlineBoard( + Array.from(Array(6), () => new Array(7).fill("0px solid black")) + ); params.setMessage(""); } @@ -176,5 +185,8 @@ export function clickHandlerReturn(params) { params.setTurns(0); params.setGameOver(false); params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white"))); + params.setOutlineBoard( + Array.from(Array(6), () => new Array(7).fill("0px solid black")) + ); params.setMessage(""); } diff --git a/src/index.css b/src/index.css index 353de0f..5cd9786 100644 --- a/src/index.css +++ b/src/index.css @@ -28,6 +28,7 @@ body { border: 3px solid black; border-radius: 100%; margin: 10px; + outline-offset: -7px; } .inner-button {