powergrid-viewer 2.1.0 → 2.1.2

package/package.json

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

package/src/components/Game.vue

@@ -2820,7 +2820,8 @@ text {
     width: 100%;
     display: grid;
     gap: 8px;
-    margin-top: 8px;
+    margin: 8px 0;
+    padding-bottom: env(safe-area-inset-bottom);
     align-items: start;
 }
 .journal-and-chat > * {

package/src/components/InlineLog.vue

@@ -32,6 +32,7 @@ export default class InlineLog extends Vue {
     @Prop({ default: () => [] }) entries!: string[];
     @Prop({ default: '' }) mapName!: string;
     follow = true;
+    private feedObserver?: ResizeObserver;
     get illustratedEntries() {
         return this.entries.map((entry) => {
             const parts: { html?: string; plant?: PowerPlant }[] = [];
@@ -54,8 +55,15 @@ export default class InlineLog extends Vue {
         } cities`;
     }
     mounted() {
+        this.feedObserver = new ResizeObserver(() => {
+            if (this.follow) this.scrollToLatest();
+        });
+        this.feedObserver.observe(this.$refs.feed as HTMLElement);
         this.scrollToLatest();
     }
+    beforeDestroy() {
+        this.feedObserver?.disconnect();
+    }
     @Watch('entries') changed() {
         if (this.follow) {
             this.$nextTick(this.scrollToLatest);
@@ -63,13 +71,13 @@ export default class InlineLog extends Vue {
     }
     scrollToLatest() {
         const feed = this.$refs.feed as HTMLElement;
-        if (feed) {
+        if (feed?.clientHeight) {
             feed.scrollTop = feed.scrollHeight;
         }
     }
     onScroll() {
         const feed = this.$refs.feed as HTMLElement;
-        this.follow = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 32;
+        if (feed.clientHeight) this.follow = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 32;
     }
 }
 </script>

package/src/game-chat.ts

@@ -32,6 +32,14 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
 .bgs-game-chat .chat-status:empty{display:none}
 .chat-shortcut{position:fixed;left:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:900;padding:7px 12px;border:1px solid #6a8589;border-radius:3px;background:#263521;color:#fff;font:600 14px Arial,sans-serif;cursor:pointer;box-shadow:0 2px 6px #0003}
 .chat-shortcut[hidden]{display:none}
+.game-feed-tabs{display:none}
+@media(max-width:700px){
+.game-feed-tabs{display:flex;gap:4px;margin-top:8px}
+.game-feed-tabs button{border:1px solid #a2aa82;border-radius:3px 3px 0 0;padding:7px 14px;background:#e7ead7;color:#263521;font:600 14px Arial,sans-serif;cursor:pointer}
+.game-feed-tabs button[aria-pressed="true"]{background:#f3f0dc;border-bottom:3px solid #526f32}
+.game-feed-tabs button:focus-visible{outline:2px solid #247d8c;outline-offset:2px}
+.journal-and-chat[data-feed="chat"]>.inline-game-log,.journal-and-chat[data-feed="journal"]>.chat-host{display:none}
+}
 .chat-shortcut:hover{background:#315966}
 .chat-shortcut:focus-visible{outline:2px solid #fff;outline-offset:2px}
 
@@ -40,6 +48,29 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
     const slot = host.querySelector('.chat-host');
     if (slot) slot.append(panel);
     else host.insertAdjacentElement('afterend', panel);
+    const feeds = host.querySelector('.journal-and-chat') as HTMLElement | null;
+    const tabs = document.createElement('nav');
+    tabs.className = 'game-feed-tabs';
+    tabs.setAttribute('aria-label', 'Chat and journal');
+    const chatTab = document.createElement('button');
+    const journalTab = document.createElement('button');
+    chatTab.type = journalTab.type = 'button';
+    chatTab.textContent = 'Chat';
+    journalTab.textContent = 'Journal';
+    tabs.append(chatTab, journalTab);
+    if (feeds) feeds.insertAdjacentElement('beforebegin', tabs);
+    function selectFeed(feed: 'chat' | 'journal'): void {
+        if (feeds) feeds.dataset.feed = feed;
+        chatTab.setAttribute('aria-pressed', String(feed === 'chat'));
+        journalTab.setAttribute('aria-pressed', String(feed === 'journal'));
+    }
+    selectFeed('chat');
+    chatTab.onclick = () => {
+        selectFeed('chat');
+        panel.open = true;
+        requestAnimationFrame(read);
+    };
+    journalTab.onclick = () => selectFeed('journal');
     const list = panel.querySelector('.chat-messages') as HTMLDivElement;
     const input = panel.querySelector('input') as HTMLInputElement;
     const button = panel.querySelector('button') as HTMLButtonElement;
@@ -70,7 +101,7 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
     shortcut.type = 'button';
     shortcut.className = 'chat-shortcut';
     shortcut.hidden = true;
-    panel.insertAdjacentElement('afterend', shortcut);
+    (feeds || panel).insertAdjacentElement('afterend', shortcut);
     let chatVisible = false;
     function updateShortcut(): void {
         const count = unread.size;
@@ -78,9 +109,11 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
         shortcut.textContent = label;
         shortcut.setAttribute('aria-label', `Open ${label}`);
         summary.textContent = label;
+        chatTab.textContent = label;
         shortcut.hidden = chatVisible;
     }
     shortcut.onclick = () => {
+        selectFeed('chat');
         panel.open = true;
         requestAnimationFrame(() => {
             const firstUnread = Array.from(list.children).find((row) =>
@@ -117,6 +150,7 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
             return;
         }
         const bounds = list.getBoundingClientRect();
+        if (!bounds.width || !bounds.height) return;
         const visible = Array.from(list.children).filter((el) => {
             const r = el.getBoundingClientRect();
             return r.bottom <= Math.min(bounds.bottom, window.innerHeight) + 1 && r.top >= Math.max(bounds.top, 0);
@@ -267,7 +301,7 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
         }
     };
     list.onscroll = () => {
-        following = list.scrollHeight - list.scrollTop - list.clientHeight < 32;
+        if (list.clientHeight) following = list.scrollHeight - list.scrollTop - list.clientHeight < 32;
         read();
     };
     panel.ontoggle = () => {
@@ -280,10 +314,12 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
     window.addEventListener('focus', read);
     window.addEventListener('resize', read);
     const sizing = new ResizeObserver(() => {
+        if (following && list.clientHeight) list.scrollTop = list.scrollHeight;
         updateShortcut();
         read();
     });
     sizing.observe(panel);
+    sizing.observe(list);
     document.addEventListener('visibilitychange', read);
     status.textContent = reason;
     controls();