pixlings

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const v = await read($, view)
    const p = pixling
    if (e.props.hasSurvey || bandMode === 'off' || !v || !p || e.props.maxRows < 1) return next(e)
    // Sent away: nothing of it shows until it is called back.
    if ((await read($, roomAway)) === true) {
      bandId = null
      return next(e)
    }
    const said = await read($, bubbleAtom)
    const napping = await read($, napAtom)
    const pieces = wantsVitals ? await read($, vitalsAtom) : []
    await read($, hatchAtom)
    const persona = personaLine(await read($, roomPersona))
    bandColumns = e.props.bodyColumns
    const s = speciesById(v.speciesId) ?? SPECIES[0]!
    const color = hex(RARITY_COLOR[s.rarity])
    const at = now()
    const text = sayingNow(napping, said, at)
    // Under the pointer the band shows its card: who it is, the streak, the badges, the days
    // together and what it heard. The surface reveals it; no hook runs.
    const card = cardModel(p, persona, at)

    const frame = bandMode === 'full' ? frameAt(at) : null
    const width = frame ? Math.max(16, Math.min(56, e.props.bodyColumns - frame.w - 4)) : 0
    // The card opens past the info rows, over the band's empty right, so its shelf has room.
    const cardWidth = frame ? Math.max(width, Math.min(CARD_MAX, e.props.bodyColumns - frame.w - 4)) : 0
    // The full band is as tall as the sprite or the column beside it; past the rows it may take,
    // it folds into the one-line band.
    const columnRows = 2 + (pieces.length > 0 ? 1 : 0) + (text ? 2 + Math.ceil(text.length / Math.max(1, width - 4)) : 0)
    isCramped = frame !== null && Math.max(rowsFor(frame), columnRows) > e.props.maxRows

    if (!frame || isCramped) {
      bandId = null
      const mood = (await read($, moodAtom)) as Mood
      const face = `${FACES[mood] ?? FACES.idle} `
      // The card's line goes in the room the line leaves, sized to it, so revealing it moves
      // nothing: a row that overflowed would squeeze the name.
      const spare =
        e.props.bodyColumns - 1 - face.length - v.name.length - ` · Lv ${v.level}`.length -
        (pieces[0] ? pieces[0].text.length + 2 : 0) - (text ? text.length + 2 : 0)
      const { Box, Text } = $.ui.resolve(e)
      return (
        <Box key="band" flexDirection="row">
          <Text color={color}>{face}</Text>
          <Text bold>{v.name}</Text>
          <Text dimColor>{` · Lv ${v.level}`}</Text>
          {pieces[0] ? <Text color={TONE_COLOR[pieces[0].tone]} dimColor={pieces[0].tone === 'dim'}>{`  ${pieces[0].text}`}</Text> : null}
          {text ? isCramped ? <Text wrap="truncate-end">{`  ${text}`}</Text> : <Text>{`  ${text}`}</Text> : null}
          {spare >= 12 ? (
            <Box display="none" hover={{ display: 'flex' }} width={spare} flexShrink={0}>
              <Text dimColor wrap="truncate-end">{`  ${briefLine(p, persona, at)}`}</Text>
            </Box>
          ) : null}
        </Box>
      )
    }

    lastFrame = frame
    const stars = `${RARITY_STARS[s.rarity]}${v.isShiny ? ' ✦' : ''}`

    const info = (Box: Kit['Box'], Text: Kit['Text'], Button: Kit['Button'], kit: RoomKit) => (
      <Box flexDirection="column" marginLeft={1} flexShrink={1} width={width}>
        {text ? (
          <Box borderStyle="round" borderColor={color} paddingX={1} width={width}>
            <Text wrap="wrap">{text}</Text>
          </Box>
        ) : null}
        <Box flexDirection="row">
          <Text bold color={color}>
            {v.name}
          </Text>
          <Text dimColor>{` Lv ${v.level} · ${s.name} ${stars}`}</Text>
        </Box>
        <Box flexDirection="row">
          <Text color={color}>{xpBar(v.xpInto, v.xpNeed, 12)}</Text>
          <Text dimColor>{` ${v.xpInto}/${v.xpNeed}  `}</Text>
          {napping?.isAuto ? (
            <Button key="cancel-nap" label="cancel auto-continue" plain onPress={() => void cancelNap()} />
          ) : null}
        </Box>
        {pieces.length > 0 ? (
          <Box flexDirection="row" flexWrap="wrap">
            {pieces.map((piece, i) => (
              <Text color={TONE_COLOR[piece.tone]} dimColor={piece.tone === 'dim'}>
                {`${i > 0 ? ' · ' : ''}${piece.text}`}
              </Text>
            ))}
          </Box>
        ) : null}
        {/* Opaque, with its own ink, so the rows it covers never show through, on a dark terminal or a light one. */}
        <Box
          position="absolute"
          bottom={0}
          left={0}
          width={cardWidth}
          display="none"
          hover={{ display: 'flex' }}
          flexDirection="column"
          borderStyle="round"
          borderColor={color}
          backgroundColor={CARD_FILL}
          paddingX={1}
        >
          {drawCard(kit, card, cardWidth, CARD_FILL_PX, CARD_INK)}
        </Box>
      </Box>
    )

    if (e.surface === 'terminal') {
      const { Box, Text, Button, Raster } = $.ui.resolve(e)
      bandId = e.requestId ?? null
      const raster = rasterOf(frame)
      bandRows = raster.rows
      return (
        <Box key="band" flexDirection="row" alignItems="flex-end">
          <Raster key={RASTER_KEY} columns={raster.columns} rows={raster.rows} cells={raster.cells} />
          {info(Box, Text, Button, { Box, Text, Button, Raster })}
        </Box>
      )
    }
    svgSeenAt = at
    const { Box, Text, Button, Svg } = $.ui.resolve(e)
    return (
      <Box key="band" flexDirection="row" alignItems="flex-end">
        <Svg source={toSvg(frame, 4)} alt={`${v.name} the ${s.name}`} width={frame.w * 4} height={frame.h * 4} />
        {info(Box, Text, Button, { Box, Text, Button, Svg })}
      </Box>
    )
  })

export const drawCard = (kit: RoomKit, m: CardModel, width: number, fill: number, ink: string): RenderElement => {
  const { Box, Text } = kit
  const lines = [`${m.streak.days}-day streak`, `best ${m.streak.best}`, `${plural(m.days, 'day')} together`]
  const textColumns = Math.max(...lines.map(l => l.length))
  const fits = Math.min(m.earned.length, shelfFits(width, textColumns))
  // Not slice(-0), which is every badge.
  const shown = fits > 0 ? m.earned.slice(-fits) : []
  const icon = (b: Badge, key: string, alt = b.name) => picture(kit, cardIcon(b, fill), ICON_SCALE, key, alt)
  return Box({
    flexDirection: 'column',
    children: [
      Text({ color: ink, wrap: 'truncate-end', children: m.persona }),
      Box({
        flexDirection: 'row',
        children: [
          icon(STREAK_BADGE, 'card-flame', 'Streak'),
          Box({
            flexDirection: 'column',
            marginLeft: 1,
            width: textColumns,
            flexShrink: 0,
            children: [
              Text({ color: ink, bold: true, children: lines[0] }),
              Text({ dimColor: true, children: lines[1] }),
              Text({ dimColor: true, children: lines[2] }),
            ],
          }),
          Box({
            flexDirection: 'row',
            marginLeft: 3,
            columnGap: 1,
            children: shown.map(b => icon(b, `card-badge-${b.id}`)),
          }),
          Box({
            flexDirection: 'column',
            marginLeft: 1,
            flexShrink: 0,
            children: [
              Text({ color: ink, bold: true, children: `${m.earned.length}/${BADGES.length}` }),
              Text({ dimColor: true, children: 'badges' }),
            ],
          }),
        ],
      }),
      Text({ color: ink, wrap: 'truncate-end', children: m.heard }),
    ],
  })
}

  on('ui.render', { component: 'Pane', requestId: 'pixling-room' }, async ($, e) => {
    // Each read subscribes the room to a redraw: a new line, a level, a nap, the shelf on show.
    await read($, view)
    const said = await read($, bubbleAtom)
    const napping = await read($, napAtom)
    const pieces = wantsVitals ? await read($, vitalsAtom) : []
    await read($, hatchAtom)
    const room = await read($, roomAtom)
    const persona = personaLine(await read($, roomPersona))
    const isAway = (await read($, roomAway)) === true
    const squad = (await read($, roomSquad)) ?? []
    const isPlanning = (await read($, roomPlanning)) === true
    const effect = (await read($, roomEffect)) ?? null
    const at = now()
    const tab = tabOf(room.tab)
    const frame = roomFrame(at)
    const isEgg = !pixling || isHatching(at)
    const columns = e.props.bodyColumns > 0 ? e.props.bodyColumns : (e.viewport?.columns ?? 40)
    const seat = seatOf(columns, e.surface === 'terminal', frame.w)
    // The pixling moves on the home shelf: the frame clock repaints a terminal's Raster in place
    // (paintRoom) and redraws what drew an SVG lately (tick).
    const isMoving = !isAway && (tab === 'home' || isEgg)
    if (e.surface === 'terminal') {
      const raster = rasterOf(frame)
      const key = isEgg ? ROOM_EGG_KEY : ROOM_SPRITE_KEY
      roomSprite = isMoving ? { key, columns: raster.columns, rows: raster.rows, cells: raster.cells } : null
    } else if (isMoving) svgSeenAt = at
    const model: RoomModel = {
      at,
      pixling,
      frame,
      isHatching: pixling !== null && isHatching(at),
      tab,
      bubble: sayingNow(napping, said, at),
      persona,
      vitals: pieces.map(piece => ({ text: piece.text, color: TONE_COLOR[piece.tone], isDim: piece.tone === 'dim' })),
      squad,
      isPlanning,
      effect,
      isAway,
      isFocused: e.props.isFocused,
    }
    const act: RoomActions = {
      show: tab => {
        void update($, roomAtom, () => ({ tab }))
      },
      pet: () => {
        void pet()
          .then(() => $.ui.invalidate('ui.render'))
          .catch(() => undefined)
      },
    }
    if (e.surface === 'terminal') {
      const { Box, Text, Button, Raster } = $.ui.resolve(e)
      return drawRoom({ Box, Text, Button, Raster }, seat, model, act)
    }
    const { Box, Text, Button, Svg } = $.ui.resolve(e)
    return drawRoom({ Box, Text, Button, Svg }, seat, model, act)
  })

export const drawRoom = (kit: RoomKit, seat: Seat, m: RoomModel, act: RoomActions): RenderElement => {
  const p = m.pixling
  if (m.isAway) return away(kit, p)
  if (!p || m.isHatching) return egg(kit, seat, m, p)
  const body = m.tab === 'garden' ? garden(kit, seat, p) : m.tab === 'badges' ? shelf(kit, seat, p) : home(kit, seat, m, p, act)
  return kit.Box({
    flexDirection: 'column',
    width: seat.columns,
    children: [
      tabRow(kit, seat, m.tab, act),
      body,
      m.isFocused && seat.isTerminal
        ? kit.Text({ dimColor: true, children: `h home · g garden · b badges${m.tab === 'home' ? ' · p pet' : ''}` })
        : null,
    ],
  })
}

const away = (kit: RoomKit, p: Pixling | null): RenderElement =>
  kit.Box({
    key: 'room-away',
    flexDirection: 'column',
    children: [
      kit.Text({ children: `💤 ${p ? p.name : 'Your pixling'} is away.` }),
      kit.Text({ dimColor: true, wrap: 'wrap', children: 'Type /pixling on to bring it back.' }),
    ],
  })

const egg = (kit: RoomKit, seat: Seat, m: RoomModel, p: Pixling | null): RenderElement => {
  const isHatching = p !== null
  const note = kit.Box({
    flexDirection: 'column',
    flexShrink: 1,
    children: [
      kit.Text({ bold: true, children: isHatching ? 'Hatching…' : 'An egg, not hatched yet.' }),
      kit.Text({
        dimColor: true,
        wrap: 'wrap',
        children: isHatching ? 'Any second now.' : 'It hatches when a session starts where you can see it.',
      }),
    ],
  })
  return kit.Box({
    key: 'room-egg',
    flexDirection: seat.isSideBySide ? 'row' : 'column',
    alignItems: seat.isSideBySide ? 'center' : 'flex-start',
    columnGap: 2,
    children: [picture(kit, m.frame, seat.scale, ROOM_EGG_KEY, isHatching ? 'An egg, hatching' : 'An egg'), note],
  })
}