feat:add game!

src/lib/components/CenterStage.svelte

@@ -5,6 +5,7 @@
   import { onMount } from "svelte";
   import { fly } from "svelte/transition";
   import ConfigPanel from "$lib/components/ConfigPanel.svelte";
+  import NeonBreakoutArena from "$lib/components/NeonBreakoutArena.svelte";
   import PressureMatrixViewer from "$lib/components/PressureMatrixViewer.svelte";
   import SignalChart from "$lib/components/SignalChart.svelte";
   import SummaryCurve from "$lib/components/SummaryCurve.svelte";
@@ -12,12 +13,14 @@
     HudColorMapOption,
     HudSignalPanel,
     HudSummary,
+    LocaleCode,
     PressureColorMapPreset,
     StageStatusTone
   } from "$lib/types/hud";
 
   export let title = "";
   export let hint = "";
+  export let locale: LocaleCode = "zh-CN";
   export let statusText = "";
   export let statusTone: StageStatusTone = "idle";
   export let leftPanels: HudSignalPanel[] = [];
@@ -54,6 +57,7 @@
   export let replayProgress = 0;
   export let replayFileName = "";
   export let replayFrameInfo = "";
+  export let showPrecisionTestPanel = false;
 
   let stagePlaneEl: HTMLDivElement | undefined;
   let topOverlayEl: HTMLDivElement | undefined;
@@ -81,6 +85,8 @@
   $: replaySide = summarySide === "left" ? "right" : "left";
   $: replayToggleButtonText = replayIsPlaying ? replayPauseLabel : replayPlayLabel;
   $: replayProgressPercent = Math.round(Math.min(1, Math.max(0, replayProgress)) * 100);
+  $: splitMatrixTitle = locale === "zh-CN" ? "数字矩阵" : "Matrix";
+  $: splitMatrixHint = locale === "zh-CN" ? "实时压力数据 / 数字矩阵" : "Live pressure matrix";
 
   function toPxNumber(rawValue: string): number {
     const value = Number.parseFloat(rawValue);
@@ -181,31 +187,70 @@
       bind:this={stagePlaneEl}
       style="--panel-zone-top-dyn: {panelZoneTopPx}px; --rail-scale-left: {leftRailScale}; --rail-scale-right: {rightRailScale};"
     >
-      <div class="stage-top-overlay" bind:this={topOverlayEl}>
-        <div class="stage-meta">
-          <p class="meta-label">WebGL2 Stage</p>
-          <h2>{title}</h2>
-          <p class="meta-hint">{hint}</p>
+      {#if !showPrecisionTestPanel}
+        <div class="stage-top-overlay" bind:this={topOverlayEl}>
+          <div class="stage-meta">
+            <p class="meta-label">WebGL2 Stage</p>
+            <h2>{title}</h2>
+            <p class="meta-hint">{hint}</p>
+          </div>
+          <p class="runtime-status" class:is-ok={statusTone === "ok"} class:is-warn={statusTone === "warn"}>
+            {statusText}
+          </p>
         </div>
-        <p class="runtime-status" class:is-ok={statusTone === "ok"} class:is-warn={statusTone === "warn"}>
-          {statusText}
-        </p>
-      </div>
+      {/if}
 
-      <div class="canvas-wrap">
-        {#key `${matrixRows}x${matrixCols}:${colorMapPreset}`}
-          <PressureMatrixViewer
-            {pressureMatrix}
-            {matrixRows}
-            {matrixCols}
-            {rangeMin}
-            {rangeMax}
-            {colorMapPreset}
-          />
-        {/key}
-      </div>
+      {#if showPrecisionTestPanel}
+        <div class="split-game-wrap">
+          <section class="split-panel split-matrix-panel">
+            <header class="split-panel-head">
+              <p>{splitMatrixTitle}</p>
+              <span>{splitMatrixHint}</span>
+            </header>
+            <div class="split-panel-body">
+              {#key `${matrixRows}x${matrixCols}:${colorMapPreset}:split`}
+                <PressureMatrixViewer
+                  {pressureMatrix}
+                  {matrixRows}
+                  {matrixCols}
+                  {rangeMin}
+                  {rangeMax}
+                  {colorMapPreset}
+                  showStatsPanel={true}
+                />
+              {/key}
+            </div>
+          </section>
 
-      {#if showConfigPanel}
+          <section class="split-panel split-breakout-panel">
+            <NeonBreakoutArena
+              {locale}
+              {pressureMatrix}
+              {matrixRows}
+              {matrixCols}
+              {rangeMin}
+              {rangeMax}
+              {colorMapPreset}
+            />
+          </section>
+        </div>
+      {:else}
+        <div class="canvas-wrap">
+          {#key `${matrixRows}x${matrixCols}:${colorMapPreset}`}
+            <PressureMatrixViewer
+              {pressureMatrix}
+              {matrixRows}
+              {matrixCols}
+              {rangeMin}
+              {rangeMax}
+              {colorMapPreset}
+              showStatsPanel={true}
+            />
+          {/key}
+        </div>
+      {/if}
+
+      {#if showConfigPanel && !showPrecisionTestPanel}
         <div class="config-panel-wrap">
           <ConfigPanel
             bind:matrixRows
@@ -230,71 +275,73 @@
         </div>
       {/if}
 
-      <div class="panel-zone" bind:this={panelZoneEl}>
-        <aside class="side-rail left-rail">
-          <div class="rail-stack" bind:this={leftStackEl}>
-            {#each leftPanels as panel, index (panel.id)}
-              <div
-                class="panel-motion-shell"
-                animate:flip={{ duration: 280 }}
-                in:fly={{ x: -180, duration: 340, opacity: 0.08, easing: cubicOut }}
-                out:fly={{ x: -180, duration: 280, opacity: 0.06, easing: cubicIn }}
-              >
-                <SignalChart {panel} panelIndex={index} />
-              </div>
-            {/each}
+      {#if !showPrecisionTestPanel}
+        <div class="panel-zone" bind:this={panelZoneEl}>
+          <aside class="side-rail left-rail">
+            <div class="rail-stack" bind:this={leftStackEl}>
+              {#each leftPanels as panel, index (panel.id)}
+                <div
+                  class="panel-motion-shell"
+                  animate:flip={{ duration: 280 }}
+                  in:fly={{ x: -180, duration: 340, opacity: 0.08, easing: cubicOut }}
+                  out:fly={{ x: -180, duration: 280, opacity: 0.06, easing: cubicIn }}
+                >
+                  <SignalChart {panel} panelIndex={index} />
+                </div>
+              {/each}
 
-            {#if summary.points.length > 0 && summarySide === "left"}
-              <div
-                class="panel-motion-shell"
-                in:fly={{ x: -180, duration: 340, opacity: 0.08, easing: cubicOut }}
-                out:fly={{ x: -180, duration: 280, opacity: 0.06, easing: cubicIn }}
-              >
-                <SummaryCurve
-                  {summary}
-                  xValues={summary.xValues ?? null}
-                  yValues={summary.points}
-                  side="left"
-                  panelIndex={leftPanels.length}
-                />
-              </div>
-            {/if}
-          </div>
-        </aside>
+              {#if summary.points.length > 0 && summarySide === "left"}
+                <div
+                  class="panel-motion-shell"
+                  in:fly={{ x: -180, duration: 340, opacity: 0.08, easing: cubicOut }}
+                  out:fly={{ x: -180, duration: 280, opacity: 0.06, easing: cubicIn }}
+                >
+                  <SummaryCurve
+                    {summary}
+                    xValues={summary.xValues ?? null}
+                    yValues={summary.points}
+                    side="left"
+                    panelIndex={leftPanels.length}
+                  />
+                </div>
+              {/if}
+            </div>
+          </aside>
 
-        <aside class="side-rail right-rail">
-          <div class="rail-stack" bind:this={rightStackEl}>
-            {#each rightPanels as panel, index (panel.id)}
-              <div
-                class="panel-motion-shell"
-                animate:flip={{ duration: 280 }}
-                in:fly={{ x: 180, duration: 340, opacity: 0.08, easing: cubicOut }}
-                out:fly={{ x: 180, duration: 280, opacity: 0.06, easing: cubicIn }}
-              >
-                <SignalChart {panel} panelIndex={index} />
-              </div>
-            {/each}
+          <aside class="side-rail right-rail">
+            <div class="rail-stack" bind:this={rightStackEl}>
+              {#each rightPanels as panel, index (panel.id)}
+                <div
+                  class="panel-motion-shell"
+                  animate:flip={{ duration: 280 }}
+                  in:fly={{ x: 180, duration: 340, opacity: 0.08, easing: cubicOut }}
+                  out:fly={{ x: 180, duration: 280, opacity: 0.06, easing: cubicIn }}
+                >
+                  <SignalChart {panel} panelIndex={index} />
+                </div>
+              {/each}
 
-            {#if summary.points.length > 0 && summarySide === "right"}
-              <div
-                class="panel-motion-shell"
-                in:fly={{ x: 180, duration: 340, opacity: 0.08, easing: cubicOut }}
-                out:fly={{ x: 180, duration: 280, opacity: 0.06, easing: cubicIn }}
-              >
-                <SummaryCurve
-                  {summary}
-                  xValues={summary.xValues ?? null}
-                  yValues={summary.points}
-                  side="right"
-                  panelIndex={rightPanels.length}
-                />
-              </div>
-            {/if}
-          </div>
-        </aside>
-      </div>
+              {#if summary.points.length > 0 && summarySide === "right"}
+                <div
+                  class="panel-motion-shell"
+                  in:fly={{ x: 180, duration: 340, opacity: 0.08, easing: cubicOut }}
+                  out:fly={{ x: 180, duration: 280, opacity: 0.06, easing: cubicIn }}
+                >
+                  <SummaryCurve
+                    {summary}
+                    xValues={summary.xValues ?? null}
+                    yValues={summary.points}
+                    side="right"
+                    panelIndex={rightPanels.length}
+                  />
+                </div>
+              {/if}
+            </div>
+          </aside>
+        </div>
+      {/if}
 
-      {#if replayHasData}
+      {#if replayHasData && !showPrecisionTestPanel}
         <aside class="replay-floating-panel" class:is-left={replaySide === "left"} class:is-right={replaySide === "right"}>
           <div class="replay-panel-head">
             <div class="replay-panel-title-group">
@@ -332,9 +379,11 @@
         </aside>
       {/if}
 
-      <div class="stage-bottom-overlay">
-        <slot />
-      </div>
+      {#if !showPrecisionTestPanel}
+        <div class="stage-bottom-overlay">
+          <slot />
+        </div>
+      {/if}
     </div>
   </article>
 </section>
@@ -463,6 +512,70 @@
     max-inline-size: min(24rem, 40vw);
   }
 
+  .split-game-wrap {
+    position: absolute;
+    inset: clamp(0.46rem, 1vw, 0.82rem);
+    z-index: 6;
+    display: grid;
+    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
+    gap: clamp(0.45rem, 1vw, 0.9rem);
+  }
+
+  .split-panel {
+    position: relative;
+    min-block-size: 0;
+    overflow: hidden;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.26);
+    border-radius: 0.58rem;
+    background:
+      linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.84), rgb(var(--hud-surface-deep-rgb) / 0.9)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.06), transparent 56%);
+    box-shadow:
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.07),
+      0 0 20px rgb(var(--hud-glow-rgb) / 0.08);
+  }
+
+  .split-panel-head {
+    position: absolute;
+    top: 0.42rem;
+    left: 0.52rem;
+    z-index: 5;
+    display: grid;
+    gap: 0.1rem;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .split-panel-head p {
+    margin: 0;
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
+    font-size: 0.62rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  .split-panel-head span {
+    color: rgb(var(--hud-text-dim-rgb) / 0.82);
+    font-size: 0.52rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  .split-panel-body {
+    position: absolute;
+    inset: 0;
+  }
+
+  .split-matrix-panel :global(.viewer-controls) {
+    left: clamp(0.7rem, 1.7vw, 1.15rem);
+    top: clamp(3.8rem, 8.8vh, 4.9rem);
+    max-inline-size: min(13.2rem, 65%);
+  }
+
+  .split-matrix-panel :global(.stats-panel) {
+    padding: 0.62rem 0.68rem 0.72rem;
+  }
+
   .panel-zone {
     position: absolute;
     top: var(--panel-zone-top-dyn, var(--panel-zone-top));
@@ -744,6 +857,10 @@
     .replay-floating-panel {
       inline-size: min(var(--rail-width), 20.8rem);
     }
+
+    .split-game-wrap {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
   }
 
   @media (max-height: 900px) {
@@ -787,5 +904,10 @@
       right: calc(var(--rail-edge-inset) + 0.1rem);
       inline-size: auto;
     }
+
+    .split-game-wrap {
+      grid-template-columns: 1fr;
+      grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.08fr);
+    }
   }
 </style>

src/lib/components/PressureMatrixViewer.svelte

@@ -28,6 +28,7 @@
   export let rangeMin = 0;
   export let rangeMax = 16000;
   export let colorMapPreset: PressureColorMapPreset = "emerald";
+  export let showStatsPanel = true;
 
   let viewerEl: HTMLDivElement | undefined;
   let canvasEl: HTMLCanvasElement | undefined;
@@ -608,26 +609,28 @@
   <div class="viewer-vignette" aria-hidden="true"></div>
   <div class="viewer-noise" aria-hidden="true"></div>
 
-  <div class="viewer-controls">
-    <section class="stats-panel" aria-label="Pressure Summary">
-      <p class="stats-label">Pressure Matrix</p>
-      <div class="stats-grid">
-        <article class="stats-card stats-card-wide">
-          <span class="stats-key">Total Pressure</span>
-          <strong class="stats-value">{stats.total.toFixed(0)}</strong>
-        </article>
-        <article class="stats-card">
-          <span class="stats-key">Max</span>
-          <strong class="stats-value">{stats.max.toFixed(0)}</strong>
-        </article>
-        <article class="stats-card">
-          <span class="stats-key">Avg</span>
-          <strong class="stats-value">{stats.avg.toFixed(0)}</strong>
-        </article>
-      </div>
-      <p class="stats-note">{statsNote}</p>
-    </section>
-  </div>
+  {#if showStatsPanel}
+    <div class="viewer-controls">
+      <section class="stats-panel" aria-label="Pressure Summary">
+        <p class="stats-label">Pressure Matrix</p>
+        <div class="stats-grid">
+          <article class="stats-card stats-card-wide">
+            <span class="stats-key">Total Pressure</span>
+            <strong class="stats-value">{stats.total.toFixed(0)}</strong>
+          </article>
+          <article class="stats-card">
+            <span class="stats-key">Max</span>
+            <strong class="stats-value">{stats.max.toFixed(0)}</strong>
+          </article>
+          <article class="stats-card">
+            <span class="stats-key">Avg</span>
+            <strong class="stats-value">{stats.avg.toFixed(0)}</strong>
+          </article>
+        </div>
+        <p class="stats-note">{statsNote}</p>
+      </section>
+    </div>
+  {/if}
 </div>
 
 <style>

src/routes/+page.svelte

@@ -204,6 +204,7 @@
   let isWindowMaximized = false;
   let activeConfigLinkId = "stream-on";
   let isConfigPanelOpen = false;
+  let isPrecisionTestOpen = false;
   let hasSignalData = false;
   let signalPanels: HudSignalPanel[] = buildInactivePanels();
   let summary: HudSummary = buildEmptySummary();
@@ -232,7 +233,7 @@
   let fileExplorerFileName = "";
 
   $: uiCopy = copyByLocale[locale];
-  $: configLinks = buildConfigLinks(locale, activeConfigLinkId, isConfigPanelOpen);
+  $: configLinks = buildConfigLinks(locale, activeConfigLinkId, isConfigPanelOpen, isPrecisionTestOpen);
   $: stageStatusText = webglStatusTone === "ok" ? uiCopy.runtimeReady : uiCopy.runtimeFallback;
   $: leftSignalPanels = signalPanels.filter((panel) => panel.side === "left");
   $: rightSignalPanels = signalPanels.filter((panel) => panel.side === "right");
@@ -970,19 +971,26 @@
     });
   }
 
-  function buildConfigLinks(currentLocale: LocaleCode, activeId: string, isSettingsOpen: boolean): HudConfigLink[] {
+  function buildConfigLinks(
+    currentLocale: LocaleCode,
+    activeId: string,
+    isSettingsOpen: boolean,
+    isPrecisionOpen: boolean
+  ): HudConfigLink[] {
     const labels =
       currentLocale === "zh-CN"
         ? {
             streamOn: "打开",
             streamOff: "关闭",
             calibrate: "校准",
+            precisionTest: "游戏",
             settings: "参数"
           }
         : {
             streamOn: "Open",
             streamOff: "Close",
             calibrate: "Calib",
+            precisionTest: "Game",
             settings: "Setup"
           };
 
@@ -1005,6 +1013,12 @@
         tone: "cyan",
         active: activeId === "calibrate"
       },
+      {
+        id: "precision-test",
+        label: labels.precisionTest,
+        tone: "lime",
+        active: isPrecisionOpen
+      },
       {
         id: "settings",
         label: labels.settings,
@@ -1443,11 +1457,19 @@
   }
 
   function handleConfigLink(event: CustomEvent<string>): void {
+    if (event.detail === "precision-test") {
+      isPrecisionTestOpen = !isPrecisionTestOpen;
+      isConfigPanelOpen = false;
+      return;
+    }
+
     if (event.detail === "settings") {
+      isPrecisionTestOpen = false;
       isConfigPanelOpen = !isConfigPanelOpen;
       return;
     }
 
+    isPrecisionTestOpen = false;
     isConfigPanelOpen = false;
     activeConfigLinkId = event.detail;
     console.info("[hud] config link clicked:", event.detail);
@@ -1562,6 +1584,7 @@
     />
 
     <CenterStage
+      {locale}
       bind:matrixRows
       bind:matrixCols
       bind:rangeMin
@@ -1599,6 +1622,7 @@
       rightPanels={rightSignalPanels}
       {pressureMatrix}
       showConfigPanel={isConfigPanelOpen}
+      showPrecisionTestPanel={isPrecisionTestOpen}
       {summary}
       on:replaytoggle={handleReplayToggle}
       on:replaystop={handleReplayStop}
@@ -1607,14 +1631,16 @@
       on:replayclose={handleReplayClose}
       on:configclose={() => (isConfigPanelOpen = false)}
     >
-      <section class="range-scale" aria-label="Signal Range">
-        <p class="range-label">Range</p>
-        <div class="range-track">
-          {#each rangeTicks as tick}
-            <span class="range-tick">{tick}</span>
-          {/each}
-        </div>
-      </section>
+      {#if !isPrecisionTestOpen}
+        <section class="range-scale" aria-label="Signal Range">
+          <p class="range-label">Range</p>
+          <div class="range-track">
+            {#each rangeTicks as tick}
+              <span class="range-tick">{tick}</span>
+            {/each}
+          </div>
+        </section>
+      {/if}
     </CenterStage>
   </div>