feat: add shared tutorial framework for game plugins#128
Conversation
Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
acrosman
left a comment
There was a problem hiding this comment.
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.
…Needed Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
The uncovered function was the default Fixed in commits |
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.jsProvides a multi-step modal overlay framework that persists seen-state to the existing progress file under a top-level
tutorialskey (separate from game scores).Primary entry point for game plugins:
Full API:
showTutorialIfNeeded(gameId, steps, container, onComplete?)onCompleteimmediately otherwiseshowTutorial(gameId, steps, container, onComplete?)hasTutorialBeenSeen(gameId)markTutorialSeen(gameId)createTutorialOverlay(steps)renderTutorialStep(overlay, steps, stepIndex)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.markTutorialSeenruns in atry/finallysoonCompleteis always invoked even if IPC persistence fails.CSS:
app/styles/game-shared.cssAdds
.tutorial-overlayand all sub-element classes using existing design tokens. No new dependencies.Docs:
.github/copilot-instructions.mdAdds §5d covering stored state shape, step definition,
init()integration pattern, full API table, CSS class reference, and testing guidance.