Puzzle Rendering Widgets
This is a gallery of puzzle rendering widgets, mostly for my own 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
2D Piece: fixed width
2D Piece: fixed cell size
- TODO: implement fixed cell size
2D Piece, another orientation
Piece rotated by in-template filter.
2D Boards
The objective of a tiling puzzle is to use pieces to cover the area of the board, without gaps or overlaps.
Empty 2D Board
A checkerboard pattern makes it clear how many tiles there are.
A solid color is visually simpler, but it's hard to parse how many tiles are present. This dark blue shape could be 5 tiles or 180.
Partial 2D Board
Dark blue is used for the area where pieces have not yet been placed.
Completed 2D Board
A solved Board with default colors.
Color Shifting In Template
Same data as the Completed 2D Board above, with colors shifted by the template.
3D Pieces
See also: https://codepen.io/wmatthew/pen/ZEbNyVg
3D Piece
3D Piece, another orientation
Note that the coloring changes here. The side facing the user is still red, but it's a different side (3 red faces, instead of 5 above). This is because we rotated the underlying list of coordinates (before assigning colors to faces) instead of applying a CSS transform (after assigning colors to faces).
3D Piece, rotating
2D Representation of 3D Piece
This is an elevation map of the same piece as above.
3D Piece, semi-transparent
- TODO: opacity as an arg?
3D Boards
With 3D polycube puzzle pieces, there are two types of tiling puzzles I'm interested in. These puzzles can be defined by their objective:
- Completely cover a floor, with every piece touching the floor.
- Fit all pieces into a volume of space (which may or may not fill the space)
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: how to show shape of the board in 3D? Dotted lines?
Partial 3D Board
- TODO: show board with multiple pieces placed
Completed 3D Board
- TODO: show a completed board.
Other, More Abstract Things
Data Grid with number values
Render a table from JSON data.
Annotated Solution Sequence
Abstract Grid of Solved Puzzles - hover to view
- TODO: hovering not implemented yet
List of puzzle constraints
Clones Tile A Rectangle - Restricted Neighbors
Copies of a single polycube tile a rectangle boardKey. Matching orientations can't touch.
Key: Clones_Tile_A_Square (Template)
Children: Clones Tile A Rectangle - Restricted Neighbors (rect1x1_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect2x2_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect3x3_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect4x4_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect5x5_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect6x6_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect7x7_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect8x8_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect9x9_PLR), Clones Tile A Rectangle - Restricted Neighbors (rect10x10_PLR)
Hidden content
TODO: make it so you click the blacked-out content itself, not a button nearby?
Raw JSON
Piece Normalizer/Format Translator
TODO
- transform format before render
- shift coordinates (from non-positive coordinates)
- normalize orientation
Verifying normalization correctness should be done in unit tests. this is just about display logic.
Library Browser / Gallery
- TODO
Render Artifacts
TODO: Fix the occasional artifacts on desktop chrome: thin white lines on some row boundaries. The relevant CSS attribute seems to be grid-auto-rows.