powergrid-viewer 2.1.5 → 2.1.6

package/src/tutorial/mount.ts

@@ -0,0 +1,158 @@
+import { createTutorial, TutorialMount, TutorialSnapshot } from '@boardgamers/protocol/tutorial';
+import { mountTutorialGuide } from '@boardgamers/protocol/tutorial/dom';
+import { EventEmitter } from 'events';
+import { GameState, stripSecret } from 'powergrid-engine';
+import Vue from 'vue';
+import Game from '../components/Game.vue';
+import { Action, lessons, LessonState } from './lessons';
+import './tutorial.css';
+
+export const mountTutorial: TutorialMount = async (target, { chapter, onProgress, nextChapter }) => {
+    const lesson = lessons.find((entry) => entry.id === chapter);
+    if (!lesson) throw Error('Unknown Powergrid chapter');
+    target.className = 'powergrid-tutorial';
+    const guide = document.createElement('section');
+    const controls = document.createElement('div');
+    controls.className = 'tutorial-answers';
+    controls.setAttribute('aria-label', 'Lesson answers');
+    const summary = document.createElement('div');
+    summary.className = 'tutorial-summary';
+    const board = document.createElement('div');
+    board.className = 'tutorial-board';
+    target.append(guide, controls, summary, board);
+    const emitter = new EventEmitter();
+    const params = {
+        state: null as GameState | null,
+        player: 0,
+        avatars: ['Y', 'A', 'L'].map(
+            (initial) =>
+                'data:image/svg+xml,' +
+                encodeURIComponent(
+                    `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><circle cx="24" cy="24" r="23" fill="#233745"/><text x="24" y="31" text-anchor="middle" font-family="sans-serif" font-size="24" fill="white">${initial}</text></svg>`
+                )
+        ),
+        tutorialCity: undefined as string | undefined,
+        emitter,
+        preferences: Vue.observable({
+            sound: false,
+            disableHelp: false,
+            adjustPlayerOrder: false,
+            undoWholeTurn: true,
+            fitToScreen: true,
+            stackOnPortrait: true,
+            portraitResourceTrack: false,
+        }),
+        interactionDisabled: false,
+        tutorialMove: (move) => {
+            void play({ kind: 'move', move });
+        },
+    };
+    const app = new Vue({ render: (h) => h(Game, { props: params }) }).$mount(
+        board.appendChild(document.createElement('div'))
+    );
+    let destroyed = false;
+    let animate = false;
+    let timer: number | undefined;
+    let finishFrame: (() => void) | undefined;
+    let latest: TutorialSnapshot<LessonState>;
+    let previous: LessonState | undefined;
+    async function present(game: GameState) {
+        if (destroyed) return;
+        params.state = { ...window.structuredClone(stripSecret(game, 0)), newTurn: true };
+        app.$forceUpdate();
+        await app.$nextTick();
+    }
+    let storage: Storage | undefined;
+    try {
+        storage = localStorage;
+    } catch {
+        /* Saving is optional. */
+    }
+    const controller = await createTutorial({
+        ...lesson,
+        storage,
+        onProgress,
+        async move(state, action) {
+            const frames: GameState[] = [];
+            const result = lesson.move(state, action, (frame) => frames.push(frame));
+            if (animate)
+                for (const frame of frames) {
+                    if (destroyed) break;
+                    await present(frame);
+                    await new Promise<void>((resolve) => {
+                        finishFrame = resolve;
+                        timer = window.setTimeout(
+                            resolve,
+                            window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 450
+                        );
+                    });
+                    finishFrame = undefined;
+                }
+            return result;
+        },
+    });
+    async function play(action: Action) {
+        if (destroyed || latest.busy || latest.completed || latest.canContinue) return;
+        animate = true;
+        try {
+            await controller.play(action);
+        } finally {
+            animate = false;
+        }
+    }
+    let controlStep = -1;
+    const off = controller.subscribe((snapshot) => {
+        latest = snapshot;
+        params.tutorialCity = (
+            { first: 'Essen', second: 'Duisburg', third: 'Dusseldorf', seventh: 'Kassel' } as Record<string, string>
+        )[lesson.steps[snapshot.step]?.id ?? ''];
+        params.interactionDisabled = snapshot.busy || snapshot.completed || snapshot.canContinue;
+        if (previous !== snapshot.state) {
+            previous = snapshot.state;
+            void present(snapshot.state.game);
+            const player = snapshot.state.game.players[0];
+            summary.replaceChildren();
+            for (const text of [
+                `Germany · Classic rules · Round ${snapshot.state.game.round}`,
+                `Cash: $${player.money}`,
+                `Cities: ${player.cities.length}`,
+                `Plant output: ${player.powerPlants.reduce((n, p) => n + p.citiesPowered, 0)}`,
+                `Fuel: ${player.coalLeft} coal · ${player.oilLeft} oil`,
+            ]) {
+                const item = document.createElement('span');
+                item.textContent = text;
+                summary.append(item);
+            }
+        }
+        if (controlStep !== snapshot.step) {
+            controlStep = snapshot.step;
+            controls.replaceChildren();
+            for (const choice of lesson.choices(snapshot.state, lesson.steps[snapshot.step]?.id ?? '')) {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.textContent = choice.label;
+                button.onclick = () => {
+                    void play(choice.action);
+                };
+                controls.append(button);
+            }
+            controls.hidden = !controls.childElementCount;
+        }
+        controls.querySelectorAll('button').forEach((button) => {
+            button.disabled = snapshot.busy || snapshot.completed;
+        });
+        app.$forceUpdate();
+    });
+    const removeGuide = mountTutorialGuide(guide, controller, { nextChapter });
+    return () => {
+        destroyed = true;
+        clearTimeout(timer);
+        finishFrame?.();
+        removeGuide();
+        off();
+        controller.destroy();
+        emitter.removeAllListeners();
+        app.$destroy();
+        target.replaceChildren();
+    };
+};

package/src/tutorial/tutorial.css

@@ -0,0 +1,135 @@
+.powergrid-tutorial {
+    max-width: 1600px;
+    margin: auto;
+    padding: 16px;
+    color: #233745;
+    background: #f0f1e9;
+    font: 16px/1.5 system-ui, sans-serif;
+    box-sizing: border-box;
+}
+.powergrid-tutorial .bgs-tutorial-guide {
+    background: #fffef5;
+    border: 1px solid #c6cbc4;
+    border-top: 4px solid #3c758a;
+    border-radius: 8px;
+    padding: 16px 20px;
+}
+.powergrid-tutorial .bgs-tutorial-heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 12px;
+}
+.powergrid-tutorial .bgs-tutorial-heading strong {
+    font-size: 20px;
+}
+.powergrid-tutorial .bgs-tutorial-body p {
+    max-width: 90ch;
+    margin: 12px 0;
+}
+.powergrid-tutorial .bgs-tutorial-body small {
+    color: #566870;
+    display: block;
+    margin: 12px 0;
+}
+.powergrid-tutorial .bgs-tutorial-body [role='alert'] {
+    color: #a3311d;
+    font-weight: 600;
+}
+.powergrid-tutorial .bgs-tutorial-feedback {
+    background: #e0f0df;
+    border-left: 4px solid #45824b;
+    padding: 10px 14px;
+    margin: 12px 0;
+}
+.powergrid-tutorial .bgs-tutorial-controls,
+.powergrid-tutorial .bgs-tutorial-playback,
+.powergrid-tutorial .bgs-tutorial-help,
+.powergrid-tutorial .tutorial-answers {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.powergrid-tutorial .bgs-tutorial-playback {
+    flex-wrap: nowrap;
+}
+.powergrid-tutorial .bgs-tutorial-help:empty {
+    display: none;
+}
+.powergrid-tutorial button {
+    font: inherit;
+    border: 1px solid #96afb5;
+    border-radius: 6px;
+    padding: 8px 12px;
+    min-height: 40px;
+    background: #edf3f2;
+    color: #234250;
+    cursor: pointer;
+}
+.powergrid-tutorial button:hover:not(:disabled) {
+    background: #d8e8ea;
+}
+.powergrid-tutorial button:focus-visible {
+    outline: 3px solid #267f9f;
+    outline-offset: 2px;
+}
+.powergrid-tutorial button:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+.powergrid-tutorial .bgs-tutorial-transport {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    flex: 0 0 40px;
+    padding: 0;
+}
+.powergrid-tutorial .bgs-tutorial-next-chapter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 40px;
+    white-space: nowrap;
+}
+.powergrid-tutorial .bgs-tutorial-guide [hidden],
+.powergrid-tutorial .tutorial-answers[hidden] {
+    display: none;
+}
+.powergrid-tutorial .tutorial-answers {
+    margin-top: 12px;
+}
+.powergrid-tutorial .tutorial-summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 24px;
+    padding: 14px 4px;
+    font-size: 13px;
+    color: #536568;
+}
+.powergrid-tutorial .tutorial-board {
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+}
+.powergrid-tutorial .bgs-tutorial-highlight {
+    outline: 3px solid #d28913;
+    outline-offset: 3px;
+}
+@media (max-width: 600px) {
+    .powergrid-tutorial {
+        padding: 8px;
+        font-size: 14px;
+    }
+    .powergrid-tutorial .bgs-tutorial-guide {
+        padding: 12px;
+    }
+    .powergrid-tutorial .bgs-tutorial-heading strong {
+        font-size: 17px;
+    }
+    .powergrid-tutorial .tutorial-summary {
+        gap: 5px 12px;
+    }
+}

package/src/wrapper.ts

@@ -1,8 +1,19 @@
-// Import vue component
-import launch from './launch';
+import { createTutorialLauncher, TutorialLaunchOptions } from '@boardgamers/protocol/tutorial';
+import launchGame, { destroyViewer } from './launch';
+import { mountTutorial } from './tutorial/mount';
+
+const tutorial = createTutorialLauncher(mountTutorial);
+export function launch(selector: string) {
+    tutorial.destroy();
+    return launchGame(selector);
+}
+export function launchTutorial(selector: string, options: TutorialLaunchOptions) {
+    destroyViewer();
+    return tutorial.launch(selector, options);
+}
 
 if (typeof window !== 'undefined') {
-    (window as any).powergrid = { launch };
+    (window as any).powergrid = { launch, launchTutorial };
 }
 
 export default launch;

package/tsconfig.json

@@ -12,7 +12,7 @@
         "noImplicitAny": false,
         "sourceMap": true,
         "baseUrl": ".",
-        "types": ["webpack-env", "mocha", "chai"],
+        "types": ["webpack-env", "mocha", "chai", "node"],
         "paths": {
             "@/*": ["src/*"]
         },