Chat done

This commit is contained in:
2021-04-11 16:07:00 +02:00
parent fd2a6fd84e
commit 5baff3fc0b
3 changed files with 3542 additions and 193 deletions

File diff suppressed because one or more lines are too long

View File

@@ -12,25 +12,20 @@ let chat =
const MAX_MSG_HISTORY = 12; const MAX_MSG_HISTORY = 12;
function enableChatInput(enable) function enableChatInput(enable) {
{ if (chat.active == false
if(chat.active == false
&& enable == true) && enable == true)
return; return;
if (enable != (chat.input != null)) if (enable != (chat.input != null)) {
{
mp.invoke("focus", enable); mp.invoke("focus", enable);
if (enable) if (enable) {
{
chat.input = $("#chat").append('<div><input id="chat_msg" type="text" /></div>').children(":last"); chat.input = $("#chat").append('<div><input id="chat_msg" type="text" /></div>').children(":last");
chat.input.children("input").focus(); chat.input.children("input").focus();
} }
else else {
{ chat.input.fadeOut('fast', function () {
chat.input.fadeOut('fast', function()
{
chat.input.remove(); chat.input.remove();
chat.input = null; chat.input = null;
}); });
@@ -40,14 +35,15 @@ function enableChatInput(enable)
var chatAPI = var chatAPI =
{ {
push: (text) => push: (text) => {
{
let colorPositions = []; let colorPositions = [];
let colors = []; let colors = [];
let chatElement = "<li>"; let chatElement = "<li>";
for (let i = 0; i<text.length; i++) {
let colorCheck = `${text[i]}${text[i+ 1]}${text[i + 2]}`;
for (let i = 0; i < text.length; i++) {
let colorCheck = `${text[i]}${text[i + 1]}${text[i + 2]}`;
if (colorCheck === "!{#") { if (colorCheck === "!{#") {
colorPositions.push(i); colorPositions.push(i);
@@ -64,29 +60,36 @@ var chatAPI =
chatElement += `<span style='color: ${colors[i]}'>${sub}</span>`; chatElement += `<span style='color: ${colors[i]}'>${sub}</span>`;
}); });
var elmnt = document.getElementById("chat_messages");
chatElement += "</li>"; chatElement += "</li>";
var today = new Date();
if (chatElement === "<li></li>") { if (chatElement === "<li></li>") {
chat.container.prepend("<li>" + text + "</li>"); if (chat.input == null || elmnt.scrollTop == elmnt.scrollHeight - elmnt.clientHeight) {
chat.container.append("<li>" + "[" + today.toLocaleTimeString('de-DE') + "] " + text + "</li>");
elmnt.scrollTop = elmnt.scrollHeight - elmnt.clientHeight;
} else { } else {
chat.container.prepend(chatElement); chat.container.append("<li>" + "[" + today.toLocaleTimeString('de-DE') + "] " + text + "</li>");
}
} else {
chat.container.append(chatElement);
} }
chat.size++; chat.size++;
if (chat.size >= chat.history_limit) if (chat.size >= chat.history_limit) {
{
chat.container.children(":last").remove(); chat.container.children(":last").remove();
} }
}, },
clear: () => clear: () => {
{
chat.container.html(""); chat.container.html("");
}, },
activate: (toggle) => activate: (toggle) => {
{
if (toggle == false if (toggle == false
&& (chat.input != null)) && (chat.input != null))
enableChatInput(false); enableChatInput(false);
@@ -94,9 +97,8 @@ var chatAPI =
chat.active = toggle; chat.active = toggle;
}, },
show: (toggle) => show: (toggle) => {
{ if (toggle)
if(toggle)
$("#chat").show(); $("#chat").show();
else else
$("#chat").hide(); $("#chat").hide();
@@ -111,18 +113,15 @@ for (let fn in api) {
mp.events.add(fn, api[fn]); mp.events.add(fn, api[fn]);
} }
$(document).ready(function() $(document).ready(function () {
{
chat.container = $("#chat ul#chat_messages"); chat.container = $("#chat ul#chat_messages");
$(".ui_element").show(); $(".ui_element").show();
chatAPI.push("Multiplayer started"); chatAPI.push("Multiplayer started");
$("body").keyup(function(event) $("body").keyup(function (event) {
{
if (event.which == 84 && chat.input == null if (event.which == 84 && chat.input == null
&& chat.active == true) && chat.active == true) {
{
chat.currentIndex = 0; chat.currentIndex = 0;
enableChatInput(true); enableChatInput(true);
event.preventDefault(); event.preventDefault();
@@ -135,7 +134,6 @@ $(document).ready(function()
if (previousMessages.length === chat.currentIndex) if (previousMessages.length === chat.currentIndex)
return; return;
chat.input.children("input").val(previousMessages[chat.currentIndex]); chat.input.children("input").val(previousMessages[chat.currentIndex]);
setTimeout(() => { setTimeout(() => {
@@ -143,8 +141,6 @@ $(document).ready(function()
}, 1); }, 1);
chat.currentIndex = chat.currentIndex + 1; chat.currentIndex = chat.currentIndex + 1;
} else if (event.which == 40) { } else if (event.which == 40) {
if (chat.historyMsgs.length === 0) if (chat.historyMsgs.length === 0)
return; return;
@@ -163,29 +159,29 @@ $(document).ready(function()
chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length); chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length);
}, 1); }, 1);
} }
else if (event.which == 13 && chat.input != null) else if (event.which == 13 && chat.input != null) {
{
var value = chat.input.children("input").val(); var value = chat.input.children("input").val();
if (value.length > 0) if (value.length > 0) {
{
if (chat.historyMsgs.length >= MAX_MSG_HISTORY) { if (chat.historyMsgs.length >= MAX_MSG_HISTORY) {
chat.historyMsgs.pop(); chat.historyMsgs.pop();
} }
chat.historyMsgs.unshift(value); chat.historyMsgs.unshift(value);
chat.currentIndex = 0; chat.currentIndex = 0;
var elmnt = document.getElementById("chat_messages");
if (value[0] == "/") if (value[0] == "/") {
{
value = value.substr(1); value = value.substr(1);
if (value.length > 0) if (value.length > 0)
mp.invoke("command", value); mp.invoke("command", value);
elmnt.scrollTop = elmnt.scrollHeight - elmnt.clientHeight;
} }
else else {
{
mp.invoke("chatMessage", value); mp.invoke("chatMessage", value);
elmnt.scrollTop = elmnt.scrollHeight - elmnt.clientHeight;
} }
} }

View File

@@ -1,68 +1,89 @@
*,body,html{ *, body, html {
padding:0; padding: 0;
margin:0} margin: 0
#chat,a,body,html{
color:#fff
} }
body,html{
-webkit-font-smoothing:antialiased;
overflow:hidden;
font-size:14px;
-webkit-user-select:none
}
a{
text-decoration:none
}
.ui_element{
display:none;position:absolute;
width:100vw;height:100vh;z-index:2
}
#chat{
display:block;
z-index:0;
line-height:24px;
font-weight:700;
text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
font-family:Myriad Pro,Segoe UI,Verdana,sans-serif;
font-size:16px;
letter-spacing:.4px;
margin-left:15px
#chat, a, body, html {
color: #fff
} }
@media screen and (min-height:1080px){
#chat{ body, html {
font-size:18px!important; -webkit-font-smoothing: antialiased;
font-weight:700}} overflow: hidden;
#chat ul#chat_messages{ font-size: 14px;
overflow-y:auto; -webkit-user-select: none
height:285px; }
margin-top:2vh; /*2vh*/
transform:rotate(180deg); a {
text-decoration: none
}
.ui_element {
display: none;
position: absolute;
width: 100vw;
height: 100vh;
z-index: 2
}
#chat {
display: block;
z-index: 0;
line-height: 24px;
font-weight: 700;
text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
font-family: Myriad Pro,Segoe UI,Verdana,sans-serif;
font-size: 16px;
letter-spacing: .4px;
margin-left: 15px
}
@media screen and (min-height:1080px) {
#chat {
font-size: 14px !important;
font-weight: 700
}
}
#chat ul#chat_messages {
direction: ltr;
overflow-y: hidden;
overflow-x: hidden;
height: 285px;
margin-top: 2vh; /*2vh*/
transform: rotate(0deg);
/*width:37vw; /* old: 37vw*/ /*width:37vw; /* old: 37vw*/
width: 800px; max-width: 85%;
padding:10px 20px; /* old padding: 10px 20px*/ padding: 10px 20px; /* old padding: 10px 20px*/
list-style-type:none} list-style-type: none
#chat ul#chat_messages>li{
transform:rotate(-180deg)}
#chat input#chat_msg{
color:#fff;
background:rgba(0,0,0,.5);
outline:0;border:none;
font-family:Myriad Pro,Open Sans,sans-serif;
font-size:13px;
line-height:35px;
width:35vw;
padding:5px 5px 5px 15px}
::-webkit-scrollbar{
width:11px;
} }
::-webkit-scrollbar-thumb{
background:rgba(255, 17, 0, 0.3);
border-radius:20px
#chat ul#chat_messages > li {
transform: rotate(0deg)
}
#chat input#chat_msg {
color: #fff;
background: rgba(0,0,0,.5);
outline: 0;
border: none;
font-family: Myriad Pro,Open Sans,sans-serif;
font-size: 18px;
line-height: 35px;
width: 35vw;
padding: 5px 5px 5px 15px
} }
::-webkit-scrollbar-thumb:hover{
::-webkit-scrollbar {
width: 11px;
direction: ltr;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 17, 0, 0.3);
border-radius: 20px
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 17, 0, 0.65) background: rgba(255, 17, 0, 0.65)
}
}