Onboarding tutorials: a tour over the real screens

What the player sees

• The highlighted element of any screen with the rest dimmed; the highlight follows the element when the layout changes.
• A hint bubble with "Next" on steps the player closes and "Skip" when the flow allows it.
• Steps that wait for a real action: the hint stays until the player does it in the game.
• The reward at the end of the flow and the "Tutorials" list to replay allowed flows.

How it works

• A step points at an element by its anchor: data-tutorial-anchor on any element of any module.
• Flows can start by themselves when the title says so, for example on the first visit.
• Every shown step is reported, which gives the onboarding funnel in the dashboard analytics.

For developers

Tutorials work through client.tutorial in @idosgames/core; the overlay finds elements by their anchors.

// Any element of any module can be a tutorial anchor
<button data-tutorial-anchor="play:start">Play</button>
// Lobby tabs are tab:{featureID}, the profile button lobby:profile,
// a game's Play button play:{modeID}

• Mark the elements a flow points at; an anchor without an element simply waits until it appears.
• Steps are reported with reportStepShown and completed with completeStep: the overlay does it for you.

Every field is described in the tutorial-system skill, served by the SDK MCP server.