الحجم والتخطيط

يستطيع <caputchin-game> أن يُعرَض بثلاثة تخطيطات (تُضبَط بسمة layout): inline و modal و fullscreen. وكيف تضبط حجمه يتوقّف على التخطيط، لأن تخطيطَي modal و fullscreen يُظهِران صندوقين منفصلين:

• العنصر داخل الصفحة: الشيء الذي يجلس في تدفّق صفحتك. في inline هو لوحة اللعبة كاملةً؛ وفي modal / fullscreen هو خانة الاختيار الصغيرة التي ينقرها الزائر ليفتح اللعبة.
• صندوق اللعبة: مربّع الحوار الذي يفتح من فوق في modal / fullscreen، واللعبة بداخله. (في inline لا يوجد مربّع حوار منفصل: اللوحة نفسها هي اللعبة.)

أربع سمات تضبط حجم هذين الصندوقين. وكل قيمة هي واحدة من auto (الافتراضي)، أو full (يملأ المساحة المتاحة)، أو عدد بكسلات موجب مثل 480.

Inline

تخطيط inline له صندوق واحد، فتضبط width / height حجم اللوحة كاملةً. أما overlay-width / overlay-height فلا تفعل شيئًا هنا وتُتجاهَل (تسجّل الأداة تحذيرًا إن ضبطتهما).

<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>

Modal و fullscreen

هنا الصندوقان مستقلّان. تضبط width / height حجم خانة اختيار الدخول في صفحتك؛ وتضبط overlay-width / overlay-height حجم مربّع الحوار واللعبة اللذين يفتحان حين ينقرها الزائر.

<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>

تجعل overlay-width="full" اللعبةَ تملأ مربّع الحوار على ذلك المحور؛ أما قيمة بالبكسل فتُثبّت اللعبة على ذلك الحجم (وينكمش مربّع الحوار حوله بإحكام). وفي fullscreen يكون مربّع الحوار قد غطّى إطار العرض أصلًا، فتتحكّم overlay-* في ما إن كانت اللعبة تتمدّد لتملأه أم تجلس متوسّطةً بحجمها الخاص.

حين تترك صندوق اللعبة بلا ضبط

إن لم تضبط overlay-width / overlay-height، استعمل صندوق اللعبة الحجمَ الذي اختاره مؤلّف اللعبة لها (مساحتها المفضّلة، المُصرَّح بها في ملف caputchin.json الخاص باللعبة). فأغلب الوقت تحتاج فقط إلى width / height لتخطيط صفحتك، واللعبة تضبط حجم نفسها بحكمة. ولا تضبط overlay-* إلا حين تريد تجاوز ذلك.

القيم بالبكسل

العدد المجرّد هو بكسلات CSS: width="500" و width="500px" متكافئان. أما القيم الصفرية والسالبة وغير العددية فتُرفَض (ترتدّ السمة إلى افتراضها وتسجّل الأداة تحذيرًا).

انظر أيضًا

• عنصر أداة اللعبة: مجموعة سمات <caputchin-game> كاملةً.
• طرائق الأداة وأحداثها: قيادة الأداة والتفاعل معها.