Interactive Crossword

Overview

The Crossword element is a grid-based puzzle game that allows users to fill in words based on clues. It supports arbitrary grid sizes, custom placeholder hints, keyboard navigation, and state persistence to resume partially completed puzzles.

Implementation Details

Initialization

The element receives a 2D array as its primary parameter where each cell contains either a space (blocked cell) or a letter (the solution). Cells can optionally include placeholder hints using the format "letter-hint".

// Example block config
::: js Crossword
    [
        [" ", " ", " ", " ", "A-³", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", " ", " ", " ", "X", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", " ", " ", " ", "I", " ", "C-⁸", " ", "N-⁶", " ", " ", " ", " ", " ", " "],
        [" ", " ", " ", "T-⁵", "O", "P", "O", "L", "O", "G", "Y", " ", " ", " ", "A-²"],
        [" ", " ", " ", " ", "M", " ", "S", " ", "R", " ", " ", "I-¹⁰", " ", " ", "B"],
        [" ", " ", " ", " ", " ", "R-¹", "I", "E", "M", "A", "N", "N", " ", " ", "E"],
        [" ", " ", " ", " ", " ", " ", "N", " ", " ", " ", " ", "D", " ", " ", "L"],
        ["A-⁷", "L", "E", "P", "H", "Z", "E", "R", "O", " ", " ", "U", " ", " ", "I"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "C", " ", " ", "A"],
        [" ", " ", "C-⁴", "O", "N", "T", "R", "A", "D", "I", "C", "T", "I", "O-⁹", "N"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "I", " ", "D", " "],
        [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "O", " ", "D", " "],
        [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "N", " ", " ", " "]
    ]
    crossword1en
    autoPlay, allowFullscreen, saveStates
:::

State Management

The grid stores user input separately from the solution. When saveStates is enabled, the current input state is saved to localStorage, allowing users to return to their progress later. The element compares user input against the solution to detect puzzle completion.

UI Features

Dynamic Sizing: The grid calculates cell size based on container dimensions, adjusting font size proportionally to maintain readability. Uses aspectRatio: 1 to ensure square cells.

Keyboard Navigation: Arrow keys move focus between cells. Input is automatically converted to uppercase and restricted to single letters using regex filtering.

Visual Feedback: Empty blocked cells are rendered with black backgrounds at 50% opacity. Input cells use themed colors that adapt to light/dark modes.

Completion Detection: When all cells match the solution (case-insensitive), inputs are disabled to signal puzzle completion.

Technical Considerations

The resize handler recalculates dimensions based on the smaller of width or height to maintain grid proportions. Border styling uses themed classes that respond to the website’s color scheme without requiring manual color management.

The element uses dataset attributes (data-row, data-col) to track cell positions, simplifying event handler logic and avoiding the need to parse DOM structure when handling input.