powergrid-viewer 2.1.2 → 2.1.4

package/src/launch.ts

@@ -1,3 +1,4 @@
+import { createViewer } from '@boardgamers/protocol/viewer';
 import { EventEmitter } from 'events';
 import type { GameState, Move } from 'powergrid-engine';
 import Vue from 'vue';
@@ -7,7 +8,14 @@ import { installActionSounds } from './sounds';
 import type { Preferences } from './types/ui-data';
 import { shouldAdoptLogState } from './util/turn-buffer';
 
+let dispose: (() => void) | undefined;
+
 function launch(selector: string) {
+    const target = document.querySelector(selector);
+    if (!target) throw new Error(`Viewer mount point not found: ${selector}`);
+    dispose?.();
+    const mountPoint = document.createElement('div');
+    target.append(mountPoint);
     let params: {
         state: null | GameState;
         player?: number;
@@ -35,75 +43,71 @@ function launch(selector: string) {
 
     const app = new Vue({
         render: (h) => h(Game, { props: params }, []),
-    }).$mount(selector);
+    }).$mount(mountPoint);
 
-    const item: EventEmitter = new EventEmitter();
     let replaying = false;
-
-    // The move payload is the whole current turn so far (an array of atomic moves),
-    // replayed by the engine wrapper from the last committed state.
-    params.emitter.on('move', (moves: Move[]) => item.emit('move', moves));
-    params.emitter.on('fetchState', () => item.emit('fetchState'));
-    params.emitter.on('addLog', (data: string[]) => item.emit('addLog', data));
-    params.emitter.on('replaceLog', (data: string[]) => item.emit('replaceLog', data));
-    params.emitter.on('replay:info', (info: { start: number; current: number; end: number }) =>
-        item.emit('replay:info', info)
-    );
-    params.emitter.on('update:preference', (data: { name: string; value: any }) =>
-        item.emit('update:preference', data)
-    );
-    item.addListener('avatars', (data) => {
-        params.avatars = data;
-        app.$forceUpdate();
-    });
-
-    item.addListener('state', (data) => {
-        params.state = data;
-        app.$forceUpdate();
-        app.$nextTick().then(() => item.emit('ready'));
-    });
-    item.addListener('state:updated', () => item.emit('fetchState'));
-    item.addListener('player', (data) => {
-        params.player = data.index;
-        app.$forceUpdate();
-    });
-    item.addListener('preferences', (data) => {
-        // Mutate (don't replace) the observable object so the update stays reactive
-        Object.assign(params.preferences, data);
-        app.$forceUpdate();
-    });
-    item.addListener('gamelog', (logData) => {
-        if (replaying) {
-            return;
-        }
-
-        if (shouldAdoptLogState(logData?.data?.state)) {
-            // Move responses carry the (possibly tentative) resulting state. Tentative
-            // states are never persisted or broadcast by the platform — this is the
-            // only way they reach the acting player's viewer. Committed states are
-            // refetched; see shouldAdoptLogState for why adopting them is unsafe.
-            params.state = logData.data.state;
+    const viewer = createViewer<GameState, Move[]>({
+        async onState(data) {
+            params.state = data;
             app.$forceUpdate();
-        } else {
-            item.emit('fetchState');
-        }
-    });
-
-    item.addListener('replay:start', () => {
-        params.emitter.emit('replayStart');
-        replaying = true;
-    });
-    item.addListener('replay:to', (info) => {
-        params.emitter.emit('replayTo', info);
-    });
-    item.addListener('replay:end', () => {
-        params.emitter.emit('replayEnd');
-        replaying = false;
-        item.emit('fetchState');
+            await app.$nextTick();
+        },
+        onPlayer(data) {
+            params.player = data.index;
+            app.$forceUpdate();
+        },
+        onPreferences(data) {
+            Object.assign(params.preferences, data);
+            app.$forceUpdate();
+        },
+        onAvatars(data) {
+            params.avatars = data;
+            app.$forceUpdate();
+        },
+        onUpdate() {
+            if (!replaying) viewer.fetchState();
+        },
+        async onLog(logData) {
+            if (replaying) return;
+            const data = logData.data as { state?: GameState } | undefined;
+            // Only tentative move responses may replace the local turn buffer.
+            if (shouldAdoptLogState(data?.state)) {
+                params.state = data!.state!;
+                app.$forceUpdate();
+                await app.$nextTick();
+            } else viewer.fetchState();
+        },
+        onReplayStart() {
+            replaying = true;
+            params.emitter.emit('replayStart');
+        },
+        onReplayTo(index) {
+            params.emitter.emit('replayTo', index);
+        },
+        onReplayEnd() {
+            params.emitter.emit('replayEnd');
+            replaying = false;
+            viewer.fetchState();
+        },
     });
-
+    const item = viewer.emitter;
+    params.emitter.on('move', (moves: Move[]) => viewer.move(moves));
+    params.emitter.on('fetchState', () => viewer.fetchState());
+    params.emitter.on('addLog', (data: string[]) => viewer.addLog(data));
+    params.emitter.on('replaceLog', (data: string[]) => viewer.replaceLog(data));
+    params.emitter.on('replay:info', (info) => viewer.setReplayInfo(info));
+    params.emitter.on('update:preference', ({ name, value }) => viewer.updatePreference(name, value));
     installActionSounds(item);
-    mountGameChat(item, app.$el);
+    const removeChat = mountGameChat(item, app.$el);
+    app.$once('hook:beforeDestroy', () => {
+        removeChat();
+        viewer.destroy();
+        params.emitter.removeAllListeners();
+    });
+    dispose = () => {
+        app.$destroy();
+        target.replaceChildren();
+    };
     return item;
 }
 

package/src/sounds.ts

@@ -1,3 +1,4 @@
+import type { ViewerEmitter } from '@boardgamers/protocol/viewer';
 type Note = [number, number, number, number, number?];
 type Cue = { label: string; notes: Note[] };
 export const soundCues: Record<string, Cue> = {
@@ -97,7 +98,7 @@ export function playSound(name: string): void {
         .catch(() => undefined);
 }
 
-export function installActionSounds(emitter: { on: (event: string, fn: (value: any) => void) => unknown }): void {
+export function installActionSounds(emitter: Pick<ViewerEmitter<any, any>, 'on'>): void {
     let previous: string[] | undefined;
     let replaying = false;
     emitter.on('update:preference', (pref) => {
@@ -139,13 +140,14 @@ export function installActionSounds(emitter: { on: (event: string, fn: (value: a
     };
     emitter.on('state', receiveState);
     emitter.on('gamelog', (event) => {
-        if (event?.data?.state) {
-            receiveState(event.data.state);
+        const data = event?.data as { state?: any } | undefined;
+        if (data?.state) {
+            receiveState(data.state);
         }
     });
 }
 
-export function mountSoundTests(emitter: { emit: (event: string, value: any) => unknown }): void {
+export function mountSoundTests(emitter: Pick<ViewerEmitter<any, any>, 'emit'>): void {
     const panel = document.createElement('details');
     panel.style.cssText =
         'position:relative;z-index:5;padding:10px 16px;margin:8px;background:#172638;color:#f0f4f8;border:1px solid #56718a;border-radius:8px;font:14px system-ui';

package/tsconfig.json

@@ -5,7 +5,7 @@
         "strict": true,
         "jsx": "preserve",
         "importHelpers": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "experimentalDecorators": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
@@ -16,7 +16,9 @@
         "paths": {
             "@/*": ["src/*"]
         },
-        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+        "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+        "skipLibCheck": true,
+        "useDefineForClassFields": false
     },
     "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
     "exclude": ["node_modules"]