Make links in OOC chat clickable

2 files changed, 14 insertions, 3 deletions

diff --git a/public/client.html b/public/client.html
index 2121c87..0d973ec 100644
--- a/public/client.html
+++ b/public/client.html
@@ -613,7 +613,7 @@
 <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
index 247f1a7..84329d3 100644
--- 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;
         }
     }
-}
\ No newline at end of file
+}
+
+// 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>`);
+}