Keep multiplayer chat entries pinned at top of room history across question transitions

client/play/BonusClient.js

@@ -2,6 +2,10 @@ import addBonusGameCard from './bonuses/add-bonus-game-card.js';
 import QuestionClient from './QuestionClient.js';
 import { MODE_ENUM } from '../../shared/constants.js';
 
+/**
+ * @template {typeof QuestionClient} TBase
+ * @param {TBase} ClientClass
+ */
 export const BonusClientMixin = (ClientClass) => class extends ClientClass {
   constructor (room, userId, socket) {
     super(room, userId, socket);

client/play/TossupClient.js

@@ -3,6 +3,10 @@ import QuestionClient from './QuestionClient.js';
 import audio from './audio.js';
 import { MODE_ENUM } from '../../shared/constants.js';
 
+/**
+ * @template {typeof QuestionClient} TBase
+ * @param {TBase} ClientClass
+ */
 export const TossupClientMixin = (ClientClass) => class extends ClientClass {
   constructor (room, userId, socket) {
     super(room, userId, socket);

client/play/bonuses/SoloBonusRoom.js

@@ -27,15 +27,15 @@ async function getRandomStarredBonus () {
 }
 
 export default class SoloBonusRoom extends BonusRoom {
+  checkAnswer = api.checkAnswer;
+  getPacket = getPacket;
+  getPacketCount = api.getNumPackets;
+  getRandomBonuses = api.getRandomBonus;
+  getStarredBonus = getRandomStarredBonus;
+
   constructor (name, categoryManager) {
     super(name, categoryManager, ['bonuses']);
 
-    this.checkAnswer = api.checkAnswer;
-    this.getRandomBonuses = api.getRandomBonus;
-    this.getPacket = getPacket;
-    this.getStarredBonus = getRandomStarredBonus;
-    this.getPacketCount = api.getNumPackets;
-
     this.settings = {
       ...this.settings,
       skip: true,

client/play/mp/MultiplayerTossupBonusClient.js

@@ -7,6 +7,10 @@ import upsertPlayerItem from '../upsert-player-item.js';
 import { setYear } from '../year-slider.js';
 import { showAlert } from './alert.js';
 
+/**
+ * @template {typeof TossupBonusClient} TBase
+ * @param {TBase} ClientClass
+ */
 export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass {
   constructor (room, userId, socket) {
     super(room, userId, socket);
@@ -117,6 +121,11 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
     this.sortPlayerListGroup();
   }
 
+  endCurrentTossup ({ starred, tossup }) {
+    super.endCurrentTossup({ starred, tossup });
+    moveChatMessagesToTop();
+  }
+
   confirmBan ({ targetId, targetUsername }) {
     if (targetId === this.USER_ID) {
       showAlert('You were banned from this room by the room owner.', () => window.location.replace('../'));
@@ -282,6 +291,7 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
 
   endCurrentBonus ({ bonus, lastPartRevealed, pointsPerPart, starred, teamId }) {
     super.endCurrentBonus({ bonus, starred });
+    moveChatMessagesToTop();
     if (lastPartRevealed) {
       const points = pointsPerPart.reduce((a, b) => a + b, 0);
       this.room.teams[teamId].bonusStats[points]++;
@@ -433,6 +443,7 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
     li.appendChild(i);
 
     document.getElementById('room-history').prepend(li);
+    moveChatMessagesToTop();
   }
 
   logGiveAnswer ({ directive = null, givenAnswer, questionType, username }) {
@@ -490,6 +501,7 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
     }
 
     if (directive) { li.id = ''; }
+    moveChatMessagesToTop();
   }
 
   lostBuzzerRace ({ username, userId }) {
@@ -765,6 +777,14 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
   }
 };
 
+function moveChatMessagesToTop () {
+  const roomHistory = document.getElementById('room-history');
+  const chatMessages = Array.from(roomHistory.getElementsByClassName('chat-message'));
+  chatMessages.reverse().forEach(chatMessage => {
+    roomHistory.prepend(chatMessage);
+  });
+}
+
 function attachEventListeners (room, socket, client) {
   document.getElementById('toggle-distraction-free-mode').addEventListener('change', (event) => {
     client.distractionFreeMode = event.target.checked;

client/play/tossups/SoloTossupRoom.js

@@ -28,6 +28,12 @@ async function getPacket ({ setName, packetNumber }) {
 }
 
 export default class SoloTossupRoom extends TossupRoom {
+  checkAnswer = api.checkAnswer;
+  getPacket = getPacket;
+  getPacketCount = api.getNumPackets;
+  getRandomTossups = async (args) => await api.getRandomTossup({ ...args });
+  getStarredTossup = getStarredTossup;
+
   constructor (name, categoryManager) {
     super(name, categoryManager, ['tossups']);
 
@@ -38,12 +44,6 @@ export default class SoloTossupRoom extends TossupRoom {
       showHistory: true,
       typeToAnswer: true
     };
-
-    this.checkAnswer = api.checkAnswer;
-    this.getRandomTossups = async (args) => await api.getRandomTossup({ ...args });
-    this.getPacket = getPacket;
-    this.getStarredTossup = getStarredTossup;
-    this.getPacketCount = api.getNumPackets;
   }
 
   async message ({ userId, username }, message) {