oxen-pet

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE_ID) {
      return next(e)
    }
    if (!body) {
      body = await keptBody($, settings.theme, settings.customDir)
    }
    const now = await $.clock.now()
    const rows = statsRows(stats, now, hud, settings.targets)
    const labelW = Math.max(...rows.map(r => r.label.length))
    const face = composeFace(body, stats.bosses > 0 ? 'star' : 'happy', now)
    const frame = frameColor(body.look.hud)
    if (e.surface === 'terminal') {
      const { Box, Raster, Text } = $.ui.resolve(e)

      return (
        <Box gap={2}>
          <Raster key="face" columns={BODY_W} rows={ROWS} cells={encodeCells(face)} />
          <Box flexDirection="column">
            {rows.map(r => (
              <Box key={r.label}>
                <Text color={frame} bold>{`${r.label.padEnd(labelW)}  `}</Text>
                <Text color={DETAIL_COLOR}>{r.value}</Text>
              </Box>
            ))}
          </Box>
        </Box>
      )
    }
    const { Box, Svg, Text } = $.ui.resolve(e)

    return (
      <Box gap={2}>
        <Svg key="face" source={encodeSvg(face)} alt={`${body.name}, happy`} width={BODY_W * SVG_PX} height={HEIGHT * SVG_PX} />
        <Box flexDirection="column">
          {rows.map(r => (
            <Box key={r.label}>
              <Text color={frame} bold>{`${r.label.padEnd(labelW)}  `}</Text>
              <Text color={DETAIL_COLOR}>{r.value}</Text>
            </Box>
          ))}
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    try {
      if (e.props.hasSurvey) {
        return next(e)
      }
      isWorking = e.props.isWorking
      bodyColumns = e.props.bodyColumns

      if (!body) {
        body = await keptBody($, settings.theme, settings.customDir)
      }
      const a = await read($, anim)
      const now = await $.clock.now()
      const elapsed = now - a.since
      const views = minisOnScreen(minis, now)
      // A leap is the run mode playing the jump clip, slowed, while the pet travels.
      const drawn = a.leap ? { mode: 'jump' as const, ms: leapClipMs((now - a.leap.since) * settings.pace) } : { mode: a.mode, ms: elapsed * settings.pace }
      const picture = compose(body, drawn.mode, drawn.ms, a.dir, hud ? mood(hud) : 'ok', views)
      const extra = views.length > MAX_MINIS ? ` (+${views.length - MAX_MINIS} minis)` : ''
      const shielded = shield !== undefined && guarding === 0 && now < shield.until ? guardLine(shield.result) : undefined
      const noticed = notice !== undefined && now < notice.until ? notice.text : undefined
      const line = settings.statusLine ? (shielded ?? noticed ?? statusLine(a.mode, a.since, elapsed, a.target, body.look.lines[a.mode])) + extra : ''
      const tint = noticed && !shielded ? NOTICE_COLOR : lineColor(a.mode, body.look.lineColors)
      if (showsError) {
        showsError = false
        $.ui.status(undefined)
      }

      const scene = sceneLayout(body)
      const shownBoss = settings.boss ? bossOnScreen(boss, now) : undefined
      const bossArt = shownBoss && drawBoss(shownBoss, now)
      const bossW = bossArt ? BOSS_W + 1 : 0
      if (e.surface === 'terminal' && scene && body.scene) {
        const { Box, Raster, Text } = $.ui.resolve(e)
        const width = scene.width
        const textW = line ? lineWidth(line) + 3 : 0
        const left = Math.max(0, Math.min(Math.round(a.x), width - picture.w - textW - bossW))
        const band = drawBand(body, body.scene, scene, picture, left, now)
        if (bossArt) {
          overlay(band, bossArt, width - bossW)
        }
        const cells = (x: number, y: number, w: number, h: number) => encodeCells(crop(band, x, y, w, h))
        // The status line cuts a hole in the band; the band shows above, below, and right of it.
        const textAt = left + picture.w
        const shown = Math.min(textW, width - textAt)
        const rest = width - textAt - shown

        return (
          <Box flexDirection="column" height={ROWS + GROUND_ROWS}>
            <Box height={ROWS}>
              <Raster key="pet" columns={textAt} rows={ROWS} cells={cells(0, 0, textAt, HEIGHT)} />
              {shown > 0 && (
                <Box key="line" flexDirection="column" width={shown}>
                  <Raster key="above" columns={shown} rows={ROWS - 2} cells={cells(textAt, 0, shown, HEIGHT - 4)} />
                  <Text color={tint} bold wrap="truncate">
                    {` › ${line}`}
                  </Text>
                  <Raster key="below" columns={shown} rows={1} cells={cells(textAt, HEIGHT - 2, shown, 2)} />
                </Box>
              )}
              {rest > 0 && <Raster key="rest" columns={rest} rows={ROWS} cells={cells(textAt + shown, 0, rest, HEIGHT)} />}
            </Box>
            <Raster key="ground" columns={width} rows={GROUND_ROWS} cells={cells(0, HEIGHT, width, GROUND_H)} />
          </Box>
        )
      }
      if (e.surface === 'terminal') {
        const { Box, Raster, Text } = $.ui.resolve(e)
        const room = Math.max(0, bodyColumns - picture.w - line.length - 4 - bossW)

        return (
          <Box height={ROWS} width={bandWidth()}>
            <Box marginLeft={Math.min(Math.round(a.x), room)} alignItems="flex-end">
              <Raster key="pet" columns={picture.w} rows={ROWS} cells={encodeCells(picture)} />
              {line && (
                <Box marginBottom={1} marginLeft={1}>
                  <Text color={tint} bold>
                    › {line}
                  </Text>
                </Box>
              )}
            </Box>
            {bossArt && <Box flexGrow={1} />}
            {bossArt && <Raster key="boss" columns={BOSS_W} rows={ROWS} cells={encodeCells(bossArt)} />}
          </Box>
        )
      }
      if (e.surface === 'desktop') {
        // The desktop has no Raster: the pet, its scene and the HUD's bars draw as SVG, and the HUD sits in the band,
        // since the desktop's hint line under the prompt is its own.
        const { Box, Svg, Text } = $.ui.resolve(e)
        const rows = settings.hud && hud ? hudRows({ ...hud, cacheMin: cacheLeftMin(lastTurnEndAt, settings.cacheTtlMin, now) }, body.look.hud, settings.hudRow) : []
        const hudFrame = frameColor(body.look.hud)
        const hudBox = rows.length > 0 && (
          <Box key="hud" flexDirection={settings.hudRow ? 'row' : 'column'} alignSelf="flex-start" {...(settings.hudRow ? {} : { borderStyle: 'round', borderColor: hudFrame, paddingX: 1 })}>
            {rows.map((r, k) => (
              <Box key={r.key} alignItems="center">
                {settings.hudRow && k > 0 && <Text color={hudFrame}>{ROW_GAP}</Text>}
                <Text color={r.color}>{r.label} </Text>
                <Svg source={encodeSvg(r.bar)} alt={`${r.key.toUpperCase()} bar, ${r.pct}% left`} width={r.bar.w * HUD_SVG_PX} height={r.bar.h * HUD_SVG_PX} />
                {r.parts.map((p, i) => (
                  <Text key={String(i)} color={p.color} bold={p.bold}>
                    {p.text}
                  </Text>
                ))}
              </Box>
            ))}
          </Box>
        )
        if (scene && body.scene) {
          const width = Math.min(scene.width, DESKTOP_BAND_W)
          const left = Math.max(0, Math.min(Math.round(a.x), width - picture.w - bossW))
          const band = crop(drawBand(body, body.scene, scene, picture, left, now), 0, 0, width, HEIGHT + GROUND_H)
          if (bossArt) {
            overlay(band, bossArt, width - bossW)
          }

          return (
            <Box flexDirection="column">
              <Svg source={encodeSvg(band)} alt={`${body.name}, ${a.mode}, in its scene`} width={width * SVG_PX} height={band.h * SVG_PX} />
              {line && (
                <Text color={tint} bold>
                  › {line}
                </Text>
              )}
              {hudBox}
            </Box>
          )
        }

        return (
          <Box flexDirection="column">
            <Box alignItems="flex-end">
              <Box marginLeft={Math.round(a.x)}>
                <Svg source={encodeSvg(picture)} alt={`${body.name}, ${a.mode}`} width={picture.w * SVG_PX} height={HEIGHT * SVG_PX} />
              </Box>
              {line && (
                <Text color={tint} bold>
                  {line}
                </Text>
              )}
              {shownBoss && bossArt && <Box flexGrow={1} />}
              {shownBoss && bossArt && <Svg key="boss" source={encodeSvg(bossArt)} alt={bossAlt(shownBoss)} width={BOSS_W * SVG_PX} height={HEIGHT * SVG_PX} />}
            </Box>
            {hudBox}
          </Box>
        )
      }

      return next(e)
    } catch (err) {
      showsError = true
      $.ui.status(`oxen-pet: ${String(err)}`)

      return next(e)
    }
  })