Taille et mise en page

Un <caputchin-game> peut s'afficher selon trois mises en page (réglées avec l'attribut layout) : inline, modal et fullscreen. La façon de le dimensionner dépend de la mise en page, car les mises en page modal et fullscreen montrent deux boîtes distinctes :

• L'élément dans la page : la chose qui se place dans le flux de ta page. En inline c'est le panneau de jeu entier ; en modal / fullscreen c'est la petite case à cocher que le visiteur clique pour ouvrir le jeu.
• La boîte du jeu : la boîte de dialogue qui s'ouvre par-dessus en modal / fullscreen, avec le jeu dedans. (En inline il n'y a pas de boîte de dialogue séparée : le panneau est le jeu.)

Quatre attributs dimensionnent ces deux boîtes. Chaque valeur est l'une de auto (la valeur par défaut), full (couvre l'espace disponible), ou un nombre de pixels positif comme 480.

Inline

Inline a une seule boîte, donc width / height dimensionnent le panneau entier. overlay-width / overlay-height n'ont aucun effet ici et sont ignorés (le widget affiche un avertissement si tu les règles).

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

Modal et fullscreen

Ici les deux boîtes sont indépendantes. width / height dimensionnent la case à cocher d'entrée sur ta page ; overlay-width / overlay-height dimensionnent la boîte de dialogue et le jeu qui s'ouvrent quand le visiteur la clique.

<!-- 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" fait remplir la boîte de dialogue par le jeu sur cet axe ; une valeur en pixels fixe le jeu à cette taille (un modal s'ajuste étroitement autour de lui). En fullscreen la boîte de dialogue couvre déjà le viewport, donc overlay-* contrôle si le jeu s'étire pour le remplir ou reste centré à sa propre taille.

Quand tu laisses la boîte du jeu non réglée

Si tu ne règles pas overlay-width / overlay-height, la boîte du jeu utilise la taille que l'auteur du jeu a choisie pour le jeu (son empreinte préférée, déclarée dans le caputchin.json du jeu). Donc la plupart du temps tu n'as besoin que de width / height pour la mise en page de ta page, et le jeu se dimensionne de façon sensée. Ne règle overlay-* que lorsque tu veux passer outre.

Valeurs en pixels

Un simple nombre, ce sont des pixels CSS : width="500" et width="500px" sont équivalents. Les valeurs zéro, négatives et non numériques sont rejetées (l'attribut revient à sa valeur par défaut et le widget affiche un avertissement).

Voir aussi

• Élément du widget de jeu : l'ensemble complet des attributs de <caputchin-game>.
• Méthodes et événements du widget : piloter le widget et y réagir.