breakout-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 { BreakoutGame } from '../types'
6
7const PANE = 'widgets'
8const CARD_COLUMNS = 40
9const TICK_MS = 90
10const FIELD_COLUMNS = 72
11const FIELD_ROWS = 18
12const BRICK_COLUMNS = 6
13const BRICK_ROWS = 3
14const ACROSS = FIELD_COLUMNS / BRICK_COLUMNS
15const MAX_COURSES = 4
16const PADDLE = 10
17const PADDLE_ROW = FIELD_ROWS - 2
18const DARK = 0x0d1117
19const BALL = 0xffffff
20const BAT = 0xc9d1d9
21const COURSES = [0xe5484d, 0xf0883e, 0xffd43b, 0x3fb950]
22const FULL = '1'.repeat(ACROSS)
23const FRESH: BreakoutGame = { x: 36, y: 12, dx: 1, dy: -1, bricks: [FULL, FULL, FULL], score: 0, walls: 0 }
24const site = { plugin: 'widgets', key: 'site' } as const
25const widths = { plugin: 'widgets', key: 'widths' } as const
26const isOn = atom({ plugin: 'breakout-widget', key: 'isOn' } as const, false)
27const game = atom({ plugin: 'breakout-widget', key: 'game' } as const, FRESH)
28
29let timer: Timer | undefined
30
31const some = (count: number, word: string): string => `${count} ${word}${count === 1 ? '' : 's'}`
32
33const advance = (held: BreakoutGame | undefined): BreakoutGame => {
34  const before = held ?? FRESH
35  let { dx, dy, score, walls } = before
36  let bricks = before.bricks
37
38  if (before.x + dx < 0 || before.x + dx >= FIELD_COLUMNS) dx = -dx
39  if (before.y + dy < 0) dy = 1
40  if (before.y + dy >= PADDLE_ROW) {
41    dy = -1
42    dx = (before.x + score) % 5 === 0 ? -dx : dx
43  }
44
45  const x = before.x + dx
46  const y = before.y + dy
47  const course = Math.floor((y - 1) / BRICK_ROWS)
48  const column = Math.floor(x / BRICK_COLUMNS)
49  const isInBrick = y >= 1 && (y - 1) % BRICK_ROWS < BRICK_ROWS - 1 && x % BRICK_COLUMNS < BRICK_COLUMNS - 1
50
51  if (isInBrick && bricks[course]?.[column] === '1') {
52    bricks = bricks.map((row, index) =>
53      index === course ? `${row.slice(0, column)}0${row.slice(column + 1)}` : row,
54    )
55    dy = -dy
56    score += 1
57  }
58  if (bricks.every(row => !row.includes('1'))) {
59    bricks = [FULL, FULL, FULL]
60    walls += 1
61  }
62
63  return { x, y, dx, dy, bricks, score, walls }
64}
65
66const sync = async ($: EngineInterface): Promise<void> => {
67  const isWanted = await read($, isOn)
68  if (isWanted && timer === undefined) {
69    timer = $.clock.every(TICK_MS, () => {
70      void update($, game, advance)
71    })
72  }
73  if (!isWanted && timer !== undefined) {
74    timer.cancel()
75    timer = undefined
76  }
77}
78
79const show = async (
80  $: EngineInterface,
81  surface: RenderSurface,
82  beneath: RenderElement,
83  place: WidgetsPlace,
84  columns: number,
85): Promise<RenderElement> => {
86  if (!(await read($, isOn))) return beneath
87  if ((await $.state.get(site)).value !== place) return beneath
88
89  const wanted = (await $.state.get(widths)).value?.['breakout-widget'] ?? CARD_COLUMNS
90  const width = Math.min(wanted, Math.max(20, columns))
91  const inner = Math.min(FIELD_COLUMNS, (width - 4) * 2)
92  const held = await read($, game)
93  const bat = Math.min(FIELD_COLUMNS - PADDLE, Math.max(0, held.x - PADDLE / 2))
94  const marks: WidgetsMark[] = []
95
96  held.bricks.forEach((row, course) => {
97    ;[...row].forEach((brick, column) => {
98      if (brick !== '1') return
99      for (let dy = 0; dy < BRICK_ROWS - 1; dy += 1) {
100        for (let dx = 0; dx < BRICK_COLUMNS - 1; dx += 1) {
101          marks.push([column * BRICK_COLUMNS + dx, 1 + course * BRICK_ROWS + dy, COURSES[course % COURSES.length] ?? BAT])
102        }
103      }
104    })
105  })
106  for (let dx = 0; dx < PADDLE; dx += 1) marks.push([bat + dx, PADDLE_ROW, BAT])
107  marks.push([held.x, held.y, BALL])
108
109  return $.widgets.card({
110    beneath,
111    width,
112    title: 'Breakout',
113    note: `${some(held.score, 'brick')} · ${some(held.walls, 'wall')}`,
114    body: await $.widgets.picture({ surface, key: 'breakout', columns: inner, rows: FIELD_ROWS, fill: DARK, marks }),
115  })
116}
117
118export const register: Register = on => {
119  on('session.start', async ($, e, next) => {
120    await $.command.register({
121      name: 'breakout-widget',
122      description: 'Toggle the self-playing brick breaker; tool calls add rows of bricks',
123      argumentHint: '[on|off|reset]',
124    })
125    if ((await $.store.get('isOn')) === true) await update($, isOn, () => true)
126    await sync($)
127
128    return next(e)
129  })
130
131  on('command.run', { command: 'breakout-widget' }, async ($, e) => {
132    const arg = e.args.trim().toLowerCase()
133
134    if (arg === 'reset') {
135      await update($, game, () => FRESH)
136
137      return { text: 'Breakout reset.' }
138    }
139    if (arg !== '' && arg !== 'on' && arg !== 'off') {
140      return { text: 'Usage: /breakout-widget [on|off|reset]' }
141    }
142
143    const isShown = await update($, isOn, shown => (arg === '' ? !(shown ?? false) : arg === 'on'))
144    await $.store.set('isOn', isShown)
145    await sync($)
146
147    return { text: isShown ? 'Breakout on; /widgets places it.' : 'Breakout off.' }
148  })
149
150  on('tool.call', async ($, e, next) => {
151    if (await read($, isOn)) {
152      await update($, game, held => ({
153        ...(held ?? FRESH),
154        bricks: [FULL, ...(held ?? FRESH).bricks].slice(0, MAX_COURSES),
155      }))
156    }
157
158    return next(e)
159  })
160
161  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) =>
162    show($, e.surface, await next(e), 'side', e.props.bodyColumns),
163  )
164
165  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) =>
166    e.props.hasSurvey ? next(e) : show($, e.surface, await next(e), 'above', e.props.bodyColumns),
167  )
168
169  on('ui.render', { component: 'PromptHint' }, async ($, e, next) =>
170    show($, e.surface, await next(e), 'below', e.viewport?.columns ?? 80),
171  )
172}
173

1export type BreakoutGame = {
2  x: number
3  y: number
4  dx: number
5  dy: number
6  bricks: string[]
7  score: number
8  walls: number
9}
10
11declare module 'claude-code' {
12  interface PluginState {
13    'breakout-widget': { isOn: boolean; game: BreakoutGame }
14  }
15}
16