codecraft

  on('ui.render', { component: 'Pane', requestId: 'advancements' }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Text, Button } = elements
    const all = Object.values(ADVANCEMENTS) as Advancement[]
    const titles: Record<string, Advancement> = ADVANCEMENTS
    // 28 cells hold the longest title beside its icon, inside the frame
    const columns = Math.max(1, Math.min(3, Math.floor((e.props.bodyColumns + 1) / 29)))
    const cardWidth = Math.floor((e.props.bodyColumns - (columns - 1)) / columns)

    const total = bar(earned.size, all.length, 15)
    const rows = [
      <Box flexDirection="row" gap={1}>
        <Text color={COLOR.xp}>{total.filled}</Text>
        <Text color={COLOR.darkGray}>{total.empty}</Text>
        <Text color={COLOR.white} bold>
          {earned.size}/{all.length}
        </Text>
        <Text color={COLOR.gray}>advancements made</Text>
      </Box>,
    ]

    const tabs = TABS.map((tab, index) => {
      const done = all.filter(one => one.tab === tab && earned.has(one.id)).length
      const label = ' ' + tab + ' ' + done + ' '
      if (index === shownTab) {
        return (
          <Text color={COLOR.black} backgroundColor={COLOR.gold} bold>
            {label}
          </Text>
        )
      }
      return (
        <Button
          key={'tab-' + index}
          hotkey={String(index + 1)}
          plain
          onPress={() => {
            shownTab = index
            pickedAdvancement = ''
            $.ui.invalidate('ui.render')
          }}
        >
          {tab + ' ' + done}
        </Button>
      )
    })
    rows.push(
      <Box flexDirection="row" flexWrap="wrap" columnGap={1} marginTop={1}>
        {tabs}
      </Box>,
    )

    const tab = TABS[shownTab] ?? 'Story'
    const hidden = all.filter(one => one.tab === tab && one.isHidden && !earned.has(one.id)).length
    const isLocked = (one: Advancement) => !earned.has(one.id) && one.after !== undefined && !earned.has(one.after)
    if (sprites && 'Image' in elements && 'Raster' in elements) {
      const { Image, Raster } = elements
      const inTab = shown().filter(one => one.tab === tab)
      const picked =
        inTab.find(one => one.id === pickedAdvancement) ?? inTab.find(one => !earned.has(one.id) && !isLocked(one)) ?? inTab[0]
      const tree = advancementTree(tab, inTab, earned, picked?.id ?? '', e.props.bodyColumns)
      if (tree && picked) {
        // The whole screen sits on the tab's ground, so the text and the gap
        // around each icon read the same on a light theme as on a dark one
        const backdrop = '#' + TAB_GROUND[tab].toString(16).padStart(6, '0')
        const ground = tree.bands.map((band, row) => {
          return (
            <Box flexDirection="row">
              {band.map((piece, index) => {
                if ('picture' in piece) return <Raster key={'ground-' + row + '-' + index} {...piece.picture} />
                const one = titles[piece.id]!
                const state = earned.has(one.id) ? 'earned' : isLocked(one) ? 'locked' : 'open'
                return (
                  <Box key={'node-' + one.id} width={4} height={2} backgroundColor={backdrop} hover={{ scope: 'advancement-' + one.id }}>
                    <Image source={{ file: sprites + 'adv-' + one.id + '-' + state + '.png', format: 'png' }} columns={4} rows={2} alt={one.icon} />
                  </Box>
                )
              })}
            </Box>
          )
        })

        // What one advancement asks for, every line as wide as the body so a
        // card shown over another hides it. It sits over the tree, where it
        // stays in view while a tall tree scrolls
        const width = e.props.bodyColumns
        const lines = width >= 66 ? 2 : 3
        const card = (one: Advancement) => {
          const isEarned = earned.has(one.id)
          const parent = one.after ? titles[one.after] : undefined
          const lit = one.frame === 'challenge' ? COLOR.purple : COLOR.gold
          const kind = one.frame === 'task' ? '' : one.frame === 'goal' ? 'Goal' : 'Challenge'
          const state = isEarned ? '✔ Made' : isLocked(one) && parent ? 'After ' + parent.title : 'Open'
          const facts = [kind, one.xp ? '+' + one.xp + ' XP' : '', state].filter(Boolean).join(' · ')
          const how = wrapText(one.how, width).slice(0, lines)
          return [
            <Box flexDirection="row" width={width}>
              <Text color={isEarned ? lit : isLocked(one) ? COLOR.stone : COLOR.white} bold wrap="truncate">
                {one.title}
              </Text>
              <Text color={isEarned ? COLOR.green : COLOR.gray} wrap="truncate">
                {('  ' + facts).padEnd(Math.max(0, width - one.title.length))}
              </Text>
            </Box>,
            ...Array.from({ length: lines }, (_, line) => (
              <Text color={COLOR.gray} wrap="truncate">
                {(how[line] ?? '').padEnd(width)}
              </Text>
            )),
          ]
        }
        const step = (by: number) => () => {
          const at = tree.order.indexOf(picked.id)
          pickedAdvancement = tree.order[(at + by + tree.order.length) % tree.order.length] ?? ''
          $.ui.invalidate('ui.render')
        }
        return (
          <Box flexDirection="column" width={width} backgroundColor={backdrop}>
            <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
              {tabs}
            </Box>
            <Box flexDirection="column" height={lines + 1} marginTop={1}>
            {card(picked)}
            {tree.order
              .filter(id => id !== picked.id)
              .map(id => (
                <Box
                  position="absolute"
                  top={0}
                  left={0}
                  flexDirection="column"
                  backgroundColor={backdrop}
                  display="none"
                  hover={{ scope: 'advancement-' + id, display: 'flex' }}
                >
                  {card(titles[id]!)}
                </Box>
              ))}
            </Box>
            <Box flexDirection="row" columnGap={1}>
              <Button key="previous" hotkey="p" plain onPress={step(-1)}>
                Previous
              </Button>
              <Button key="next" hotkey="n" plain onPress={step(1)}>
                Next
              </Button>
              <Text color={COLOR.gray} wrap="truncate">
                {'· ' + earned.size + '/' + all.length + ' made' + (hidden > 0 ? ' · ' + hidden + ' hidden in this tab' : '')}
              </Text>
            </Box>
            {ground}
          </Box>
        )
      }
    }

    const cards = []
    for (const advancement of shown().filter(one => one.tab === tab)) {
      const isEarned = earned.has(advancement.id)
      const parent = advancement.after ? titles[advancement.after] : undefined

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const { Box, Text } = $.ui.resolve(e)
    const isWide = e.props.bodyColumns >= 44
    const hudWidth = isWide ? 36 : 20

    const used = contextPercent ?? 0
    const health = halves(100 - used)
    const hearts = []
    for (let i = 0; i < 10; i++) {
      const left = health - i * 2
      if (isHurt) hearts.push(<Text color={COLOR.white}>♥</Text>)
      else if (left >= 2) hearts.push(<Text color={COLOR.red}>♥</Text>)
      else if (left === 1) hearts.push(<Text color={COLOR.darkRed}>♥</Text>)
      else hearts.push(<Text color={COLOR.darkGray}>♡</Text>)
    }

    // Food empties from the left, as the game's right-anchored bar does
    const food = []
    if (hungerPercent !== undefined && isWide) {
      const full = Math.ceil(halves(100 - hungerPercent) / 2)
      for (let i = 0; i < 10; i++) {
        if (i < 10 - full) food.push(<Text color={COLOR.darkGray}>░░</Text>)
        else food.push(<Text>🍗</Text>)
      }
    }

    const worn = armor()
    const { level, into, cost } = levelOf(xp)
    const label = 'Lv ' + level
    const experience = bar(into, cost, hudWidth - label.length - 1)
    const verifiedText = verifiedLine()
    const verifiedColor = unverifiedEdits >= 5 ? COLOR.gold : unverifiedEdits === 0 ? COLOR.green : COLOR.gray

    // The hotbar: painted slots where the terminal has the cell grid and the
    // band has four rows left for them, a line of glyphs otherwise
    const elements = $.ui.resolve(e)
    // A command that has run five seconds is a boss: its bar drains toward
    // the command's timeout
    const now = await clockNow($)
    const boss = active.find(call => call.tool === 'Bash' && now - call.startedAt >= 5000)
    // Rows already spoken for: the boss bar, the HUD and the line under it
    const taken = (boss ? 2 : 0) + 3 + 1
    const Raster = 'Raster' in elements && e.props.maxRows - taken >= 4 ? elements.Raster : undefined
    const Sprite = sprites && 'Image' in elements && e.props.maxRows - taken >= 2 ? elements.Image : undefined
    const slots = []
    if (e.props.isWorking) {
      const running = active[active.length - 1]?.tool
      for (const [tool, uses] of [...hotbar].slice(-9)) {
        const isHeld = tool === running
        slots.push(
          Sprite ? (
            // The item in its slot, and the stack's count at its foot
            <Box flexDirection="row">
              <Sprite source={{ file: sprites + 'slot-' + itemOf(tool) + (isHeld ? '-held' : '') + '.png', format: 'png' }} columns={4} rows={2} alt={toolGlyph(tool)} />
              <Box flexDirection="column" justifyContent="flex-end">
                <Text color={isHeld ? COLOR.white : COLOR.gray} bold={isHeld}>
                  {String(uses)}
                </Text>
              </Box>
            </Box>
          ) : Raster ? (
            <Raster key={'slot-' + tool} {...slotPicture(tool, uses, isHeld)} />
          ) : (
            <Text color={isHeld ? COLOR.black : COLOR.stone} backgroundColor={isHeld ? COLOR.stone : COLOR.slot} bold={isHeld}>
              {' ' + toolGlyph(tool) + ' ' + uses + ' '}
            </Text>
          ),
        )
      }
      for (const call of active.filter(one => one.tool === 'Agent').slice(0, 4)) {
        slots.push(
          <Text color={COLOR.black} backgroundColor={COLOR.emerald} wrap="truncate">
            {' 👤 ' + (call.label.slice(0, 18) || 'villager') + ' '}
          </Text>,
        )
      }
    }

    const top = []
    if (boss) {
      const elapsed = now - boss.startedAt
      const left = bar(Math.max(0, boss.timeoutMs - elapsed), boss.timeoutMs, hudWidth)
      const seconds = Math.floor(elapsed / 1000)
      top.push(
        <Box flexDirection="row" gap={1} width={hudWidth} justifyContent="space-between">
          <Text color={COLOR.purple} bold wrap="truncate">
            {boss.label.split('\n')[0]?.slice(0, hudWidth - 7)}
          </Text>
          <Text color={COLOR.gray}>
            {Math.floor(seconds / 60)}:{String(seconds % 60).padStart(2, '0')}
          </Text>
        </Box>,
      )
      top.push(
        <Box flexDirection="row">
          <Text color={COLOR.purple}>{left.filled}</Text>
          <Text color={COLOR.darkGray}>{left.empty}</Text>
        </Box>,
      )
    } else if (!titleRow && e.props.maxRows >= 10 && e.props.bodyColumns >= 48) {
      const Scene = 'Raster' in elements ? elements.Raster : undefined
      if (Scene) top.push(<Scene key="title" {...TITLE} />)
      top.push(
        <Text color={COLOR.yellow} bold italic>
          {splash}
        </Text>,
      )
    }

    // The painted HUD where the terminal has the cell grid and the band is
    // wide enough for it; the glyph one below otherwise
    const foodLeft = hungerPercent === undefined ? undefined : Math.ceil(halves(100 - hungerPercent) / 2)
    const picture = hudPicture({ health, isHurt, armor: worn?.points, food: foodLeft, level, into, cost })
    const Hud = 'Raster' in elements && e.props.bodyColumns >= picture.columns && e.props.maxRows >= picture.rows + 1 ? elements.Raster : undefined
    const notes = (
      <Box flexDirection="column">
        {worn ? <Text color={COLOR.darkGray}>{worn.points < 10 ? worn.parts : ' '}</Text> : null}
        <Text color={COLOR.gold}>{used >= 80 ? 'low health · /compact' : ' '}</Text>
        <Box flexDirection="row" gap={2}>
          {verifiedText ? <Text color={verifiedColor}>{verifiedText}</Text> : null}
          {deaths > 0 ? <Text color={COLOR.gray}>☠ {deaths}</Text> : null}
        </Box>
      </Box>
    )
    const Icon = sprites && 'Image' in elements && 'Raster' in elements && e.props.bodyColumns >= 42 ? elements.Image : undefined
    if (Icon && 'Raster' in elements) {
      // The game's own icons, two columns each: armor over hearts, food on
      // the right, the experience bar under both
      const Bar = elements.Raster
      // Each carries a glyph as its alt, drawn if the terminal turns out not
      // to show pictures after all
      const ALTS: Record<string, string> = { heart: '♥', 'heart-half': '♥', 'heart-hurt': '♥', 'heart-empty': '♡', armor: '⛨', 'armor-empty': '·', food: '◆', 'food-empty': '·' }
      const icon = (name: string) => <Icon source={{ file: sprites + name + '.png', format: 'png' }} columns={2} rows={1} alt={ALTS[name] ?? ' '} />
      const heartRow = []
      const plateRow = []
      const foodRow = []
      for (let i = 0; i < 10; i++) {
        const left = health - i * 2
        heartRow.push(icon(left <= 0 ? 'heart-empty' : isHurt ? 'heart-hurt' : left === 1 ? 'heart-half' : 'heart'))
        if (worn) plateRow.push(icon(i < worn.points ? 'armor' : 'armor-empty'))
        if (foodLeft !== undefined) foodRow.push(icon(i >= 10 - foodLeft ? 'food' : 'food-empty'))
      }
      const width = foodLeft === undefined ? 20 : 42
      const isBeside = e.props.bodyColumns >= width + 3 + 38
      const line = [worn && worn.points < 10 ? worn.parts : '', used >= 80 ? 'low health · /compact' : '', verifiedText ?? '', deaths > 0 ? '☠ ' + deaths : '']
        .filter(Boolean)
        .join('  ·  ')
      return (
        <Box flexDirection="column">
          {top}
          <Box flexDirection="row" gap={3}>
            <Box flexDirection="column" width={width}>
              {worn ? <Box flexDirection="row">{plateRow}</Box> : null}
              <Box flexDirection="row" justifyContent="space-between">
                <Box flexDirection="row">{heartRow}</Box>
                <Box flexDirection="row">{foodRow}</Box>
              </Box>
              <Bar key="xp" {...xpPicture(width, level, into, cost)} />
            </Box>