Changed clocks to be components.

configuration.txt

@@ -89,6 +89,8 @@ web:
         messagettl: 5
       - type: playermarkers
         showplayerfaces: true
+      - type: digitalclock
+      #- type: timeofdayclock
     
     defaultworld: world
     worlds:

web/css/dynmap_style.css

@@ -232,27 +232,31 @@
     margin-left: 8px;
 }
 */
-.clock {
+.largeclock.digitalclock {
-	position: relative;
+	text-align: center;
-	bottom: 16px;
+	font-size: 50px;
+	font-weight: bold;
+}
+
+.digitalclock {
 	text-align: center;
 }
 
-.clock.night {
+.digitalclock.night {
     /* background-image: url(../images/clock_night.png); */
     color: #dff;
 }
 
-.clock.day {
+.digitalclock.day {
     /* background-image: url(../images/clock_day.png); */
     color: #fd3;
 }
 
-.clock.night, .clock.day {
+.digitalclock.night, .digitalclock.day {
-    -moz-transition: all 8s 8s linear;
+    -moz-transition: color 8s 8s linear;
-    -webkit-transition: all 8s 8s linear;
+    -webkit-transition: color 8s 8s linear;
-    -o-transition: all 8s 8s linear;
+    -o-transition: color 8s 8s linear;
-    transition: all 8s 8s linear;
+    transition: color 8s 8s linear;
 }
 
 
@@ -285,6 +289,11 @@
     background-image: url(../images/moon.png);
 }
 
+.timeofday.digitalclock {
+	position: relative;
+	bottom: 16px;
+}
+
 /*******************
  * map list-specific styling
  */

web/index.html

@@ -24,8 +24,6 @@
 	<script type="text/javascript" src="js/map.js"></script>
 	<script type="text/javascript" src="js/kzedmaps.js"></script>
 	<script type="text/javascript" src="js/flatmap.js"></script>
-	<script type="text/javascript" src="js/clock.timeofday.js"></script>
-	<script type="text/javascript" src="js/clock.digital.js"></script>
 	<script type="text/javascript" src="config.js"></script>
 
 	<script type="text/javascript">

web/js/chatballoon.js

@@ -29,7 +29,7 @@ componentconstructors['chatballoon'] = function(dynmap, configuration) {
 		htmlMessage = htmlMessage + "</div>";
 		if (!popup.infoWindow) {
 			popup.infoWindow = new google.maps.InfoWindow({
-				disableAutoPan: !(me.options.focuschatballoons || false),
+				disableAutoPan: !(configuration.focuschatballoons || false),
 			    content: htmlMessage
 			});
 		} else {

web/js/clock.digital.js

@@ -1,42 +0,0 @@
-function MinecraftDigitalClock(element) {
-	this.create(element);
-}
-MinecraftDigitalClock.prototype = {
-	element: null,
-	timeout: null,
-	time: null,
-	create: function(element) {
-		this.element = element;
-		$(element).addClass('clock');
-	},
-	setTime: function(time) {
-		if (this.timeout != null) {
-			window.clearTimeout(this.timeout);
-			this.timeout = null;
-		}
-		this.time = getMinecraftTime(time);
-		this.element
-			.addClass(this.time.day ? 'day' : 'night')
-			.removeClass(this.time.night ? 'day' : 'night')
-			.text(this.formatTime(this.time));
-		
-		if (this.timeout == null) {
-			var me = this;
-			this.timeout = window.setTimeout(function() {
-				me.timeout = null;
-				me.setTime(me.time.servertime+(1000/60));
-			}, 700);
-		}
-	},
-	formatTime: function(time) {
-		var formatDigits = function(n, digits) {
-			var s = n.toString();
-			while (s.length < digits) {
-				s = '0' + s;
-			}
-			return s;
-		}
-		return formatDigits(time.hours, 2) + ':' + formatDigits(time.minutes, 2);
-	}
-};
-clocks.digital = function(element) { return new MinecraftDigitalClock(element); };

web/js/clock.timeofday.js

@@ -1,59 +0,0 @@
-function MinecraftTimeOfDay(element,elementsun,elementmoon) {
-	this.create(element, elementsun, elementmoon);
-}
-MinecraftTimeOfDay.prototype = {
-	element: null,
-	elementsun: null,
-	elementmoon: null,
-	create: function(element,elementsun,elementmoon) {
-		if (!element) element = $('<div/>');
-		this.element = element;
-		
-		if (!elementsun) elementsun = $('<div/>');
-		this.elementsun = elementsun;
-		this.elementsun.appendTo(this.element);
-		if (!elementmoon) elementmoon = $('<div/>');
-		this.elementmoon = elementmoon;
-		this.elementmoon.appendTo(this.elementsun);
-		this.element.height(60);
-		this.element.addClass('timeofday');
-		this.elementsun.height(60);
-		this.elementsun.addClass('timeofday');
-		this.elementsun.addClass('sun');
-		this.elementmoon.height(60);
-		this.elementmoon.addClass('timeofday');
-		this.elementmoon.addClass('moon');
-		this.elementmoon.html("&nbsp;&rlm;&nbsp;");
-		this.elementsun.css("background-position", (-150) + "px " + (-150) + "px");
-		this.elementmoon.css("background-position", (-150) + "px " + (-150) + "px");
-		
-		return element;
-	},
-	setTime: function(time) {
-		var sunangle;
-		
-		if(time > 23100 || time < 12900)
-		{
-			//day mode
-			var movedtime = time + 900;
-			movedtime = (movedtime >= 24000) ? movedtime - 24000 : movedtime;
-			//Now we have 0 -> 13800 for the day period
-			//Devide by 13800*2=27600 instead of 24000 to compress day
-		    sunangle = ((movedtime)/27600 * 2 * Math.PI);
-		}
-		else
-		{
-			//night mode
-			var movedtime = time - 12900;
-			//Now we have 0 -> 10200 for the night period
-			//Devide by 10200*2=20400 instead of 24000 to expand night
-		    sunangle = Math.PI + ((movedtime)/20400 * 2 * Math.PI);
-		}
-		
-		var moonangle = sunangle + Math.PI;
-		
-		this.elementsun.css("background-position", (-50 * Math.cos(sunangle)) + "px " + (-50 * Math.sin(sunangle)) + "px");
-		this.elementmoon.css("background-position", (-50 * Math.cos(moonangle)) + "px " + (-50 * Math.sin(moonangle)) + "px");
-	}
-};
-clocks.timeofday = function(element) { return new MinecraftTimeOfDay(element); };

web/js/digitalclock.js

@@ -0,0 +1,42 @@
+componentconstructors['digitalclock'] = function(dynmap, configuration) {
+	var element = $('<div/>')
+		.addClass('digitalclock')
+		.addClass('largeclock')
+		.appendTo(dynmap.options.container);
+	
+	var timeout = null;
+	
+	var formatTime = function(time) {
+		var formatDigits = function(n, digits) {
+			var s = n.toString();
+			while (s.length < digits) {
+				s = '0' + s;
+			}
+			return s;
+		}
+		return formatDigits(time.hours, 2) + ':' + formatDigits(time.minutes, 2);
+	};
+	
+	var setTime = function(servertime) {
+		if (timeout != null) {
+			window.clearTimeout(timeout);
+			timeout = null;
+		}
+		var time = getMinecraftTime(servertime);
+		element
+			.addClass(time.day ? 'day' : 'night')
+			.removeClass(time.night ? 'day' : 'night')
+			.text(formatTime(time));
+		
+		if (timeout == null) {
+			timeout = window.setTimeout(function() {
+				timeout = null;
+				setTime(time.servertime+(1000/60));
+			}, 700);
+		}
+	};
+
+	$(dynmap).bind('worldupdated', function(event, update) {
+		setTime(update.servertime);
+	});
+};

web/js/map.js

@@ -3,25 +3,19 @@
 
 var componentconstructors = {};
 var maptypes = {};
-var clocks = {};
 
 componentconstructors['testcomponent'] = function(dynmap, configuration) {
-	return {
+	console.log('initialize');
-		dynmap: dynmap,
+	$(dynmap).bind('worldchanged', function() { console.log('worldchanged'); });
-		initialize: function() {
+	$(dynmap).bind('mapchanged', function() { console.log('mapchanged'); });
-			console.log('initialize');
+	$(dynmap).bind('zoomchanged', function() { console.log('zoomchanged'); });
-			$(dynmap).bind('worldchanged', function() { console.log('worldchanged'); });
+	$(dynmap).bind('worldupdating', function() { console.log('worldupdating'); });
-			$(dynmap).bind('mapchanged', function() { console.log('mapchanged'); });
+	$(dynmap).bind('worldupdate', function() { console.log('worldupdate'); });
-			$(dynmap).bind('zoomchanged', function() { console.log('zoomchanged'); });
+	$(dynmap).bind('worldupdated', function() { console.log('worldupdated'); });
-			$(dynmap).bind('worldupdating', function() { console.log('worldupdating'); });
+	$(dynmap).bind('worldupdatefailed', function() { console.log('worldupdatefailed'); });
-			$(dynmap).bind('worldupdate', function() { console.log('worldupdate'); });
+	$(dynmap).bind('playeradded', function() { console.log('playeradded'); });
-			$(dynmap).bind('worldupdated', function() { console.log('worldupdated'); });
+	$(dynmap).bind('playerremoved', function() { console.log('playerremoved'); });
-			$(dynmap).bind('worldupdatefailed', function() { console.log('worldupdatefailed'); });
+	$(dynmap).bind('playerupdated', function() { console.log('playerupdated'); });
-			$(dynmap).bind('playeradded', function() { console.log('playeradded'); });
-			$(dynmap).bind('playerremoved', function() { console.log('playerremoved'); });
-			$(dynmap).bind('playerupdated', function() { console.log('playerupdated'); });
-		}
-	};
 };
 
 function loadjs(url, completed) {
@@ -215,19 +209,6 @@ DynMap.prototype = {
 			});
 		});
 		
-		// The clock
-		var largeclock = $('<div/>')
-			.addClass('largeclock')
-			.appendTo(container);
-		var clock = me.clock = clocks['timeofday'](
-			$('<div/>')
-			.appendTo(largeclock)
-		);
-		var clockdigital = me.clockdigital = clocks['digital'](
-			$('<div/>')
-			.appendTo(largeclock)
-		);
-		
 		// The scrollbuttons
 		// we need to show/hide them depending: if (me.playerlist.scrollHeight() > me.playerlist.innerHeight()) or something.
 		var upbtn = $('<div/>')
@@ -367,9 +348,6 @@ DynMap.prototype = {
 					me.lasttimestamp = update.timestamp;
 				}
 				
-				me.clock.setTime(update.servertime);
-				me.clockdigital.setTime(update.servertime);
-				
 				var newplayers = {};
 				$.each(update.players, function(index, playerUpdate) {
 					var name = playerUpdate.name;

web/js/timeofdayclock.js

@@ -0,0 +1,86 @@
+componentconstructors['timeofdayclock'] = function(dynmap, configuration) {
+	var me = this;
+	
+	var timeout = null;
+	
+	var element = $('<div/>')
+		.addClass('largeclock')
+		.addClass('timeofday')
+		.appendTo(dynmap.options.container);
+	
+	var sun = $('<div/>')
+		.height(60)
+		.addClass('timeofday')
+		.addClass('sun')
+		.css('background-position', (-150) + 'px ' + (-150) + 'px')
+		.appendTo(element);
+	
+	var moon = $('<div/>')
+		.height(60)
+		.addClass('timeofday')
+		.addClass('moon')
+		.css('background-position', (-150) + 'px ' + (-150) + 'px')
+		.appendTo(sun);
+	
+	var clock = $('<div/>')
+		.addClass('timeofday')
+		.addClass('digitalclock')
+		.appendTo(element);
+	
+	var formatTime = function(time) {
+		var formatDigits = function(n, digits) {
+			var s = n.toString();
+			while (s.length < digits) {
+				s = '0' + s;
+			}
+			return s;
+		}
+		return formatDigits(time.hours, 2) + ':' + formatDigits(time.minutes, 2);
+	};
+	
+	var setTime = function(servertime) {
+		if (timeout != null) {
+			window.clearTimeout(timeout);
+			timeout = null;
+		}
+		var time = getMinecraftTime(servertime);
+		clock
+			.addClass(time.day ? 'day' : 'night')
+			.removeClass(time.night ? 'day' : 'night')
+			.text(formatTime(time));
+		
+		if (timeout == null) {
+			timeout = window.setTimeout(function() {
+				timeout = null;
+				setTime(time.servertime+(1000/60));
+			}, 700);
+		}
+	};
+	
+	$(dynmap).bind('worldupdated', function(event, update) {
+		var sunangle;
+		var time = update.servertime;
+		
+		if(time > 23100 || time < 12900) {
+			//day mode
+			var movedtime = time + 900;
+			movedtime = (movedtime >= 24000) ? movedtime - 24000 : movedtime;
+			//Now we have 0 -> 13800 for the day period
+			//Divide by 13800*2=27600 instead of 24000 to compress day
+		    sunangle = ((movedtime)/27600 * 2 * Math.PI);
+		} else {
+			//night mode
+			var movedtime = time - 12900;
+			//Now we have 0 -> 10200 for the night period
+			//Divide by 10200*2=20400 instead of 24000 to expand night
+		    sunangle = Math.PI + ((movedtime)/20400 * 2 * Math.PI);
+		}
+		
+		var moonangle = sunangle + Math.PI;
+		
+		sun.css('background-position', (-50 * Math.cos(sunangle)) + 'px ' + (-50 * Math.sin(sunangle)) + 'px');
+		moon.css('background-position', (-50 * Math.cos(moonangle)) + 'px ' + (-50 * Math.sin(moonangle)) + 'px');
+		
+		setTime(update.servertime);
+	});
+};