diff --git a/htdocs/assets/css/styles.css b/htdocs/assets/css/styles.css index e69de29..a1ae11d 100644 --- a/htdocs/assets/css/styles.css +++ b/htdocs/assets/css/styles.css @@ -0,0 +1,5 @@ +.msg-box{ + flex: 1 1 auto; + overflow-y: auto; + height: 32em; +} \ No newline at end of file diff --git a/htdocs/assets/js/chat.js b/htdocs/assets/js/chat.js index 00fe96a..4e6c096 100644 --- a/htdocs/assets/js/chat.js +++ b/htdocs/assets/js/chat.js @@ -1,4 +1,4 @@ -String.prototype.replaceAll = function(search, replacement) { +String.prototype.replaceAll = function (search, replacement) { var target = this; return target.split(search).join(replacement); }; @@ -6,74 +6,70 @@ var submit = document.getElementById('s'); joypixels.ascii = true; function encodeQueryData(data) { - const ret = []; - for (let d in data) - ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d])); - return ret.join('&'); + const ret = []; + for (let d in data) + ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d])); + return ret.join('&'); } function submitForm() { - var formElement = document.forms.namedItem("sendmsg") + var formElement = document.forms.namedItem("sendmsg") var formData = new FormData(formElement); - if(formData.get("message") != "%0D%0A" && formData.get("message") != null ){ - var data = {'id': formData.get("id"), 'message' : formData.get("message") } - var xhr = new XMLHttpRequest(); - xhr.open('POST', window.location.href, true); - xhr.onload = function () { - - console.log(this.responseText); - }; - xhr.send(encodeQueryData(data)); - } - $('#message').val(''); - } - + if (formData.get("message") != "%0D%0A" && formData.get("message") != null) { + var data = {'id': formData.get("id"), 'message': formData.get("message")} + var xhr = new XMLHttpRequest(); + xhr.open('POST', window.location.href, true); + xhr.onload = function () { + + console.log(this.responseText); + }; + xhr.send(encodeQueryData(data)); + } + $('#message').val(''); +} + var fetch_messages = new XMLHttpRequest(); -var url = "/peers/" +window.location.pathname+ ".txt"; -var last_text =""; -setInterval(function(){ - fetch_messages.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) loadMessages(this.responseText.split("\n")); - last_text = this.responseText; +var url = "/peers/" + window.location.pathname + ".txt"; +var last_text = ""; + +setInterval(function () { + fetch_messages.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + loadMessages(this.responseText.split("\n")); + } + //$(".msg-box").animate({scrollTop: document.getElementById("msgs").offsetHeight }, "slow"); + last_text = this.responseText; }; fetch_messages.open("GET", url, true); fetch_messages.send(); -},1000); - -function scrollSmoothToBottom (id) { - var div = document.getElementById(id); - $('#' + id).animate({ - scrollTop: div.scrollHeight - div.clientHeight - }, 500); -} +}, 1000); $(function () { $("#message").keypress(function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { $("#s").trigger('click'); - $('#message').val(''); + $('#message').val(''); return true; } }); }); - function loadMessages(arr) { var out = ""; var i; - for(i = 0; i < arr.length; i++) { - if(arr[i] == '') continue; - if(arr[i].indexOf("Me:") == -1){ - out += '
' + joypixels.toImage(decodeURIComponent(arr[i].replaceAll('+',' '))) + '
' + joypixels.toImage((decodeURIComponent(msg.replaceAll('+',' ')))) + '
' + joypixels.toImage(decodeURIComponent(arr[i].replaceAll('+', ' '))) + '
' + joypixels.toImage((decodeURIComponent(msg.replaceAll('+', ' ')))) + '