hamster

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

    const { Box, Text, Svg, Link, Button } = $.ui.resolve(e)
    const open = await read($, menu)
    const p = await read($, pet)
    const tick = await read($, frame)
    const stored = await read($, tip)
    const clockNow = await $.clock.now()
    // Until the first reading, the calm tip stands in so the card is never empty.
    const advice =
      stored.text !== ''
        ? stored
        : asTip(
            advise(
              { percent: p.food, fun: 100, ageMs: 0, idleMs: 0, limits: [], now: await $.clock.now() },
              lang,
              dismissed,
            ),
          )
    const tone = LOOK[advice.level]
    const { level, next: nextAt, share } = progressOf(p.xp)
    const mood = moodOf(p)
    const percent = Math.round(p.food)
    const ui = UI[lang]
    const title = titleOf(level, lang)

    // Without the room or the vector element, one plain line.
    if (e.surface !== 'desktop' || e.props.maxRows < 8) {
      return <Text dimColor>{ui.compact(title, level, percent, Math.round(p.fun))}</Text>
    }

    const xpText =
      nextAt === null ? `${Math.floor(p.xp)}` : `${Math.floor(p.xp)} / ${nextAt}`

    // One label column, so the three bars start and end on the same line.
    const row = (label: string, bar: string, alt: string, value: string) => (
      <Box columnGap={2} alignItems="center">
        <Box width={LABEL}>
          <Text dimColor>{label}</Text>
        </Box>
        <Svg source={bar} alt={alt} width={barWidth(SEGMENTS)} height={BAR_HEIGHT} />
        <Text dimColor>{value}</Text>
      </Box>
    )

    // No plate of its own: the hamster and its numbers sit straight on the
    // window. The same margin all round; one blank row between the blocks.
    return (
      <Box flexDirection="column" rowGap={1} paddingX={2} paddingY={1} position="relative">
        <Box position="absolute" top={1} right={2} flexDirection="column" alignItems="flex-end">
          <Button key="lang" plain onPress={noop}>
            {flagOf(lang)}
          </Button>
          {open && (
            <Box borderStyle="round" borderColor={tone.frame} flexDirection="column" paddingX={1}>
              {LANGS.map(l => (
                <Button key={`lang-${l.code}`} plain onPress={noop}>
                  {`${pref === l.code ? '✓' : ' '} ${l.flag} ${l.name}`}
                </Button>
              ))}
              <Button key="lang-auto" plain onPress={noop}>
                {`${pref === 'auto' ? '✓' : ' '} 🌐 ${ui.auto}`}
              </Button>
            </Box>
          )}
        </Box>
        <Box flexDirection="row" flexWrap="wrap" alignItems="center" columnGap={4}>
          <Svg
            source={hamsterSvg(p, tick, undefined, advice.level === 'info' ? null : advice.level)}
            alt={`${ui.hamster}, ${ui.moods[mood]}`}
            width={BAND.width}
            height={BAND.height}
          />
          <Box flexDirection="column" flexGrow={1} minWidth={34} rowGap={1}>
            <Box flexDirection="column">
              <Box columnGap={1}>
                <Text dimColor>{`${ui.level} ${level} / 10`}</Text>
                <Text dimColor>·</Text>
                <Text dimColor>{ui.moods[mood]}</Text>
                {e.props.isWorking && <Text color={GOLD}>{ui.working}</Text>}
              </Box>
              <Text bold>{title}</Text>
            </Box>
            <Box flexDirection="column">
              {row(
                ui.xp,
                barSvg(share, GOLD, SEGMENTS),
                ui.xpAlt(Math.round(share)),
                xpText,
              )}
              {row(
                ui.fed,
                barSvg(p.food, contextColor(p.food), SEGMENTS),
                ui.fedAlt(percent),
                `${ui.context} ${percent}%`,
              )}
              {row(
                ui.joy,
                barSvg(p.fun, JOY, SEGMENTS),
                ui.joyAlt(Math.round(p.fun)),
                `${Math.round(p.fun)}% ${ui.joyNote}`,
              )}
            </Box>
          </Box>
        </Box>
        {advice.text !== '' && (
          <Box
            borderStyle="round"
            borderColor={tone.frame}
            backgroundColor={tone.fill}
            paddingX={2}
            columnGap={1}
            alignItems="flex-start"
          >
            <Box width={TAG}>
              <Text bold color={tone.color}>{advice.tag}</Text>
            </Box>
            <Box flexGrow={1} flexShrink={1} flexDirection="column">
              <Text bold={advice.level !== 'info'} wrap="wrap">{advice.text}</Text>
              {advice.href ? (
                <Text wrap="wrap">
                  {'→ '}
                  <Link href={advice.href}>{advice.link ?? advice.href}</Link>
                </Text>
              ) : (
                advice.link && <Text dimColor wrap="wrap">{`→ ${advice.link}`}</Text>
              )}
            </Box>
            <Box columnGap={2} alignItems="flex-start">
              {advice.level === 'info' && !advice.id && (
                <Button key="back" plain onPress={noop}>
                  ←
                </Button>
              )}
              {advice.level === 'info' && !advice.id && held !== null && browsing(clockNow) && (
                <Button key="forward" plain onPress={noop}>
                  →
                </Button>
              )}
              {advice.id && (
                <Button key="dismiss" plain onPress={noop}>
                  {ui.gotIt}
                </Button>
              )}
            </Box>
          </Box>
        )}
      </Box>
    )
  })