Tamanho e disposição

Um <caputchin-game> pode ser renderizado em três disposições (definidas com o atributo layout): inline, modal e fullscreen. Como você o dimensiona depende da disposição, porque as disposições modal e fullscreen mostram duas caixas separadas:

• O elemento na página: a coisa que fica no fluxo da sua página. Em inline é o painel de jogo inteiro; em modal / fullscreen é o pequeno checkbox que o visitante clica para abrir o jogo.
• A caixa do jogo: o diálogo que abre por cima em modal / fullscreen, com o jogo dentro. (Em inline não há um diálogo separado: o painel é o jogo.)

Quatro atributos dimensionam essas duas caixas. Cada valor é um de auto (o padrão), full (abrange o espaço disponível), ou um número positivo de pixels como 480.

Inline

Inline tem uma única caixa, então width / height dimensionam o painel inteiro. overlay-width / overlay-height não fazem nada aqui e são ignorados (o widget registra um aviso se você os definir).

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

Modal e fullscreen

Aqui as duas caixas são independentes. width / height dimensionam o checkbox de entrada na sua página; overlay-width / overlay-height dimensionam o diálogo e o jogo que abrem quando o visitante o clica.

<!-- 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" faz o jogo preencher o diálogo nesse eixo; um valor em pixels fixa o jogo nesse tamanho (um modal se ajusta ao redor dele). Em fullscreen o diálogo já cobre o viewport, então overlay-* controla se o jogo se estica para preenchê-lo ou fica centralizado no seu próprio tamanho.

Quando você deixa a caixa do jogo sem definir

Se você não definir overlay-width / overlay-height, a caixa do jogo usa o tamanho que o autor do jogo escolheu para o jogo (a sua presença preferida, declarada no caputchin.json do jogo). Então, na maioria das vezes você só precisa de width / height para a disposição da sua página, e o jogo se dimensiona de forma sensata. Defina overlay-* apenas quando quiser sobrepor isso.

Em telas estreitas

Quando o jogo é mais largo do que o espaço que recebe (um celular, uma coluna estreita), o widget o mantém dentro desse espaço, então ele nunca empurra a sua página para os lados. Como ele se ajusta depende de como o autor do jogo o declarou no caputchin.json do jogo:

• Um jogo responsivo assume a largura menor e se redesenha para ela, na sua altura de sempre.
• Um jogo marcado como não responsivo ("responsive": false em marketplace.support) mantém o seu formato. O widget reduz o jogo inteiro por igual, então ele fica com a mesma aparência, só que menor. Em modal e fullscreen ele também encolhe para caber na altura da tela, pensando em um celular na horizontal.

Isso vale quando o jogo dimensiona a própria caixa. Em inline, significa que você deixa width e height sem definir; em modal / fullscreen, significa que nem overlay-width nem overlay-height é full. Um eixo que você deixa sem definir também conta como full quando o autor do jogo definiu esse eixo como full na presença preferida do jogo (no caputchin.json). Já uma caixa que é full num eixo estica o jogo para preenchê-la.

Valores em pixels

Um número simples são pixels CSS: width="500" e width="500px" são equivalentes. Valores zero, negativos e não numéricos são rejeitados (o atributo volta ao seu padrão e o widget registra um aviso).

Veja também

• Elemento do widget de jogo: o conjunto completo de atributos de <caputchin-game>.
• Métodos e eventos do widget: conduzir o widget e reagir a ele.