d9404a31-1970-4e79-ac9a-f4f9db60350b

2026-06-23 12:47:49 +00:00
parent e193530f24
commit f73b96026c
101 changed files with 12685 additions and 2 deletions
@@ -0,0 +1,221 @@
+"use client";
+// 回响星核 / Echo Nexus — 游戏主入口
+import { useState, useEffect } from "react";
+import { StarfieldCanvas } from "@/components/game/StarfieldCanvas";
+import { ResourceBar } from "@/components/game/ResourceBar";
+import { CrystalOrb } from "@/components/game/CrystalOrb";
+import { DecodePanel } from "@/components/game/DecodeArray";
+import { TechTree } from "@/components/game/TechTree";
+import { Codex } from "@/components/game/Codex";
+import { PrestigeDialog } from "@/components/game/PrestigeDialog";
+import { SettingsDialog } from "@/components/game/SettingsDialog";
+import { useGameLoop } from "@/hooks/useGameLoop";
+import { useGameStore } from "@/store/gameStore";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import {
+  Settings,
+  RotateCcw,
+  Sparkles,
+  Cpu,
+  BookOpen,
+  BarChart3,
+  Github,
+} from "lucide-react";
+import { TECH_TREE, FRAGMENTS, formatNum } from "@/lib/game/config";
+
+export default function Page() {
+  useGameLoop();
+  const [prestigeOpen, setPrestigeOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  const contact = useGameStore((s) => s.contact);
+  const totalDecoded = useGameStore((s) => s.totalDecoded);
+  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
+  const ascensions = useGameStore((s) => s.ascensions);
+  const ownedTech = useGameStore((s) => s.tech);
+  const ownedFragments = useGameStore((s) => s.fragments);
+  const crystals = useGameStore((s) => s.crystals);
+
+  // 挂载检测：避免持久化 store 在 SSR/CSR 间产生 hydration 不一致
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true);
+  }, []);
+
+  // 防止 SSR/CSR 不一致
+  if (!mounted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[#050410] text-muted-foreground">
+        <div className="animate-pulse">唤醒回响中…</div>
+      </div>
+    );
+  }
+
+  const ownedTechCount = Object.values(ownedTech).filter((v) => v > 0).length;
+  const ownedFragCount = Object.values(ownedFragments).filter(Boolean).length;
+  const canPrestige = contact >= 100;
+
+  // 目标提示
+  let goal = "点击中央晶体发起脉冲，累积记忆晶体";
+  if (totalDecoded === 0 && crystals >= 5) {
+    goal = "右侧「待解码晶体」点击一颗晶体，开始解码";
+  } else if (totalDecoded > 0 && ownedTechCount === 0) {
+    goal = "用洞见解锁技术树，提升产能";
+  } else if (totalDecoded > 0 && ownedFragCount < FRAGMENTS.length) {
+    goal = `继续解码，拼凑记忆图谱（${ownedFragCount}/${FRAGMENTS.length}）`;
+  }
+  if (canPrestige) goal = "✦ 接触进度已满，可发起飞升进入新周目";
+
+  return (
+    <div className="relative min-h-screen flex flex-col bg-[#050410] text-foreground overflow-x-hidden">
+      {/* 星空背景 */}
+      <StarfieldCanvas className="fixed inset-0 w-full h-full -z-10" />
+
+      {/* 顶部 Header */}
+      <header className="sticky top-0 z-30 px-3 sm:px-5 pt-3 pb-2">
+        <div className="flex items-center gap-3 mb-2.5">
+          <div className="flex items-center gap-2.5">
+            <div className="relative h-9 w-9">
+              <div className="absolute inset-0 rounded-full bg-gradient-to-br from-emerald-400 via-fuchsia-500 to-rose-400 blur-md opacity-60" />
+              <div className="absolute inset-1 rounded-full bg-[#050410] flex items-center justify-center">
+                <Sparkles className="h-4 w-4 text-fuchsia-300" />
+              </div>
+            </div>
+            <div className="leading-tight">
+              <h1 className="text-base sm:text-lg font-bold text-gradient">回响星核</h1>
+              <p className="text-[9px] sm:text-[10px] text-muted-foreground/70 -mt-0.5 tracking-wider">
+                ECHO NEXUS · v0.1
+              </p>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-1.5">
+            {canPrestige && (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setPrestigeOpen(true)}
+                className="border-fuchsia-400/50 text-fuchsia-200 hover:bg-fuchsia-500/10 h-8 px-2.5"
+              >
+                <RotateCcw className="h-3.5 w-3.5 mr-1" />
+                飞升
+              </Button>
+            )}
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => setSettingsOpen(true)}
+              className="h-8 w-8"
+              aria-label="设置"
+            >
+              <Settings className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <ResourceBar onPrestige={() => setPrestigeOpen(true)} />
+      </header>
+
+      {/* 主体 */}
+      <main className="flex-1 px-3 sm:px-5 pb-3 min-h-0">
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr_minmax(360px,420px)] gap-3 h-full">
+          {/* 左侧：脉冲晶体 */}
+          <section className="glass rounded-2xl p-4 sm:p-6 flex flex-col items-center justify-center min-h-[420px] relative overflow-hidden">
+            {/* 装饰光圈 */}
+            <div className="pointer-events-none absolute -top-20 -left-20 h-60 w-60 rounded-full bg-emerald-500/10 blur-3xl" />
+            <div className="pointer-events-none absolute -bottom-20 -right-20 h-60 w-60 rounded-full bg-fuchsia-500/10 blur-3xl" />
+            <CrystalOrb />
+          </section>
+
+          {/* 右侧：解码 + 标签面板 */}
+          <section className="flex flex-col gap-3 min-h-0">
+            {/* 解码面板 */}
+            <div className="glass rounded-2xl p-4 flex-1 min-h-[360px] max-h-[560px]">
+              <DecodePanel />
+            </div>
+            {/* 标签面板：技术 / 图谱 / 统计 */}
+            <div className="glass rounded-2xl p-3 min-h-[280px] max-h-[380px]">
+              <Tabs defaultValue="tech" className="h-full flex flex-col">
+                <TabsList className="grid grid-cols-3 h-8 bg-black/30">
+                  <TabsTrigger value="tech" className="text-xs gap-1">
+                    <Cpu className="h-3 w-3" />
+                    技术
+                  </TabsTrigger>
+                  <TabsTrigger value="codex" className="text-xs gap-1">
+                    <BookOpen className="h-3 w-3" />
+                    图谱
+                  </TabsTrigger>
+                  <TabsTrigger value="stats" className="text-xs gap-1">
+                    <BarChart3 className="h-3 w-3" />
+                    统计
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="tech" className="flex-1 mt-2 min-h-0 data-[state=active]:flex data-[state=active]:flex-col">
+                  <TechTree />
+                </TabsContent>
+                <TabsContent value="codex" className="flex-1 mt-2 min-h-0 data-[state=active]:flex data-[state=active]:flex-col">
+                  <Codex />
+                </TabsContent>
+                <TabsContent value="stats" className="flex-1 mt-2 min-h-0">
+                  <StatsPanel />
+                </TabsContent>
+              </Tabs>
+            </div>
+          </section>
+        </div>
+      </main>
+
+      {/* 底部 Footer */}
+      <footer className="sticky bottom-0 z-20 mt-auto px-3 sm:px-5 pb-2 pt-1">
+        <div className="glass rounded-xl px-3 py-2 flex items-center gap-2 text-xs">
+          <span className="text-fuchsia-300">▶</span>
+          <span className="text-muted-foreground flex-1 truncate">{goal}</span>
+          <span className="hidden sm:inline text-muted-foreground/60">|</span>
+          <span className="hidden sm:inline text-muted-foreground/70">
+            产能 {formatNum(crystalsPerSec)}/s
+          </span>
+          <a
+            href="https://git.atdunbg.xyz/Super_Z/echo-nexus"
+            target="_blank"
+            rel="noreferrer"
+            className="text-muted-foreground/60 hover:text-foreground transition ml-1"
+            aria-label="仓库"
+          >
+            <Github className="h-3.5 w-3.5" />
+          </a>
+        </div>
+      </footer>
+
+      <PrestigeDialog open={prestigeOpen} onOpenChange={setPrestigeOpen} />
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+    </div>
+  );
+}
+
+function StatsPanel() {
+  const s = useGameStore();
+  const rows = [
+    { label: "累计解码晶体", value: `${s.totalDecoded} 颗` },
+    { label: "飞升周目", value: `${s.ascensions}` },
+    { label: "持有蓝图", value: `${s.blueprints.length} / 6` },
+    { label: "已学技术", value: `${Object.values(s.tech).filter((v) => v > 0).length} / ${TECH_TREE.length}` },
+    { label: "已获碎片", value: `${Object.values(s.fragments).filter(Boolean).length} / ${FRAGMENTS.length}` },
+    { label: "接触进度", value: `${s.contact.toFixed(1)}%` },
+    { label: "晶体产能", value: `${s.crystalsPerSec.toFixed(2)} /s` },
+    { label: "仓库上限", value: `${formatNum(s.crystalCap)}` },
+    { label: "洞见倍率", value: `×${s.insightMult.toFixed(2)}` },
+  ];
+  return (
+    <div className="grid grid-cols-2 gap-1.5 text-xs">
+      {rows.map((r) => (
+        <div
+          key={r.label}
+          className="flex items-center justify-between rounded-md bg-black/25 border border-white/5 px-2 py-1.5"
+        >
+          <span className="text-muted-foreground">{r.label}</span>
+          <span className="font-mono text-foreground">{r.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}