powergrid-viewer 1.11.13 → 1.11.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "1.11.13",
+  "version": "1.11.15",
   "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": "1.15.13"
+    "powergrid-engine": "1.15.15"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/Game.vue

@@ -380,31 +380,10 @@
                             <div :style="'background-color: ' + playerColors[player.id]">{{ player.name }}</div>
                         </th>
                     </tr>
-                    <tr
-                        v-for="(cat, i) in [
-                            'Income',
-                            'Spending: Cities',
-                            'Spending: Connections',
-                            'Spending: Plants',
-                            'Spending: Resources',
-                        ]"
-                        :key="'FC_' + cat"
-                    >
-                        <td>{{ cat }}</td>
-                        <td v-for="player in sortedPlayers" :key="'FS' + player.id + i">
-                            <div>
-                                {{
-                                    i == 0
-                                        ? player.totalIncome
-                                        : i == 1
-                                        ? player.totalSpentCities
-                                        : i == 2
-                                        ? player.totalSpentConnections
-                                        : i == 3
-                                        ? player.totalSpentPlants
-                                        : player.totalSpentResources
-                                }}
-                            </div>
+                    <tr v-for="row in spendingRows" :key="'FC_' + row.label">
+                        <td>{{ row.label }}</td>
+                        <td v-for="player in sortedPlayers" :key="'FS' + player.id + row.label">
+                            <div>{{ row.value(player) }}</div>
                         </td>
                     </tr>
                 </table>
@@ -562,8 +541,9 @@ import CityCount from './boards/CityCount.vue';
 import Map from './boards/Map.vue';
 import Resources from './boards/Resources.vue';
 import { LogMove } from 'powergrid-engine/src/log';
-import { Phase, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
+import { Phase, playerTimeUsed, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
 import { City } from 'powergrid-engine/src/maps';
+import { formatDuration } from '../util/time';
 
 @Component({
     created(this: Game) {
@@ -1054,7 +1034,10 @@ export default class Game extends Vue {
 
     sendMove(move) {
         if (!this.paused) {
-            this.emitter.emit('move', move);
+            // Stamp the move so the engine can advance the per-player clocks. The
+            // engine never reads the system clock itself — the timestamp lives in the
+            // log so replaying a game reproduces the same times.
+            this.emitter.emit('move', { ...move, time: Date.now() });
         }
     }
 
@@ -1405,6 +1388,26 @@ export default class Game extends Vue {
         return playersSortedByScore(this.G!);
     }
 
+    // Rows of the end-of-game Spending table, in display order.
+    get spendingRows(): { label: string; value: (player: Player) => string | number }[] {
+        return [
+            { label: 'Income', value: (p) => p.totalIncome },
+            { label: 'Spending: Cities', value: (p) => p.totalSpentCities },
+            { label: 'Spending: Connections', value: (p) => p.totalSpentConnections },
+            {
+                // What each city on the board effectively cost: the house price plus
+                // the connection cost paid to reach it, averaged over cities built.
+                label: 'Cost per City',
+                value: (p) =>
+                    p.cities.length ? ((p.totalSpentCities + p.totalSpentConnections) / p.cities.length).toFixed(1) : '-',
+            },
+            { label: 'Spending: Plants', value: (p) => p.totalSpentPlants },
+            { label: 'Spending: Resources', value: (p) => p.totalSpentResources },
+            // Every clock is stopped once the game ends, so the banked total is final.
+            { label: 'Time Used', value: (p) => formatDuration(playerTimeUsed(p)) },
+        ];
+    }
+
     get mapTransform() {
         if (!this.G?.map) return '';
         const [mx, my] = this.G.map.mapPosition!;

package/src/components/PlayerBoard.vue

@@ -96,13 +96,27 @@
 
         <Uranium :pieceId="'Uranium' + player.id" :targetState="{ x: 215, y: 76 }" />
         <text text-anchor="middle" x="250" y="85" fill="black">{{ player.uraniumLeft }}</text>
+
+        <!-- Time this player has spent on the clock. Ticks live while it is their
+             turn; sits in the free space right of the resource counters. -->
+        <text
+            text-anchor="end"
+            x="345"
+            y="85"
+            fill="black"
+            :font-weight="isCurrentPlayer ? 700 : 400"
+            style="font-size: 13px"
+        >
+            {{ timeUsed }}
+        </text>
     </g>
 </template>
 <script lang="ts">
 import { MoveName, Player } from 'powergrid-engine';
-import { Phase, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
+import { Phase, playerTimeUsed, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import { Preferences } from '../types/ui-data';
+import { formatDuration } from '../util/time';
 import { Coal, Oil, Garbage, Uranium, Card } from './pieces';
 
 @Component({
@@ -133,6 +147,27 @@ export default class PlayerBoard extends Vue {
 
     powerPlantClicked?: PowerPlant;
 
+    // Ticks the live clock. Kept in this component rather than in Game so the
+    // per-second update only re-renders the player boards, not the whole board SVG.
+    now = Date.now();
+    private clockTimer?: number;
+
+    mounted() {
+        this.clockTimer = window.setInterval(() => (this.now = Date.now()), 1000);
+    }
+
+    beforeDestroy() {
+        if (this.clockTimer != undefined) {
+            window.clearInterval(this.clockTimer);
+        }
+    }
+
+    // Total time this player has been on the clock, counting the stretch currently
+    // running so the active player's timer visibly ticks up.
+    get timeUsed(): string {
+        return formatDuration(playerTimeUsed(this.player, this.now));
+    }
+
     // Horizontal position of the i-th power-plant card. Spacing compresses as the
     // hand grows so Australia's mines (which don't count toward the 3-plant limit,
     // so a player can hold many cards) stay on the board instead of overflowing

package/src/util/time.ts

@@ -0,0 +1,25 @@
+// Formats a duration in milliseconds compactly, at a precision that suits the
+// magnitude. Games range from a few minutes per player to correspondence games
+// running for days, so the unit pair shifts with the size:
+//   45s | 12m 34s | 3h 22m | 5d 3h
+export function formatDuration(ms: number): string {
+    if (!ms || ms < 0) {
+        return '0s';
+    }
+
+    const totalSeconds = Math.floor(ms / 1000);
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const totalHours = Math.floor(totalMinutes / 60);
+    const days = Math.floor(totalHours / 24);
+
+    if (days > 0) {
+        return `${days}d ${totalHours % 24}h`;
+    }
+    if (totalHours > 0) {
+        return `${totalHours}h ${totalMinutes % 60}m`;
+    }
+    if (totalMinutes > 0) {
+        return `${totalMinutes}m ${totalSeconds % 60}s`;
+    }
+    return `${totalSeconds}s`;
+}