chat schöner?

This commit is contained in:
Luke
2021-04-21 12:06:33 +00:00
parent dd08eaf11a
commit ea2f75b1ca
14 changed files with 217 additions and 24 deletions

View File

@@ -1,14 +0,0 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/checkbox.css" media="screen">
<link rel="stylesheet" type="text/css" href="style/main.css" media="screen">
<meta charset="utf-8" />
</head>
<body>
<div id="chat" class="ui_element">
<ul id="chat_messages"></ul>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

View File

@@ -0,0 +1,92 @@
*, body, html {
padding: 0;
margin: 0;
}
#chat, a, body, html {
color: #fff;
}
body, html {
-webkit-font-smoothing: antialiased;
overflow: hidden;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: calc(.7em + .4vw);
font-weight: 500;
direction: ltr;
}
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: 1.25;
text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
letter-spacing: .4px;
margin-top: 1em;
margin-left: 1em;
}
#chat ul#chat_messages {
height: 17.5em;
min-width: 35vw;
max-width: 85vw;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
overflow-y: auto;
overflow-x: hidden;
list-style-type: none;
margin-bottom: .25em;
}
#chat ul#chat_messages > li {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-bottom: .25em;
}
#chat input#chat_msg {
width: 35vw;
outline: 0;
border: none;
border-radius: 3px;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: .5em;
}
::-webkit-scrollbar {
width: 11px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 17, 0, 0);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 17, 0, 0);
}
/*# sourceMappingURL=main.css.map */

View File

@@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "AAAA,AAAA,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC;EACZ,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CACV;CAAC;;AAED,AAAA,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC;EACnB,KAAK,EAAE,IACT;CAAC;;AAED,AAAA,IAAI,EAAE,IAAI,CAAC;EACT,sBAAsB,EAAE,WAAW;EACnC,QAAQ,EAAE,MAAM;EAChB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;CAClB;;AAED,AAAA,IAAI,CAAC;EACH,WAAW,EAAE,oIAAoI;EACjJ,SAAS,EAAE,iBAAiB;EAC5B,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,GAAG;CACf;;AAED,AAAA,CAAC,CAAC;EAAE,eAAe,EAAE,IAAI;CAAI;;AAE7B,AAAA,WAAW,CAAC;EACV,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,CACX;CAAC;;AAED,AAAA,KAAK,CAAC;EACJ,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,CAAC;EAEV,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,8EAA8E;EAC3F,cAAc,EAAE,IAAI;EAEpB,UAAU,EAAE,GAAG;EACf,WAAW,EAAE,GAAG;CAmCjB;;AA5CD,AAWE,KAXG,CAWH,EAAE,AAAA,cAAc,CAAC;EACf,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,IAAI;EACf,SAAS,EAAE,IAAI;EACf,SAAS,EAAE,YAAY;EAEvB,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,MAAM;EAElB,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,KAAK;CAMrB;;AA3BH,AAuBI,KAvBC,CAWH,EAAE,AAAA,cAAc,GAYX,EAAE,CAAC;EACJ,SAAS,EAAE,YAAY;EACvB,aAAa,EAAE,KAAK;CACrB;;AA1BL,AA6BE,KA7BG,CA6BH,KAAK,AAAA,SAAS,CAAC;EACb,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,GAAG;EAElB,SAAS,EAAE,OAAO;EAClB,WAAW,EAAE,OAAO;EACpB,WAAW,EAAE,OAAO;EAEpB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,kBAAiB;EAE7B,OAAO,EAAE,IAAI;CACd;;AAGH,AAAA,mBAAmB,CAAC;EAClB,KAAK,EAAE,IAAI;CAQZ;;AATD,AAGE,mBAHiB,AAGhB,MAAM,CAAC;EACN,UAAU,EAAE,mBAAmB;EAC/B,aAAa,EAAE,IAAI;CAGpB;;AARH,AAOI,mBAPe,AAGhB,MAAM,AAIJ,MAAM,CAAC;EAAE,UAAU,EAAE,mBAAmB;CAAI",
"sources": [
"main.scss"
],
"names": [],
"file": "main.css"
}

View File

@@ -0,0 +1,89 @@
*, body, html {
padding: 0;
margin: 0
}
#chat, a, body, html {
color: #fff
}
body, html {
-webkit-font-smoothing: antialiased;
overflow: hidden;
font-size: 14px;
user-select: none;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: calc(.7em + .4vw);
font-weight: 500;
direction: ltr;
}
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: 1.25;
text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
letter-spacing: .4px;
margin-top: 1em;
margin-left: 1em;
ul#chat_messages {
height: 17.5em;
min-width: 35vw;
max-width: 85vw;
transform: rotate(0deg);
overflow-y: auto;
overflow-x: hidden;
list-style-type: none;
margin-bottom: .25em;
&> li {
transform: rotate(0deg);
margin-bottom: .25em;
}
}
input#chat_msg {
width: 35vw;
outline: 0;
border: none;
border-radius: 3px;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: white;
background: rgba(0, 0, 0, .5);
padding: .5em;
}
}
::-webkit-scrollbar {
width: 11px;
&-thumb {
background: rgba(255, 17, 0, 0);
border-radius: 20px;
&:hover { background: rgba(255, 17, 0, 0); }
}
}

View File

@@ -0,0 +1,16 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="package://assets/css/chat/checkbox.css" media="screen">
<link rel="stylesheet" type="text/css" href="package://assets/css/chat/main.css" media="screen">
<meta charset="utf-8" />
</head>
<body>
<div id="chat" class="ui_element">
<ul id="chat_messages"></ul>
</div>
<script type="text/javascript" src="package://assets/js/chat/jquery-1.11.3.min.js"></script>
<script src="package://assets/js/chat/main.js"></script>
</body>
</html>

View File

@@ -1,4 +1,4 @@
let chat = let chat =
{ {
size: 0, size: 0,
history_limit: 50, history_limit: 50,
@@ -23,8 +23,7 @@ function enableChatInput(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;
@@ -65,12 +64,14 @@ var chatAPI =
var today = new Date(); var today = new Date();
if (chatElement === "<li></li>") { if (chatElement === "<li></li>") {
var time = today.toLocaleTimeString('de-DE');
chat.container.append("<li>" + "[" + time + "] " + text + "</li>");
if (chat.input == null || elmnt.scrollTop == elmnt.scrollHeight - elmnt.clientHeight) { 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; elmnt.scrollTop = elmnt.scrollHeight - elmnt.clientHeight;
} else {
chat.container.append("<li>" + "[" + today.toLocaleTimeString('de-DE') + "] " + text + "</li>");
} }
// if (!chat.enabled) { elmnt.scrollTo(0, elmnt.scrollHeight); }
} else { } else {
chat.container.append(chatElement); chat.container.append(chatElement);
} }

View File

@@ -39,7 +39,7 @@ game.events.onPlayerCommand((cmd) => {
mp.game.vehicle.defaultEngineBehaviour = false; mp.game.vehicle.defaultEngineBehaviour = false;
mp.gui.chat.show(false); mp.gui.chat.show(false);
const chatbox = mp.browsers.new("package://assets/chat/index.html"); const chatbox = mp.browsers.new("package://assets/html/chat/index.html");
chatbox.markAsChat(); chatbox.markAsChat();
require('./Gui/house'); require('./Gui/house');