ChronicleOfTheImmortalClan/src/renderer/ui/panels/MarketPanel.tsx

import { useGameStore } from '../store'
import { ITEMS } from '../../game/data/items'
import { TECHNIQUES } from '../../game/data/techniques'
import { TECHNIQUE_GRADE_NAMES } from '../../game/data/realms'
import { marketPrice, buyItem, sellItem, buyTechnique } from '../../game/engine/market'
import { useMemo, useState } from 'react'

export default function MarketPanel() {
  const world = useGameStore((s) => s.world)
  const bump = useGameStore((s) => s.bump)
  const revision = useGameStore((s) => s.revision)
  void revision
  if (!world) return null
  const w = world
  const fam = w.state.family
  const inv = fam.inventory
  const [tab, setTab] = useState<'goods' | 'tech'>('goods')

  const goods = useMemo(() => Object.values(ITEMS).filter((i) => i.kind === 'resource' || i.kind === 'pill'), [])
  const artifacts = useMemo(() => Object.values(ITEMS).filter((i) => i.kind === 'artifact'), [])
  const marketTech = TECHNIQUES.filter((t) => t.grade <= 3)
  const cangshuLv = fam.buildings['cangshu'] ?? 0

  const price = (id: string) => marketPrice(w, id)

  return (
    <div>
      <div className="tabs" style={{ padding: 0, background: 'none', border: 'none', marginBottom: 10 }}>
        <div className={`tab ${tab === 'goods' ? 'sel' : ''}`} onClick={() => setTab('goods')}>货栈</div>
        <div className={`tab ${tab === 'tech' ? 'sel' : ''}`} onClick={() => setTab('tech')}>法帖</div>
      </div>
      {tab === 'goods' && (
        <>
          <div className="help-text">
            集市物价随季节波动（当前行情 {Math.round(((fam.flag['priceMult'] as number) ?? 1) * 100)}%）。
            仓库寄存的灵草、灵矿、兽核均可在此出手。
          </div>
          <table className="market-table">
            <thead>
              <tr>
                <th>品名</th>
                <th>说明</th>
                <th>行价</th>
                <th>库存/持有</th>
                <th>买卖</th>
              </tr>
            </thead>
            <tbody>
              {[...goods, ...artifacts].map((item) => {
                const have = item.id === 'lingcao' || item.id === 'lingkuang' || item.id === 'beastcore' || item.kind === 'pill' || item.kind === 'artifact'
                  ? inv[item.id] ?? 0
                  : 0
                const stock = item.kind === 'artifact' ? 3 : item.kind === 'pill' ? 5 : 9999
                const count = item.kind === 'artifact' ? 1 : 5
                return (
                  <tr key={item.id}>
                    <td>
                      <b><span className="s-icon">{item.icon}</span> {item.name}</b>
                    </td>
                    <td className="dim">{item.desc}</td>
                    <td>{price(item.id)} 灵石</td>
                    <td className="dim">{have}</td>
                    <td>
                      <button
                        className="btn btn-sm"
                        disabled={fam.stones < price(item.id) * count}
                        onClick={() => {
                          buyItem(w, item.id, count)
                          bump()
                        }}
                      >
                        买{count}
                      </button>{' '}
                      {((item.kind === 'resource' || item.kind === 'pill') && have >= count) && (
                        <button
                          className="btn btn-sm"
                          onClick={() => {
                            sellItem(w, item.id, count)
                            bump()
                          }}
                        >
                          卖{count}
                        </button>
                      )}
                      {item.kind === 'artifact' && have > 0 && (
                        <span className="dim2"> 已购藏</span>
                      )}
                    </td>
                  </tr>
                )
              })}
              <tr>
                <td><b><span className="s-icon">炼</span> 丹房炼制</b></td>
                <td className="dim">灵草+辅矿 → 丹药（丹房等级越高成数越足）</td>
                <td className="dim">{fam.buildings['danfang'] ? `${fam.buildings['danfang']}级丹房` : '未建丹房'}</td>
                <td className="dim">灵草{inv['lingcao'] ?? 0}</td>
                <td>
                  {fam.buildings['danfang'] && (
                    <>
                      <button className="btn btn-sm" onClick={() => { w.craftPill('qiyuan'); bump() }}>炼气丹</button>{' '}
                      <button className="btn btn-sm" onClick={() => { w.craftPill('ningyuan'); bump() }}>炼元丹</button>
                    </>
                  )}
                </td>
              </tr>
            </tbody>
          </table>
        </>
      )}
      {tab === 'tech' && (
        <>
          <div className="help-text">
            藏书阁录存法帖，族人可修习。藏书阁等级决定可在坊市搜购的品阶（当前 {cangshuLv} 级，可购至{TECHNIQUE_GRADE_NAMES[Math.min(3, Math.max(0, cangshuLv))]}）。
            若藏书阁未建或等级不足，只可见基础法帖。
          </div>
          <table className="market-table">
            <thead>
              <tr>
                <th>法帖</th>
                <th>品阶/路子</th>
                <th>妙用</th>
                <th>修为加成</th>
                <th>战力加成</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {marketTech
                .filter((t) => t.grade <= 1 + cangshuLv)
                .filter((t) => t.grade <= 3)
                .map((t) => {
                  const owned = fam.techniques.includes(t.id)
                  const p = t.grade <= 1 + cangshuLv
                  const priceT = [120, 300, 700, 1600, 3600][t.grade] ?? 300
                  return (
                    <tr key={t.id}>
                      <td><b>《{t.name}》</b></td>
                      <td className="dim">{TECHNIQUE_GRADE_NAMES[t.grade]} · {t.path}</td>
                      <td className="dim">{t.desc}</td>
                      <td>+{Math.round((t.expBonus) * 100)}%</td>
                      <td>+{Math.round((t.powerBonus) * 100)}%</td>
                      <td>
                        {owned ? (
                          <span className="good">已录</span>
                        ) : (
                          <button
                            className="btn btn-sm"
                            disabled={!p || fam.stones < priceT}
                            onClick={() => {
                              buyTechnique(w, t.id, priceT)
                              bump()
                            }}
                          >
                            {priceT}灵石
                          </button>
                        )}
                      </td>
                    </tr>
                  )
                })}
            </tbody>
          </table>
        </>
      )}
      <div className="dim2" style={{ marginTop: 10 }}>
        灵矿不足时可上坊市民间收购；妖丹于探秘与灵兽园中可得。
      </div>
    </div>
  )
}