Make links in OOC chat clickable

AttorneyOnline · Nov 18, 2023 · 8a3a7bb · 8a3a7bb
1 parent d5c5cc6
commit 8a3a7bb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/public/client.html b/public/client.html
@@ -613,7 +613,7 @@ <h3 id="client_version">version</h3>
 <template id="ooc">
 	<meta name="frame-title" lang="en" content="Server">
 	<div style="height: 100%; display: flex; flex-direction: column;">
-		<textarea id="client_ooclog" style="flex: 1 auto" readonly></textarea>
+		<div id="client_ooclog" style="flex: 1 auto" readonly></div>
 		<span id="client_oocinput">
 			<input id="OOC_name" name="OOC_name" type="text">
 			<input id="client_oocinputbox" type="text" onkeypress="onOOCEnter(event)">

diff --git a/webAO/packets/handlers/handleCT.ts b/webAO/packets/handlers/handleCT.ts
@@ -9,9 +9,20 @@ const { mode } = queryParser();
 export const handleCT = (args: string[]) => {
     if (mode !== "replay") {
         const oocLog = document.getElementById("client_ooclog")!;
-        oocLog.innerHTML += `${prepChat(args[1])}: ${prepChat(args[2])}\r\n`;
+        const username = prepChat(args[1]);
+        let message = addLinks(prepChat(args[2]));
+        // Replace newlines with br
+        message = message.replace(/\n/g, "<br>");
+
+        oocLog.innerHTML += `${username}: ${message}<br>`;
         if (oocLog.scrollTop > oocLog.scrollHeight - 600) {
             oocLog.scrollTop = oocLog.scrollHeight;
         }
     }
-}
+}
+
+// If the incoming message contains a link, add a href hyperlink to it
+function addLinks(message: string) {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    return message.replace(urlRegex, (url) => `<a href="${url}" target="_blank">${url}</a>`);
+}