Skip to content

feat: add shared tutorial framework for game plugins - #128

Draft
acrosman with Copilot wants to merge 4 commits into
mainfrom
copilot/create-general-framework-for-game-tutorials
Draft

feat: add shared tutorial framework for game plugins#128
acrosman with Copilot wants to merge 4 commits into
mainfrom
copilot/create-general-framework-for-game-tutorials

Conversation

Copilot AI commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

Games need a consistent tutorial UX and a shared mechanism to track whether a player has already seen a given tutorial — without duplicating this logic in every plugin.

New: app/components/tutorialService.js

Provides a multi-step modal overlay framework that persists seen-state to the existing progress file under a top-level tutorials key (separate from game scores).

Primary entry point for game plugins:

import { showTutorialIfNeeded } from '../../components/tutorialService.js';

const TUTORIAL_STEPS = [
  { title: 'Welcome', content: '<p>Match the pattern before the timer runs out.</p>' },
  { title: 'Scoring', content: '<p>Each correct match earns <strong>10 points</strong>.</p>' },
];

async function init(gameContainer) {
  // ... bind DOM ...
  await showTutorialIfNeeded('my-game-id', TUTORIAL_STEPS, gameContainer, () => {
    start(); // called immediately if tutorial already seen
  });
}

Full API:

Function Purpose
showTutorialIfNeeded(gameId, steps, container, onComplete?) Show overlay only if unseen; call onComplete immediately otherwise
showTutorial(gameId, steps, container, onComplete?) Always show overlay
hasTutorialBeenSeen(gameId) Check persisted seen-state
markTutorialSeen(gameId) Persist seen-state without showing overlay
createTutorialOverlay(steps) Build modal DOM element (not yet appended)
renderTutorialStep(overlay, steps, stepIndex) Update overlay for a given step

The overlay is a WCAG AA-compliant role="dialog" modal with Previous/Next navigation, "Got it!" on the last step, and a "Skip Tutorial" link. Focus moves into the panel on open. markTutorialSeen runs in a try/finally so onComplete is always invoked even if IPC persistence fails.

CSS: app/styles/game-shared.css

Adds .tutorial-overlay and all sub-element classes using existing design tokens. No new dependencies.

Docs: .github/copilot-instructions.md

Adds §5d covering stored state shape, step definition, init() integration pattern, full API table, CSS class reference, and testing guidance.

Copilot AI linked an issue Aug 8, 2026 that may be closed by this pull request
Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
Copilot AI changed the title [WIP] Create reusable framework for game tutorials feat: add shared tutorial framework for game plugins Aug 8, 2026
Copilot AI requested a review from acrosman August 8, 2026 01:06

@acrosman acrosman left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

There is at least one function that doesn't have test coverage:
Jest: "global" coverage threshold for functions (100%) not met: 99.84%

Check for other improvements that could be made, and for ways to ensure minimal code bloat from the new code.

Copilot AI and others added 2 commits August 8, 2026 01:16
…Needed

Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>

Copilot AI commented Aug 8, 2026

Copy link
Copy Markdown
Contributor Author

There is at least one function that doesn't have test coverage:
Jest: "global" coverage threshold for functions (100%) not met: 99.84%
...

The uncovered function was the default onComplete = () => {} parameter in showTutorialIfNeeded (line 282). The default was never executed because every test supplied an explicit callback.

Fixed in commits b87aedf and 8c18caf by adding a test that calls showTutorialIfNeeded without onComplete and then clicks "Skip Tutorial", which causes _finish() to invoke the default no-op — bringing function coverage back to 100%.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create general framework for game tutorials.

2 participants