73 lines
2.5 KiB
React
73 lines
2.5 KiB
React
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>
|
|
</>
|
|
);
|
|
}
|