4 files changed, 38 insertions, 7 deletions
diff --git a/webAO/client.html b/webAO/client.html
index b5392ee..2c689d2 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -33,6 +33,7 @@
 	<link rel="stylesheet" type="text/css" href="styles/client.css?v=1.0.3" id="client_stylesheet">
 	<link rel="stylesheet" type="text/css" href="styles/default.css?v=1.0.1" id="client_theme">
 	<link rel="stylesheet" type="text/css" href="styles/chatbox/aa.css?v=1.0.1" id="chatbox_theme">
+	<link rel="stylesheet" type="text/css" href="styles/nameplates.css" id="nameplate_setting">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 	<link type="text/css" rel="stylesheet" href="golden/css/goldenlayout.css" />
 	<link type="text/css" rel="stylesheet"
diff --git a/webAO/client.js b/webAO/client.js
index f21056b..baaf4ca 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -463,6 +463,7 @@ class Client extends EventEmitter {
 
 		document.getElementById("ic_chat_name").value = getCookie("ic_chat_name");
 		document.getElementById("showname").checked = getCookie("showname");
+		showname_click();
 
 		document.getElementById("client_callwords").value = getCookie("callwords");
 	}
@@ -1891,7 +1892,7 @@ async changeBackground(position) {
 		}
 		this.lastChar = this.chatmsg.name;
 
-		appendICLog(this.chatmsg.content, displayname);
+		appendICLog(this.chatmsg.content, this.chatmsg.showname, this.chatmsg.nameplate);
 
 		checkCallword(this.chatmsg.content);		
 
@@ -2383,6 +2384,13 @@ window.mutelist_click = mutelist_click;
 export function showname_click(_event) {
 	setCookie("showname", document.getElementById("showname").checked);
 	setCookie("ic_chat_name", document.getElementById("ic_chat_name").value);
+
+	const css_s = document.getElementById("nameplate_setting");
+
+	if (document.getElementById("showname").checked)
+		css_s.href = "styles/shownames.css";
+	else
+		css_s.href = "styles/nameplates.css";
 }
 window.showname_click = showname_click;
 
@@ -2658,17 +2666,25 @@ window.ReconnectButton = ReconnectButton;
  * @param {string} msg the string to be added
  * @param {string} name the name of the sender
  */
-function appendICLog(msg, name = "", time = new Date()) {
+function appendICLog(msg, showname = "", nameplate = "", time = new Date()) {
 	const entry = document.createElement("p");
-	const nameField = document.createElement("span");
-	const textField = document.createElement("span");
-	nameField.className = "iclog_name";
-	nameField.appendChild(document.createTextNode(name));
+	const shownameField = document.createElement("span");
+	const nameplateField = document.createElement("span");
+	const textField = document.createElement("span");	
+	nameplateField.classList = "iclog_name iclog_nameplate";
+	nameplateField.appendChild(document.createTextNode(nameplate));
+
+	shownameField.classList = "iclog_name iclog_showname";
+	if (showname === "" || !showname)
+		shownameField.appendChild(document.createTextNode(nameplate));
+	else
+		shownameField.appendChild(document.createTextNode(showname));
 
 	textField.className = "iclog_text";
 	textField.appendChild(document.createTextNode(msg));
 
-	entry.appendChild(nameField);
+	entry.appendChild(shownameField);
+	entry.appendChild(nameplateField);
 	entry.appendChild(textField);
 
 	// Only put a timestamp if the minute has changed.
diff --git a/webAO/styles/nameplates.css b/webAO/styles/nameplates.css
new file mode 100644
index 0000000..ec6cc9e
--- /dev/null
+++ b/webAO/styles/nameplates.css
@@ -0,0 +1,7 @@
+.iclog_nameplate {
+    display: inline;
+}
+
+.iclog_showname {
+    display: none;
+}
+\ No newline at end of file
diff --git a/webAO/styles/shownames.css b/webAO/styles/shownames.css
new file mode 100644
index 0000000..9ffffaf
--- /dev/null
+++ b/webAO/styles/shownames.css
@@ -0,0 +1,7 @@
+.iclog_nameplate {
+    display: none;
+}
+
+.iclog_showname {
+    display: inline;
+}
+\ No newline at end of file