Briefing: list an alliance's banned operators in a box beside its tooltip (#484)

public/js/ui/matchInfo.js

@@ -69,14 +69,38 @@ export function DiyBannedLine({ model, class: cls = 'brief-banned__diy' }) {
     ${t('{names}的盟约本局全部禁用，不会出现在你的商店', { names: list.map((x) => dn(x.name)) })}</p>`;
 }
 
+/**
+ * The box beside a bond's tooltip: its banned members (the badge's count), each with avatar, name and bonds (the hovered
+ * one highlighted); null when none are banned.
+ * @param {any} bond @param {MatchInfoModel} model @param {Set<string>} banned
+ */
+function BondBannedAside(bond, model, banned) {
+  const ids = (Array.isArray(bond.visibleMembers) ? bond.visibleMembers : []).filter((id) => banned.has(id));
+  if (!ids.length) return null;
+  const nameOf = new Map(model.bonds.map((b) => [b.bondId, b.name]));
+  return html`<div class="brief-bantip">
+    <div class="brief-bantip__h">${t('本局禁用干员')}</div>
+    ${ids.map((id) => {
+      const c = data.lookup('chess', id);
+      const bonds = (Array.isArray(c?.bonds) ? c.bonds : []).filter((b) => nameOf.has(b));
+      return html`<div key=${id} class="brief-bantip__op" data-chess=${id}>
+        <${UnitThumb} kind="chess" id=${id} size="xs" showTier=${false} />
+        <div class="brief-bantip__txt"><b>${c?.name || id}</b>
+          <span>${bonds.map((b, i) => html`${i ? ' · ' : ''}<span class=${cx(b === bond.bondId && 'is-this')}>${nameOf.get(b)}</span>`)}</span></div>
+      </div>`;
+    })}
+  </div>`;
+}
+
 /**
  * One row of bond discs (核心盟约 / 附加盟约): a greyed disc (✕) for a bond in the drawn set D or one the mode never
  * activates, the red badge with its banned members, a red ring on an enabled bond that lost members; the tooltip says
- * which (briefingBondTip).
+ * which (briefingBondTip). A bond with banned members lists them in a second box beside the tooltip (BondBannedAside).
  * @param {{ title: string, micro: string, bonds: any[], model: MatchInfoModel }} props
  */
 export function MatchBondRow({ title, micro, bonds, model }) {
   const m = data.get('assets');
+  const banned = new Set(model.banned);
   return html`<div class="brief-bonds">
     <h3 class="brief-h"><span>${title}</span><${MicroLabel}>${micro}</${MicroLabel}></h3>
     <div class="brief-bonds__row">
@@ -84,7 +108,8 @@ export function MatchBondRow({ title, micro, bonds, model }) {
         const state = model.stateOf(b.bondId);
         const off = !!state;
         const bannedN = model.perBond.get(b.bondId) || 0;
-        return html`<${Tooltip} key=${b.bondId} text=${briefingBondTip(b.name, state, bannedN)}>
+        return html`<${Tooltip} key=${b.bondId} text=${briefingBondTip(b.name, state, bannedN)}
+          aside=${bannedN > 0 ? BondBannedAside(b, model, banned) : null}>
           <div class=${cx('brief-bond', off && 'is-off', state === 'drawn' && 'is-incomplete', !off && bannedN > 0 && 'is-partial')} data-bond=${b.bondId}>
             <${BondDisc} name=${b.name} icon=${bondIconUrl(m, b.bondId)} active=${!off} disabled=${off} tier=${off ? 0 : (b.thresholds?.length || 1)}
               maxTier=${Math.max(1, b.thresholds?.length || 1)} size="md" />