powergrid-viewer 2.1.5 → 2.1.7

package/src/components/RoundPlanner.vue

@@ -0,0 +1,120 @@
+<template>
+    <section class="round-planner" aria-label="Round planning">
+        <template v-if="plan">
+            <div class="planner-strip">
+                <div v-if="queueable || hasQueue" class="planner-controls">
+                    <button
+                        v-if="queueable"
+                        class="primary"
+                        :disabled="pending"
+                        :title="
+                            playsNow
+                                ? 'Play this phase and queue the remaining moves'
+                                : 'Queue these moves for your turn'
+                        "
+                        @click="$emit('queue')"
+                    >
+                        Validate
+                    </button>
+                    <button v-if="hasQueue" :disabled="pending" @click="$emit('cancel')">Cancel premoves</button>
+                </div>
+            </div>
+            <p v-if="!queueable && queueHint" class="muted queue-hint">{{ queueHint }}</p>
+            <p v-if="liveChanged" class="notice">
+                The live game changed. Costs and fuel will be checked again before queueing.
+            </p>
+            <p v-if="plan.finalScoring" class="muted">
+                The end-game threshold is reached. Final scoring uses the most cities you can power with your fuel;
+                there is no normal income payment.
+            </p>
+        </template>
+        <p v-if="queue && queue.notice" role="status" class="notice">{{ queue.notice }}</p>
+        <p v-if="pending" role="status">Saving premoves…</p>
+        <p v-if="error" role="status" class="notice">{{ error }}</p>
+    </section>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import type { RoundPlan } from 'powergrid-engine/src/planning';
+import type { PremovePlan } from 'powergrid-engine/src/premoves';
+export default Vue.extend({
+    props: {
+        plan: { type: Object as () => RoundPlan | null, default: null },
+        queue: { type: Object as () => PremovePlan | undefined, default: undefined },
+        liveChanged: Boolean,
+        queueable: Boolean,
+        playsNow: Boolean,
+        pending: Boolean,
+        error: String,
+        queueHint: String,
+    },
+    computed: {
+        hasQueue(): boolean {
+            return !!this.queue?.phases.length;
+        },
+    },
+});
+</script>
+<style scoped>
+.round-planner,
+.planner-strip {
+    display: contents;
+}
+.planner-controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding: 5px 10px 5px 0;
+    font: 14px Arial, sans-serif;
+    color: #f0f2e9;
+}
+p {
+    margin: 6px 0;
+}
+button {
+    font: inherit;
+    border: 1px solid #68725f;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    padding: 5px 10px;
+    cursor: pointer;
+}
+button:hover {
+    background: #35412b;
+}
+button:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+.primary {
+    background: #9acd32;
+    color: #182007;
+    border-color: #9acd32;
+    font-weight: 600;
+}
+.primary:hover {
+    background: #b0df52;
+}
+.round-planner > p {
+    flex-basis: 100%;
+    padding: 0 12px;
+    margin: 0 0 8px;
+    font: 13px Arial, sans-serif;
+}
+.muted {
+    color: #bcc7ad;
+    font-size: 13px;
+}
+button:focus-visible {
+    outline: 2px solid #d7ed95;
+    outline-offset: 2px;
+}
+.queue-hint {
+    margin: 7px 0 0;
+}
+.notice {
+    color: #efcb88;
+}
+</style>

package/src/components/boards/CityCount.vue

@@ -1,40 +1,72 @@
 <template>
-    <g>
-        <rect width="730" height="50" x="10" y="10" rx="3" fill="goldenrod" />
-        <template v-for="index in 21">
+    <g class="city-count-track">
+        <g v-for="row in compact ? 2 : 1" :key="'row' + row" :transform="`translate(0, ${(row - 1) * 70})`">
+            <rect :width="compact ? 367 : 730" height="68" x="10" y="10" rx="3" fill="goldenrod" />
+            <rect :width="compact ? 359 : 722" height="20" x="14" y="56" rx="2" fill="#365343" />
+        </g>
+        <g
+            v-for="(income, count) in paymentTable"
+            :key="count"
+            :transform="`translate(${cellX(count)}, ${cellY(count)})`"
+        >
+            <title>
+                {{ count }} powered {{ count === 1 ? 'city' : 'cities' }}: ${{ income }} total income, before any map
+                penalties. Houses mark cities built.
+            </title>
             <rect
-                :key="'playerCityCount' + index"
                 width="28"
                 height="38"
-                :x="46 + 33 * (index - 1)"
-                y="16"
+                x="13"
+                y="14"
                 rx="2"
                 fill="darkgoldenrod"
-                :stroke="index == citiesToStep2 || index == citiesToEndGame ? '#916a08' : 'darkgoldenrod'"
+                :stroke="count == citiesToStep2 || count == citiesToEndGame ? '#916a08' : 'darkgoldenrod'"
                 stroke-width="2px"
             />
             <text
-                :key="'playerCityCountText' + index"
                 text-anchor="middle"
                 style="font-size: 24px; font-family: monospace"
                 letter-spacing="-2"
-                :x="59 + 33 * (index - 1)"
-                y="35"
+                x="26"
+                y="27"
                 fill="gold"
             >
-                {{ index }}
+                {{ count }}
             </text>
-        </template>
-        <template v-for="house in houses">
+            <line v-if="count % (compact ? 11 : 22) > 0" x1="10.5" x2="10.5" y1="61" y2="71" stroke="#607765" />
+            <text
+                class="city-income"
+                x="27"
+                y="66"
+                text-anchor="middle"
+                style="font-size: 15px; dominant-baseline: central"
+                fill="#fff3cf"
+            >
+                {{ income }}
+            </text>
+        </g>
+        <!-- Keep row placement synchronous so the portrait layout measures the new track bounds. -->
+        <g
+            v-for="house in houses"
+            :key="house.id"
+            :transform="`translate(${cellX(house.cityCount)}, ${cellY(house.cityCount)})`"
+        >
             <House
-                :key="house.id"
                 :pieceId="house.id"
                 :targetState="{ x: house.x, y: house.y }"
                 :owner="house.owner"
                 :ownerName="house.ownerName"
                 :color="house.color"
+                :scale="0.03"
             />
-        </template>
+        </g>
+        <g class="city-income-legend" :transform="`translate(0, ${compact ? 157 : 87})`">
+            <circle cx="21" cy="0" r="7" fill="#365343" />
+            <text x="21" text-anchor="middle" font-size="11" fill="#fff3cf">$</text>
+            <text x="33" y="0" style="font-size: 13px; dominant-baseline: central" fill="#29432e">
+                Total income for powered cities
+            </text>
+        </g>
     </g>
 </template>
 
@@ -44,6 +76,15 @@ import { Vue, Component, Prop } from 'vue-property-decorator';
 import { House } from '../pieces';
 import { Piece } from '../../types/ui-data';
 
+// The House piece at the 0.03 scale this track draws it, rounded to whole units: the
+// path spans 3-396 x 4-456, so 12 x 14 on the board. Used as the grid pitch below.
+const HOUSE_WIDTH = 12;
+const HOUSE_HEIGHT = 14;
+// The cell rect the template draws at x 13 y 14, 28 x 38 — houses are placed against
+// its bottom edge, clear of the income strip that starts 4 units below it.
+const CELL_CENTRE_X = 27;
+const CELL_BOTTOM = 52;
+
 @Component({
     components: {
         House
@@ -53,8 +94,18 @@ export default class CityCount extends Vue {
     @Prop() citiesToStep2?: number;
     @Prop() citiesToEndGame?: number;
     @Prop() playerColors?: string[];
+    @Prop({ required: true }) paymentTable!: number[];
+    @Prop({ default: false }) compact!: boolean;
+
+    houses: (Piece & { cityCount: number })[] = [];
 
-    houses: Piece[] = [];
+    cellX(count: number) {
+        return 33 * (this.compact ? count % 11 : count);
+    }
+
+    cellY(count: number) {
+        return this.compact ? Math.floor(count / 11) * 70 : 0;
+    }
 
     createPieces(gameState: GameState) {
         this.houses = [];
@@ -63,18 +114,33 @@ export default class CityCount extends Vue {
 
         gameState.players.forEach((player, pi) => adjustCityCount[player.cities.length].push(pi));
         gameState.players.forEach((player, pi) => {
-            let x = (adjustCityCount[player.cities.length].length == 1 ? 23 : 20) + 33 * player.cities.length;
-            x += (adjustCityCount[player.cities.length].indexOf(pi) % 2) * 6;
+            // Players sharing a count get a grid, bottom-aligned in the cell so it grows
+            // upward from the income strip and leaves the digit above readable. At the
+            // old 6px/3px offsets even TWO players on the same number — the ordinary
+            // case all game — overlapped by half and read as one smudge.
+            //
+            // Five or six share go three wide rather than three tall: a third row starts
+            // at the top of the cell and hides the number completely, which is every
+            // game's opening position. Three columns only have to overlap by a few
+            // pixels, and the cells are spaced wider than they are drawn.
+            const sharing = adjustCityCount[player.cities.length];
+            const seat = sharing.indexOf(pi);
+            const cols = sharing.length > 4 ? 3 : 2;
+            const pitch = cols === 3 ? 9 : HOUSE_WIDTH;
+            const rows = Math.ceil(sharing.length / cols);
 
             this.houses.push({
                 id: pi + '_cityCount',
-                x: x,
-                y:
-                    15 +
-                    (adjustCityCount[player.cities.length].indexOf(pi) * 30) /
-                    adjustCityCount[player.cities.length].length,
+                cityCount: player.cities.length,
+                // CELL_CENTRE_X/BOTTOM are the darkgoldenrod cell drawn in the template.
+                x:
+                    sharing.length == 1
+                        ? CELL_CENTRE_X - HOUSE_WIDTH / 2
+                        : CELL_CENTRE_X - ((cols - 1) * pitch + HOUSE_WIDTH) / 2 + (seat % cols) * pitch,
+                y: CELL_BOTTOM - rows * HOUSE_HEIGHT + Math.floor(seat / cols) * HOUSE_HEIGHT,
                 color: this.playerColors![pi],
                 owner: pi,
+                ownerName: player.name,
             });
         });
     }

package/src/components/boards/Map.vue

@@ -193,6 +193,7 @@
             <circle
                 v-if="city.connectionCost == null"
                 :key="city.name + '_circle2'"
+                :data-tutorial="city.name === tutorialCity ? 'destination' : undefined"
                 :class="[{ canClick: canBuild(city) || canPickRegion(city) }]"
                 r="20"
                 :cx="city.x"
@@ -460,6 +461,21 @@
                 stroke-linecap="round"
             />
         </g>
+        <g v-if="guidedCity" pointer-events="none">
+            <circle :cx="guidedCity.x" :cy="guidedCity.y" r="29" fill="none" stroke="#a96600" stroke-width="4" />
+            <text
+                :x="guidedCity.x"
+                :y="guidedCity.y - 37"
+                text-anchor="middle"
+                fill="#233745"
+                stroke="#fffef5"
+                stroke-width="6"
+                paint-order="stroke"
+                font-size="19"
+                font-weight="600"
+                v-text="guidedCity.name"
+            />
+        </g>
     </g>
 </template>
 
@@ -481,6 +497,8 @@ const CITY_RING_RADIUS = 25;
     },
 })
 export default class Map extends Vue {
+    @Prop() tutorialCity?: string;
+    get guidedCity() { return this.cities?.find((city) => city.name === this.tutorialCity); }
     @Prop() polygons?: Polygon[];
     @Prop() cities?: City[];
     @Prop() connections?: Connection[];
@@ -553,6 +571,7 @@ export default class Map extends Vue {
                     y: city.y + offsetY,
                     color: this.playerColors![pi],
                     owner: pi,
+                    ownerName: player.name,
                     scale: pieceScale,
                 });
             });

package/src/components/pieces/House.vue

@@ -22,7 +22,7 @@
             stroke-width="12"
             stroke-miterlimit="10"
         />
-        <title>{{ ownerName }}'s House</title>
+        <title>{{ houseTitle }}</title>
     </g>
 </template>
 <script lang="ts">
@@ -50,5 +50,11 @@ export default class House extends Mixins(Piece) {
 
     @Prop()
     ownerName?: string;
+
+    get houseTitle() {
+        if (this.owner !== undefined && this.owner === this.player) return 'Your House';
+        if (this.ownerName) return `${this.ownerName}'s House`;
+        return this.owner === undefined ? 'House' : `Player ${this.owner + 1}'s House`;
+    }
 }
 </script>

package/src/game-chat.ts

@@ -69,6 +69,32 @@ export function mountGameChat(emitter: ViewerEmitter<any, any>, host: Element):
     shortcutCount.className = 'chat-shortcut-count';
     shortcut.append(shortcutCount);
     (host.querySelector('.chat-tabs-host') || slot).append(shortcut);
+    function positionShortcut() {
+        shortcut.style.bottom = '';
+        if (shortcut.hidden) return;
+        const box = shortcut.getBoundingClientRect();
+        let top = box.top;
+        const controls = Array.from(host.querySelectorAll('#scene g.button'))
+            .map((control) => control.getBoundingClientRect())
+            .filter((control) => control.left < box.right && control.right > box.left)
+            .sort((a, b) => b.top - a.top);
+        for (const control of controls) {
+            if (control.top < top + box.height && control.bottom > top) top = control.top - box.height - 8;
+        }
+        if (top !== box.top) shortcut.style.bottom = `${window.innerHeight - top - box.height}px`;
+    }
+    let positionFrame: number | undefined;
+    function scheduleShortcutPosition() {
+        if (positionFrame !== undefined) return;
+        positionFrame = window.requestAnimationFrame(() => {
+            positionFrame = undefined;
+            positionShortcut();
+        });
+    }
+    window.addEventListener('scroll', scheduleShortcutPosition, { passive: true });
+    window.addEventListener('resize', scheduleShortcutPosition);
+    const layoutObserver = new ResizeObserver(scheduleShortcutPosition);
+    layoutObserver.observe(host);
     const feeds = host.querySelector<HTMLElement>('.journal-and-chat');
     const tabs = document.createElement('nav');
     tabs.className = 'game-feed-tabs';
@@ -114,6 +140,7 @@ export function mountGameChat(emitter: ViewerEmitter<any, any>, host: Element):
         shortcut.hidden = chatVisible || !count;
         shortcut.setAttribute('aria-label', `Open ${label}`);
         chatTab.textContent = label;
+        positionShortcut();
     }
     shortcut.onclick = () => {
         selectFeed('chat');
@@ -149,6 +176,10 @@ export function mountGameChat(emitter: ViewerEmitter<any, any>, host: Element):
     dispose.push(() => tabs.remove());
     return () => {
         dispose.forEach((cleanup) => cleanup());
+        window.removeEventListener('scroll', scheduleShortcutPosition);
+        window.removeEventListener('resize', scheduleShortcutPosition);
+        layoutObserver.disconnect();
+        if (positionFrame !== undefined) window.cancelAnimationFrame(positionFrame);
         view.destroy();
         shortcut.remove();
         style.remove();
@@ -192,6 +223,6 @@ export function installLocalChat(emitter: ChatEmitter): void {
                 createdAt: new Date().toISOString(),
             },
         ]);
-        emitter.emit('chat:result', { requestId, ok: true });
+        if (requestId) emitter.emit('chat:result', { requestId, ok: true });
     });
 }

package/src/launch.ts

@@ -1,6 +1,7 @@
 import { createViewer } from '@boardgamers/protocol/viewer';
 import { EventEmitter } from 'events';
 import type { GameState, Move } from 'powergrid-engine';
+import type { PremoveCommand } from 'powergrid-engine/src/premoves';
 import Vue from 'vue';
 import Game from './components/Game.vue';
 import { mountGameChat } from './game-chat';
@@ -10,6 +11,11 @@ import { shouldAdoptLogState } from './util/turn-buffer';
 
 let dispose: (() => void) | undefined;
 
+export function destroyViewer() {
+    dispose?.();
+    dispose = undefined;
+}
+
 function launch(selector: string) {
     const target = document.querySelector(selector);
     if (!target) throw new Error(`Viewer mount point not found: ${selector}`);
@@ -46,7 +52,7 @@ function launch(selector: string) {
     }).$mount(mountPoint);
 
     let replaying = false;
-    const viewer = createViewer<GameState, Move[]>({
+    const viewer = createViewer<GameState, Move[] | PremoveCommand>({
         async onState(data) {
             params.state = data;
             app.$forceUpdate();
@@ -92,6 +98,7 @@ function launch(selector: string) {
     });
     const item = viewer.emitter;
     params.emitter.on('move', (moves: Move[]) => viewer.move(moves));
+    params.emitter.on('premoves', (command: PremoveCommand) => viewer.move(command));
     params.emitter.on('fetchState', () => viewer.fetchState());
     params.emitter.on('addLog', (data: string[]) => viewer.addLog(data));
     params.emitter.on('replaceLog', (data: string[]) => viewer.replaceLog(data));

package/src/self-contained.ts

@@ -1,7 +1,8 @@
 import { cloneDeep } from 'lodash';
-import { move as execMove, Move, Phase, setup, stripSecret } from 'powergrid-engine';
-import { moveAI } from 'powergrid-engine/src/engine';
+import { Move, Phase, setup, stripSecret } from 'powergrid-engine';
 import type { MapName, Variant } from 'powergrid-engine/src/gamestate';
+import type { PremoveCommand } from 'powergrid-engine/src/premoves';
+import { move as wrapperMove, moveAI as wrapperAI } from 'powergrid-engine/wrapper';
 import { installLocalChat } from './game-chat';
 import launch from './launch';
 import { mountSoundTests } from './sounds';
@@ -60,16 +61,13 @@ function launchSelfContained(selector = '#app') {
         if (player.id != playerIndex) player.isAI = true;
     }
 
-    emitter.on('move', async (moves: Move | Move[]) => {
-        setTimeout(() => {
+    emitter.on('move', async (moves: Move[] | PremoveCommand) => {
+        setTimeout(async () => {
             console.log('moves received', moves);
 
             // Mimic the platform: replay the whole turn buffer from the last committed
             // state; only keep (persist) the result once the turn is committed.
-            let newState = cloneDeep(gameState);
-            for (const move of Array.isArray(moves) ? moves : [moves]) {
-                newState = execMove(newState, move, playerIndex);
-            }
+            const newState = await wrapperMove(cloneDeep(gameState), moves, playerIndex);
             console.log('new game state', newState);
 
             if (newState.newTurn === false) {
@@ -84,7 +82,7 @@ function launchSelfContained(selector = '#app') {
             let delay = delayBase;
             const moveAIAux = () => {
                 if (gameState.players.some((pl) => pl.isAI && pl.availableMoves)) {
-                    gameState = moveAI(
+                    gameState = wrapperAI(
                         gameState,
                         gameState.players.findIndex((pl) => pl.isAI && pl.availableMoves)
                     );
@@ -114,7 +112,7 @@ function launchSelfContained(selector = '#app') {
 
     let delay = delayBase;
     while (gameState.players.some((pl) => pl.isAI && pl.availableMoves)) {
-        gameState = moveAI(
+        gameState = wrapperAI(
             gameState,
             gameState.players.findIndex((pl) => pl.isAI && pl.availableMoves)
         );

package/src/sounds.ts

@@ -102,7 +102,7 @@ export function installActionSounds(emitter: Pick<ViewerEmitter<any, any>, 'on'>
     let previous: string[] | undefined;
     let replaying = false;
     emitter.on('update:preference', (pref) => {
-        if (pref?.name === 'sound') {
+        if (pref?.name === 'sound' && typeof pref.value === 'boolean') {
             setSoundEnabled(pref.value);
         }
     });