Skip to content

feat: add tutorial - #216

Open
Exeloo wants to merge 2 commits into
refactor/simplify-interfacesfrom
feat/add-tutorial
Open

Exeloo wants to merge 2 commits into
refactor/simplify-interfacesfrom
feat/add-tutorial

Conversation

@Exeloo

@Exeloo Exeloo commented Oct 30, 2026

Copy link
Copy Markdown
Member

What does this PR do?

Add tutorial to the app

How do you test this PR?

@Exeloo
Exeloo requested a review from Tchips46 as a code owner October 30, 2026 09:48
@github-actions github-actions Bot added documentation Improvements or additions to documentation apps:editor Related to Editor app packages:protocol Related to Protocol package packages:sdk Related to SDK package packages:server-core Related to Server core package packages:settings Related to Settings package packages:ui Related to UI package plugins:console Related to Console plugin plugins:ecs Related to ECS plugin plugins:file-manager Related to File manager plugin plugins:git Related to Git plugin plugins:history-panel Related to History panel plugin plugins:inspectors Related to Inspectors plugin plugins:scene Related to Scene plugin labels Oct 30, 2026
@Exeloo
Exeloo added this pull request to stack #212 October 30, 2026 09:48

@Tchips46 Tchips46 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review: tutorial (54e3796)

Line numbers are at this PR's head.

Must fix

1. The tour keeps running after the project closes (apps/editor/src/routes/(editor)/project/[id]/+page.svelte:33-40, packages/ui/src/workbench/setup/setup-workbench.ts:194)

  • TourService lives as long as the editor (setupShell), and the overlay belongs to each workbench. Nothing calls tours.stop() when the workbench is disposed.
  • Example: start the tutorial, click the brand link, open pong. The old bubble ("Add an entity") shows over pong, and advanceWhenChanged: 'ecs.entityCount' compares pong's count with the tutorial's, so the tour jumps ahead on its own. A project plugin's tour also stays after that plugin unloads.
  • Trap: with Help › Tutorial from another project, the ?tour effect runs before the load effect's cleanup, so a plain "stop on dispose" stops the tour it just started.
  • Fix: start the tour inside the load effect, right after workbench = created, with untrack(() => page.url.searchParams.get('tour')). Call created?.tours.stop() in that effect's cleanup, and delete the separate $effect.

Should fix

2. Back bounces straight forward on auto-advancing steps (packages/ui/src/workbench/tour/tour-service.ts:70-72, 110, 126)

  • back() → _go(-1) → _check(), which advances as soon as advanceWhen holds. From "Add an entity", Back goes to "scene", whose screen == 'viewport.scene' is still true, so it returns at once. The same happens on the play and fix steps.
  • Fix: a _manual flag set by Back and cleared by Next, with _check returning early while it is set. Add one test.

3. "Show Commit" throws when the folder is not a repository (apps/editor/src/lib/tutorial/tutorial-tour.const.ts:133-137, TourOverlay.svelte:118, tour-service.ts:82)

  • git.commit has when: "git.repository", but the step's when is only editor.local. Skip Init, press Next, click "Show Commit": CommandPreconditionError, swallowed by void tours.act() as an unhandled rejection. The button does nothing.
  • Fix: when: 'editor.local && git.repository', and catch errors in act() (notifyError).

4. createTutorial opens any my-first-game with a config, and two calls can race (packages/server-core/src/rpc/implementation/projects.implementation.ts:101-130)

  • A user's own nf new my-first-game, or a half-made folder from an interrupted run, opens as the tutorial, and the tour talks about files that don't exist.
  • Nothing stops a second call during the ~1 min npm install, and no progress is shown.
  • Fix: treat the folder as the tutorial only when a tutorial file exists, and return CONFLICT otherwise. Keep one in-flight creation per name, and show progress in startTutorial.

5. Turbo doesn't rebuild when tutorial files change (turbo.json:14-23, copy in apps/editor/scripts/build-server.ts:44)

  • tutorial/** is not in the build inputs, so an edit there hits the cache and the old tutorial ships. Add "tutorial/**".

6. build-scene draws hitboxes as shapes (plugins/ecs/src/scene/build-scene.ts:89-90)

  • The shape check runs per component, not per entity. Breakout's ball (Box(18, 18) + Visual(new Rect({ cornerRadius: 9 }))) gets an extra square, and every brick is drawn twice, in the Scene screen and in GameMoveOverlay.
  • Fix: use the param guess only when the entity has no Rect/Circle in any of its components.

7. E2E state left in account settings breaks the CI retry (apps/editor/src/lib/tutorial/Welcome.svelte:36, apps/editor/e2e/tips.spec.ts:16)

  • welcome.show = false and the dismissed History tip are saved to the account, which outlives tests. On the CI retry (retries: 1), the welcome card and the tip are gone.
  • Fix: restore both in afterEach and wait for "Account synced".

Nice to have

  • Overlay z-index (TourOverlay.svelte:136, 149): z-index: 2400 is not a kit token and sits above dialogs, so a centered bubble covers an open Settings dialog. Use a token and document it in the z-order.
  • Repeated tour id (apps/editor/src/routes/(editor)/+page.svelte:105): ?tour=tutorial repeats TUTORIAL_TOUR_ID; use the constant.

@Exeloo
Exeloo force-pushed the feat/add-tutorial branch 2 times, most recently from 4cb1539 to 789e4ec Compare November 1, 2026 14:27
- the tour starts and stops with its project's workbench
- back stays on a step whose condition already holds
- the commit step needs a repository, failed tour actions are shown
- one tutorial project at a time, an existing folder is reused only when
  it is the tutorial's
- the scene draws an entity with a Rect or Circle once
- turbo rebuilds the editor when tutorial files change
- the tour overlay has its own layer below dialogs
- e2e: the tutorial and tips specs put account settings back
@Exeloo
Exeloo force-pushed the feat/add-tutorial branch from 789e4ec to 5b36894 Compare November 1, 2026 14:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

apps:editor Related to Editor app documentation Improvements or additions to documentation packages:protocol Related to Protocol package packages:sdk Related to SDK package packages:server-core Related to Server core package packages:settings Related to Settings package packages:ui Related to UI package plugins:console Related to Console plugin plugins:ecs Related to ECS plugin plugins:file-manager Related to File manager plugin plugins:git Related to Git plugin plugins:history-panel Related to History panel plugin plugins:inspectors Related to Inspectors plugin plugins:scene Related to Scene plugin

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants