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.

Sur les écrans étroits

Quand le jeu est plus large que l'espace dont il dispose (un téléphone, une colonne étroite), le widget le garde dans cet espace, pour qu'il ne pousse jamais ta page sur le côté. La façon dont il s'adapte dépend de la manière dont l'auteur du jeu l'a déclaré dans le caputchin.json du jeu :

• Un jeu adaptatif prend la largeur plus étroite et se redessine pour elle, à sa hauteur habituelle.
• Un jeu marqué non adaptatif ("responsive": false sous marketplace.support) garde sa forme. Le widget réduit le jeu entier de façon uniforme, il garde donc le même aspect, en plus petit. En modal et fullscreen il se réduit aussi pour tenir dans la hauteur de l'écran, pour un téléphone tenu à l'horizontale.

Cela s'applique quand le jeu dimensionne sa propre boîte. En inline, cela veut dire que tu laisses width et height non réglés ; en modal / fullscreen, que ni overlay-width ni overlay-height ne vaut full. Un axe que tu laisses non réglé compte aussi comme full quand l'auteur du jeu a réglé cet axe sur full dans l'empreinte préférée du jeu (dans caputchin.json). Une boîte qui vaut full sur un axe étire plutôt le jeu pour la remplir.

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.