From 12d95f72182218f24cefa398f4d47e0cde290156 Mon Sep 17 00:00:00 2001
From: Charles Gould <charles@gould.dev>
Date: Wed, 4 Jan 2017 19:37:41 -0500
Subject: [PATCH] Display announcements differently

---
 .../java/lingo/server/LingoController.java    |  3 +--
 .../src/main/resources/static/multiplayer.css |  4 ++++
 .../src/main/resources/static/multiplayer.js  | 19 +++++++++++++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/server/src/main/java/lingo/server/LingoController.java b/server/src/main/java/lingo/server/LingoController.java
index 46a38e4..9286b2f 100644
--- a/server/src/main/java/lingo/server/LingoController.java
+++ b/server/src/main/java/lingo/server/LingoController.java
@@ -185,8 +185,7 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
 	}
 
 	private void sendAnnouncement(String message) {
-		final String source = "[Server]";
-		final ChatMessage payload = new ChatMessage(source, message);
+		final ChatMessage payload = new ChatMessage(null, message);
 		messagingTemplate.convertAndSend(StompTopics.CHAT, payload);
 	}
 
diff --git a/server/src/main/resources/static/multiplayer.css b/server/src/main/resources/static/multiplayer.css
index d5af794..259bf5f 100644
--- a/server/src/main/resources/static/multiplayer.css
+++ b/server/src/main/resources/static/multiplayer.css
@@ -31,6 +31,10 @@ h1 {
   padding: 10px 20px 10px 20px;
 }
 
+.messageLog {
+  color: green;
+}
+
 #messageInput {
   width: 100%;
   height: 42px;
diff --git a/server/src/main/resources/static/multiplayer.js b/server/src/main/resources/static/multiplayer.js
index b524757..086e586 100644
--- a/server/src/main/resources/static/multiplayer.js
+++ b/server/src/main/resources/static/multiplayer.js
@@ -133,7 +133,7 @@ function addChatMessage(sender, body) {
 	usernameNode.appendChild(usernameTextNode);
 	var messageTextNode = document.createTextNode(' ' + body);
 	var chatMessage = document.createElement('div');
-	chatMessage.setAttribute('class', 'list-group-item');
+	chatMessage.classList.add('list-group-item');
 	chatMessage.appendChild(usernameNode);
 	chatMessage.appendChild(messageTextNode);
 	messageList.appendChild(chatMessage);
@@ -142,6 +142,19 @@ function addChatMessage(sender, body) {
 	messageList.scrollTop = messageList.scrollHeight;
 }
 
+function addChatAnnouncement(body) {
+	var messageList = document.getElementById('messageList');
+	var messageTextNode = document.createTextNode(body);
+	var chatMessage = document.createElement('div');
+	chatMessage.classList.add('list-group-item');
+	chatMessage.classList.add('messageLog');
+	chatMessage.appendChild(messageTextNode);
+	messageList.appendChild(chatMessage);
+
+	// Auto-scroll if necessary
+	messageList.scrollTop = messageList.scrollHeight;
+}
+
 function drawMyBoard() {
 	var x = 25, y = MARGIN_TOP;
 	drawUsername(x, y, myUsername);
@@ -311,7 +324,9 @@ function subscribeToChatMessages() {
 		var chatMessage = JSON.parse(message.body);
 		var messageSender = chatMessage.username;
 		var messageBody = chatMessage.message;
-		if (messageSender === myUsername) {
+		if (messageSender === null) {
+			addChatAnnouncement(messageBody);
+		} else if (messageSender === myUsername) {
 			console.log('Ignoring message sent by myself')
 		} else {
 			console.log('Message from ' + messageSender + ": " + messageBody);