powergrid-viewer 2.1.5 → 2.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "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,7 +19,8 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",
-    "powergrid-engine": "2.0.6"
+    "zod": "4.6.4",
+    "powergrid-engine": "2.0.8"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",
@@ -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

@@ -1,7 +1,41 @@
 <template>
     <div :class="['game', { fitToScreen: preferences.fitToScreen && !stacked, stacked: stacked }]">
-        <div class="statusBar">
-            {{ getStatusMessage() }}
+        <div class="planner-header" :class="{ planning: hasPlanPanel }">
+            <div class="statusBar">
+                <span class="status-message">{{ getStatusMessage() }}</span>
+                <button
+                    v-if="!tutorialMove && !paused && canPlanRound && !roundPlan"
+                    class="plan-entry"
+                    :title="
+                        canPreparePremoves
+                            ? 'Plan cities and powering for this round'
+                            : 'Simulate the rest of this round with the game controls'
+                    "
+                    @click="myPhaseQueue && myPhaseQueue.phases.length ? viewQueuedPlan() : startPlanning()"
+                >
+                    <svg width="16" height="16" viewBox="0 0 20 20" aria-hidden="true">
+                        <path d="M3 2v15h15M6 12l4-5 4 3 4-6" fill="none" stroke="currentColor" stroke-width="1.6" />
+                    </svg>
+                    {{ canPreparePremoves ? 'Plan' : 'Simulate'
+                    }}<span v-if="queuedMoveCount">
+                        · {{ queuedMoveCount }} {{ queuedMoveCount === 1 ? 'premove' : 'premoves' }}
+                    </span>
+                </button>
+                <button v-if="roundPlan" class="plan-entry" @click="stopPlanning()">Return to live game</button>
+            </div>
+            <RoundPlanner
+                v-if="!tutorialMove && !paused && hasPlanPanel"
+                :plan="roundPlan"
+                :queue="myPhaseQueue"
+                :queueable="canQueueRound"
+                :plays-now="planPlaysNow"
+                :queue-hint="queueHint"
+                :pending="!!pendingPlanId"
+                :error="planningError"
+                :live-changed="planningChanged"
+                @queue="submitRoundPlan"
+                @cancel="cancelPhasePlan"
+            />
         </div>
         <svg
             v-if="G"
@@ -26,6 +60,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 +108,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 +125,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 +184,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 +393,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 || roundPlan || canUndo() ? 'Done' : 'Pass'"
                     @click="checkPass()"
                 />
                 <UndoButton
@@ -388,7 +426,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 +758,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>
@@ -741,6 +784,7 @@
     </div>
 </template>
 <script lang="ts">
+import { isEqual } from 'lodash';
 import InlineLog from './InlineLog.vue';
 import { Vue, Component, Prop, Watch, Provide, ProvideReactive, Ref } from 'vue-property-decorator';
 import { MoveName, ended, playersSortedByScore, reconstructState } from 'powergrid-engine';
@@ -774,6 +818,17 @@ import PlayerOrder from './boards/PlayerOrder.vue';
 import CityCount from './boards/CityCount.vue';
 import Map from './boards/Map.vue';
 import ResourceBoxes from './boards/ResourceBoxes.vue';
+import RoundPlanner from './RoundPlanner.vue';
+import {
+    copyState,
+    nextPlanningPhase,
+    startRoundPlan,
+    planMove,
+    replayRoundPlan,
+    RoundPlan,
+} from 'powergrid-engine/src/planning';
+import { PhasePlan, PremoveCommand, canQueuePhases } from 'powergrid-engine/src/premoves';
+import { completedPhases } from '../util/round-plan';
 import Resources from './boards/Resources.vue';
 import { LogMove } from 'powergrid-engine/src/log';
 import { Phase, playerTimeUsed, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
@@ -916,6 +971,7 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
         ResourceViewButton,
         Button,
         Calculator,
+        RoundPlanner,
         PowerPlantMarket,
         PlayerOrder,
         CityCount,
@@ -935,6 +991,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[];
 
@@ -1020,8 +1085,194 @@ export default class Game extends Vue {
     // without any server call (the platform's saved state IS the turn start).
     committedState: GameState | null = null;
 
+    roundPlan: RoundPlan | null = null;
+    planningBase: GameState | null = null;
+    planningError = '';
+    pendingPlanId = '';
+    pendingPlanIsCancel = false;
+    pendingPlanTimer: ReturnType<typeof setTimeout> | undefined;
+
+    get canPlanRound(): boolean {
+        return (
+            !this.tutorialMove &&
+            !this.paused &&
+            !this.interactionDisabled &&
+            this.player != undefined &&
+            !!this.committedState &&
+            !!nextPlanningPhase(this.committedState, this.player)
+        );
+    }
+    get canPreparePremoves(): boolean {
+        return !!this.committedState && this.player != null && canQueuePhases(this.committedState, this.player, []);
+    }
+    get hasPlanPanel(): boolean {
+        return !!(
+            this.roundPlan ||
+            this.myPhaseQueue?.notice ||
+            this.planningError ||
+            this.pendingPlanId
+        );
+    }
+    get myPhaseQueue() {
+        return this.committedState?.automation?.plans[this.player!];
+    }
+    get queuedMoveCount(): number {
+        return (this.myPhaseQueue?.phases || []).reduce(
+            // An otherwise empty phase still queues the decision to finish it.
+            (count, phase) => count + Math.max(1, phase.moves.filter((move) => move.name !== MoveName.Pass).length),
+            0
+        );
+    }
+    get planningChanged(): boolean {
+        if (!this.roundPlan || !this.planningBase || !this.committedState) return false;
+        const base = this.planningBase,
+            live = this.committedState;
+        return (
+            base.round !== live.round ||
+            base.phase !== live.phase ||
+            base.log.length !== live.log.length ||
+            JSON.stringify(base.players[this.player!]) !== JSON.stringify(live.players[this.player!])
+        );
+    }
+    get canQueueRound(): boolean {
+        if (
+            !this.roundPlan ||
+            !this.committedState ||
+            this.pendingPlanId ||
+            this.turnMoves.length ||
+            this.roundPlan.state.round !== this.committedState.round
+        )
+            return false;
+        const phases = completedPhases(this.roundPlan);
+        return phases.length > 0 &&
+            !isEqual(phases, this.myPhaseQueue?.phases) &&
+            canQueuePhases(this.committedState, this.player!, phases);
+    }
+    get planPlaysNow(): boolean {
+        return (
+            !!this.roundPlan &&
+            !!this.committedState?.currentPlayers.includes(this.player!) &&
+            completedPhases(this.roundPlan)[0]?.phase === this.committedState.phase
+        );
+    }
+    get queueHint(): string {
+        if (this.roundPlan && this.committedState && this.roundPlan.state.round !== this.committedState.round)
+            return 'The round ended. Start a new simulation.';
+        return '';
+    }
+    startPlanning() {
+        if (!this.canPlanRound) return;
+        try {
+            const base = this.roundPlan ? this.committedState! : this.G!;
+            this.planningBase = copyState(base);
+            this.roundPlan = startRoundPlan(base, this.player!);
+            this.planningError = '';
+            this.showPlan();
+        } catch (error) {
+            this.planningError = String(error instanceof Error ? error.message : error);
+        }
+    }
+    showPlan() {
+        this.confirmVisible = this.discardVisible = this.freeJumpVisible = false;
+        this.soleBuyerPlant = null;
+        this.G = null;
+        this.replaceState(this.roundPlan!.state, false, false);
+    }
+    stopPlanning() {
+        this.roundPlan = null;
+        this.planningBase = null;
+        this.planningError = '';
+        this.G = null;
+        this.replaceState(this.turnMoves.length ? this.replayTurnBuffer() : this.committedState!, false, false);
+    }
+    undoPlan() {
+        if (!this.roundPlan?.entries.length) return;
+        this.roundPlan = replayRoundPlan(
+            this.planningBase!,
+            this.player!,
+            this.roundPlan.entries.slice(0, -1),
+            this.roundPlan.startPhase
+        );
+        this.planningError = '';
+        this.showPlan();
+    }
+    submitRoundPlan() {
+        if (!this.canQueueRound) return;
+        this.sendPhasePlan(completedPhases(this.roundPlan!));
+    }
+    cancelPhasePlan() {
+        this.sendPhasePlan([], true);
+    }
+    sendPhasePlan(phases: PhasePlan[], cancelling = false) {
+        if (this.pendingPlanId || !this.committedState) return;
+        const request: PremoveCommand = {
+            type: 'premoves',
+            round: this.committedState.round,
+            revision: this.myPhaseQueue?.revision || 0,
+            requestId: crypto.randomUUID(),
+            phases,
+        };
+        this.pendingPlanId = request.requestId;
+        this.pendingPlanIsCancel = cancelling;
+        this.planningError = '';
+        this.emitter.emit('premoves', request);
+        this.pendingPlanTimer = setTimeout(() => {
+            if (this.pendingPlanId) {
+                this.pendingPlanId = '';
+                this.planningError = 'The queue was not confirmed. Refresh the live game before trying again.';
+                this.emitter.emit('fetchState');
+            }
+        }, 12000);
+    }
+    viewQueuedPlan() {
+        if (!this.myPhaseQueue?.phases.length) return;
+        this.startPlanning();
+        try {
+            // Viewing a powering-only queue must not add a queued pass through building.
+            this.roundPlan = startRoundPlan(this.planningBase!, this.player!, this.myPhaseQueue.phases[0].phase);
+            for (const phase of this.myPhaseQueue.phases) {
+                for (const move of phase.moves) this.roundPlan = planMove(this.roundPlan!, move);
+            }
+            this.showPlan();
+        } catch (error) {
+            this.planningError = 'The live board changed: ' + String(error instanceof Error ? error.message : error);
+            this.showPlan();
+        }
+    }
+
     @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 &&
+            this.pendingPlanId &&
+            state.automation?.plans[this.player!]?.requestId === this.pendingPlanId
+        ) {
+            this.pendingPlanId = '';
+            if (this.pendingPlanTimer) clearTimeout(this.pendingPlanTimer);
+            if (!this.pendingPlanIsCancel) {
+                this.roundPlan = null;
+                this.planningBase = null;
+            }
+        }
+        if (this.roundPlan) {
+            if (state && state.newTurn !== false) {
+                this.committedState = copyState(state);
+                this._futureState = 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
@@ -1219,6 +1470,10 @@ export default class Game extends Vue {
     }
 
     undo() {
+        if (this.roundPlan) {
+            this.undoPlan();
+            return;
+        }
         if (this.paused || this.turnMoves.length === 0 || !this.committedState) {
             return;
         }
@@ -1267,6 +1522,7 @@ export default class Game extends Vue {
     // True when it is the auction, it's this player's turn to choose a plant, and they
     // are the only remaining buyer — matching the engine's uncontested-purchase case.
     isSoleBuyer(): boolean {
+        if (this.roundPlan) return false;
         if (!this.canMove() || this.G!.phase !== Phase.Auction || this.G!.chosenPowerPlant || !this.canChoose()) {
             return false;
         }
@@ -1315,6 +1571,19 @@ export default class Game extends Vue {
      * ever frees money and plant capacity, so the remaining buffer always replays.
      */
     unbuyResource(payload: { resource: ResourceType; side?: 'north' | 'south'; fromStorage?: boolean }) {
+        if (this.roundPlan) {
+            const entries = [...this.roundPlan.entries];
+            const index = lastBuyIndex(
+                entries.map((e) => e.move),
+                payload
+            );
+            if (index >= 0 && this.roundPlan.state.phase === Phase.Resources) {
+                entries.splice(index, 1);
+                this.roundPlan = replayRoundPlan(this.planningBase!, this.player!, entries, this.roundPlan.startPhase);
+                this.showPlan();
+            }
+            return;
+        }
         if (this.paused || !this.committedState) {
             return;
         }
@@ -1343,7 +1612,13 @@ export default class Game extends Vue {
      * empty spaces are clickable.
      */
     get bufferedBuys(): Record<string, number> {
-        return bufferedBuyCounts(this.turnMoves);
+        return bufferedBuyCounts(
+            this.roundPlan
+                ? this.roundPlan.state.phase === Phase.Resources
+                    ? this.roundPlan.entries.filter((e) => e.phase === Phase.Resources).map((e) => e.move)
+                    : []
+                : this.turnMoves
+        );
     }
 
     bid(bid: number) {
@@ -1610,7 +1885,23 @@ export default class Game extends Vue {
     }
 
     sendMove(move) {
-        if (this.paused) {
+        if (this.paused || this.interactionDisabled) {
+            return;
+        }
+
+        if (this.tutorialMove) {
+            this.tutorialMove(move);
+            return;
+        }
+
+        if (this.roundPlan) {
+            try {
+                this.roundPlan = planMove(this.roundPlan, move);
+                this.planningError = '';
+                this.showPlan();
+            } catch (error) {
+                this.planningError = String(error instanceof Error ? error.message : error);
+            }
             return;
         }
 
@@ -1622,10 +1913,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 +2007,7 @@ export default class Game extends Vue {
 
     canMove() {
         return (
+            !this.interactionDisabled &&
             this.player != undefined &&
             this.G &&
             this.G.currentPlayers.includes(this.player!) &&
@@ -1733,6 +2028,7 @@ export default class Game extends Vue {
     }
 
     canUndo() {
+        if (this.roundPlan) return this.roundPlan.entries.length > 0;
         if (!this.canMove()) return false;
 
         // Undo scope = the current tentative turn: anything still in the buffer
@@ -1996,6 +2292,13 @@ export default class Game extends Vue {
     }
 
     getStatusMessage() {
+        if (this.roundPlan)
+            return this.roundPlan.finished
+                ? 'Simulation complete · Round ' + this.roundPlan.state.round
+                : 'Planning · ' +
+                      (this.roundPlan.state.phase === Phase.Bureaucracy
+                          ? 'Powering cities'
+                          : this.roundPlan.state.phase);
         // Color draft (chooseColors): prompt the current picker, even on the very
         // first turn before any moves are in the log.
         if (
@@ -2444,6 +2747,7 @@ export default class Game extends Vue {
     }
 
     beforeDestroy() {
+        if (this.pendingPlanTimer) clearTimeout(this.pendingPlanTimer);
         window.removeEventListener('resize', this.onViewportResize);
         window.removeEventListener('orientationchange', this.onViewportResize);
         window.removeEventListener('load', this.onViewportResize);
@@ -2504,13 +2808,41 @@ ul {
     max-height: calc(100vh - 40px);
 }
 
+.planner-header {
+    display: contents;
+}
+.planner-header.planning {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0 12px;
+    padding: 0 10px;
+    color: white;
+    background: black;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+.planner-header.planning .statusBar {
+    display: contents;
+}
+.planner-header.planning .status-message {
+    min-width: 150px;
+}
 .statusBar {
-    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 40px;
+    box-sizing: border-box;
+    padding: 0 10px;
     width: 100%;
     background-color: black;
     color: #fff;
     text-align: center;
-    line-height: 40px;
+    line-height: 1.3;
     font-size: 20px;
     position: sticky;
     top: 0;
@@ -2518,6 +2850,30 @@ ul {
     flex-shrink: 0;
 }
 
+.status-message {
+    flex: 1;
+    padding: 7px 0;
+}
+.plan-entry {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    border: 1px solid #69776b;
+    border-radius: 4px;
+    padding: 5px 9px;
+    color: #e5efd9;
+    background: #242e23;
+    font: 500 13px system-ui, sans-serif;
+    cursor: pointer;
+}
+.plan-entry:hover {
+    background: #3a4c32;
+}
+.plan-entry:focus-visible {
+    outline: 2px solid #e0efb6;
+    outline-offset: 2px;
+}
+
 #scene {
     display: block;
     height: auto;
@@ -2622,7 +2978,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;