ark-stronghold-protocol/public/js/ui/underframe.js

// Underframe — the selection diamond of a tapped own piece (research 09 §1.2 "Tap a deployed unit", §5, §6.5;
// official `act2autochess_panel_character_menu`: `util_btn` icon_sell + price "+1", funcId autochessSale; the
// destroy variant `_underFramePanelBtnParamDestroyPos` with icon_destory).
//
//   board operator  → 撤退 (upper-left: back to the bench) + 出售 +N (upper-right)
//   board summon    → 撤退
//   bench operator  → 出售 +N
//   item / Art      → 销毁
// The diamond frames the piece's tile; only its buttons take pointer events, so the unit under it can still be
// dragged (moving it — or dropping it back on its own tile to re-orient it with the wheel). The game screen shows the
// unit's range tiles (rotated to its facing) and the detail card beside it while it is selected (on the side away
// from the unit, `underframeRect` / gameLogic `panelSide`), and the underframe sits above every HUD panel, so its
// buttons are never covered.
//
// Button look (user playtest #2 item 7): the official sprites icon_sell / icon_destory are WHITE octagon plates with
// the glyph cut out — tinted in the client. Drawn as is they read as a plain white block, so each button is a coloured
// octagon plate: the sprite is used as a CSS mask over the plate colour (出售 amber like every money action, 销毁 /
// 撤退 red) on a dark backing that shows through the glyph cut-out. Without the local sprites the same plate carries
// the built-in glyph.
//
// TempRowNotice (user playtest #3 item 3) — the other board-anchored overlay of the prep: while the temp overflow row
// (临时整备区, row 8, the 5 pads in front of the bench) holds pieces, a dashed red frame around that row and a label at
// its end say that they block 准备就绪 and are destroyed when the prep ends unless moved to the bench, equipped or used.
// Placed through view.tileScreen (useTileScreen, so it follows the camera — the Final Assault prep too); it never takes
// the pointer, so the pieces under it stay draggable.

import { html, HexBadge, Icon } from './components.js';
import { GIcon } from './gameComponents.js';
import { useTileScreen } from './facingWheel.js';
import { localAsset } from '../data.js';
import { GEO } from '../../../shared/constants.js';

const cx = (...p) => p.flat().filter(Boolean).join(' ');

/** Runner glyph of 撤退 (a figure leaving through a door; original shape). */
function RetreatGlyph() {
  return html`<svg class="uframe__glyph" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M13.5 3.2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM9.6 8.3l3.7-.6 2.2 3.3 2.7 1-.6 1.8-3.4-1.2-.9-1.3-.8 3.2 2.6 2.6V22h-2v-4.7l-2.4-2.3-.9 3.6-4.4-1 .5-1.9 2.4.5 1.6-6.6-1 .3-1.4 2.8-1.8-.9 1.9-3.6z" />
    <path d="M2 5h5v2H4v10h3v2H2z" opacity=".7" />
  </svg>`;
}

/**
 * A tinted octagon plate: the official sprite (white plate, glyph cut out) as a mask over the tone colour, or the
 * built-in glyph on the same plate when the local sprite is not installed.
 * @param {{ sprite: string, glyph: string, tone: 'sell'|'destroy' }} props
 */
export function PlateIcon({ sprite, glyph, tone }) {
  const url = localAsset('ui/battle', sprite);
  return html`<span class=${cx('uframe__plate', `uframe__plate--${tone}`, url ? 'has-mask' : 'is-glyph')}
      style=${url ? `--uf-mask:url("${url}")` : ''} data-sprite=${url ? sprite : null} aria-hidden="true">
    ${url ? null : html`<${GIcon} name=${glyph} class="uframe__pglyph" />`}
  </span>`;
}

/**
 * Client-px rect the underframe of a tile covers: the diamond plus its buttons (plates, labels, the +N price) — the
 * geometry of the css below (.uframe__btn--retreat / --sell: .56rem plates at 25 % / 75 % across, 25 % down, shifted
 * −80 % / −20 % horizontally and −90 % vertically). Used for the detail panel placement.
 * @param {{ x: number, y: number, s: number }|null} g view.tileScreen(row, col)
 * @param {number} [rem] root font size (px)
 * @returns {{ left: number, right: number, top: number, bottom: number }|null}
 */
export function underframeRect(g, rem = 100) {
  if (!g || !Number.isFinite(g.x) || !Number.isFinite(g.y)) return null;
  const s = g.s > 0 ? g.s : 64;
  const half = s * 1.05;
  const P = rem * 0.56;                 // plate
  const H = P + rem * 0.26;             // plate + label
  const q = half / 2;                   // 25 % / 75 % of the diamond box, from its centre
  const btnTop = g.y - q - 0.9 * H;
  const left = Math.min(g.x - half, g.x - q - 0.8 * P);
  const right = Math.max(g.x + half, g.x + q - 0.2 * P + P + rem * 0.14);
  return { left, right, top: Math.min(g.y - half, btnTop - rem * 0.08), bottom: g.y + half };
}

/**
 * @param {{ view: any, uid?: number|null, row: number, col: number, actions: { retreat: boolean, sell: number|null, destroy: boolean },
 *   name?: string, busy?: boolean, onRetreat?: () => void, onSell?: () => void, onDestroy?: () => void }} props
 */
export function Underframe({ view, uid = null, row, col, actions, name = '', busy = false, onRetreat, onSell, onDestroy }) {
  const g = useTileScreen(view, row, col);
  if (!g || !actions) return null;
  const s = g.s > 0 ? g.s : 64;
  const half = s * 1.05;
  const stop = (e) => e.stopPropagation();
  return html`<div class="uframe" data-uid=${uid} style=${`left:${g.x}px;top:${g.y}px;width:${half * 2}px;height:${half * 2}px`} role="group"
      aria-label=${`${name || '单位'} 操作`}>
    <svg class="uframe__dia" viewBox="-110 -110 220 220" aria-hidden="true">
      <path class="uframe__outer" d="M0 -100 L100 0 L0 100 L-100 0 Z" />
      <path class="uframe__corner" d="M-100 0 L-86 -14 M-100 0 L-86 14 M100 0 L86 -14 M100 0 L86 14 M0 -100 L-14 -86 M0 -100 L14 -86 M0 100 L-14 86 M0 100 L14 86" />
    </svg>
    ${actions.retreat ? html`<button type="button" class="uframe__btn uframe__btn--retreat" disabled=${busy} onPointerDown=${stop}
        onClick=${(e) => { stop(e); onRetreat?.(); }} title="撤退至整备区" aria-label="撤退">
      <${RetreatGlyph} /><span class="uframe__label">撤退</span>
    </button>` : null}
    ${actions.sell != null ? html`<button type="button" class="uframe__btn uframe__btn--sell" disabled=${busy} onPointerDown=${stop}
        onClick=${(e) => { stop(e); onSell?.(); }} title=${`出售（+${actions.sell} 资金）`} aria-label=${`出售，获得 ${actions.sell} 资金`}>
      <${PlateIcon} sprite="icon_sell" glyph="sell" tone="sell" />
      <span class="uframe__label">出售</span>
      <${HexBadge} value=${`+${actions.sell}`} tone="gold" size="sm" class="uframe__price" />
    </button>` : null}
    ${actions.destroy ? html`<button type="button" class=${cx('uframe__btn', 'uframe__btn--destroy')} disabled=${busy} onPointerDown=${stop}
        onClick=${(e) => { stop(e); onDestroy?.(); }} title="销毁道具" aria-label="销毁">
      <${PlateIcon} sprite="icon_destory" glyph="trash" tone="destroy" />
      <span class="uframe__label">销毁</span>
    </button>` : null}
  </div>`;
}

// ---- the temp overflow row (临时整备区) ---------------------------------------------------------------------------

/**
 * Screen frame of the temp row from its two end tiles (view.tileScreen of cols TEMP_C0 and TEMP_C0 + TEMP_SIZE − 1): the
 * quad [back-left, back-right, front-right, front-left] (back = the far edge, higher on screen — also when the Final
 * Assault prep mirrors the board), its bounds, and the side of the label: left of the row, or right of it when the
 * left has no room for `labelW` px. Pure (test/ui/playtest3.test.js).
 * @param {{ poly: Array<[number, number]> } | null} a @param {{ poly: Array<[number, number]> } | null} b
 * @param {{ labelW?: number, gap?: number, vw?: number }} [opts]
 * @returns {{ quad: Array<[number, number]>, left: number, right: number, top: number, bottom: number, y: number, side: 'left'|'right' } | null}
 */
export function tempRowFrame(a, b, { labelW = 0, gap = 8, vw = Infinity } = {}) {
  const ok = (t) => t && Array.isArray(t.poly) && t.poly.length >= 4 && t.poly.every((p) => Array.isArray(p) && Number.isFinite(p[0]) && Number.isFinite(p[1]));
  if (!ok(a) || !ok(b)) return null;
  const backs = [a.poly[0], a.poly[1], b.poly[0], b.poly[1]];
  const fronts = [a.poly[2], a.poly[3], b.poly[2], b.poly[3]];
  const minX = (pts) => pts.reduce((m, p) => (p[0] < m[0] ? p : m));
  const maxX = (pts) => pts.reduce((m, p) => (p[0] > m[0] ? p : m));
  const quad = [minX(backs), maxX(backs), maxX(fronts), minX(fronts)];
  const xs = quad.map((p) => p[0]);
  const ys = quad.map((p) => p[1]);
  const left = Math.min(...xs), right = Math.max(...xs), top = Math.min(...ys), bottom = Math.max(...ys);
  const side = left - gap - labelW >= 0 || right + gap + labelW > vw ? 'left' : 'right';
  return { quad, left, right, top, bottom, y: (top + bottom) / 2, side };
}

/**
 * What the temp row's label says will happen to its pieces (server/match/PlayerState.js tempDue): a piece is resolved
 * at the end of the first prep in which the player can act on it. Not ready (or outside PREP): at the end of this / the
 * coming prep, and 准备就绪 waits for the row to be cleared. Ready in PREP: Ready is refused while the row holds pieces,
 * so whatever lies there arrived after it — kept through the NEXT prep (cancelling Ready makes it due at this one).
 * @param {boolean} ready m.private ready (during PREP)
 */
export function tempRowRule(ready) {
  return ready
    ? '已准备就绪后进入的单位保留到下个休整期，届时仍在此处的将被销毁（取消准备则在本休整期结束时销毁）'
    : '放入整备区或战场、配发或使用后才能准备；休整期结束时仍在此处的将被销毁';
}

/**
 * The temp row's notice: dashed red frame + label (count, what to do, what happens at the end of the prep — tempRowRule).
 * `label` false (a piece is being dragged / placed): the frame only, nothing over the pieces the player is moving.
 * @param {{ view: any, count: number, items?: number, label?: boolean, ready?: boolean }} props
 */
export function TempRowNotice({ view, count, items = 0, label = true, ready = false }) {
  const a = useTileScreen(view, GEO.TEMP_ROW, GEO.TEMP_C0);
  const b = useTileScreen(view, GEO.TEMP_ROW, GEO.TEMP_C0 + GEO.TEMP_SIZE - 1);
  let rem = 100;
  try { rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 100; } catch { /* default */ }
  const vw = globalThis.innerWidth || 1920;
  const f = count > 0 ? tempRowFrame(a, b, { labelW: rem * 2.9, gap: rem * 0.1, vw }) : null;
  if (!f) return null;
  const pts = f.quad.map((p) => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const pad = rem * 0.1;
  const style = f.side === 'left' ? `left:${(f.left - pad).toFixed(1)}px;top:${f.y.toFixed(1)}px` : `left:${(f.right + pad).toFixed(1)}px;top:${f.y.toFixed(1)}px`;
  const what = items > 0 && items === count ? '件道具' : '个单位';
  return html`<div class="tempnote" aria-hidden="false" data-testid="temp-notice">
    <svg class="tempnote__frame" aria-hidden="true"><polygon points=${pts} /></svg>
    ${label ? html`<div class=${`tempnote__label is-${f.side}`} style=${style} role="status">
      <b class="tempnote__title"><${Icon} name="warn" />临时整备区 <span class="num">${count}</span> ${what}待处理</b>
      <span class="tempnote__rule">${tempRowRule(ready)}</span>
    </div>` : null}
  </div>`;
}