Fix autoscroll of message list

server/src/main/resources/static/client.js

@@ -37,6 +37,19 @@ var vm = new Vue({
 			return game !== null && game.started === true;
 		}
 	},
+	directives: {
+		autoscroll: {
+			bind: function(element, binding) {
+				var observer = new MutationObserver(scrollToBottom);
+				var config = { childList: true };
+				observer.observe(element, config);
+
+				function scrollToBottom() {
+					element.scrollTop = element.scrollHeight;
+				}
+			}
+		}
+	},
 	methods: {
 		drawMyBoard: function(ctx) {
 			var x = 25, y = MARGIN_TOP;
@@ -338,25 +351,18 @@ function start() {
 }
 
 function addChatAnnouncement(body) {
-	addMessageItem({
+	vm.messages.push({
 		body: body
 	})
 }
 
 function addChatMessage(sender, body) {
-	addMessageItem({
+	vm.messages.push({
 		sender: sender,
 		body: body
 	})
 }
 
-// Auto-scrolls the message list
-function addMessageItem(messageItem) {
-	vm.messages.push(messageItem);
-	var messageList = document.getElementById('messageList');
-	messageList.scrollTop = messageList.scrollHeight;
-}
-
 function doHttpGet(url, callback) {
 	var xhr = new XMLHttpRequest();
 	xhr.onreadystatechange = function() {

server/src/main/resources/static/index.html

@@ -52,7 +52,7 @@
     </div>
     <div class="chat column">
       <div class="header row">Chat</div>
-      <div id="messageList" class="body row scroll-y">
+      <div v-autoscroll class="body row scroll-y">
         <template v-for="message in messages">
           <div v-if="message.sender" class="message-item">
             <strong>{{ message.sender }}</strong> {{ message.body }}