aviate/reallife-gamemode
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chat done

Browse Source
This commit is contained in:
Lukas Moungos
2021-04-11 16:07:00 +02:00
parent fd2a6fd84e
commit 5baff3fc0b
3 changed files with 3542 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3340
ReallifeGamemode.Client/assets/chat/jquery-1.11.3.min.js vendored
View File

File diff suppressed because one or more lines are too long

236
ReallifeGamemode.Client/assets/chat/js/main.js
View File

@@ -1,36 +1,31 @@
let chat = let chat =
{ {
size: 0, size: 0,
history_limit: 50, history_limit: 50,
container: null, container: null,
input: null, input: null,
enabled: false, enabled: false,
active: true, active: true,
historyMsgs: [], historyMsgs: [],
currentIndex: 0 currentIndex: 0
}; };
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,69 +35,76 @@ 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]}`;
if (colorCheck === "!{#") {
colorPositions.push(i);
}
}
colorPositions.forEach(el => { for (let i = 0; i < text.length; i++) {
let sub = text.slice(el, -1); let colorCheck = `${text[i]}${text[i + 1]}${text[i + 2]}`;
colors.push(sub.slice(3, 9));
});
colorPositions.forEach((el, i) => { if (colorCheck === "!{#") {
let sub = text.slice(colorPositions[i] + 10, colorPositions[i + 1]); colorPositions.push(i);
chatElement += `<span style='color: ${colors[i]}'>${sub}</span>`; }
}); }
chatElement += "</li>"; colorPositions.forEach(el => {
let sub = text.slice(el, -1);
colors.push(sub.slice(3, 9));
});
if (chatElement === "<li></li>") { colorPositions.forEach((el, i) => {
chat.container.prepend("<li>" + text + "</li>"); let sub = text.slice(colorPositions[i] + 10, colorPositions[i + 1]);
} else { chatElement += `<span style='color: ${colors[i]}'>${sub}</span>`;
chat.container.prepend(chatElement); });
}
chat.size++; var elmnt = document.getElementById("chat_messages");
if (chat.size >= chat.history_limit) chatElement += "</li>";
{
chat.container.children(":last").remove();
}
},
clear: () => var today = new Date();
{
chat.container.html("");
},
activate: (toggle) =>
{
if (toggle == false
&& (chat.input != null))
enableChatInput(false);
chat.active = toggle; if (chatElement === "<li></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.append("<li>" + "[" + today.toLocaleTimeString('de-DE') + "] " + text + "</li>");
}
} else {
chat.container.append(chatElement);
}
show: (toggle) => chat.size++;
{
if(toggle)
$("#chat").show();
else
$("#chat").hide();
chat.active = toggle; if (chat.size >= chat.history_limit) {
} chat.container.children(":last").remove();
}
},
clear: () => {
chat.container.html("");
},
activate: (toggle) => {
if (toggle == false
&& (chat.input != null))
enableChatInput(false);
chat.active = toggle;
},
show: (toggle) => {
if (toggle)
$("#chat").show();
else
$("#chat").hide();
chat.active = toggle;
}
}; };
let api = { "chat:push": chatAPI.push, "chat:clear": chatAPI.clear, "chat:activate": chatAPI.activate, "chat:show": chatAPI.show }; let api = { "chat:push": chatAPI.push, "chat:clear": chatAPI.clear, "chat:activate": chatAPI.activate, "chat:show": chatAPI.show };
@@ -111,81 +113,75 @@ 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();
} else if (event.which == 38) { } else if (event.which == 38) {
if (chat.historyMsgs.length === 0) if (chat.historyMsgs.length === 0)
return; return;
const previousMessages = chat.historyMsgs; const previousMessages = chat.historyMsgs;
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(() => {
chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length);
setTimeout(() => {
chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length);
}, 1); }, 1);
chat.currentIndex = chat.currentIndex + 1; chat.currentIndex = chat.currentIndex + 1;
} else if (event.which == 40) {
if (chat.historyMsgs.length === 0)
return;
const previousMessages = chat.historyMsgs;
} else if (event.which == 40) { if (chat.currentIndex === -1) {
if (chat.historyMsgs.length === 0) chat.input.children("input").val("")
return; return;
}
const previousMessages = chat.historyMsgs; chat.currentIndex = chat.currentIndex - 1;
chat.input.children("input").val(previousMessages[chat.currentIndex]);
if (chat.currentIndex === -1) { setTimeout(() => {
chat.input.children("input").val("") chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length);
return; }, 1);
} }
else if (event.which == 13 && chat.input != null) {
var value = chat.input.children("input").val();
chat.currentIndex = chat.currentIndex - 1; if (value.length > 0) {
chat.input.children("input").val(previousMessages[chat.currentIndex]); if (chat.historyMsgs.length >= MAX_MSG_HISTORY) {
chat.historyMsgs.pop();
}
setTimeout(() => { chat.historyMsgs.unshift(value);
chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length); chat.currentIndex = 0;
}, 1); var elmnt = document.getElementById("chat_messages");
}
else if (event.which == 13 && chat.input != null)
{
var value = chat.input.children("input").val();
if (value.length > 0) if (value[0] == "/") {
{
if (chat.historyMsgs.length >= MAX_MSG_HISTORY) {
chat.historyMsgs.pop();
}
chat.historyMsgs.unshift(value);
chat.currentIndex = 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;
} }
} }

139
ReallifeGamemode.Client/assets/chat/style/main.css
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 {
::-webkit-scrollbar-thumb:hover{ transform: rotate(0deg)
background: rgba(255, 17, 0, 0.65) }
#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 {
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)
}