From 35db0996e270ea66c7d0a94f1ddb2506005b22a3 Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Sat, 6 Jun 2020 11:53:44 -0700 Subject: [PATCH] Scribe: Style the board so there are clear gaps between the mini grids Thanks to Richard for helping me figure out how to force the square aspect ratio at the top-level. Below that, it's just two levels of CSS "grid" for the boxes and the one of "flex" to get the centered content. --- scribe/scribe.css | 85 ++++++++++++++-------- scribe/scribe.jsx | 174 ++++++++++++---------------------------------- 2 files changed, 98 insertions(+), 161 deletions(-) diff --git a/scribe/scribe.css b/scribe/scribe.css index 4eaea8f..ff113ab 100644 --- a/scribe/scribe.css +++ b/scribe/scribe.css @@ -1,32 +1,65 @@ -ol, ul { - padding-left: 30px; +/* We want our board to be the largest square that can + * fit. Unfortunately, it requires a bit of CSS magic to make that + * happen. We can set a wdith easily enough, but what we can't easily + * do is to set the height to be exactly the same as the width. + * + * So here's the magic to get that to happen. On the board container + * we set the height to 0 and the bottom padding to 100% (which just + * happens to be defined as relative to the _width_). So, now we have + * a square element. Hurrah! + * + * The problem is that this element has a nominal height of 0, so if + * any child sas "height: 100%" that will result in a 0-height child + * and won't be what we want. + * + * So the last piece of the magic is to use absolute palcement of the + * board (which require position:relative on its parent) and set all + * of its edges (top, left, bottom, right) to the extents of the + * container. + * + * Ta-da! Now our board element is square and does not have any + * dimensions of 0 so child elements can compute their sizes + * naturally. + */ +.board-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 100%; } -.board-row:after { - clear: both; - content: ""; - display: table; +.board { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + grid-gap: 1em; } -.status { - margin-bottom: 10px; +.mini-grid { + width: 100%; + height: 100%; + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + + border-radius: 6px; + border: 3px solid #999; } .square { - background: #fff; - color: black; - border: 1px solid #999; - float: left; - font-size: 20px; - font-weight: bold; - line-height: 25px; - width: 25px; - height: 25px; - margin-right: -1px; - margin-top: -1px; - padding: 0; - text-align: center; - border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + font-size: 5vmin; + border-bottom: 1px solid #999; + border-right: 1px solid #999; } .square.open { @@ -40,11 +73,3 @@ ol, ul { .square.open:hover { background-color: var(--accent-color-bright); } - -.square:focus { - outline: none; -} - -.kbd-navigation .square:focus { - background: #ddd; -} diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx index e7654b4..d81932b 100644 --- a/scribe/scribe.jsx +++ b/scribe/scribe.jsx @@ -165,147 +165,59 @@ function Square(props) { ); } -class Board extends React.Component { - render_square(i,j) { - const value = this.props.squares[i][j]; +function MiniGrid(props) { + function grid_square(j) { + const value = props.squares[j]; return ( this.props.onClick(i,j)} + active={props.active} + onClick={() => props.onClick(j)} /> ); } - render() { - return ( -
-
- {this.render_square(0,0)} - {this.render_square(0,1)} - {this.render_square(0,2)} - {" "} - {this.render_square(1,0)} - {this.render_square(1,1)} - {this.render_square(1,2)} - {" "} - {this.render_square(2,0)} - {this.render_square(2,1)} - {this.render_square(2,2)} -
-
- {this.render_square(0,3)} - {this.render_square(0,4)} - {this.render_square(0,5)} - {" "} - {this.render_square(1,3)} - {this.render_square(1,4)} - {this.render_square(1,5)} - {" "} - {this.render_square(2,3)} - {this.render_square(2,4)} - {this.render_square(2,5)} -
-
- {this.render_square(0,6)} - {this.render_square(0,7)} - {this.render_square(0,8)} - {" "} - {this.render_square(1,6)} - {this.render_square(1,7)} - {this.render_square(1,8)} - {" "} - {this.render_square(2,6)} - {this.render_square(2,7)} - {this.render_square(2,8)} -
- -
-
- -
- {this.render_square(3,0)} - {this.render_square(3,1)} - {this.render_square(3,2)} - {" "} - {this.render_square(4,0)} - {this.render_square(4,1)} - {this.render_square(4,2)} - {" "} - {this.render_square(5,0)} - {this.render_square(5,1)} - {this.render_square(5,2)} -
-
- {this.render_square(3,3)} - {this.render_square(3,4)} - {this.render_square(3,5)} - {" "} - {this.render_square(4,3)} - {this.render_square(4,4)} - {this.render_square(4,5)} - {" "} - {this.render_square(5,3)} - {this.render_square(5,4)} - {this.render_square(5,5)} -
-
- {this.render_square(3,6)} - {this.render_square(3,7)} - {this.render_square(3,8)} - {" "} - {this.render_square(4,6)} - {this.render_square(4,7)} - {this.render_square(4,8)} - {" "} - {this.render_square(5,6)} - {this.render_square(5,7)} - {this.render_square(5,8)} -
+ return ( +
+ {grid_square(0)} + {grid_square(1)} + {grid_square(2)} + {grid_square(3)} + {grid_square(4)} + {grid_square(5)} + {grid_square(6)} + {grid_square(7)} + {grid_square(8)} +
+ ); +} -
-
+class Board extends React.Component { + mini_grid(i) { + const squares = this.props.squares[i]; + return ( + this.props.onClick(i,j)} + /> + ); + } -
- {this.render_square(6,0)} - {this.render_square(6,1)} - {this.render_square(6,2)} - {" "} - {this.render_square(7,0)} - {this.render_square(7,1)} - {this.render_square(7,2)} - {" "} - {this.render_square(8,0)} - {this.render_square(8,1)} - {this.render_square(8,2)} -
-
- {this.render_square(6,3)} - {this.render_square(6,4)} - {this.render_square(6,5)} - {" "} - {this.render_square(7,3)} - {this.render_square(7,4)} - {this.render_square(7,5)} - {" "} - {this.render_square(8,3)} - {this.render_square(8,4)} - {this.render_square(8,5)} -
-
- {this.render_square(6,6)} - {this.render_square(6,7)} - {this.render_square(6,8)} - {" "} - {this.render_square(7,6)} - {this.render_square(7,7)} - {this.render_square(7,8)} - {" "} - {this.render_square(8,6)} - {this.render_square(8,7)} - {this.render_square(8,8)} + render() { + return ( +
+
+ {this.mini_grid(0)} + {this.mini_grid(1)} + {this.mini_grid(2)} + {this.mini_grid(3)} + {this.mini_grid(4)} + {this.mini_grid(5)} + {this.mini_grid(6)} + {this.mini_grid(7)} + {this.mini_grid(8)}
-
); } -- 2.43.0