Puzzle Rendering Widgets
This is a gallery of puzzle rendering widgets for testing purposes. Headers with nothing rendered below are things I still need to implement.
To help these load quickly, I try to minimize client side JS wherever possible.
2D Pieces
CSS grid vs SVG
TODO: make these match exactly
TODO: add grid lines around outer edge only
🗼 Templates: pieceElevation, pieceSvg
2D Piece: fixed width
Keep the total width the same regardless of content.
🗼 Template: pieceElevation
2D Piece: fixed cell size
TODO: implement fixed cell size
2D Piece: orientations
Piece rotated by in-template filter.
TODO: fixed size, all one row?
🗼 Template: pieceElevation
2D Boards
The objective of a tiling puzzle is to use pieces to cover an area, without gaps or overlaps. We call that area the board.
Empty 2D Boards
A solid color is simple, but hard to parse. The dark shape below could be made up of 5 squares or many more. The checkerboard pattern makes the area of the board clear.
TODO: dotted-outline view of an empty board
TODO: apply checkerboard pattern in template
🗼 Template: polyomino
Partially Completed and Completed 2D Boards
A dark color is used for the area where pieces have not yet been placed.
TODO: add grid lines around piece division edges only
🗼 Template: polyomino
Color Shifting In Template
These templates have the same input data, but with colors shifted by the template.
🗼 Template: polyomino
Annotated 2D board
TODO: Override with custom face colors - for highlighting one face TODO: symbols (emojis?) on a select group of faces
3D Pieces
See also: https://codepen.io/wmatthew/pen/ZEbNyVg
3D Piece
This shows a 3D piece in two orientations. Note the coloring change: the front side facing the user is still red, but it's a different side (3 red faces vs 5). This is because we modified the underlying list of coordinates passed to the template (before assigning colors to faces) instead of applying a CSS transform (after assigning colors to faces).
🗼 Template: piece3d
3D Piece, rotating
🗼 Template: piece3d
2D Representation of 3D Piece
This is an elevation map of the same piece as above. This map only labels elevations 2 and greater.
🗼 Template: pieceElevation
3D Boards
Recall that the objective of a (2D) tiling puzzle is to use pieces to cover a (2D) area, without gaps or overlaps. We call that area the board. What is the 3D equivalent?
There are two types of 3D 'tiling' puzzles I'm interested in:
- Fit all pieces into a 3D volume of space (pieces may or may not fill the space)
- Completely cover a 2D area (floor), with every piece touching the floor.
The goal is to represent an empty, partial, or completed board in a way that makes sense for either of these puzzle types.
Empty 3D Board
TODO: remove interior faces
TODO: remove unnecessary edges too.
Partial 3D Board
TODO: show board with multiple pieces placed
Completed 3D Board
TODO: show a completed board.
Annotated 3D board
TODO: Override with custom face colors - for highlighting one face
TODO: symbols (emojis?) on a select group of faces
TODO: allow symbols to be aligned to edges of a face, to show matching rules
More Abstract Things
Sometimes it's useful to render other data on the same square-grid layout that we use to render tiles and boards. These abstract grids have distinct styling so it's clear we're not depicting pieces.
TODO: make sure all abstract grids have a distinct background color
Data Table
Render a table from JSON data. Tables have a light blue background.
🗼 Template: dataGrid
Solution Sequence
Click the board to advance sequence. You can also click the top tabs to skip to any step in the sequence.
🗼 Template: polyomino
Abstract Grid of Solved Puzzles - hover to view
Display results for a series of questions (eg, "can x of this piece and y of this other piece tile a board of size z?") in a spatial layout. This is useful for higher-level reasoning about a large number of possible puzzle configurations (for what values of x is there a solution? is there ever a solution when x > z? etc.)
TODO: implement hovering
🗼 Template: polyomino
Puzzle Constraints
Constraint Template: This is an abstract template, partially specifying a puzzle setup. It does not specify a piece supply or board, so it cannot be solved without more information.
🗼 Template: constraints
Clones Tile A Rectangle - Simple Version
Copies of a single polycube tile a rectangle. Simplest config; no constraint flags.
Key: Clones_Tile_A_Square_Simple (Template)
Constraints: defaults.
Children: rect3x3_T, rect4x4_T, rect5x5_T, rect6x6_T, rect7x7_T, rect8x8_T
Constraint: This constraint instantiates the template above, specifying a piece supply and board. In this case, it also shows results from analysis:
🗼 Template: constraints
Clones Tile A Rectangle - Simple Version (rect4x4_T)
Copies of a single polycube tile a rectangle. Simplest config; no constraint flags.
Key: Clones_Tile_A_Square_Simple_rect4x4_T (Generated)
Parent: Clones_Tile_A_Square_Simple
Board: rect4x4
Pieces: T x ∞
Constraints: defaults.
Result
Found 1 solution.
In 0 seconds and 9 steps, solver v0.1.1 ran on 8/14/2024 and found 2 total solutions, which reduced to 1 unique solutions. Completed without bailing early.
Hidden content
🗼 Template: polyomino
Raw JSON
🗼 Template: jsonTextArea
Library Browser / Gallery
- TODO
Render Bugs
Known unresolved rendering problems.
CSS grid: grid-auto-rows
CSS grid tables have intermittant artifacts on desktop chrome: thin horizontal white lines on some row boundaries.
The relevant CSS attribute seems to be grid-auto-rows in the actualMap CSS class.
Sometimes fails WITH grid-auto-rows
🗼 Template: pieceElevation
Sometimes fails WITHOUT grid-auto-rows
🗼 Template: pieceElevation
Sometimes fails either way
🗼 Template: polyomino