From 5ddaf940ed46ab52f12ce55e6b660263134f2b09 Mon Sep 17 00:00:00 2001
From: Arthur Mayer <info@citex.net>
Date: Fri, 18 Feb 2011 07:08:29 +0100
Subject: [PATCH] chat interface added, config option changed from
 showchatballoons: ture/false to showchat: balloons/modal

---
 src/main/java/org/dynmap/DynmapPlugin.java |   4 +-
 web/chat.js                                |   0
 web/chat_style.css                         |  58 +++++++++
 web/index.html                             |   2 +
 web/map.js                                 | 130 ++++++++++++++++-----
 5 files changed, 162 insertions(+), 32 deletions(-)
 create mode 100644 web/chat.js
 create mode 100644 web/chat_style.css

diff --git a/src/main/java/org/dynmap/DynmapPlugin.java b/src/main/java/org/dynmap/DynmapPlugin.java
index 992a25b7..7a5826f6 100644
--- a/src/main/java/org/dynmap/DynmapPlugin.java
+++ b/src/main/java/org/dynmap/DynmapPlugin.java
@@ -94,8 +94,8 @@ public class DynmapPlugin extends JavaPlugin {
         messageHandler.onMessageReceived.addListener(new Listener<SendMessageHandler.Message>() {
             @Override
             public void triggered(Message t) {
-                log.info("[WEB] " + t.name + ": " + t.message);
-                getServer().broadcastMessage("[WEB] " + t.name + ": " + t.message);
+                log.info("[WEB]" + t.name + ": " + t.message);
+                getServer().broadcastMessage("[WEB]" + t.name + ": " + t.message);
             }
         });
         webServer.handlers.put("/up/sendmessage", messageHandler);
diff --git a/web/chat.js b/web/chat.js
new file mode 100644
index 00000000..e69de29b
diff --git a/web/chat_style.css b/web/chat_style.css
new file mode 100644
index 00000000..253f90bd
--- /dev/null
+++ b/web/chat_style.css
@@ -0,0 +1,58 @@
+#chat {
+	position:absolute;
+	bottom:14px;
+	left:14px;
+	border: 1px solid rgba(0,0,0,0.5);
+	background: rgba(0, 0, 0, 0.6);
+}
+#chatcursor {
+	position:absolute;
+	left:5px;
+	bottom:5px;
+	font-size:10px;
+	color: white;
+	padding:0px;
+}
+#chatinput {
+	margin:4px;
+	width:608px;
+	height:12px;
+	font-family:sans-serif;
+	font-size:10px;
+	padding:1px;
+	padding-left:15px;
+	color: white;
+	border: 0px;
+	background: rgba(0, 0, 0, 0.6);
+}
+#messagelist {
+	margin:4px 4px 0px 4px;
+	width:622px;
+	max-height:198px;
+	font-family:sans-serif;
+	font-size: 10px;
+	padding:1px;
+	color: white;
+	background: rgba(0, 0, 0, 0.6);
+	overflow:hidden;
+	display:none;
+}
+#messagerow {
+	position:relative;
+	left:0px;
+	bottom:0px;
+	max-height:200px;
+	font-family:sans-serif;
+	font-size: 10px;
+	color: white;
+}
+.messageicon {
+	position:relative;
+	left:0px;
+	top:1px;
+}
+.messagetext {
+	position:relative;
+	left:0px;
+	top:-3px;
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index a5eb61e9..9886c1d6 100644
--- a/web/index.html
+++ b/web/index.html
@@ -12,6 +12,7 @@
 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 	<link rel="stylesheet" type="text/css" href="dynmap_style.css" media="screen" />
 	<link rel="stylesheet" type="text/css" href="clock_style.css" media="screen" />
+	<link rel="stylesheet" type="text/css" href="chat_style.css" media="screen" />
 	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 	<script type="text/javascript" src="jquery.json.js"></script>
 	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
@@ -21,6 +22,7 @@
 	<script type="text/javascript" src="kzedmaps.js"></script>
 	<script type="text/javascript" src="clock.timeofday.js"></script>
 	<script type="text/javascript" src="clock.digital.js"></script> 
+	<script type="text/javascript" src="chat.js"></script> 
 	<script type="text/javascript" src="config.js"></script>
 	<script type="text/javascript">
 	$(document).ready(function() {
diff --git a/web/map.js b/web/map.js
index a2b8b1ae..f40f5090 100644
--- a/web/map.js
+++ b/web/map.js
@@ -195,6 +195,30 @@ DynMap.prototype = {
 		);
 		compass.initialize();
 		
+		// The chat
+		if (me.options.showchat == 'modal') {
+			var chat = me.chat = $('<div/>')
+				.addClass('chat')
+				.attr({ id: 'chat' })
+				.appendTo(container);
+			var messagelist = me.messagelist = $('<div/>')
+				.addClass('messagelist')
+				.attr({ id: 'messagelist' })
+				.appendTo(chat);
+			var chatinput = me.chatinput = $('<input/>')
+				.addClass('chatinput')
+				.attr({
+					id: 'chatinput',
+					type: 'text',
+					value: 'not working yet'
+				})
+				.appendTo(chat);
+			var chatcursor = me.chatcursor = $('<span/>')
+				.attr({ id: 'chatcursor'})
+				.text('>_')
+				.appendTo(chat);
+		}
+		
 		// TODO: Enable hash-links.
 		/*
 		var link;
@@ -263,7 +287,7 @@ DynMap.prototype = {
 							me.onTileUpdated(update.name);
 						},
 						chat: function() {
-						    if (!me.options.showchatballoons)
+							if (!me.options.showchat)
 						    	return;
 							me.onPlayerChat(update.playerName, update.message);
 						}
@@ -333,37 +357,83 @@ DynMap.prototype = {
 		var map = me.map;
 		var mid = "player_" + playerName;
 		var playerMarker = markers[mid];
-		if (playerMarker)
-		{
-			var popup = chatPopups[playerName];
-			if (!popup)
-				popup = { lines: [ message ] };
-			else
-				popup.lines[popup.lines.length] = message;
+		if (me.options.showchat == 'balloons') {
+			if (playerMarker)
+			{
+				var popup = chatPopups[playerName];
+				if (!popup)
+					popup = { lines: [ message ] };
+				else
+					popup.lines[popup.lines.length] = message;
+	
+				var MAX_LINES = 5;
+				if (popup.lines.length > MAX_LINES)
+				{
+					popup.lines = popup.lines.slice(1);
+				}
+				htmlMessage = '<div id="content"><b>' + playerName + "</b><br/><br/>"
+				for (var line in popup.lines)
+				{
+					htmlMessage = htmlMessage + popup.lines[line] + "<br/>";
+				}
+				htmlMessage = htmlMessage + "</div>"
+				var now = new Date();
+				popup.popupTime = now.getTime();
+				if (!popup.infoWindow) {
+					popup.infoWindow = new google.maps.InfoWindow({
+						disableAutoPan: !(me.options.focuschatballoons || false),
+					    content: htmlMessage
+					});
+				} else {
+					popup.infoWindow.setContent(htmlMessage);
+				}
+				popup.infoWindow.open(map, playerMarker);
+				this.chatPopups[playerName] = popup;
+			}
+		} else if (me.options.showchat == 'modal') {
+			var me = this;
+			var messagelist = me.messagelist;
 
-			var MAX_LINES = 5;
-			if (popup.lines.length > MAX_LINES)
-			{
-				popup.lines = popup.lines.slice(1);
+			var messageRow = $('<div/>')
+				.addClass('messagerow')
+
+			var playerIconContainer = $('<span/>')
+				.addClass('messageicon')
+
+				if (me.options.showplayerfacesinmenu) {
+					getMinecraftHead(playerName, 16, function(head) {
+						messageRow.icon = $(head)
+							.addClass('playerIcon')
+							.appendTo(playerIconContainer);
+					});
+				}
+
+			if (playerName != 'Server') {
+				var playerWorldContainer = $('<span/>')
+				 .addClass('messagetext')
+				 .text('['+me.world+']')
+	
+				var playerGroupContainer = $('<span/>')
+				 .addClass('messagetext')
+				 .text('[Group]')
 			}
-			htmlMessage = '<div id="content"><b>' + playerName + "</b><br/><br/>"
-			for (var line in popup.lines)
-			{
-				htmlMessage = htmlMessage + popup.lines[line] + "<br/>";
-			}
-			htmlMessage = htmlMessage + "</div>"
-			var now = new Date();
-			popup.popupTime = now.getTime();
-			if (!popup.infoWindow) {
-				popup.infoWindow = new google.maps.InfoWindow({
-					disableAutoPan: !(me.options.focuschatballoons || false),
-				    content: htmlMessage
-				});
-			} else {
-				popup.infoWindow.setContent(htmlMessage);
-			}
-			popup.infoWindow.open(map, playerMarker);
-			this.chatPopups[playerName] = popup;
+
+			var playerNameContainer = $('<span/>')
+				.addClass('messagetext')
+				.text(' '+playerName+': ')
+
+			var playerMessageContainer = $('<span/>')
+				.addClass('messagetext')
+				.text(message)
+
+			messageRow.append(playerIconContainer,playerNameContainer,playerMessageContainer);
+			//messageRow.append(playerIconContainer,playerWorldContainer,playerGroupContainer,playerNameContainer,playerMessageContainer);
+			messagelist.append(messageRow);
+			
+			me.messagelist.show();
+			//var scrollHeight = jQuery(me.messagelist).attr('scrollHeight');
+			var scrollHeight = me.messagelist[0].scrollHeight;
+			messagelist.scrollTop(scrollHeight);
 		}
 	},
 	onTileUpdated: function(tileName) {