add chat team colors
This commit is contained in:
parent
61ae57a850
commit
52e1673e3e
3 changed files with 26 additions and 15 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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: `<${message.source.bold()}> ${message.text}`
|
html: `<${el}${message.source}</span>> ${message.text}`
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.element.scrollTop = this.element.scrollHeight;
|
||||||
|
|
||||||
setTimeout(_ => {
|
setTimeout(_ => {
|
||||||
//this.messageElement.removeChild(span);
|
this.messageElement.removeChild(span);
|
||||||
}, 15000);
|
}, 20000);
|
||||||
}
|
}
|
||||||
|
|
||||||
tick() {
|
tick() {
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue