powergrid-viewer 1.5.4

package/src/launch.ts

@@ -0,0 +1,87 @@
+import { EventEmitter } from 'events';
+import type { GameState, Move } from 'powergrid-engine';
+import Vue from 'vue';
+import Game from './components/Game.vue';
+import type { Preferences } from './types/ui-data';
+
+function launch(selector: string) {
+    let params: {
+        state: null | GameState;
+        player?: number;
+        emitter: EventEmitter;
+        preferences: Preferences;
+        avatars: string[];
+    } = {
+        state: null,
+        emitter: new EventEmitter(),
+        preferences: {
+            sound: true,
+            disableHelp: false,
+            adjustPlayerOrder: false,
+            undoWholeTurn: true,
+            fitToScreen: true,
+        },
+        avatars: [],
+    };
+
+    const app = new Vue({
+        render: (h) => h(Game, { props: params }, []),
+    }).$mount(selector);
+
+    const item: EventEmitter = new EventEmitter();
+    let replaying = false;
+
+    params.emitter.on('move', (move: Move) => item.emit('move', move));
+    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) => {
+        params.preferences = { ...params.preferences, ...data };
+        app.$forceUpdate();
+    });
+    item.addListener('gamelog', (_) => {
+        if (replaying) {
+            return;
+        }
+
+        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');
+    });
+
+    return item;
+}
+
+export default launch;

package/src/main.ts

@@ -0,0 +1,3 @@
+import launchSelfContained from './self-contained';
+
+launchSelfContained();

package/src/self-contained.ts

@@ -0,0 +1,97 @@
+import { cloneDeep } from 'lodash';
+import { move as execMove, Move, Phase, setup, stripSecret } from 'powergrid-engine';
+import { moveAI } from 'powergrid-engine/src/engine';
+import launch from './launch';
+
+const delayBase = 0;
+
+function launchSelfContained(selector = '#app') {
+    const strip = true;
+
+    const emitter = launch(selector);
+
+    let gameState = setup(3, { map: 'Brazil', variant: 'original', showMoney: true, randomizeMap: true }, '3');
+
+    // gameState.map.viewBox = [1480, 1060];
+    // gameState.map.playerOrderPosition = [1160, 140];
+    // gameState.map.cityCountPosition = [0, 0];
+    // gameState.map.powerPlantMarketPosition = [745, 0];
+    // gameState.map.mapPosition = [0, 100];
+    // gameState.map.buttonsPosition = [1305, 0];
+    // gameState.map.playerBoardsPosition = [1105, 200];
+    // gameState.map.roundInfoPosition = [20, 590];
+    // gameState.map.supplyPosition = [0, 720];
+
+    // gameState.map.adjustRatio = [1, 1];
+    // gameState.map.cities = gameState.map.cities.map(city => ({
+    //     ...city,
+    //     x: city.x * gameState.map.adjustRatio![0],
+    //     y: city.y * gameState.map.adjustRatio![1]
+    // }));
+
+    // gameState.map.cities = gameState.map.cities.map(city => ({
+    //     ...city,
+    //     x: city.y,
+    //     y: 600 - city.x
+    // }));
+
+    for (let i = 0; i < gameState.players.length; i++) {
+        gameState.players[i].name = `Player ${i + 1}`;
+    }
+
+    let playerIndex = 1;
+
+    for (const player of gameState.players) {
+        if (player.id != playerIndex) player.isAI = true;
+    }
+
+    emitter.on('move', async (move: Move) => {
+        setTimeout(() => {
+            console.log('move received', move);
+            gameState = execMove(gameState, move, playerIndex);
+            console.log('new game state', gameState);
+
+            emitter.emit('state', cloneDeep(strip ? stripSecret(gameState, playerIndex) : gameState));
+
+            let delay = delayBase;
+            const moveAIAux = () => {
+                if (gameState.players.some((pl) => pl.isAI && pl.availableMoves)) {
+                    gameState = moveAI(
+                        gameState,
+                        gameState.players.findIndex((pl) => pl.isAI && pl.availableMoves)
+                    );
+                    let newState = cloneDeep(strip ? stripSecret(gameState, playerIndex) : gameState);
+                    console.log('new game state', newState);
+                    emitter.emit('state', newState);
+                    setTimeout(moveAIAux, gameState.phase == Phase.Bureaucracy ? delay : 0);
+                }
+            };
+
+            setTimeout(moveAIAux, gameState.phase == Phase.Bureaucracy ? delay : 0);
+
+            console.log('available moves', gameState.players[playerIndex].availableMoves);
+        }, 100);
+    });
+
+    emitter.on('fetchState', () => {
+        emitter.emit('state', cloneDeep(strip ? stripSecret(gameState, playerIndex) : gameState));
+    });
+
+    emitter.emit('player', { index: playerIndex });
+    emitter.emit('state', cloneDeep(strip ? stripSecret(gameState, playerIndex) : gameState));
+
+    let delay = delayBase;
+    while (gameState.players.some((pl) => pl.isAI && pl.availableMoves)) {
+        gameState = moveAI(
+            gameState,
+            gameState.players.findIndex((pl) => pl.isAI && pl.availableMoves)
+        );
+        let newState = cloneDeep(strip ? stripSecret(gameState, playerIndex) : gameState);
+        setTimeout(() => emitter.emit('state', newState), delay);
+        delay += delayBase;
+    }
+
+    console.log('available moves', gameState.players[playerIndex].availableMoves);
+}
+
+export default launchSelfContained;

package/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+    namespace JSX {
+        // tslint:disable no-empty-interface
+        interface Element extends VNode {}
+        // tslint:disable no-empty-interface
+        interface ElementClass extends Vue {}
+        interface IntrinsicElements {
+            [elem: string]: any;
+        }
+    }
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}

package/src/types/ui-data.ts

@@ -0,0 +1,34 @@
+import { PowerPlant } from 'powergrid-engine/src/gamestate';
+
+export interface UIData {
+    waitingAnimations: number;
+}
+
+export type Preferences = {
+    sound: boolean;
+    disableHelp: boolean;
+    adjustPlayerOrder: boolean;
+    undoWholeTurn: boolean;
+    fitToScreen: boolean;
+};
+
+export interface Piece {
+    id: string;
+    x: number;
+    y: number;
+    owner?: number;
+    ownerName?: string;
+    color?: string;
+    powerPlant?: PowerPlant;
+    transparent?: boolean;
+}
+
+export enum PieceType {
+    House,
+    Card,
+    Coal,
+    Oil,
+    Garbage,
+    Uranium,
+    Hybrid,
+}

package/src/wrapper.ts

@@ -0,0 +1,8 @@
+// Import vue component
+import launch from './launch';
+
+if (typeof window !== 'undefined') {
+    (window as any).powergrid = { launch };
+}
+
+export default launch;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        "strict": true,
+        "jsx": "preserve",
+        "importHelpers": true,
+        "moduleResolution": "node",
+        "experimentalDecorators": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "noImplicitAny": false,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "types": ["webpack-env", "mocha", "chai"],
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
+    "exclude": ["node_modules"]
+}