Puzzle Component

General Information

• Puzzle layouts are generated through a svelte PuzzleLayout component, which can be imported by including the following line in the file's script tag:
  import PuzzleLayout from '$lib/components/PuzzleLayout.svelte';
• A puzzle-like layout is used on several pages, and as such, a component has been made to avoid code repetition and provide consistency between pages. The differences between the configurations of said puzzle layouts are similar, and can thus be easily parameterized.
• The PuzzleLayout component provides two panels, the left one being 18 half-blocks wide and the right one 12 half-blocks, creating a separation of two half-blocks between the two panels. Consequently, the component requires a width of 32 half-blocks to be rendered correctly. Note that the content is not the full 12 and 18 half-blocks for the entire height of the layout—cutouts are applied to the bottom-right of the left panel and top-left of the right panel to create the puzzle layout.
• The content and background of a panel need to be provided separately, given that the puzzle-layout makes use of the Cutout component, i.e., content that needs to be affected by the cutout needs to be considered background content, such that the remaining content is unaffected by the cutout.
• The PuzzleLayout component has one optional parameter through which the layout can be configured.
  1. includeButtonCutout: Whether the layout should include a cutout in the bottom-right corner that fits a one-block by one-block circle.
• Furthermore, several snippets need to be provided through which components of the puzzle layout can be rendered. Said snippets can be included within the tags of the PuzzleLayout component for convenience.
  1. leftBackground(): A snippet that renders the (background) elements that need to be affected by the cutouts in the left side of the puzzle layout.
  2. leftContent(): A snippet that renders the content in the left panel of the puzzle layout.
  3. rightBackground(): A snippet that renders the (background) elements that need to be affected by the cutouts in the right side of the puzzle layout.
  4. rightContent(): A snippet that renders the content in the right panel of the puzzle layout.