refactor: separate React views, Redux snapshots and Three.js runtime

2026-10-28 12:26:40 +03:30
parent 6bd9b17173
commit d0da416923
77 changed files with 4941 additions and 3723 deletions
@@ -0,0 +1,72 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+/** @typedef {{nodes:object,actions:object}} BriefingPanelProps */
+/** Presents the BriefingPanel view using plain models and semantic native elements.
+ * @param {BriefingPanelProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function BriefingPanel({ nodes, actions }) {
+  return (
+    <>
+      <GameNode as="section" id="briefing" model={nodes['briefing']}>
+        <div className="brief-map">
+          <GameNode as="canvas" id="iran" model={nodes['iran']} />
+        </div>
+        <div className="brief-panel">
+          <img
+            className="brief-robot"
+            src="./robot/front.webp"
+            alt="روبات راهنمای روبات مارکت"
+            width="136"
+            height="223"
+          />
+          <small className="tag">{'عملیات ۰۱ · خراسان رضوی'}</small>
+          <h1>{'عملیات مشهد'}</h1>
+          <p className="sub">{'روبات مارکت · شکار دستگاه‌های وندینگ'}</p>
+          <GameNode
+            as="pre"
+            id="brief-text"
+            aria-live="polite"
+            model={nodes['brief-text']}
+          ></GameNode>
+          <GameNode
+            as="button"
+            id="start-mission"
+            type="button"
+            model={nodes['start-mission']}
+            onAction={() => actions.emit('start-mission')}
+          >
+            {'شروع عملیات'}
+          </GameNode>
+          <div className="brief-actions">
+            <GameNode
+              as="button"
+              id="real-mode"
+              type="button"
+              className="ghost"
+              model={nodes['real-mode']}
+              onAction={() => actions.emit('real-mode')}
+            >
+              {'📍 بازی در دنیای واقعی (GPS)'}
+            </GameNode>
+            <GameNode
+              as="button"
+              id="install"
+              type="button"
+              className="ghost"
+              hidden
+              model={nodes['install']}
+              onAction={() => actions.emit('install')}
+            >
+              {'⬇ نصب بازی روی گوشی'}
+            </GameNode>
+          </div>
+          <p className="keys">
+            {
+              'حرکت: W A S D · دویدن: Shift · دوربین: ماوس · سوار و پیاده شدن: F · خرید: E · نقشه: M'
+            }
+          </p>
+        </div>
+      </GameNode>
+    </>
+  );
+}