ttrpg-tools/src/components/md-dice.tsx

import { customElement, noShadowDOM } from "solid-element";
import { createSignal, onMount } from "solid-js";
import {rollFormula} from "./md-commander/hooks";

export interface DiceProps {
  key?: string;
}

// 从 URL 参数获取骰子结果
function getDiceResultFromUrl(key: string): number | null {
  if (typeof window === "undefined") return null;
  const params = new URLSearchParams(window.location.search);
  const value = params.get(`dice-${key}`);
  return value ? parseInt(value) : null;
}

function setDiceResultToUrl(key: string, value: number | null) {
  if (typeof window === "undefined") return;
  const params = new URLSearchParams(window.location.search);
  if (value === null) {
    params.delete(`dice-${key}`);
  } else {
    params.set(`dice-${key}`, value.toString());
  }
  const newUrl = `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ""}${window.location.hash}`;
  window.history.pushState({}, "", newUrl);
}

customElement("md-dice", { key: "" }, (props, { element }) => {
  noShadowDOM();
  const [result, setResult] = createSignal<number | null>(null);
  const [isRolled, setIsRolled] = createSignal(false);
  const [rollDetail, setRollDetail] = createSignal<string>("");

  // 从 element 的 textContent 获取骰子公式
  const formula = element?.textContent?.trim() || "";
  
  // 隐藏原始文本内容
  if (element) {
    element.textContent = "";
  }

  // 使用的 key（如果没有提供则使用生成的 ID）
  const effectiveKey = () => props.key;

  onMount(() => {
    // 初始化时检查 URL 参数
    if (effectiveKey()) {
      const urlResult = getDiceResultFromUrl(effectiveKey());
      if (urlResult !== null) {
        setResult(urlResult);
        setIsRolled(true);
      }
    }
  });

  const handleRoll = () => {
    // 点击骰子图标：总是重 roll
    const rollResult = rollFormula(formula).result;
    setResult(rollResult.total);
    setRollDetail(rollResult.detail);
    setIsRolled(true);
    if (effectiveKey()) {
      setDiceResultToUrl(effectiveKey(), rollResult.total);
    }
  };

  const handleTextClick = () => {
    // 点击文本：总是重置为公式
    setResult(null);
    setIsRolled(false);
    setRollDetail("");
    if (effectiveKey()) {
      setDiceResultToUrl(effectiveKey(), null);
    }
  };

  const displayText = () => (isRolled() ? `${result()}` : formula);

  return (
    <span class="inline-flex items-center px-1">
      <span
        onClick={(e) => {
          e.preventDefault();
          handleRoll();
        }}
        class="text-blue-600 hover:text-blue-800 cursor-pointer"
        title={rollDetail() || "掷骰子"}
      >
        🎲
      </span>
      <a
        onClick={handleTextClick}
        class="cursor-pointer text-gray-700 hover:text-gray-900"
        title={isRolled() ? "点击重置为公式" : formula}
      >
        {displayText()}
      </a>
    </span>
  );
});