powergrid-viewer 2.0.8 → 2.0.10

package/package.json

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

package/src/components/Game.vue

@@ -142,13 +142,21 @@
                 </template>
             </g>
 
+            <g v-if="stacked" ref="slotResourceView" :transform="slotT('resourceView')">
+                <ResourceViewButton :showTrack="showResourceTrack" @select="setResourceView($event)" />
+            </g>
+
             <g ref="slotResources" :transform="slotT('resources')">
                 <!-- On a phone the printed price track is a strip of unreadable
-                     columns, so the stacked layout swaps it for one box per buyable
-                     source. Landscape and desktop keep the printed board exactly as
-                     it was — this is an either/or, never an overlay. -->
+                     columns, so the stacked layout defaults to one box per buyable
+                     source. It is still only a default: the switch above this row
+                     puts the printed track back, because the boxes deliberately
+                     throw away the price ladder and that ladder is most of what
+                     there is to know about uranium. Landscape and desktop keep the
+                     printed board exactly as it was — an either/or, never an
+                     overlay. -->
                 <ResourceBoxes
-                    v-if="stacked"
+                    v-if="stacked && !showResourceTrack"
                     :transform="`translate(${G.map.supplyPosition[0]}, ${G.map.supplyPosition[1]})`"
                     :gameState="G"
                     :player="player"
@@ -744,6 +752,7 @@ import {
     HelpButton,
     RulesButton,
     LayoutButton,
+    ResourceViewButton,
 } from './buttons';
 import PlayerBoard from './PlayerBoard.vue';
 import Calculator from './Calculator.vue';
@@ -757,6 +766,7 @@ import { LogMove } from 'powergrid-engine/src/log';
 import { Phase, playerTimeUsed, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
 import { City } from 'powergrid-engine/src/maps';
 import { formatDuration } from '../util/time';
+import { playerOrderForDisplay } from '../util/player-order';
 
 // Portrait layout: the rows the scene is broken into, top to bottom. Slots on
 // the same row sit side by side and share one scale. Names map to the `slotX`
@@ -771,6 +781,9 @@ const STACK_ROWS: string[][] = [
     // the draw pile and the round readout are things you glance at.
     ['buttons', 'roundInfo', 'powerPlantDeck'],
     ['powerPlantMarket'],
+    // The resource-display switch sits between the two markets rather than in the
+    // icon column: it belongs to the row it changes, and reads as that row's header.
+    ['resourceView'],
     ['resources'],
     ['uraniumMines'],
     ['freeJump'],
@@ -814,6 +827,9 @@ const STACK_SLOT_MAX_WIDTH: Record<string, number> = {
     // The box market is one tall stack of full-width buttons; run edge to edge it
     // reads as though it had been cropped rather than laid out.
     resources: 0.94,
+    // Matched to `resources` on purpose: equal budgets render equal widths, so the
+    // switch and the market below it line up instead of nearly lining up.
+    resourceView: 0.94,
 };
 
 /**
@@ -883,6 +899,7 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
         HelpButton,
         RulesButton,
         LayoutButton,
+        ResourceViewButton,
         Button,
         Calculator,
         PowerPlantMarket,
@@ -2121,6 +2138,43 @@ export default class Game extends Vue {
         this.relayout();
     }
 
+    /**
+     * Only ever consulted inside the stacked layout — landscape and desktop draw the
+     * printed board regardless, so this preference cannot reach them.
+     */
+    get showResourceTrack(): boolean {
+        return this.preferences.portraitResourceTrack === true;
+    }
+
+    setResourceView(showTrack: boolean) {
+        if (showTrack === this.showResourceTrack) {
+            return;
+        }
+
+        this.emitter.emit('update:preference', { name: 'portraitResourceTrack', value: showTrack });
+        this.preferences.portraitResourceTrack = showTrack;
+    }
+
+    /**
+     * The two resource displays are different shapes, so switching between them
+     * invalidates the row heights the last layout solved for — the same trap as
+     * entering the stacked layout at all. Measure again once the swap has landed.
+     */
+    @Watch('showResourceTrack')
+    onResourceViewChanged() {
+        this.$nextTick(() => {
+            // The printed track fills itself imperatively and `createPieces` only ever
+            // runs on a state update, so a track switched on mid-turn would draw an
+            // EMPTY market until the next move landed — a display that lies. Fill it
+            // before measuring: the cubes are what give the group its size.
+            if (this.G) {
+                this.resources?.createPieces(this.G);
+            }
+
+            this.scheduleRelayout();
+        });
+    }
+
     relayout() {
         if (!this.viewportIsMeasurable()) {
             // Still hidden. Whoever reveals us triggers the observer below.
@@ -2302,19 +2356,7 @@ export default class Game extends Vue {
     }
 
     get adjustedPlayerOrder() {
-        if (!this.G) {
-            return [];
-        }
-
-        if (!this.preferences.adjustPlayerOrder) {
-            return this.G.players.map((_p, i) => i); // 0 1 2 3 ...
-        }
-
-        if (this.G.phase == Phase.Auction) {
-            return this.G.playerOrder;
-        }
-
-        return this.G.playerOrder.reverse();
+        return playerOrderForDisplay(this.G, this.preferences.adjustPlayerOrder);
     }
 
     getResourceResupply() {

package/src/components/buttons/ResourceViewButton.vue

@@ -0,0 +1,68 @@
+<template>
+    <!--
+        Which resource display the portrait layout shows. A labelled either/or rather
+        than an icon: this changes what the whole row below it *is*, and no picture of
+        "boxes" or "a track" is recognisable before you tap it.
+
+        Authored 620x72 so that, held to the same 0.94 width budget as the box market
+        underneath, the two line up edge to edge and each half clears the 44px tap
+        guideline on a 414px-wide phone.
+    -->
+    <g class="resourceView">
+        <g class="button enabled" @click="$emit('select', false)">
+            <rect
+                x="0"
+                y="0"
+                width="306"
+                height="72"
+                rx="6"
+                :fill="showTrack ? 'gainsboro' : '#333'"
+                stroke="black"
+                stroke-width="3"
+            />
+            <text
+                x="153"
+                y="47"
+                text-anchor="middle"
+                font-weight="700"
+                :fill="showTrack ? 'black' : 'white'"
+                style="font-size: 30px"
+            >
+                Buy boxes
+            </text>
+            <title>One box per buyable source: the price you pay, and the whole box is the tap target</title>
+        </g>
+        <g class="button enabled" @click="$emit('select', true)">
+            <rect
+                x="314"
+                y="0"
+                width="306"
+                height="72"
+                rx="6"
+                :fill="showTrack ? '#333' : 'gainsboro'"
+                stroke="black"
+                stroke-width="3"
+            />
+            <text
+                x="467"
+                y="47"
+                text-anchor="middle"
+                font-weight="700"
+                :fill="showTrack ? 'white' : 'black'"
+                style="font-size: 30px"
+            >
+                Price track
+            </text>
+            <title>The printed market board, so the whole price track is visible at once</title>
+        </g>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class ResourceViewButton extends Vue {
+    @Prop()
+    showTrack?: boolean;
+}
+</script>

package/src/components/buttons/index.js

@@ -4,7 +4,18 @@ import LayoutButton from './LayoutButton.vue';
 import LogButton from './LogButton.vue';
 import PassButton from './PassButton.vue';
 import SoundButton from './SoundButton.vue';
+import ResourceViewButton from './ResourceViewButton.vue';
 import RulesButton from './RulesButton.vue';
 import UndoButton from './UndoButton.vue';
 
-export { Button, HelpButton, LayoutButton, LogButton, PassButton, SoundButton, RulesButton, UndoButton };
+export {
+    Button,
+    HelpButton,
+    LayoutButton,
+    LogButton,
+    PassButton,
+    ResourceViewButton,
+    SoundButton,
+    RulesButton,
+    UndoButton,
+};

package/src/launch.ts

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

package/src/types/ui-data.ts

@@ -13,6 +13,11 @@ export type Preferences = {
     // 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;
+    // Within the stacked layout, show the printed price track instead of the box
+    // market. The boxes are the buying surface; the track is the reading surface --
+    // it is the only place the whole price ladder is visible at once, which matters
+    // most for uranium, where the cubes are few and the prices far apart.
+    portraitResourceTrack: boolean;
 };
 
 export interface Piece {

package/src/util/player-order.ts

@@ -0,0 +1,44 @@
+// `Phase` comes from the package root (the built `dist`), never from
+// `powergrid-engine/src/gamestate`: webpack 4 parses the engine SOURCE for the
+// unit-test bundle and dies on its `??`. Game.vue can import the source because the
+// app build does not; a file with a spec beside it cannot.
+import type { GameState } from 'powergrid-engine';
+import { Phase } from 'powergrid-engine';
+
+/**
+ * The order the player boards are stacked in (`Game.vue`'s `adjustedPlayerOrder`).
+ *
+ * Two different orders sit on this board and they are easy to confuse -- the issue
+ * that produced this file (#141) was exactly that confusion:
+ *
+ *  - TABLE order: where a player sits. Fixed for the whole game. This is what the
+ *    boards show when the preference is off, and it is why bidding "out of turn
+ *    order" is usually not a bug at all.
+ *  - TURN order (`G.playerOrder`): recomputed every round from cities and largest
+ *    plant. The auction runs down it; resources and building run back UP it.
+ *
+ * Kept out of the component so it can be tested against a real engine state, the
+ * same way `util/resource-rows.ts` is -- and because the component version could not
+ * be tested at all, which is how it stayed wrong.
+ *
+ * Written without optional chaining: webpack 4 parses the unit-test bundle and
+ * rejects `?.` (same note as `util/turn-buffer.ts`).
+ */
+export function playerOrderForDisplay(G: GameState | null | undefined, adjustPlayerOrder: boolean): number[] {
+    if (!G) {
+        return [];
+    }
+
+    if (!adjustPlayerOrder) {
+        return G.players.map((_p, i) => i); // 0 1 2 3 ...
+    }
+
+    // Copy before reversing. `Array.reverse` works in place, so reading the order off
+    // the state used to rewrite it -- see `player-order.spec.ts`. The engine already
+    // spreads before it reverses, in both places it walks the order backwards.
+    if (G.phase == Phase.Auction) {
+        return [...G.playerOrder];
+    }
+
+    return [...G.playerOrder].reverse();
+}