powergrid-viewer 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/boardgamers/powergrid.git",

package/src/components/Game.vue

@@ -279,9 +279,9 @@
                     @click="undo()"
                 />
                 <LogButton transform="translate(15, 97)" @click="showLog()" />
-                <SoundButton transform="translate(110, 13)" :isOn="preferences.sound" @click="toggleSound()" />
-                <HelpButton transform="translate(110, 54)" :isOn="!preferences.disableHelp" @click="toggleHelp()" />
-                <RulesButton transform="translate(110, 95)" @click="rulesVisible = true" />
+                <SoundButton :transform="iconButton(0)" :isOn="preferences.sound" @click="toggleSound()" />
+                <HelpButton :transform="iconButton(1)" :isOn="!preferences.disableHelp" @click="toggleHelp()" />
+                <RulesButton :transform="iconButton(2)" @click="rulesVisible = true" />
                 <!-- Only offered where it means something. Shown whenever the
                      viewport is portrait — not only while stacking is active — so
                      it can undo its own effect. Sits under Rules rather than under
@@ -289,7 +289,7 @@
                      on the authored board. -->
                 <LayoutButton
                     v-if="portraitViewport"
-                    transform="translate(110, 136)"
+                    :transform="iconButton(3)"
                     :isOn="stacked"
                     @click="toggleStackLayout()"
                 />
@@ -703,7 +703,7 @@ const STACK_MAX_ROW_SCREENS = 0.72;
  * readable; the buttons next to it are tap targets and want every pixel.
  */
 const STACK_SLOT_MAX_SCALE: Record<string, number> = {
-    roundInfo: 2.2,
+    roundInfo: 1.9,
     playerOrder: 2.5,
 };
 /**
@@ -1836,6 +1836,19 @@ export default class Game extends Vue {
         return this.slotTransforms[name];
     }
 
+    /**
+     * Placement of the icon column beside Pass / Undo / Log. On a portrait viewport
+     * that column gains a fourth button — the layout toggle — in a space authored for
+     * three, and at the authored pitch the fourth one hung 41 units below everything
+     * else and crowded the market row beneath it. On portrait the icons shrink to the
+     * 26-unit height of the text buttons next to them and re-pitch so all four end
+     * level with Log. Landscape and desktop keep the authored positions exactly.
+     */
+    iconButton(index: number): string {
+        if (!this.portraitViewport) return `translate(110, ${13 + 41 * index})`;
+        return `translate(110, ${13 + 30 * index}) scale(${round(26 / 30, 4)})`;
+    }
+
     /**
      * Only portrait viewports are re-laid out. A landscape phone already reads
      * well (the scene's own aspect ratio is close to the screen's), so leaving
@@ -1900,18 +1913,40 @@ export default class Game extends Vue {
             const gaps = STACK_GAP * (present.length - 1);
             const usable = STACK_WIDTH - 2 * STACK_PAD - gaps;
             const combined = present.reduce((sum, name) => sum + boxes[name].width, 0);
-            // One scale per row keeps neighbours visually consistent. The cap stops
-            // a small strip (the turn-order token row) from being blown up absurdly.
-            const rowScale = Math.min(usable / combined, STACK_MAX_SCALE);
-            // A slot may decline part of that scale so a neighbour keeps the space,
-            // and no slot may grow past the height budget for one row.
-            const scaleOf = (name: string) =>
+            // A slot may decline part of the row's scale so a neighbour keeps the
+            // space, and no slot may grow past the height budget for one row.
+            const ceilingOf = (name: string) =>
                 Math.min(
-                    rowScale,
                     STACK_SLOT_MAX_SCALE[name] ?? Infinity,
                     ((STACK_SLOT_MAX_WIDTH[name] ?? Infinity) * usable) / boxes[name].width,
-                    heightCapFor(boxes[name].height)
+                    heightCapFor(boxes[name].height),
+                    STACK_MAX_SCALE
                 );
+            // What a capped slot declines is width left on the table: without this it
+            // became margin either side of the row. Hand it to the slots that can
+            // still grow — the round readout gives up ~130 units beside the buttons,
+            // and the buttons are the part a thumb needs. Repeat until it settles:
+            // growing the free slots can push one of them into its own ceiling, and
+            // then there is more to re-split. rowScale only ever rises here, and a
+            // slot that caps mid-loop leaves the row shorter than solved for, so the
+            // row can never end up wider than the space it was given.
+            // One scale per row keeps neighbours visually consistent. The cap stops a
+            // small strip (the turn-order token row) from being blown up absurdly.
+            let rowScale = Math.min(usable / combined, STACK_MAX_SCALE);
+            for (let pass = 0; pass < present.length; pass++) {
+                let cappedWidth = 0;
+                let freeWidth = 0;
+                for (const name of present) {
+                    const ceiling = ceilingOf(name);
+                    if (ceiling < rowScale) cappedWidth += boxes[name].width * ceiling;
+                    else freeWidth += boxes[name].width;
+                }
+                if (!freeWidth) break;
+                const grown = Math.min((usable - cappedWidth) / freeWidth, STACK_MAX_SCALE);
+                if (grown <= rowScale + 0.0001) break;
+                rowScale = grown;
+            }
+            const scaleOf = (name: string) => Math.min(rowScale, ceilingOf(name));
             const rowWidth = present.reduce((sum, name) => sum + boxes[name].width * scaleOf(name), 0);
             const rowHeight = Math.max(...present.map((name) => boxes[name].height * scaleOf(name)));
 

package/src/components/boards/Map.vue

@@ -386,6 +386,55 @@
             />
         </template>
 
+        <!-- City tap targets, drawn LAST so they sit above the houses already built
+             there. Houses are painted after the city's own circle, and SVG hit-testing
+             takes the topmost element — so once a city held houses the active player
+             could only pick at the gray slivers between them (eric-hu, #125).
+
+             The radius reaches out to the printed region ring, which is what the eye
+             reads as the edge of the city, but never past half the distance to the
+             nearest city: the maps disagree enormously about spacing (Bremen's closest
+             pair is 90.8 apart, South Africa's Johannesburg N/S is 21), so the limit
+             has to be measured rather than picked.
+
+             Only rendered while the city can actually be acted on, so houses keep
+             their own tooltips the rest of the time. -->
+        <template v-for="city in cities">
+            <circle
+                v-if="city.connectionCost == null && (canBuild(city) || canPickRegion(city))"
+                :key="city.name + '_tap'"
+                class="canClick"
+                :r="tapRadius(city)"
+                :cx="city.x"
+                :cy="city.y"
+                fill="none"
+                pointer-events="all"
+                @click="onCityClick(city)"
+            >
+                <title>{{ city.name }}</title>
+            </circle>
+            <!-- Node-weighted tiles (Bremen) get the same treatment at the tile's own
+                 size — their houses sit in slots inside the diamond. Manhattan's spaces
+                 hold one house each, so a built space is never buildable again and needs
+                 no overlay. -->
+            <rect
+                v-if="isNodeTile(city) && (canBuild(city) || canPickRegion(city))"
+                :key="city.name + '_tapTile'"
+                class="canClick"
+                :x="city.x - 23"
+                :y="city.y - 23"
+                width="46"
+                height="46"
+                rx="7"
+                fill="none"
+                pointer-events="all"
+                :transform="`rotate(45, ${city.x}, ${city.y})`"
+                @click="onCityClick(city)"
+            >
+                <title>{{ city.name }}</title>
+            </rect>
+        </template>
+
         <!-- Regions where nuclear plants are banned: a nuclear-plant tile under a red
              prohibition sign (ring + diagonal bar), matching the marker printed on
              the physical board. -->
@@ -421,6 +470,11 @@ import { House } from '../pieces';
 import { Piece, Preferences } from '../../types/ui-data';
 import { City, Connection, Polygon } from 'powergrid-engine/src/maps';
 
+/** The gray disc a city is drawn as, and the tap target it has always had. */
+const CITY_RADIUS = 20;
+/** The coloured region ring drawn around that disc — the city's visible edge. */
+const CITY_RING_RADIUS = 25;
+
 @Component({
     components: {
         House,
@@ -605,6 +659,42 @@ export default class Map extends Vue {
         return markers;
     }
 
+    /**
+     * Distance from each city to its nearest neighbour. Cached as a computed so the
+     * O(n^2) sweep runs once per board rather than once per tap target; n is at most
+     * a few dozen cities.
+     */
+    get nearestCityDistance(): Record<string, number> {
+        const out: Record<string, number> = {};
+        const cities = this.cities ?? [];
+        for (const a of cities) {
+            let min = Infinity;
+            for (const b of cities) {
+                if (b === a) continue;
+                const d = Math.hypot(b.x - a.x, b.y - a.y);
+                if (d < min) min = d;
+            }
+            out[a.name] = min;
+        }
+        return out;
+    }
+
+    /**
+     * How far a city's tap target reaches. Out to the region ring where there is room
+     * for it, but never more than halfway to the next city — on the tight maps two
+     * targets would otherwise overlap and whichever is drawn later would swallow both
+     * cities' taps. Never smaller than the disc it has always been.
+     */
+    tapRadius(city: City): number {
+        const halfWayToNeighbour = (this.nearestCityDistance[city.name] ?? Infinity) / 2;
+        return Math.max(CITY_RADIUS, Math.min(CITY_RING_RADIUS, halfWayToNeighbour));
+    }
+
+    /** A Bremen-style node-weighted district: a diamond tile with several house slots. */
+    isNodeTile(city: City) {
+        return city.connectionCost != null && !!city.slotCosts && city.slotCosts.length >= 2;
+    }
+
     canBuild(city: City) {
         return !!this.buildableCities!.find((cityName) => cityName == city.name);
     }