powergrid-viewer 2.0.12 → 2.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/boardgamers/powergrid.git",
@@ -18,7 +18,7 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.2",
-    "powergrid-engine": "2.0.5"
+    "powergrid-engine": "2.0.6"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/Game.vue

@@ -98,6 +98,7 @@
                     :connections="G.map.connections"
                     :polygons="G.map.polygons"
                     :buildableCities="getBuildableCities()"
+                    :buildPrices="getBuildableCityPrices()"
                     :blockedCities="G.blockedCities"
                     :pickableRegions="getPickableRegions()"
                     :noUraniumRegions="G.map.noUraniumRegions"
@@ -1080,7 +1081,11 @@ export default class Game extends Vue {
         // 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)) {
+        // `state` is null until the platform posts the first one: launch() mounts
+        // the viewer with `state: null` and the immediate `@Watch('state')` fires
+        // at mount, so this runs once with null (hard refresh / first load) and
+        // must not dereference it.
+        if (replaceState && state && ended(state)) {
             this.gameIsOver = true;
         }
 
@@ -1743,6 +1748,39 @@ export default class Game extends Vue {
         return availableMoves[MoveName.Build] && availableMoves[MoveName.Build]!.map((c) => c.name) || [];
     }
 
+    /**
+     * What each buildable city would cost this player, keyed by city name (#148).
+     *
+     * The total is not computed here: `available-moves` already sums the shortest-path
+     * connection cost and the slot cost for the number of players ALREADY in the city
+     * (10/15/20 in the standard build, per-map `slotCosts` otherwise), then drops every
+     * city the player cannot afford. That per-city occupancy is exactly what #148 asks
+     * about in Step 3, so the number only needed surfacing — the viewer was discarding
+     * it and keeping the names.
+     *
+     * A map with a free jump (Japan) offers the same city twice at two prices, so both
+     * are kept; a city reachable ONLY by jump has no `price`.
+     */
+    getBuildableCityPrices(): Record<string, { price?: number; jumpPrice?: number }> {
+        if (!this.canMove()) return {};
+
+        const moves = this.G!.players[this.player!].availableMoves![MoveName.Build];
+        if (!moves) return {};
+
+        const prices: Record<string, { price?: number; jumpPrice?: number }> = {};
+        for (const move of moves) {
+            if (!prices[move.name]) {
+                prices[move.name] = {};
+            }
+            if (move.freeJump) {
+                prices[move.name].jumpPrice = move.price;
+            } else {
+                prices[move.name].price = move.price;
+            }
+        }
+        return prices;
+    }
+
     getPickableRegions(): string[] {
         if (!this.canMove()) return [];
 

package/src/components/boards/Map.vue

@@ -171,8 +171,8 @@
                 >
                     <title>
                         {{ city.name }}<template v-if="isBlocked(city)"> — blocked for this player count (transit
-                        only)</template ><template v-else> — build for {{ city.slotCosts[0] }} (+ flat 5 per transited
-                        space)</template>
+                        only)</template ><template v-else-if="buildCostLabel(city)">{{ buildCostLabel(city) }}</template
+                        ><template v-else> — build for {{ city.slotCosts[0] }} (+ flat 5 per transited space)</template>
                     </title>
                 </rect>
                 <text
@@ -411,7 +411,7 @@
                 pointer-events="all"
                 @click="onCityClick(city)"
             >
-                <title>{{ city.name }}</title>
+                <title>{{ city.name }}{{ buildCostLabel(city) }}</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
@@ -431,7 +431,7 @@
                 :transform="`rotate(45, ${city.x}, ${city.y})`"
                 @click="onCityClick(city)"
             >
-                <title>{{ city.name }}</title>
+                <title>{{ city.name }}{{ buildCostLabel(city) }}</title>
             </rect>
         </template>
 
@@ -486,6 +486,8 @@ export default class Map extends Vue {
     @Prop() connections?: Connection[];
     @Prop() playerColors?: string[];
     @Prop() buildableCities?: string[];
+    // #148: what each of those cities would cost this player, from available-moves.
+    @Prop() buildPrices?: Record<string, { price?: number; jumpPrice?: number }>;
     // Manhattan: spaces blocked for this player count — transitable but never buildable.
     @Prop() blockedCities?: string[];
     // chooseRegions draft: region names the current player may pick this turn.
@@ -699,6 +701,34 @@ export default class Map extends Vue {
         return !!this.buildableCities!.find((cityName) => cityName == city.name);
     }
 
+    /**
+     * The " — build for N" tail appended to a buildable city's tooltip (#148).
+     *
+     * coyotte508 asked for this because in Step 3 the cost varies city by city with how
+     * many players are already there, and the board alone does not say what YOU would
+     * pay. It is a tooltip rather than a printed label on purpose: measured across every
+     * recharged map, a Step-3 build turn offers a median 26–52% of the cities in play
+     * and up to all of them, so labelling each one would bury the board it is meant to
+     * explain — and there is nowhere to put such a label in portrait.
+     *
+     * Empty while the city is only region-pickable, so the draft tooltip is untouched.
+     */
+    buildCostLabel(city: City): string {
+        const entry = this.buildPrices && this.buildPrices[city.name];
+        if (!entry) return '';
+
+        if (entry.price != null && entry.jumpPrice != null) {
+            return ` — build for ${entry.price}, or ${entry.jumpPrice} using your free jump`;
+        }
+        if (entry.price != null) {
+            return ` — build for ${entry.price}`;
+        }
+        if (entry.jumpPrice != null) {
+            return ` — build for ${entry.jumpPrice}, using your free jump`;
+        }
+        return '';
+    }
+
     isBlocked(city: City) {
         return !!this.blockedCities && this.blockedCities.includes(city.name);
     }