maze-widget

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register, RenderElement, RenderSurface, Timer } from 'claude-code'
3import type { WidgetsMark, WidgetsPlace } from 'widgets'
4
5import type { MazeTrek } from '../types'
6
7type Point = readonly [x: number, y: number]
8type Layout = { walls: string[]; path: Point[] }
9
10const PANE = 'widgets'
11const CARD_COLUMNS = 40
12const TICK_MS = 150
13const VIEW_ROWS = 20
14const CELLS = 7
15const SIZE = CELLS * 2 + 1
16const STRIDE_TICKS = 8
17const TURN_TICKS = 4
18const FIELD = 1.1
19const CEILING = 0x0b1026
20const FLOOR = 0x1f2933
21const FACES = [0xc2703d, 0x8a4f2b]
22const WAYS: readonly Point[] = [[1, 0], [0, 1], [-1, 0], [0, -1]]
23const START: MazeTrek = { seed: 7, step: 0 }
24const site = { plugin: 'widgets', key: 'site' } as const
25const widths = { plugin: 'widgets', key: 'widths' } as const
26const isOn = atom({ plugin: 'maze-widget', key: 'isOn' } as const, false)
27const trek = atom({ plugin: 'maze-widget', key: 'trek' } as const, START)
28
29let timer: Timer | undefined
30let built: { seed: number; layout: Layout } | undefined
31
32const some = (count: number, word: string): string => `${count} ${word}${count === 1 ? '' : 's'}`
33
34const hash = (text: string): number => {
35  let sum = 7
36  for (const letter of text) sum = (sum * 31 + letter.charCodeAt(0)) % 100_003
37
38  return sum
39}
40
41const shade = (color: number, factor: number): number =>
42  (Math.round((color >> 16) * factor) << 16) |
43  (Math.round(((color >> 8) & 255) * factor) << 8) |
44  Math.round((color & 255) * factor)
45
46const build = (seed: number): Layout => {
47  if (built?.seed === seed) return built.layout
48
49  const grid = Array.from({ length: SIZE }, () => Array.from({ length: SIZE }, () => '#'))
50  const seen = new Set<number>([0])
51  const trail: Point[] = [[0, 0]]
52  const path: Point[] = [[1.5, 1.5]]
53  let state = (seed % 2_147_483_647) + 1
54
55  const open = (x: number, y: number): void => {
56    const row = grid[y]
57    if (row !== undefined) row[x] = '.'
58  }
59  open(1, 1)
60  while (trail.length > 0) {
61    const [x, y] = trail[trail.length - 1] ?? [0, 0]
62    const free = WAYS.filter(([dx, dy]) => {
63      const [nx, ny] = [x + dx, y + dy]
64
65      return nx >= 0 && ny >= 0 && nx < CELLS && ny < CELLS && !seen.has(ny * CELLS + nx)
66    })
67    if (free.length === 0) {
68      trail.pop()
69      const back = trail[trail.length - 1]
70      if (back !== undefined) path.push([back[0] * 2 + 1.5, back[1] * 2 + 1.5])
71      continue
72    }
73    state = (state * 48_271) % 2_147_483_647
74    const [dx, dy] = free[state % free.length] ?? [1, 0]
75    open(x * 2 + 1 + dx, y * 2 + 1 + dy)
76    open((x + dx) * 2 + 1, (y + dy) * 2 + 1)
77    seen.add((y + dy) * CELLS + x + dx)
78    trail.push([x + dx, y + dy])
79    path.push([(x + dx) * 2 + 1.5, (y + dy) * 2 + 1.5])
80  }
81
82  const layout = { walls: grid.map(row => row.join('')), path }
83  built = { seed, layout }
84
85  return layout
86}
87
88const headingOf = (from: Point, to: Point): number => Math.atan2(to[1] - from[1], to[0] - from[0])
89
90const view = (held: MazeTrek): { x: number; y: number; angle: number; walls: string[] } => {
91  const { walls, path } = build(held.seed)
92  const legs = path.length - 1
93  const leg = Math.floor(held.step / STRIDE_TICKS) % legs
94  const along = (held.step % STRIDE_TICKS) / STRIDE_TICKS
95  const from = path[leg] ?? [1.5, 1.5]
96  const to = path[leg + 1] ?? from
97  const before = path[(leg - 1 + legs) % legs] ?? from
98  const now = headingOf(from, to)
99  const was = leg === 0 ? now : headingOf(before, from)
100  const swing = Math.atan2(Math.sin(now - was), Math.cos(now - was))
101  const turned = Math.min(1, (held.step % STRIDE_TICKS) / TURN_TICKS)
102
103  return {
104    x: from[0] + (to[0] - from[0]) * along,
105    y: from[1] + (to[1] - from[1]) * along,
106    angle: was + swing * turned,
107    walls,
108  }
109}
110
111const cast = (walls: readonly string[], x: number, y: number, angle: number): { distance: number; face: number } => {
112  const [dirX, dirY] = [Math.cos(angle) || 1e-6, Math.sin(angle) || 1e-6]
113  const [gapX, gapY] = [Math.abs(1 / dirX), Math.abs(1 / dirY)]
114  let [cellX, cellY] = [Math.floor(x), Math.floor(y)]
115  let reachX = dirX < 0 ? (x - cellX) * gapX : (cellX + 1 - x) * gapX
116  let reachY = dirY < 0 ? (y - cellY) * gapY : (cellY + 1 - y) * gapY
117  let face = 0
118
119  for (let hops = 0; hops < SIZE * 3; hops += 1) {
120    if (reachX < reachY) {
121      reachX += gapX
122      cellX += dirX < 0 ? -1 : 1
123      face = 0
124    } else {
125      reachY += gapY
126      cellY += dirY < 0 ? -1 : 1
127      face = 1
128    }
129    if (walls[cellY]?.[cellX] !== '.') break
130  }
131
132  return { distance: face === 0 ? reachX - gapX : reachY - gapY, face }
133}
134
135const sync = async ($: EngineInterface): Promise<void> => {
136  const isWanted = await read($, isOn)
137  if (isWanted && timer === undefined) {
138    timer = $.clock.every(TICK_MS, () => {
139      void update($, trek, held => ({ ...(held ?? START), step: ((held ?? START).step + 1) % 1_000_000 }))
140    })
141  }
142  if (!isWanted && timer !== undefined) {
143    timer.cancel()
144    timer = undefined
145  }
146}
147
148const show = async (
149  $: EngineInterface,
150  surface: RenderSurface,
151  beneath: RenderElement,
152  place: WidgetsPlace,
153  columns: number,
154): Promise<RenderElement> => {
155  if (!(await read($, isOn))) return beneath
156  if ((await $.state.get(site)).value !== place) return beneath
157
158  const wanted = (await $.state.get(widths)).value?.['maze-widget'] ?? CARD_COLUMNS
159  const width = Math.min(wanted, Math.max(20, columns))
160  const inner = (width - 4) * 2
161  const held = await read($, trek)
162  const eye = view(held)
163  const marks: WidgetsMark[] = []
164
165  for (let y = VIEW_ROWS / 2; y < VIEW_ROWS; y += 1) {
166    const floor = shade(FLOOR, 0.5 + (y - VIEW_ROWS / 2) / VIEW_ROWS)
167    for (let x = 0; x < inner; x += 1) marks.push([x, y, floor])
168  }
169  for (let x = 0; x < inner; x += 1) {
170    const ray = eye.angle + (x / inner - 0.5) * FIELD
171    const hit = cast(eye.walls, eye.x, eye.y, ray)
172    const distance = Math.max(0.1, hit.distance * Math.cos(ray - eye.angle))
173    const height = Math.min(VIEW_ROWS, Math.round(VIEW_ROWS / distance))
174    const top = Math.floor((VIEW_ROWS - height) / 2)
175    const color = shade(FACES[hit.face] ?? FACES[0] ?? 0, Math.max(0.25, Math.min(1, 1.6 / distance)))
176    for (let y = top; y < top + height; y += 1) marks.push([x, y, color])
177  }
178
179  return $.widgets.card({
180    beneath,
181    width,
182    title: 'Maze',
183    note: some(Math.floor(held.step / STRIDE_TICKS), 'step'),
184    body: await $.widgets.picture({ surface, key: 'maze', columns: inner, rows: VIEW_ROWS, fill: CEILING, marks }),
185  })
186}
187
188export const register: Register = on => {
189  on('session.start', async ($, e, next) => {
190    await $.command.register({
191      name: 'maze-widget',
192      description: 'Toggle the first-person walk through a maze seeded by the project folder',
193      argumentHint: '[on|off|new]',
194    })
195    if ((await $.store.get('isOn')) === true) await update($, isOn, () => true)
196    await update($, trek, () => ({ seed: hash(e.cwd), step: 0 }))
197    await sync($)
198
199    return next(e)
200  })
201
202  on('command.run', { command: 'maze-widget' }, async ($, e) => {
203    const arg = e.args.trim().toLowerCase()
204
205    if (arg === 'new') {
206      await update($, trek, held => ({ seed: (held ?? START).seed + 1, step: 0 }))
207
208      return { text: 'A new maze.' }
209    }
210    if (arg !== '' && arg !== 'on' && arg !== 'off') {
211      return { text: 'Usage: /maze-widget [on|off|new]' }
212    }
213
214    const isShown = await update($, isOn, shown => (arg === '' ? !(shown ?? false) : arg === 'on'))
215    await $.store.set('isOn', isShown)
216    await sync($)
217
218    return { text: isShown ? 'Maze on; /widgets places it.' : 'Maze off.' }
219  })
220
221  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) =>
222    show($, e.surface, await next(e), 'side', e.props.bodyColumns),
223  )
224
225  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) =>
226    e.props.hasSurvey ? next(e) : show($, e.surface, await next(e), 'above', e.props.bodyColumns),
227  )
228
229  on('ui.render', { component: 'PromptHint' }, async ($, e, next) =>
230    show($, e.surface, await next(e), 'below', e.viewport?.columns ?? 80),
231  )
232}
233

1export type MazeTrek = {
2  seed: number
3  step: number
4}
5
6declare module 'claude-code' {
7  interface PluginState {
8    'maze-widget': { isOn: boolean; trek: MazeTrek }
9  }
10}
11