game-scene

A scene contains ordinary light DOM. Within a game, use a document-unique id and tabindex="-1" for focus after navigation. Outside a game it renders normally.

Examples

Standalone scene

A scene can hold a briefing, a map, or the game itself.

Standalone scene HTML

<game-scene id="observation">
	<h3>Observation deck</h3>
	<div>Fly through Emerald Reach, Amber Expanse, and Violet Citadel.</div>
</game-scene>

Observation deck

Fly through Emerald Reach, Amber Expanse, and Violet Citadel.

Scene switching

Follow a fragment link to switch scenes. Browser Back returns to the previous scene.

Scene switching HTML

<game-flow start="demo-dock">
	<game-scene id="demo-dock" data-start tabindex="-1">
		<h3>Dock</h3>
		<a href="#demo-bridge">Go to the bridge</a>
	</game-scene>
	<game-scene id="demo-bridge" tabindex="-1">
		<h3>Bridge</h3>
		<a href="#demo-dock">Return to the dock</a>
	</game-scene>
</game-flow>

Dock

Go to the bridge

Bridge

Return to the dock

API

Attributes
Name	Type or default	Behavior
`id`	`string`	Fragment identifier for links and the game start and scene attributes.
`data-start`	`boolean`	Author this on one direct scene as the stylesheet’s default scene.
`active`	`boolean`	Reflected by the owning game after upgrade.

Emitted events

None.

Listened-for events

None.

CSS custom properties

None.

View the Game Kit manifest