powergrid-viewer 1.10.1 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "1.10.1",
+  "version": "1.11.1",
   "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.14.1"
+    "powergrid-engine": "1.15.1"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/boards/Map.vue

@@ -22,10 +22,26 @@
         </template> -->
 
         <template v-for="city in cities">
-            <circle :key="city.name + '_region'" r="25" :cx="city.x" :cy="city.y" :fill="city.region" stroke="black">
+            <circle
+                v-if="city.connectionCost == null"
+                :key="city.name + '_region'"
+                r="25"
+                :cx="city.x"
+                :cy="city.y"
+                :fill="city.region"
+                stroke="black"
+            >
                 <title>{{ city.name }}</title>
             </circle>
-            <circle :key="city.name + '_circle'" r="20" :cx="city.x" :cy="city.y" fill="gray" stroke="black">
+            <circle
+                v-if="city.connectionCost == null"
+                :key="city.name + '_circle'"
+                r="20"
+                :cx="city.x"
+                :cy="city.y"
+                fill="gray"
+                stroke="black"
+            >
                 <title>{{ city.name }}</title>
             </circle>
             <!-- South Africa cross-border spaces: render a small red pennant
@@ -72,8 +88,65 @@
             />
         </template>
 
+        <!-- Bremen-style node-weighted districts: clean labeled tiles (entry-cost
+             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'">
+                <rect
+                    :class="[{ canClick: canBuild(city) }]"
+                    :x="city.x - 23"
+                    :y="city.y - 23"
+                    width="46"
+                    height="46"
+                    rx="7"
+                    fill="gray"
+                    :stroke="city.region"
+                    stroke-width="4"
+                    :transform="`rotate(45, ${city.x}, ${city.y})`"
+                    @click="canBuild(city) && build(city)"
+                >
+                    <title>{{ city.name }} — connect for {{ city.connectionCost }} (entry) + house</title>
+                </rect>
+                <!-- house slots laid out like the board: 8 top, 14 left, 20 right -->
+                <template v-for="(sc, i) in city.slotCosts">
+                    <rect
+                        :key="city.name + '_slot' + i"
+                        :x="city.x + nodeSlotPos(i).dx - 6.5"
+                        :y="city.y + nodeSlotPos(i).dy - 6.5"
+                        width="13"
+                        height="13"
+                        rx="1"
+                        fill="gray"
+                        stroke="black"
+                        stroke-width="1"
+                        :transform="`rotate(45, ${city.x + nodeSlotPos(i).dx}, ${city.y + nodeSlotPos(i).dy})`"
+                    />
+                    <text
+                        :key="city.name + '_slotlbl' + i"
+                        :x="city.x + nodeSlotPos(i).dx"
+                        :y="city.y + nodeSlotPos(i).dy"
+                        font-size="10"
+                        text-anchor="middle"
+                        dominant-baseline="central"
+                        fill="black"
+                        :transform="
+                            mapRotation
+                                ? `rotate(${-mapRotation}, ${city.x + nodeSlotPos(i).dx}, ${
+                                      city.y + nodeSlotPos(i).dy
+                                  })`
+                                : undefined
+                        "
+                    >
+                        {{ sc }}
+                    </text>
+                </template>
+            </g>
+        </template>
+
         <template v-for="city in cities">
             <circle
+                v-if="city.connectionCost == null"
                 :key="city.name + '_circle2'"
                 :class="[{ canClick: canBuild(city) }]"
                 r="20"
@@ -135,6 +208,33 @@
             />
         </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'">
+                <circle
+                    :cx="city.x"
+                    :cy="city.y + 15"
+                    r="11"
+                    fill="goldenrod"
+                    stroke="darkgoldenrod"
+                    stroke-width="2"
+                />
+                <circle :cx="city.x" :cy="city.y + 15" r="7.5" fill="gray" stroke="darkgoldenrod" stroke-width="1" />
+                <text
+                    :x="city.x"
+                    :y="city.y + 15"
+                    font-size="11"
+                    font-weight="bold"
+                    text-anchor="middle"
+                    dominant-baseline="central"
+                    fill="black"
+                    :transform="mapRotation ? `rotate(${-mapRotation}, ${city.x}, ${city.y + 15})` : undefined"
+                >
+                    {{ city.connectionCost }}
+                </text>
+            </g>
+        </template>
+
         <template v-for="city in cities">
             <!-- [10,15] city: X at bottom-right -->
             <template v-if="city.slotCosts && city.slotCosts.length === 2 && city.slotCosts[0] === 10">
@@ -251,8 +351,16 @@ export default class Map extends Vue {
             player.cities.forEach((cityPiece) => {
                 const city = gameState.map.cities.find((city) => city.name == cityPiece.name)!;
                 let offsetX, offsetY;
+                const isNodeWeighted = city.connectionCost != null;
                 const is1520 = city.slotCosts?.length === 2 && city.slotCosts[0] === 15;
-                if (is1520) {
+                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.
+                    const slot = this.nodeSlotPos(cityPiece.position);
+                    offsetX = slot.dx - 7;
+                    offsetY = slot.dy - 8;
+                } else if (is1520) {
                     // [15,20] city: slot 0 (cost 15) → bottom-left, slot 1 (cost 20) → bottom-right
                     if (cityPiece.position == 0) {
                         offsetX = -15;
@@ -303,6 +411,13 @@ export default class Map extends Vue {
         return city.y;
     }
 
+    nodeSlotPos(i: number) {
+        // House slots laid out like the printed board: 0 = 8 (top), 1 = 14 (left), 2 = 20 (right).
+        if (i === 0) return { dx: 0, dy: -15 };
+        if (i === 1) return { dx: -15, dy: 0 };
+        return { dx: 15, dy: 0 };
+    }
+
     canBuild(city: City) {
         return !!this.buildableCities!.find((cityName) => cityName == city.name);
     }

package/src/components/boards/Resources.vue

@@ -123,8 +123,8 @@
             {{ resourceResupply[2] }}
         </text>
         <Garbage :pieceId="-1" :targetState="{ x: 382, y: 11 }" :canClick="false" :transparent="false" />
-        <!-- Australia has no main-market uranium row, so its resupply indicator omits uranium. -->
-        <template v-if="!isAustraliaMarket">
+        <!-- Australia and Bremen have no main-market uranium row, so their resupply indicators omit uranium. -->
+        <template v-if="!isAustraliaMarket && !isBremenMarket">
             <text x="414" y="20" font-weight="600" fill="black" style="font-size: 24px">
                 {{ resourceResupply[3] }}
             </text>
@@ -164,7 +164,10 @@
             >
                 {{ index }}
             </text>
-            <g :key="'lines' + index" v-if="!isIndiaResourceMarket && !isNinePriceMarket && !isAustraliaMarket">
+            <g
+                :key="'lines' + index"
+                v-if="!isIndiaResourceMarket && !isNinePriceMarket && !isAustraliaMarket && !isBremenMarket"
+            >
                 <line :x1="25 + 85 * (index - 1)" y1="68" :x2="95 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
                 <line :x1="25 + 85 * (index - 1)" y1="92" :x2="95 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
 
@@ -216,7 +219,7 @@
             </g>
         </template>
 
-        <template v-if="!isIndiaResourceMarket && !isNinePriceMarket && !isAustraliaMarket">
+        <template v-if="!isIndiaResourceMarket && !isNinePriceMarket && !isAustraliaMarket && !isBremenMarket">
             <rect width="30" height="30" x="705" y="45" rx="2" fill="darkgoldenrod" />
             <circle r="10" cx="732" cy="48" fill="yellow" />
             <text
@@ -453,6 +456,9 @@ export default class Resources extends Vue {
     // Australia: coal/oil/garbage-only market that can reach $10 after the Step 3
     // CO2 tax. co2TaxActive closes the $1/$2 columns once that shift has happened.
     isAustraliaMarket: boolean = false;
+    // Bremen: coal/oil/garbage-only market (no uranium row, like Korea's North
+    // table) where the $7/$8 spaces hold two cubes each.
+    isBremenMarket: boolean = false;
     co2TaxActive: boolean = false;
     coalsNorth: Piece[] = [];
     oilsNorth: Piece[] = [];
@@ -507,6 +513,7 @@ export default class Resources extends Vue {
 
         this.isAustraliaMarket = gameState.map?.name === 'Australia';
         this.co2TaxActive = this.isAustraliaMarket && gameState.step >= 3;
+        this.isBremenMarket = gameState.map?.name === 'Bremen';
 
         const isKorea = gameState.coalMarketNorth !== undefined;
         this.isKorea = isKorea;
@@ -606,6 +613,20 @@ export default class Resources extends Vue {
             return;
         }
 
+        // Bremen: three-resource market rendered like Korea's North table — no
+        // uranium row or $10–$16 corner. Slot counts per price space come from
+        // the price arrays ($7/$8 hold two cubes each).
+        if (this.isBremenMarket) {
+            this.coals = this.buildMainRowPieces(gameState.coalPrices!, gameState.coalMarket, 'coal', 48);
+            this.oils = this.buildMainRowPieces(gameState.oilPrices!, gameState.oilMarket, 'oil', 70);
+            this.garbages = this.buildMainRowPieces(gameState.garbagePrices!, gameState.garbageMarket, 'garbage', 94);
+            this.uraniums = [];
+            this.coalsNorth = [];
+            this.oilsNorth = [];
+            this.garbagesNorth = [];
+            return;
+        }
+
         this.isNinePriceMarket = false;
 
         // Non-Korea: original logic below (unchanged).

package/src/self-contained.ts

@@ -10,7 +10,7 @@ function launchSelfContained(selector = '#app') {
 
     const emitter = launch(selector);
 
-    let gameState = setup(6, { map: 'Australia', variant: 'recharged', showMoney: true, randomizeMap: false }, '7');
+    let gameState = setup(6, { map: 'Bremen', variant: 'recharged', showMoney: true, randomizeMap: false }, '0');
 
     // Dev coord-picker example (commented; uncomment + drop a board photo into
     // viewer/public/ to author city coordinates for a new map). See the picker