powergrid-viewer 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "1.6.0",
+  "version": "1.8.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.10.0"
+    "powergrid-engine": "1.12.0"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",
@@ -50,8 +50,8 @@
     "public/audio"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "package": "vue-cli-service build --target lib --name powergrid-viewer src/wrapper.ts"
   }

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)"
             />
@@ -287,6 +289,9 @@
                                     <li><strong>One</strong> player per city</li>
                                     <li>
                                         Resource Resupply: <strong>{{ G.resourceResupply[0] }}</strong>
+                                        <template v-if="G.resourceResupplyNorth">
+                                            (S), <strong>{{ G.resourceResupplyNorth[0] }}</strong> (N)
+                                        </template>
                                     </li>
                                     <li>Bureaucracy: remove <strong>highest</strong> power plant from market</li>
                                 </ul>
@@ -301,6 +306,9 @@
                                     <li><strong>Two</strong> players per city</li>
                                     <li>
                                         Resource Resupply: <strong>{{ G.resourceResupply[1] }}</strong>
+                                        <template v-if="G.resourceResupplyNorth">
+                                            (S), <strong>{{ G.resourceResupplyNorth[1] }}</strong> (N)
+                                        </template>
                                     </li>
                                     <li>Bureaucracy: remove <strong>highest</strong> power plant from market</li>
                                 </ul>
@@ -312,6 +320,9 @@
                                     <li><strong>Three</strong> players per city</li>
                                     <li>
                                         Resource Resupply: <strong>{{ G.resourceResupply[2] }}</strong>
+                                        <template v-if="G.resourceResupplyNorth">
+                                            (S), <strong>{{ G.resourceResupplyNorth[2] }}</strong> (N)
+                                        </template>
                                     </li>
                                     <li>Bureaucracy: remove <strong>lowest</strong> power plant from market</li>
                                     <li>All power plants available for auction</li>
@@ -329,7 +340,7 @@
                         <br />
                         <div>
                             <strong>Map Specific Rules:</strong><br />
-                            <span style="white-space: pre">{{ G.map.mapSpecificRules }}</span>
+                            <span style="white-space: pre-wrap">{{ G.map.mapSpecificRules }}</span>
                         </div>
                     </template>
                     <br />
@@ -621,8 +632,15 @@ export default class Game extends Vue {
         }
     }
 
-    buyResource(resource: ResourceType) {
-        this.sendMove({ name: MoveName.BuyResource, data: { 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 });
     }
 
     bid(bid: number) {
@@ -862,13 +880,13 @@ export default class Game extends Vue {
         return !!availableMoves[MoveName.ChoosePowerPlant];
     }
 
-    buyableResources() {
+    buyableResources(): { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean }[] {
         if (!this.canMove()) return [];
 
         const currentPlayer = this.G!.players[this.player!];
         const availableMoves = currentPlayer.availableMoves!;
 
-        return !!availableMoves[MoveName.BuyResource] && availableMoves[MoveName.BuyResource]!.map((m) => m.resource) || [];
+        return availableMoves[MoveName.BuyResource] || [];
     }
 
     canBuyResource(resource?: ResourceType) {
@@ -1084,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">
@@ -132,6 +164,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 +225,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

@@ -1,5 +1,73 @@
 <template>
     <g>
+        <!-- Korea: North resource market (above the standard market block).
+             The South market re-uses the existing rendering below; Korea-specific
+             cube positions are populated in createPieces. -->
+        <template v-if="isKorea">
+            <text x="20" y="-110" font-weight="700" fill="black" style="font-size: 22px">North Market</text>
+            <rect width="760" height="80" x="20" y="-100" rx="3" fill="#c89c3a" />
+            <template v-for="index in 8">
+                <rect
+                    :key="'north_resources' + index"
+                    width="70"
+                    height="70"
+                    :x="25 + 85 * (index - 1)"
+                    y="-95"
+                    rx="2"
+                    fill="darkgoldenrod"
+                />
+                <circle
+                    :key="'north_resourcesCircle' + index"
+                    r="10"
+                    :cx="92 + 85 * (index - 1)"
+                    cy="-92"
+                    fill="yellow"
+                />
+                <text
+                    :key="'north_resourcesText' + index"
+                    text-anchor="middle"
+                    style="font-size: 16px; font-family: monospace"
+                    :x="92 + 85 * (index - 1)"
+                    y="-92"
+                    fill="darkgoldenrod"
+                >
+                    {{ index }}
+                </text>
+            </template>
+            <template v-for="coal in coalsNorth">
+                <Coal
+                    :key="coal.id"
+                    :pieceId="coal.id"
+                    :targetState="{ x: coal.x, y: coal.y }"
+                    :canClick="!coal.transparent && canBuyResource('coal', coal.side, coal.fromStorage)"
+                    :transparent="coal.transparent"
+                    :scale="0.08"
+                    @click="buyResource('coal', coal.side, coal.fromStorage)"
+                />
+            </template>
+            <template v-for="oil in oilsNorth">
+                <Oil
+                    :key="oil.id"
+                    :pieceId="oil.id"
+                    :targetState="{ x: oil.x, y: oil.y }"
+                    :canClick="!oil.transparent && canBuyResource('oil', oil.side)"
+                    :transparent="oil.transparent"
+                    @click="buyResource('oil', oil.side)"
+                />
+            </template>
+            <template v-for="garbage in garbagesNorth">
+                <Garbage
+                    :key="garbage.id"
+                    :pieceId="garbage.id"
+                    :targetState="{ x: garbage.x, y: garbage.y }"
+                    :canClick="!garbage.transparent && canBuyResource('garbage', garbage.side)"
+                    :transparent="garbage.transparent"
+                    @click="buyResource('garbage', garbage.side)"
+                />
+            </template>
+            <text x="20" y="35" font-weight="700" fill="black" style="font-size: 22px">South Market</text>
+        </template>
+
         <text v-if="resourceResupply[0] < 10" x="30" y="20" font-weight="600" fill="black" style="font-size: 24px"
             >Resource Resupply:</text
         >
@@ -24,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"
@@ -47,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" />
 
@@ -85,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
@@ -159,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')"
+                :canClick="!coal.transparent && canBuyResource('coal', coal.side, coal.fromStorage)"
                 :transparent="coal.transparent"
                 :scale="isIndiaResourceMarket ? 0.06 : 0.08"
-                @click="buyResource('coal')"
+                @click="buyResource('coal', coal.side, coal.fromStorage)"
             />
         </template>
 
@@ -176,9 +281,9 @@
                 :key="oil.id"
                 :pieceId="oil.id"
                 :targetState="{ x: oil.x, y: oil.y }"
-                :canClick="!oil.transparent && canBuyResource('oil')"
+                :canClick="!oil.transparent && canBuyResource('oil', oil.side)"
                 :transparent="oil.transparent"
-                @click="buyResource('oil')"
+                @click="buyResource('oil', oil.side)"
             />
         </template>
 
@@ -187,10 +292,10 @@
                 :key="garbage.id"
                 :pieceId="garbage.id"
                 :targetState="{ x: garbage.x, y: garbage.y }"
-                :canClick="!garbage.transparent && canBuyResource('garbage')"
+                :canClick="!garbage.transparent && canBuyResource('garbage', garbage.side)"
                 :transparent="garbage.transparent"
                 :scale="isIndiaResourceMarket ? 0.8 : 1"
-                @click="buyResource('garbage')"
+                @click="buyResource('garbage', garbage.side)"
             />
         </template>
 
@@ -199,9 +304,9 @@
                 :key="uranium.id"
                 :pieceId="uranium.id"
                 :targetState="{ x: uranium.x, y: uranium.y }"
-                :canClick="!uranium.transparent && canBuyResource('uranium')"
+                :canClick="!uranium.transparent && canBuyResource('uranium', uranium.side)"
                 :transparent="uranium.transparent"
-                @click="buyResource('uranium')"
+                @click="buyResource('uranium', uranium.side)"
             />
         </template>
 
@@ -222,7 +327,29 @@
 
         <template v-if="!preferences.disableHelp">
             <rect
-                v-if="buyableResources.length > 0"
+                v-if="!isKorea && buyableResources.length > 0"
+                x="15"
+                y="35"
+                width="770"
+                height="90"
+                rx="2"
+                fill="none"
+                stroke="blue"
+                stroke-width="2px"
+            />
+            <rect
+                v-if="isKorea && hasBuyableNorth"
+                x="15"
+                y="-105"
+                width="770"
+                height="90"
+                rx="2"
+                fill="none"
+                stroke="blue"
+                stroke-width="2px"
+            />
+            <rect
+                v-if="isKorea && hasBuyableSouth"
                 x="15"
                 y="35"
                 width="770"
@@ -254,7 +381,10 @@ export default class Resources extends Vue {
     @Prop() isMiddleEast?: boolean;
     @Prop() isIndiaResourceMarket?: boolean;
     @Prop() availableSurplusOil?: number;
-    @Prop() buyableResources?: string[];
+    @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;
 
@@ -263,8 +393,142 @@ export default class Resources extends Vue {
     garbages: Piece[] = [];
     uraniums: Piece[] = [];
 
+    isKorea: boolean = false;
+    isNinePriceMarket: boolean = false;
+    coalsNorth: Piece[] = [];
+    oilsNorth: Piece[] = [];
+    garbagesNorth: Piece[] = [];
+
+    // 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 > 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,
+        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 > maxPrice) return;
+            const last = groups[groups.length - 1];
+            if (last && last.price === p) last.slots++;
+            else groups.push({ price: p, slots: 1, firstIdx: idx });
+        });
+
+        const pieces: Piece[] = [];
+        // Width within a price space across which cubes are distributed. Bigger
+        // value → cubes within the same price space appear farther apart.
+        const cubeAreaW = 64;
+        groups.forEach((g) => {
+            const psCenter = 60 + 85 * (g.price - 1);
+            for (let s = 0; s < g.slots; s++) {
+                const i = g.firstIdx + s;
+                const x = g.slots === 1
+                    ? psCenter
+                    : psCenter - cubeAreaW / 2 + (cubeAreaW * (s + 0.5)) / g.slots;
+                pieces.push({
+                    id: `${idPrefix}_${i}`,
+                    x,
+                    y,
+                    transparent: i < (prices.length - market),
+                    side: options.side,
+                });
+            }
+        });
+        return pieces;
+    }
+
     createPieces(gameState: GameState) {
-        if (gameState) {
+        if (!gameState) return;
+
+        const isKorea = gameState.coalMarketNorth !== undefined;
+        this.isKorea = isKorea;
+
+        if (isKorea) {
+            // SOUTH market — main row coal/oil/garbage at the existing y positions.
+            this.coals = this.buildMainRowPieces(
+                gameState.coalPrices!, gameState.coalMarket, 'coal', 48, { side: 'south' },
+            );
+            this.oils = this.buildMainRowPieces(
+                gameState.oilPrices!, gameState.oilMarket, 'oil', 70, { side: 'south' },
+            );
+            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
+            // so they don't visually overlap with oil. $10/$12/$14/$16 go in the corner
+            // 2x2 grid (top row at y=52, bottom row at y=91).
+            this.uraniums = [];
+            const uPrices = gameState.uraniumPrices!;
+            uPrices.forEach((p, i) => {
+                let x: number, y: number;
+                if (p <= 8) {
+                    x = 60 + 85 * (p - 1);
+                    y = 85;
+                } else {
+                    // $10 → (710, 52), $12 → (750, 52), $14 → (710, 91), $16 → (750, 91)
+                    const cornerX = (p === 10 || p === 14) ? 710 : 750;
+                    const cornerY = (p === 10 || p === 12) ? 52 : 91;
+                    x = cornerX;
+                    y = cornerY;
+                }
+                this.uraniums.push({
+                    id: `uranium_${i}`,
+                    x, y,
+                    transparent: i < (uPrices.length - gameState.uraniumMarket),
+                    side: 'south',
+                });
+            });
+
+            // 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.buildMainRowPieces(
+                gameState.coalPricesNorth!, gameState.coalMarketNorth!, 'coal_north', -92, { side: 'north' },
+            );
+            this.oilsNorth = this.buildMainRowPieces(
+                gameState.oilPricesNorth!, gameState.oilMarketNorth!, 'oil_north', -70, { side: 'north' },
+            );
+            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 = [];
+        this.garbagesNorth = [];
+
+        {
             this.coals = [];
             if (gameState.map?.name == 'India') {
                 Array(24)
@@ -322,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;
@@ -435,12 +712,22 @@ export default class Resources extends Vue {
         }
     }
 
-    canBuyResource(resource: string) {
-        return !!this.buyableResources!.find(r => r == resource);
+    canBuyResource(resource: string, side?: 'north' | 'south', fromStorage?: boolean) {
+        return !!this.buyableResources!.find(
+            (r) => r.resource == resource && r.side == side && !!r.fromStorage == !!fromStorage,
+        );
+    }
+
+    get hasBuyableNorth() {
+        return !!this.buyableResources?.some(r => r.side === 'north');
+    }
+
+    get hasBuyableSouth() {
+        return !!this.buyableResources?.some(r => r.side === 'south');
     }
 
-    buyResource(resource: string) {
-        this.$emit('buyResource', resource);
+    buyResource(resource: string, side?: 'north' | 'south', fromStorage?: boolean) {
+        this.$emit('buyResource', { resource, side, fromStorage });
     }
 }
 </script>