inner-grand

byMohamed Krawia

ازاي تقدر تساعدني

الرئيسية
الرئيسية

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for inner-grand

1. Introduction

inner-grand هي لعبة حرب ودمار تفاعلية تُلعب على المتصفح، مبنية حول جلسات قصيرة: يبدأ اللاعب معركة، يتحكم في أحداث القتال والتدمير، يرى نتيجة الجولة (فوز أو خسارة)، ثم يعيد المحاولة. المنتج موجّه إلى لاعب عربي شاب يريد إحساس "لعبة جامدة" — ضجيج، انفجارات، فوضى ملوّنة، وطاقة عالية فورية — لا محاكاة حرب تكتيكية رصينة.

الجمهور المستهدف هو اللاعب الفرد الذي يفتح اللعبة في المتصفح، يخوض جولة قصيرة، ويحصل على متعة تدمير مبتهجة وواثقة. التجربة مصمّمة لتكون فورية الوصول: لا حساب، لا تسجيل، لا إعدادات معقّدة قبل اللعب.

Page 1 of 17

2. System Overview

inner-grand منتج واجهة أمامية تفاعلية بالكامل يُقدَّم عبر المتصفح. يتكوّن من سطحين: واجهة دخول عامة تشرح اللعبة وتقدّم بدء اللعب، وصفحة لعب يدير فيها اللاعب جلسة المعركة من البداية إلى النتيجة ثم إعادة اللعب.

الفاعلون:

  • لاعب (شخص بشري نشط): يبدأ اللعب، يتحكم في أحداث المعركة والتدمير، يرى نتيجة الجولة، ويعيد المحاولة.

السلوك المقبول: بناء لعبة تفاعلية بموضوع حرب ودمار، بجلسات قصيرة تنتهي بفوز/خسارة ثم إعادة.

الملكية: كلا السطحين مملوك للتطبيق (custom UI)، وكلاهما متاح دون أي متطلّب وصول (access_requirement: none). لا توجد هوية مملوكة للتطبيق ولا جلسات محفوظة ولا مزامنة عبر الأجهزة ضمن النطاق الحالي.

الاستثناءات الضيقة: لا صور حرب واقعية، لا دماء واقعية، لا جنود — التدمير يُصوَّر كتحطم زجاج ملوّن وانفجار حبيبات لامعة. لا حسابات ولا تسجيل دخول. لا لوحات صدارة ولا مشاركة اجتماعية ولا لعب جماعي ضمن النطاق الحالي.

2a. Product Interpretation and Delivery Boundary

inner-grand لعبة متصفح من لاعب واحد، تُسلَّم كواجهة أمامية تفاعلية بالكامل. الوصول إلى كل من الواجهة الرئيسية وصفحة اللعب مفتوح دون تسجيل أو حساب: اللاعب يفتح الرابط ويلعب مباشرة. لا يوجد نظام هوية مملوك للتطبيق، ولا تُحفظ أي حالة لاعب بين الجلسات، ولا توجد أي متطلبات وصول محمية.

الحدود الحالية: جلسة لعب واحدة كاملة — بدء، تحكم في المعركة والتدمير، نتيجة (فوز/خسارة)، إعادة. كل شيء آخر خارج النطاق الحالي.

الحدود المستقبلية: أي توسّع في اللعب الجماعي، أو حفظ التقدّم، أو لوحات الصدارة، أو المحتوى الإضافي يقع خارج النطاق الحالي ولا يُبنى الآن.

Page 2 of 17

2c. Page Content and Component Coverage

الرئيسية

  • المعلومات والحالة: عنوان اللعبة "inner-grand" بخط ضخم يمتد من حافة الشاشة إلى حافتها، وصف موجز لموضوع حرب ودمار، دعوة واضحة لبدء اللعب. لا توجد حالة محمّلة أو فارغة — الصفحة ثابتة المحتوى.
  • الإجراءات الأساسية: زر كبسولي ضخم لبدء اللعب ينقل اللاعب إلى صفحة اللعب.
  • الإجراءات المساندة: لا يوجد — الصفحة سطح دخول بسيط.
  • كيانات المجال: لا شيء — لا بيانات لاعب ولا حالة محفوظة.
  • مسؤوليات المكوّنات:
    • كتلة بصرية مهيمنة: كتلة وردية صلبة (#FF3D9A) بحواف مستديرة ضخمة تشغل 62% من عرض الشاشة على اليمين وتمتد من أعلى إلى أسفل خلفية بنفسجية داكنة (#120A1F).
    • العنوان العملاق: بخط Unbounded 900 بحجم clamp(56px, 12vw, 128px)، يمتد من الحافة اليسرى ويتجاوز حدود الكتلة الوردية، بلون #FFF4FB مع ظل ليموني خلف الحروف.
    • زر البدء: كبسولي ليموني (#C6FF3D بخلفية ليمونية ونص داكن)، قطره 88px على الديسكتوب و64px على الموبايل، مثبّت أسفل الكتلة الوردية.
    • حبيبات blob لامعة: 3-4 حبيبات بحجم 200-500px تتنفس ببطء في الخلفية.
  • الحالات: لا توجد حالات تحميل أو خطأ — الصفحة ثابتة. على الموبايل: الكتلة الوردية تصبح شريطاً أفقياً بعرض كامل في الأعلى، والعنوان يتقلص إلى 56px مع الحفاظ على امتداده من الحافة إلى الحافة.
Page 3 of 17

اللعب

  • المعلومات والحالة: ملعب المعركة، لوحة HUD عائمة في الزوايا الأربع، أشرطة الصحة والطاقة، حالة الجولة الحالية (جارية / فوز / خسارة).
  • الإجراءات الأساسية: بدء جلسة جديدة، الهجوم، التفجير، إعادة اللعب بعد النتيجة.
  • الإجراءات المساندة: لا يوجد — التحكم محصور في أزرار اللعب الأساسية.
  • كيانات المجال: جلسة اللعب (حالة الجولة، نتيجة الجولة)، أشرطة الصحة والطاقة، أهداف التدمير.
  • مسؤوليات المكوّنات:
    • ملعب المعركة: منطقة العرض الرئيسية حيث تحدث أحداث المعركة والتدمير.
    • لوحة HUD عائمة: أربع زوايا مستديرة بحواف 48px، كل زاوية تحمل رقم/مؤشر واحداً بخط Quicksand 700 مع tabular numerals، وخلفية #241238 بشفافية 85% مع blur خفيف.
    • أشرطة الصحة والطاقة: كسوائل داخل أنابيب منحنية، المستطيل منحني قليلاً والسائل داخله يتمايل بحركة موجة بطيئة، واللون يتدرج من الوردي إلى الليموني عند الارتفاع.
    • قوس التحكم السفلي: أزرار اللعب (هجوم/تفجير/إعادة) مرتّبة على منحنى يشبه غطاء جهاز، كل زر كبسولة لامعة بحواف نصف دائرية، تنضغط وتنتفخ عند اللمس بارتداد 0.34,1.56.
    • فقاعات blob لامعة: تطفو ببطء في الخلفية، تتمدد وتنكمش على مدى 8-12 ثانية، وتتحول إلى دوائر انفجار عند الضغط.
  • الحالات:
    • التحميل: انتقال قصير عند بدء جلسة جديدة.
    • الفارغة: لا تنطبق — الجلسة تبدأ فوراً بحالة معركة جارية.
    • النجاح: حالة فوز واضحة مع لمعان ليموني (#C6FF3D) وإتاحة إعادة اللعب.
    • الخطأ: حالة خسارة واضحة مع إتاحة إعادة اللعب.
    • الاسترداد: زر إعادة يعيد اللاعب إلى جلسة جديدة كاملة.
Page 4 of 17

3. Functional Requirements

FR-1 — بناء لعبة تفاعلية بموضوع حرب ودمار

  • As a لاعب I should ألعب لعبة تفاعلية بموضوع حرب ودمار so that أخوض تجربة قتال وتدمير ممتعة.
  • Provenance: explicit
  • Lifecycle: يبدأ اللاعب من الواجهة الرئيسية، ينتقل إلى صفحة اللعب، يتحكم في أحداث المعركة والتدمير، يرى نتيجة الجولة، ثم يعيد اللعب.
  • Observable acceptance: توجد لعبة تفاعلية قابلة للعب في المتصفح بموضوع حرب ودمار، بجلسات قصيرة تنتهي بفوز أو خسارة ثم إعادة.

FR-2 — بدء جلسة لعب جديدة

  • As a لاعب I should أبدأ جلسة لعب جديدة so that أدخل المعركة فوراً.
  • Provenance: required_inference
  • Lifecycle: من الواجهة الرئيسية، يضغط اللاعب زر البدء، فينتقل إلى صفحة اللعب وتبدأ جلسة معركة جديدة بحالة جارية.
  • Observable acceptance: الضغط على زر البدء ينقل اللاعب إلى صفحة اللعب ويبدأ جلسة معركة جديدة بحالة جارية وأشرطة صحة وطاقة ممتلئة.

FR-3 — التحكم في أحداث المعركة والتدمير

  • As a لاعب I should أتحكم في أحداث المعركة والتدمير so that أشن هجمات وأحدث دماراً في الأهداف.
  • Provenance: required_inference
  • Lifecycle: خلال الجلسة الجارية، يضغط اللاعب أزرار الهجوم والتفجير في قوس التحكم السفلي، فتحدث انفجارات وتدمير في ملعب المعركة، وتتغير أشرطة الصحة والطاقة وفقاً لذلك.
  • Observable acceptance: الضغط على أزرار الهجوم والتفجير يُحدث انفجارات مرئية وتدميراً في ملعب المعركة، وتتغير أشرطة الصحة والطاقة استجابةً لذلك.
Page 5 of 17

FR-4 — رؤية نتيجة الجولة

  • As a لاعب I should أرى نتيجة الجولة (فوز أو خسارة) so that أعرف كيف انتهت المعركة.
  • Provenance: required_inference
  • Lifecycle: عند انتهاء شروط الجولة (نفاد الصحة أو تحقيق هدف التدمير)، تظهر حالة النتيجة بوضوح في صفحة اللعب.
  • Observable acceptance: عند انتهاء الجولة تظهر حالة فوز أو خسارة واضحة في صفحة اللعب.

FR-5 — إعادة اللعب

  • As a لاعب I should أعيد اللعب بعد انتهاء الجولة so that أخوض معركة جديدة.
  • Provenance: required_inference
  • Lifecycle: بعد ظهور النتيجة، يضغط اللاعب زر الإعادة في قوس التحكم السفلي، فتبدأ جلسة جديدة كاملة.
  • Observable acceptance: الضغط على زر الإعادة بعد النتيجة يبدأ جلسة معركة جديدة بحالة جارية وأشرطة صحة وطاقة ممتلئة.

4. User Personas

Page 6 of 17

لاعب

سياق المنتج: لاعب عربي شاب يفتح inner-grand في المتصفح بحثاً عن إحساس "لعبة جامدة" — ضجيج، انفجارات، فوضى ملوّنة، وطاقة عالية فورية. يريد متعة تدمير مبتهجة وواثقة، لا محاكاة حرب تكتيكية رصينة.

الهدف الأساسي: خوض تجربة قتال وتدمير ممتعة في جلسات قصيرة، والتحكم في أحداث المعركة، ورؤية نتيجة الجولة، ثم إعادة المحاولة.

المسؤوليات المقبولة: بدء اللعب، التحكم في أحداث المعركة والتدمير، رؤية نتيجة الجولة (فوز/خسارة)، إعادة المحاولة.

المدخلات والقرارات: يقرّر متى يبدأ جلسة جديدة، ومتى يهجم، ومتى يفجّر، ومتى يعيد اللعب بعد النتيجة.

التفاعلات مع المشاركين الآخرين: لا يوجد مشاركون آخرون — اللاعب هو الفاعل البشري الوحيد في المنتج.

النجاح الملحوظ: جلسة لعب كاملة من البداية إلى النتيجة ثم إعادة، مع إحساس فوري بالضجيج والانفجارات والفوضى الملوّنة.

ما يميّز هذا الدور: اللاعب هو المستخدم الوحيد والمسؤول الوحيد عن كل تفاعل بشري في المنتج — لا يوجد تسجيل، لا حساب، لا أدوار أخرى. كل قرار في اللعبة يعود إليه مباشرة.

5. Core User Flows

Page 7 of 17

الرحلة 1: من الواجهة الرئيسية إلى اللعب

  1. السياق: اللاعب يفتح inner-grand في المتصفح لأول مرة.
  2. الإجراء: يرى الواجهة الرئيسية — كتلة وردية صلبة (#FF3D9A) بحواف مستديرة ضخمة على اليمين، عنوان "inner-grand" بخط Unbounded 900 يمتد من حافة الشاشة إلى حافتها ويتجاوز حدود الكتلة الوردية، وحبيبات blob لامعة تتنفس ببطء في الخلفية.
  3. القرار: يقرّر بدء اللعب.
  4. الإجراء: يضغط زر البدء الكبسولي الليموني (#C6FF3D) المثبّت أسفل الكتلة الوردية.
  5. النتيجة: ينتقل إلى صفحة اللعب وتبدأ جلسة معركة جديدة بحالة جارية وأشرطة صحة وطاقة ممتلئة.
  6. الخطوة التالية: يبدأ التحكم في أحداث المعركة.

الرحلة 2: خوض المعركة والتحكم في التدمير

  1. السياق: اللاعب في صفحة اللعب، جلسة معركة جارية.
  2. الإجراء: يرى ملعب المعركة، لوحة HUD عائمة في الزوايا الأربع، أشرطة الصحة والطاقة كسوائل داخل أنابيب منحنية، وقوس التحكم السفلي بأزرار الهجوم والتفجير والإعادة.
  3. القرار: يقرّر الهجوم أو التفجير.
  4. الإجراء: يضغط زر الهجوم أو التفجير في قوس التحكم السفلي — الزر ينضغط وينتفخ بارتداد 0.34,1.56.
  5. النتيجة: تحدث انفجارات لامعة وتدمير في ملعب المعركة، وتتغير أشرطة الصحة والطاقة استجابةً لذلك، وتتحول فقاعات blob إلى دوائر انفجار.
  6. الخطوة التالية: يستمر في الهجوم والتفجير حتى انتهاء الجولة.
Page 8 of 17

الرحلة 3: رؤية النتيجة وإعادة اللعب

  1. السياق: اللاعب في صفحة اللعب، الجولة وصلت إلى نهايتها (نفاد الصحة أو تحقيق هدف التدمير).
  2. الإجراء: يرى حالة النتيجة بوضوح — فوز مع لمعان ليموني (#C6FF3D) أو خسارة.
  3. القرار: يقرّر إعادة اللعب.
  4. الإجراء: يضغط زر الإعادة في قوس التحكم السفلي.
  5. النتيجة: تبدأ جلسة معركة جديدة كاملة بحالة جارية وأشرطة صحة وطاقة ممتلئة.
  6. الخطوة التالية: يعود إلى الرحلة 2 — خوض المعركة والتحكم في التدمير.

6. Visuals Colors and Theme

الميوز: Karim Rashid — حرب ودمار بمنطق البوب الحسّي: انفجارات لامعة، تدمير وردي، وأشكال عضوية تنفجر بلا خجل.

العنوان الرئيسي: كرنفال من الدمار — لا محاكاة حرب جادة.

الألوان (الوضع الداكن)

الدورالقيمةالاستخدام
الخلفية#120A1Fبنفسجي-ليلي داكن، ~60% من الشاشة
السطح#241238بطاقات ولوحات HUD، ~20%
النص#FFF4FBأبيض-وردي للقراءة
الأساسي#FF3D9Aوردي حارق — أزرار الهجوم، أشرطة الصحة، حلقات الانفجار، ~12%
الإشارة#C6FF3Dليموني حمضي — لحظات النصر والارتفاعات والتصويب فقط، ~5%
الثانوي#8B7BA8رمادي بنفسجي — النص الثانوي والحدود الشعرية، ~3%
Page 9 of 17

الخطوط

  • العناوين: Unbounded بوزن 700-900، حروف عريضة منتفخة بحواف مستديرة، تباعد ضيق جداً (-0.03em). الكلمات العربية عبر Noto Kufi Arabic 800 كخط احتياطي.
  • النص: Quicksand.
  • المقياس: 1.5 modular — 128/84/56/36/24/18/16. العناوين الرئيسية 128px ديسكتوب / 56px موبايل عبر clamp. نص الواجهة 18px. أرقام HUD بخط Quicksand 700 مع tabular numerals.

لغة الشكل

أشكال عضوية منتفخة وحبيبات لامعة: أزرار كبسولية بحواف نصف قطرها = نصف الارتفاع، بطاقات بحواف 32-48px، فقاعات وأشكال blob غير منتظمة. كل زاوية في الواجهة مستديرة، لا زاوية حادة واحدة في عناصر التفاعل. الحدود العسكرية الحادة ممنوعة — حتى شرائط الصحة تبدو كسوائل داخل أنابيب منحنية.

التخطيط

تخطيط غير متماثل مبني على طبقات عائمة: HUD اللعب يطفو في الزوايا الأربع فوق ملعب المعركة، والأزرار الأساسية في قوس منحن أسفل الشاشة يشبه غطاء جهاز. الصفحة الرئيسية مقسومة قطرياً: كتلة وردية ضخمة تشغل 60% من الشاشة على اليمين، والعنوان العملاق يمتد على عرض الشاشة كاملاً ويقطع الحدود بين الكتل. لا شبكة منتظمة — كل قسم يدخل بزاوية أو انحناء.

الصور

أشكال 3D لامعة ومجردة: كرات معدنية وردية، شظايا زجاجية ملونة، حبيبات blob ضخمة بألوان الحلوى. لا صور واقعية للحرب، لا دماء واقعية، لا جنود — التدمير يُصوَّر كتحطم زجاج ملوّن وانفجار حبيبات لامعة. أيقونات سميكة مستديرة الأطراف بأسلوب لامع (glossy).

Page 10 of 17

الممنوعات

  • لا خلفية بيضاء أو رمادية فاتحة — الخلفية داكنة بنفسجية دائماً.
  • لا أزرق/إنديجو في أي عنصر أساسي أو زر — الوردي الحارق هو اللون العدواني الوحيد.
  • لا خطوط Inter أو Roboto أو Arial أو system-ui في العناوين أو النص.
  • لا زوايا حادة (0-4px) في الأزرار أو البطاقات — كل شيء مستدير ≥ 24px.
  • لا صور حرب واقعية أو دماء أو جنود — التدمير مجرد ولامع.
  • لا تخطيط متماثل بعنوان في المنتصف وزر تحته — كل قسم غير متماثل وله كتلة لونية مهيمنة.
  • لا تدرجات blob كخلفية hero — الفقاعات أشكال صلبة لامعة بحواف واضحة.
  • لا شبكة بطاقات متطابقة بحركة hover-lift — كل عنصر تفاعلي له شكل وحجم مختلف.
  • قالب SaaS الأزرق/الإنديجو على الأبيض ممنوع تماماً.
Page 11 of 17

7. Signature Design Concept

الشاشة الأولى على الصفحة الرئيسية: كتلة وردية صلبة (#FF3D9A) بحواف مستديرة ضخمة تشغل 62% من عرض الشاشة على اليمين وتمتد من أعلى إلى أسفل خلفية بنفسجية داكنة (#120A1F). عنوان بعرض الشاشة كاملاً بخط Unbounded 900 بحجم clamp(56px, 12vw, 128px) يمتد من الحافة اليسرى ويتجاوز حدود الكتلة الوردية، مكتوب بلون #FFF4FB مع ظل ليموني خلف الحروف. أسفل العنوان مباشرة زر كبسولي ضخم (#C6FF3D بخلفية ليمونية ونص داكن) قطره 88px على الديسكتوب و64px على الموبايل، مثبّت أسفل الكتلة الوردية. خلف المشهد كله: 3-4 حبيبات blob لامعة تتنفس ببطء.

الحركات المميزة:

  • عنوان يمتد من حافة الشاشة إلى حافتها بخط Unbounded 900 بحجم clamp(56px,12vw,128px)، يقطع كتلة وردية صلبة ويبرز خارجها — لا يوجد عنوان في المنتصف مع زر تحته.
  • قوس التحكم السفلي: أزرار اللعب (هجوم/تفجير/إعادة) مرتّبة على منحنى يشبه غطاء جهاز، كل زر كبسولة لامعة بحواف نصف دائرية، تنضغط وتنتفخ عند اللمس بارتداد 0.34,1.56.
  • شرائط الصحة والطاقة كسوائل داخل أنابيب منحنية: المستطيل منحني قليلاً والسائل داخله يتمايل بحركة موجة بطيئة، واللون يتدرج من الوردي إلى الليموني عند الارتفاع.
  • لوحة HUD عائمة بأربع زوايا مستديرة بحواف 48px، كل زاوية تحمل رقم/مؤشر واحداً بخط Quicksand 700 مع tabular numerals، وخلفية #241238 بشفافية 85% مع blur خفيف.
  • فقاعات blob لامعة بحجم 200-500px تطفو ببطء في خلفية الصفحة الرئيسية وصفحة اللعب، تتمدد وتنكمش على مدى 8-12 ثانية، وتتحول إلى دوائر انفجار عند الضغط في اللعب.

على الموبايل: الكتلة الوردية تصبح شريطاً أفقياً بعرض كامل في الأعلى، والعنوان يتقلص إلى 56px مع الحفاظ على امتداده من الحافة إلى الحافة.

Page 12 of 17

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

الموضوع البؤري: الكتلة الوردية الصلبة (#FF3D9A) بحوافها المستديرة الضخمة، والعنوان العملاق الذي يقطعها ويبرز خارجها، وحبيبات blob اللامعة التي تتنفس في الخلفية.

أطروحة المدخل → التحويل → النتيجة: عند فتح الصفحة الرئيسية، تبدأ حبيبات blob اللامعة في التنفس ببطء (تمدّد وانكماش على مدى 8-12 ثانية)، والعنوان العملاق يستقر في مكانه ممتداً من حافة الشاشة إلى حافتها وقاطعاً الكتلة الوردية. عند لمس زر البدء، ينضغط الزر وينتفخ بارتداد 0.34,1.56، ثم ينتقل اللاعب إلى صفحة اللعب.

مفردات الحركة: حركة سائلة مرنة بلا توقف — فقاعات تتنفس، أزرار تنضغط وتنتفخ (scale 0.94 → 1.06)، انفجارات تتمدد كدوائر لامعة ثم تتلاشى، أشرطة صحة تتمايل كسائل. الانتقالات 240-420ms بمنحنى cubic-bezier(0.34, 1.56, 0.64, 1) — ارتداد خفيف مرح.

الإطار الأول المركّب: كتلة وردية صلبة على اليمين تشغل 62% من العرض، عنوان Unbounded 900 يمتد من الحافة اليسرى ويتجاوز حدود الكتلة، زر كبسولي ليموني مثبّت أسفل الكتلة، و3-4 حبيبات blob لامعة تتنفس ببطء في الخلفية البنفسجية الداكنة.

حالة تقليل الحركة: عند prefers-reduced-motion، تتحول كل الحركات إلى تبديل لوني فوري بدون تمدد أو ارتداد — الفقاعات تبقى ثابتة، والأزرار تتغير ألوانها فوراً عند اللمس.

Page 13 of 17

9. Non-Functional Requirements

NFR-1 — قابلية القراءة على كل المقاسات

  • المتطلّب: النصوص والعناصر القابلة للقراءة تبقى كاملة داخل الشاشة وحاويتها عند 375px و768px و1280px، مع الالتفاف أو التصغير (مثل font-size: clamp(...) مع مقاس الموبايل).
  • Provenance: explicit (من التوجيه الإبداعي)
  • المبرّر: العنوان العملاق بخط Unbounded 900 بحجم يصل إلى 128px يجب أن يبقى مقروءاً بالكامل على كل المقاسات.

NFR-2 — دعم تقليل الحركة

  • المتطلّب: عند prefers-reduced-motion، تتحول كل الحركات إلى تبديل لوني فوري بدون تمدد أو ارتداد.
  • Provenance: explicit (من التوجيه الإبداعي)
  • المبرّر: ضمان إمكانية الوصول للمستخدمين الذين يفضّلون تقليل الحركة.

NFR-3 — الأداء السلس

  • المتطلّب: الحركات السائلة (فقاعات تتنفس، أشرطة تتمايل، انفجارات تتمدد) تعمل بسلاسة دون تقطيع.
  • Provenance: required_inference
  • المبرّر: الإحساس المطلوب "لعبة جامدة" يعتمد على حركة سلسة ومستمرة.

NFR-4 — الوصول الفوري دون حساب

  • المتطلّب: الوصول إلى الواجهة الرئيسية وصفحة اللعب دون تسجيل أو حساب.
  • Provenance: explicit (access_requirement: none لكلا السطحين)
  • المبرّر: اللعبة موجّهة لجلسات قصيرة فورية — أي حاجز تسجيل يقتل الإحساس المطلوب.
Page 14 of 17

10. Tech Stack

  • الواجهة الأمامية: React — لعبة متصفح تفاعلية بالكامل.
  • الرسوم المتحركة: CSS animations و transitions بمنحنى cubic-bezier(0.34, 1.56, 0.64, 1)، مع دعم prefers-reduced-motion.
  • الخطوط: Unbounded (700-900) للعناوين، Noto Kufi Arabic 800 كخط احتياطي للعناوين العربية، Quicksand للنص وأرقام HUD.
  • التخزين: لا يوجد — لا حالة محفوظة بين الجلسات.
  • الخادم: لا يوجد — المنتج واجهة أمامية تفاعلية بالكامل.
Page 15 of 17

11. Assumptions and Constraints

الافتراضات:

  • A-1: اللعبة تُلعب على المتصفح في جلسات قصيرة من لاعب واحد. (مصدر: التوجيه الإبداعي)
  • A-2: لا توجد حالة لاعب محفوظة بين الجلسات — كل جلسة تبدأ من الصفر. (مصدر: access_requirement: none)
  • A-3: لا توجد هوية مملوكة للتطبيق ولا تسجيل دخول. (مصدر: access_requirement: none)
  • A-4: التدمير يُصوَّر كتحطم زجاج ملوّن وانفجار حبيبات لامعة — لا صور حرب واقعية. (مصدر: التوجيه الإبداعي)

القيود:

  • C-1: لا خلفية بيضاء أو رمادية فاتحة — الخلفية داكنة بنفسجية دائماً.
  • C-2: لا أزرق/إنديجو في أي عنصر أساسي أو زر.
  • C-3: لا خطوط Inter أو Roboto أو Arial أو system-ui في العناوين أو النص.
  • C-4: لا زوايا حادة (0-4px) في الأزرار أو البطاقات — كل شيء مستدير ≥ 24px.
  • C-5: لا صور حرب واقعية أو دماء أو جنود.
  • C-6: لا تخطيط متماثل بعنوان في المنتصف وزر تحته.
  • C-7: لا تدرجات blob كخلفية hero.
  • C-8: لا شبكة بطاقات متطابقة بحركة hover-lift.
  • C-9: قالب SaaS الأزرق/الإنديجو على الأبيض ممنوع تماماً.
  • C-10: النصوص والعناصر القابلة للقراءة تبقى كاملة داخل الشاشة وحاويتها عند كل المقاسات.
Page 16 of 17

12. Glossary

  • inner-grand: اسم المشروع — لعبة حرب ودمار تفاعلية تُلعب على المتصفح.
  • جلسة لعب: دورة كاملة من بدء المعركة حتى النتيجة (فوز/خسارة) ثم إعادة.
  • HUD: لوحة المعلومات العائمة في زوايا ملعب المعركة، تعرض المؤشرات والأرقام.
  • blob: شكل عضوي لامع غير منتظم يطفو في الخلفية ويتمدد وينكمش ببطء.
  • قوس التحكم السفلي: ترتيب أزرار اللعب (هجوم/تفجير/إعادة) على منحنى يشبه غطاء جهاز.
  • prefers-reduced-motion: إعداد نظام يفضّل تقليل الحركة — عنده تتحول الحركات إلى تبديل لوني فوري.
Page 17 of 17
الرئيسية design preview
الرئيسية: فتح اللعبة في المتصفح
الرئيسية: قراءة عنوان اللعبة وموضوعها
الرئيسية: الضغط على زر البدء
اللعب: بدء جلسة معركة جديدة
اللعب: 1. مشاهدة ملعب المعركة وHUD
اللعب: 2. الضغط على زر الهجوم
اللعب: 3. الضغط على زر التفجير
اللعب: 4. متابعة تغيّر أشرطة الصحة والطاقة
اللعب: 5. رؤية حالة الفوز بلمعان ليموني
اللعب: 6. رؤية حالة الخسارة
اللعب: 7. الضغط على زر الإعادة
اللعب: 8. بدء جلسة معركة جديدة كاملة
الرئيسية design preview
الرئيسية: فتح اللعبة في المتصفح
الرئيسية: قراءة عنوان اللعبة وموضوعها
الرئيسية: الضغط على زر البدء
اللعب: بدء جلسة معركة جديدة
اللعب: 1. مشاهدة ملعب المعركة وHUD
اللعب: 2. الضغط على زر الهجوم
اللعب: 3. الضغط على زر التفجير
اللعب: 4. متابعة تغيّر أشرطة الصحة والطاقة
اللعب: 5. رؤية حالة الفوز بلمعان ليموني
اللعب: 6. رؤية حالة الخسارة
اللعب: 7. الضغط على زر الإعادة
اللعب: 8. بدء جلسة معركة جديدة كاملة