Konfigurationen ausgelagert, Erwähnungen implementiert

Bugfix für Emoji-Patterns
Styling-Fixes

config/admins.json

@@ -0,0 +1,3 @@
+{
+  "André": "passwort"
+}

config/config.json

@@ -0,0 +1,14 @@
+{
+  "port": 443,
+  "historySize": 50,
+  "randomColors": [
+    "#c42020",
+    "#de801e",
+    "#f6c60b",
+    "#19ce19",
+    "#129696",
+    "#2c53e3",
+    "#6f23e3",
+    "#883f88"
+  ]
+}

index.js

@@ -14,23 +14,27 @@ const options = {
 const server = https.createServer(options, app);
 const io = require('socket.io')(server);
 
-const PORT = 443;
+var port = 443;
 
-const admins = {
-    'André': 'passwort'
-}
+var admins = {}
+
+fs.readFile("config/admins.json", "utf8", (err, data) => {
+    if (!err && data) {
+        admins = JSON.parse(data);
+    }
+})
 
 var users = [];
 
 var bannedIps = [];
 
 fs.readFile("config/ban.json", "utf8", (err, data) => {
-    if (!err) {
+    if (!err && data) {
         bannedIps = JSON.parse(data);
     }
 })
 
-const randomColors = [
+var randomColors = [
     '#c42020',
     '#de801e',
     '#f6c60b',
@@ -41,9 +45,18 @@ const randomColors = [
     '#883f88',
 ];
 
-const HISTORY_SIZE = 50;
+var historySize = 50;
 var history = [];
 
+fs.readFile("config/config.json", "utf8", (err, data) => {
+    if (!err) {
+        const config = JSON.parse(data);
+        if (config.port) port = config.port;
+        if (config.historySize) historySize = config.historySize;
+        if (config.randomColors) randomColors = config.randomColors;
+    }
+})
+
 app.use(express.static(__dirname + '/www'));
 app.use('/node_modules', express.static(__dirname + '/node_modules'));
 app.get('/img/ava/:username', (req, res) => {
@@ -165,8 +178,14 @@ io.on('connection', (socket) => {
                     return '<a href="' + url + '"><img class="favicon" src="' + faviconUrl + '" alt="" />' + url + '</a>';
                 });
 
+                for (const u of users) {
+                    while (msg.indexOf('@' + u.name) > -1) {
+                        msg = msg.replace('@' + u.name, '<span class="mention" style="color: ' + u.color + '">' + u.name + '</span>');
+                    }
+                }
+
                 log(user.name + ':', msg, '(' + user.ip + ')');
-                if (history.length >= HISTORY_SIZE) {
+                if (history.length >= historySize) {
                     history = history.slice(1);
                 }
                 history.push({msg: msg, user: getCleanUser(user), timestamp: Date.now()});
@@ -237,6 +256,6 @@ function log(...inputs) {
     });
 }
 
-server.listen(PORT, () => {
-    log('- Server up and running at port ' + PORT);
+server.listen(port, () => {
+    log('- Server up and running at port ' + port);
 });

www/css/app.css

@@ -116,10 +116,15 @@
     text-align: right;
 }
 
+#chat-host .messages .userMsg .avatar {
+    cursor: pointer;
+}
+
 #chat-host .messages .userMsg .user {
     order: -1;
     margin-right: 0.3em;
     font-weight: bold;
+    cursor: pointer;
 }
 
 #chat-host .messages .userMsg .time {
@@ -157,6 +162,7 @@
 
 #chat-host .userlistWrapper span {
     font-weight: bold;
+    cursor: pointer;
 }
 
 #chat-host .userlistWrapper button {

www/css/theme.css

@@ -34,11 +34,6 @@
     border-right-width: 1em;
 }
 
-#chat-host .main .messages li.userMsg .user,
-#chat-host .main .userlistWrapper .userlist li span {
-    filter: brightness(0.7) saturate(1.2);
-}
-
 #chat-host .main .messages li.userMsg .avatar {
     position: absolute;
     border-radius: 50%;
@@ -54,6 +49,12 @@
     right: 0.75em;
 }
 
+#chat-host .main .messages li.userMsg .user,
+#chat-host .main .messages li.userMsg .message .mention,
+#chat-host .main .userlistWrapper .userlist li span {
+    filter: brightness(0.7) saturate(1.2);
+}
+
 #chat-host .main .messages li.userMsg .message {
     margin-top: 0.2em;
 }
@@ -74,4 +75,12 @@
     font-size: inherit;
     text-transform: uppercase;
     color: #4d4d4d;
+}
+
+#chat-host a {
+    color: #751b09;
+}
+
+#chat-host a:not(:hover) {
+    text-decoration: none;
 }

www/js/main.js

@@ -115,6 +115,7 @@ function onServerLogin(user, history) {
             const usernameEl = $('<span>');
             usernameEl.text(userString);
             usernameEl.css('color', listUser.color);
+            usernameEl.click(() => mentionUser(listUser.name));
             userListEl.append(usernameEl);
 
             if (user.admin) {
@@ -171,13 +172,15 @@ function onServerLogin(user, history) {
             const valBefore = val.substring(0, cursorPos);
             const valAfter = val.substring(cursorPos);
 
-            for (const emojiPatternItem of emojiPatterns) {
-                if (valBefore.endsWith(emojiPatternItem.pattern)) {
-                    field.val(
-                        valBefore.substring(0, valBefore.length - emojiPatternItem.pattern.length) + emojiPatternItem.replacement + valAfter
-                    );
-                    field.prop('selectionStart', cursorPos);
-                    field.prop('selectionEnd', cursorPos);
+            if (!valBefore.endsWith('http:/') && !valBefore.endsWith('https:/')) {
+                for (const emojiPatternItem of emojiPatterns) {
+                    if (valBefore.endsWith(emojiPatternItem.pattern)) {
+                        field.val(
+                            valBefore.substring(0, valBefore.length - emojiPatternItem.pattern.length) + emojiPatternItem.replacement + valAfter
+                        );
+                        field.prop('selectionStart', cursorPos);
+                        field.prop('selectionEnd', cursorPos);
+                    }
                 }
             }
         }
@@ -236,6 +239,7 @@ function appendUserMessage(msg, msgUser, timestamp, user) {
     const avaEl = $('<img class="avatar" />');
     avaEl.prop('src', '/img/ava/' + msgUser.name);
     avaEl.css('backgroundColor', msgUser.color);
+    avaEl.click(() => mentionUser(msgUser.name));
     messageWrapper.append(avaEl);
 
     const timeEl = $('<span class="time">');
@@ -250,6 +254,7 @@ function appendUserMessage(msg, msgUser, timestamp, user) {
     }
     userEl.text(userString);
     userEl.css('color', msgUser.color);
+    userEl.click(() => mentionUser(msgUser.name));
     messageWrapper.append(userEl);
 
     const messageEl = $('<span class="message">');
@@ -268,3 +273,24 @@ function onKickUser(user) {
 function onLiftBan(ip) {
     socket.emit('requestLiftBan', ip);
 }
+
+function mentionUser(username) {
+    const field = $("#chat-host .messageField");
+    if (field) {
+        const mention = '@' + username + ' ';
+
+        const val = field.val();
+        var cursorPos = +field.prop('selectionStart');
+        const valBefore = val.substring(0, cursorPos);
+        const valAfter = val.substring(cursorPos);
+
+        field.val(valBefore + mention + valAfter);
+
+        cursorPos += mention.length;
+
+        field.prop('selectionStart', cursorPos);
+        field.prop('selectionEnd', cursorPos);
+
+        field.focus();
+    }
+}