close #10: add AI mode

client/multiplayer/room.jsx

@@ -5,9 +5,9 @@ import audio from '../audio/index.js';
 import CategoryManager from '../../quizbowl/category-manager.js';
 import { getDropdownValues } from '../scripts/utilities/dropdown-checklist.js';
 import { arrayToRange, createTossupCard, rangeToArray } from '../scripts/utilities/index.js';
-import { escapeHTML } from '../scripts/utilities/strings.js';
 import CategoryModal from '../scripts/components/CategoryModal.min.js';
 import DifficultyDropdown from '../scripts/components/DifficultyDropdown.min.js';
+import upsertPlayerItem from '../scripts/upsertPlayerItem.js';
 
 const categoryManager = new CategoryManager();
 let oldCategories = JSON.stringify(categoryManager.export());
@@ -142,7 +142,7 @@ function clearStats ({ userId }) {
   for (const field of ['celerity', 'negs', 'points', 'powers', 'tens', 'tuh', 'zeroes']) {
     players[userId][field] = 0;
   }
-  upsertPlayerItem(players[userId]);
+  upsertPlayerItem(players[userId], USER_ID);
   sortPlayerListGroup();
 }
 
@@ -168,7 +168,7 @@ function connectionAcknowledged ({
   Object.keys(messagePlayers).forEach(userId => {
     messagePlayers[userId].celerity = messagePlayers[userId].celerity.correct.average;
     players[userId] = messagePlayers[userId];
-    upsertPlayerItem(players[userId]);
+    upsertPlayerItem(players[userId], USER_ID);
   });
   sortPlayerListGroup();
 
@@ -328,7 +328,7 @@ async function giveAnswer ({ celerity, directive, directedPrompt, givenAnswer, p
     players[userId].tuh++;
     players[userId].celerity = celerity;
 
-    upsertPlayerItem(players[userId]);
+    upsertPlayerItem(players[userId], USER_ID);
     sortPlayerListGroup();
   }
 
@@ -359,7 +359,7 @@ function join ({ isNew, user, userId, username }) {
 
   if (isNew) {
     user.celerity = user.celerity.correct.average;
-    upsertPlayerItem(user);
+    upsertPlayerItem(user, USER_ID);
     sortPlayerListGroup();
     players[userId] = user;
   } else {
@@ -688,63 +688,6 @@ function updateTimerDisplay (time) {
   document.querySelector('.timer .fraction').innerText = '.' + tenths;
 }
 
-function upsertPlayerItem (player) {
-  const { userId, username, powers = 0, tens = 0, negs = 0, tuh = 0, points = 0, celerity = 0, online } = player;
-
-  if (document.getElementById('list-group-' + userId)) {
-    document.getElementById('list-group-' + userId).remove();
-  }
-
-  const playerItem = document.createElement('a');
-  playerItem.className = `list-group-item ${userId === USER_ID ? 'user-score' : ''} clickable`;
-  playerItem.id = `list-group-${userId}`;
-  playerItem.innerHTML = `
-    <div class="d-flex justify-content-between">
-        <span id="username-${userId}">${escapeHTML(username)}</span>
-        <span><span id="points-${userId}" class="badge rounded-pill ${online ? 'bg-success' : 'bg-secondary'}">${points}</span></span>
-    </div>
-    `;
-
-  playerItem.setAttribute('data-bs-container', 'body');
-  playerItem.setAttribute('data-bs-custom-class', 'custom-popover');
-  playerItem.setAttribute('data-bs-html', 'true');
-  playerItem.setAttribute('data-bs-placement', 'left');
-  playerItem.setAttribute('data-bs-toggle', 'popover');
-  playerItem.setAttribute('data-bs-trigger', 'focus');
-  playerItem.setAttribute('tabindex', '0');
-
-  playerItem.setAttribute('data-bs-title', username);
-  playerItem.setAttribute('data-bs-content', `
-    <ul class="list-group list-group-flush">
-        <li class="list-group-item">
-            <span>Powers</span>
-            <span id="powers-${userId}" class="float-end badge rounded-pill bg-secondary stats-${userId}">${powers}</span>
-        </li>
-        <li class="list-group-item">
-            <span>Tens</span>
-            <span id="tens-${userId}" class="float-end badge rounded-pill bg-secondary stats-${userId}">${tens}</span>
-        </li>
-        <li class="list-group-item">
-            <span>Negs</span>
-            <span id="negs-${userId}" class="float-end badge rounded-pill bg-secondary stats-${userId}">${negs}</span>
-        </li>
-        <li class="list-group-item">
-            <span>TUH</span>
-            <span id="tuh-${userId}" class="float-end badge rounded-pill bg-secondary stats-${userId}">${tuh}</span>
-        </li>
-        <li class="list-group-item">
-            <span>Celerity</span>
-            <span id="celerity-${userId}" class="float-end stats stats-${userId}">${celerity.toFixed(3)}</span>
-        </li>
-    </ul>
-    `);
-
-  document.getElementById('player-list-group').appendChild(playerItem);
-  // bootstrap requires "new" to be called on each popover
-  // eslint-disable-next-line no-new
-  new bootstrap.Popover(playerItem);
-}
-
 function setYearRange ({ minYear, maxYear, username }) {
   if (username) { logEvent(username, `changed the year range to ${minYear}-${maxYear}`); }