Deploy: v0.5.1 static export

- New: Tutorial system (7-step onboarding with spotlight + action detection) - UI: ResourceBar spacing optimization (gap, dividers, tabular-nums) - UI: SettingsDialog adds tutorial replay + online play link - Anim: tutorial pulse + pop-in keyframes
2026-06-23 16:34:00 +00:00
parent 084387174b
commit 00a46a0bf9
12 changed files with 531 additions and 40 deletions
@@ -0,0 +1,103 @@
+// 回响星核 / Echo Nexus — 新手教程系统
+// 首次访问引导，分步骤高亮核心元素，可跳过/重看
+
+export interface TutorialStep {
+  id: string;
+  // 目标元素的 data-tut 属性值（用于高亮定位）
+  target?: string;
+  // 提示放置位置：auto | top | bottom | left | right
+  placement?: "auto" | "top" | "bottom" | "left" | "right";
+  title: string;
+  body: string;
+  // 完成此步骤的预期动作（可选，用于"做了才下一步"）
+  // 不设则点"下一步"即可
+  expectAction?: "pulse" | "decode-start" | "tech-buy" | "expedition-start";
+}
+
+export const TUTORIAL_STEPS: TutorialStep[] = [
+  {
+    id: "welcome",
+    placement: "bottom",
+    title: "✦ 欢迎来到回响星核",
+    body: "你是一台苏醒在深空遗迹中的自治无人机。在这里，你需要采矿、解码以太文明遗留的记忆晶体，逐步拼凑出一段跨越维度的叙事。\n\n本引导将带你认识 5 个核心玩法，约 1 分钟。可随时跳过。",
+  },
+  {
+    id: "crystal",
+    target: "crystal-orb",
+    placement: "right",
+    title: "① 脉冲扫描 · 采矿",
+    body: "点击中央的「记忆晶体」发起脉冲扫描，获得记忆晶体。\n\n连续点击可触发连击，连击越高单次产出越多。无人机也会每秒自动采集（+0.4/s 起）。",
+    expectAction: "pulse",
+  },
+  {
+    id: "decode",
+    target: "decode-panel",
+    placement: "left",
+    title: "② 谐振序列 · 解码",
+    body: "记忆晶体存满后，点击右侧「待解码晶体」开启谐振谜题：按目标色序依次点击相邻同色节点重建回路。\n\n解码成功 → 获得技术洞见 + 记忆碎片（叙事片段）。这是游戏的核心解谜层。",
+    expectAction: "decode-start",
+  },
+  {
+    id: "tech",
+    target: "tab-tech",
+    placement: "top",
+    title: "③ 技术树 · 成长",
+    body: "用「技术洞见」在「技术」标签升级 4 大分支：产能 / 解码 / 仓库 / 探险。\n\n每个分支 3 级，策略性地分配洞见是关键。",
+    expectAction: "tech-buy",
+  },
+  {
+    id: "expedition",
+    target: "tab-expedition",
+    placement: "top",
+    title: "④ 遗迹探险 · 肉鸽",
+    body: "累积足够实力后，「探险」标签可深入遗迹：6 种节点（战斗/宝藏/抉择/解谜/休整/BOSS）程序化路径，有生命系统，失败保留奖励。\n\n这是放置之外的主动玩法层。",
+    expectAction: "expedition-start",
+  },
+  {
+    id: "prestige",
+    target: "prestige-btn",
+    placement: "bottom",
+    title: "⑤ 飞升 · 多周目",
+    body: "「接触进度」满 100% 后可飞升：重置进度，获得永久蓝图加成 + 星图天赋（3 选 1 draft）+ 编年史记录。\n\n多周目叠加，越飞越强。还有每日信标挑战、6 种星潮事件等你探索。",
+  },
+  {
+    id: "done",
+    placement: "bottom",
+    title: "✦ 回响已唤醒",
+    body: "教程结束！后续可在「设置 → 重新查看教程」再次查看。\n\n深空之中，回响永续。祝你考古愉快。",
+  },
+];
+
+const STORAGE_KEY = "echo-nexus-tutorial-v1";
+
+export function hasSeenTutorial(): boolean {
+  if (typeof window === "undefined") return true;
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "1";
+  } catch {
+    return true;
+  }
+}
+
+export function markTutorialSeen() {
+  try {
+    localStorage.setItem(STORAGE_KEY, "1");
+  } catch {
+    /* ignore */
+  }
+}
+
+export function resetTutorial() {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    /* ignore */
+  }
+}
+
+export function restartTutorial() {
+  resetTutorial();
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent("echo-nexus-tutorial-restart"));
+  }
+}