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.

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.