powergrid-viewer 1.11.5 → 1.11.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "1.11.5",
+  "version": "1.11.7",
   "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": "1.15.5"
+    "powergrid-engine": "1.15.7"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/Game.vue

@@ -55,9 +55,12 @@
                 :connections="G.map.connections"
                 :polygons="G.map.polygons"
                 :buildableCities="getBuildableCities()"
+                :blockedCities="G.blockedCities"
+                :pickableRegions="getPickableRegions()"
                 :devBackdrop="G.map.devBackdrop"
                 :mapRotation="G.map.mapRotation || 0"
                 @build="build($event)"
+                @pickRegion="pickRegion($event)"
             />
 
             <!-- Japan: Free Jump indicator -->
@@ -1114,6 +1117,19 @@ export default class Game extends Vue {
         return availableMoves[MoveName.Build] && availableMoves[MoveName.Build]!.map((c) => c.name) || [];
     }
 
+    getPickableRegions(): string[] {
+        if (!this.canMove()) return [];
+
+        const currentPlayer = this.G!.players[this.player!];
+        const availableMoves = currentPlayer.availableMoves!;
+
+        return availableMoves[MoveName.ChooseRegion] || [];
+    }
+
+    pickRegion(region: string) {
+        this.sendMove({ name: MoveName.ChooseRegion, data: region });
+    }
+
     playerHasUsedFreeJump(playerIndex: number): boolean {
         const player = this.G?.players[playerIndex];
         if (!player) return false;
@@ -1222,6 +1238,20 @@ export default class Game extends Vue {
     }
 
     getStatusMessage() {
+        // Region draft (chooseRegions): show the pick prompt to the current picker
+        // even on the very first turn, before any moves are in the log.
+        if (
+            this.G &&
+            this.G.phase == Phase.RegionSelection &&
+            this.player !== undefined &&
+            this.G.currentPlayers.includes(this.player)
+        ) {
+            const draft = this.G.regionDraft;
+            return draft
+                ? `Choose a region to play in (${draft.picked.length + 1} of ${draft.regionsNeeded}).`
+                : 'Choose a region to play in.';
+        }
+
         if (!this.G || this.G.log.length == 1) {
             return 'Game Start!';
         } else if (this.G.currentPlayers == []) {

package/src/components/boards/Map.vue

@@ -92,9 +92,12 @@
              number + 8/14/20 house slots), drawn AFTER the links so the gray lines
              sit behind. Gated on connectionCost; other maps keep circular nodes. -->
         <template v-for="city in cities">
-            <g v-if="city.connectionCost != null" :key="city.name + '_tile'">
+            <g
+                v-if="city.connectionCost != null && city.slotCosts && city.slotCosts.length >= 2"
+                :key="city.name + '_tile'"
+            >
                 <rect
-                    :class="[{ canClick: canBuild(city) }]"
+                    :class="[{ canClick: canBuild(city) || canPickRegion(city) }]"
                     :x="city.x - 23"
                     :y="city.y - 23"
                     width="46"
@@ -104,7 +107,7 @@
                     :stroke="city.region"
                     stroke-width="4"
                     :transform="`rotate(45, ${city.x}, ${city.y})`"
-                    @click="canBuild(city) && build(city)"
+                    @click="onCityClick(city)"
                 >
                     <title>{{ city.name }} — connect for {{ city.connectionCost }} (entry) + house</title>
                 </rect>
@@ -144,16 +147,58 @@
             </g>
         </template>
 
+        <!-- Manhattan single-house spaces: one house per space at its printed price.
+             Small, semi-transparent tile (no entry-cost circle — connection is a flat
+             5 everywhere, stated in the rules) so the price reads cleanly and tiles
+             never hide the board beneath when they overlap. -->
+        <template v-for="city in cities">
+            <g
+                v-if="city.connectionCost != null && city.slotCosts && city.slotCosts.length === 1"
+                :key="city.name + '_mtile'"
+            >
+                <rect
+                    :class="[{ canClick: canBuild(city) }]"
+                    :x="city.x - 13"
+                    :y="city.y - 13"
+                    width="26"
+                    height="26"
+                    rx="5"
+                    :fill="isBlocked(city) ? '#555555' : 'white'"
+                    :fill-opacity="isBlocked(city) ? 0.88 : 0.82"
+                    stroke="black"
+                    stroke-width="1.5"
+                    @click="canBuild(city) && build(city)"
+                >
+                    <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>
+                    </title>
+                </rect>
+                <text
+                    :x="city.x"
+                    :y="city.y"
+                    font-size="17"
+                    font-weight="bold"
+                    text-anchor="middle"
+                    dominant-baseline="central"
+                    :fill="isBlocked(city) ? '#dddddd' : 'black'"
+                >
+                    {{ city.slotCosts[0] }}
+                </text>
+            </g>
+        </template>
+
         <template v-for="city in cities">
             <circle
                 v-if="city.connectionCost == null"
                 :key="city.name + '_circle2'"
-                :class="[{ canClick: canBuild(city) }]"
+                :class="[{ canClick: canBuild(city) || canPickRegion(city) }]"
                 r="20"
                 :cx="city.x"
                 :cy="city.y"
                 fill="gray"
-                @click="canBuild(city) && build(city)"
+                @click="onCityClick(city)"
             >
                 <title>{{ city.name }}</title>
             </circle>
@@ -205,12 +250,16 @@
                 :owner="house.owner"
                 :ownerName="house.ownerName"
                 :color="house.color"
+                :scale="house.scale"
             />
         </template>
 
         <!-- Bremen entry-cost number, on top so it stays readable over houses -->
         <template v-for="city in cities">
-            <g v-if="city.connectionCost != null" :key="city.name + '_cc'">
+            <g
+                v-if="city.connectionCost != null && city.slotCosts && city.slotCosts.length >= 2"
+                :key="city.name + '_cc'"
+            >
                 <circle
                     :cx="city.x"
                     :cy="city.y + 15"
@@ -317,6 +366,25 @@
                 />
             </template>
         </template>
+
+        <!-- chooseRegions draft: outline every city in a pickable region so the
+             current player can see and click the regions they may draft. Shown
+             regardless of the help preference since the draft can't proceed
+             without it. -->
+        <template v-for="city in cities">
+            <circle
+                v-if="canPickRegion(city)"
+                :key="city.name + '_pickRegion'"
+                class="canClick"
+                r="18"
+                :cx="city.x"
+                :cy="city.y"
+                fill="none"
+                stroke="gold"
+                stroke-width="5px"
+                @click="onCityClick(city)"
+            />
+        </template>
     </g>
 </template>
 
@@ -329,7 +397,7 @@ import { City, Connection, Polygon } from 'powergrid-engine/src/maps';
 
 @Component({
     components: {
-        House
+        House,
     },
 })
 export default class Map extends Vue {
@@ -338,6 +406,10 @@ export default class Map extends Vue {
     @Prop() connections?: Connection[];
     @Prop() playerColors?: string[];
     @Prop() buildableCities?: string[];
+    // 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.
+    @Prop() pickableRegions?: string[];
     @Prop() devBackdrop?: { src: string; width: number; height: number; opacity?: number };
     @Prop({ default: 0 }) mapRotation!: number;
 
@@ -351,9 +423,20 @@ export default class Map extends Vue {
             player.cities.forEach((cityPiece) => {
                 const city = gameState.map.cities.find((city) => city.name == cityPiece.name)!;
                 let offsetX, offsetY;
+                let pieceScale: number | undefined;
                 const isNodeWeighted = city.connectionCost != null;
+                // Manhattan = a node-weighted map with exactly one house per space.
+                const isManhattan = isNodeWeighted && city.slotCosts?.length === 1;
                 const is1520 = city.slotCosts?.length === 2 && city.slotCosts[0] === 15;
-                if (isNodeWeighted) {
+                if (isManhattan) {
+                    // One house per space, enlarged and centered so the house silhouette
+                    // slightly overflows the (smaller) price tile and covers it — no white
+                    // corners showing. The House shape's bbox center is ~(199, 230) in its
+                    // own units, so at scale S it centers on the space when offset -199S/-230S.
+                    pieceScale = 0.085;
+                    offsetX = -199 * pieceScale;
+                    offsetY = -230 * pieceScale;
+                } else if (isNodeWeighted) {
                     // Bremen tiles: 8 top, 14 left, 20 right — matches the board layout.
                     // The House piece is anchored top-left (~14×16 after its scale), so
                     // offset by half its size to center it on the slot.
@@ -386,6 +469,7 @@ export default class Map extends Vue {
                     y: city.y + offsetY,
                     color: this.playerColors![pi],
                     owner: pi,
+                    scale: pieceScale,
                 });
             });
         });
@@ -422,10 +506,31 @@ export default class Map extends Vue {
         return !!this.buildableCities!.find((cityName) => cityName == city.name);
     }
 
+    isBlocked(city: City) {
+        return !!this.blockedCities && this.blockedCities.includes(city.name);
+    }
+
     build(city: City) {
         this.$emit('build', city);
     }
 
+    canPickRegion(city: City) {
+        return !!this.pickableRegions && this.pickableRegions.includes(city.region);
+    }
+
+    pickRegion(city: City) {
+        this.$emit('pickRegion', city.region);
+    }
+
+    // During the region draft a city click picks its region; otherwise it builds.
+    onCityClick(city: City) {
+        if (this.canBuild(city)) {
+            this.build(city);
+        } else if (this.canPickRegion(city)) {
+            this.pickRegion(city);
+        }
+    }
+
     onPickCoord(e: MouseEvent) {
         if (!this.devBackdrop) return;
         const g = e.currentTarget as SVGGElement;

package/src/components/pieces/House.vue

@@ -1,5 +1,5 @@
 <template>
-    <g :id="elId" :class="['piece']" :transform="`translate(${currentX}, ${currentY}) scale(0.035)`">
+    <g :id="elId" :class="['piece']" :transform="`translate(${currentX}, ${currentY}) scale(${scale})`">
         <!-- <path d="M15 0 L30 10 L30 30 L0 30 L0 10Z" :fill="color" stroke="black" /> -->
         <path
             d="M187.698 263.636V456.017L3 341.204V169.522L80.8579 108.141L187.698 263.636Z"
@@ -42,6 +42,9 @@ export default class House extends Mixins(Piece) {
     @Prop()
     color?: string;
 
+    @Prop({ default: 0.035 })
+    scale!: number;
+
     @Prop()
     owner?: number;
 

package/src/types/ui-data.ts

@@ -21,6 +21,8 @@ export interface Piece {
     color?: string;
     powerPlant?: PowerPlant;
     transparent?: boolean;
+    // Per-piece render scale override (House defaults to 0.035; Manhattan enlarges).
+    scale?: number;
     side?: 'north' | 'south';
     // South Africa: this coal cube sits in the storage pool below the market.
     // Clicking emits buyResource with fromStorage:true (flat $8 buy).