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

View File

@@ -1,22 +1,31 @@
*, body, html {
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
display: none;
position: absolute;
width: 100vw;
height: 100vh;
z-index: 2
}
#chat {
display: block;
z-index: 0;
@@ -27,42 +36,54 @@ a{
font-size: 16px;
letter-spacing: .4px;
margin-left: 15px
}
@media screen and (min-height:1080px){
@media screen and (min-height:1080px) {
#chat {
font-size:18px!important;
font-weight:700}}
font-size: 14px !important;
font-weight: 700
}
}
#chat ul#chat_messages {
overflow-y:auto;
direction: ltr;
overflow-y: hidden;
overflow-x: hidden;
height: 285px;
margin-top: 2vh; /*2vh*/
transform:rotate(180deg);
transform: rotate(0deg);
/*width:37vw; /* old: 37vw*/
width: 800px;
max-width: 85%;
padding: 10px 20px; /* old padding: 10px 20px*/
list-style-type:none}
list-style-type: none
}
#chat ul#chat_messages > li {
transform:rotate(-180deg)}
transform: rotate(0deg)
}
#chat input#chat_msg {
color: #fff;
background: rgba(0,0,0,.5);
outline:0;border:none;
outline: 0;
border: none;
font-family: Myriad Pro,Open Sans,sans-serif;
font-size:13px;
font-size: 18px;
line-height: 35px;
width: 35vw;
padding:5px 5px 5px 15px}
padding: 5px 5px 5px 15px
}
::-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)
}