powergrid-viewer 2.0.4 → 2.0.6

package/src/components/boards/Resources.vue

@@ -75,10 +75,13 @@
                     :key="coal.id"
                     :pieceId="coal.id"
                     :targetState="{ x: coal.x, y: coal.y }"
-                    :canClick="!coal.transparent && canBuyResource('coal', coal.side, coal.fromStorage)"
+                    :canClick="
+                        coal.transparent ? canUnbuy('coal', coal) : canBuyResource('coal', coal.side, coal.fromStorage)
+                    "
                     :transparent="coal.transparent"
+                    :restorable="canUnbuy('coal', coal)"
                     :scale="0.08"
-                    @click="buyResource('coal', coal.side, coal.fromStorage)"
+                    @click="clickResource('coal', coal)"
                 />
             </template>
             <template v-for="oil in oilsNorth">
@@ -86,9 +89,10 @@
                     :key="oil.id"
                     :pieceId="oil.id"
                     :targetState="{ x: oil.x, y: oil.y }"
-                    :canClick="!oil.transparent && canBuyResource('oil', oil.side)"
+                    :canClick="oil.transparent ? canUnbuy('oil', oil) : canBuyResource('oil', oil.side)"
                     :transparent="oil.transparent"
-                    @click="buyResource('oil', oil.side)"
+                    :restorable="canUnbuy('oil', oil)"
+                    @click="clickResource('oil', oil)"
                 />
             </template>
             <template v-for="garbage in garbagesNorth">
@@ -96,9 +100,12 @@
                     :key="garbage.id"
                     :pieceId="garbage.id"
                     :targetState="{ x: garbage.x, y: garbage.y }"
-                    :canClick="!garbage.transparent && canBuyResource('garbage', garbage.side)"
+                    :canClick="
+                        garbage.transparent ? canUnbuy('garbage', garbage) : canBuyResource('garbage', garbage.side)
+                    "
                     :transparent="garbage.transparent"
-                    @click="buyResource('garbage', garbage.side)"
+                    :restorable="canUnbuy('garbage', garbage)"
+                    @click="clickResource('garbage', garbage)"
                 />
             </template>
             <text x="20" y="35" font-weight="700" fill="black" style="font-size: 22px">South Market</text>
@@ -326,10 +333,13 @@
                 :key="coal.id"
                 :pieceId="coal.id"
                 :targetState="{ x: coal.x, y: coal.y }"
-                :canClick="!coal.transparent && canBuyResource('coal', coal.side, coal.fromStorage)"
+                :canClick="
+                    coal.transparent ? canUnbuy('coal', coal) : canBuyResource('coal', coal.side, coal.fromStorage)
+                "
                 :transparent="coal.transparent"
+                :restorable="canUnbuy('coal', coal)"
                 :scale="isIndiaResourceMarket ? 0.06 : 0.08"
-                @click="buyResource('coal', coal.side, coal.fromStorage)"
+                @click="clickResource('coal', coal)"
             />
         </template>
 
@@ -338,9 +348,10 @@
                 :key="oil.id"
                 :pieceId="oil.id"
                 :targetState="{ x: oil.x, y: oil.y }"
-                :canClick="!oil.transparent && canBuyResource('oil', oil.side)"
+                :canClick="oil.transparent ? canUnbuy('oil', oil) : canBuyResource('oil', oil.side)"
                 :transparent="oil.transparent"
-                @click="buyResource('oil', oil.side)"
+                :restorable="canUnbuy('oil', oil)"
+                @click="clickResource('oil', oil)"
             />
         </template>
 
@@ -349,10 +360,11 @@
                 :key="garbage.id"
                 :pieceId="garbage.id"
                 :targetState="{ x: garbage.x, y: garbage.y }"
-                :canClick="!garbage.transparent && canBuyResource('garbage', garbage.side)"
+                :canClick="garbage.transparent ? canUnbuy('garbage', garbage) : canBuyResource('garbage', garbage.side)"
                 :transparent="garbage.transparent"
+                :restorable="canUnbuy('garbage', garbage)"
                 :scale="isIndiaResourceMarket ? 0.8 : 1"
-                @click="buyResource('garbage', garbage.side)"
+                @click="clickResource('garbage', garbage)"
             />
         </template>
 
@@ -361,9 +373,10 @@
                 :key="uranium.id"
                 :pieceId="uranium.id"
                 :targetState="{ x: uranium.x, y: uranium.y }"
-                :canClick="!uranium.transparent && canBuyResource('uranium', uranium.side)"
+                :canClick="uranium.transparent ? canUnbuy('uranium', uranium) : canBuyResource('uranium', uranium.side)"
                 :transparent="uranium.transparent"
-                @click="buyResource('uranium', uranium.side)"
+                :restorable="canUnbuy('uranium', uranium)"
+                @click="clickResource('uranium', uranium)"
             />
         </template>
 
@@ -426,6 +439,7 @@ import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import { Coal, Garbage, Oil, Uranium } from '../pieces';
 import { Piece, Preferences } from '../../types/ui-data';
 import { range } from 'lodash';
+import { buySourceKey } from '../../util/turn-buffer';
 
 @Component({
     components: {
@@ -443,6 +457,9 @@ export default class Resources extends Vue {
     // South Africa: number of coal cubes in the storage pool below the market.
     // Undefined on all other maps (panel is hidden).
     @Prop() coalStorage?: number;
+    // Purchases still sitting in this turn's buffer, per source (#127). Each one can be
+    // taken back by clicking the empty space it left behind.
+    @Prop() bufferedBuys?: Record<string, number>;
 
     @Inject() preferences!: Preferences;
 
@@ -452,6 +469,7 @@ export default class Resources extends Vue {
     uraniums: Piece[] = [];
 
     isKorea: boolean = false;
+    coalComesFromSupply: boolean = false;
     isNinePriceMarket: boolean = false;
     // 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.
@@ -501,6 +519,7 @@ export default class Resources extends Vue {
                     x,
                     y,
                     transparent: i < (prices.length - market),
+                    ghostRank: (prices.length - market) - i,
                     side: options.side,
                 });
             }
@@ -511,6 +530,10 @@ export default class Resources extends Vue {
     createPieces(gameState: GameState) {
         if (!gameState) return;
 
+        // USA recharged: once the printed track is bare, coal is bought from the $8
+        // supply pile, and a cube taken back returns THERE — so the empty track spaces
+        // must not offer to give it back (#127).
+        this.coalComesFromSupply = !!this.isUsaRecharged && gameState.coalMarket === 0 && gameState.coalSupply > 0;
         this.isAustraliaMarket = gameState.map?.name === 'Australia';
         this.co2TaxActive = this.isAustraliaMarket && gameState.step >= 3;
         this.isBremenMarket = gameState.map?.name === 'Bremen';
@@ -551,6 +574,7 @@ export default class Resources extends Vue {
                     id: `uranium_${i}`,
                     x, y,
                     transparent: i < (uPrices.length - gameState.uraniumMarket),
+                    ghostRank: (uPrices.length - gameState.uraniumMarket) - i,
                     side: 'south',
                 });
             });
@@ -665,7 +689,8 @@ export default class Resources extends Vue {
                             id: 'coal_' + i,
                             x: 672 - 17 * index - 17 * Math.floor(index / 4),
                             y: 48,
-                            transparent: i >= gameState!.coalMarket
+                            transparent: i >= gameState!.coalMarket,
+                            ghostRank: i - (gameState!.coalMarket) + 1,
                         });
                     });
             } else {
@@ -677,6 +702,7 @@ export default class Resources extends Vue {
                             x: 668 - 23.5 * i - 14.5 * Math.floor(i / 3),
                             y: 48,
                             transparent: i >= gameState!.coalMarket,
+                            ghostRank: i - (gameState!.coalMarket) + 1,
                         });
                     });
             }
@@ -720,6 +746,7 @@ export default class Resources extends Vue {
                             x: 651 - 16 * adjustedIndex - 37 * Math.floor(adjustedIndex / 3),
                             y: 70,
                             transparent: i >= availableRegularOil,
+                            ghostRank: i - (availableRegularOil) + 1,
                         });
                     });
             } else {
@@ -731,6 +758,7 @@ export default class Resources extends Vue {
                             x: 651 - 16 * i - 37 * Math.floor(i / 3),
                             y: 70,
                             transparent: i >= gameState!.oilMarket,
+                            ghostRank: i - (gameState!.oilMarket) + 1,
                         });
                     });
             }
@@ -746,6 +774,7 @@ export default class Resources extends Vue {
                             x: 672 - 17 * index - 17 * Math.floor(index / 4),
                             y: 94,
                             transparent: i >= gameState!.garbageMarket,
+                            ghostRank: i - (gameState!.garbageMarket) + 1,
                         });
                     });
             } else {
@@ -757,6 +786,7 @@ export default class Resources extends Vue {
                             x: 668 - 23.5 * i - 14.5 * Math.floor(i / 3),
                             y: 94,
                             transparent: i >= gameState!.garbageMarket,
+                            ghostRank: i - (gameState!.garbageMarket) + 1,
                         });
                     });
             }
@@ -770,7 +800,8 @@ export default class Resources extends Vue {
                             id: 'uranium_' + i,
                             x: 670 - 85 * i,
                             y: 72,
-                            transparent: i >= gameState!.uraniumMarket
+                            transparent: i >= gameState!.uraniumMarket,
+                            ghostRank: i - (gameState!.uraniumMarket) + 1,
                         });
                     });
             } else {
@@ -783,6 +814,7 @@ export default class Resources extends Vue {
                                 x: 750,
                                 y: 91,
                                 transparent: i >= gameState!.uraniumMarket,
+                                ghostRank: i - (gameState!.uraniumMarket) + 1,
                             });
                         } else if (i == 1) {
                             this.uraniums.push({
@@ -790,6 +822,7 @@ export default class Resources extends Vue {
                                 x: 710,
                                 y: 91,
                                 transparent: i >= gameState!.uraniumMarket,
+                                ghostRank: i - (gameState!.uraniumMarket) + 1,
                             });
                         } else if (i == 2) {
                             this.uraniums.push({
@@ -797,6 +830,7 @@ export default class Resources extends Vue {
                                 x: 750,
                                 y: 52,
                                 transparent: i >= gameState!.uraniumMarket,
+                                ghostRank: i - (gameState!.uraniumMarket) + 1,
                             });
                         } else if (i == 3) {
                             this.uraniums.push({
@@ -804,6 +838,7 @@ export default class Resources extends Vue {
                                 x: 710,
                                 y: 52,
                                 transparent: i >= gameState!.uraniumMarket,
+                                ghostRank: i - (gameState!.uraniumMarket) + 1,
                             });
                         } else {
                             this.uraniums.push({
@@ -811,6 +846,7 @@ export default class Resources extends Vue {
                                 x: 1010 - 85 * i,
                                 y: 72,
                                 transparent: i >= gameState!.uraniumMarket,
+                                ghostRank: i - (gameState!.uraniumMarket) + 1,
                             });
                         }
                     });
@@ -835,5 +871,33 @@ export default class Resources extends Vue {
     buyResource(resource: string, side?: 'north' | 'south', fromStorage?: boolean) {
         this.$emit('buyResource', { resource, side, fromStorage });
     }
+
+    /**
+     * Can this empty space give a cube back? Buying empties a track from its cheap end,
+     * so the `n` spaces nearest the fill line hold the `n` purchases this turn's buffer
+     * still has from that source — `ghostRank` counts out from that line.
+     */
+    canUnbuy(resource: string, piece: Piece) {
+        if (!piece.transparent || !piece.ghostRank || !this.bufferedBuys) {
+            return false;
+        }
+
+        if (this.coalComesFromSupply && resource === 'coal' && !piece.fromStorage) {
+            return false;
+        }
+
+        const buffered = this.bufferedBuys[buySourceKey({ resource, side: piece.side, fromStorage: piece.fromStorage })];
+
+        return !!buffered && piece.ghostRank <= buffered;
+    }
+
+    /** A cube buys; the empty space it left takes the purchase back. */
+    clickResource(resource: string, piece: Piece) {
+        if (piece.transparent) {
+            this.$emit('unbuyResource', { resource, side: piece.side, fromStorage: piece.fromStorage });
+        } else {
+            this.buyResource(resource, piece.side, piece.fromStorage);
+        }
+    }
 }
 </script>

package/src/components/pieces/Coal.vue

@@ -3,7 +3,7 @@
         :id="elId"
         :class="[{ canClick: canClick }]"
         :transform="`translate(${currentX}, ${currentY}) scale(${scale})`"
-        :opacity="transparent ? 0.3 : 1"
+        :opacity="pieceOpacity"
         @click="canClick && $emit('click')"
     >
         <path

package/src/components/pieces/Garbage.vue

@@ -3,7 +3,7 @@
         :id="elId"
         :class="[{ canClick: canClick }]"
         :transform="`translate(${currentX}, ${currentY}) scale(${scale})`"
-        :opacity="transparent ? 0.3 : 1"
+        :opacity="pieceOpacity"
         @click="canClick && $emit('click')"
     >
         <path d="M2,5 A9,5,0 0,1 18,5 L18,15 A9,5 0 0,1 2,15Z" fill="none" stroke="black" stroke-miterlimit="0" />

package/src/components/pieces/Oil.vue

@@ -3,7 +3,7 @@
         :id="elId"
         :class="[{ canClick: canClick }]"
         :transform="`translate(${currentX}, ${currentY}) scale(${scale})`"
-        :opacity="transparent ? 0.3 : 1"
+        :opacity="pieceOpacity"
         @click="canClick && $emit('click')"
     >
         <path d="M6,4 A6,4,0 0,1 14,4 L14,16 A6,4 0 0,1 6,16Z" fill="none" stroke="black" />

package/src/components/pieces/Piece.vue

@@ -27,6 +27,12 @@ export default class Piece extends Vue {
     @Prop()
     transparent?: boolean;
 
+    // An empty market space holding a purchase that can still be taken back (#127).
+    // Drawn brighter than a plain empty space so the click target is visible — there
+    // is no hover cursor to discover it with on a phone.
+    @Prop()
+    restorable?: boolean;
+
     @Inject()
     readonly communicator!: EventEmitter;
 
@@ -43,6 +49,14 @@ export default class Piece extends Vue {
 
     moving = false;
 
+    get pieceOpacity(): number {
+        if (!this.transparent) {
+            return 1;
+        }
+
+        return this.restorable ? 0.6 : 0.3;
+    }
+
     startTransitioning() {
         if (this.transitioning) {
             return;

package/src/components/pieces/Uranium.vue

@@ -3,7 +3,7 @@
         :id="elId"
         :class="[{ canClick: canClick }]"
         :transform="`translate(${currentX}, ${currentY})`"
-        :opacity="transparent ? 0.3 : 1"
+        :opacity="pieceOpacity"
         @click="canClick && $emit('click')"
     >
         <path d="M3,3 l4,-2 l6,0 l4,2 l0,11 l-4,2 l-6,0 l-4,-2Z" fill="#F00" stroke="black" />

package/src/launch.ts

@@ -15,14 +15,18 @@ function launch(selector: string) {
     } = {
         state: null,
         emitter: new EventEmitter(),
-        preferences: {
+        // Observable so preference changes update the UI immediately: Game receives
+        // this object as a prop, and Vue 2 does not deep-observe prop values coming
+        // from a non-reactive parent — plain-object mutations (the in-game sound/help
+        // toggles, platform preference pushes) would only paint on the next re-render.
+        preferences: Vue.observable({
             sound: true,
             disableHelp: false,
             adjustPlayerOrder: false,
             undoWholeTurn: true,
             fitToScreen: true,
             stackOnPortrait: true,
-        },
+        }),
         avatars: [],
     };
 
@@ -61,7 +65,8 @@ function launch(selector: string) {
         app.$forceUpdate();
     });
     item.addListener('preferences', (data) => {
-        params.preferences = { ...params.preferences, ...data };
+        // Mutate (don't replace) the observable object so the update stays reactive
+        Object.assign(params.preferences, data);
         app.$forceUpdate();
     });
     item.addListener('gamelog', (logData) => {

package/src/types/ui-data.ts

@@ -30,6 +30,11 @@ export interface Piece {
     // South Africa: this coal cube sits in the storage pool below the market.
     // Clicking emits buyResource with fromStorage:true (flat $8 buy).
     fromStorage?: boolean;
+    // Empty spaces only: distance from the market's fill line, 1 for the space the
+    // next cube would come back to. A purchase made this turn can be taken back by
+    // clicking the ghost that holds it (#127), so the first `n` ranks are clickable
+    // when the turn buffer holds `n` buys from that source.
+    ghostRank?: number;
 }
 
 export enum PieceType {

package/src/util/resource-rows.ts

@@ -0,0 +1,246 @@
+import type { GameState } from 'powergrid-engine';
+
+/**
+ * The row model behind the portrait resource market (`boards/ResourceBoxes.vue`).
+ *
+ * Kept out of the component so it can be tested against the engine directly: every
+ * row's `price` is the money the engine will actually take for the next cube bought
+ * from that source, and `resource-rows.spec.ts` asserts exactly that by buying one.
+ *
+ * Written without optional chaining: webpack 4 parses the unit-test bundle and
+ * rejects `?.` (same note as `util/turn-buffer.ts`).
+ */
+
+export type BuyMove = { resource: string; side?: 'north' | 'south'; fromStorage?: boolean };
+
+export interface ResourceRow {
+    label: string;
+    color: string;
+    /** What a tap sends. Identical in shape to the engine's BuyResource payload. */
+    move: BuyMove;
+    /** What the engine charges for the next cube here, or null when it is empty. */
+    price: number | null;
+    /** The price once the cubes at the current price run out. */
+    next: number | null;
+    /** How many cubes are still on sale at `price`. Zero for a flat pool. */
+    atPrice: number;
+    /** Cubes left in this source altogether. */
+    cubes: number;
+    buyable: boolean;
+    /** On the board but above the per-step price cap, so nobody may buy it yet. */
+    capped: boolean;
+    /** A flat-price pool with no track behind it: every cube costs the same. */
+    flat: boolean;
+    title: string;
+}
+
+export interface ResourceBlock {
+    title?: string;
+    restock?: string;
+    rows: ResourceRow[];
+}
+
+export const RESOURCE_COLORS: Record<string, string> = {
+    coal: '#6b2028',
+    oil: '#15130f',
+    garbage: '#f2d024',
+    uranium: '#dc2626',
+};
+
+/** The engine's own defaults, for maps that do not author their own arrays. */
+const DEFAULT_PRICES: Record<string, number[]> = {
+    coal: [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8],
+    oil: [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8],
+    garbage: [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8],
+    uranium: [1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16],
+};
+
+const FLAT_POOL_PRICE = 8;
+
+export interface RowOptions {
+    /** The seat reading the board — only needed for Central Europe's Wien discount. */
+    player?: number;
+    buyable?: BuyMove[];
+    /** Resupply for this step, indexed coal / oil / garbage / uranium. */
+    resupply?: (number | string)[];
+    resupplyNorth?: (number | string)[];
+    isUsaRecharged?: boolean;
+}
+
+function capitalize(s: string): string {
+    return s[0].toUpperCase() + s.slice(1);
+}
+
+function isKorea(G: GameState): boolean {
+    return G.coalPricesNorth !== undefined;
+}
+
+/** India and friends only sell up to a per-step price. 16 = no cap in practice. */
+function maxPrice(G: GameState): number {
+    const table = (G.map as { maxPriceAvailable?: number[] }).maxPriceAvailable;
+    return table ? table[G.step - 1] : 16;
+}
+
+function pricesFor(G: GameState, resource: string, north: boolean): number[] {
+    const bag = G as unknown as Record<string, number[] | undefined>;
+    const authored = bag[resource + 'Prices' + (north ? 'North' : '')];
+    return authored !== undefined ? authored : DEFAULT_PRICES[resource];
+}
+
+function cubesIn(G: GameState, resource: string, north: boolean): number {
+    const bag = G as unknown as Record<string, number | undefined>;
+    const count = bag[resource + 'Market' + (north ? 'North' : '')];
+    return count === undefined ? 0 : count;
+}
+
+function sameMove(a: BuyMove, b: BuyMove): boolean {
+    return a.resource === b.resource && a.side === b.side && !!a.fromStorage === !!b.fromStorage;
+}
+
+/**
+ * Central Europe sells garbage a dollar cheaper to whoever holds Wien — and the
+ * engine really does charge the lower price, not just offer the move. The box shows
+ * the price THIS player would pay, because that is the only number a tap can act on.
+ */
+function wienDiscount(G: GameState, resource: string, player: number | undefined): number {
+    if (resource !== 'garbage' || G.map.name !== 'Central Europe' || player === undefined) return 0;
+    const me = G.players[player];
+    if (!me) return 0;
+    return me.cities.some((c) => c.name === 'Wien') ? 1 : 0;
+}
+
+function marketRow(G: GameState, resource: string, north: boolean, opts: RowOptions): ResourceRow {
+    const prices = pricesFor(G, resource, north);
+    const cubes = cubesIn(G, resource, north);
+    // Cubes fill from the dear end, so the next one sold is at `length - cubes`.
+    // Clamped only so a market holding more cubes than its track has slots reads as
+    // the cheapest price rather than as a blank — the engine indexes the same array
+    // the same way, so it could not price such a state either. Middle East's "surplus
+    // oil" is not that case: its track is the full 24 and the surplus IS the $1 end.
+    const idx = Math.max(0, prices.length - cubes);
+
+    let price: number | null = null;
+    let atPrice = 0;
+    let next: number | null = null;
+
+    if (cubes > 0) {
+        price = prices[idx] - (north ? 0 : wienDiscount(G, resource, opts.player));
+        for (let i = idx; i < prices.length && prices[i] === prices[idx]; i++) atPrice++;
+        for (let i = idx; i < prices.length; i++) {
+            if (prices[i] !== prices[idx]) {
+                next = prices[i] - (north ? 0 : wienDiscount(G, resource, opts.player));
+                break;
+            }
+        }
+    }
+
+    const move: BuyMove = isKorea(G) ? { resource, side: north ? 'north' : 'south' } : { resource };
+
+    return {
+        label: capitalize(resource),
+        color: RESOURCE_COLORS[resource],
+        move,
+        price,
+        next,
+        atPrice,
+        cubes,
+        buyable: !!opts.buyable && opts.buyable.some((b) => sameMove(b, move)),
+        capped: price !== null && price > maxPrice(G),
+        flat: false,
+        title:
+            cubes > 0
+                ? `${capitalize(resource)} — $${price} each, ${atPrice} at that price, ${cubes} left`
+                : `${capitalize(resource)} — market empty`,
+    };
+}
+
+/** South Africa's storage pool and USA recharged's supply: a flat $8, no track. */
+function flatRow(G: GameState, cubes: number, fromStorage: boolean, label: string, opts: RowOptions): ResourceRow {
+    const move: BuyMove = fromStorage ? { resource: 'coal', fromStorage: true } : { resource: 'coal' };
+    return {
+        label,
+        color: RESOURCE_COLORS.coal,
+        move,
+        price: cubes > 0 ? FLAT_POOL_PRICE : null,
+        next: null,
+        atPrice: 0,
+        cubes,
+        buyable: !!opts.buyable && opts.buyable.some((b) => sameMove(b, move)),
+        capped: cubes > 0 && FLAT_POOL_PRICE > maxPrice(G),
+        flat: true,
+        title: `${label} — $${FLAT_POOL_PRICE} each, ${cubes} left`,
+    };
+}
+
+/**
+ * Does this map sell uranium on the main track at all? Australia moves it to a
+ * separate mine market and Bremen has no nuclear, so on both the row would be a
+ * permanently empty box.
+ */
+function uraniumOnTrack(G: GameState): boolean {
+    return G.map.name !== 'Australia' && G.map.name !== 'Bremen';
+}
+
+function rowsFor(G: GameState, north: boolean, opts: RowOptions): ResourceRow[] {
+    const rows: ResourceRow[] = [];
+
+    // USA recharged keeps selling coal at a flat $8 out of the supply once the printed
+    // track is bare, so the row would otherwise read "out" while the move is on offer.
+    if (!north && opts.isUsaRecharged && G.coalMarket === 0 && G.coalSupply > 0) {
+        rows.push(flatRow(G, G.coalSupply, false, 'Coal (from supply)', opts));
+    } else {
+        rows.push(marketRow(G, 'coal', north, opts));
+    }
+
+    // South Africa: used coal returns to a storage pool below the market and can
+    // always be bought back at $8, alongside whatever the track is charging. It sits
+    // directly under the market coal rather than at the bottom of the list, so the two
+    // coal prices are read together — the track is usually the cheaper of the two and
+    // that should be obvious without hunting.
+    if (!north && G.coalStorage !== undefined) {
+        rows.push(flatRow(G, G.coalStorage, true, 'Coal (from storage)', opts));
+    }
+
+    rows.push(marketRow(G, 'oil', north, opts));
+    rows.push(marketRow(G, 'garbage', north, opts));
+
+    // Korea's north side has no uranium row.
+    if (!north && uraniumOnTrack(G)) {
+        rows.push(marketRow(G, 'uranium', north, opts));
+    }
+
+    return rows;
+}
+
+/**
+ * The resupply table is indexed coal / oil / garbage / uranium, and the track rows
+ * are drawn in that order — so the numbers line up with the boxes below them. Rows
+ * that are not part of the printed track (the flat pools) get no number.
+ */
+function restockText(table: (number | string)[] | undefined, rows: ResourceRow[]): string | undefined {
+    if (!table) return undefined;
+    const numbers = rows.filter((r) => !r.flat).map((r, i) => table[i]);
+    return numbers.every((n) => n === undefined) ? undefined : numbers.filter((n) => n !== undefined).join(' / ');
+}
+
+export function resourceBlocks(G: GameState, opts: RowOptions = {}): ResourceBlock[] {
+    const blocks: ResourceBlock[] = [];
+
+    if (isKorea(G)) {
+        const northRows = rowsFor(G, true, opts);
+        blocks.push({
+            title: 'North Market',
+            restock: restockText(opts.resupplyNorth, northRows),
+            rows: northRows,
+        });
+    }
+
+    const southRows = rowsFor(G, false, opts);
+    blocks.push({
+        title: isKorea(G) ? 'South Market' : undefined,
+        restock: restockText(opts.resupply, southRows),
+        rows: southRows,
+    });
+
+    return blocks;
+}