From 6dca4ad3246efde861499c5cde398b2a05d1985c Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Fri, 30 Dec 2022 15:00:44 -0500
Subject: [PATCH] use innerText

---
 .../front_end_components/Confirmation.js      |  6 +++---
 .../modules/game_state/states/InProgress.js   |  3 ++-
 .../states/shared/SharedStateUtil.js          | 21 +++++++++++--------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/src/modules/front_end_components/Confirmation.js b/client/src/modules/front_end_components/Confirmation.js
index 5ed4e44..cc2d3b4 100644
--- a/client/src/modules/front_end_components/Confirmation.js
+++ b/client/src/modules/front_end_components/Confirmation.js
@@ -1,6 +1,6 @@
 import { toast } from './Toast.js';
 
-export const Confirmation = (message, onYes = null, innerHTML = false) => {
+export const Confirmation = (message, onYes = null, isDOMNode = false) => {
     document.querySelector('#confirmation')?.remove();
     document.querySelector('#confirmation-background')?.remove();
 
@@ -17,8 +17,8 @@ export const Confirmation = (message, onYes = null, innerHTML = false) => {
             <button id="confirmation-yes-button" class="app-button">OK</button>
         </div>`;
 
-    if (innerHTML) {
-        confirmation.querySelector('#confirmation-message').innerHTML = message;
+    if (isDOMNode) {
+        confirmation.querySelector('#confirmation-message').prepend(message);
     } else {
         confirmation.querySelector('#confirmation-message').innerText = message;
     }
diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js
index f3e7e30..8b6d5d4 100644
--- a/client/src/modules/game_state/states/InProgress.js
+++ b/client/src/modules/game_state/states/InProgress.js
@@ -481,8 +481,9 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) {
             container.setAttribute('tabindex', '0');
             container.dataset.pointer = member.id;
             container.innerHTML =
-                '<div class=\'potential-mod-name\'>' + member.name + '</div>' +
+                '<div class=\'potential-mod-name\'></div>' +
                 '<div>' + member.userType + ' ' + globals.USER_TYPE_ICONS[member.userType] + ' </div>';
+            container.querySelector('.potential-mod-name').innerText = member.name;
             transferModHandlers[member.id] = (e) => {
                 if (e.type === 'click' || e.code === 'Enter') {
                     ModalManager.dispelModal('transfer-mod-modal', 'transfer-mod-modal-background');
diff --git a/client/src/modules/game_state/states/shared/SharedStateUtil.js b/client/src/modules/game_state/states/shared/SharedStateUtil.js
index 6b6cc3e..e2d52cb 100644
--- a/client/src/modules/game_state/states/shared/SharedStateUtil.js
+++ b/client/src/modules/game_state/states/shared/SharedStateUtil.js
@@ -133,18 +133,21 @@ export const SharedStateUtil = {
     },
 
     buildSpectatorList (spectators) {
+        const list = document.createElement('div');
         if (spectators.length === 0) {
-            return '<div>Nobody currently spectating.</div>';
-        }
-        let html = '';
-        for (const spectator of spectators) {
-            html += `<div class='spectator'>
-                        <div class='spectator-name'>` + spectator.name + '</div>' +
-                        '<div>' + 'spectator' + globals.USER_TYPE_ICONS.spectator + `</div>
-                    </div>`;
+            list.innerHTML = '<div>Nobody currently spectating.</div>';
+        } else {
+            for (const spectator of spectators) {
+                const spectatorEl = document.createElement('div');
+                spectatorEl.classList.add('spectator');
+                spectatorEl.innerHTML = '<div class=\'spectator-name\'></div>' +
+                    '<div>' + 'spectator' + globals.USER_TYPE_ICONS.spectator + '</div>';
+                spectatorEl.querySelector('.spectator-name').innerText = spectator.name;
+                list.appendChild(spectatorEl);
+            }
         }
 
-        return html;
+        return list;
     },
 
     setNumberOfSpectators: (number, el) => {