make charselect depend on the display width

1 files changed, 11 insertions, 13 deletions

diff --git a/webAO/client.js b/webAO/client.js
index 0c03c12..f5511c1 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -30,7 +30,7 @@ let mode = queryDict.mode;
 const AO_HOST = queryDict.asset || "http://s3.wasabisys.com/webao/base/";
 const THEME = queryDict.theme || "default";
 const MUSIC_HOST = AO_HOST + "sounds/music/";
-const CHAR_SELECT_WIDTH = 8;
+
 const UPDATE_INTERVAL = 60;
 
 /**
@@ -868,7 +868,7 @@ class Client extends EventEmitter {
 		if (mode === "watch") {		// Spectators don't need to pick a character
 			document.getElementById("client_charselect").style.display = "none";
 		} else {
-			document.getElementById("client_charselect").style.display = "block";
+			document.getElementById("client_charselect").style.display = "grid";
 		}
 	}
 
@@ -1042,19 +1042,17 @@ class Client extends EventEmitter {
 
 		// create the charselect grid, to be filled by the character loader
 		document.getElementById("client_chartable").innerHTML = "";
-		let tr;
+
 		for (let i = 0; i < this.char_list_length; i++) {
-			if (i % CHAR_SELECT_WIDTH === 0) {
-				tr = document.createElement("TR");
-			}
-			const td = document.createElement("TD");
+			const demothing = document.createElement("img");
 
-			td.innerHTML = `<img class='demothing' id='demo_${i}' onclick='pickChar(${i})' >`;
+			demothing.className = "demothing";
+			demothing.id = `demo_${i}`;
+			const demoonclick = document.createAttribute("onclick");
+			demoonclick.value = `pickChar(${i})`;
+			demothing.setAttributeNode(demoonclick);
 
-			tr.appendChild(td);
-			if (i % CHAR_SELECT_WIDTH === 0) {
-				document.getElementById("client_chartable").appendChild(tr);
-			}
+			document.getElementById("client_chartable").appendChild(demothing);
 		}
 
 		// this is determined at the top of this file
@@ -1898,7 +1896,7 @@ window.iniedit = iniedit;
  */
 export function changeCharacter(_event) {
 	client.sendLeaveRoom();
-	document.getElementById("client_charselect").style.display = "block";
+	document.getElementById("client_charselect").style.display = "grid";
 	document.getElementById("client_emo").innerHTML = "";
 }
 window.changeCharacter = changeCharacter;