powergrid-viewer 2.0.7 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/boardgamers/powergrid.git",

package/src/components/Game.vue

@@ -142,13 +142,21 @@
                 </template>
             </g>
 
+            <g v-if="stacked" ref="slotResourceView" :transform="slotT('resourceView')">
+                <ResourceViewButton :showTrack="showResourceTrack" @select="setResourceView($event)" />
+            </g>
+
             <g ref="slotResources" :transform="slotT('resources')">
                 <!-- On a phone the printed price track is a strip of unreadable
-                     columns, so the stacked layout swaps it for one box per buyable
-                     source. Landscape and desktop keep the printed board exactly as
-                     it was — this is an either/or, never an overlay. -->
+                     columns, so the stacked layout defaults to one box per buyable
+                     source. It is still only a default: the switch above this row
+                     puts the printed track back, because the boxes deliberately
+                     throw away the price ladder and that ladder is most of what
+                     there is to know about uranium. Landscape and desktop keep the
+                     printed board exactly as it was — an either/or, never an
+                     overlay. -->
                 <ResourceBoxes
-                    v-if="stacked"
+                    v-if="stacked && !showResourceTrack"
                     :transform="`translate(${G.map.supplyPosition[0]}, ${G.map.supplyPosition[1]})`"
                     :gameState="G"
                     :player="player"
@@ -727,6 +735,7 @@ import type { GameState, LogItem, Move, Player } from 'powergrid-engine';
 import { EventEmitter } from 'events';
 import {
     bufferedBuyCounts,
+    engineRefusedIt,
     lastBuyIndex,
     matchesTurnBuffer,
     rebaseTurnBuffer,
@@ -743,6 +752,7 @@ import {
     HelpButton,
     RulesButton,
     LayoutButton,
+    ResourceViewButton,
 } from './buttons';
 import PlayerBoard from './PlayerBoard.vue';
 import Calculator from './Calculator.vue';
@@ -770,6 +780,9 @@ const STACK_ROWS: string[][] = [
     // the draw pile and the round readout are things you glance at.
     ['buttons', 'roundInfo', 'powerPlantDeck'],
     ['powerPlantMarket'],
+    // The resource-display switch sits between the two markets rather than in the
+    // icon column: it belongs to the row it changes, and reads as that row's header.
+    ['resourceView'],
     ['resources'],
     ['uraniumMines'],
     ['freeJump'],
@@ -813,6 +826,9 @@ const STACK_SLOT_MAX_WIDTH: Record<string, number> = {
     // The box market is one tall stack of full-width buttons; run edge to edge it
     // reads as though it had been cropped rather than laid out.
     resources: 0.94,
+    // Matched to `resources` on purpose: equal budgets render equal widths, so the
+    // switch and the market below it line up instead of nearly lining up.
+    resourceView: 0.94,
 };
 
 /**
@@ -882,6 +898,7 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
         HelpButton,
         RulesButton,
         LayoutButton,
+        ResourceViewButton,
         Button,
         Calculator,
         PowerPlantMarket,
@@ -980,6 +997,9 @@ export default class Game extends Vue {
     // server-side from the last committed state; undo simply shortens it.
     turnMoves: Move[] = [];
 
+    /** Why the last local replay stopped, if it did — see `engineRefusedIt`. */
+    private lastReplayFailure: unknown;
+
     // Last committed state received from the platform. Undo replays the shortened
     // turn buffer from this state; when the buffer empties, the preview resets to it
     // without any server call (the platform's saved state IS the turn start).
@@ -1039,8 +1059,9 @@ export default class Game extends Vue {
      * engine now rejects — possible after a rebase) and returns the preview.
      */
     replayTurnBuffer(): GameState {
-        const { state, applied } = replayBuffer(this.committedState!, this.turnMoves, this.player!);
+        const { state, applied, failure } = replayBuffer(this.committedState!, this.turnMoves, this.player!);
         this.turnMoves = applied;
+        this.lastReplayFailure = failure;
         return state;
     }
 
@@ -1529,11 +1550,20 @@ export default class Game extends Vue {
             return;
         }
 
+        // What the board offered when this click was judged — the same list the
+        // button that produced it was enabled from.
+        const offeredWhenClicked =
+            this.player != undefined && this.G && this.G.players[this.player]
+                ? this.G.players[this.player].availableMoves
+                : 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.
-        this.turnMoves.push({ ...move, time: Date.now() });
+        const stamped = { ...move, time: Date.now() };
+        this.turnMoves.push(stamped);
 
         // Preview the move locally BEFORE sending it. Without this the board — and with
         // it `availableMoves` — stays frozen on the last server reply, so every click
@@ -1542,9 +1572,6 @@ export default class Game extends Vue {
         // replayed buffer with "Wrong argument for the command BuyResource"; the
         // rejected move then stays in the buffer, so every later action resends it and
         // fails again until the page is refreshed (#131).
-        //
-        // Replaying the buffer on the committed state is exact: any move with hidden
-        // side effects commits, which ends the buffer (see util/turn-buffer).
         let preview: GameState | null = null;
 
         if (this.committedState && this.player != undefined) {
@@ -1552,9 +1579,31 @@ export default class Game extends Vue {
             preview = this.replayTurnBuffer();
 
             if (this.turnMoves.length < buffered) {
-                // The engine refused the move we just added, so it never reaches the
-                // server and the board already shows the truth.
-                return;
+                // The replay could not carry the move — which is NOT the same thing as
+                // the move being illegal, and telling them apart is the whole job here.
+                //
+                // The state a player holds is stripped of everything they may not see.
+                // A fastBid auction keeps the other players' sealed bids hidden, so the
+                // response that RESOLVES that auction cannot be replayed on this copy at
+                // all: the engine reaches for a bid that was stripped out and throws.
+                // A human is almost always the last to answer — bots reply instantly —
+                // so treating that as a refusal silently swallowed nearly every Pass in
+                // a fastBid auction, with an enabled button and no way to tell.
+                //
+                // So defer to the only authority on legality that this viewer has: the
+                // `availableMoves` the server sent. If it offered the move, send it and
+                // let the server replay it from the full state; just do not pretend to
+                // preview what could not be previewed.
+                const onlyThisMoveWasDropped = this.turnMoves.length === buffered - 1;
+
+                if (engineRefusedIt(this.lastReplayFailure) || !theServerOfferedThisMove || !onlyThisMoveWasDropped) {
+                    // A genuinely stale click (#131): the engine asserted against it on
+                    // a state it could read in full. The board already shows the truth.
+                    return;
+                }
+
+                this.turnMoves.push(stamped);
+                preview = null;
             }
         }
 
@@ -2088,6 +2137,43 @@ export default class Game extends Vue {
         this.relayout();
     }
 
+    /**
+     * Only ever consulted inside the stacked layout — landscape and desktop draw the
+     * printed board regardless, so this preference cannot reach them.
+     */
+    get showResourceTrack(): boolean {
+        return this.preferences.portraitResourceTrack === true;
+    }
+
+    setResourceView(showTrack: boolean) {
+        if (showTrack === this.showResourceTrack) {
+            return;
+        }
+
+        this.emitter.emit('update:preference', { name: 'portraitResourceTrack', value: showTrack });
+        this.preferences.portraitResourceTrack = showTrack;
+    }
+
+    /**
+     * The two resource displays are different shapes, so switching between them
+     * invalidates the row heights the last layout solved for — the same trap as
+     * entering the stacked layout at all. Measure again once the swap has landed.
+     */
+    @Watch('showResourceTrack')
+    onResourceViewChanged() {
+        this.$nextTick(() => {
+            // The printed track fills itself imperatively and `createPieces` only ever
+            // runs on a state update, so a track switched on mid-turn would draw an
+            // EMPTY market until the next move landed — a display that lies. Fill it
+            // before measuring: the cubes are what give the group its size.
+            if (this.G) {
+                this.resources?.createPieces(this.G);
+            }
+
+            this.scheduleRelayout();
+        });
+    }
+
     relayout() {
         if (!this.viewportIsMeasurable()) {
             // Still hidden. Whoever reveals us triggers the observer below.

package/src/components/buttons/ResourceViewButton.vue

@@ -0,0 +1,68 @@
+<template>
+    <!--
+        Which resource display the portrait layout shows. A labelled either/or rather
+        than an icon: this changes what the whole row below it *is*, and no picture of
+        "boxes" or "a track" is recognisable before you tap it.
+
+        Authored 620x72 so that, held to the same 0.94 width budget as the box market
+        underneath, the two line up edge to edge and each half clears the 44px tap
+        guideline on a 414px-wide phone.
+    -->
+    <g class="resourceView">
+        <g class="button enabled" @click="$emit('select', false)">
+            <rect
+                x="0"
+                y="0"
+                width="306"
+                height="72"
+                rx="6"
+                :fill="showTrack ? 'gainsboro' : '#333'"
+                stroke="black"
+                stroke-width="3"
+            />
+            <text
+                x="153"
+                y="47"
+                text-anchor="middle"
+                font-weight="700"
+                :fill="showTrack ? 'black' : 'white'"
+                style="font-size: 30px"
+            >
+                Buy boxes
+            </text>
+            <title>One box per buyable source: the price you pay, and the whole box is the tap target</title>
+        </g>
+        <g class="button enabled" @click="$emit('select', true)">
+            <rect
+                x="314"
+                y="0"
+                width="306"
+                height="72"
+                rx="6"
+                :fill="showTrack ? '#333' : 'gainsboro'"
+                stroke="black"
+                stroke-width="3"
+            />
+            <text
+                x="467"
+                y="47"
+                text-anchor="middle"
+                font-weight="700"
+                :fill="showTrack ? 'white' : 'black'"
+                style="font-size: 30px"
+            >
+                Price track
+            </text>
+            <title>The printed market board, so the whole price track is visible at once</title>
+        </g>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class ResourceViewButton extends Vue {
+    @Prop()
+    showTrack?: boolean;
+}
+</script>

package/src/components/buttons/index.js

@@ -4,7 +4,18 @@ import LayoutButton from './LayoutButton.vue';
 import LogButton from './LogButton.vue';
 import PassButton from './PassButton.vue';
 import SoundButton from './SoundButton.vue';
+import ResourceViewButton from './ResourceViewButton.vue';
 import RulesButton from './RulesButton.vue';
 import UndoButton from './UndoButton.vue';
 
-export { Button, HelpButton, LayoutButton, LogButton, PassButton, SoundButton, RulesButton, UndoButton };
+export {
+    Button,
+    HelpButton,
+    LayoutButton,
+    LogButton,
+    PassButton,
+    ResourceViewButton,
+    SoundButton,
+    RulesButton,
+    UndoButton,
+};

package/src/launch.ts

@@ -26,6 +26,7 @@ function launch(selector: string) {
             undoWholeTurn: true,
             fitToScreen: true,
             stackOnPortrait: true,
+            portraitResourceTrack: false,
         }),
         avatars: [],
     };

package/src/types/ui-data.ts

@@ -13,6 +13,11 @@ export type Preferences = {
     // Portrait phones stack the board into full-width rows. Per player, not per
     // game: it describes the screen you are holding, not the rules being played.
     stackOnPortrait: boolean;
+    // Within the stacked layout, show the printed price track instead of the box
+    // market. The boxes are the buying surface; the track is the reading surface --
+    // it is the only place the whole price ladder is visible at once, which matters
+    // most for uranium, where the cubes are few and the prices far apart.
+    portraitResourceTrack: boolean;
 };
 
 export interface Piece {

package/src/util/turn-buffer.ts

@@ -131,21 +131,43 @@ export function replayTurnBuffer(
     committedState: GameState,
     turnMoves: Move[],
     player: number
-): { state: GameState; applied: Move[] } {
+): { state: GameState; applied: Move[]; failure?: unknown } {
     let state: GameState = JSON.parse(JSON.stringify(committedState));
     const applied: Move[] = [];
+    let failure: unknown;
 
     for (const move of turnMoves) {
         try {
             state = engineMove(state, move, player);
         } catch (err) {
             console.error('dropping turn-buffer tail no longer legal on the committed state', move, err);
+            failure = err;
             break;
         }
         applied.push(move);
     }
 
-    return { state, applied };
+    return { state, applied, failure };
+}
+
+/**
+ * Did the engine REFUSE this move, or could this copy of the state simply not carry it?
+ *
+ * The engine refuses with an assertion. A state stripped of what a player may not see —
+ * a fastBid auction's sealed bids — instead fails while reaching for something that was
+ * stripped out, which says nothing at all about legality.
+ */
+export function engineRefusedIt(failure: unknown): boolean {
+    if (!failure) {
+        return false;
+    }
+
+    // Node stamps `code: 'ERR_ASSERTION'`; the browser build of `assert` does not, and
+    // checking only for the code let every illegal move through in the bundle while
+    // passing every test in Node.
+    const err = failure as { name?: string; code?: string };
+
+    return err.name === 'AssertionError' || err.code === 'ERR_ASSERTION';
 }
 
 /**