From efd0b5453acc1e68ea17fa19b3d903380c128264 Mon Sep 17 00:00:00 2001 From: Jason Orendorff Date: Sun, 15 Oct 2023 06:57:11 -0500 Subject: [PATCH 1/2] Make the CSS adapt to grid size. This makes no change to the app's appearence or behavior, but it makes the layout remain the same if the `const gridSize` in gameInit.js is changed to some other value. Reasons to consider this: - It might be fun to vary the puzzle size. - For hard puzzles it might be good to give the player some extra room. That is, generate the puzzle at gridSize 12, but display at gridSize 15. --- src/App.css | 58 +++++++++++++++++++++--------------- src/components/DragGroup.js | 4 +-- src/components/DragShadow.js | 4 +-- src/components/Game.js | 8 ++++- src/components/Piece.js | 4 +-- 5 files changed, 47 insertions(+), 31 deletions(-) diff --git a/src/App.css b/src/App.css index 328bcd3..be07cfe 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,7 @@ /* General */ html { - --box-size: min(8vw, 5.5vh); - --default-font-size: calc(var(--box-size) * 0.9); + --default-box-size: min(8vw, 5.5vh); + --default-font-size: calc(var(--default-box-size) * 0.9); --dark-color: rgb(55 54 71); --shadow-color: rgba(20 19 25 / 50%); --drag-color: rgba(77 76 99); @@ -176,7 +176,7 @@ input[type="range"]:focus::-ms-fill-upper { align-items: center; grid-area: controls; width: 100vw; - height: calc(var(--box-size) * 1.2); + height: calc(var(--default-box-size) * 1.2); border-bottom: 2px solid var(--light-color); } @@ -296,6 +296,10 @@ a { #game { display: grid; + --box-size: min( + calc(66vh / var(--grid-rows)), + calc(96vw / var(--grid-columns)) + ); grid-area: game; grid-template-areas: "board" @@ -305,16 +309,21 @@ a { -webkit-user-select: none; } +#board, +#drag-group, +.piece { + display: grid; + grid-template-columns: repeat(var(--grid-columns), var(--box-size)); + grid-template-rows: repeat(var(--grid-rows), var(--box-size)); + width: calc(var(--grid-columns) * var(--box-size)); + height: calc(var(--grid-rows) * var(--box-size)); +} + #board { overflow: hidden; grid-area: board; - display: grid; touch-action: none; justify-content: center; - grid-template-columns: repeat(12, var(--box-size)); - grid-template-rows: repeat(12, var(--box-size)); - width: fit-content; - height: fit-content; justify-self: center; color: var(--light-color); border: 1px solid var(--light-color); @@ -327,7 +336,7 @@ a { touch-action: none; align-items: center; justify-content: center; - font-size: var(--default-font-size); + font-size: calc(0.9 * var(--box-size)); background-color: var(--dark-color); color: var(--light-color); } @@ -361,8 +370,12 @@ a { #pool { grid-area: pool; width: 100%; - height: calc(88vh - (var(--box-size) * 12) - (var(--box-size) * 1.2)); - height: calc(98svh - (var(--box-size) * 12) - (var(--box-size) * 1.2)); + height: calc( + 88vh - (var(--box-size) * var(--grid-rows)) - (var(--box-size) * 1.2) + ); + height: calc( + 98svh - (var(--box-size) * var(--grid-rows)) - (var(--box-size) * 1.2) + ); display: flex; overflow-x: hidden; overflow-y: scroll; @@ -373,15 +386,9 @@ a { } .piece { - display: grid; touch-action: none; pointer-events: none; - grid-template-columns: repeat(var(--numCols), var(--box-size)); - grid-template-rows: repeat(var(--numRows), var(--box-size)); justify-content: center; - font-size: var(--default-font-size); - width: fit-content; - height: fit-content; align-content: center; } @@ -395,12 +402,7 @@ a { } #drag-group { - display: grid; touch-action: none; - grid-template-columns: repeat(var(--group-columns), var(--box-size)); - grid-template-rows: repeat(var(--group-rows), var(--box-size)); - width: fit-content; - height: fit-content; } #drag-group .letter { @@ -557,7 +559,7 @@ a { border-width: 0 2px 0 0; align-items: center; height: 100%; - width: calc(var(--box-size) * 1.5); + width: calc(var(--default-box-size) * 1.5); } #exitDailyButton { @@ -574,7 +576,15 @@ a { /* Large screen */ @media (min-height: 800px) and (min-width: 800px) { html { - --box-size: min(4vh, 7vw, 1cm); + --default-box-size: min(4vh, 7vw, 1cm); + } + + #game { + --box-size: min( + calc(48vh / var(--grid-columns)), + calc(84vw / var(--grid-columns)), + 1cm + ); } #controls { diff --git a/src/components/DragGroup.js b/src/components/DragGroup.js index e574695..c6f1299 100644 --- a/src/components/DragGroup.js +++ b/src/components/DragGroup.js @@ -112,8 +112,8 @@ export default function DragGroup({ dispatchGameState, gameState }) { position: "absolute", top, left, - "--group-rows": groupRows, - "--group-columns": groupColumns, + "--grid-rows": groupRows, + "--grid-columns": groupColumns, }} onPointerMove={onPointerMove} onLostPointerCapture={onLostPointerCapture} diff --git a/src/components/DragShadow.js b/src/components/DragShadow.js index d607fa7..8ad211a 100644 --- a/src/components/DragShadow.js +++ b/src/components/DragShadow.js @@ -29,8 +29,8 @@ export default function DragShadow({ grid, top, left }) { } const styles = { - "--numRows": grid.length, - "--numCols": grid[0].length, + "--grid-rows": grid.length, + "--grid-columns": grid[0].length, }; // For the drag shadow on the board, need to specify the position of shadow on the board if (top !== undefined) { diff --git a/src/components/Game.js b/src/components/Game.js index 8e03e1f..8e30891 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -15,7 +15,13 @@ function Game({ dispatchGameState, gameState, setDisplay }) { /> ) : null; return ( -
+
From 3c334e17a90893b00435f263899e0ca4d8232a3b Mon Sep 17 00:00:00 2001 From: Jason Orendorff Date: Sun, 15 Oct 2023 14:40:13 -0500 Subject: [PATCH 2/2] Fix typo in computing `--box-size` on large screens. --- src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index be07cfe..6362ee0 100644 --- a/src/App.css +++ b/src/App.css @@ -581,7 +581,7 @@ a { #game { --box-size: min( - calc(48vh / var(--grid-columns)), + calc(48vh / var(--grid-rows)), calc(84vw / var(--grid-columns)), 1cm );