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. Matching orientations can't touch.
Key: Clones_Tile_A_Square (Template)
Children: rect2x2_L, rect2x2_PLR, rect2x2_PQO, rect2x2_PQR, rect2x2_PQA, rect2x2_APL, rect2x2_P, rect2x2_VPL, rect2x2_L+3, rect2x2_1x2x3, rect2x2_2x3x5, rect2x3_L, rect2x3_PLR, rect2x3_PQO, rect2x3_PQR, rect2x3_PQA, rect2x3_APL, rect2x3_P, rect2x3_VPL, rect2x3_L+3, rect2x3_1x2x3, rect2x3_2x3x5, rect3x3_L, rect3x3_PLR, rect3x3_PQO, rect3x3_PQR, rect3x3_PQA, rect3x3_APL, rect3x3_P, rect3x3_VPL, rect3x3_L+3, rect3x3_1x2x3, rect3x3_2x3x5, rect2x4_L, rect2x4_PLR, rect2x4_PQO, rect2x4_PQR, rect2x4_PQA, rect2x4_APL, rect2x4_P, rect2x4_VPL, rect2x4_L+3, rect2x4_1x2x3, rect2x4_2x3x5, rect3x4_L, rect3x4_PLR, rect3x4_PQO, rect3x4_PQR, rect3x4_PQA, rect3x4_APL, rect3x4_P, rect3x4_VPL, rect3x4_L+3, rect3x4_1x2x3, rect3x4_2x3x5, rect4x4_L, rect4x4_PLR, rect4x4_PQO, rect4x4_PQR, rect4x4_PQA, rect4x4_APL, rect4x4_P, rect4x4_VPL, rect4x4_L+3, rect4x4_1x2x3, rect4x4_2x3x5, rect2x5_L, rect2x5_PLR, rect2x5_PQO, rect2x5_PQR, rect2x5_PQA, rect2x5_APL, rect2x5_P, rect2x5_VPL, rect2x5_L+3, rect2x5_1x2x3, rect2x5_2x3x5, rect3x5_L, rect3x5_PLR, rect3x5_PQO, rect3x5_PQR, rect3x5_PQA, rect3x5_APL, rect3x5_P, rect3x5_VPL, rect3x5_L+3, rect3x5_1x2x3, rect3x5_2x3x5, rect4x5_L, rect4x5_PLR, rect4x5_PQO, rect4x5_PQR, rect4x5_PQA, rect4x5_APL, rect4x5_P, rect4x5_VPL, rect4x5_L+3, rect4x5_1x2x3, rect4x5_2x3x5, rect5x5_L, rect5x5_PLR, rect5x5_PQO, rect5x5_PQR, rect5x5_PQA, rect5x5_APL, rect5x5_P, rect5x5_VPL, rect5x5_L+3, rect5x5_1x2x3, rect5x5_2x3x5, rect2x6_L, rect2x6_PLR, rect2x6_PQO, rect2x6_PQR, rect2x6_PQA, rect2x6_APL, rect2x6_P, rect2x6_VPL, rect2x6_L+3, rect2x6_1x2x3, rect2x6_2x3x5, rect3x6_L, rect3x6_PLR, rect3x6_PQO, rect3x6_PQR, rect3x6_PQA, rect3x6_APL, rect3x6_P, rect3x6_VPL, rect3x6_L+3, rect3x6_1x2x3, rect3x6_2x3x5, rect4x6_L, rect4x6_PLR, rect4x6_PQO, rect4x6_PQR, rect4x6_PQA, rect4x6_APL, rect4x6_P, rect4x6_VPL, rect4x6_L+3, rect4x6_1x2x3, rect4x6_2x3x5, rect5x6_L, rect5x6_PLR, rect5x6_PQO, rect5x6_PQR, rect5x6_PQA, rect5x6_APL, rect5x6_P, rect5x6_VPL, rect5x6_L+3, rect5x6_1x2x3, rect5x6_2x3x5, rect6x6_L, rect6x6_PLR, rect6x6_PQO, rect6x6_PQR, rect6x6_PQA, rect6x6_APL, rect6x6_P, rect6x6_VPL, rect6x6_L+3, rect6x6_1x2x3, rect6x6_2x3x5, rect2x7_L, rect2x7_PLR, rect2x7_PQO, rect2x7_PQR, rect2x7_PQA, rect2x7_APL, rect2x7_P, rect2x7_VPL, rect2x7_L+3, rect2x7_1x2x3, rect2x7_2x3x5, rect3x7_L, rect3x7_PLR, rect3x7_PQO, rect3x7_PQR, rect3x7_PQA, rect3x7_APL, rect3x7_P, rect3x7_VPL, rect3x7_L+3, rect3x7_1x2x3, rect3x7_2x3x5, rect4x7_L, rect4x7_PLR, rect4x7_PQO, rect4x7_PQR, rect4x7_PQA, rect4x7_APL, rect4x7_P, rect4x7_VPL, rect4x7_L+3, rect4x7_1x2x3, rect4x7_2x3x5, rect5x7_L, rect5x7_PLR, rect5x7_PQO, rect5x7_PQR, rect5x7_PQA, rect5x7_APL, rect5x7_P, rect5x7_VPL, rect5x7_L+3, rect5x7_1x2x3, rect5x7_2x3x5, rect6x7_L, rect6x7_PLR, rect6x7_PQO, rect6x7_PQR, rect6x7_PQA, rect6x7_APL, rect6x7_P, rect6x7_VPL, rect6x7_L+3, rect6x7_1x2x3, rect6x7_2x3x5, rect7x7_L, rect7x7_PLR, rect7x7_PQO, rect7x7_PQR, rect7x7_PQA, rect7x7_APL, rect7x7_P, rect7x7_VPL, rect7x7_L+3, rect7x7_1x2x3, rect7x7_2x3x5
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.