powergrid-viewer 2.0.2 → 2.0.3

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 {