feat: replace built in alert with custom alert box

Author: btfcookies

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 }) {
@@ -121,10 +117,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.');
     }
@@ -301,12 +294,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;
   }
@@ -378,8 +371,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 }) {
@@ -764,10 +756,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.');
     }
@@ -793,6 +782,5 @@ function attachEventListeners (room, socket, client) {
     });
   });
 }
-
 const MultiplayerTossupBonusClient = MultiplayerClientMixin(TossupBonusClient);
 export default MultiplayerTossupBonusClient;

client/play/mp/alert.js

@@ -0,0 +1,15 @@
+export function showAlert (text, onClose) {
+  const alertBox = document.getElementById('alert-box');
+  const closeButton = alertBox.querySelector('.close-button');
+  const alertBoxText = alertBox.querySelector('.alert-text');
+  alertBoxText.textContent = text;
+  alertBox.style.display = 'flex';
+  alertBox.style.opacity = '1';
+  closeButton.onclick = function () {
+    alertBox.style.opacity = '0';
+    alertBox.addEventListener('transitionend', () => {
+      alertBox.style.display = 'none';
+      onClose?.();
+    }, { once: true });
+  };
+}

client/play/mp/room.html

@@ -9,6 +9,12 @@
     <!--#include virtual="/nav/index.html" -->
 
     <div class="container-fluid mt-3 mb-5 pb-5 px-xxl-5">
+        <div id="alert-box" role="alertdialog" aria-modal="true" aria-labelledby="alert-box-text" style="display: none;">
+            <div id="alert-box-dialog">
+                <p id="alert-box-text" class="alert-text"></p>
+                <button class="close-button btn btn-primary">OK</button>
+            </div>
+        </div>
         <div class="toast-container position-fixed top-0 end-0 p-3">
             <div id="star-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                 <div class="toast-header">

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,37 @@ a.list-group-item:hover {
 #set-settings {
     min-height: 90px;
 }
+
+#alert-box {
+    position: fixed;
+    inset: 0;
+    z-index: 1060;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 1;
+    transition: opacity 0.15s ease;
+}
+
+#alert-box-dialog {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
+    padding: 1.5rem;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: var(--alert-dialog-shadow);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .alert-text {
+        margin: 0;
+    }
+
+    .close-button {
+        align-self: flex-end;
+    }
+}

scss/themes/light.scss

@@ -13,4 +13,8 @@ $link-color: #003399;
     .timer {
         background: linear-gradient(#ddd, #eee);
     }
+
+    #alert-box-dialog {
+        --alert-dialog-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+    }
 }

scss/themes/night.scss

@@ -211,4 +211,8 @@ $form-switch-checked-bg-image-night: url("data:image/svg+xml,<svg xmlns='http://
     .vr {
         background-color: #{rgba($black, .55)};
     }
+
+    #alert-box-dialog {
+        --alert-dialog-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
+    }
 }