pixel-pet

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

    const { Box, Text, Button } = $.ui.resolve(e)
    const { value: current = 'stats' } = await $.state.get(mode)

    // One glyph, a half-filled circle: two stacked page dots with no gap between them.
    // Top half filled is stats, bottom half is the pet. One cell wide and one row tall, so it
    // never pushes the status band onto a second line or makes the band taller. It names no
    // animal, so a new pet needs no new control.
    const toggle = (
      <Button
        key="toggle-view"
        label={current === 'pet' ? '◒' : '◓'}
        plain
        dimColor
        onPress={() => setMode($, current === 'pet' ? 'stats' : 'pet')}
      />
    )

    if (current === 'stats') {
      const inner = tightenRow(await next(e))
      // The switch keeps the band's right edge however narrow the window gets, and sits halfway
      // down it: when the status band wraps onto a second line, in the room left of the switch,
      // the switch stays centred on both lines rather than riding the top one.
      return (
        <Box flexDirection="row" alignItems="center">
          <Box flexGrow={1} flexShrink={1} marginRight={2}>{inner}</Box>
          <Box flexShrink={0}>{toggle}</Box>
        </Box>
      )
    }

    const pet = await currentPet($)
    const now = await $.clock.now()
    const { value: until = 0 } = await $.state.get(happyUntil)
    const { value: active = 0 } = await $.state.get(lastActive)
    const { value: rewarded = 0 } = await $.state.get(rewardUntil)
    const { value: fill = null } = await $.state.get(ctx)
    const { value: wrote = null } = await $.state.get(cacheTs)
    const { value: miss = null } = await $.state.get(cacheMiss)
    // The cache has expired: between turns, an hour past the last call.
    const cold = !e.props.isWorking && now >= rewarded && now >= until && wrote !== null && now - wrote > CACHE_TTL_MS
    const mood: Mood = now < rewarded ? 'reward'
      : now < until ? 'happy'
      : e.props.isWorking ? 'working'
      : cold || (active > 0 && now - active > SLEEP_AFTER_MS) ? 'sleep'
      : 'idle'
    const { value: spent = null } = await $.state.get(cost)
    const info = spent === null ? '' : usd(spent)
    const { value: lastTurn = null } = await $.state.get(turnCost)
    const { value: endedAt = 0 } = await $.state.get(turnAt)
    const turn: Turn | null = lastTurn !== null && lastTurn >= 0.005 && now - endedAt < COIN_MS ? { usd: lastTurn, agoMs: now - endedAt } : null
    // What carrying on would cost after the cache went cold, said in the beckoning cat's bubble.
    const price = cold && miss !== null ? `+${usd(miss)}` : ''
    const { value: by = 'cost' } = await $.state.get(metric)
    const { value: eff = null } = await $.state.get(efficiency)
    const { value: left = null } = await $.state.get(quota)
    const { value: together = 0 } = await $.state.get(turns)
    const reading: Reading = { cost: spent, efficiency: eff, context: fill, turns: together, quota: left }
    const label = metricLabel(by, reading)
    const herd = herdBy(by, reading)
    const { value: seed = 0 } = await $.state.get(coatSeed)
    const order = coatsFor(seed ?? 0, pet)
    const { value: poofedAt = 0 } = await $.state.get(poofAt)
    const { value: was = 0 } = await $.state.get(poofFrom)
    const poof: Poof | null = now - poofedAt < POOF_MS ? { from: was, agoMs: now - poofedAt } : null
    const { value: menuOpen = false } = await $.state.get(menu)
    const openMenu = () => $.state.set(menu, !menuOpen)
    // The open menu: every measure's figure, as the band shows it beside the bar (with names the
    // menu did not fit on one line), the one in use bright, the rest dim. Picking
    // one makes it the herd's measure and closes the menu.
    const choices = METRICS.map(x => (
      <Button key={`metric-${x.id}`} label={metricLabel(x.id, reading)} plain dimColor={x.id !== by} onPress={() => setMetric($, x.id)} />
    ))
    const full = fill !== null && fill >= HEAVY_CONTEXT_PCT
    // The herd moves heavily (slow, slumping) only while awake; it is chubby asleep too.
    const heavy = full && mood !== 'reward' && mood !== 'sleep'
    // The beckoning cat is the button, between turns only, asleep or awake: /compact while the
    // context is heavy; /clear, with the price of carrying on, once the cache has gone cold and
    // that price is worth avoiding (without a price, on a heavy context).
    const canClear = cold && (miss !== null ? miss >= CLEAR_NUDGE_USD : full)
    const canCompact = full && mood !== 'reward' && !e.props.isWorking
    const word = canClear ? '/clear' : '/compact'
    let beckon = canClear || (full && mood !== 'reward')
    // A costly turn startles the cheering cats ("!" instead of hearts), for that cheer alone.
    const startled = mood === 'happy' && lastTurn !== null && lastTurn >= TURN_USD.high && endedAt >= until - HAPPY_MS
    // How long ago the cheer or the reward began, for animations that run from it.
    const since = mood === 'reward' ? now - (rewarded - REWARD_MS) : mood === 'happy' ? now - (until - HAPPY_MS) : 0
    const press = () => (canClear ? clear($) : compact($))

    if (e.surface === 'desktop') {
      const { Svg } = $.ui.resolve(e)
      // The menu takes the band while it is open: the cats step aside for the five measures.
      if (menuOpen) {
        return (
          <Box flexDirection="row" flexWrap="wrap" alignItems="center" columnGap={1}>
            <Box flexGrow={1} />
            {choices}
            {toggle}
          </Box>
        )
      }
      // Room for the beckoning cat and its bubble (about 11 cells), then the figure and the next
      // message's price after a cold cache, drawn together right of the bar. On a band too narrow
      // for all of it beside a short track, the next price goes, then the beckoning cat.
      const room = (cat: boolean) => (cat ? Math.ceil(MANEKI_W / CELL_PX) + 1 : 0) + cellsOf(label) + 1
      if (e.props.bodyColumns - room(beckon) < 16 + 12) beckon = false
      const reserve = room(beckon)
      const width = stageWidth(e.props.bodyColumns - reserve, '')
      const alt = `${pet.name} ${herd}匹: ${pet.lines[mood]}${cold ? '（キャッシュ切れ）' : ''} (${label})`
      // Beside the beckoning cat the figure sits closer than it would to the bar.
      const gap = beckon ? 2 : BAR_GAP_PX
      const figureW = costWidth(label, '', gap)
      // The Svg sits directly in the row: wrapped in a Box, its frame gains a line's
      // descender below it and the band grows taller than the status row. The spacer takes
      // whatever the width estimate leaves, at the band's left edge. The track ends at the bar;
      // right of it, with no gaps, the beckoning cat when there is one, then the figure, in the
      // status band's own type. A blank plain Button is laid over the cat and over the figure
      // (a drawing cannot be pressed, a Button can): pressing the cat runs /compact or /clear,
      // pressing the figure opens the menu of measures.
      return (
        <Box flexDirection="row" flexWrap="nowrap" alignItems="center" columnGap={0}>
          <Box flexGrow={1} />
          <Svg source={stage(pet, mood, width, now, herd, Math.round(until), '', heavy, '', cold, turn, order, poof, since, false, fatOf(fill), beckon, startled)} width={width} height={VIEW_H * SCALE} alt={alt} isInteractive />
          <Svg source={barSvg()} width={2} height={VIEW_H * SCALE} alt="|" />
          {beckon ? (
            <Box position="relative" flexShrink={0}>
              <Svg source={manekiSvg(pet, word, canClear ? price : '')} width={MANEKI_W} height={VIEW_H * SCALE} alt={`${pet.name === '猫' ? '招き猫' : `手招きする${pet.name}`}が吹き出しで「${canClear && price !== '' ? `${price} / ` : ''}${word}」と手招き`} isInteractive />
              {canClear || canCompact ? (
                <Box position="absolute" top={0} left={0}>
                  <Button key="maneki" label={blank(MANEKI_W - BUTTON_PAD_PX, false)} plain onPress={press} />
                </Box>
              ) : null}
            </Box>
          ) : null}
          <Box position="relative" flexShrink={0}>
            <Svg source={costSvg(label, '', gap)} width={figureW} height={VIEW_H * SCALE} alt={label} />
            {/* Over the figure's text alone: set against the picture's right end (the text ends
                a few px short of it), its blank cut by the Button's own padding, so neither the
                gap after the bar nor the one before the switch can be pressed. */}
            <Box position="absolute" top={0} right={0}>
              <Button key="herd-label" label={blank(labelWidth(label) + (beckon ? 0 : 2) - BUTTON_PAD_PX)} plain onPress={openMenu} />
            </Box>
          </Box>
          {toggle}
        </Box>
      )
    }

    return (
      <Box flexDirection="row" columnGap={1}>
        <Text>{pet.face[mood]}</Text>
        <Text>{pet.lines[mood]}</Text>
        {menuOpen ? choices : <Button key="herd-label" label={label} plain dimColor onPress={openMenu} />}
        {turn === null ? null : <Text dimColor wrap="truncate-end">{`+${usd(turn.usd)}`}</Text>}
        {canClear || canCompact ? <Button key="compact" label={canClear && price !== '' ? `${word} (${price})` : word} onPress={press} /> : null}
        {toggle}
      </Box>
    )