2211482
/
CONNECT4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added hover properties and fancy ui with bonus div

main
selim 2024-12-28 16:52:36 +01:00
parent 5059ec687c
commit 483f50327d
2 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.jsx
View File

@ -40,21 +40,25 @@ export default function App() {
<Heading /> <Heading />
<Gamemode /> <Gamemode />
<Board /> <Board />
<Restart />
<Message /> <Message />
</> </>
); );
} }
function Field({ row, col, backgroundColor, disabled }) { function Field({ row, col, style, disabled }) {
const [pointer, setPointer] = useState(false);
const styling = { backgroundColor: style.backgroundColor, cursor: pointer && "pointer" };
return ( return (
<button <button
className="field" className="field"
row={row} row={row}
col={col} col={col}
style={backgroundColor} style={styling}
onClick={() => clickHandlerTurn(col, params)} onClick={() => clickHandlerTurn(col, params)}
disabled={disabled} disabled={disabled}
onMouseEnter={() => { !disabled && !params.gameOver && setPointer(true) }}
onMouseLeave={() => { params.gameOver && setPointer(false) }}
> >
&nbsp; &nbsp;
</button> </button>
@ -62,6 +66,7 @@ function Field({ row, col, backgroundColor, disabled }) {
} }
function Board() { function Board() {
let fields = params.colorBoard.map((subarr, row) => let fields = params.colorBoard.map((subarr, row) =>
subarr.map((color, col) => { subarr.map((color, col) => {
return ( return (
@ -69,8 +74,9 @@ function Board() {
key={row.toString() + col.toString()} key={row.toString() + col.toString()}
row={row} row={row}
col={col} col={col}
backgroundColor={{ backgroundColor: color }} style={{ backgroundColor: color }}
disabled={row === 0 ? params.gameOver : true} disabled={row === 0 ? params.gameOver : true}
/> />
); );
}) })
@ -79,8 +85,11 @@ function Board() {
const displayMem = params.menu ? "none" : ""; const displayMem = params.menu ? "none" : "";
return ( return (
<div className="board" style={{ display: displayMem }}> <div className="board-outer" style={{ display: displayMem }}>
{fields.map((subarr) => subarr.map((field) => field))} <div className="board-inner">
{fields.map((subarr) => subarr.map((field) => field))}
</div>
<Restart />
</div> </div>
); );
} }

40
src/index.css
View File

@ -4,19 +4,27 @@ body {
color: black; color: black;
} }
.board { .board-outer {
width: 700px; width: 700px;
height: 600px;
display: grid;
grid-template-columns: repeat(7, auto [col-start]);
margin-top: 50px;
margin-left: auto;
margin-right: auto;
border: 5px solid black; border: 5px solid black;
background-color: blue; background-color: blue;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
} }
.board .field { .board-inner {
width: 630px;
height: 540px;
display: grid;
grid-template-columns: repeat(7, auto [col-start]);
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.board-inner .field {
border: 3px solid black; border: 3px solid black;
border-radius: 100%; border-radius: 100%;
margin: 10px; margin: 10px;
@ -28,10 +36,15 @@ body {
font-size: xx-large; font-size: xx-large;
border: 3px solid black; border: 3px solid black;
background-color: white; background-color: white;
margin-top: 20px; margin-bottom: 30px;
} }
.restart:hover {
cursor: pointer;
background-color: lightgray;
}
.gamemode-div { .gamemode-div {
margin-left: auto; margin-left: auto;
@ -51,4 +64,13 @@ body {
height: 50px; height: 50px;
font-size: larger; font-size: larger;
}
.gamemode-div .gamemode-button:hover {
cursor: pointer;
background-color: lightgray;
}
.message {
font-size: larger;
} }