powergrid-viewer 2.1.4 → 2.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/boardgamers/powergrid.git",
@@ -11,7 +11,7 @@
     "url": "https://github.com/boardgamers/powergrid/issues"
   },
   "dependencies": {
-    "@boardgamers/protocol": "0.2.2",
+    "@boardgamers/protocol": "0.3.3",
     "core-js": "^3.6.5",
     "lodash": "^4.17.19",
     "regenerator-runtime": "^0.13.7",
@@ -19,6 +19,7 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",
+    "zod": "4.6.4",
     "powergrid-engine": "2.0.6"
   },
   "devDependencies": {
@@ -27,6 +28,8 @@
     "@types/events": "^3.0.0",
     "@types/lodash": "^4.14.154",
     "@types/mocha": "^5.2.4",
+    "@types/node": "15.3.0",
+    "@types/webpack-env": "1.18.8",
     "@typescript-eslint/parser": "^4.26.1",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-typescript": "~4.4.0",
@@ -56,6 +59,10 @@
     "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "package": "vue-cli-service build --target lib --name powergrid-viewer src/wrapper.ts",
-    "test:browser": "node scripts/protocol-smoke.mjs"
+    "test:browser": "node scripts/protocol-smoke.mjs",
+    "test:tutorial": "node --test tests/tutorial/lessons.cjs",
+    "test:tutorial:browser": "node scripts/tutorial-smoke.mjs",
+    "preview:tutorial": "node scripts/tutorial-preview.mjs",
+    "tutorial:manifest": "node scripts/tutorial-manifest.cjs"
   }
 }

package/src/components/Game.vue

@@ -26,6 +26,8 @@
                     ref="cityCount"
                     :transform="`translate(${G.map.cityCountPosition[0]}, ${G.map.cityCountPosition[1]})`"
                     :playerColors="playerColors"
+                    :paymentTable="G.paymentTable"
+                    :compact="stacked"
                     :citiesToEndGame="G.citiesToEndGame"
                     :citiesToStep2="G.map.name === 'Manhattan' ? undefined : G.citiesToStep2"
                 />
@@ -72,7 +74,7 @@
                 </template>
             </g>
 
-            <g ref="slotPowerPlantMarket" :transform="slotT('powerPlantMarket')">
+            <g ref="slotPowerPlantMarket" data-tutorial="plants" :transform="slotT('powerPlantMarket')">
                 <PowerPlantMarket
                     ref="powerPlantMarket"
                     :transform="`translate(${G.map.powerPlantMarketPosition[0]}, ${G.map.powerPlantMarketPosition[1]})`"
@@ -89,12 +91,13 @@
                 />
             </g>
 
-            <g ref="slotMap" :transform="slotT('map')">
+            <g ref="slotMap" data-tutorial="map" :transform="slotT('map')">
                 <Map
                     ref="map"
                     :transform="mapTransform"
                     :playerColors="playerColors"
                     :cities="G.map.cities"
+                    :tutorialCity="tutorialCity"
                     :connections="G.map.connections"
                     :polygons="G.map.polygons"
                     :buildableCities="getBuildableCities()"
@@ -147,7 +150,7 @@
                 <ResourceViewButton :showTrack="showResourceTrack" @select="setResourceView($event)" />
             </g>
 
-            <g ref="slotResources" :transform="slotT('resources')">
+            <g ref="slotResources" data-tutorial="resources" :transform="slotT('resources')">
                 <!-- On a phone the printed price track is a strip of unreadable
                      columns, so the stacked layout defaults to one box per buyable
                      source. It is still only a default: the switch above this row
@@ -356,13 +359,14 @@
 
             <g
                 ref="slotButtons"
+                data-tutorial="turn"
                 :transform="slotT('buttons') || `translate(${G.map.buttonsPosition[0]}, ${G.map.buttonsPosition[1]})`"
             >
                 <PassButton
                     transform="translate(15, 15)"
                     :enabled="canPass()"
                     :highlightButton="canPass() && !preferences.disableHelp"
-                    :text="canUndo() ? 'Done' : 'Pass'"
+                    :text="tutorialMove || canUndo() ? 'Done' : 'Pass'"
                     @click="checkPass()"
                 />
                 <UndoButton
@@ -388,7 +392,7 @@
                 />
             </g>
 
-            <g ref="slotPlayerBoards" :transform="slotT('playerBoards')">
+            <g ref="slotPlayerBoards" data-tutorial="players" :transform="slotT('playerBoards')">
                 <template v-for="(playerIndex, i) in adjustedPlayerOrder">
                     <PlayerBoard
                         :key="'B' + playerIndex"
@@ -720,16 +724,21 @@
                         <strong>Payment Table</strong>
                         <div class="table-scroll">
                             <table class="payment-table">
+                                <!-- The whole table, so this agrees with the city track on the
+                                     board. Counting to citiesToEndGame stopped one column short
+                                     of the number that ends the game — and a player can finish
+                                     holding more cities than that, having built in the same
+                                     phase as whoever triggered it. -->
                                 <tr>
-                                    <td><strong>Cities</strong></td>
-                                    <template v-for="index in G.citiesToEndGame">
-                                        <td :key="'cities' + index">{{ index - 1 }}</td>
+                                    <td><strong>Powered cities</strong></td>
+                                    <template v-for="(income, count) in G.paymentTable">
+                                        <td :key="'cities' + count">{{ count }}</td>
                                     </template>
                                 </tr>
                                 <tr>
                                     <td><strong>Payment</strong></td>
-                                    <template v-for="index in G.citiesToEndGame">
-                                        <td :key="'payment' + index">${{ G.paymentTable[index - 1] }}</td>
+                                    <template v-for="(income, count) in G.paymentTable">
+                                        <td :key="'payment' + count">${{ income }}</td>
                                     </template>
                                 </tr>
                             </table>
@@ -935,6 +944,15 @@ export default class Game extends Vue {
     @Prop()
     emitter!: EventEmitter;
 
+    @Prop({ default: false })
+    interactionDisabled!: boolean;
+
+    @Prop()
+    tutorialMove?: (move: Move) => void;
+
+    @Prop()
+    tutorialCity?: string;
+
     @Prop()
     avatars!: string[];
 
@@ -1022,6 +1040,17 @@ export default class Game extends Vue {
 
     @Watch('state', { immediate: true })
     onStateChanged(state: GameState) {
+        if (this.tutorialMove) {
+            // Tutorial moves are individual engine checkpoints, not server turn buffers.
+            // Rewinds must also clear temporary UI selections from a later step.
+            this.turnMoves = [];
+            this.G = null;
+            this.confirmVisible = this.discardVisible = this.endScoreVisible = false;
+            this.soleBuyerPlant = null;
+            this.totalBid = 0;
+            this.replaceState(state);
+            return;
+        }
         if (state && state.newTurn !== false) {
             // Committed state. Usually this clears the turn buffer (our own turn came
             // back committed), but during the simultaneous Bureaucracy phase it can be
@@ -1610,7 +1639,12 @@ export default class Game extends Vue {
     }
 
     sendMove(move) {
-        if (this.paused) {
+        if (this.paused || this.interactionDisabled) {
+            return;
+        }
+
+        if (this.tutorialMove) {
+            this.tutorialMove(move);
             return;
         }
 
@@ -1622,10 +1656,13 @@ export default class Game extends Vue {
                 : undefined;
         const theServerOfferedThisMove = !!offeredWhenClicked && !!offeredWhenClicked[move.name];
 
-        // Stamp the move ONCE, when it enters the turn buffer, so the engine can
-        // advance the per-player clocks. The engine never reads the system clock
-        // itself — the stamp travels with the move on every resend of the buffer, so
-        // replays (and the eventual committed log) reproduce the same times.
+        // Stamp the move ONCE, when it enters the turn buffer. This client stamp is the
+        // move's identity for reconciling the buffer against the server's echo, and it
+        // drives the clocks in the LOCAL preview below. The engine never reads the system
+        // clock itself, so the stamp travels with the move on every resend of the buffer.
+        // For the authoritative per-player clocks the server re-stamps a single server
+        // clock (`serverTime`) in `wrapper.move`: browser clocks are skewed, and a stamp
+        // shared across players is what keeps a fast clock from inflating its own timer.
         const stamped = { ...move, time: Date.now() };
         this.turnMoves.push(stamped);
 
@@ -1713,6 +1750,7 @@ export default class Game extends Vue {
 
     canMove() {
         return (
+            !this.interactionDisabled &&
             this.player != undefined &&
             this.G &&
             this.G.currentPlayers.includes(this.player!) &&
@@ -2622,7 +2660,12 @@ text {
 .modal {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
+    // Above the sticky status bar (z-index 10), which is painted by the page behind
+    // the overlay rather than through it. The modal opens 10vh down and the bar is a
+    // fixed 40px, so on a short viewport — a phone held sideways — the bar landed on
+    // the dialog's own header and covered the close button, leaving no way out of the
+    // dialog at all.
+    z-index: 20;
     padding-top: 10vh; /* Location of the box */
     left: 0;
     top: 0;

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

@@ -10,6 +10,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}`);

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);
         }
     });