Dynamic Time of the day Added

web/map.js

@@ -72,24 +72,57 @@ MinecraftClock.prototype = {
 function MinecraftTimeOfDay(element) { this.element = element; }
 MinecraftTimeOfDay.prototype = {
 	element: null,
+	elementsun: null,
+	elementmoon: null,
 	create: function(element) {
 		if (!element) element = $('<div/>');
 		this.element = element;
 		return element;
 	},
+	initialize: function(elementsun, elementmoon) {
+		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", (-120) + "px " + (-120) + "px");
+		this.elementmoon.css("background-position", (-120) + "px " + (-120) + "px");
+	},
 	setTime: function(time) {
-		this.element
-			.removeClass('time1')
-			.removeClass('time2')
-			.removeClass('time3')
-			.removeClass('time4')
-			.removeClass('time5')
-			.removeClass('time6')
-			.removeClass('time7')
-			.removeClass('time8')
-			.addClass('time' + time.day)
-			.html("&nbsp;&rlm;&nbsp;")
-			.height(60);
+		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");
 	}
 };
 
@@ -117,7 +150,6 @@ function DynMap(options) {
 }
 DynMap.prototype = {
 	registeredTiles: new Array(),
-	clock: null,
 	markers: new Array(),
 	chatPopups: new Array(),
 	lasttimestamp: '0',
@@ -248,19 +280,12 @@ DynMap.prototype = {
 			.addClass('playerlist')
 			.appendTo(sidebar);
 		
-		// The Clock
-		var clock = me.clock = new MinecraftClock(
-				$('<div/>')
-					.addClass('clock')
-					.appendTo(sidebar)
-		);
-		
 		// The TimeOfDay
 		var timeofday = me.timeofday = new MinecraftTimeOfDay(
 				$('<div/>')
-					.addClass('timeofday')
 				.appendTo(sidebar)
 		);
+		timeofday.initialize();
 		
 		// The Compass
 		var compass = me.compass = new MinecraftCompass(
@@ -295,8 +320,7 @@ DynMap.prototype = {
 				me.alertbox.hide();
 			
 				me.lasttimestamp = update.timestamp;
-				me.clock.setTime(getMinecraftTime(update.servertime));
-				me.timeofday.setTime(me.clock.time);
+				me.timeofday.setTime(update.servertime);
 
 				var typeVisibleMap = {};
 				var newmarkers = {};

web/minecraft.js

@@ -77,40 +77,3 @@ function getMinecraftHead(player,size,completed) {
 		completed(resizeImage(head,size));
 	}
 }
-
-function getMinecraftTime(servertime) {
-	servertime = parseInt(servertime);
-	var hours = (parseInt(servertime / 1000)+8) % 24;
-	var minutes = parseInt(((servertime / 1000) % 1) * 60);
-	var seconds = parseInt(((((servertime / 1000) % 1) * 60) % 1) * 60);
-	
-	var daytime = 0;
-	if(hours >= 6 && hours <= 7)
-	daytime =  1;
-	if(hours >= 8 && hours <= 9)
-	daytime =  2;
-	if(hours >= 10 && hours <= 17)
-	daytime =  3;
-	if(hours >= 18 && hours <= 19)
-	daytime =  4;
-	if(hours >= 20 && hours <= 21)
-	daytime =  5;
-	if(hours >= 22 && hours <= 23)
-	daytime =  6;
-	if(hours >= 0 && hours <= 3)
-	daytime =  7;
-	if(hours >= 4 && hours <= 5)
-	daytime =  8;
-	
-	return {
-		servertime: servertime,
-		days: parseInt((servertime+8000) / 24000),
-		
-		// Assuming it is day at 8:00
-		hours: hours,
-		minutes: minutes,
-		seconds: seconds,
-		
-		day: daytime,
-	};
-}

web/style.css

@@ -82,15 +82,12 @@ a, a:visited, label {
 	background-image: url(compass.png);
 }
 
-.timeofday { background-repeat: no-repeat; }
-.timeofday.time1 { background-image: url(time1.png); }
-.timeofday.time2 { background-image: url(time2.png); }
-.timeofday.time3 { background-image: url(time3.png); }
-.timeofday.time4 { background-image: url(time4.png); }
-.timeofday.time5 { background-image: url(time5.png); }
-.timeofday.time6 { background-image: url(time6.png); }
-.timeofday.time7 { background-image: url(time7.png); }
-.timeofday.time8 { background-image: url(time8.png); }
+.timeofday {
+	background-repeat: no-repeat; 
+}
+
+.timeofday.sun { background-image: url(sun.png); }
+.timeofday.moon { background-image: url(moon.png); }
 
 .alertbox {
 	padding: 5px;