powergrid-viewer 1.11.4 → 1.11.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "1.11.4",
+  "version": "1.11.6",
   "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.4"
+    "powergrid-engine": "1.15.6"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/Game.vue

@@ -55,9 +55,11 @@
                 :connections="G.map.connections"
                 :polygons="G.map.polygons"
                 :buildableCities="getBuildableCities()"
+                :pickableRegions="getPickableRegions()"
                 :devBackdrop="G.map.devBackdrop"
                 :mapRotation="G.map.mapRotation || 0"
                 @build="build($event)"
+                @pickRegion="pickRegion($event)"
             />
 
             <!-- Japan: Free Jump indicator -->
@@ -1114,6 +1116,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 +1237,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

@@ -94,7 +94,7 @@
         <template v-for="city in cities">
             <g v-if="city.connectionCost != null" :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 +104,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>
@@ -148,12 +148,12 @@
             <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>
@@ -317,6 +317,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>
 
@@ -338,6 +357,8 @@ export default class Map extends Vue {
     @Prop() connections?: Connection[];
     @Prop() playerColors?: string[];
     @Prop() buildableCities?: 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;
 
@@ -426,6 +447,23 @@ export default class Map extends Vue {
         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;