powergrid-viewer 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.0.3",
+  "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)'"
             >
@@ -279,9 +359,9 @@
                     @click="undo()"
                 />
                 <LogButton transform="translate(15, 97)" @click="showLog()" />
-                <SoundButton transform="translate(110, 13)" :isOn="preferences.sound" @click="toggleSound()" />
-                <HelpButton transform="translate(110, 54)" :isOn="!preferences.disableHelp" @click="toggleHelp()" />
-                <RulesButton transform="translate(110, 95)" @click="rulesVisible = true" />
+                <SoundButton :transform="iconButton(0)" :isOn="preferences.sound" @click="toggleSound()" />
+                <HelpButton :transform="iconButton(1)" :isOn="!preferences.disableHelp" @click="toggleHelp()" />
+                <RulesButton :transform="iconButton(2)" @click="rulesVisible = true" />
                 <!-- Only offered where it means something. Shown whenever the
                      viewport is portrait — not only while stacking is active — so
                      it can undo its own effect. Sits under Rules rather than under
@@ -289,7 +369,7 @@
                      on the authored board. -->
                 <LayoutButton
                     v-if="portraitViewport"
-                    transform="translate(110, 136)"
+                    :transform="iconButton(3)"
                     :isOn="stacked"
                     @click="toggleStackLayout()"
                 />
@@ -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';
@@ -703,7 +784,7 @@ const STACK_MAX_ROW_SCREENS = 0.72;
  * readable; the buttons next to it are tap targets and want every pixel.
  */
 const STACK_SLOT_MAX_SCALE: Record<string, number> = {
-    roundInfo: 2.2,
+    roundInfo: 1.9,
     playerOrder: 2.5,
 };
 /**
@@ -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 &&
@@ -1836,6 +1989,19 @@ export default class Game extends Vue {
         return this.slotTransforms[name];
     }
 
+    /**
+     * Placement of the icon column beside Pass / Undo / Log. On a portrait viewport
+     * that column gains a fourth button — the layout toggle — in a space authored for
+     * three, and at the authored pitch the fourth one hung 41 units below everything
+     * else and crowded the market row beneath it. On portrait the icons shrink to the
+     * 26-unit height of the text buttons next to them and re-pitch so all four end
+     * level with Log. Landscape and desktop keep the authored positions exactly.
+     */
+    iconButton(index: number): string {
+        if (!this.portraitViewport) return `translate(110, ${13 + 41 * index})`;
+        return `translate(110, ${13 + 30 * index}) scale(${round(26 / 30, 4)})`;
+    }
+
     /**
      * Only portrait viewports are re-laid out. A landscape phone already reads
      * well (the scene's own aspect ratio is close to the screen's), so leaving
@@ -1900,18 +2066,40 @@ export default class Game extends Vue {
             const gaps = STACK_GAP * (present.length - 1);
             const usable = STACK_WIDTH - 2 * STACK_PAD - gaps;
             const combined = present.reduce((sum, name) => sum + boxes[name].width, 0);
-            // One scale per row keeps neighbours visually consistent. The cap stops
-            // a small strip (the turn-order token row) from being blown up absurdly.
-            const rowScale = Math.min(usable / combined, STACK_MAX_SCALE);
-            // A slot may decline part of that scale so a neighbour keeps the space,
-            // and no slot may grow past the height budget for one row.
-            const scaleOf = (name: string) =>
+            // A slot may decline part of the row's scale so a neighbour keeps the
+            // space, and no slot may grow past the height budget for one row.
+            const ceilingOf = (name: string) =>
                 Math.min(
-                    rowScale,
                     STACK_SLOT_MAX_SCALE[name] ?? Infinity,
                     ((STACK_SLOT_MAX_WIDTH[name] ?? Infinity) * usable) / boxes[name].width,
-                    heightCapFor(boxes[name].height)
+                    heightCapFor(boxes[name].height),
+                    STACK_MAX_SCALE
                 );
+            // What a capped slot declines is width left on the table: without this it
+            // became margin either side of the row. Hand it to the slots that can
+            // still grow — the round readout gives up ~130 units beside the buttons,
+            // and the buttons are the part a thumb needs. Repeat until it settles:
+            // growing the free slots can push one of them into its own ceiling, and
+            // then there is more to re-split. rowScale only ever rises here, and a
+            // slot that caps mid-loop leaves the row shorter than solved for, so the
+            // row can never end up wider than the space it was given.
+            // One scale per row keeps neighbours visually consistent. The cap stops a
+            // small strip (the turn-order token row) from being blown up absurdly.
+            let rowScale = Math.min(usable / combined, STACK_MAX_SCALE);
+            for (let pass = 0; pass < present.length; pass++) {
+                let cappedWidth = 0;
+                let freeWidth = 0;
+                for (const name of present) {
+                    const ceiling = ceilingOf(name);
+                    if (ceiling < rowScale) cappedWidth += boxes[name].width * ceiling;
+                    else freeWidth += boxes[name].width;
+                }
+                if (!freeWidth) break;
+                const grown = Math.min((usable - cappedWidth) / freeWidth, STACK_MAX_SCALE);
+                if (grown <= rowScale + 0.0001) break;
+                rowScale = grown;
+            }
+            const scaleOf = (name: string) => Math.min(rowScale, ceilingOf(name));
             const rowWidth = present.reduce((sum, name) => sum + boxes[name].width * scaleOf(name), 0);
             const rowHeight = Math.max(...present.map((name) => boxes[name].height * scaleOf(name)));
 
@@ -1933,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/Map.vue

@@ -386,6 +386,55 @@
             />
         </template>
 
+        <!-- City tap targets, drawn LAST so they sit above the houses already built
+             there. Houses are painted after the city's own circle, and SVG hit-testing
+             takes the topmost element — so once a city held houses the active player
+             could only pick at the gray slivers between them (eric-hu, #125).
+
+             The radius reaches out to the printed region ring, which is what the eye
+             reads as the edge of the city, but never past half the distance to the
+             nearest city: the maps disagree enormously about spacing (Bremen's closest
+             pair is 90.8 apart, South Africa's Johannesburg N/S is 21), so the limit
+             has to be measured rather than picked.
+
+             Only rendered while the city can actually be acted on, so houses keep
+             their own tooltips the rest of the time. -->
+        <template v-for="city in cities">
+            <circle
+                v-if="city.connectionCost == null && (canBuild(city) || canPickRegion(city))"
+                :key="city.name + '_tap'"
+                class="canClick"
+                :r="tapRadius(city)"
+                :cx="city.x"
+                :cy="city.y"
+                fill="none"
+                pointer-events="all"
+                @click="onCityClick(city)"
+            >
+                <title>{{ city.name }}</title>
+            </circle>
+            <!-- Node-weighted tiles (Bremen) get the same treatment at the tile's own
+                 size — their houses sit in slots inside the diamond. Manhattan's spaces
+                 hold one house each, so a built space is never buildable again and needs
+                 no overlay. -->
+            <rect
+                v-if="isNodeTile(city) && (canBuild(city) || canPickRegion(city))"
+                :key="city.name + '_tapTile'"
+                class="canClick"
+                :x="city.x - 23"
+                :y="city.y - 23"
+                width="46"
+                height="46"
+                rx="7"
+                fill="none"
+                pointer-events="all"
+                :transform="`rotate(45, ${city.x}, ${city.y})`"
+                @click="onCityClick(city)"
+            >
+                <title>{{ city.name }}</title>
+            </rect>
+        </template>
+
         <!-- Regions where nuclear plants are banned: a nuclear-plant tile under a red
              prohibition sign (ring + diagonal bar), matching the marker printed on
              the physical board. -->
@@ -421,6 +470,11 @@ import { House } from '../pieces';
 import { Piece, Preferences } from '../../types/ui-data';
 import { City, Connection, Polygon } from 'powergrid-engine/src/maps';
 
+/** The gray disc a city is drawn as, and the tap target it has always had. */
+const CITY_RADIUS = 20;
+/** The coloured region ring drawn around that disc — the city's visible edge. */
+const CITY_RING_RADIUS = 25;
+
 @Component({
     components: {
         House,
@@ -605,6 +659,42 @@ export default class Map extends Vue {
         return markers;
     }
 
+    /**
+     * Distance from each city to its nearest neighbour. Cached as a computed so the
+     * O(n^2) sweep runs once per board rather than once per tap target; n is at most
+     * a few dozen cities.
+     */
+    get nearestCityDistance(): Record<string, number> {
+        const out: Record<string, number> = {};
+        const cities = this.cities ?? [];
+        for (const a of cities) {
+            let min = Infinity;
+            for (const b of cities) {
+                if (b === a) continue;
+                const d = Math.hypot(b.x - a.x, b.y - a.y);
+                if (d < min) min = d;
+            }
+            out[a.name] = min;
+        }
+        return out;
+    }
+
+    /**
+     * How far a city's tap target reaches. Out to the region ring where there is room
+     * for it, but never more than halfway to the next city — on the tight maps two
+     * targets would otherwise overlap and whichever is drawn later would swallow both
+     * cities' taps. Never smaller than the disc it has always been.
+     */
+    tapRadius(city: City): number {
+        const halfWayToNeighbour = (this.nearestCityDistance[city.name] ?? Infinity) / 2;
+        return Math.max(CITY_RADIUS, Math.min(CITY_RING_RADIUS, halfWayToNeighbour));
+    }
+
+    /** A Bremen-style node-weighted district: a diamond tile with several house slots. */
+    isNodeTile(city: City) {
+        return city.connectionCost != null && !!city.slotCosts && city.slotCosts.length >= 2;
+    }
+
     canBuild(city: City) {
         return !!this.buildableCities!.find((cityName) => cityName == city.name);
     }