powergrid-viewer 2.1.6 → 2.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/boardgamers/powergrid.git",
@@ -20,7 +20,7 @@
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",
     "zod": "4.6.4",
-    "powergrid-engine": "2.0.6"
+    "powergrid-engine": "2.0.8"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

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"
@@ -366,7 +400,7 @@
                     transform="translate(15, 15)"
                     :enabled="canPass()"
                     :highlightButton="canPass() && !preferences.disableHelp"
-                    :text="tutorialMove || canUndo() ? 'Done' : 'Pass'"
+                    :text="tutorialMove || roundPlan || canUndo() ? 'Done' : 'Pass'"
                     @click="checkPass()"
                 />
                 <UndoButton
@@ -750,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';
@@ -783,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';
@@ -925,6 +971,7 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
         ResourceViewButton,
         Button,
         Calculator,
+        RoundPlanner,
         PowerPlantMarket,
         PlayerOrder,
         CityCount,
@@ -1038,6 +1085,158 @@ 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.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) {
@@ -1051,6 +1250,26 @@ export default class Game extends Vue {
             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
@@ -1248,6 +1467,10 @@ export default class Game extends Vue {
     }
 
     undo() {
+        if (this.roundPlan) {
+            this.undoPlan();
+            return;
+        }
         if (this.paused || this.turnMoves.length === 0 || !this.committedState) {
             return;
         }
@@ -1296,6 +1519,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;
         }
@@ -1344,6 +1568,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;
         }
@@ -1372,7 +1609,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) {
@@ -1648,6 +1891,17 @@ export default class Game extends Vue {
             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;
+        }
+
         // What the board offered when this click was judged — the same list the
         // button that produced it was enabled from.
         const offeredWhenClicked =
@@ -1771,6 +2025,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
@@ -2034,6 +2289,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 (
@@ -2482,6 +2744,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);
@@ -2542,13 +2805,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;
@@ -2556,6 +2847,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;

package/src/components/RoundPlanner.vue

@@ -0,0 +1,119 @@
+<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="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/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';
@@ -51,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();
@@ -97,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/util/round-plan.ts

@@ -0,0 +1,12 @@
+import { MoveName, Phase } from 'powergrid-engine';
+import type { RoundPlan } from 'powergrid-engine/src/planning';
+import type { PhasePlan } from 'powergrid-engine/src/premoves';
+
+export function completedPhases(plan: RoundPlan): PhasePlan[] {
+    return [Phase.Building, Phase.Bureaucracy].flatMap((phase) => {
+        const moves = plan.entries.filter((e) => e.phase === phase).map((e) => e.move);
+        return moves.length && moves[moves.length - 1].name === MoveName.Pass
+            ? [{ phase: phase as Phase.Building | Phase.Bureaucracy, moves }]
+            : [];
+    });
+}