powergrid-viewer 2.0.2 → 2.0.4

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);
     }

package/src/components/boards/PowerPlantMarket.vue

@@ -1,33 +1,8 @@
 <template>
     <g>
-        <text x="10" y="14" font-weight="600" fill="black">Power Plant Deck:</text>
-        <template v-if="cardsLeft > 0">
-            <rect
-                v-for="index in cardsLeft"
-                :key="'card' + index"
-                :x="35 + index / 5"
-                :y="38 - index / 10"
-                width="60"
-                height="40"
-                fill="gray"
-                stroke="black"
-                stroke-width="2"
-                rx="4"
-            />
-            <rect
-                :x="35 + cardsLeft / 5"
-                :y="38 - cardsLeft / 10"
-                width="60"
-                height="40"
-                :fill="nextCardWeak ? 'gray' : 'lightgray'"
-                stroke="black"
-                stroke-width="2"
-                rx="4"
-            >
-                <title>{{ cardsLeft }} cards left{{ nextCardWeak ? ', next is an initial plant' : '' }}</title>
-            </rect>
-        </template>
-
+        <!-- The draw pile is rendered by Game.vue as its own group, not here: it is
+             static reference art next to three interactive markets, so the portrait
+             layout needs to be able to place it on a different row. -->
         <text x="165" y="14" font-weight="600" fill="black">Actual Market:</text>
         <template v-for="(card, i) in actualMarketCards">
             <Card

package/src/components/buttons/LayoutButton.vue

@@ -0,0 +1,27 @@
+<template>
+    <g class="button enabled" @click="$emit('click')">
+        <circle cx="15" cy="15" r="15" fill="gainsboro" stroke="black" stroke-width="2px" />
+        <!-- Stacked: three full-width rows. Wide: the authored side-by-side board. -->
+        <template v-if="isOn">
+            <rect x="6" y="7" width="18" height="4" rx="1" fill="black" />
+            <rect x="6" y="13" width="18" height="4" rx="1" fill="black" />
+            <rect x="6" y="19" width="18" height="4" rx="1" fill="black" />
+        </template>
+        <template v-else>
+            <rect x="6" y="7" width="10" height="16" rx="1" fill="black" />
+            <rect x="18" y="7" width="6" height="7" rx="1" fill="black" />
+            <rect x="18" y="16" width="6" height="7" rx="1" fill="black" />
+        </template>
+        <title v-if="isOn">Switch to the full board layout</title>
+        <title v-else>Stack the board into rows</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class LayoutButton extends Vue {
+    @Prop()
+    isOn?: boolean;
+}
+</script>

package/src/components/buttons/index.js

@@ -1,9 +1,10 @@
 import Button from './Button.vue';
 import HelpButton from './HelpButton.vue';
+import LayoutButton from './LayoutButton.vue';
 import LogButton from './LogButton.vue';
 import PassButton from './PassButton.vue';
 import SoundButton from './SoundButton.vue';
 import RulesButton from './RulesButton.vue';
 import UndoButton from './UndoButton.vue';
 
-export { Button, HelpButton, LogButton, PassButton, SoundButton, RulesButton, UndoButton };
+export { Button, HelpButton, LayoutButton, LogButton, PassButton, SoundButton, RulesButton, UndoButton };

package/src/launch.ts

@@ -21,6 +21,7 @@ function launch(selector: string) {
             adjustPlayerOrder: false,
             undoWholeTurn: true,
             fitToScreen: true,
+            stackOnPortrait: true,
         },
         avatars: [],
     };

package/src/self-contained.ts

@@ -1,6 +1,7 @@
 import { cloneDeep } from 'lodash';
 import { move as execMove, Move, Phase, setup, stripSecret } from 'powergrid-engine';
 import { moveAI } from 'powergrid-engine/src/engine';
+import type { MapName, Variant } from 'powergrid-engine/src/gamestate';
 import launch from './launch';
 
 const delayBase = 0;
@@ -10,7 +11,20 @@ function launchSelfContained(selector = '#app') {
 
     const emitter = launch(selector);
 
-    let gameState = setup(6, { map: 'Bremen', variant: 'recharged', showMoney: true, randomizeMap: false }, '0');
+    // The sandbox game can be steered from the URL so a layout or rules change can
+    // be checked against several maps without editing this file each time, e.g.
+    //   ?map=Australia&players=3&variant=original&seed=7
+    const params = new URLSearchParams(window.location.search);
+    // Note: randomizeMap short-circuits region selection in setup(), so ticking
+    // both gives a randomized board with no draft. They are alternatives.
+    const gameOptions = {
+        map: (params.get('map') || 'Bremen') as MapName,
+        variant: (params.get('variant') || 'recharged') as Variant,
+        showMoney: true,
+        randomizeMap: params.get('randomize') === '1',
+        chooseRegions: params.get('regions') === '1',
+    };
+    let gameState = setup(Number(params.get('players')) || 6, gameOptions, params.get('seed') || '0');
 
     // Dev coord-picker example (commented; uncomment + drop a board photo into
     // viewer/public/ to author city coordinates for a new map). See the picker

package/src/types/ui-data.ts

@@ -10,6 +10,9 @@ export type Preferences = {
     adjustPlayerOrder: boolean;
     undoWholeTurn: boolean;
     fitToScreen: boolean;
+    // Portrait phones stack the board into full-width rows. Per player, not per
+    // game: it describes the screen you are holding, not the rules being played.
+    stackOnPortrait: boolean;
 };
 
 export interface Piece {