sganggs
0aba602ecf
- #1 lost operator models: the Spine store no longer hands out a skeleton whose unload is in flight (PIXI.Assets.unload is async); eviction runs 1 s after a release and the empty-scene budget only after 3 s - #7 picking: one shared rule (render/pick.js, pixel probe where bodies overlap) for prep/battle clicks, hover, the enemy pen and equipment drops; the drag ghost stands on its drop tile; hover probes capped at one per frame - #2 the top-bar LP drops live as the own battle's enemies enter the blue gate (−N, 联防中), teammates' pending LP in the team panel - #3 temp overflow pieces that arrive after a prep deadline survive through the next prep (tempDue); temp-row warning and ready-button reason - #4 蕾缪安 S3: locks every 0.5 s, then one shell every 0.3 s in lock order (PRTS notes), bombardShell fx - #5 回环射手: real boomerang (out 15, back 3.75 tiles/s, attack only when every boomerang is caught) - #6 visible projectiles, muzzle flashes, slashes, skill bursts and auras at unchanged frame cost - #8 特质 right under the detail card header, with its official type icon - #9 no spinning busy cursors / spinners next to texts; game data warmed before the match - docs, recordings and tests updated (2414 unit tests, all browser suites green)
103 lines
7.1 KiB
JavaScript
103 lines
7.1 KiB
JavaScript
// Left team panel (research 06 §11.1, research 09 §3.1): one row per seat — avatar (band icon once picked), name, LP
|
||
// tower, status glyph (… acting / ✓ ready / ⌛ deciding / ⚔ combat / door left / ✕ dead), AI badge, "you" marker, the
|
||
// field being watched (eye badge), and emote bubbles.
|
||
// Observing (client-side combat, `observe` prop — the official flow): tapping a teammate's avatar expands a mint
|
||
// "前往查看" button under the row (when that teammate can be observed now; otherwise the reason is toasted through
|
||
// onWatch); while observing, the own row shows a "返回战场" button. Without `observe` (server-run combat) a click
|
||
// watches that player's field at once.
|
||
// Live LP (user playtest #3 item 2): during a normal round's battle each row's tower shows lp − the loss that player's
|
||
// leaks so far will cost (red, −N): the own row the top bar's live value (`self`, ui/hud.js liveLp), a teammate's row
|
||
// m.public players[].pendingLp (server/match/Match.js, ~1 Hz).
|
||
|
||
import { useEffect, useState } from '../../vendor/hooks.module.js';
|
||
import { PHASE } from '../../../shared/constants.js';
|
||
import { html, Icon, Tooltip } from './components.js';
|
||
import { PlayerAvatar, LpTower, GIcon, LocalSprite } from './gameComponents.js';
|
||
import { EmoteBubble } from './emotes.js';
|
||
import { STATUS_META, sortedPlayers } from './gameLogic.js';
|
||
import { localAsset } from '../data.js';
|
||
|
||
const cx = (...p) => p.flat().filter(Boolean).join(' ');
|
||
|
||
/** Official status glyphs (ui/battle) per m.public players[].status; CSS glyph fallback. */
|
||
const STATUS_SPRITE = { ready: 'icon_ready', deciding: 'icon_waiting', done: 'icon_complete', dead: 'icon_dead' };
|
||
|
||
/**
|
||
* A row's LP tower: the settled LP and the pending loss of the round's battle (0 outside COMBAT / UNITE). The own row
|
||
* takes the top bar's live value when there is one (its m.private lp: the same number as the top bar).
|
||
* @param {any} p m.public players[] entry @param {any} pub m.public
|
||
* @param {{ lp?: number|null, pending: number, unite: boolean } | null} [self] the own live value (only for the own row)
|
||
* @returns {{ lp: number|null, pending: number, unite: boolean }}
|
||
*/
|
||
export function rowLp(p, pub, self = null) {
|
||
const pubLp = Number.isFinite(p?.lp) ? p.lp : null;
|
||
if ((pub?.phase !== PHASE.COMBAT && pub?.phase !== PHASE.UNITE) || p?.alive === false) return { lp: pubLp, pending: 0, unite: false };
|
||
const lp = self && Number.isFinite(self.lp) ? self.lp : pubLp;
|
||
if (lp == null) return { lp, pending: 0, unite: false };
|
||
const raw = self ? self.pending : p.pendingLp;
|
||
const pending = Math.min(lp, Math.max(0, Math.trunc(Number(raw) || 0)));
|
||
return { lp, pending, unite: pending > 0 && (self ? !!self.unite : pub.phase === PHASE.UNITE) };
|
||
}
|
||
|
||
/**
|
||
* @param {{ pub:any, myId:string, watching:string|null, bubbles: Map<string,{id:string,seq:number}>, onWatch:(p:any)=>void,
|
||
* compact?: boolean, teamLp?: number|null, self?: { lp?: number|null, pending: number, unite: boolean } | null,
|
||
* observe?: null | { canObserve: (p:any) => { fieldId?: string, reason?: string|null, back?: boolean }, observing: boolean, onBack: () => void } }} props
|
||
*/
|
||
export function TeamPanel({ pub, myId, watching, bubbles, onWatch, compact = false, observe = null, self: selfLive = null }) {
|
||
const [openPid, setOpenPid] = useState(null);
|
||
const phaseKey = `${pub?.phase}:${pub?.round}`;
|
||
useEffect(() => { setOpenPid(null); }, [phaseKey, watching, observe?.observing]);
|
||
const players = sortedPlayers(pub);
|
||
if (!players.length) return null;
|
||
const click = (p, self) => {
|
||
if (!observe) { onWatch(p); return; }
|
||
if (self) { if (observe.observing) observe.onBack(); setOpenPid(null); return; }
|
||
const t = observe.canObserve(p) || {};
|
||
if (!t.fieldId) { setOpenPid(null); onWatch(p); return; } // the game screen toasts the reason
|
||
setOpenPid((cur) => (cur === p.playerId ? null : p.playerId));
|
||
};
|
||
return html`<aside class=${cx('team', compact && 'team--compact')} aria-label="同盟成员">
|
||
${players.map((p) => {
|
||
const self = p.playerId === myId;
|
||
const status = p.alive === false ? 'dead' : p.status;
|
||
const meta = STATUS_META[status] || STATUS_META.acting;
|
||
const watched = watching && (watching === p.fieldId || watching === `n:${p.playerId}`);
|
||
const bubble = bubbles?.get(p.playerId);
|
||
const offline = p.connected === false && !p.isBot;
|
||
const open = !!observe && openPid === p.playerId && !self;
|
||
const back = !!observe && self && observe.observing;
|
||
const title = observe ? (self ? (observe.observing ? '返回战场' : '你自己') : `查看 ${p.name} 的战场`) : (self ? '查看自己的阵地' : `查看 ${p.name} 的阵地`);
|
||
const lp = rowLp(p, pub, self ? selfLive : null);
|
||
return html`<div key=${p.playerId} class=${cx('team__row', self && 'is-self', watched && 'is-watched', p.alive === false && 'is-dead', open && 'is-open')}>
|
||
<button type="button" class="team__btn" onClick=${() => click(p, self)} title=${title} aria-expanded=${observe && !self ? String(open) : undefined}>
|
||
<${PlayerAvatar} player=${p} self=${self} />
|
||
<span class="team__seat num">P${(p.seat ?? 0) + 1}</span>
|
||
${p.isBot ? html`<span class="team__ai">AI</span>` : null}
|
||
${self ? html`<span class="team__you"><${Icon} name="user" /></span>` : null}
|
||
</button>
|
||
<div class="team__info">
|
||
<span class="team__name">${p.name || '博士'}</span>
|
||
<div class="team__line">
|
||
<${LpTower} value=${lp.lp} size="sm" tone=${Number.isFinite(lp.lp) && lp.lp - lp.pending <= 5 ? 'danger' : null} pending=${lp.pending}
|
||
tip=${lp.pending > 0 ? `目标生命值 ${lp.lp}，${lp.unite ? '联防中，' : ''}结算时扣除${lp.unite ? '至多' : ''} ${lp.pending} 点` : null} />
|
||
<${Tooltip} text=${offline ? '连接已断开' : meta.text} placement="right">
|
||
<span class=${cx('team__status', `is-${meta.tone}`, offline && 'is-offline', (offline || STATUS_SPRITE[status]) && localAsset('ui/battle', offline ? 'icon_lost_connect' : STATUS_SPRITE[status]) && 'has-sprite')} aria-label=${meta.text}>
|
||
${offline ? html`<${LocalSprite} name="icon_lost_connect" fallback=${html`<${Icon} name="wifiOff" />`} />`
|
||
: STATUS_SPRITE[status] ? html`<${LocalSprite} name=${STATUS_SPRITE[status]} fallback=${html`<${GIcon} name=${meta.glyph} />`} />`
|
||
: html`<${GIcon} name=${meta.glyph} />`}
|
||
</span>
|
||
<//>
|
||
${watched && !self ? html`<span class="team__eye" title="正在查看"><${GIcon} name="eye" /></span>` : null}
|
||
</div>
|
||
${open ? html`<button type="button" class="btn btn--primary btn--sm team__ob"
|
||
onClick=${() => { setOpenPid(null); onWatch(p); }}><span class="btn__label">前往查看</span></button>` : null}
|
||
${back ? html`<button type="button" class="btn btn--secondary btn--sm team__back"
|
||
onClick=${() => observe.onBack()}><span class="btn__label">返回战场</span></button>` : null}
|
||
</div>
|
||
${bubble ? html`<${EmoteBubble} key=${bubble.seq} id=${bubble.id} class="team__bubble" />` : null}
|
||
</div>`;
|
||
})}
|
||
</aside>`;
|
||
}
|