game-flow

Owns direct game-scene children. Use a document fragment link to select a scene, including without scripting. Browser history restores the scene. The start or first named scene is used when the fragment is absent or unknown.

Examples

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

Default to the first scene

When no start is specified, the first named scene is shown. Follow the link to select the second.

Default to the first scene HTML

<game-flow>
	<game-scene id="first-map" tabindex="-1"><a href="#second-map">Open route map</a></game-scene>
	<game-scene id="second-map" tabindex="-1"><a href="#first-map">Close route map</a></game-scene>
</game-flow>

Open route map

Close route map

API

Attributes
Name	Type or default	Behavior
`start`	`string`	ID of the initial scene. Put data-start on the same scene for the stylesheet fallback.
`scene`	`string`	Reflects the selected scene after upgrade. Set to a direct scene ID to navigate. Invalid values are restored to the scene selected by the current fragment or start.

Emitted events
Name	Type or default	Behavior
`game-scene-change`	`CustomEvent<{ scene: string, previous: string }>`	Bubbles and is composed. Emitted after switching between two named scenes. Initial selection is silent.

Listened-for events

None.

CSS custom properties

None.

View the Game Kit manifest