powergrid-viewer 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "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.11.0"
+    "powergrid-engine": "1.13.0"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/Game.vue

@@ -49,12 +49,13 @@
 
             <Map
                 ref="map"
-                :transform="`translate(${G.map.mapPosition[0]}, ${G.map.mapPosition[1]})`"
+                :transform="mapTransform"
                 :playerColors="playerColors"
                 :cities="G.map.cities"
                 :connections="G.map.connections"
                 :polygons="G.map.polygons"
                 :buildableCities="getBuildableCities()"
+                :devBackdrop="G.map.devBackdrop"
                 @build="build($event)"
             />
 
@@ -68,6 +69,7 @@
                     G.map.name == 'Middle East' ? Math.max(G.oilMarket - G.oilPrices.filter((p) => p > 1).length, 0) : 0
                 "
                 :buyableResources="buyableResources()"
+                :coalStorage="G.coalStorage"
                 :resourceResupply="getResourceResupply()"
                 @buyResource="buyResource($event)"
             />
@@ -630,11 +632,14 @@ export default class Game extends Vue {
         }
     }
 
-    buyResource(payload: { resource: ResourceType, side?: 'north' | 'south' }) {
-        const data: { resource: ResourceType, side?: 'north' | 'south' } = { resource: payload.resource };
+    buyResource(payload: { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean }) {
+        const data: { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean } = { resource: payload.resource };
         if (payload.side) {
             data.side = payload.side;
         }
+        if (payload.fromStorage) {
+            data.fromStorage = payload.fromStorage;
+        }
         this.sendMove({ name: MoveName.BuyResource, data });
     }
 
@@ -875,7 +880,7 @@ export default class Game extends Vue {
         return !!availableMoves[MoveName.ChoosePowerPlant];
     }
 
-    buyableResources(): { resource: ResourceType, side?: 'north' | 'south' }[] {
+    buyableResources(): { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean }[] {
         if (!this.canMove()) return [];
 
         const currentPlayer = this.G!.players[this.player!];
@@ -1097,6 +1102,19 @@ export default class Game extends Vue {
         return playersSortedByScore(this.G!);
     }
 
+    get mapTransform() {
+        if (!this.G?.map) return '';
+        const [mx, my] = this.G.map.mapPosition!;
+        const rotation = this.G.map.mapRotation;
+        if (!rotation) return `translate(${mx}, ${my})`;
+        const cities = this.G.map.cities;
+        const xs = cities.map((c) => c.x);
+        const ys = cities.map((c) => c.y);
+        const cx = (Math.min(...xs) + Math.max(...xs)) / 2;
+        const cy = (Math.min(...ys) + Math.max(...ys)) / 2;
+        return `translate(${mx}, ${my}) rotate(${rotation}, ${cx}, ${cy})`;
+    }
+
     get adjustedPlayerOrder() {
         if (!this.G) {
             return [];

package/src/components/boards/Map.vue

@@ -1,5 +1,16 @@
 <template>
-    <g>
+    <g @click="onPickCoord">
+        <!-- Dev-only backdrop for coord-picking. See GameMap.devBackdrop. -->
+        <image
+            v-if="devBackdrop"
+            :href="devBackdrop.src"
+            x="0"
+            y="0"
+            :width="devBackdrop.width"
+            :height="devBackdrop.height"
+            :opacity="devBackdrop.opacity != null ? devBackdrop.opacity : 0.5"
+        />
+
         <!-- <template v-for="polygon in polygons">
             <polygon
                 :key="'pol_ ' + polygon.region"
@@ -17,6 +28,27 @@
             <circle :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
+                 above the city. Marks a single-occupancy space ($30 total cost). -->
+            <g v-if="city.singleOccupancy" :key="city.name + '_flag'">
+                <line
+                    :x1="city.x + 12"
+                    :y1="city.y - 12"
+                    :x2="city.x + 12"
+                    :y2="city.y - 32"
+                    stroke="black"
+                    stroke-width="1.5"
+                />
+                <polygon
+                    :points="`${city.x + 12},${city.y - 32} ${city.x + 26},${city.y - 28} ${city.x + 12},${
+                        city.y - 24
+                    }`"
+                    fill="red"
+                    stroke="black"
+                    stroke-width="1"
+                />
+                <title>{{ city.name }} — cross-border space (1 house max, 30 Elektro total cost)</title>
+            </g>
         </template>
 
         <template v-for="connection in connections">
@@ -96,6 +128,55 @@
             />
         </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">
+                <line
+                    :key="city.name + '_x1'"
+                    :x1="city.x + 10"
+                    :y1="city.y + 10"
+                    :x2="city.x + 19"
+                    :y2="city.y + 19"
+                    stroke="black"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                />
+                <line
+                    :key="city.name + '_x2'"
+                    :x1="city.x + 19"
+                    :y1="city.y + 10"
+                    :x2="city.x + 10"
+                    :y2="city.y + 19"
+                    stroke="black"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                />
+            </template>
+            <!-- [15,20] city: X at top-middle -->
+            <template v-if="city.slotCosts && city.slotCosts.length === 2 && city.slotCosts[0] === 15">
+                <line
+                    :key="city.name + '_x1'"
+                    :x1="city.x - 5"
+                    :y1="city.y - 21"
+                    :x2="city.x + 5"
+                    :y2="city.y - 11"
+                    stroke="black"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                />
+                <line
+                    :key="city.name + '_x2'"
+                    :x1="city.x + 5"
+                    :y1="city.y - 21"
+                    :x2="city.x - 5"
+                    :y2="city.y - 11"
+                    stroke="black"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                />
+            </template>
+        </template>
+
         <template v-if="!preferences.disableHelp">
             <template v-for="city in cities">
                 <circle
@@ -132,6 +213,7 @@ export default class Map extends Vue {
     @Prop() connections?: Connection[];
     @Prop() playerColors?: string[];
     @Prop() buildableCities?: string[];
+    @Prop() devBackdrop?: { src: string; width: number; height: number; opacity?: number };
 
     @Inject() preferences!: Preferences;
 
@@ -192,5 +274,15 @@ export default class Map extends Vue {
     build(city: City) {
         this.$emit('build', city);
     }
+
+    onPickCoord(e: MouseEvent) {
+        if (!this.devBackdrop) return;
+        const g = e.currentTarget as SVGGElement;
+        const ctm = g.getScreenCTM();
+        if (!ctm) return;
+        const pt = new DOMPoint(e.clientX, e.clientY).matrixTransform(ctm.inverse());
+        // eslint-disable-next-line no-console
+        console.log(`{ name: Cities.TODO, region: Regions.TODO, x: ${Math.round(pt.x)}, y: ${Math.round(pt.y)} },`);
+    }
 }
 </script>

package/src/components/boards/Resources.vue

@@ -39,10 +39,10 @@
                     :key="coal.id"
                     :pieceId="coal.id"
                     :targetState="{ x: coal.x, y: coal.y }"
-                    :canClick="!coal.transparent && canBuyResource('coal', coal.side)"
+                    :canClick="!coal.transparent && canBuyResource('coal', coal.side, coal.fromStorage)"
                     :transparent="coal.transparent"
                     :scale="0.08"
-                    @click="buyResource('coal', coal.side)"
+                    @click="buyResource('coal', coal.side, coal.fromStorage)"
                 />
             </template>
             <template v-for="oil in oilsNorth">
@@ -92,9 +92,18 @@
         </text>
         <Uranium :pieceId="-1" :targetState="{ x: 428, y: 12 }" :canClick="false" :transparent="false" />
 
-        <rect v-if="!isIndiaResourceMarket" width="760" height="80" x="20" y="40" rx="3" fill="goldenrod" />
+        <rect
+            v-if="!isIndiaResourceMarket && !isNinePriceMarket"
+            width="760"
+            height="80"
+            x="20"
+            y="40"
+            rx="3"
+            fill="goldenrod"
+        />
+        <rect v-if="isNinePriceMarket" width="780" height="80" x="20" y="40" rx="3" fill="goldenrod" />
         <rect v-if="isIndiaResourceMarket" width="680" height="80" x="20" y="40" rx="3" fill="goldenrod" />
-        <template v-for="index in 8">
+        <template v-for="index in isNinePriceMarket ? 9 : 8">
             <rect
                 :key="'resources' + index"
                 width="70"
@@ -115,7 +124,7 @@
             >
                 {{ index }}
             </text>
-            <g :key="'lines' + index" v-if="!isIndiaResourceMarket">
+            <g :key="'lines' + index" v-if="!isIndiaResourceMarket && !isNinePriceMarket">
                 <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" />
 
@@ -153,7 +162,7 @@
             </g>
         </template>
 
-        <template v-if="!isIndiaResourceMarket">
+        <template v-if="!isIndiaResourceMarket && !isNinePriceMarket">
             <rect width="30" height="30" x="705" y="45" rx="2" fill="darkgoldenrod" />
             <circle r="10" cx="732" cy="48" fill="yellow" />
             <text
@@ -227,15 +236,43 @@
             <Coal :pieceId="-1" :targetState="{ x: 858, y: 57 }" :canClick="false" :transparent="true" :scale="0.2" />
         </template>
 
+        <!-- South Africa: coal storage pool below the market. Always-available $8
+             flat buy. Used coal returns here; market refills draw from here first. -->
+        <template v-if="coalStorage !== undefined">
+            <rect
+                width="180"
+                height="70"
+                x="795"
+                y="45"
+                rx="2"
+                fill="chocolate"
+                stroke="sandybrown"
+                stroke-width="4px"
+            />
+            <circle r="10" cx="973" cy="45" fill="yellow" />
+            <text
+                text-anchor="middle"
+                style="font-size: 16px; font-family: monospace"
+                x="973"
+                y="45"
+                fill="darkgoldenrod"
+            >
+                8
+            </text>
+            <text text-anchor="start" style="font-size: 11px; font-family: monospace" x="800" y="42" fill="black">
+                Coal storage
+            </text>
+        </template>
+
         <template v-for="coal in coals">
             <Coal
                 :key="coal.id"
                 :pieceId="coal.id"
                 :targetState="{ x: coal.x, y: coal.y }"
-                :canClick="!coal.transparent && canBuyResource('coal', coal.side)"
+                :canClick="!coal.transparent && canBuyResource('coal', coal.side, coal.fromStorage)"
                 :transparent="coal.transparent"
                 :scale="isIndiaResourceMarket ? 0.06 : 0.08"
-                @click="buyResource('coal', coal.side)"
+                @click="buyResource('coal', coal.side, coal.fromStorage)"
             />
         </template>
 
@@ -344,7 +381,10 @@ export default class Resources extends Vue {
     @Prop() isMiddleEast?: boolean;
     @Prop() isIndiaResourceMarket?: boolean;
     @Prop() availableSurplusOil?: number;
-    @Prop() buyableResources?: { resource: string, side?: 'north' | 'south' }[];
+    @Prop() buyableResources?: { resource: string, side?: 'north' | 'south', fromStorage?: boolean }[];
+    // South Africa: number of coal cubes in the storage pool below the market.
+    // Undefined on all other maps (panel is hidden).
+    @Prop() coalStorage?: number;
 
     @Inject() preferences!: Preferences;
 
@@ -354,25 +394,27 @@ export default class Resources extends Vue {
     uraniums: Piece[] = [];
 
     isKorea: boolean = false;
+    isNinePriceMarket: boolean = false;
     coalsNorth: Piece[] = [];
     oilsNorth: Piece[] = [];
     garbagesNorth: Piece[] = [];
 
-    // Korea: lay out cubes within 8 price spaces ($1..$8) using the prices array
+    // Lay out cubes within price spaces ($1..$maxPrice) using the prices array
     // to determine slot count per space. Cubes are indexed cheap→expensive in the
     // prices array, so the cheap end empties as the market depletes.
-    // Skips entries with price > 8 (uranium corner $10/$12/$14/$16) — caller renders
-    // those separately.
-    private buildKoreaMainRowPieces(
+    // Skips entries with price > maxPrice — used for Korea uranium corners ($10..$16),
+    // which the caller renders separately. Europe maxPrice=9 (no corners).
+    private buildMainRowPieces(
         prices: number[],
         market: number,
         idPrefix: string,
-        side: 'north' | 'south',
         y: number,
+        options: { side?: 'north' | 'south'; maxPrice?: number } = {},
     ): Piece[] {
+        const maxPrice = options.maxPrice ?? 8;
         const groups: { price: number; slots: number; firstIdx: number }[] = [];
         prices.forEach((p, idx) => {
-            if (p > 8) return;
+            if (p > maxPrice) return;
             const last = groups[groups.length - 1];
             if (last && last.price === p) last.slots++;
             else groups.push({ price: p, slots: 1, firstIdx: idx });
@@ -394,7 +436,7 @@ export default class Resources extends Vue {
                     x,
                     y,
                     transparent: i < (prices.length - market),
-                    side,
+                    side: options.side,
                 });
             }
         });
@@ -409,14 +451,14 @@ export default class Resources extends Vue {
 
         if (isKorea) {
             // SOUTH market — main row coal/oil/garbage at the existing y positions.
-            this.coals = this.buildKoreaMainRowPieces(
-                gameState.coalPrices!, gameState.coalMarket, 'coal', 'south', 48,
+            this.coals = this.buildMainRowPieces(
+                gameState.coalPrices!, gameState.coalMarket, 'coal', 48, { side: 'south' },
             );
-            this.oils = this.buildKoreaMainRowPieces(
-                gameState.oilPrices!, gameState.oilMarket, 'oil', 'south', 70,
+            this.oils = this.buildMainRowPieces(
+                gameState.oilPrices!, gameState.oilMarket, 'oil', 70, { side: 'south' },
             );
-            this.garbages = this.buildKoreaMainRowPieces(
-                gameState.garbagePrices!, gameState.garbageMarket, 'garbage', 'south', 94,
+            this.garbages = this.buildMainRowPieces(
+                gameState.garbagePrices!, gameState.garbageMarket, 'garbage', 94, { side: 'south' },
             );
 
             // SOUTH uranium: $1..$8 sit between the oil (y=70) and garbage (y=94) rows
@@ -446,19 +488,41 @@ export default class Resources extends Vue {
 
             // NORTH market — placed above the South so its rect sits at y=-100..-20.
             // Cube rows match the South layout's offsets within the rect (top/mid/bottom).
-            this.coalsNorth = this.buildKoreaMainRowPieces(
-                gameState.coalPricesNorth!, gameState.coalMarketNorth!, 'coal_north', 'north', -92,
+            this.coalsNorth = this.buildMainRowPieces(
+                gameState.coalPricesNorth!, gameState.coalMarketNorth!, 'coal_north', -92, { side: 'north' },
             );
-            this.oilsNorth = this.buildKoreaMainRowPieces(
-                gameState.oilPricesNorth!, gameState.oilMarketNorth!, 'oil_north', 'north', -70,
+            this.oilsNorth = this.buildMainRowPieces(
+                gameState.oilPricesNorth!, gameState.oilMarketNorth!, 'oil_north', -70, { side: 'north' },
             );
-            this.garbagesNorth = this.buildKoreaMainRowPieces(
-                gameState.garbagePricesNorth!, gameState.garbageMarketNorth!, 'garbage_north', 'north', -46,
+            this.garbagesNorth = this.buildMainRowPieces(
+                gameState.garbagePricesNorth!, gameState.garbageMarketNorth!, 'garbage_north', -46, { side: 'north' },
             );
 
             return;
         }
 
+        // Europe and North America: 9 price spaces ($1..$9), per-price slot count
+        // varies by resource, and uranium tops out at $9 (no $10/$12/$14/$16 corner).
+        // Rows are spaced apart (uranium between oil and garbage) so each cube
+        // is comfortably clickable: oil 70 → uranium 92 → garbage 106.
+        if (gameState.map?.name === 'Europe' || gameState.map?.name === 'North America') {
+            this.isNinePriceMarket = true;
+            this.coals = this.buildMainRowPieces(
+                gameState.coalPrices!, gameState.coalMarket, 'coal', 48, { maxPrice: 9 },
+            );
+            this.oils = this.buildMainRowPieces(
+                gameState.oilPrices!, gameState.oilMarket, 'oil', 70, { maxPrice: 9 },
+            );
+            this.uraniums = this.buildMainRowPieces(
+                gameState.uraniumPrices!, gameState.uraniumMarket, 'uranium', 92, { maxPrice: 9 },
+            );
+            this.garbages = this.buildMainRowPieces(
+                gameState.garbagePrices!, gameState.garbageMarket, 'garbage', 106, { maxPrice: 9 },
+            );
+            return;
+        }
+        this.isNinePriceMarket = false;
+
         // Non-Korea: original logic below (unchanged).
         this.coalsNorth = [];
         this.oilsNorth = [];
@@ -522,6 +586,19 @@ export default class Resources extends Vue {
                 });
             }
 
+            // South Africa: storage pool cubes. Always $8, clickable when buyable.
+            if (gameState.coalStorage !== undefined) {
+                range(gameState.coalStorage).forEach((i) => {
+                    this.coals.push({
+                        id: 'coal_storage_' + i,
+                        x: 800 + (i % 8) * 20 + (i >= 8 && i < 16 ? 10 : 0),
+                        y: 50 + Math.floor(i / 8) * 20,
+                        transparent: false,
+                        fromStorage: true,
+                    });
+                });
+            }
+
             this.oils = [];
             if (gameState.map?.name == 'Middle East') {
                 let maxRegularOil = gameState.oilPrices!.filter(p => p > 1).length;
@@ -635,8 +712,10 @@ export default class Resources extends Vue {
         }
     }
 
-    canBuyResource(resource: string, side?: 'north' | 'south') {
-        return !!this.buyableResources!.find(r => r.resource == resource && r.side == side);
+    canBuyResource(resource: string, side?: 'north' | 'south', fromStorage?: boolean) {
+        return !!this.buyableResources!.find(
+            (r) => r.resource == resource && r.side == side && !!r.fromStorage == !!fromStorage,
+        );
     }
 
     get hasBuyableNorth() {
@@ -647,8 +726,8 @@ export default class Resources extends Vue {
         return !!this.buyableResources?.some(r => r.side === 'south');
     }
 
-    buyResource(resource: string, side?: 'north' | 'south') {
-        this.$emit('buyResource', { resource, side });
+    buyResource(resource: string, side?: 'north' | 'south', fromStorage?: boolean) {
+        this.$emit('buyResource', { resource, side, fromStorage });
     }
 }
 </script>

package/src/self-contained.ts

@@ -10,30 +10,31 @@ function launchSelfContained(selector = '#app') {
 
     const emitter = launch(selector);
 
-    let gameState = setup(6, { map: 'Korea', variant: 'recharged', showMoney: true, randomizeMap: false }, '3');
-
-    // gameState.map.viewBox = [1480, 1060];
-    // gameState.map.playerOrderPosition = [1160, 140];
-    // gameState.map.cityCountPosition = [0, 0];
-    // gameState.map.powerPlantMarketPosition = [745, 0];
-    // gameState.map.mapPosition = [0, 100];
-    // gameState.map.buttonsPosition = [1305, 0];
-    // gameState.map.playerBoardsPosition = [1105, 200];
-    // gameState.map.roundInfoPosition = [20, 590];
-    // gameState.map.supplyPosition = [0, 720];
-
+    let gameState = setup(
+        5,
+        { map: 'Baden-Württemberg', variant: 'original', showMoney: true, randomizeMap: false },
+        '7'
+    );
+
+    // Dev coord-picker example (commented; uncomment + drop a board photo into
+    // viewer/public/ to author city coordinates for a new map). See the picker
+    // notes in CLAUDE/memory or in the engine map-authoring docs.
+    //
+    // import { map as fullMap } from 'powergrid-engine/src/maps/southafrica';
+    // gameState.map.cities = fullMap.cities.map((c) => ({ ...c }));
+    // gameState.map.connections = fullMap.connections.map((c) => ({ ...c, nodes: [...c.nodes] }));
+    // gameState.map.devBackdrop = { src: '/southafrica.jpg', width: 1200, height: 863, opacity: 0.5 };
     // gameState.map.adjustRatio = [1, 1];
-    // gameState.map.cities = gameState.map.cities.map(city => ({
-    //     ...city,
-    //     x: city.x * gameState.map.adjustRatio![0],
-    //     y: city.y * gameState.map.adjustRatio![1]
-    // }));
-
-    // gameState.map.cities = gameState.map.cities.map(city => ({
-    //     ...city,
-    //     x: city.y,
-    //     y: 600 - city.x
-    // }));
+    // gameState.map.mapRotation = 0;
+    // gameState.map.mapPosition = [0, 0];
+    // gameState.map.viewBox = [1200, 863];
+    // gameState.map.playerBoardsPosition = [-9999, -9999];
+    // gameState.map.powerPlantMarketPosition = [-9999, -9999];
+    // gameState.map.buttonsPosition = [-9999, -9999];
+    // gameState.map.supplyPosition = [-9999, -9999];
+    // gameState.map.roundInfoPosition = [-9999, -9999];
+    // gameState.map.cityCountPosition = [-9999, -9999];
+    // gameState.map.playerOrderPosition = [-9999, -9999];
 
     for (let i = 0; i < gameState.players.length; i++) {
         gameState.players[i].name = `Player ${i + 1}`;

package/src/types/ui-data.ts

@@ -22,6 +22,9 @@ export interface Piece {
     powerPlant?: PowerPlant;
     transparent?: boolean;
     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).
+    fromStorage?: boolean;
 }
 
 export enum PieceType {