Tamaño y disposición

Un <caputchin-game> puede renderizarse en tres disposiciones (se fijan con el atributo layout): inline, modal y fullscreen. Cómo lo dimensionas depende de la disposición, porque las disposiciones modal y fullscreen muestran dos cajas separadas:

• El elemento en la página: lo que se asienta en el flujo de tu página. En inline es el panel de juego entero; en modal / fullscreen es el pequeño checkbox que el visitante pulsa para abrir el juego.
• La caja del juego: el diálogo que se abre por encima en modal / fullscreen, con el juego dentro. (En inline no hay un diálogo aparte: el panel es el juego.)

Cuatro atributos dimensionan estas dos cajas. Cada valor es uno de auto (el predeterminado), full (abarca el espacio disponible), o un número positivo de píxeles como 480.

Inline

Inline tiene una sola caja, así que width / height dimensionan el panel entero. overlay-width / overlay-height no hacen nada aquí y se ignoran (el widget registra una advertencia si los fijas).

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

Modal y fullscreen

Aquí las dos cajas son independientes. width / height dimensionan el checkbox de entrada en tu página; overlay-width / overlay-height dimensionan el diálogo y el juego que se abren cuando el visitante lo pulsa.

<!-- 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" hace que el juego llene el diálogo en ese eje; un valor en píxeles fija el juego a ese tamaño (un modal se ciñe a su alrededor). En fullscreen el diálogo ya cubre el viewport, así que overlay-* controla si el juego se estira para llenarlo o queda centrado a su propio tamaño.

Cuando dejas la caja del juego sin fijar

Si no fijas overlay-width / overlay-height, la caja del juego usa el tamaño que el autor del juego eligió para el juego (su huella preferida, declarada en el caputchin.json del juego). Así que la mayoría de las veces solo necesitas width / height para la disposición de tu página, y el juego se dimensiona con sensatez. Fija overlay-* solo cuando quieras anular eso.

En pantallas estrechas

Cuando el juego es más ancho que el espacio que recibe (un teléfono, una columna estrecha), el widget lo mantiene dentro de ese espacio, así que nunca empuja tu página hacia los lados. Cómo se ajusta depende de cómo lo declaró el autor del juego en el caputchin.json del juego:

• Un juego adaptable toma el ancho más estrecho y se redibuja para él, con su altura habitual.
• Un juego marcado como no adaptable ("responsive": false bajo marketplace.support) conserva su forma. El widget reduce el juego entero de manera uniforme, así que se ve igual, solo que más pequeño. En modal y fullscreen también se reduce para caber en la altura de la pantalla, pensando en un teléfono en horizontal.

Esto aplica cuando el juego dimensiona su propia caja. En inline significa que dejas width y height sin fijar; en modal / fullscreen significa que ni overlay-width ni overlay-height es full. Un eje que dejas sin fijar también cuenta como full cuando el autor del juego fijó ese eje en full en la huella preferida del juego (en caputchin.json). Una caja que es full en un eje, en cambio, estira el juego para llenarla.

Valores en píxeles

Un número a secas son píxeles CSS: width="500" y width="500px" son equivalentes. Los valores cero, negativos y no numéricos se rechazan (el atributo vuelve a su predeterminado y el widget registra una advertencia).

Véase también

• Elemento del widget de juego: el conjunto completo de atributos de <caputchin-game>.
• Métodos y eventos del widget: gobernar el widget y reaccionar a él.