feat: embeddable CompanyGame with loader, poster, no-WebGL fallback and SEO
- CompanyGame bundles the store, a branded loader with start-up progress, an optional light poster (Enter the game) and a company-info fallback when WebGL is missing. - startMode prop and ?mode= start straight in a mode; ?poster shows the poster first. - Pixel ratio capped at 1.5 on touch devices and 1.75 on desktop (constants/graphics.js). - Build writes the title, description, Organization JSON-LD and a hidden Persian summary into index.html from the company config. - README explains iframe and component embedding. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -237,6 +237,32 @@ node scripts/fetch-imagery.mjs
|
||||
|
||||
**مجوز:** استفادهٔ تجاری و میزبانی نسخهای از تصاویر Esri نیاز به مجوز مناسب از Esri دارد. شرایط را با Esri بررسی کنید. نام منبع در پایین صفحهٔ بازی نمایش داده میشود.
|
||||
|
||||
## جاسازی در سایت شرکت
|
||||
|
||||
بازی کل صفحه را میگیرد، پس بهترین راه جاسازی یک صفحهٔ جدا یا یک `iframe` است:
|
||||
|
||||
```html
|
||||
<iframe src="https://robotmarkets.ir/game/?poster&mode=about" title="بازی روبات مارکت"
|
||||
style="width:100%;height:100dvh;border:0" allow="fullscreen; geolocation; camera"></iframe>
|
||||
```
|
||||
|
||||
- `?poster`: اول یک پوستر سبک با دکمهٔ «ورود به بازی» نشان داده میشود و بازی سهبعدی فقط با کلیک بارگذاری میشود. این برای صفحهٔ اصلی سایت مناسب است.
|
||||
- `?mode=real|offline|about|products`: بازی بدون صفحهٔ شروع، مستقیم در همان حالت شروع میشود. حالت دنیای واقعی همچنان اول پیام ایمنی را نشان میدهد.
|
||||
|
||||
در یک پروژهٔ React همین کار با کامپوننت انجام میشود:
|
||||
|
||||
```jsx
|
||||
import { CompanyGame } from '@/pages/game/CompanyGame.jsx';
|
||||
|
||||
<CompanyGame startMode="products" showPoster />;
|
||||
```
|
||||
|
||||
- `CompanyGame` استور Redux، صفحهٔ بارگذاری با نوار پیشرفت، پوستر و حالت بدون WebGL را خودش دارد.
|
||||
- اگر مرورگر WebGL نداشته باشد، بهجای بازی پیام کوتاه و اطلاعات شرکت (معرفی، تماس و آدرس) نشان داده میشود.
|
||||
- رنگها و اطلاعات برند از `src/config/company.js` میآیند، نه از props، چون مدلهای سهبعدی هم از همان رنگها ساخته میشوند.
|
||||
- عنوان صفحه، توضیح، دادهٔ ساختیافتهٔ Organization و یک خلاصهٔ فارسی پنهان (برای موتورهای جستوجو) هنگام ساخت از همان فایل در `index.html` نوشته میشوند (`src/utils/seoSummary.js`).
|
||||
- برای کارایی: صفحهٔ بازی و Three.js یک بستهٔ جدا هستند، تراکم پیکسل روی گوشی ۱٫۵ و روی دسکتاپ ۱٫۷۵ محدود است، و هنگام بستن بازی همهٔ هندسهها، متریالها، بافتها، تایمرها و حسگرها آزاد میشوند.
|
||||
|
||||
## ساختار
|
||||
|
||||
- `src/config/company.js`: همهٔ اطلاعات شرکت در یک جا: نام، شعار، رنگهای برند (رنگ اصلی `#00a693` و طیف آن)، آدرس، تلفن، ایمیل، شبکههای اجتماعی، دربارهما و فهرست محصولات. مقدارهای `TODO(company)` جایگزینشدنیاند.
|
||||
|
||||
Reference in New Issue
Block a user