feedBack/static/v3/onboarding-tour.js

/*
 * fee[dB]ack v0.3.0 — first-run home tour.
 *
 * Registers a spotlight tour over the home-page cards with the shared tour
 * engine (window.feedBackTour / Shepherd) and auto-runs it once, the first
 * time the user lands on the home page after completing onboarding. It stays
 * replayable forever from the per-screen "?" tour menu (registered with
 * screens: ['v3-home']).
 *
 * Anchors (all stable, on-screen while #v3-home is active):
 *   #v3-hero               hero / Start Playing      (dashboard.js)
 *   [data-tour="continue"] continue / pick a song    (dashboard.js, 3 variants)
 *   #v3-instrument-wrap    instrument selector badge (badges.js, topbar)
 *   #v3-tuner-wrap         tuner badge               (badges.js, topbar)
 *   #v3-audio-routing      audio routing card        (dashboard.js)
 *   [data-v3-open-profile] profile badge             (profile.js, topbar)
 *   #v3-nav                left sidebar navigation    (index.html)
 */
(function () {
    'use strict';

    var TOUR_ID = 'home-onboarding';

    // Each step dims the page and spotlights one element (shape: 'spotlight').
    // waitFor blocks the step until its target exists, so the async dashboard
    // re-render kicked off by 'v3:profile-updated' can't race the first step.
    function buildSteps() {
        return [
            {
                id: 'hero', shape: 'spotlight', position: 'bottom',
                selector: '#v3-hero', waitFor: '#v3-hero',
                title: 'Welcome to fee[dB]ack',
                content: 'This is your home base. Hit Start Playing to drop straight into a song from your library.',
            },
            {
                id: 'continue', shape: 'spotlight', position: 'left',
                selector: '[data-tour="continue"]', waitFor: '[data-tour="continue"]',
                title: 'Pick up where you left off',
                content: 'Your last song resumes right here in one click. Before you’ve played anything, it’s a quick random pick to get you going.',
            },
            {
                id: 'instrument', shape: 'spotlight', position: 'bottom',
                selector: '#v3-instrument-wrap', waitFor: '#v3-instrument-wrap',
                title: 'Choose your instrument',
                content: 'Set your instrument, string count and tuning here — and if you play left-handed, flip Handedness to Left so the whole highway mirrors. The highway, tuner and scoring all adapt to this selection.',
            },
            {
                id: 'tuner', shape: 'spotlight', position: 'bottom',
                selector: '#v3-tuner-wrap', waitFor: '#v3-tuner-wrap',
                title: 'Tune up first',
                content: 'Open the tuner and match each string until the meter centers — accurate tuning means accurate scoring.',
            },
            {
                id: 'audio', shape: 'spotlight', position: 'top',
                selector: '#v3-audio-routing', waitFor: '#v3-audio-routing',
                title: 'Your signal path',
                content: 'Input → amp / NAM / IR → output, at a glance. Set up and monitor your gear from this card.',
            },
            {
                id: 'profile', shape: 'spotlight', position: 'bottom',
                selector: '[data-v3-open-profile]', waitFor: '[data-v3-open-profile]',
                title: 'Track your progress',
                content: 'Your profile, avatar and rank live here. Watch your accuracy climb and level up as you play.',
            },
            {
                id: 'nav', shape: 'spotlight', position: 'right',
                selector: '#v3-nav', waitFor: '#v3-nav',
                title: 'Find everything here',
                content: 'Browse your full library, lessons and plugins anytime. You can replay this tour from the ? button in the corner.',
            },
        ];
    }

    function register() {
        var t = window.feedBackTour;
        if (!t || typeof t.register !== 'function') return false;
        t.register(TOUR_ID, {
            name: 'Welcome tour',     // label in the "?" tour menu
            screens: ['v3-home'],     // relevant only on the home screen
            autoPrompt: false,        // we auto-run it from onboarding; no toast nag
            buildSteps: buildSteps,
        });
        return true;
    }

    // Auto-run once after a genuine onboarding completion. profile.js gates the
    // call on !editing (a profile edit must not relaunch it); we additionally
    // honour the engine's own seen/dismissed state so it never repeats and a
    // dismissal isn't nagged. Stays replayable from the "?" menu either way.
    function startFirstRun() {
        var t = window.feedBackTour;
        if (!t || typeof t.start !== 'function') return;
        try {
            if (t.hasSeen(TOUR_ID) || t.hasDismissed(TOUR_ID)) return;
        } catch (e) { /* private mode — fall through and attempt once */ }
        // Make sure the home screen is in view so the spotlight targets exist.
        if (typeof window.showScreen === 'function') {
            try { window.showScreen('v3-home'); } catch (e) { /* best-effort */ }
        }
        // Wait for the dashboard to finish (re)rendering #v3-home before
        // attaching Shepherd. Starting after a single animation frame can latch
        // onto the pre-render #v3-hero / [data-tour] nodes that the async render
        // then replaces, breaking the tour. Listen for the render-complete
        // event; fall back on a timeout in case the render already finished
        // (no event coming) or never fires.
        var started = false;
        var go = function () {
            if (started) return;
            started = true;
            try { document.removeEventListener('v3:dashboard-rendered', go); } catch (e) { /* */ }
            try { t.start(TOUR_ID); } catch (e) { /* degrade */ }
        };
        try { document.addEventListener('v3:dashboard-rendered', go, { once: true }); } catch (e) { /* */ }
        setTimeout(go, 1200);
    }

    // Onboarding paths that navigate straight to the player ("Play it now")
    // can't start the tour immediately — there is no home screen to spotlight
    // yet. Arm it to run the first time the user lands back on v3-home.
    function armPendingFirstRun() {
        var t = window.feedBackTour;
        if (!t || typeof t.start !== 'function') return;
        try {
            if (t.hasSeen(TOUR_ID) || t.hasDismissed(TOUR_ID)) return;
        } catch (e) { /* private mode — fall through */ }
        var sm = window.feedBack;
        if (!sm || typeof sm.on !== 'function') return;
        var onScreen = function (e) {
            if (!(e && e.detail && e.detail.id === 'v3-home')) return;
            try { if (typeof sm.off === 'function') sm.off('screen:changed', onScreen); } catch (_) { /* */ }
            startFirstRun();
        };
        sm.on('screen:changed', onScreen);
    }

    window.v3OnboardingTour = { startFirstRun: startFirstRun, armPendingFirstRun: armPendingFirstRun };

    // tour-engine.js assigns window.feedBackTour at script-eval time, so if it
    // is loaded before us register() succeeds immediately; otherwise retry once
    // the DOM (and the engine) are ready.
    if (!register()) {
        document.addEventListener('DOMContentLoaded', register, { once: true });
    }
})();