Skip to content

Latest commit

 

History

History
46 lines (34 loc) · 5.24 KB

Styling_Puzzles.md

File metadata and controls

46 lines (34 loc) · 5.24 KB

Extending the Styling Code for Further Puzzles

I have aimed to make the puzzle styling for this project extensible, so that it can properly style many similar puzzles to the ones already implemented.

The core component for puzzle display is the Board component. This provides by default a basic grid/numerical display for puzzles. It will be used as the default whenever an unrecognised .eprime file is used as input.

To create a new Puzzle style, take the following steps:

  1. Create a new NewPuzzleBoard.jsx file in the ../client/src/components/PuzzleBoards directory.
  2. Copy the code for BinairoBoard.jsx into this file and change the class/export name accordingly.
  3. Add a case to the switch statement in the chooseBoard() function of the PuzzleStepper.jsx file.
  4. Read desired param values into state from the this.props.params object.
  5. Write functions to generate desired Board props from these param values.

Note: Following an update to conjure, parameters are now represented as dictionaries mapping indices to values. The Board properties are based on arrays, so it is necessary to convert between representations. For example:

grid: Object.values(this.props.params.presetvals).map((o) =>
        Object.values(o)
      )

The currently supported Board props are as follows:

  • literalBackgrounds: An object mapping literal singleton values to background image values, so that known cells can have a custom image background. See TentsBoard.jsx for an example.
  • cellBackgrounds: A 2D array with each indexed value corresponding to the backgroundImage CSS of each cell at that index in the grid. Note that if both literalBackground and cellBackground apply to the same cell, the cellBackground will be overlayed on cellBackgrounds. See ThermometerBoard.jsx for an example, and LoopyBoard.jsx for an example of how the overlay of cellBackgrounds and literalBackgrounds can be used together.
  • cellBorders: A 2D array with each indexed value corresponding to the border css of each cell at that index in the grid. Can be used to draw arbitrary "boxes" within the borders of the grid. See StarBattleBoard.jsx for an example.
  • cellInnerBorders: A 2D array with each indexed value corresponding to the border css of an "inner box" for each cell at that index in the grid. Can be used to draw additional "boxes" in over the borders of the grid. See KillerBoard.jsx for an example.
  • cellMargin: An object containing the margin property for all cells in the grid. Can be used to space cells further apart. See FutoshikiBoard.jsx for an example.
  • literalSize: An float representing the size of the smallest literal values as a percentage of the viewport width (known literals are exactly 3 times larger). See KillerBoard.jsx for an example.
  • cornerNumbers: A 2D array of objects, each with a value and a style field. For each cell this is an optional label to display, for example, a small number in the corner. See KillerBoard.jsx, or KakuroBoard.jsx for an example.
  • rightLabels: A 2D array of strings, to be displayed as an optional label between a cell and the cell directly to its right. See FutoshikiBoard.jsx for an example.
  • bottomLabels: As with right-labels, but between a cell and the cell directly below.
  • hiddenLiterals: An array of literal singleton values to be hidden, e.g. as a way to hide 0s. See KakuroBoard.jsx for an example.
  • colsums: An array representing an additional row to be displayed at the top of the grid (useful for puzzles with column sums). See TentsBoard.jsx for an example. (endcolsums is the same but for the end of the grid.)
  • rowsums: An array representing an additional column to be displayed at the left of the grid (useful for puzzles with row sums). See TentsBoard.jsx for an example. (endrowsums is the same but for the end of the grid.)
  • startrows: A 2D array of additional rows to be displayed at the top of the grid. See NonogramBoard.jsx for an example.
  • startcols: A 2D array of additional columns to be displayed at the left of the grid. See NonogramBoard.jsx for an example.

It can be useful to pass CSS gradients in the cellBackgrounds property for drawing simple shapes such as circles, bars and diagonals.