mirror of
https://github.com/Shu-Ying/noname-shuying.git
synced 2026-10-12 20:10:05 +08:00
231 lines
8.7 KiB
JavaScript
231 lines
8.7 KiB
JavaScript
import { createHandAdapter } from "./adapter.js";
|
||
import { createHandOverlays } from "./overlays.js";
|
||
import { createHandDiagnostics } from "./diagnostics.js";
|
||
import { createHandFan } from "./fan.js";
|
||
import { createHandInput } from "./input.js";
|
||
|
||
export async function mountHandUI(player, session, env) {
|
||
const { ui, document, window, cardCost, styleURL } = env;
|
||
const adapter = createHandAdapter(player, ui);
|
||
const overlays = createHandOverlays(document, card => cardCost(card, player));
|
||
const fan = createHandFan(adapter, env);
|
||
let input = null;
|
||
const restores = [];
|
||
const diagnose = createHandDiagnostics(env.game, session.id);
|
||
const style = document.createElement("link");
|
||
style.rel = "stylesheet";
|
||
style.href = styleURL;
|
||
let disposed = false;
|
||
let observer, resizeObserver, pointer = null, nativeInput = false;
|
||
let finishStyleLoad = null, refreshTimer = null;
|
||
const touchScrollClasses = new Map();
|
||
let layoutEnabled = false, warned = false;
|
||
const log = (message, error) => {
|
||
diagnose(message, error);
|
||
env.log?.(`梦三手牌 UI：${message}`);
|
||
};
|
||
function ownClass(node, name) {
|
||
if (!node || node.classList.contains(name)) return;
|
||
node.classList.add(name);
|
||
restores.push(() => node.classList.remove(name));
|
||
}
|
||
function ownAttribute(node, name, value) {
|
||
const previous = node.getAttribute(name);
|
||
node.setAttribute(name, value);
|
||
restores.push(() => {
|
||
if (node.getAttribute(name) !== value) return;
|
||
if (previous === null) node.removeAttribute(name);
|
||
else node.setAttribute(name, previous);
|
||
});
|
||
}
|
||
function nativeLayout() {
|
||
if (ui.me !== adapter.root) return;
|
||
try { ui.updateh?.(true); ui.updatehl?.(); }
|
||
catch (error) { log("原手牌布局刷新失败", error); }
|
||
}
|
||
function setLayout(enabled) {
|
||
if (layoutEnabled === enabled) return;
|
||
layoutEnabled = enabled;
|
||
for (const zone of adapter.zones) {
|
||
zone.classList.toggle("mengsan-hand-layout-shuying", enabled);
|
||
}
|
||
for (const container of adapter.containers.filter(Boolean)) {
|
||
container.classList.toggle("mengsan-hand-scroll-shuying", enabled);
|
||
}
|
||
if (!enabled) nativeLayout();
|
||
}
|
||
function refresh() {
|
||
if (disposed) return;
|
||
if (!session.active || !adapter.zones.some(zone => zone.isConnected)) {
|
||
dispose();
|
||
return;
|
||
}
|
||
const supported = adapter.supported();
|
||
setLayout(supported && !nativeInput);
|
||
fan.sync(supported && !nativeInput);
|
||
input?.reconcile();
|
||
if (!supported && !warned) {
|
||
warned = true;
|
||
log("当前容器不支持独立排列，已保留原排列与费用/强化标记");
|
||
}
|
||
overlays.sync(adapter.cards());
|
||
}
|
||
function listen(target, type, listener, options) {
|
||
target.addEventListener(type, listener, options);
|
||
restores.push(() => target.removeEventListener(type, listener, options));
|
||
}
|
||
// 不可使用的真实手牌不能触发旧手势的横排回退；选中牌保留原生交互。
|
||
function canBeginNativeInput(card) {
|
||
if (!adapter.zones.includes(card?.parentNode) ||
|
||
card.classList.contains("noclick") ||
|
||
(!card.classList.contains("selectable") &&
|
||
!card.classList.contains("selected"))) return false;
|
||
const current = env._status?.event;
|
||
return !(current?.name === "chooseToUse" && current.player === player &&
|
||
env.isActiveCardUse?.(current, player) &&
|
||
env.canPayCard?.(player, card) === false);
|
||
}
|
||
function beginInput(event) {
|
||
if (input?.owns()) return;
|
||
const card = event.target.closest?.(".card");
|
||
if (event.button !== 0 || pointer ||
|
||
!canBeginNativeInput(card)) {
|
||
return;
|
||
}
|
||
pointer = { card, id: event.pointerId, x: event.clientX, y: event.clientY,
|
||
touch: event.pointerType === "touch" };
|
||
}
|
||
function moveInput(event) {
|
||
if (input?.owns()) return;
|
||
if (!pointer || pointer.id !== event.pointerId) return;
|
||
if (!canBeginNativeInput(pointer.card)) { endInput(event); return; }
|
||
if (nativeInput) return;
|
||
// 未接管的上拖（包括响应牌或已选牌）不属于手牌排序，不退回横排。
|
||
const dx = event.clientX - pointer.x, dy = event.clientY - pointer.y;
|
||
if (dy < 0 && Math.abs(dy) >= Math.abs(dx)) return;
|
||
if (Math.hypot(event.clientX - pointer.x, event.clientY - pointer.y) < 8) {
|
||
return;
|
||
}
|
||
if (pointer.touch && Math.abs(event.clientX - pointer.x) >
|
||
Math.abs(event.clientY - pointer.y)) return;
|
||
nativeInput = true;
|
||
setLayout(false);
|
||
}
|
||
function endInput(event) {
|
||
if (event?.pointerId != null && event.pointerId !== pointer?.id) return;
|
||
restoreTouchScroll();
|
||
pointer = null;
|
||
if (disposed || !nativeInput) return;
|
||
nativeInput = false;
|
||
window.clearTimeout(refreshTimer);
|
||
refreshTimer = window.setTimeout(refresh, 0);
|
||
}
|
||
function restoreTouchScroll() {
|
||
for (const [container, hadScroll] of touchScrollClasses) {
|
||
if (!hadScroll) container.classList.remove("scrollh");
|
||
}
|
||
touchScrollClasses.clear();
|
||
}
|
||
function scrollWheel(event) {
|
||
if (!layoutEnabled || event.ctrlKey || event.metaKey) return;
|
||
const container = event.currentTarget;
|
||
if (container.scrollWidth <= container.clientWidth) return;
|
||
const scale = event.deltaMode === 1 ? 16 :
|
||
event.deltaMode === 2 ? container.clientWidth : 1;
|
||
container.scrollLeft += (event.deltaX || event.deltaY) * scale;
|
||
event.preventDefault();
|
||
event.stopImmediatePropagation();
|
||
}
|
||
function allowTouchScroll(event) {
|
||
const container = event.currentTarget;
|
||
if (!layoutEnabled || container.scrollWidth <= container.clientWidth) {
|
||
return;
|
||
}
|
||
if (!touchScrollClasses.has(container)) {
|
||
touchScrollClasses.set(container,
|
||
container.classList.contains("scrollh"));
|
||
}
|
||
container.classList.add("scrollh");
|
||
}
|
||
function dispose() {
|
||
if (disposed) return;
|
||
disposed = true;
|
||
finishStyleLoad?.();
|
||
window.clearTimeout(refreshTimer);
|
||
restoreTouchScroll();
|
||
observer?.disconnect();
|
||
resizeObserver?.disconnect();
|
||
input?.dispose();
|
||
fan.dispose();
|
||
overlays.dispose();
|
||
setLayout(false);
|
||
for (const restore of restores.reverse()) restore();
|
||
style.remove();
|
||
pointer = null;
|
||
diagnose("已卸载手牌 UI");
|
||
}
|
||
session.ownResource({}, dispose);
|
||
try {
|
||
await new Promise((resolve, reject) => {
|
||
const timer = window.setTimeout(() => finish(
|
||
new Error("梦三手牌样式加载超时")
|
||
), 10000);
|
||
const finish = error => {
|
||
window.clearTimeout(timer);
|
||
finishStyleLoad = null;
|
||
style.onload = style.onerror = null;
|
||
if (error) reject(error);
|
||
else resolve();
|
||
};
|
||
finishStyleLoad = finish;
|
||
style.onload = () => finish();
|
||
style.onerror = () => finish(new Error("梦三手牌样式加载失败"));
|
||
document.head.appendChild(style);
|
||
});
|
||
if (!session.active || disposed) { dispose(); return { refresh, dispose }; }
|
||
ownClass(adapter.root, "mengsan-hand-root-shuying");
|
||
ownClass(document.body, "mengsan-hand-ui-shuying");
|
||
for (const zone of adapter.zones) {
|
||
ownClass(zone, "mengsan-hand-zone-shuying");
|
||
}
|
||
for (const container of adapter.containers.filter(Boolean)) {
|
||
if (!container.hasAttribute("tabindex")) {
|
||
ownAttribute(container, "tabindex", "0");
|
||
}
|
||
ownAttribute(container, "aria-label", "梦三扇形手牌，悬停查看；上拖出牌，拖向目标后松手确认");
|
||
listen(container, "wheel", scrollWheel,
|
||
{ capture: true, passive: false });
|
||
listen(container, "touchmove", allowTouchScroll, true);
|
||
listen(container, "touchend", () => restoreTouchScroll(), true);
|
||
listen(container, "touchcancel", () => restoreTouchScroll(), true);
|
||
}
|
||
observer = new window.MutationObserver(refresh);
|
||
for (const zone of adapter.zones) {
|
||
observer.observe(zone, { childList: true, subtree: true,
|
||
attributes: true, attributeFilter: ["class"] });
|
||
}
|
||
input = createHandInput(player, session, adapter, fan, env, refresh, log);
|
||
if (adapter.root?.parentNode) {
|
||
observer.observe(adapter.root.parentNode, { childList: true });
|
||
}
|
||
if (window.ResizeObserver && adapter.root) {
|
||
resizeObserver = new window.ResizeObserver(refresh);
|
||
resizeObserver.observe(adapter.root);
|
||
}
|
||
if (window.PointerEvent && adapter.root) {
|
||
listen(adapter.root, "pointerdown", beginInput, true);
|
||
listen(window, "pointermove", moveInput, true);
|
||
listen(window, "pointerup", endInput, true);
|
||
listen(window, "pointercancel", endInput, true);
|
||
listen(window, "blur", () => endInput());
|
||
}
|
||
refresh();
|
||
diagnose(`已挂载手牌 UI，独立排列=${layoutEnabled}`);
|
||
return { refresh, dispose };
|
||
} catch (error) {
|
||
log("必需模块挂载失败，停止进入战斗", error);
|
||
dispose();
|
||
throw error;
|
||
}
|
||
}
|