Skip to content

Commit

Permalink
Improve styling for mobile (#68)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RheingoldRiver
RheingoldRiver authored Oct 29, 2023
1 parent 89174bc commit e27789f
Show file tree
Hide file tree
Showing 8 changed files with 376 additions and 365 deletions.
8 changes: 4 additions & 4 deletions src/components/Board/Board.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ export const Board = forwardRef(({ gridArea }: { gridArea: string }, ref) => {
gridArea,
}}
>
<div className="flex flex-row justify-center items-center h-8" style={{ gridArea: "topOrientation" }}>
<div className="flex flex-row justify-center items-center h-6 md:h-8" style={{ gridArea: "topOrientation" }}>
{surface.orientability.w !== OrientabilityType.None ? <ChevronRightIcon width={20} /> : ""}
</div>
<div className="flex flex-col justify-center items-center w-8" style={{ gridArea: "leftOrientation" }}>
<div className="flex flex-col justify-center items-center w-6 md:w-8" style={{ gridArea: "leftOrientation" }}>
{surface.orientability.h !== OrientabilityType.None ? <ChevronDoubleUpIcon width={20} /> : ""}
</div>
<div className="flex flex-col justify-center items-center w-8" style={{ gridArea: "rightOrientation" }}>
<div className="flex flex-col justify-center items-center w-6 md:w-8" style={{ gridArea: "rightOrientation" }}>
{
{
[OrientabilityType.None]: "",
Expand All @@ -49,7 +49,7 @@ export const Board = forwardRef(({ gridArea }: { gridArea: string }, ref) => {
}[surface.orientability.h]
}
</div>
<div className="flex flex-row justify-center items-center h-8" style={{ gridArea: "botOrientation" }}>
<div className="flex flex-row justify-center items-center h-6 md:h-8" style={{ gridArea: "botOrientation" }}>
{
{
[OrientabilityType.None]: "",
Expand Down
6 changes: 4 additions & 2 deletions src/components/ColorSettings/ColorSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const ColorSettings = ({
<div
className={"grid grid-flow-row mb-4 gap-y-4 gap-x-2"}
style={{
gridTemplateColumns: "auto 24em",
gridTemplateColumns: "min-content minmax(auto, 24em)",
}}
>
{range(numColors).map((x) => (
Expand Down Expand Up @@ -75,7 +75,9 @@ const ColorSettingsRow = ({

return (
<>
<fieldset className="flex gap-4 items-center4">
<fieldset
className={clsx("flex flex-col items-center justify-start", "sm:flex-row sm:gap-4 sm:items-start", "w-min")}
>
<label className="text-right whitespace-nowrap" htmlFor={`colorNum${x}`}>
Color {x + 1}
</label>
Expand Down
11 changes: 6 additions & 5 deletions src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,23 @@ export const Header = ({ ...rest }) => {
<div
{...rest}
className={clsx(
"flex flex-col md:flex-row p-4 rounded-lg mb-3",
"flex flex-row flex-wrap justify-center p-4 rounded-lg mb-3 mx-2",
"bg-slate-100 dark:bg-slate-800",
"shadow-md shadow-slate-300 dark:shadow-none"
"shadow-md shadow-slate-300 dark:shadow-none",
"max-w-[calc(100vw_-_2rem)]"
)}
>
<div
className={clsx(
"flex flex-wrap max-w-[calc(100vw_-_1em)] md:max-w-[calc(100vw_-_18em)] items-center gap-4 px-2"
"flex flex-wrap max-w-[calc(100vw_-_1em)] md:max-w-[calc(100vw_-_18em)] items-center gap-4 px-2 py-3"
)}
>
{ALL_PENTOMINO_NAMES.map((l) => (
<div
key={l}
className={clsx(
currentPentomino.name === l && showKeyboardIndicators ? "border-b border-b-px border-b-slate-300" : "",
"py-3 rounded-sm"
"rounded-sm"
)}
>
<PentominoDisplay
Expand All @@ -49,7 +50,7 @@ export const Header = ({ ...rest }) => {
</div>
<div
className={clsx(
"lg:ml-6 xl:ml-16 p-1 border-solid rounded border w-[8em] h-[8em] flex justify-center items-center self-end",
"lg:ml-6 xl:ml-16 p-1 border-solid rounded border w-28 h-28 md:w-32 md:h-32 flex justify-center items-center self-end",
"border-black dark:border-slate-50"
)}
>
Expand Down
206 changes: 104 additions & 102 deletions src/components/Information/Information.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,108 +104,110 @@ export const Information = () => {
return (
<Modal trigger={<QuestionMarkCircleIcon className="h-10 w-10 text-gray-800 dark:text-gray-300" />}>
<Dialog.Title className="text-center font-bold text-md mb-2">About Pentominoes</Dialog.Title>
<p className="mb-2">
Pentominoes are tiles of area 5. There are 12 distinct pentominoes, up to rotation & reflection, with each tile
having somewhere between 2 (the {<InformationPentominoDisplay p="I" />} tile) and 8 (
{<InformationPentominoDisplay p="F" />} {<InformationPentominoDisplay p="L" />}{" "}
{<InformationPentominoDisplay p="N" />} {<InformationPentominoDisplay p="P" />}{" "}
{<InformationPentominoDisplay p="Y" />}) distinct orientations.
</p>
<p className="mb-2">
This puzzle game also provides a one-square-unit-area tile that you can use as terrain (the{" "}
<InformationPentominoDisplay p="R"></InformationPentominoDisplay> tile).
</p>
<p className="mb-2">
There are several different ways to enjoy Pentominoes, but the common theme is that you will try to fully tile a
grid of total area 60 (5x12=60) such that no pentominoes overlap or fall off the edge, and no empty squares
remain (other than whatever terrain you choose to place before starting to solve the puzzle).
</p>
<p className="mb-2">
Generally, you want to use one of each pentomino to tile the board, but you're welcome to use this app however
you like, and there are no prohibitions against using a tile more than once unless you want there to be. One
suggestion is to attempt to tile an area with just the {<InformationPentominoDisplay p="P" />} tile.
</p>
<p className="mb-2">
For an added challenge, you can also choose to apply "colorways" to your tiles. Then, constrain yourself to make
a solve where the 4 tiles of some color must be pairwise non-adjacent; or must be adjacent; or must be adjacent
and form a line spanning the grid area (this last one is especially fun in 8x8 grids with 4 squares of terrain).
Setting these colorways is available in the Settings dialog.
</p>
<p>
If you're new to pentominoes, feel free to "cheat" in your first few solve attempts and move terrain around, or
use one piece twice - this is a single-player puzzle game, so the rules are whatever you make them to be!
</p>
<Dialog.Title className="text-center font-bold text-md mb-2">Hotkeys</Dialog.Title>
<KeyboardKeyInfo>
<KeyboardKey>Ctrl</KeyboardKey> + <KeyboardKey>Z</KeyboardKey>
<span>=</span>Undo last action that modified the grid
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>W</KeyboardKey>
<span>=</span>Reflect current pentomino along the y-axis (horizontally)
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>S</KeyboardKey>
<span>=</span>Reflect current pentomino along the x-axis (vertically)
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>A</KeyboardKey>
<span>=</span>Rotate current pentomino counter-clockwise
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>D</KeyboardKey>
<span>=</span>Rotate current pentomino clockwise
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>Q</KeyboardKey>
<span>=</span>Select previous pentomino
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>E</KeyboardKey>
<span>=</span>Select next pentomino
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowUpIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span>Move grid cursor up
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowRightIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span>Move grid cursor to the right
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowDownIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span>Move grid cursor down
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowLeftIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span> Move grid cursor to the left
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>Enter</KeyboardKey>
<span>=</span>Add/remove pentomino from board at selected grid location
</KeyboardKeyInfo>
<Dialog.Title className="text-center font-bold text-md mb-2">Suggested Puzzles</Dialog.Title>
<div className="flex flex-row flex-wrap gap-3 justify-center">
{exampleGrids.map((grid, i) => (
<div key={i} className="flex flex-col items-center justify-center">
<InfoGrid grid={grid}>
<Grid
pentominoSize={4}
paintedGrid={getPaintedBoard(grid, SURFACES.Rectangle, undefined, false)}
borderColor={darkMode ? "#F3F4F6" : "black"}
/>
</InfoGrid>
Width: {grid[0].length} Length: {grid.length}
</div>
))}
<div className="px-4">
<p className="mb-2">
Pentominoes are tiles of area 5. There are 12 distinct pentominoes, up to rotation & reflection, with each
tile having somewhere between 2 (the {<InformationPentominoDisplay p="I" />} tile) and 8 (
{<InformationPentominoDisplay p="F" />} {<InformationPentominoDisplay p="L" />}{" "}
{<InformationPentominoDisplay p="N" />} {<InformationPentominoDisplay p="P" />}{" "}
{<InformationPentominoDisplay p="Y" />}) distinct orientations.
</p>
<p className="mb-2">
This puzzle game also provides a one-square-unit-area tile that you can use as terrain (the{" "}
<InformationPentominoDisplay p="R"></InformationPentominoDisplay> tile).
</p>
<p className="mb-2">
There are several different ways to enjoy Pentominoes, but the common theme is that you will try to fully tile
a grid of total area 60 (5x12=60) such that no pentominoes overlap or fall off the edge, and no empty squares
remain (other than whatever terrain you choose to place before starting to solve the puzzle).
</p>
<p className="mb-2">
Generally, you want to use one of each pentomino to tile the board, but you're welcome to use this app however
you like, and there are no prohibitions against using a tile more than once unless you want there to be. One
suggestion is to attempt to tile an area with just the {<InformationPentominoDisplay p="P" />} tile.
</p>
<p className="mb-2">
For an added challenge, you can also choose to apply "colorways" to your tiles. Then, constrain yourself to
make a solve where the 4 tiles of some color must be pairwise non-adjacent; or must be adjacent; or must be
adjacent and form a line spanning the grid area (this last one is especially fun in 8x8 grids with 4 squares
of terrain). Setting these colorways is available in the Settings dialog.
</p>
<p>
If you're new to pentominoes, feel free to "cheat" in your first few solve attempts and move terrain around,
or use one piece twice - this is a single-player puzzle game, so the rules are whatever you make them to be!
</p>
<Dialog.Title className="text-center font-bold text-md mb-2">Hotkeys</Dialog.Title>
<KeyboardKeyInfo>
<KeyboardKey>Ctrl</KeyboardKey> + <KeyboardKey>Z</KeyboardKey>
<span>=</span>Undo last action that modified the grid
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>W</KeyboardKey>
<span>=</span>Reflect current pentomino along the y-axis (horizontally)
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>S</KeyboardKey>
<span>=</span>Reflect current pentomino along the x-axis (vertically)
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>A</KeyboardKey>
<span>=</span>Rotate current pentomino counter-clockwise
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>D</KeyboardKey>
<span>=</span>Rotate current pentomino clockwise
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>Q</KeyboardKey>
<span>=</span>Select previous pentomino
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>E</KeyboardKey>
<span>=</span>Select next pentomino
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowUpIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span>Move grid cursor up
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowRightIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span>Move grid cursor to the right
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowDownIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span>Move grid cursor down
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>
<ArrowLeftIcon width={15} className="my-1" />
</KeyboardKey>
<span>=</span> Move grid cursor to the left
</KeyboardKeyInfo>
<KeyboardKeyInfo>
<KeyboardKey>Enter</KeyboardKey>
<span>=</span>Add/remove pentomino from board at selected grid location
</KeyboardKeyInfo>
<Dialog.Title className="text-center font-bold text-md mb-2">Suggested Puzzles</Dialog.Title>
<div className="flex flex-row flex-wrap gap-3 justify-center">
{exampleGrids.map((grid, i) => (
<div key={i} className="flex flex-col items-center justify-center">
<InfoGrid grid={grid}>
<Grid
pentominoSize={4}
paintedGrid={getPaintedBoard(grid, SURFACES.Rectangle, undefined, false)}
borderColor={darkMode ? "#F3F4F6" : "black"}
/>
</InfoGrid>
Width: {grid[0].length} Length: {grid.length}
</div>
))}
</div>
</div>
</Modal>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Modal/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export const Modal = ({
onOpenAutoFocus={onOpenAutoFocus}
className={clsx(
"bg-gray-300 dark:bg-gray-800 dark:text-gray-50",
"rounded-lg p-8 shadow-md shadow-gray-500 dark:shadow-none",
"rounded-lg pt-8 pb-0 shadow-md shadow-gray-500 dark:shadow-none",
"fixed top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]",
"max-h-[90vh] overflow-y-auto w-[min(90vw,_48rem)]"
"max-h-[90vh] overflow-y-auto w-[min(90vw,_40rem)]"
)}
>
{children}
Expand Down
4 changes: 3 additions & 1 deletion src/components/PentominoDisplay/PentominoDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@ export const PentominoDisplay = ({
backgroundColor: bg.style,
}}
>
{x === p.center.x && y === p.center.y && showCenter && <DotFilledIcon />}
{x === p.center.x && y === p.center.y && showCenter && pentomino.name !== PENTOMINOES.R.name && (
<DotFilledIcon />
)}
</div>
);
})
Expand Down
Loading

0 comments on commit e27789f

Please sign in to comment.