Actual better alert box

client/play/mp/MultiplayerTossupBonusClient.js

@@ -5,6 +5,7 @@ import TossupBonusClient from '../TossupBonusClient.js';
 import { arrayToRange } from '../ranges.js';
 import upsertPlayerItem from '../upsert-player-item.js';
 import { setYear } from '../year-slider.js';
+import { showAlert } from './alert.js';
 
 export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass {
   constructor (room, userId, socket) {
@@ -50,19 +51,14 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
 
   // if a banned/kicked user tries to join a this.room they were removed from this is the response
   ackRemovedFromRoom ({ removalType }) {
-    if (removalType === 'kick') {
-      window.alert('You were kicked from this room by room players, and cannot rejoin it.');
-    } else {
-      window.alert('You were banned from this room by the room owner, and cannot rejoin it.');
-    }
-    setTimeout(() => {
-      window.location.replace('../');
-    }, 100);
+    const message = removalType === 'kick'
+      ? 'You were kicked from this room by room players, and cannot rejoin it.'
+      : 'You were banned from this room by the room owner, and cannot rejoin it.';
+    showAlert(message, () => window.location.replace('../'));
   }
 
   adminLock ({ message }) {
-    window.alert(message);
-    window.location.replace('/play/mp');
+    showAlert(message, () => window.location.replace('/play/mp'));
   }
 
   buzz ({ userId, username }) {
@@ -123,10 +119,7 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
 
   confirmBan ({ targetId, targetUsername }) {
     if (targetId === this.USER_ID) {
-      window.alert('You were banned from this room by the room owner.');
-      setTimeout(() => {
-        window.location.replace('../');
-      }, 100);
+      showAlert('You were banned from this room by the room owner.', () => window.location.replace('../'));
     } else {
       this.logEventConditionally(targetUsername + ' has been banned from this room.');
     }
@@ -303,12 +296,12 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
 
   failedVotekickPoints ({ userId }) {
     if (userId === this.USER_ID) {
-      window.alert('You can only votekick once you have answered a question correctly!');
+      showAlert('You can only votekick once you have answered a question correctly!');
     }
   }
 
   forceUsername ({ message, username }) {
-    window.alert(message);
+    showAlert(message);
     window.localStorage.setItem('multiplayer-username', username);
     document.querySelector('#username').value = username;
   }
@@ -380,8 +373,7 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
 
   handleError ({ message }) {
     this.socket.close(3000);
-    window.alert(message);
-    window.location.href = '/multiplayer';
+    showAlert(message, () => { window.location.href = '/multiplayer'; });
   }
 
   join ({ isNew, team, user, userId, username }) {
@@ -766,10 +758,7 @@ export const MultiplayerClientMixin = (ClientClass) => class extends ClientClass
 
   vkHandle ({ targetUsername, targetId }) {
     if (this.USER_ID === targetId) {
-      window.alert('You were vote kicked from this room by others.');
-      setTimeout(() => {
-        window.location.replace('../');
-      }, 100);
+      showAlert('You were vote kicked from this room by others.', () => window.location.replace('../'));
     } else {
       this.logEventConditionally(targetUsername + ' has been vote kicked from this room.');
     }
@@ -795,6 +784,5 @@ function attachEventListeners (room, socket, client) {
     });
   });
 }
-
 const MultiplayerTossupBonusClient = MultiplayerClientMixin(TossupBonusClient);
 export default MultiplayerTossupBonusClient;

client/play/mp/alert.js

@@ -0,0 +1,14 @@
+export function showAlert (text, onClose) {
+  const alertModalElement = document.getElementById('alert-modal');
+  const alertModalText = document.getElementById('alert-modal-text');
+  const alertModal = bootstrap.Modal.getOrCreateInstance(alertModalElement);
+
+  alertModalText.textContent = text;
+
+  const hiddenHandler = () => {
+    onClose?.();
+  };
+
+  alertModalElement.addEventListener('hidden.bs.modal', hiddenHandler, { once: true });
+  alertModal.show();
+}

client/play/mp/room.html

@@ -251,6 +251,20 @@ <h5 class="modal-title">Report Question</h5>
         </div>
     </div>
 
+    <div class="modal fade" id="alert-modal" tabindex="-1" aria-labelledby="alert-modal-text" aria-hidden="true"
+        data-bs-backdrop="static" data-bs-keyboard="false">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <p id="alert-modal-text" class="mb-0"></p>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary" id="alert-modal-close" data-bs-dismiss="modal" type="button">OK</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"
         integrity="sha384-tMH8h3BGESGckSAVGZ82T9n90ztNXxvdwvdM6UoR56cYcf+0iGXBliJ29D+wZ/x8" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"

client/play/mp/room.jsx

@@ -1,4 +1,5 @@
 import MultiplayerTossupBonusClient from './MultiplayerTossupBonusClient.js';
+import { showAlert } from './alert.js';
 
 import CategoryManager from '../../../quizbowl/category-manager.js';
 import { getDropdownValues } from '../../scripts/utilities/dropdown-checklist.js';
@@ -52,7 +53,7 @@ socket.sendToServer = (data) => socket.send(JSON.stringify(data));
 
 socket.onclose = function (event) {
   const { code } = event;
-  if (code !== 3000) { window.alert('Disconnected from server'); }
+  if (code !== 3000) { showAlert('Disconnected from server'); }
   clearInterval(PING_INTERVAL_ID);
 };
 

scss/custom.scss

@@ -151,3 +151,4 @@ a.list-group-item:hover {
 #set-settings {
     min-height: 90px;
 }
+