Größe und Layout

Ein <caputchin-game> kann in drei Layouts gerendert werden (mit dem layout-Attribut gesetzt): inline, modal und fullscreen. Wie du es dimensionierst, hängt vom Layout ab, denn die Layouts modal und fullscreen zeigen zwei getrennte Boxen:

• Das Element in der Seite: das Ding, das im Fluss deiner Seite sitzt. In inline ist das das ganze Spielpanel; in modal / fullscreen ist es die kleine Checkbox, die der Besucher klickt, um das Spiel zu öffnen.
• Die Spiel-Box: der Dialog, der in modal / fullscreen darüber aufgeht, mit dem Spiel darin. (In inline gibt es keinen separaten Dialog: das Panel ist das Spiel.)

Vier Attribute dimensionieren diese zwei Boxen. Jeder Wert ist einer von auto (der Standard), full (überspannt den verfügbaren Platz) oder eine positive Pixelzahl wie 480.

Inline

Inline hat eine einzige Box, also dimensionieren width / height das ganze Panel. overlay-width / overlay-height bewirken hier nichts und werden ignoriert (das Widget protokolliert eine Warnung, wenn du sie setzt).

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

Modal und fullscreen

Hier sind die zwei Boxen unabhängig. width / height dimensionieren die Eingangs-Checkbox auf deiner Seite; overlay-width / overlay-height dimensionieren den Dialog und das Spiel, die aufgehen, wenn der Besucher sie klickt.

<!-- 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" lässt das Spiel den Dialog entlang dieser Achse füllen; ein Pixelwert pinnt das Spiel auf diese Größe (ein Modal schmiegt sich eng darum). In fullscreen deckt der Dialog bereits den Viewport ab, also steuert overlay-*, ob sich das Spiel streckt, um ihn zu füllen, oder zentriert in seiner eigenen Größe sitzt.

Wenn du die Spiel-Box ungesetzt lässt

Wenn du overlay-width / overlay-height nicht setzt, nimmt die Spiel-Box die Größe, die der Spiel-Autor für das Spiel gewählt hat (seinen bevorzugten Platzbedarf, deklariert in der caputchin.json des Spiels). Meistens brauchst du also nur width / height für dein Seitenlayout, und das Spiel dimensioniert sich vernünftig selbst. Setz overlay-* nur, wenn du das überschreiben willst.

Pixelwerte

Eine schlichte Zahl sind CSS-Pixel: width="500" und width="500px" sind gleichwertig. Null, negative und nicht-numerische Werte werden abgewiesen (das Attribut fällt auf seinen Standard zurück und das Widget protokolliert eine Warnung).

Siehe auch

• Spiel-Widget-Element: der vollständige Attributsatz von <caputchin-game>.
• Widget-Methoden und -Events: das Widget treiben und darauf reagieren.