add chat team colors

This commit is contained in:
Asraelite 2016-03-28 13:53:56 +01:00
parent 61ae57a850
commit 52e1673e3e
3 changed files with 26 additions and 15 deletions

View file

@ -30,13 +30,20 @@ body {
background-color: rgba(0, 0, 0, 0.55); background-color: rgba(0, 0, 0, 0.55);
} }
#gui #chat span { #gui #chat-messages > span {
display: block; display: block;
margin-top: 5px; margin-top: 5px;
} }
#gui #chat b { #gui #chat span > span {
font-weight: 100; color: #afa;
}
#gui #chat span > span.teama {
color: #f76;
}
#gui #chat span > span.teamb {
color: #8af; color: #8af;
} }

View file

@ -2,6 +2,7 @@ GUI.prototype.Chat = class {
constructor(gui) { constructor(gui) {
this.gui = gui; this.gui = gui;
this.element = this.gui.query('#chat');
this.messageElement = this.gui.query('#chat-messages'); this.messageElement = this.gui.query('#chat-messages');
this.inputElement = this.gui.query('#chat input'); this.inputElement = this.gui.query('#chat input');
@ -13,8 +14,10 @@ GUI.prototype.Chat = class {
} }
addMessage(messageData) { addMessage(messageData) {
console.log(messageData);
let message = { let message = {
type: messageData.type, type: messageData.type,
team: messageData.team || 'c',
source: messageData.source || '?', source: messageData.source || '?',
text: messageData.message, text: messageData.message,
createTime: Date.now() createTime: Date.now()
@ -28,16 +31,17 @@ GUI.prototype.Chat = class {
}); });
span.classList.add('server'); span.classList.add('server');
} else { } else {
let el = `<span class="team${message.team}">`
span = this.gui.createElement(this.messageElement, 'span', { span = this.gui.createElement(this.messageElement, 'span', {
html: `&lt;${message.source.bold()}&gt; ${message.text}` html: `&lt;${el}${message.source}</span>&gt; ${message.text}`
}); });
} }
this.element.scrollTop = this.element.scrollHeight;
setTimeout(_ => { setTimeout(_ => {
//this.messageElement.removeChild(span); this.messageElement.removeChild(span);
}, 15000); }, 20000);
} }
tick() { tick() {

View file

@ -28,7 +28,7 @@ class Room {
this.world.addPlayer(player); this.world.addPlayer(player);
this.sendWorld(player); this.sendWorld(player);
wingbase.log(`${player.name} joined ${this.name}.`); wingbase.log(`${player.name} joined ${this.name}.`);
this.message('roomEnter', player.name); this.message('roomEnter', player.name, 'team' + player.team);
} }
remove(player) { remove(player) {
@ -43,7 +43,7 @@ class Room {
wingbase.gameServer.deleteRoom(this.name); wingbase.gameServer.deleteRoom(this.name);
} }
this.message('roomLeave', player.name); this.message('roomLeave', player.name, 'team' + player.team);
} }
setTeam(player, team) { setTeam(player, team) {
@ -79,24 +79,24 @@ class Room {
this.chatCooldown++; this.chatCooldown++;
this.io.to(this.name).emit('chat', { this.io.to(this.name).emit('chat', {
type: 'player', type: 'player',
team: player.team,
source: player.name, source: player.name,
message: escapeHtml(message.slice(0, 100)) message: escapeHtml(message.slice(0, 100))
}); });
} }
message(type, values) { message(type, values, classes) {
if (!(values instanceof Array)) values = [values]; if (!(values instanceof Array)) values = [values];
let messageList = messages[type]; let messageList = messages[type];
let message = messageList[Math.random() * messageList.length | 0]; let message = messageList[Math.random() * messageList.length | 0];
// TODO: format name to class. let c = classes || '';
let m = message.replace('@', `<span class="${c}">${values[0]}</span>`);
message = message.replace('@', `<b>${values[0]}</b>`);
this.broadcast('chat', { this.broadcast('chat', {
type: 'server', type: 'server',
message: message message: m
}); });
} }