powergrid-viewer 2.0.4 → 2.0.5

package/package.json

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

package/src/components/Game.vue

@@ -143,7 +143,23 @@
             </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. -->
+                <ResourceBoxes
+                    v-if="stacked"
+                    :transform="`translate(${G.map.supplyPosition[0]}, ${G.map.supplyPosition[1]})`"
+                    :gameState="G"
+                    :player="player"
+                    :isUsaRecharged="G.options.variant == 'recharged' && G.map.name == 'USA'"
+                    :buyableResources="buyableResources()"
+                    :resourceResupply="getResourceResupply()"
+                    :resourceResupplyNorth="getResourceResupplyNorth()"
+                    @buyResource="buyResource($event)"
+                />
                 <Resources
+                    v-else
                     ref="resources"
                     :transform="`translate(${G.map.supplyPosition[0]}, ${G.map.supplyPosition[1]})`"
                     :isUsaRecharged="G.options.variant == 'recharged' && G.map.name == 'USA'"
@@ -162,12 +178,76 @@
                 />
             </g>
 
+            <!-- Australia: the same uranium-mine selling table laid on its side for
+                 portrait. A 104x430 strip is the worst possible shape for a full-width
+                 row — it can only grow until its HEIGHT fills the row, so it ends up a
+                 sliver with the whole width beside it empty. Turned through 90° the six
+                 prices run left to right in the same order they run top to bottom, and
+                 the row is filled by something worth reading. -->
+            <g
+                v-if="stacked && G.map.name === 'Australia' && G.uraniumMineMarket"
+                ref="slotUraniumMines"
+                :transform="slotT('uraniumMines') || 'translate(15, 70)'"
+            >
+                <rect x="0" y="0" width="620" height="146" rx="6" fill="#8aa84a" stroke="#4d6322" stroke-width="3" />
+                <text x="310" y="26" text-anchor="middle" font-weight="700" fill="black" style="font-size: 22px">
+                    Uranium mine market
+                </text>
+                <g v-for="col in 6" :key="'uraniumCol' + col" :transform="`translate(${10 + (col - 1) * 100}, 0)`">
+                    <text x="50" y="56" text-anchor="middle" font-weight="700" fill="black" style="font-size: 20px">
+                        ${{ 8 - col }}
+                    </text>
+                    <rect
+                        x="21"
+                        y="66"
+                        width="26"
+                        height="26"
+                        rx="3"
+                        fill="goldenrod"
+                        stroke="#4d6322"
+                        stroke-width="1.5"
+                    />
+                    <rect
+                        x="53"
+                        y="66"
+                        width="26"
+                        height="26"
+                        rx="3"
+                        fill="goldenrod"
+                        stroke="#4d6322"
+                        stroke-width="1.5"
+                    />
+                    <circle
+                        v-if="(G.uraniumMineMarket[6 - col] || 0) >= 1"
+                        cx="34"
+                        cy="79"
+                        r="10"
+                        fill="#46c655"
+                        stroke="#1f5c25"
+                        stroke-width="2"
+                    />
+                    <circle
+                        v-if="(G.uraniumMineMarket[6 - col] || 0) >= 2"
+                        cx="66"
+                        cy="79"
+                        r="10"
+                        fill="#46c655"
+                        stroke="#1f5c25"
+                        stroke-width="2"
+                    />
+                </g>
+                <line x1="10" y1="108" x2="610" y2="108" stroke="#4d6322" stroke-width="1" />
+                <text x="310" y="132" text-anchor="middle" font-weight="700" fill="#22340f" style="font-size: 18px">
+                    refill −{{ G.map.uraniumMineResupply[G.players.length - 2][G.step - 1] }}/rnd
+                </text>
+            </g>
+
             <!-- Australia: uranium-mine selling table. Six price rows $7 (top) →
                  $2 (bottom), two token slots each. Sellers place one token per mine
                  on the highest empty slot; the resource refill removes from the
                  cheap (bottom) end. Lives in the clear upper-left margin. -->
             <g
-                v-if="G.map.name === 'Australia' && G.uraniumMineMarket"
+                v-if="!stacked && G.map.name === 'Australia' && G.uraniumMineMarket"
                 ref="slotUraniumMines"
                 :transform="slotT('uraniumMines') || 'translate(15, 70)'"
             >
@@ -310,7 +390,7 @@
                         :ended="gameEnded(G)"
                         :isPlayer="player == playerIndex"
                         :ranking="sortedPlayers.findIndex((x) => x.id == G.players[playerIndex].id) + 1"
-                        :showMoney="player == playerIndex || gameEnded(G) || G.options.showMoney"
+                        :showMoney="player == playerIndex || moneyIsPublic"
                         :showBid="!G.options.fastBid"
                         :phase="G.phase"
                         :isAustralia="G.map.name === 'Australia'"
@@ -660,6 +740,7 @@ import PowerPlantMarket from './boards/PowerPlantMarket.vue';
 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 Resources from './boards/Resources.vue';
 import { LogMove } from 'powergrid-engine/src/log';
 import { Phase, playerTimeUsed, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
@@ -719,6 +800,9 @@ const STACK_SLOT_MAX_SCALE: Record<string, number> = {
  */
 const STACK_SLOT_MAX_WIDTH: Record<string, number> = {
     powerPlantMarket: 0.88,
+    // 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,
 };
 
 /**
@@ -794,7 +878,8 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
         PlayerOrder,
         CityCount,
         Map,
-        Resources
+        Resources,
+        ResourceBoxes
     },
 })
 export default class Game extends Vue {
@@ -822,6 +907,11 @@ export default class Game extends Vue {
 
     paused = false;
 
+    // Set once the platform has served a finished game, and never cleared.
+    // Reactive on purpose: `_futureState` is not, and the money gate has to
+    // re-evaluate as the replay scrubber steps through the game.
+    gameIsOver = false;
+
     @Provide()
     communicator: EventEmitter = new EventEmitter();
 
@@ -944,11 +1034,19 @@ export default class Game extends Vue {
         return state;
     }
 
-    replaceState(state: GameState, replaceState = true) {
+    replaceState(state: GameState, replaceState = true, playSound = true) {
         if (replaceState) {
             this._futureState = state;
         }
 
+        // Remember that the platform has served us a finished game. The replay
+        // scrubber renders reconstructed MID-game states, whose own `ended()` is
+        // false however long ago the game finished, so it cannot be asked. See
+        // `moneyIsPublic`.
+        if (replaceState && ended(state)) {
+            this.gameIsOver = true;
+        }
+
         // if player is selecting resources, keep the state
         let player: any;
         if (this.player != null) {
@@ -974,7 +1072,8 @@ export default class Game extends Vue {
                 this.playerOrder.createPieces(this.G!);
                 this.cityCount.createPieces(this.G!);
                 this.map.createPieces(this.G!);
-                this.resources.createPieces(this.G!);
+                // Absent while the portrait layout is showing the box market instead.
+                this.resources?.createPieces(this.G!);
                 // Pieces are added imperatively, so the groups only reach their
                 // final size here — the portrait layout must measure after this,
                 // not on the state change that triggered it.
@@ -982,7 +1081,7 @@ export default class Game extends Vue {
             });
         }
 
-        if (this.preferences.sound && this.G?.log[this.G?.log.length - 1].type == 'move') {
+        if (playSound && this.preferences.sound && this.G?.log[this.G?.log.length - 1].type == 'move') {
             const move = (this.G?.log[this.G?.log.length - 1] as LogMove).move;
             if (move.name == MoveName.Pass && this.G.currentPlayers.includes(this.player!)) {
                 (document.getElementById('notification')!.cloneNode(true) as HTMLAudioElement).play();
@@ -1385,15 +1484,69 @@ export default class Game extends Vue {
         // replays (and the eventual committed log) reproduce the same times.
         this.turnMoves.push({ ...move, time: Date.now() });
 
+        // 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
+        // made while a response is in flight is judged against a stale list. Buy one
+        // resource past what your plants can hold and the platform rejects the whole
+        // 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) {
+            const buffered = this.turnMoves.length;
+            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;
+            }
+        }
+
         // Send the WHOLE turn so far: the platform is stateless between calls and
         // replays the buffer from the last committed (saved) state.
         this.emitter.emit('move', [...this.turnMoves]);
+
+        // Only adopt a preview that is still TENTATIVE. A committing move (Pass, a bid
+        // that ends an auction) replays hidden outcomes — deck draws, upkeep — on a
+        // state whose deck and seed are stripped, so its preview would flash bogus
+        // results; wait for the server's committed answer instead. The echo of this
+        // same buffer lands next and is authoritative, and it owns the sound, so the
+        // preview stays silent rather than doubling it.
+        if (preview && preview.newTurn === false) {
+            this.replaceState(preview, false, false);
+        }
     }
 
     gameEnded(G: GameState) {
         return ended(G);
     }
 
+    /**
+     * Is every player's cash public?
+     *
+     * Money is hidden information while a game is running, but a finished game has
+     * nothing left to hide — the engine's `stripSecret` reveals it and the end-game
+     * table prints it. The replay scrubber, though, shows a RECONSTRUCTED mid-game
+     * state, and `ended()` on that state is false however long ago the game actually
+     * finished. So stepping back through a finished game blacked out everyone
+     * else's cash, which is most of what makes a replay worth reviewing: you could
+     * not tell whether someone ending the game early would have changed the result
+     * (eric-hu, #130). Ask whether the GAME is over, not whether the step being
+     * displayed is.
+     *
+     * An in-progress game stays hidden, which is the point — the reconstruction
+     * derives every player's true cash from the log, so this gate is the only thing
+     * standing between a mid-game replay and other people's wallets.
+     */
+    get moneyIsPublic(): boolean {
+        return !!this.G && (!!this.G.options.showMoney || this.gameIsOver || ended(this.G));
+    }
+
     canMove() {
         return (
             this.player != undefined &&
@@ -1968,6 +2121,19 @@ export default class Game extends Vue {
         this.stacked = true;
     }
 
+    /**
+     * Entering or leaving the stacked layout swaps the printed resource track for the
+     * box market, which is a different shape entirely. `relayout` sets `stacked` last,
+     * so the swap only reaches the DOM a tick later — by which point the row heights
+     * it just solved for describe the component that is no longer there. Measure again
+     * once the swap has landed. This settles after one extra pass: the second run
+     * leaves `stacked` unchanged, so it does not re-trigger.
+     */
+    @Watch('stacked')
+    onStackedChanged() {
+        this.scheduleRelayout();
+    }
+
     private scheduleRelayout() {
         this.$nextTick(() => this.relayout());
     }

package/src/components/boards/ResourceBoxes.vue

@@ -0,0 +1,212 @@
+<template>
+    <g>
+        <template v-for="(block, b) in blocks">
+            <g :key="'block' + b" :transform="`translate(0, ${block.y})`">
+                <text v-if="block.title" x="4" y="16" font-weight="700" fill="black" style="font-size: 26px">
+                    {{ block.title }}
+                </text>
+
+                <!-- Restock, as the printed refill card reads it: one number per row,
+                     in the same order the rows are drawn. -->
+                <text
+                    v-if="block.restock"
+                    :x="BOX_W - 4"
+                    y="16"
+                    text-anchor="end"
+                    font-weight="600"
+                    fill="#3a2c08"
+                    style="font-size: 24px"
+                >
+                    Restock {{ block.restock }}
+                </text>
+
+                <text x="4" y="42" fill="#3a2c08" style="font-size: 24px; letter-spacing: 1px">CURRENT PRICE</text>
+                <text
+                    :x="CUBE_BAND_CENTRE"
+                    y="42"
+                    text-anchor="middle"
+                    fill="#3a2c08"
+                    style="font-size: 24px; letter-spacing: 1px"
+                >
+                    AT THIS PRICE
+                </text>
+                <text
+                    :x="BOX_W - 4"
+                    y="42"
+                    text-anchor="end"
+                    fill="#3a2c08"
+                    style="font-size: 24px; letter-spacing: 1px"
+                >
+                    CUBES LEFT
+                </text>
+
+                <g
+                    v-for="(row, r) in block.rows"
+                    :key="'row' + r"
+                    :transform="`translate(0, ${HEAD_H + r * (BOX_H + BOX_GAP)})`"
+                    :class="[{ canClick: row.buyable }]"
+                    @click="row.buyable && $emit('buyResource', row.move)"
+                >
+                    <rect
+                        :width="BOX_W"
+                        :height="BOX_H"
+                        rx="6"
+                        :fill="row.cubes > 0 ? 'darkgoldenrod' : '#9c8236'"
+                        :stroke="row.buyable ? '#1e63d0' : '#6b5312'"
+                        :stroke-width="row.buyable ? 5 : 2"
+                        :opacity="row.cubes > 0 ? 1 : 0.55"
+                    />
+                    <!-- Whole box is the tap target, cubes and all. -->
+                    <rect
+                        v-if="row.buyable"
+                        :width="BOX_W"
+                        :height="BOX_H"
+                        rx="6"
+                        fill="transparent"
+                        pointer-events="all"
+                    />
+
+                    <text x="18" y="26" font-weight="700" fill="black" style="font-size: 22px; letter-spacing: 1px">
+                        {{ row.label }}
+                    </text>
+
+                    <template v-if="row.price != null">
+                        <text x="18" y="80" font-weight="700" fill="black" style="font-size: 26px">$</text>
+                        <text x="40" y="84" font-weight="700" fill="black" style="font-size: 46px">
+                            {{ row.price }}
+                        </text>
+                        <text v-if="row.next != null" x="132" y="80" fill="#3a2c08" style="font-size: 22px">
+                            then ${{ row.next }}
+                        </text>
+                    </template>
+                    <text v-else x="18" y="78" font-weight="700" fill="black" style="font-size: 28px">out</text>
+
+                    <!-- One dot per cube still buyable at the current price. A pool
+                         with no price track behind it has no such number: every cube
+                         in it costs the same, so say that instead of drawing dots. -->
+                    <circle
+                        v-for="n in row.atPrice"
+                        :key="'cube' + n"
+                        :cx="cubeX(row.atPrice, n)"
+                        :cy="58"
+                        r="17"
+                        :fill="row.color"
+                        stroke="black"
+                        stroke-width="2"
+                    />
+                    <text v-if="row.flat && row.cubes > 0" x="300" y="66" fill="#3a2c08" style="font-size: 22px">
+                        every cube at this price
+                    </text>
+
+                    <text
+                        :x="BOX_W - 18"
+                        y="68"
+                        text-anchor="end"
+                        font-weight="700"
+                        fill="black"
+                        style="font-size: 40px"
+                    >
+                        {{ row.cubes }}
+                    </text>
+                    <text :x="BOX_W - 18" y="90" text-anchor="end" fill="#3a2c08" style="font-size: 20px">LEFT</text>
+
+                    <!-- India caps which prices are on sale per step; a row above the
+                         cap is on the board but cannot be bought by anyone yet. -->
+                    <text v-if="row.capped" x="130" y="96" fill="#7a1d12" font-weight="600" style="font-size: 20px">
+                        step {{ step }} sells to ${{ maxPrice }}
+                    </text>
+
+                    <title>{{ row.title }}</title>
+                </g>
+            </g>
+        </template>
+    </g>
+</template>
+
+<script lang="ts">
+import { GameState } from 'powergrid-engine';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { BuyMove, ResourceBlock, resourceBlocks } from '../../util/resource-rows';
+
+const BOX_W = 700;
+const BOX_H = 104;
+const BOX_GAP = 8;
+/** Block title + column captions above the first box. */
+const HEAD_H = 62;
+const BLOCK_GAP = 30;
+const CUBE_PITCH = 44;
+/** Middle of the band between the price block and the cubes-left count. */
+const CUBE_BAND_CENTRE = 420;
+
+/**
+ * The portrait resource market.
+ *
+ * The printed price track is a beautiful object and an unreadable one on a phone:
+ * eight to ten columns of three-cube slots, drawn at whatever width the map author
+ * chose and then squeezed into a strip. This draws the same market as one box per
+ * buyable source, carrying only what a purchase actually needs — what the next cube
+ * costs, how many are left at that price, how many are left at all.
+ *
+ * Every number comes out of the engine state rather than the printed geometry, so the
+ * map-specific markets come along for free: Europe's nine price columns, Korea's two
+ * sides, Australia's Step-3 CO2 shift (the engine rewrites the price array and the box
+ * is only ever a view of it), India's per-step price cap, South Africa's $8 storage
+ * pool, USA recharged's $8-from-supply once the track is bare.
+ *
+ * Which rows a player may actually tap is NOT decided here: `buyableResources` is the
+ * engine's own availableMoves, so money, storage capacity, the hybrid tank and Korea's
+ * side lock are all accounted for already. The row model itself lives in
+ * `util/resource-rows`, where it can be tested against the engine's own arithmetic.
+ */
+@Component
+export default class ResourceBoxes extends Vue {
+    @Prop() gameState!: GameState;
+    @Prop() buyableResources?: BuyMove[];
+    @Prop() resourceResupply?: (number | string)[];
+    @Prop() resourceResupplyNorth?: (number | string)[];
+    @Prop() isUsaRecharged?: boolean;
+    /** The seat looking at the board — only needed for Central Europe's Wien discount. */
+    @Prop() player?: number;
+
+    BOX_W = BOX_W;
+    BOX_H = BOX_H;
+    BOX_GAP = BOX_GAP;
+    HEAD_H = HEAD_H;
+    CUBE_BAND_CENTRE = CUBE_BAND_CENTRE;
+
+    /** Centre the cube cluster in that band, however many cubes there are. */
+    cubeX(count: number, n: number): number {
+        return CUBE_BAND_CENTRE - ((count - 1) * CUBE_PITCH) / 2 + (n - 1) * CUBE_PITCH;
+    }
+
+    get step(): number {
+        return this.gameState.step;
+    }
+
+    get maxPrice(): number {
+        const table = (this.gameState.map as { maxPriceAvailable?: number[] }).maxPriceAvailable;
+        return table ? table[this.gameState.step - 1] : 16;
+    }
+
+    get blocks(): (ResourceBlock & { y: number })[] {
+        let y = 0;
+        return resourceBlocks(this.gameState, {
+            player: this.player,
+            buyable: this.buyableResources,
+            resupply: this.resourceResupply,
+            resupplyNorth: this.resourceResupplyNorth,
+            isUsaRecharged: this.isUsaRecharged,
+        }).map((block) => {
+            const placed = { ...block, y };
+            y += HEAD_H + block.rows.length * (BOX_H + BOX_GAP) - BOX_GAP + BLOCK_GAP;
+            return placed;
+        });
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.canClick {
+    cursor: pointer;
+}
+</style>

package/src/launch.ts

@@ -15,14 +15,18 @@ function launch(selector: string) {
     } = {
         state: null,
         emitter: new EventEmitter(),
-        preferences: {
+        // Observable so preference changes update the UI immediately: Game receives
+        // this object as a prop, and Vue 2 does not deep-observe prop values coming
+        // from a non-reactive parent — plain-object mutations (the in-game sound/help
+        // toggles, platform preference pushes) would only paint on the next re-render.
+        preferences: Vue.observable({
             sound: true,
             disableHelp: false,
             adjustPlayerOrder: false,
             undoWholeTurn: true,
             fitToScreen: true,
             stackOnPortrait: true,
-        },
+        }),
         avatars: [],
     };
 
@@ -61,7 +65,8 @@ function launch(selector: string) {
         app.$forceUpdate();
     });
     item.addListener('preferences', (data) => {
-        params.preferences = { ...params.preferences, ...data };
+        // Mutate (don't replace) the observable object so the update stays reactive
+        Object.assign(params.preferences, data);
         app.$forceUpdate();
     });
     item.addListener('gamelog', (logData) => {