manuth/ConnectForce
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: manuth:b1ace6ceb3a1db013d83f5b06242197284145947
Branches Tags
manuth:main
manuth:dev
manuth:webpack
manuth:gh-pages
manuth:week-09
manuth:week-08
..
compare: manuth:0ccffdf62e342464ddd7189da9f9d2f47ee6c4ea
Branches Tags
manuth:dev
manuth:main
manuth:webpack
manuth:gh-pages
manuth:week-09
manuth:week-08

No commits in common. "b1ace6ceb3a1db013d83f5b06242197284145947" and "0ccffdf62e342464ddd7189da9f9d2f47ee6c4ea" have entirely different histories.
b1ace6ceb3 ... 0ccffdf62e

2 changed files with 4 additions and 50 deletions
Show stats Expand all files Collapse all files

1
src/js/Components.js
View file

@ -109,6 +109,7 @@ export function App()
*/ */
export function Board({ board }) export function Board({ board })
{ {
console.log(board);
let fields = board.flatMap((row) => row); let fields = board.flatMap((row) => row);
return [ return [

53
src/styles/style.css
View file

@ -1,52 +1,23 @@
body {
font-family: Arial, Helvetica, sans-serif;
}
button {
padding: 0.5rem;
font-size: 1.3rem;
transition: 0.3s background-color ease-in-out;
background-color: azure;
border: lightblue solid 1px;
border-radius: 4px;
}
button:hover {
background-color: lightblue;
}
button:active {
background-color: rgb(96, 190, 221);
}
div { div {
box-sizing: border-box; box-sizing: border-box;
} }
.board { .board {
width: 84vmin; width: min(84vw, 84vh);
margin: 10px auto; margin: 10px auto;
outline: 1px solid black; outline: 1px solid black;
} }
.board .field { .board .field {
border: 1px solid black; border: 1px solid black;
width: 12vmin; width: min(12vw, 12vh);
height: 12vmin; height: min(12vw, 12vh);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
float: left; float: left;
} }
.game.winner.r .board, .game.winner.r .log {
background-color: pink;
}
.game.winner.b .board, .game.winner.b .log {
background-color: lightblue;
}
.board .row .field:first-child { .board .row .field:first-child {
clear: both; clear: both;
} }
@ -64,21 +35,3 @@ div {
.board .field .red { .board .field .red {
background-color: red; background-color: red;
} }
.log {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.game.winner .log {
font-size: 3rem;
}
.game .menu-bar {
text-align: center;
}
.game .menu-bar button {
margin: 0 5px 5px 0;
}