Auto link detection. Auto ping.

code/modules/chat/chat_datum.dm

@@ -116,6 +116,8 @@
 		return
 	if(href_list["ready"])
 		FinilizeLoading()
+	if(href_list["ping"])
+		jscall(list(), "chatPong")
 
 	. = ..()
 

code/modules/client/client procs.dm

@@ -54,6 +54,11 @@
 		//del(usr)
 		return
 
+	if(href_list["_openurl"])
+		if(alert("This will open \"[href_list["_openurl"]]\" in your browser. Are you sure?",,"Yes","No")=="No")
+			return
+		send_link(usr, href_list["_openurl"])
+
 	//Admin PM
 	if(href_list["priv_msg"])
 		var/client/C = locate(href_list["priv_msg"])

code/modules/vueui/ui.dm

@@ -247,8 +247,6 @@ main ui datum.
 			if(json_href)
 				for(var/hvar in json_href)
 					href_list[hvar] = json_href[hvar]
-		if(href_list["_openurl"])
-			send_link(usr, href_list["_openurl"])
 		href_list["vueui"] = src // Let's pass our UI object to object for it to do things.
 		topicReturn = object.Topic(href, href_list)
 	if(. || topicReturn)

vueui/package.json

@@ -14,6 +14,8 @@
     "core-js-compat": "^3.1.4",
     "fuse.js": "^3.4.5",
     "js-cookie": "^2.2.1",
+    "linkifyjs": "^2.1.8",
+    "url-parse": "^1.4.7",
     "vue": "^2.6.10",
     "webpack": "^4.39.1"
   },

vueui/src/assets/chat.scss

@@ -360,7 +360,7 @@ img.text_tag {
 
 
 .vuchat-controls {
-  font-size: 20px;
+  font-size: 1.2em;
   position: fixed;
   top: 0;
   right: 0;

vueui/src/chat.js

@@ -5,6 +5,8 @@
 import './assets/chat.scss'
 import Utils from './utils.js'
 import Store from './chatStore.js'
+import UrlParse from 'url-parse'
+import linkifyHtml from 'linkifyjs/html';
 
 global.receiveQueue = function (encoded) {
   let decoded = JSON.parse(encoded)
@@ -33,15 +35,54 @@ global.changeFontSize = function (delta) {
   window.scrollTo(0, newOffset);
 }
 
+global.chatPong = Store.getPongHandler((speed) => {
+  document.getElementById("latency").innerText = speed
+})
+
+global.dbg = () => {
+  let div = document.createElement('div')
+  div.innerText = global.messageTarget.innerHTML
+  div.innerText += "<hr>" + window.location
+  global.messageTarget.appendChild(div)
+
+}
+
+var pingTimer = setInterval(Store.getPingHandlier(
+  () => Utils.sendToTopicRaw({
+      src: Store.state.ref,
+      ping: 1
+    }),
+  (time) => {
+    addMessages([`Server didn't respond in ${time} seconds. You might have lost connection.`])
+    clearInterval(pingTimer);
+  }
+), 2000)
+
+function getLinkClickHandler(el) {
+  return (event) => {
+    event.preventDefault()
+    var url = UrlParse(el.getAttribute('href'), 'byond://')
+    if(url.hostname) {
+      Utils.sendToTopicRaw({
+        _openurl: url.href
+      })
+    } else {
+      Utils.AJAX(url.query)
+    }
+    return false
+  }
+}
+
 function addMessages(messages) {
   // Save current parameters for later
   var offset = document.documentElement.scrollTop;
   var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
   messages.forEach(message => {
     let div = document.createElement('div')
-    div.innerHTML = message
-    div.className = "message"
+    div.innerHTML = linkifyHtml(message)
+    div.className = 'message'
     global.messageTarget.appendChild(div)
+    div.getElementsByTagName('A').forEach(el => el.addEventListener('click', getLinkClickHandler(el)))
   })
   // If we were at the end of document, then auto scroll to it.
   if(offset + 20 >= height) {
@@ -64,9 +105,16 @@ Utils.onReady(() => {
     ready: 1
   })
 
+  document.addEventListener("onclick", (event) => {
+    addMessages([JSON.stringify(event)])
+    if(event.target.tagName == "A") {
+      event.preventDefault()
+    }
+  })
+
   var tst = document.createElement('div')
   tst.className = "vuchat-controls"
-  tst.innerHTML = "<a href=\"javascript:void(0);\" onmousedown=\"changeFontSize(1)\">[+]</a><a href=\"javascript:void(0);\" onmousedown=\"changeFontSize(-1)\">[-]</a>"
+  tst.innerHTML = "<span id=\"latency\"></span><a href=\"javascript:void(0);\" onmousedown=\"changeFontSize(1)\">[+]</a><a href=\"javascript:void(0);\" onmousedown=\"changeFontSize(-1)\">[-]</a><a href=\"javascript:void(0);\" onmousedown=\"dbg()\">[D]</a>"
   document.body.insertBefore(tst, document.body.firstChild)
 
 })

vueui/src/chatStore.js

@@ -5,7 +5,9 @@ export default {
     ref: "",
     roundId: "",
     fontSize: 14,
-    messages: []
+    messages: [],
+    lastPing: null,
+    lastPong: null,
   },
   loadInitialState(encodedData) {
     var newState = JSON.parse(encodedData)
@@ -22,5 +24,30 @@ export default {
   UpdateFontSize(newSize) {
     this.state.fontSize = newSize
     Cookies.set('fontSize', newSize);
+  },
+  getPingHandlier(send, onFailure) {
+    return () => {
+      if(!this.state.lastPing) {
+        this.state.lastPing = Date.now()
+        send()
+      } else {
+        var diff = Date.now() - this.state.lastPing
+        if(diff > 15000) {
+          onFailure(diff / 1000);
+          send()
+        }
+      }
+    }
+  },
+  getPongHandler(callback) {
+    return () => {
+      if(!this.state.lastPing) {
+        return;
+      }
+      this.state.lastPong = Date.now()
+      callback(this.state.lastPong - this.state.lastPing)
+      this.state.lastPong = null;
+      this.state.lastPing = null;
+    }
   }
 }

vueui/src/utils.js

@@ -4,8 +4,10 @@ export default {
     for(var val in data) {
       sendparams.push(encodeURIComponent(val) + "=" + encodeURIComponent(data[val]))
     }
+    this.AJAX("?" + sendparams.join("&"))
+  },
+  AJAX(sendUrl) {
     var r = new XMLHttpRequest()
-    var sendUrl = "?" + sendparams.join("&")
     r.open("GET", sendUrl, true);
     r.send()
   },