同上

mengsan/ui/hand/index.js

@@ -0,0 +1,200 @@
+import { createHandAdapter } from "./adapter.js";
+import { createHandOverlays } from "./overlays.js";
+import { createHandDiagnostics } from "./diagnostics.js";
+
+export async function mountHandUI(player, session, env) {
+  const { ui, document, window, cardCost, styleURL } = env;
+  const adapter = createHandAdapter(player, ui);
+  const overlays = createHandOverlays(document, cardCost);
+  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);
+    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 beginInput(event) {
+    const card = event.target.closest?.(".card");
+    if (event.button !== 0 || pointer ||
+        !adapter.zones.includes(card?.parentNode)) {
+      return;
+    }
+    pointer = { id: event.pointerId, x: event.clientX, y: event.clientY,
+      touch: event.pointerType === "touch" };
+  }
+  function moveInput(event) {
+    if (!pointer || pointer.id !== event.pointerId || nativeInput) 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();
+    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 }; }
+    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 });
+    }
+    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;
+  }
+}