claudagotchi

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const game = await read($, gameAtom)
    const settings = await read($, settingsAtom)
    const now = Date.now()
    const pet = game.pet ?? newPet(now)
    const { anim, speech } = live(game.ui, now)
    const isFresh = anim.kind !== 'none'
    const face = faceOf(pet, anim.kind)
    const ui: Ui = { ...game.ui, speech }
    const press = (key: string) => () => dispatch($, key)
    const renameTo = (name: string) => rename($, name)
    const columns = e.props.bodyColumns

    if (e.surface === 'terminal') {
      hasTerminal = true
      const { Box, Text, Button, Input, Raster } = $.ui.resolve(e) as Elements['terminal']
      const cols = Math.max(20, Math.min(columns, 64))
      snapshot = { pet, ui: game.ui, columns: cols }
      startAnimation($)
      const art = <Raster key="stage" columns={cols} rows={ROWS} cells={frameCells({ pet, face, anim, now, hour: hour(), columns: cols })} />
      return drawPane({ els: { Box, Text, Button, Input }, isTerminal: true, pet, ui, settings, face, press, rename: renameTo, art, stats: null, now, columns })
    }

    // The scene's markup changes only when something in it does, so a redraw
    // for anything else (a coin, a stat) keeps its frame; its height is fixed
    // so a frame that does reload never moves the buttons under the pointer.
    const els = $.ui.resolve(e) as Elements['mobile'] & Partial<Pick<Elements['desktop'], 'Input'>>
    const { Box, Text, Button, Svg } = els
    const from = game.ui.from && now - game.ui.fromAt < 2500 ? game.ui.from : null
    const scene = sceneSvg({ pet, face, baseFace: faceOf(pet, 'none'), anim, isFresh, speech, ...(speech ? { speechLife: speechLife(speech) } : {}), hour: hour() })
    const art = <Svg source={scene} alt={`${pet.name}${speech ? `, saying: ${speech.text}` : ''}`} height={260} isInteractive />
    const stats = <Svg source={statsSvg(pet, from)} alt={`${pet.name}'s stats`} height={118} />
    const kit = els.Input ? { Box, Text, Button, Input: els.Input } : { Box, Text, Button }
    return drawPane({ els: kit, isTerminal: false, pet, ui, settings, face, press, rename: renameTo, art, stats, now, columns })
  })

export const drawPane = (a: PaneArgs): RenderElement => {
  const { Box, Text } = a.els
  const { pet, ui, isTerminal } = a
  const speech = ui.speech
  const body =
    ui.view === 'feed'
      ? feedView(a)
      : ui.view === 'play'
        ? gameView(a)
        : ui.view === 'shop'
          ? shopView(a)
          : ui.view === 'closet'
            ? closetView(a)
            : ui.view === 'stats'
              ? statsView(a)
              : ui.view === 'name'
                ? nameView(a)
                : null
  const tip =
    pet.stage === 'egg'
      ? 'Keep it warm. Every tool call Claude makes warms it too.'
      : needs(pet)
          .map(n => `${pet.name} ${n.text}`)
          .join(' · ')
  return (
    <Box flexDirection="column" gap={isTerminal ? 0 : 1}>
      {isTerminal ? header(a) : null}
      {isTerminal && speech ? (
        <Box borderStyle="round" borderColor={speech.isAlert ? '#E5484D' : ACCENT} paddingX={1}>
          <Text>{speech.text}</Text>
        </Box>
      ) : null}
      {a.stats}
      {a.art}
      {isTerminal ? statBars(a) : null}
      {tip ? pet.stage === 'egg' ? <Text dimColor>{tip}</Text> : <Text color="#E5484D">{tip}</Text> : null}
      {actionRow(a)}
      {body}
      {ui.view === 'home' ? snackFeed(a) : null}
    </Box>
  )
}

const header = ({ els, pet }: PaneArgs) => {
  const { Text } = els
  const stage = pet.stage === 'adult' && pet.form ? FORM_LABEL[pet.form] : STAGE_LABEL[pet.stage]
  const need = pet.stage === 'egg' ? HATCH_AT : xpFor(pet.level)
  const have = pet.stage === 'egg' ? pet.warmth : pet.xp
  const n = Math.round((Math.min(have, need) / need) * 10)
  return (
    <Text>
      <Text bold color={ACCENT}>
        {pet.name}
      </Text>{' '}
      <Text dimColor>
        {stage}
        {pet.stage === 'egg' ? '' : ` · Lv ${pet.level}`}
      </Text>{' '}
      <Text color="#A78BFA">{'▰'.repeat(n)}</Text>
      <Text dimColor>{'▱'.repeat(10 - n)}</Text>{' '}
      <Text color="#E8B341" bold>
        🪙 {pet.coins}
      </Text>
    </Text>
  )
}

const statBars = ({ els, pet, columns }: PaneArgs) => {
  const { Box, Text } = els
  const width = Math.max(6, Math.min(16, Math.floor((columns - 26) / 2)))
  const row = (icon: string, label: string, value: number, color: string) => {
    const n = Math.round((value / 100) * width)
    return (
      <Text>
        {icon} {label.padEnd(6)} <Text color={value < 25 ? '#E5484D' : color}>{'█'.repeat(n)}</Text>
        <Text dimColor>{'░'.repeat(width - n)}</Text> {String(Math.round(value)).padStart(3)}
      </Text>
    )
  }
  return (
    <Box flexDirection="row" gap={2} flexWrap="wrap">
      <Box flexDirection="column">
        {row('🍙', 'Food', pet.hunger, '#FFA94D')}
        {row('🎈', 'Fun', pet.fun, '#FF6FA8')}
        {row('⚡', 'Energy', pet.energy, '#5AA9FF')}
      </Box>
      <Box flexDirection="column">
        {row('🫧', 'Clean', pet.hygiene, '#38D9C5')}
        {row('💗', 'Bond', pet.bond, '#F0445C')}
        <Text>
          <Text color="#F0445C">{hearts(pet.bond)}</Text>{' '}
          <Text dimColor>{pet.isSick ? '🤒 sick' : pet.isAsleep ? '💤 asleep' : pet.poops > 0 ? `💩 ×${pet.poops}` : '✨ fine'}</Text>
        </Text>
      </Box>
    </Box>
  )
}

const actionRow = (a: PaneArgs) => {
  const { Box, Button } = a.els
  const { pet, press } = a
  if (pet.stage === 'egg')
    return (
      <Box flexDirection="row" flexWrap="wrap" gap={1}>
        <Button key="warm" label="🔥 Warm the egg" hotkey="w" variant="primary" onPress={press('warm')} />
        <Button key="name" label="✏️ Name it" hotkey="n" onPress={press('name')} />
        <Button key="shop" label="🛍️ Shop" hotkey="b" onPress={press('shop')} />
      </Box>
    )
  if (pet.isAsleep)
    return (
      <Box flexDirection="row" flexWrap="wrap" gap={1}>
        <Button key="wake" label="☀️ Wake up" hotkey="s" variant="primary" onPress={press('wake')} />
        <Button key="pat" label="🤲 Tuck in" hotkey="h" onPress={press('pat')} />
        <Button key="shop" label="🛍️ Shop" hotkey="b" onPress={press('shop')} />
        <Button key="closet" label="👒 Closet" hotkey="k" onPress={press('closet')} />
      </Box>
    )
  return (
    <Box flexDirection="row" flexWrap="wrap" gap={1}>
      <Button key="feed" label="🍙 Feed" hotkey="f" {...(pet.hunger < 40 ? { variant: 'primary' as const } : {})} onPress={press('feed')} />
      <Button key="play" label="🎮 Play" hotkey="p" {...(pet.fun < 40 ? { variant: 'primary' as const } : {})} onPress={press('play')} />
      <Button key="clean" label={pet.poops > 0 ? `🧹 Clean (${pet.poops})` : '🫧 Bath'} hotkey="c" {...(pet.poops > 1 || pet.hygiene < 40 ? { variant: 'primary' as const } : {})} onPress={press('clean')} />
      <Button key="pat" label="🤲 Pet" hotkey="h" onPress={press('pat')} />
      <Button key="sleep" label="💤 Sleep" hotkey="s" {...(pet.energy < 25 ? { variant: 'primary' as const } : {})} onPress={press('sleep')} />
      {pet.isSick ? <Button key="heal" label="💊 Heal" hotkey="m" variant="primary" onPress={press('heal')} /> : null}
      <Button key="shop" label="🛍️ Shop" hotkey="b" onPress={press('shop')} />
      <Button key="closet" label="👒 Closet" hotkey="k" onPress={press('closet')} />
      <Button key="stats" label="📊" hotkey="i" onPress={press('stats')} />
    </Box>
  )
}

const snackFeed = ({ els, ui, now }: PaneArgs) => {
  const { Box, Text } = els
  if (ui.snacks.length === 0) return null
  return (
    <Box flexDirection="column">
      <Text dimColor bold>
        Fresh from your work
      </Text>
      {ui.snacks.slice(0, 4).map(snack => (
        <Text dimColor wrap="truncate-end">
          {snack.icon} {snack.text} · {ago(now - snack.at)}
        </Text>
      ))}
    </Box>
  )
}