powergrid-viewer 2.0.13 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.0.13",
+  "version": "2.1.0",
   "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": "2.0.5"
+    "powergrid-engine": "2.0.6"
   },
   "devDependencies": {
     "@types/assert": "^1.4.7",

package/src/components/Game.vue

@@ -3,14 +3,14 @@
         <div class="statusBar">
             {{ getStatusMessage() }}
         </div>
-        <audio id="piece-drop" preload="none">
-            <source src="../audio/piece-drop.mp3" type="audio/mpeg" />
-        </audio>
-        <audio id="notification" preload="none">
-            <source src="../audio/notification.mp3" type="audio/mpeg" />
-            <source src="../audio/notification.ogg" type="audio/ogg" />
-        </audio>
-        <svg v-if="G" id="scene" :class="{ stacked: stacked }" :viewBox="sceneViewBox" style="width: 100%">
+        <svg
+            v-if="G"
+            id="scene"
+            :class="{ stacked: stacked }"
+            :viewBox="sceneViewBox"
+            :style="{ width: '100%', aspectRatio: sceneViewBox.split(' ').slice(2).join(' / ') }"
+            preserveAspectRatio="xMidYMin meet"
+        >
             <rect width="100%" height="100%" x="0" y="0" fill="yellowgreen" />
 
             <g ref="slotPlayerOrder" :transform="slotT('playerOrder')">
@@ -98,6 +98,7 @@
                     :connections="G.map.connections"
                     :polygons="G.map.polygons"
                     :buildableCities="getBuildableCities()"
+                    :buildPrices="getBuildableCityPrices()"
                     :blockedCities="G.blockedCities"
                     :pickableRegions="getPickableRegions()"
                     :noUraniumRegions="G.map.noUraniumRegions"
@@ -413,6 +414,11 @@
             </g>
         </svg>
 
+        <div class="journal-and-chat">
+            <InlineLog v-if="G" :entries="logReversed.slice().reverse()" :mapName="G.options.map" />
+            <div class="chat-host"></div>
+        </div>
+
         <div v-if="G" :class="['modal', { visible: logVisible }]">
             <div class="modal-content">
                 <span class="close" @click="logVisible = false">&times;</span>
@@ -734,6 +740,7 @@
     </div>
 </template>
 <script lang="ts">
+import InlineLog from './InlineLog.vue';
 import { Vue, Component, Prop, Watch, Provide, ProvideReactive, Ref } from 'vue-property-decorator';
 import { MoveName, ended, playersSortedByScore, reconstructState } from 'powergrid-engine';
 import type { GameState, LogItem, Move, Player } from 'powergrid-engine';
@@ -866,21 +873,21 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
             this.paused = true;
             this.emitter.emit('replay:info', {
                 start: 1,
-                current: this.G!.log.filter(l => l.type == 'move').length,
-                end: this._futureState!.log.filter(l => l.type == 'move').length,
+                current: this.G!.log.filter((l) => l.type == 'move').length,
+                end: this._futureState!.log.filter((l) => l.type == 'move').length,
             });
         });
 
         this.emitter.on('replayTo', (to: number) => {
-            const log = this._futureState!.log.map((l, i) => ({ index: i, ...l })).filter(l => l.type == 'move');
+            const log = this._futureState!.log.map((l, i) => ({ index: i, ...l })).filter((l) => l.type == 'move');
             to = log[to - 1].index;
 
             this.replaceState(reconstructState(this._futureState!, to + 1), false);
 
             this.emitter.emit('replay:info', {
                 start: 1,
-                current: this.G!.log.filter(l => l.type == 'move').length + this.G!.hiddenLog.length,
-                end: this._futureState!.log.filter(l => l.type == 'move').length,
+                current: this.G!.log.filter((l) => l.type == 'move').length + this.G!.hiddenLog.length,
+                end: this._futureState!.log.filter((l) => l.type == 'move').length,
             });
         });
 
@@ -890,6 +897,7 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
         });
     },
     components: {
+        InlineLog,
         PlayerBoard,
         Card,
         House,
@@ -912,7 +920,7 @@ const round = (n: number, digits = 2) => Number(n.toFixed(digits));
         CityCount,
         Map,
         Resources,
-        ResourceBoxes
+        ResourceBoxes,
     },
 })
 export default class Game extends Vue {
@@ -980,7 +988,7 @@ export default class Game extends Vue {
 
     discardedPowerPlant: PowerPlant | null = null;
     discardVisible: boolean = false;
-    resourcesToDiscard: { name: string, max: number, value: string }[] = [];
+    resourcesToDiscard: { name: string; max: number; value: string }[] = [];
 
     freeJumpCity: City | null = null;
     freeJumpNormalPrice: number | null = null;
@@ -1095,7 +1103,7 @@ export default class Game extends Vue {
                 player = {
                     coalLeft: this.G.players[this.player].coalLeft,
                     oilLeft: this.G.players[this.player].oilLeft,
-                    resourcesUsed: this.G.players[this.player].resourcesUsed
+                    resourcesUsed: this.G.players[this.player].resourcesUsed,
                 };
             }
         }
@@ -1121,19 +1129,6 @@ export default class Game extends Vue {
                 this.scheduleRelayout();
             });
         }
-
-        if (playSound && this.preferences.sound && this.G?.log[this.G?.log.length - 1].type == 'move') {
-            const move = (this.G?.log[this.G?.log.length - 1] as LogMove).move;
-            if (move.name == MoveName.Pass && this.G.currentPlayers.includes(this.player!)) {
-                (document.getElementById('notification')!.cloneNode(true) as HTMLAudioElement).play();
-            } else {
-                if (move.name == MoveName.Build) {
-                    setTimeout(() => {
-                        (document.getElementById('piece-drop')!.cloneNode(true) as HTMLAudioElement).play();
-                    }, 800);
-                }
-            }
-        }
     }
 
     @Watch('ui.waitingAnimations')
@@ -1156,9 +1151,12 @@ export default class Game extends Vue {
         if (this.G && this.player != null && !this.G.chosenPowerPlant) {
             const player = this.G.players[this.player];
             if (player && player.availableMoves && Object.keys(player.availableMoves).length > 1) {
-                if (this.G.phase == Phase.Bureaucracy && player.powerPlantsNotUsed.length > 0
-                    && Object.keys(player.availableMoves).includes('UsePowerPlant')
-                    && !this.canPowerAllCitiesWithUsedPlants(player)) {
+                if (
+                    this.G.phase == Phase.Bureaucracy &&
+                    player.powerPlantsNotUsed.length > 0 &&
+                    Object.keys(player.availableMoves).includes('UsePowerPlant') &&
+                    !this.canPowerAllCitiesWithUsedPlants(player)
+                ) {
                     this.confirmMessage = 'Are you sure you want to pass? You have unused power plants!';
                     this.confirmVisible = true;
                     return;
@@ -1170,7 +1168,8 @@ export default class Game extends Vue {
                     // nothing this turn — buying some but not enough is a deliberate
                     // choice, not a slip.
                     if (this.G.map.name !== 'India' || !this.playerBoughtResourceThisTurn()) {
-                        this.confirmMessage = 'Are you sure you want to skip buying resources without enough to power all your plants?';
+                        this.confirmMessage =
+                            'Are you sure you want to skip buying resources without enough to power all your plants?';
                         this.confirmVisible = true;
                         return;
                     }
@@ -1193,7 +1192,7 @@ export default class Game extends Vue {
                                 this.confirmMessage = 'Are you sure you want to skip building?';
                                 break;
                             case Phase.Bureaucracy:
-                                this.confirmMessage = 'Are you sure you want to pass? You didn\'t use any power plant!';
+                                this.confirmMessage = "Are you sure you want to pass? You didn't use any power plant!";
                                 break;
                             default:
                                 this.confirmMessage = 'Are you sure you want to pass?';
@@ -1292,8 +1291,10 @@ export default class Game extends Vue {
         this.soleBuyerPlant = null;
     }
 
-    buyResource(payload: { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean }) {
-        const data: { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean } = { resource: payload.resource };
+    buyResource(payload: { resource: ResourceType; side?: 'north' | 'south'; fromStorage?: boolean }) {
+        const data: { resource: ResourceType; side?: 'north' | 'south'; fromStorage?: boolean } = {
+            resource: payload.resource,
+        };
         if (payload.side) {
             data.side = payload.side;
         }
@@ -1312,7 +1313,7 @@ export default class Game extends Vue {
      * replaying the rest, exactly as `undo()` drops the last move. Removing a buy only
      * ever frees money and plant capacity, so the remaining buffer always replays.
      */
-    unbuyResource(payload: { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean }) {
+    unbuyResource(payload: { resource: ResourceType; side?: 'north' | 'south'; fromStorage?: boolean }) {
         if (this.paused || !this.committedState) {
             return;
         }
@@ -1381,7 +1382,10 @@ export default class Game extends Vue {
         this.freeJumpCity = null;
         if (useJump) {
             const freeJumpMove = buildMoves.find((c) => c.name === city.name && c.freeJump)!;
-            this.sendMove({ name: MoveName.Build, data: { name: city.name, price: freeJumpMove.price, freeJump: true } });
+            this.sendMove({
+                name: MoveName.Build,
+                data: { name: city.name, price: freeJumpMove.price, freeJump: true },
+            });
         } else {
             const normalMove = buildMoves.find((c) => c.name === city.name && !c.freeJump)!;
             this.sendMove({ name: MoveName.Build, data: { name: city.name, price: normalMove.price } });
@@ -1389,7 +1393,7 @@ export default class Game extends Vue {
     }
 
     confirmDiscard() {
-        const values = this.resourcesToDiscard.map(r => parseInt(r.value));
+        const values = this.resourcesToDiscard.map((r) => parseInt(r.value));
         if (values.reduce((acc, cur) => acc + cur, 0) > 0) {
             this.sendMove({ name: MoveName.DiscardPowerPlant, data: this.discardedPowerPlant!.number, extra: values });
         } else {
@@ -1405,18 +1409,48 @@ export default class Game extends Vue {
         let hybridCapacityUsed;
         switch (this.discardedPowerPlant!.type) {
             case PowerPlantType.Coal:
-                hybridCapacityUsed = currentPlayer.hybridCapacity - this.discardedPowerPlant!.cost * 2 > 0 ? Math.max(0, currentPlayer.oilLeft - currentPlayer.oilCapacity) : 0;
-                return currentPlayer.coalCapacity + currentPlayer.hybridCapacity - this.discardedPowerPlant!.cost * 2 + parseInt(this.resourcesToDiscard[0].value) < currentPlayer.coalLeft + hybridCapacityUsed;
+                hybridCapacityUsed =
+                    currentPlayer.hybridCapacity - this.discardedPowerPlant!.cost * 2 > 0
+                        ? Math.max(0, currentPlayer.oilLeft - currentPlayer.oilCapacity)
+                        : 0;
+                return (
+                    currentPlayer.coalCapacity +
+                        currentPlayer.hybridCapacity -
+                        this.discardedPowerPlant!.cost * 2 +
+                        parseInt(this.resourcesToDiscard[0].value) <
+                    currentPlayer.coalLeft + hybridCapacityUsed
+                );
 
             case PowerPlantType.Oil:
-                hybridCapacityUsed = currentPlayer.hybridCapacity - this.discardedPowerPlant!.cost * 2 > 0 ? Math.max(0, currentPlayer.coalLeft - currentPlayer.coalCapacity) : 0;
-                return currentPlayer.oilCapacity + currentPlayer.hybridCapacity - this.discardedPowerPlant!.cost * 2 + parseInt(this.resourcesToDiscard[0].value) < currentPlayer.oilLeft + hybridCapacityUsed;
+                hybridCapacityUsed =
+                    currentPlayer.hybridCapacity - this.discardedPowerPlant!.cost * 2 > 0
+                        ? Math.max(0, currentPlayer.coalLeft - currentPlayer.coalCapacity)
+                        : 0;
+                return (
+                    currentPlayer.oilCapacity +
+                        currentPlayer.hybridCapacity -
+                        this.discardedPowerPlant!.cost * 2 +
+                        parseInt(this.resourcesToDiscard[0].value) <
+                    currentPlayer.oilLeft + hybridCapacityUsed
+                );
 
             case PowerPlantType.Garbage:
-                return currentPlayer.garbageCapacity - this.discardedPowerPlant!.cost * 2 - currentPlayer.garbageLeft + parseInt(this.resourcesToDiscard[0].value) < 0;
+                return (
+                    currentPlayer.garbageCapacity -
+                        this.discardedPowerPlant!.cost * 2 -
+                        currentPlayer.garbageLeft +
+                        parseInt(this.resourcesToDiscard[0].value) <
+                    0
+                );
 
             case PowerPlantType.Uranium:
-                return currentPlayer.uraniumCapacity - this.discardedPowerPlant!.cost * 2 - currentPlayer.uraniumLeft + parseInt(this.resourcesToDiscard[0].value) < 0;
+                return (
+                    currentPlayer.uraniumCapacity -
+                        this.discardedPowerPlant!.cost * 2 -
+                        currentPlayer.uraniumLeft +
+                        parseInt(this.resourcesToDiscard[0].value) <
+                    0
+                );
 
             case PowerPlantType.Hybrid:
                 const coalDiscarded = parseInt(this.resourcesToDiscard[0].value);
@@ -1440,7 +1474,11 @@ export default class Game extends Vue {
 
                 switch (powerPlant.type) {
                     case PowerPlantType.Coal:
-                        if (currentPlayer.powerPlants.filter(pp => pp.type == powerPlant.type).length + currentPlayer.powerPlants.filter(pp => pp.type == PowerPlantType.Hybrid).length == 1) {
+                        if (
+                            currentPlayer.powerPlants.filter((pp) => pp.type == powerPlant.type).length +
+                                currentPlayer.powerPlants.filter((pp) => pp.type == PowerPlantType.Hybrid).length ==
+                            1
+                        ) {
                             this.sendMove({ name: MoveName.DiscardPowerPlant, data: powerPlant.number });
                             return;
                         }
@@ -1454,7 +1492,11 @@ export default class Game extends Vue {
                         break;
 
                     case PowerPlantType.Oil:
-                        if (currentPlayer.powerPlants.filter(pp => pp.type == powerPlant.type).length + currentPlayer.powerPlants.filter(pp => pp.type == PowerPlantType.Hybrid).length == 1) {
+                        if (
+                            currentPlayer.powerPlants.filter((pp) => pp.type == powerPlant.type).length +
+                                currentPlayer.powerPlants.filter((pp) => pp.type == PowerPlantType.Hybrid).length ==
+                            1
+                        ) {
                             this.sendMove({ name: MoveName.DiscardPowerPlant, data: powerPlant.number });
                             return;
                         }
@@ -1468,7 +1510,7 @@ export default class Game extends Vue {
                         break;
 
                     case PowerPlantType.Garbage:
-                        if (currentPlayer.powerPlants.filter(pp => pp.type == powerPlant.type).length == 1) {
+                        if (currentPlayer.powerPlants.filter((pp) => pp.type == powerPlant.type).length == 1) {
                             this.sendMove({ name: MoveName.DiscardPowerPlant, data: powerPlant.number });
                             return;
                         }
@@ -1483,7 +1525,7 @@ export default class Game extends Vue {
                         break;
 
                     case PowerPlantType.Uranium:
-                        if (currentPlayer.powerPlants.filter(pp => pp.type == powerPlant.type).length == 1) {
+                        if (currentPlayer.powerPlants.filter((pp) => pp.type == powerPlant.type).length == 1) {
                             this.sendMove({ name: MoveName.DiscardPowerPlant, data: powerPlant.number });
                             return;
                         }
@@ -1497,7 +1539,12 @@ export default class Game extends Vue {
                         break;
 
                     case PowerPlantType.Hybrid:
-                        if (currentPlayer.powerPlants.filter(pp => pp.type == powerPlant.type).length + currentPlayer.powerPlants.filter(pp => pp.type == PowerPlantType.Coal).length + currentPlayer.powerPlants.filter(pp => pp.type == PowerPlantType.Oil).length == 1) {
+                        if (
+                            currentPlayer.powerPlants.filter((pp) => pp.type == powerPlant.type).length +
+                                currentPlayer.powerPlants.filter((pp) => pp.type == PowerPlantType.Coal).length +
+                                currentPlayer.powerPlants.filter((pp) => pp.type == PowerPlantType.Oil).length ==
+                            1
+                        ) {
                             this.sendMove({ name: MoveName.DiscardPowerPlant, data: powerPlant.number });
                             return;
                         }
@@ -1507,7 +1554,10 @@ export default class Game extends Vue {
                             return;
                         }
 
-                        this.resourcesToDiscard = [{ name: 'Coal', value: '0', max: currentPlayer.coalLeft }, { name: 'Oil', value: '0', max: currentPlayer.oilLeft }];
+                        this.resourcesToDiscard = [
+                            { name: 'Coal', value: '0', max: currentPlayer.coalLeft },
+                            { name: 'Oil', value: '0', max: currentPlayer.oilLeft },
+                        ];
                         break;
                 }
 
@@ -1534,7 +1584,9 @@ export default class Game extends Vue {
                     resourcesSpent = currentPlayer.resourcesUsed;
                     resourcesSpent.sort();
                     currentPlayer.resourcesUsed = [];
-                    currentPlayer.powerPlantsNotUsed = currentPlayer.powerPlantsNotUsed.filter((x) => x != powerPlant.number);
+                    currentPlayer.powerPlantsNotUsed = currentPlayer.powerPlantsNotUsed.filter(
+                        (x) => x != powerPlant.number
+                    );
 
                     break;
             }
@@ -1545,7 +1597,7 @@ export default class Game extends Vue {
             });
 
             this.disablePass = true;
-            setTimeout(() => this.disablePass = false, 1000);
+            setTimeout(() => (this.disablePass = false), 1000);
         }
     }
 
@@ -1704,7 +1756,7 @@ export default class Game extends Vue {
         return !!availableMoves[MoveName.ChoosePowerPlant];
     }
 
-    buyableResources(): { resource: ResourceType, side?: 'north' | 'south', fromStorage?: boolean }[] {
+    buyableResources(): { resource: ResourceType; side?: 'north' | 'south'; fromStorage?: boolean }[] {
         if (!this.canMove()) return [];
 
         const currentPlayer = this.G!.players[this.player!];
@@ -1744,7 +1796,40 @@ export default class Game extends Vue {
         const currentPlayer = this.G!.players[this.player!];
         const availableMoves = currentPlayer.availableMoves!;
 
-        return availableMoves[MoveName.Build] && availableMoves[MoveName.Build]!.map((c) => c.name) || [];
+        return (availableMoves[MoveName.Build] && availableMoves[MoveName.Build]!.map((c) => c.name)) || [];
+    }
+
+    /**
+     * What each buildable city would cost this player, keyed by city name (#148).
+     *
+     * The total is not computed here: `available-moves` already sums the shortest-path
+     * connection cost and the slot cost for the number of players ALREADY in the city
+     * (10/15/20 in the standard build, per-map `slotCosts` otherwise), then drops every
+     * city the player cannot afford. That per-city occupancy is exactly what #148 asks
+     * about in Step 3, so the number only needed surfacing — the viewer was discarding
+     * it and keeping the names.
+     *
+     * A map with a free jump (Japan) offers the same city twice at two prices, so both
+     * are kept; a city reachable ONLY by jump has no `price`.
+     */
+    getBuildableCityPrices(): Record<string, { price?: number; jumpPrice?: number }> {
+        if (!this.canMove()) return {};
+
+        const moves = this.G!.players[this.player!].availableMoves![MoveName.Build];
+        if (!moves) return {};
+
+        const prices: Record<string, { price?: number; jumpPrice?: number }> = {};
+        for (const move of moves) {
+            if (!prices[move.name]) {
+                prices[move.name] = {};
+            }
+            if (move.freeJump) {
+                prices[move.name].jumpPrice = move.price;
+            } else {
+                prices[move.name].price = move.price;
+            }
+        }
+        return prices;
     }
 
     getPickableRegions(): string[] {
@@ -1861,10 +1946,12 @@ export default class Game extends Vue {
         }
 
         // Check if player has enough resources, accounting for hybrid plants which can use either coal or oil
-        if (coalUsed > player.coalLeft ||
+        if (
+            coalUsed > player.coalLeft ||
             oilUsed > player.oilLeft ||
             garbageUsed > player.garbageLeft ||
-            uraniumUsed > player.uraniumLeft) {
+            uraniumUsed > player.uraniumLeft
+        ) {
             return false;
         }
         const remainingCoal = player.coalLeft - coalUsed;
@@ -1946,7 +2033,7 @@ export default class Game extends Vue {
 
                 return 'Choose a Power Plant to start an auction.';
             } else if (currentPlayer.availableMoves![MoveName.Bid]) {
-                return 'It\'s your turn to bid!';
+                return "It's your turn to bid!";
             } else if (currentPlayer.availableMoves![MoveName.BuyResource]) {
                 return 'Buy resources on the market, or pass.';
             } else if (currentPlayer.availableMoves![MoveName.Build]) {
@@ -1963,7 +2050,7 @@ export default class Game extends Vue {
                 return 'Choose which resources to discard.';
             }
 
-            return 'It\'s your turn!';
+            return "It's your turn!";
         } else {
             let log = this.G.log[this.G.log.length - 1];
             if (log.type == 'move') {
@@ -2032,7 +2119,9 @@ export default class Game extends Vue {
                 // 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) : '-',
+                    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 },
@@ -2284,8 +2373,10 @@ export default class Game extends Vue {
                 const scale = scaleOf(name);
                 // Centre a shorter slot against the tallest one in its row.
                 const top = y + (rowHeight - bb.height * scale) / 2;
-                transforms[name] =
-                    `translate(${round(x - bb.x * scale)}, ${round(top - bb.y * scale)}) scale(${round(scale, 4)})`;
+                transforms[name] = `translate(${round(x - bb.x * scale)}, ${round(top - bb.y * scale)}) scale(${round(
+                    scale,
+                    4
+                )})`;
                 x += bb.width * scale + STACK_GAP;
             }
             y += rowHeight + STACK_GAP;
@@ -2408,8 +2499,8 @@ ul {
     flex-direction: column;
 }
 
-.fitToScreen {
-    height: 100%;
+.fitToScreen #scene {
+    max-height: calc(100vh - 40px);
 }
 
 .statusBar {
@@ -2420,13 +2511,17 @@ ul {
     text-align: center;
     line-height: 40px;
     font-size: 20px;
-    position: fixed;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    flex-shrink: 0;
 }
 
 #scene {
-    max-height: calc(100% - 40px);
-    flex-grow: 1;
-    margin: 40px auto auto auto;
+    display: block;
+    height: auto;
+    flex: none;
+    margin: 0 auto;
 }
 
 // Portrait: the scene is taller than the viewport by design (each row is scaled
@@ -2439,12 +2534,14 @@ ul {
     #scene {
         max-height: none;
         flex-grow: 0;
-        margin-top: 40px;
+        margin-top: 0;
     }
 }
 
 body,
 html {
+    background: #e7ebda;
+    color: #263521;
     height: 100%;
     width: 100%;
     margin: 0;
@@ -2717,3 +2814,24 @@ text {
     margin: 15px 0 0 15px;
 }
 </style>
+
+<style>
+.journal-and-chat {
+    width: 100%;
+    display: grid;
+    gap: 8px;
+    margin-top: 8px;
+    align-items: start;
+}
+.journal-and-chat > * {
+    min-width: 0;
+}
+.journal-and-chat .bgs-game-chat {
+    margin: 0;
+}
+@media (min-width: 1000px) {
+    .journal-and-chat {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+}
+</style>

package/src/components/InlineLog.vue

@@ -0,0 +1,108 @@
+<template>
+    <details class="inline-game-log" open>
+        <summary>Journal</summary>
+        <div ref="feed" class="journal-feed" @scroll="onScroll">
+            <div v-for="(entry, index) in illustratedEntries" :key="index" class="journal-entry">
+                <template v-for="(part, i) in entry">
+                    <svg
+                        v-if="part.plant"
+                        :key="i"
+                        class="journal-plant"
+                        viewBox="-2 -2 64 44"
+                        role="img"
+                        :aria-label="plantLabel(part.plant)"
+                    >
+                        <title>{{ plantLabel(part.plant) }}</title>
+                        <Card :powerPlant="part.plant" />
+                    </svg>
+                    <span v-else :key="i" v-html="part.html" />
+                </template>
+            </div>
+            <div v-if="!entries.length">No actions yet.</div>
+        </div>
+    </details>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import Card from './pieces/Card.vue';
+import { getPowerPlant } from 'powergrid-engine/src/engine';
+import type { PowerPlant } from 'powergrid-engine/src/gamestate';
+@Component({ components: { Card } })
+export default class InlineLog extends Vue {
+    @Prop({ default: () => [] }) entries!: string[];
+    @Prop({ default: '' }) mapName!: string;
+    follow = true;
+    get illustratedEntries() {
+        return this.entries.map((entry) => {
+            const parts: { html?: string; plant?: PowerPlant }[] = [];
+            const pattern = /Power Plant\s+(?:<b>)?(\d+)(?:<\/b>)?/gi;
+            let offset = 0;
+            let match: RegExpExecArray | null;
+            while ((match = pattern.exec(entry))) {
+                const plant = getPowerPlant(Number(match[1]), this.mapName);
+                if (!plant) continue;
+                parts.push({ html: entry.slice(offset, match.index) }, { plant });
+                offset = match.index + match[0].length;
+            }
+            parts.push({ html: entry.slice(offset) });
+            return parts;
+        });
+    }
+    plantLabel(plant: PowerPlant) {
+        return `Power plant ${plant.number}: ${plant.cost ? `${plant.cost} ${plant.type}` : 'no fuel'} → ${
+            plant.citiesPowered
+        } cities`;
+    }
+    mounted() {
+        this.scrollToLatest();
+    }
+    @Watch('entries') changed() {
+        if (this.follow) {
+            this.$nextTick(this.scrollToLatest);
+        }
+    }
+    scrollToLatest() {
+        const feed = this.$refs.feed as HTMLElement;
+        if (feed) {
+            feed.scrollTop = feed.scrollHeight;
+        }
+    }
+    onScroll() {
+        const feed = this.$refs.feed as HTMLElement;
+        this.follow = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 32;
+    }
+}
+</script>
+<style scoped>
+.inline-game-log {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid #a2aa82;
+    border-radius: 3px;
+    background: #f3f0dc;
+    color: #263521;
+    font: 14px Arial, sans-serif;
+}
+summary {
+    cursor: pointer;
+    font-weight: 600;
+}
+.journal-feed {
+    max-height: 220px;
+    overflow: auto;
+    overscroll-behavior: auto;
+    margin-top: 8px;
+}
+.journal-plant {
+    width: 76px;
+    height: 52px;
+    vertical-align: middle;
+    margin: 1px 4px;
+    overflow: visible;
+}
+.journal-entry {
+    padding: 5px 0;
+    border-bottom: 1px solid #75818d33;
+}
+</style>