add chat team colors

public/static/css/styles.css

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

public/static/js/wingbase/gui/chat.js

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

server/game/room/index.js

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