Numbrix Path Puzzle

Overview

Numbrix is a logic puzzle where players fill a grid with consecutive numbers such that each number is orthogonally adjacent to the next. The puzzle provides some pre-filled numbers as clues, and players must connect them in sequence.

Implementation Details

Puzzle Structure

The element receives a 2D array where 0 represents empty cells and non-zero values are fixed clues. The goal is to fill all cells with numbers from 1 to (width × height) such that consecutive numbers are adjacent horizontally or vertically.

// Example element configuration
::: js Numbrix
    [
        [0,15,10,9,8,0],
        [17,0,0,0,0,6],
        [18,0,12,3,0,1],
        [19,0,25,26,0,30],
        [20,0,0,0,0,31],
        [0,22,35,34,33,0]
    ]
    numbrix1
    autoPlay, allowFullscreen, saveStates
:::

Validation Logic

The element validates three conditions:

1. Completeness: All cells must contain valid numbers (1 to total cells)
2. Uniqueness: Each number appears exactly once
3. Connectivity: Consecutive numbers must be orthogonally adjacent

The validation uses a positions map to track number locations, then iterates through consecutive pairs to check adjacency using Manhattan distance.

UI Features

Fixed Cells: Pre-filled numbers are displayed with bold font and a gray background, and their inputs are disabled to prevent modification.

Dynamic Borders: The grid uses variable border widths (2px on edges, 1px internally) to create a clean visual boundary while maintaining cell separation.

Input Validation: Accepts only numeric input with a maximum length equal to the total number of cells (e.g., 2 digits for grids up to 99 cells).

Technical Considerations

The element maintains two separate grids: given (immutable initial state) and grid (current user input). This separation allows reset functionality and clear distinction between clues and user answers.

State persistence saves only the grid array, as the given array is reconstructed from parameters on each initialization.