clawdy

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const snap = await read($, snapshot)
    if (e.props.hasSurvey || !snap) return next(e)

    const now = await $.clock.now()
    bandId = e.requestId
    isBusy = e.props.isWorking
    if (isBusy) lastActivity = now
    const isMoving = ANIMATE === 'always' || (ANIMATE === 'working' && e.props.isWorking)

    // the desktop gets its own drawing; every other surface goes on below, as it always has
    if (e.surface === 'desktop') {
      const desk = $.ui.resolve(e)
      if ('Svg' in desk) {
        deskSeenAt = now
        await read($, deskTick)
        return drawDesktop(
          { Svg: desk.Svg },
          { snap, columns: e.props.bodyColumns, now, frame: await read($, frame), isMoving, pet: PET.show ? petFrame(now) : null },
        )
      }
    }

    const table = $.ui.resolve(e)
    const { Box, Text } = table
    const Raster = 'Raster' in table ? table.Raster : undefined
    shownCells = PET.show ? petCells(now) : ''
    return drawHud(
      { Box, Text, Raster },
      {
        snap,
        columns: e.props.bodyColumns,
        now,
        frame: await read($, frame),
        isMoving,
        pet: PET.show ? shownCells : null,
      },
    )
  })

export function drawDesktop({ Svg }: Ui, input: DeskInput): RenderElement {
  const W = Math.max(480, Math.round(input.columns * D.pxPerColumn))
  const petW = input.pet ? (pixelsOf(input.pet).width * D.pixel.w) : 0
  const petH = input.pet ? (pixelsOf(input.pet).height * D.pixel.h) : 0
  const cardsX = D.pad + (petW ? petW + D.gap + 4 : 0)
  const cardsW = W - cardsX - D.pad
  const perRow = (cardsW - 3 * D.gap) / 4 >= D.card.rowFrom ? 4 : 2
  const cardW = Math.floor((cardsW - (perRow - 1) * D.gap) / perRow)
  const rows = 4 / perRow
  const H = 2 * D.pad + rows * D.card.height + (rows - 1) * D.gap

  const cards = [modelCard, contextCard, usageCard, projectCard].map((draw, k) => {
    const box = {
      x: cardsX + (k % perRow) * (cardW + D.gap),
      y: D.pad + Math.floor(k / perRow) * (D.card.height + D.gap),
      w: cardW,
      h: D.card.height,
    }
    return draw(box, input)
  })

  const pet = input.pet ? clawd(D.pad, Math.round((H - petH) / 2), input.pet) : ''
  const source =
    `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" shape-rendering="crispEdges">` +
    style() +
    pet +
    cards.join('') +
    `</svg>`
  return <Svg source={source} alt={alt(input)} />
}

export function drawHud(ui: Ui, input: HudInput): RenderElement {
  const { Box, Raster } = ui
  const petWidth = PET_COLS + CARD_GAP
  const hasPet = PET.show && Raster !== undefined && input.pet !== null && input.columns - petWidth >= GRID_FROM
  const cols = hasPet ? input.columns - petWidth : input.columns
  const perRow = cols >= ROW_FROM ? 4 : cols >= GRID_FROM ? 2 : 1
  const width = Math.floor((cols - CARD_GAP * (perRow - 1)) / perRow)
  const inner = Math.max(8, width - 4)

  const cards = [
    modelCard(ui, input, width, inner),
    contextCard(ui, input, width, inner),
    usageCard(ui, input, width, inner),
    projectCard(ui, input, width, inner),
  ]

  const rows: RenderElement[] = []
  for (let i = 0; i < cards.length; i += perRow) {
    rows.push(
      <Box key={`row${i}`} flexDirection="row" gap={CARD_GAP}>
        {cards.slice(i, i + perRow)}
      </Box>,
    )
  }
  const grid = <Box flexDirection="column">{rows}</Box>
  if (!hasPet || !Raster || input.pet === null) return grid

  return (
    <Box flexDirection="row" gap={CARD_GAP} alignItems="center">
      <Raster key="pet" columns={PET_COLS} rows={PET_ROWS} cells={input.pet} />
      {grid}
    </Box>
  )
}