bridges-cli 0.0.1 → 0.2.0

package/src/components/HashiGrid.tsx

@@ -1,15 +1,17 @@
 import { Box } from 'ink'
 
-import type { HashiNodeData } from '../types.ts'
+import type { HashiNodeData, SelectionState } from '../types.ts'
+import {
+    NODE_WIDTH,
+    OUTER_PADDING,
+    ROW_HEIGHT,
+    SPACE_BETWEEN,
+    validateGrid,
+} from '../utils/bridges.ts'
 import HashiRow from './HashiRow.tsx'
 import Header from './Header.tsx'
 import Messages from './Messages.tsx'
 
-export const ROW_HEIGHT = 3
-export const NODE_WIDTH = 5
-export const SPACE_BETWEEN = 0
-export const OUTER_PADDING = 1
-
 type HashiGridProps = {
     /** The full data structure needed to render the grid. Height of the grid is determined
      * by the number of rows here. */
@@ -28,42 +30,18 @@ type HashiGridProps = {
     hasSolution?: boolean
     /** Whether to show the solution */
     showSolution?: boolean
-}
-
-/**
- * Ensure the grid data is consistent with a valid Hashiwokakero puzzle.
- */
-export function validateGrid({ rows, numNodes }: HashiGridProps): void {
-    if (!rows || rows.length === 0) {
-        throw new Error('HashiGrid: empty data supplied')
-    }
-
-    let rowCount = 0
-    for (const nodes of rows) {
-        const prefix = `HashiGrid row ${rowCount}: `
-
-        if (nodes.length !== numNodes) {
-            throw new Error(`${prefix}expected ${numNodes} nodes, got ${nodes.length}`)
-        }
-
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i]
-            if (!node) {
-                throw new Error(`${prefix}node at position ${i} is undefined`)
-            }
-            if (
-                typeof node.value !== 'number' &&
-                node.value !== '-' &&
-                node.value !== '=' &&
-                node.value !== ' ' &&
-                node.value !== '#' &&
-                node.value !== '|'
-            ) {
-                throw new Error(`${prefix}node at position ${i} has invalid value: ${node.value}`)
-            }
-        }
-        rowCount++
-    }
+    /** Whether to enable the solution feature */
+    enableSolutions?: boolean
+    /** Current selection state for highlighting */
+    selectionState?: SelectionState
+    /** Minimum number value in the puzzle */
+    minNumber?: number
+    /** Maximum number value in the puzzle */
+    maxNumber?: number
+    /** Whether the puzzle solution has been reached */
+    solutionReached?: boolean
+    /** Whether the grid is not fully connected but all nodes are filled */
+    gridNotConnected?: boolean
 }
 
 export default function HashiGrid({
@@ -75,6 +53,12 @@ export default function HashiGrid({
     isCustomPuzzle = false,
     hasSolution = false,
     showSolution = false,
+    enableSolutions = false,
+    selectionState,
+    minNumber,
+    maxNumber,
+    solutionReached = false,
+    gridNotConnected = false,
 }: HashiGridProps) {
     validateGrid({ rows, numNodes })
 
@@ -92,6 +76,9 @@ export default function HashiGrid({
                 puzzle={puzzle}
                 isCustomPuzzle={isCustomPuzzle}
                 showSolution={showSolution}
+                selectionState={selectionState}
+                minNumber={minNumber}
+                maxNumber={maxNumber}
             />
             <Box
                 borderStyle="single"
@@ -101,10 +88,25 @@ export default function HashiGrid({
                 flexDirection="column"
             >
                 {rows.map((nodes, i) => (
-                    <HashiRow key={i} nodes={nodes} />
+                    <HashiRow
+                        key={i}
+                        nodes={nodes}
+                        rowIndex={i}
+                        highlightedNode={selectionState?.selectedNumber ?? undefined}
+                        selectionState={selectionState}
+                        showSolution={showSolution}
+                    />
                 ))}
             </Box>
-            {showInstructions ? <Messages hasSolution={hasSolution} /> : null}
+            {showInstructions ? (
+                <Messages
+                    hasSolution={hasSolution}
+                    enableSolutions={enableSolutions}
+                    selectionState={selectionState}
+                    solutionReached={solutionReached}
+                    gridNotConnected={gridNotConnected}
+                />
+            ) : null}
         </Box>
     )
 }

package/src/components/HashiRow.tsx

@@ -1,94 +1,95 @@
 import { Box, Text } from 'ink'
+import type React from 'react'
 
-import type { HashiNodeData } from '../types.ts'
-import { NODE_WIDTH, OUTER_PADDING, SPACE_BETWEEN } from './HashiGrid.tsx'
+import type { HashiNodeData, SelectionState } from '../types.ts'
+import {
+    constructNode,
+    getDisplayMode,
+    getNodeFilledState,
+    NODE_WIDTH,
+    OUTER_PADDING,
+    ROW_HEIGHT,
+    SPACE_BETWEEN,
+} from '../utils/bridges.ts'
 
 type HashiRowProps = {
     nodes: HashiNodeData[]
+    highlightedNode?: number
+    rowIndex: number
+    selectionState?: SelectionState
+    showSolution?: boolean
 }
 
-const TOP_ROW = 0
-const MIDDLE_ROW = 1
-const BOTTOM_ROW = 2
-const ROW_HEIGHT = 3
-
-/**
- * Build the HashiGrid node with its value and borders. Options:
- *   - node with a value (always 1 digit)
- *   - empty node - render just spaces
- *   - horizontal line - single and double
- *   - vertical line - single and double
- */
-export function constructNode(node: HashiNodeData, line: 0 | 1 | 2): string {
-    // Horizontal line
-    if (node.value === '-') {
-        return line === MIDDLE_ROW ? '─────' : ' '.repeat(NODE_WIDTH)
-    }
-
-    // Double horizontal line
-    if (node.value === '=') {
-        return line === MIDDLE_ROW ? '═════' : ' '.repeat(NODE_WIDTH)
-    }
-
-    // Vertical line
-    if (node.value === '|') {
-        return '  │  '
-    }
-
-    // Double vertical line
-    if (node.value === '#') {
-        return '  ║  '
-    }
+export default function HashiRow({
+    nodes,
+    highlightedNode,
+    rowIndex,
+    selectionState,
+    showSolution,
+}: HashiRowProps) {
+    // Each row consists of multiple lines of terminal output
+    const lines: React.ReactNode[] = []
 
-    // Node with value to render
-    if (node.value !== ' ') {
-        if (line === TOP_ROW) {
-            const up = node.lineUp === 2 ? '╨' : node.lineUp === 1 ? '┴' : '─'
-            return `╭─${up}─╮`
-        } else if (line === MIDDLE_ROW) {
-            const left = node.lineLeft === 2 ? '╡' : node.lineLeft === 1 ? '┤' : '│'
-            const right = node.lineRight === 2 ? '╞' : node.lineRight === 1 ? '├' : '│'
-            return `${left} ${node.value} ${right}`
-        } else if (line === BOTTOM_ROW) {
-            const down = node.lineDown === 2 ? '╥' : node.lineDown === 1 ? '┬' : '─'
-            return `╰─${down}─╯`
+    // Build a map of col index to disambiguation label for this row
+    const disambiguationMap: Record<number, string> = {}
+    if (selectionState?.mode === 'disambiguation' && selectionState.matchingNodes) {
+        for (let i = 0; i < selectionState.matchingNodes.length; i++) {
+            const match = selectionState.matchingNodes[i]
+            const label = selectionState.disambiguationLabels[i]
+            if (match && match.row === rowIndex) {
+                disambiguationMap[match.col] = label ?? ''
+            }
         }
     }
 
-    // Empty node
-    return ' '.repeat(NODE_WIDTH)
-}
-
-export default function HashiRow({ nodes }: HashiRowProps) {
-    // Each row consists of multiple lines of terminal output
-    const lines: string[] = []
     for (let line = 0; line < ROW_HEIGHT; line++) {
-        let rowStr = ' '.repeat(OUTER_PADDING)
+        const rowItems: React.ReactNode[] = []
 
         // Render each node into the terminal line output
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i]
+
             if (!node) {
-                rowStr += ' '.repeat(NODE_WIDTH)
+                rowItems.push(' '.repeat(NODE_WIDTH))
                 continue
             }
 
-            rowStr += constructNode(node, line as 0 | 1 | 2)
+            const displayMode = getDisplayMode(
+                node,
+                highlightedNode,
+                rowIndex,
+                i,
+                selectionState?.selectedNode ?? null,
+                selectionState?.mode
+            )
+            const label = disambiguationMap[i]
+            const filledState = getNodeFilledState(node)
+            rowItems.push(
+                constructNode(
+                    node,
+                    line as 0 | 1 | 2,
+                    displayMode,
+                    label,
+                    filledState,
+                    showSolution
+                )
+            )
 
             // Add space between columns except the last
             if (i < nodes.length - 1) {
-                rowStr += ' '.repeat(SPACE_BETWEEN)
+                rowItems.push(' '.repeat(SPACE_BETWEEN))
             }
         }
-        rowStr += ' '.repeat(OUTER_PADDING)
-        lines.push(rowStr)
+
+        const rowStr = (
+            <>
+                {' '.repeat(OUTER_PADDING)}
+                {rowItems}
+                {' '.repeat(OUTER_PADDING)}
+            </>
+        )
+        lines.push(<Text key={line}>{rowStr}</Text>)
     }
 
-    return (
-        <Box flexDirection="column">
-            {lines.map((line, i) => (
-                <Text key={i}>{line}</Text>
-            ))}
-        </Box>
-    )
+    return <Box flexDirection="column">{lines}</Box>
 }

package/src/components/Header.tsx

@@ -1,10 +1,22 @@
 import { Box, Text } from 'ink'
 
+import type { SelectionState } from '../types.ts'
+
 type HeaderProps = {
     puzzleIndex: number
     puzzle: string
     isCustomPuzzle?: boolean
     showSolution?: boolean
+    selectionState?: SelectionState
+    minNumber?: number
+    maxNumber?: number
+}
+
+const directionNames: Record<string, string> = {
+    h: 'left',
+    j: 'down',
+    k: 'up',
+    l: 'right',
 }
 
 export default function Header({
@@ -12,14 +24,48 @@ export default function Header({
     puzzle,
     isCustomPuzzle = false,
     showSolution = false,
+    selectionState,
+    minNumber,
+    maxNumber,
 }: HeaderProps) {
     const title = isCustomPuzzle
         ? `Bridges: Puzzle - ${puzzle}`
-        : `Bridges: Puzzle #${puzzleIndex + 1}${showSolution ? ' (Solution)' : ''}`
+        : `Bridges: Puzzle #${puzzleIndex + 1}`
+
+    let statusText = ''
+    if (selectionState) {
+        const { mode, selectedNumber, direction, bridgeErased, isDoubleBridge } = selectionState
+        if (mode === 'selecting-node' && selectedNumber !== null) {
+            statusText = 'Select direction with h/j/k/l (H/J/K/L = double line)'
+        } else if (mode === 'disambiguation' && selectedNumber !== null) {
+            statusText = 'Press label shown to select that node'
+        } else if (mode === 'selected' && selectedNumber !== null && direction) {
+            if (bridgeErased) {
+                statusText = 'Erased bridge'
+            } else {
+                const lineType = direction === 'h' || direction === 'l' ? 'horizontal' : 'vertical'
+                const bridgeType = isDoubleBridge ? 'double ' : ''
+                statusText = `Drew ${bridgeType}${lineType} bridge`
+            }
+        } else if (mode === 'invalid' && selectedNumber !== null && direction) {
+            statusText = `Cannot draw bridge ${directionNames[direction]} from node`
+        }
+    }
+
+    const idleMessage = showSolution
+        ? 'Viewing solution (press s to return to puzzle)'
+        : minNumber !== undefined && maxNumber !== undefined
+          ? `Type a number [${minNumber}-${maxNumber}] to select a node`
+          : 'Type a number to select a node'
 
     return (
-        <Box marginBottom={1}>
+        <Box flexDirection="column" marginBottom={1}>
             <Text bold>{title}</Text>
+            {statusText ? (
+                <Text dimColor>• {statusText}</Text>
+            ) : (
+                <Text dimColor>• {idleMessage}</Text>
+            )}
         </Box>
     )
 }

package/src/components/Messages.tsx

@@ -1,27 +1,67 @@
 import { Box, Text } from 'ink'
 
+import type { SelectionState } from '../types.ts'
+
 type LegendItem = {
     key: string
     description: string
     disabled?: boolean
 }
 
-const LEGEND_ITEMS = (hasSolution: boolean): LegendItem[] => [
-    { key: 'p', description: 'Previous puzzle' },
-    { key: 'n', description: 'Next puzzle' },
-    { key: 's', description: 'Show solution', disabled: !hasSolution },
-    { key: 'q', description: 'Quit' },
-]
+export function legendItems(
+    hasSolution: boolean,
+    enableSolutions: boolean,
+    isSelecting: boolean
+): LegendItem[] {
+    const items: LegendItem[] = [
+        { key: 'p', description: 'Previous puzzle', disabled: isSelecting },
+        { key: 'n', description: 'Next puzzle', disabled: isSelecting },
+    ]
+
+    if (enableSolutions) {
+        items.push({
+            key: 's',
+            description: 'Show solution',
+            disabled: isSelecting || !hasSolution,
+        })
+    }
+
+    items.push({ key: 'q', description: 'Quit' })
+
+    return items
+}
 
 type MessagesProps = {
     hasSolution?: boolean
+    enableSolutions?: boolean
+    selectionState?: SelectionState
+    solutionReached?: boolean
+    gridNotConnected?: boolean
 }
 
-export default function Messages({ hasSolution = false }: MessagesProps) {
+export default function Messages({
+    hasSolution = false,
+    enableSolutions = false,
+    selectionState,
+    solutionReached = false,
+    gridNotConnected = false,
+}: MessagesProps) {
+    const isSelecting = selectionState !== undefined && selectionState.mode !== 'idle'
+
     return (
         <Box flexDirection="column" marginTop={1}>
+            {solutionReached ? (
+                <Text bold color="green">
+                    Solution reached!
+                </Text>
+            ) : null}
+            {gridNotConnected ? (
+                <Text bold color="yellow">
+                    Grid is not fully connected
+                </Text>
+            ) : null}
             <Text bold>Controls:</Text>
-            {LEGEND_ITEMS(hasSolution).map(item => (
+            {legendItems(hasSolution, enableSolutions, isSelecting).map(item => (
                 <Box key={item.key}>
                     <Text bold color={item.disabled ? 'gray' : undefined}>
                         {item.key}

package/src/components/__tests__/HashiGrid.test.tsx

@@ -19,6 +19,7 @@ describe('HashiGrid', () => {
 
         expect(lastFrame()).toEqual(
             `Bridges: Puzzle #1
+• Type a number to select a node
 
 ┌───────────────────────────┐
 │ ╭───╮     ╭───╮           │