powergrid-viewer 2.0.5 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "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": "2.0.3"
+    "powergrid-engine": "2.0.4"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/Game.vue

@@ -156,7 +156,9 @@
                     :buyableResources="buyableResources()"
                     :resourceResupply="getResourceResupply()"
                     :resourceResupplyNorth="getResourceResupplyNorth()"
+                    :bufferedBuys="bufferedBuys"
                     @buyResource="buyResource($event)"
+                    @unbuyResource="unbuyResource($event)"
                 />
                 <Resources
                     v-else
@@ -174,7 +176,9 @@
                     :coalStorage="G.coalStorage"
                     :resourceResupply="getResourceResupply()"
                     :resourceResupplyNorth="getResourceResupplyNorth()"
+                    :bufferedBuys="bufferedBuys"
                     @buyResource="buyResource($event)"
+                    @unbuyResource="unbuyResource($event)"
                 />
             </g>
 
@@ -721,7 +725,13 @@ import { Vue, Component, Prop, Watch, Provide, ProvideReactive, Ref } from 'vue-
 import { MoveName, ended, playersSortedByScore, reconstructState } from 'powergrid-engine';
 import type { GameState, LogItem, Move, Player } from 'powergrid-engine';
 import { EventEmitter } from 'events';
-import { matchesTurnBuffer, rebaseTurnBuffer, replayTurnBuffer as replayBuffer } from '../util/turn-buffer';
+import {
+    bufferedBuyCounts,
+    lastBuyIndex,
+    matchesTurnBuffer,
+    rebaseTurnBuffer,
+    replayTurnBuffer as replayBuffer,
+} from '../util/turn-buffer';
 import { UIData, Preferences } from '../types/ui-data';
 import { Card, House, Coal, Oil, Garbage, Uranium } from './pieces';
 import {
@@ -1261,6 +1271,47 @@ export default class Game extends Vue {
         this.sendMove({ name: MoveName.BuyResource, data });
     }
 
+    /**
+     * Take back a resource bought earlier in this same turn (#127): a market's empty
+     * spaces are clickable while the buffer still holds a purchase from that source.
+     *
+     * This is not an engine undo — there is no Undo move any more (2.0.0). A tentative
+     * turn lives only in this buffer, so a purchase is taken back by dropping it and
+     * replaying the rest, exactly as `undo()` drops the last move. Removing a buy only
+     * ever frees money and plant capacity, so the remaining buffer always replays.
+     */
+    unbuyResource(payload: { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean }) {
+        if (this.paused || !this.committedState) {
+            return;
+        }
+
+        const index = lastBuyIndex(this.turnMoves, payload);
+
+        if (index < 0) {
+            return;
+        }
+
+        this.turnMoves.splice(index, 1);
+
+        if (this.turnMoves.length > 0) {
+            const preview = this.replayTurnBuffer();
+            this.emitter.emit('move', [...this.turnMoves]);
+            this.replaceState(preview, false);
+        } else {
+            // Empty buffer: nothing to send — nothing was ever persisted for this turn,
+            // so the last committed state IS the turn start.
+            this.replaceState(this.committedState, false);
+        }
+    }
+
+    /**
+     * Cubes the turn buffer would give back, per source — how many of each market's
+     * empty spaces are clickable.
+     */
+    get bufferedBuys(): Record<string, number> {
+        return bufferedBuyCounts(this.turnMoves);
+    }
+
     bid(bid: number) {
         this.sendMove({ name: MoveName.Bid, data: bid });
     }
@@ -1973,6 +2024,10 @@ export default class Game extends Vue {
      * the choice would disappear along with the layout.
      */
     portraitViewport = false;
+
+    /** Viewport the board was last laid out against, as `WxH` — see onViewportResize. */
+    private lastViewport = '';
+    private viewportObserver: ResizeObserver | null = null;
     /** Height of the stacked canvas, in scene units. */
     stackHeight = STACK_WIDTH;
     /** Wrapper transform per slot; empty means "render as authored". */
@@ -2011,6 +2066,16 @@ export default class Game extends Vue {
         return window.innerWidth < 900 && window.innerHeight > window.innerWidth * 1.1;
     }
 
+    /**
+     * The platform mounts the viewer in an iframe that is `display: none` until the
+     * game state arrives, so the first measurement here is 0x0 — which is not a
+     * landscape phone, it is nothing at all. Answering then would settle the layout
+     * against a viewport that does not exist yet.
+     */
+    private viewportIsMeasurable(): boolean {
+        return window.innerWidth > 0 && window.innerHeight > 0;
+    }
+
     private shouldStack(): boolean {
         return this.isPortraitViewport() && this.preferences.stackOnPortrait !== false;
     }
@@ -2024,6 +2089,11 @@ export default class Game extends Vue {
     }
 
     relayout() {
+        if (!this.viewportIsMeasurable()) {
+            // Still hidden. Whoever reveals us triggers the observer below.
+            return;
+        }
+
         this.portraitViewport = this.isPortraitViewport();
 
         if (!this.shouldStack()) {
@@ -2138,17 +2208,57 @@ export default class Game extends Vue {
         this.$nextTick(() => this.relayout());
     }
 
-    private onViewportResize = () => this.scheduleRelayout();
+    /**
+     * Re-lay out only when the viewport itself changed size. The observer below also
+     * fires for our OWN output — laying out the board changes the document's box — and
+     * without this that would be a loop.
+     */
+    private onViewportResize = () => {
+        const size = `${window.innerWidth}x${window.innerHeight}`;
+
+        if (size === this.lastViewport) {
+            return;
+        }
+
+        this.lastViewport = size;
+        this.scheduleRelayout();
+    };
 
     mounted() {
         window.addEventListener('resize', this.onViewportResize);
         window.addEventListener('orientationchange', this.onViewportResize);
+        window.addEventListener('load', this.onViewportResize);
+
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', this.onViewportResize);
+        }
+
+        // The one signal that does not depend on the browser dispatching an event:
+        // being revealed changes the document's own box. Safari does not reliably fire
+        // `resize` inside an iframe going from `display: none` to visible, and the
+        // board then stays in the landscape layout with no toggle to escape it — the
+        // measurement was taken at 0x0 and nothing ever asked again.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.viewportObserver = new ResizeObserver(this.onViewportResize);
+            this.viewportObserver.observe(document.documentElement);
+        }
+
         this.scheduleRelayout();
     }
 
     beforeDestroy() {
         window.removeEventListener('resize', this.onViewportResize);
         window.removeEventListener('orientationchange', this.onViewportResize);
+        window.removeEventListener('load', this.onViewportResize);
+
+        if (window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', this.onViewportResize);
+        }
+
+        if (this.viewportObserver) {
+            this.viewportObserver.disconnect();
+            this.viewportObserver = null;
+        }
     }
 
     // Boards grow as players buy plants, so the row heights are re-derived on

package/src/components/boards/ResourceBoxes.vue

@@ -116,6 +116,44 @@
                         step {{ step }} sells to ${{ maxPrice }}
                     </text>
 
+                    <!-- A purchase made this turn can be handed back (#127). The box
+                         market has no empty spaces to click — the printed track's
+                         ghosts are exactly what it replaces — so the take-back lives
+                         on a chip, and stops the click reaching the buy target under
+                         it. Sits in the free band above the cubes, and appears whether
+                         or not the row is still buyable: being unable to afford the
+                         next cube is precisely when you want the last one back. -->
+                    <g v-if="canUnbuy(row)" class="canClick" @click.stop="$emit('unbuyResource', row.move)">
+                        <rect
+                            :x="chipBox(row).hx"
+                            :y="chipBox(row).hy"
+                            :width="chipBox(row).hw"
+                            :height="chipBox(row).hh"
+                            fill="transparent"
+                            pointer-events="all"
+                        />
+                        <rect
+                            :x="chipBox(row).x"
+                            :y="chipBox(row).y"
+                            :width="chipBox(row).w"
+                            :height="chipBox(row).h"
+                            rx="10"
+                            fill="#f0e6c8"
+                            stroke="#6b5312"
+                            stroke-width="2"
+                        />
+                        <text
+                            :x="chipBox(row).x + chipBox(row).w / 2"
+                            :y="chipBox(row).y + chipBox(row).h / 2 + 8"
+                            text-anchor="middle"
+                            font-weight="700"
+                            fill="#3a2c08"
+                            :style="`font-size: ${chipBox(row).fontSize}px`"
+                        >
+                            − take back
+                        </text>
+                    </g>
+
                     <title>{{ row.title }}</title>
                 </g>
             </g>
@@ -126,7 +164,8 @@
 <script lang="ts">
 import { GameState } from 'powergrid-engine';
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { BuyMove, ResourceBlock, resourceBlocks } from '../../util/resource-rows';
+import { BuyMove, ResourceBlock, ResourceRow, resourceBlocks } from '../../util/resource-rows';
+import { buySourceKey } from '../../util/turn-buffer';
 
 const BOX_W = 700;
 const BOX_H = 104;
@@ -167,6 +206,8 @@ export default class ResourceBoxes extends Vue {
     @Prop() isUsaRecharged?: boolean;
     /** The seat looking at the board — only needed for Central Europe's Wien discount. */
     @Prop() player?: number;
+    /** Purchases still sitting in this turn's buffer, per source (#127). */
+    @Prop() bufferedBuys?: Record<string, number>;
 
     BOX_W = BOX_W;
     BOX_H = BOX_H;
@@ -174,6 +215,27 @@ export default class ResourceBoxes extends Vue {
     HEAD_H = HEAD_H;
     CUBE_BAND_CENTRE = CUBE_BAND_CENTRE;
 
+    /**
+     * Where a row's take-back button sits: in the gap between the price block and the
+     * cubes, and big enough for a thumb (~28 css px tall on a phone).
+     *
+     * The two pool rows carry a long label right across that gap — but they are
+     * flat-priced, so nothing sits below them, and the button drops under the label at
+     * the same size rather than shrinking.
+     */
+    chipBox(row: ResourceRow) {
+        const labelFillsTheTop = row.label.length > 8;
+
+        return labelFillsTheTop
+            ? { x: 130, y: 36, w: 140, h: 52, hx: 120, hy: 32, hw: 164, hh: 60, fontSize: 22 }
+            : { x: 130, y: 6, w: 140, h: 52, hx: 120, hy: 2, hw: 164, hh: 60, fontSize: 22 };
+    }
+
+    /** Does this turn's buffer hold a purchase from this row's source? */
+    canUnbuy(row: ResourceRow): boolean {
+        return !!this.bufferedBuys && !!this.bufferedBuys[buySourceKey(row.move)];
+    }
+
     /** Centre the cube cluster in that band, however many cubes there are. */
     cubeX(count: number, n: number): number {
         return CUBE_BAND_CENTRE - ((count - 1) * CUBE_PITCH) / 2 + (n - 1) * CUBE_PITCH;

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/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 {