app.js

"use strict";

const sourceText = document.querySelector("#source-text");
const resultText = document.querySelector("#result-text");
const sourceCount = document.querySelector("#source-count");
const convertButton = document.querySelector("#convert-button");
const copyButton = document.querySelector("#copy-button");
const statusPanel = document.querySelector("#status-panel");
const statusTitle = document.querySelector("#status-title");
const statusDetail = document.querySelector("#status-detail");

let importMap = new Map();
let supportedCharacters = new Set();
let dataIsReady = false;

function setStatus(type, title, detail) {
  statusPanel.className = `status-panel is-${type}`;
  statusTitle.textContent = title;
  statusDetail.textContent = detail;
}

function parseImportMap(text) {
  const mappings = new Map();

  for (const line of text.replace(/^\uFEFF/, "").split(/\r?\n/u)) {
    if (line.length === 0) continue;

    const separatorIndex = line.indexOf("=");
    if (separatorIndex < 1) continue;

    const source = line.slice(0, separatorIndex);
    const target = line.slice(separatorIndex + 1);
    mappings.set(source, target);
  }

  return mappings;
}

async function loadCharacterData() {
  try {
    const [importResponse, fontResponse] = await Promise.all([
      fetch("charmap/import.txt"),
      fetch("charmap/im2_font.json"),
    ]);

    if (!importResponse.ok || !fontResponse.ok) {
      throw new Error("字符数据文件请求失败");
    }

    const [importText, fontData] = await Promise.all([
      importResponse.text(),
      fontResponse.json(),
    ]);

    if (!Array.isArray(fontData)) {
      throw new TypeError("字体数据格式无效");
    }

    importMap = parseImportMap(importText);
    supportedCharacters = new Set(
      fontData
        .map((item) => item?.char)
        .filter((character) => typeof character === "string"),
    );
    dataIsReady = true;
    convertButton.disabled = false;
    setStatus(
      "ready",
      "准备完成，请输入制作人名称。",
      `已载入 ${importMap.size} 条转写规则与 ${supportedCharacters.size} 个可用字符。`,
    );
  } catch (error) {
    console.error(error);
    setStatus(
      "error",
      "字符数据加载失败。",
      "请通过本地服务器或网站地址打开本页面，然后刷新重试。",
    );
  }
}

function describeCharacter(character) {
  if (character === " ") return "空格";
  if (character === "\n") return "换行";
  if (character === "\r") return "回车";
  if (character === "\t") return "制表符";
  return `“${character}”`;
}

function convertName() {
  if (!dataIsReady) return;

  const input = sourceText.value;
  if (!input) {
    resultText.value = "";
    copyButton.disabled = true;
    setStatus("error", "还没有输入名称。", "请先在上方文本框中输入想要显示的文字。");
    sourceText.focus();
    return;
  }

  const converted = Array.from(input, (character) =>
    importMap.has(character) ? importMap.get(character) : character,
  ).join("");
  const convertedCharacters = Array.from(converted);
  const unsupported = new Map();

  convertedCharacters.forEach((character, index) => {
    if (supportedCharacters.has(character)) return;

    if (!unsupported.has(character)) unsupported.set(character, []);
    unsupported.get(character).push(index + 1);
  });

  if (unsupported.size > 0) {
    resultText.value = "";
    copyButton.disabled = true;

    const details = Array.from(unsupported, ([character, positions]) => {
      const positionText = positions.length > 3
        ? `${positions.slice(0, 3).join("、")} 等位置`
        : `第 ${positions.join("、")} 个位置`;
      return `${describeCharacter(character)}（${positionText}）`;
    }).join("，");

    setStatus("error", "转换未完成：名称中有不可用字符。", `无法使用：${details}`);
    return;
  }

  resultText.value = converted;
  copyButton.disabled = false;

  const replacedCount = Array.from(input).reduce(
    (count, character) => count + Number(importMap.has(character)),
    0,
  );
  const detail = replacedCount > 0
    ? `已转写 ${replacedCount} 个字符，所有字符均可在游戏中显示。`
    : "无需转写，所有字符均可在游戏中显示。";
  setStatus("success", "转换成功，可以复制结果了！", detail);
}

async function copyResult() {
  if (!resultText.value) return;

  try {
    await navigator.clipboard.writeText(resultText.value);
  } catch {
    resultText.focus();
    resultText.select();
    document.execCommand("copy");
  }

  const originalText = copyButton.textContent;
  copyButton.textContent = "已复制";
  window.setTimeout(() => {
    copyButton.textContent = originalText;
  }, 1400);
}

sourceText.addEventListener("input", () => {
  sourceCount.textContent = `${Array.from(sourceText.value).length} 字`;
  resultText.value = "";
  copyButton.disabled = true;

  if (dataIsReady) {
    setStatus("ready", "输入完成后点击转换。", "我会检查每一个字符能否在游戏中显示。");
  }
});

sourceText.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "Enter") {
    event.preventDefault();
    convertName();
  }
});

convertButton.addEventListener("click", convertName);
copyButton.addEventListener("click", copyResult);

loadCharacterData();