hyday-pet

import type { Register } from 'claude-code'

// Drawn like hyday-pet by Muki Wu (pane, band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/mukiwu-hyday-pet/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the pane: open it with $.ui.open({ id: 'my-pane', title: "啾啾" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const name = '…'
    const titleOf = '…'
    const ageDays = '…'
    const caption = '…'
    const left = '…'
    const build = '…'
    const run = '…'
    const explore = '…'
    const i = '…'
    const label = '…'
    const price = '…'
    const effect = '…'
    const effect2 = '…'
    const effect3 = '…'
    const ch = '…'
    const ch2 = '…'
    const ch3 = '…'
    const ch4 = '…'
    const ch5 = '…'
    const ch6 = '…'
    const price2 = '…'
    const ch7 = '…'
    const ch8 = '…'
    const ch9 = '…'
    const price3 = '…'
    return (
      <Box flexDirection="column" alignItems="center" paddingX={1}>
        <Text wrap="truncate">
          <Text bold>
            {name}
          </Text>
          <Text color="#ffd866">
            {" ● "}
            0
          </Text>
        </Text>
        <Text dimColor wrap="truncate">
          {titleOf}
          {" · "}
          {ageDays}
          {" 天大"}
        </Text>
        <Text color="#a9dc76">
          {" "}
        </Text>
        <Box flexDirection="column" alignItems="flex-start">
          <Text bold color="#a9dc76">
            {" "}
          </Text>
          <Text bold color="#a9dc76">
            {" "}
          </Text>
          <Text bold color="#a9dc76">
            {" "}
          </Text>
        </Box>
        <Text>
          💩💩💩💩💩💩💩💩
        </Text>
        <Text italic dimColor>
          {caption}
        </Text>
        <Text>
          {" "}
        </Text>
        <Box flexDirection="column" alignItems="center">
          飽足
          心情
          精神
          <Text wrap="truncate">
            <Text dimColor>
              病菌
              {" "}
            </Text>
            <Text color="#ff6188">
              ████████░░░░░░░░
            </Text>
            <Text dimColor>
              {" "}
              生病
            </Text>
          </Text>
          <Text wrap="truncate">
            <Text dimColor>
              成長
              {" "}
            </Text>
            <Text>
              ████████░░░░░░░░
            </Text>
            <Text dimColor>
              {" "}
              {`差 ${left}`}
            </Text>
          </Text>
          <Text dimColor wrap="truncate">
            {"改檔 "}
            {build}
            {"% · 指令 "}
            {run}
            {"% · 查找 "}
            {explore}
            %
          </Text>
        </Box>
        <Text>
          {" "}
        </Text>
        <Box flexDirection="column" alignItems="flex-start">
          <Text bold>
            {"商店 · 你有 "}
            0
            {" 金幣"}
          </Text>
          <Text>
            {" "}
          </Text>
          <Text dimColor>
            高級食物，買了直接餵
          </Text>
          <Box columnGap={1}>
            <Button hotkey={`${i}`} label={`${label} ${price}`} />
            <Text dimColor wrap="truncate">
              {effect}
            </Text>
          </Box>
          <Box columnGap={1}>
            <Button hotkey={`${i}`} label={`${label} ${price}`} />
            <Text dimColor wrap="truncate">
              {effect2}
            </Text>
          </Box>
          <Box columnGap={1}>
            <Button hotkey={`${i}`} label={`${label} ${price}`} />
            <Text dimColor wrap="truncate">
              {effect3}
            </Text>
          </Box>
          <Text>
            {" "}
          </Text>
          <Text dimColor>
            顏色樣式
          </Text>
          <Box columnGap={1}>
            <Button hotkey={`${i}`} label="使用中" variant="primary" />
            <Text wrap="truncate">
              <Text>
                {ch}
              </Text>
              <Text>
                {ch2}
              </Text>
              <Text>
                {ch3}
              </Text>
            </Text>
            <Text dimColor>
              {price}
              {" 金幣"}
            </Text>
          </Box>
          <Box columnGap={1}>
            <Button hotkey={`${i}`} label="使用中" variant="primary" />
            <Text wrap="truncate">
              <Text>
                {ch4}
              </Text>
              <Text>
                {ch5}
              </Text>
              <Text>
                {ch6}
              </Text>
            </Text>
            <Text dimColor>
              {price2}
              {" 金幣"}
            </Text>
          </Box>
          <Box columnGap={1}>
            <Button hotkey={`${i}`} label="使用中" variant="primary" />
            <Text wrap="truncate">
              <Text>
                {ch7}
              </Text>
              <Text>
                {ch8}
              </Text>
              <Text>
                {ch9}
              </Text>
            </Text>
            <Text dimColor>
              {price3}
              {" 金幣"}
            </Text>
          </Box>
          <Text>
            {" "}
          </Text>
          <Button hotkey="b" label="返回" dimColor />
        </Box>
      </Box>
    )
  })

  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const face = '…'
    const name = '…'
    const titleOf = '…'
    const xp = '…'
    return (
      <Box flexDirection="column">
        <Text wrap="truncate">
          <Text bold>
            {face}
          </Text>
          <Text>
            {" "}
            {name}
          </Text>
          <Text dimColor>
            {" · "}
            {titleOf}
          </Text>
          <Text color="#ff6188">
            {" 生病中"}
          </Text>
          <Text color="#ffd866">
            {" ● "}
            0
          </Text>
          <Text dimColor>
            {" 飽 "}
          </Text>
          <Text>
            ████████░░░░░░░░
          </Text>
          <Text dimColor>
            {" 樂 "}
          </Text>
          <Text>
            ████████░░░░░░░░
          </Text>
          <Text dimColor>
            {" 精 "}
          </Text>
          <Text>
            ████████░░░░░░░░
          </Text>
          <Text dimColor>
            {" 孵化中 "}
            {xp}
            /10
          </Text>
          <Text>
            {" "}
            💩💩💩💩💩💩💩💩
          </Text>
        </Text>
        <Box columnGap={1}>
          <Button hotkey="1" label="餵食" />
          <Button hotkey="2" label="玩耍" />
          <Button hotkey="3" label="叫醒" />
          <Button hotkey="4" label="清理" />
          <Button hotkey="m" label="吃藥" variant="primary" />
          <Button hotkey="o" label="展開側邊欄" dimColor />
          <Button label="收起" dimColor />
        </Box>
        {await next(e)}
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const reason = '…'
    await $.ui.toast(`側邊欄放不下：${reason}`)
    return next(e)
  })
}