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

import { useGameStore } from '../store'
import { npcById } from '../../game/data/npcs'
import { giftNpc, makePeace, marryNpcFamily } from '../../game/engine/systems/diplomacy'
import { useMemo } from 'react'
import { MAJOR_NAMES } from '../../game/data/realms'

const REL_TYPE = (r: number) =>
  r >= 80 ? ['死生之交', 'good'] : r >= 50 ? ['通好之势', 'good'] : r >= 25 ? ['友善', 'warn'] : r >= 10 ? ['温和', 'warn'] : r > -10 ? ['中立', ''] : r > -30 ? ['嫌隙', ''] : r > -50 ? ['敌对', 'bad'] : ['仇雠', 'bad']

export default function DiplomacyPanel() {
  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 npcs = Object.values(w.state.npcFamilies)

  const sorted = useMemo(() => npcs, [npcs])

  return (
    <div>
      <div className="help-text">
        外交之道：送礼结好、联姻通好；仇恨过深的老对家会遣队劫掠。家族声望同样影响诸家态度。
      </div>
      {sorted.map((npc) => {
        const def = npcById(npc.id)
        const [relLabel, relCls] = REL_TYPE(npc.relation)
        const married = npc.allied
        return (
          <div key={npc.id} className="npc-row">
            <div className="npc-name">
              <div style={{ fontSize: '1.15rem' }}>{npc.name}</div>
              <div className="dim2" style={{ fontSize: '0.78rem' }}>{def.style} · {npc.region}</div>
            </div>
            <div className="relation-bar">
              <div className="bar" style={{ borderColor: npc.relation >= 0 ? '#2e5a2e' : '#6e2f2f' }}>
                <div
                  style={{
                    width: `${(npc.relation + 100) / 2}%`,
                    background: npc.relation >= 0 ? '#5a8a44' : '#8a4444'
                  }}
                />
              </div>
              <div className={`dim ${relCls}`} style={{ marginTop: 4, fontSize: '0.82rem' }}>
                关系{npc.relation} · {relLabel} · 势力{npc.power}
              </div>
            </div>
            <div className="relation-num">
              <span className="dim2">{MAJOR_NAMES[def.leaderRealm]}宗主</span>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn btn-sm" onClick={() => { giftNpc(w, npc.id, 120); bump() }}>
                赠礼120
              </button>
              <button
                className="btn btn-sm"
                disabled={npc.relation < 25 || married}
                onClick={() => { marryNpcFamily(w, npc.id); bump() }}
              >
                {married ? '已联姻' : '联姻'}
              </button>
              <button className="btn btn-sm" onClick={() => { (npc.relation = Math.max(-100, npc.relation - 20)); bump() }}>
                寻衅
              </button>
              {npc.relation < -30 && (
                <button className="btn btn-sm" onClick={() => { makePeace(w, npc.id); bump() }}>
                  议和
                </button>
              )}
            </div>
          </div>
        )
      })}
      <div className="dim2" style={{ marginTop: 12 }}>
        示好请用灵石铺路；寻衅会立刻恶化关系，且可能招致劫掠或围庄。
      </div>
    </div>
  )
}