pachincode

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const m = await read($, machine)
    const lamps = await read($, hud)
    const ammo = Math.max(0, m.granted - m.tally.fired)

    if (e.surface !== 'terminal' && e.surface !== 'desktop') {
      const { Text } = $.ui.resolve(e)
      return <Text dimColor>PachinCode 的機台畫面只在終端機與桌面版顯示。PachinPoints {m.points}</Text>
    }
    const turned = await read($, handle)
    let screen
    if (e.surface === 'desktop') {
      // No cell grid here: the machine is an image, redrawn on every bump of `frame`.
      const { Svg } = $.ui.resolve(e)
      await read($, frame)
      live.desktopIdle = 0
      if (game.geometry === null) game.geometry = buildGeometry(DESKTOP_COLS, DESKTOP_ROWS)
      screen = <Svg key="screen" source={paintSvg(game)} alt="PachinCode 柏青哥機台" />
    } else {
      const { Box, Raster, Client } = $.ui.resolve(e)
      const cols = Math.max(32, Math.min(200, e.props.bodyColumns))
      const rows = Math.max(16, Math.min(80, (e.viewport?.rows ?? 30) - 7))
      if (game.geometry === null || game.geometry.cols !== cols || game.geometry.rows !== rows) {
        game.geometry = buildGeometry(cols, rows)
      }
      live.isMounted = true
      screen = (
        <Box width={cols} height={rows}>
          <Raster key="screen" columns={cols} rows={rows} cells={paint(game)} />
          {/* An invisible layer over the machine takes the mouse and Space. */}
          <Box position="absolute" top={0} left={0}>
            <Client key="pad" module="./surfaces/pad.tsx" props={{ columns: cols, rows }} width={cols} height={rows} />
          </Box>
        </Box>
      )
    }
    const { Box, Text, Button } = $.ui.resolve(e)
    const isRight = turned.power >= 80
    const bar = '▰'.repeat(Math.round(turned.power / 10)) + '▱'.repeat(10 - Math.round(turned.power / 10))
    const holds = '●'.repeat(lamps.holds) + '○'.repeat(Math.max(0, 4 - lamps.holds))

    return (
      <Box flexDirection="column">
        <Box justifyContent="space-between">
          <Text color="#ffd700" bold>
            PachinPoints {m.points}
          </Text>
          <Text color="#9aa0a6">大當たり {m.tally.jackpots}</Text>
        </Box>
        {screen}
        <Text wrap="truncate">
          <Text color={turned.isAuto ? '#ffd700' : '#9aa0a6'} bold={turned.isAuto}>
            {turned.isAuto ? '◉ 自動發射中 ' : '○ 停止 '}
          </Text>
          <Text color={isRight ? '#ff4d4d' : '#00e5ff'}>
            力 {bar} {turned.power}% {isRight ? '右打ち' : '左打ち'}
          </Text>
          <Text color="#e6e6e6">　玉 {ammo}</Text>
          <Text color={lamps.holds === 4 ? '#ff4d4d' : '#ff9f1a'}>　保留 {holds}</Text>
          <Text color={m.isKakuhen ? '#ff3b3b' : '#9aa0a6'}>　{m.isKakuhen ? '確変中 1/9.9' : '1/99'}</Text>
        </Text>
        <Box gap={1}>
          <Button
            key="auto"
            hotkey="s"
            variant="primary"
            label={turned.isAuto ? '停止' : '自動發射'}
            onPress={() => setHandle($, now => ({ ...now, isAuto: !now.isAuto }))}
          />
          <Button
            key="shot"
            hotkey="f"
            label="發射"
            onPress={() => press(1)}
          />
          <Button key="less" hotkey="a" label="力−" onPress={() => setHandle($, now => ({ ...now, power: Math.max(0, now.power - 5) }))} />
          <Button key="more" hotkey="d" label="力＋" onPress={() => setHandle($, now => ({ ...now, power: Math.min(100, now.power + 5) }))} />
          <Button key="left" hotkey="l" label="左打" onPress={() => setHandle($, now => ({ ...now, power: 30 }))} />
          <Button key="right" hotkey="r" label="右打" onPress={() => setHandle($, now => ({ ...now, power: 95 }))} />
        </Box>
        <Text wrap="truncate" color={lamps.message ? '#ffd700' : undefined} dimColor={!lamps.message}>
          {lamps.message ||
            (e.surface === 'desktop'
              ? '按「自動發射」或「發射」打珠；力−／力＋調力道，左打／右打切換。'
              : '在機台上按住滑鼠發射；點一下機台後 Space 發射、←→ 力道。也可以 ctrl+x tab 後按 S/F/A/D/L/R')}
        </Text>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const m = await read($, machine)
    if (e.props.hasSurvey || !m.isEnabled) {
      return next(e)
    }
    const glow: GlowProps | undefined = m.tally.isFever
      ? { mode: 'fever', text: '右打ち中 ▶▶▶ RIGHT STRIKE　這段回覆會鍍金' }
      : m.isKakuhen && e.props.isWorking
        ? { mode: 'kakuhen', text: '確変中　大當たり機率 ×10 (1/9.9)' }
        : m.isKakuhenNext && !e.props.isWorking
          ? { mode: 'next', text: '次回確変　下一個問題大當たり機率 ×10，繼續連莊！' }
          : undefined
    if (glow === undefined || (e.surface !== 'terminal' && e.surface !== 'desktop')) {
      return next(e)
    }
    const { Client } = $.ui.resolve(e)

    return <Client key="glow" module="./surfaces/glow.tsx" props={glow} width={e.props.bodyColumns} height={1} />
  })