gamba

import type { Register } from 'claude-code'

// Drawn like gamba by salatmaster (pane, band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/salatmaster-gamba/
// 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 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 yes = '…'
    const no = '…'
    const always = '…'
    const never = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
          <Text color="yellow">
            {"🎰 "}
          </Text>
          <Button label={`${yes}`} hotkey="1" plain />
          <Button label={`${no}`} hotkey="2" plain />
          <Button label={`${always}`} hotkey="3" plain />
          <Button label={`${never}`} hotkey="4" plain />
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "gamba" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const row = '…'
    const row2 = '…'
    const row3 = '…'
    const top = '…'
    const above = '…'
    const payline = '…'
    const below = '…'
    const bottom = '…'
    const value = '…'
    const row4 = '…'
    const row5 = '…'
    const row6 = '…'
    const value2 = '…'
    const row7 = '…'
    const row8 = '…'
    const row9 = '…'
    const value3 = '…'
    const row10 = '…'
    const row11 = '…'
    const row12 = '…'
    const bet = '…'
    const spin = '…'
    const copy = '…'
    const lang = '…'
    const sound = '…'
    const offer = '…'
    const offers = '…'
    const close = '…'
    const emoji = '…'
    const pay = '…'
    const emoji2 = '…'
    const pay2 = '…'
    const emoji3 = '…'
    const pay3 = '…'
    const week = '…'
    return (
      <Box>
        <Box>
          <Text>
            32
          </Text>
          <Text bold color="red">
            {row}
          </Text>
          <Text bold color="red">
            {row2}
          </Text>
          <Text bold color="red">
            {row3}
          </Text>
          <Text>
            32
          </Text>
        </Box>
        <Box>
          <Box flexDirection="row" alignItems="center" columnGap={3}>
            <Box>
              <Text>
                {top}
              </Text>
              <Text dimColor>
                {above}
              </Text>
              <Text bold>
                {payline}
              </Text>
              <Text dimColor>
                {below}
              </Text>
              <Text>
                {bottom}
              </Text>
            </Box>
            <Box>
              <Text dimColor>
                {value}
              </Text>
              <Text bold color="green">
                {row4}
              </Text>
              <Text bold color="green">
                {row5}
              </Text>
              <Text bold color="green">
                {row6}
              </Text>
            </Box>
            <Box flexDirection="column" />
          </Box>
          <Text bold>
            {" "}
          </Text>
        </Box>
        <Text bold>
          {" "}
        </Text>
        <Box>
          <Text dimColor>
            {value2}
          </Text>
          <Text bold color="green">
            {row7}
          </Text>
          <Text bold color="green">
            {row8}
          </Text>
          <Text bold color="green">
            {row9}
          </Text>
        </Box>
        <Box columnGap={3}>
          <Box>
            <Text dimColor>
              {value3}
            </Text>
            <Text bold color="green">
              {row10}
            </Text>
            <Text bold color="green">
              {row11}
            </Text>
            <Text bold color="green">
              {row12}
            </Text>
          </Box>
          <Box>
            <Text dimColor>
              {bet}
            </Text>
            <Button label="◄" hotkey="2" plain />
            <Box flexDirection="row" columnGap={1}>
              <Text bold inverse>
                {` ${bet} `}
              </Text>
              <Text bold inverse>
                {` ${bet} `}
              </Text>
              <Text bold inverse>
                {` ${bet} `}
              </Text>
            </Box>
            <Button label="►" hotkey="3" plain />
          </Box>
        </Box>
        <Box>
          <Box>
            <Button label={`${spin}`} hotkey="1" plain autoFocus />
            <Button label={`${copy}`} hotkey="4" plain dimColor />
            <Button label={`${lang}: auto`} hotkey="5" plain dimColor />
            <Button label={`${sound}: ${value}`} hotkey="6" plain dimColor />
            <Button label={`${offer}: ${offers}`} hotkey="7" plain dimColor />
            <Button label={`${close}`} hotkey="8" plain dimColor />
          </Box>
        </Box>
        <Text dimColor>
          {" "}
        </Text>
        <Box>
          <Box flexDirection="row" flexWrap="wrap" columnGap={3}>
            <Box flexDirection="row" justifyContent="space-between" width={11}>
              <Text>
                {emoji}
              </Text>
              <Text bold>
                {pay}
              </Text>
            </Box>
            <Box flexDirection="row" justifyContent="space-between" width={11}>
              <Text>
                {emoji2}
              </Text>
              <Text bold>
                {pay2}
              </Text>
            </Box>
            <Box flexDirection="row" justifyContent="space-between" width={11}>
              <Text>
                {emoji3}
              </Text>
              <Text bold>
                {pay3}
              </Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Box justifyContent="center">
            <Text dimColor>
              {`· ${week} ·`}
            </Text>
          </Box>
        </Box>
        <Box />
        <Box>
          <Text dimColor>
            {`${week}:`}
          </Text>
        </Box>
        <Box>
          <Text dimColor>
            {`${week}:`}
          </Text>
        </Box>
      </Box>
    )
  })
}