Changed clocks to be components.

This commit is contained in:
FrozenCow 2011-03-31 15:52:35 +02:00
parent 1cda538eef
commit f93eb8dcbc
9 changed files with 161 additions and 147 deletions

View File

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

View File

@ -232,27 +232,31 @@
margin-left: 8px;
}
*/
.clock {
position: relative;
bottom: 16px;
.largeclock.digitalclock {
text-align: center;
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 {
-moz-transition: all 8s 8s linear;
-webkit-transition: all 8s 8s linear;
-o-transition: all 8s 8s linear;
transition: all 8s 8s linear;
.digitalclock.night, .digitalclock.day {
-moz-transition: color 8s 8s linear;
-webkit-transition: color 8s 8s linear;
-o-transition: color 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
*/

View File

@ -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">

View File

@ -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 {

View File

@ -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); };

View File

@ -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); };

42
web/js/digitalclock.js Normal file
View File

@ -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);
});
};

View File

@ -3,25 +3,19 @@
var componentconstructors = {};
var maptypes = {};
var clocks = {};
componentconstructors['testcomponent'] = function(dynmap, configuration) {
return {
dynmap: dynmap,
initialize: function() {
console.log('initialize');
$(dynmap).bind('worldchanged', function() { console.log('worldchanged'); });
$(dynmap).bind('mapchanged', function() { console.log('mapchanged'); });
$(dynmap).bind('zoomchanged', function() { console.log('zoomchanged'); });
$(dynmap).bind('worldupdating', function() { console.log('worldupdating'); });
$(dynmap).bind('worldupdate', function() { console.log('worldupdate'); });
$(dynmap).bind('worldupdated', function() { console.log('worldupdated'); });
$(dynmap).bind('worldupdatefailed', function() { console.log('worldupdatefailed'); });
$(dynmap).bind('playeradded', function() { console.log('playeradded'); });
$(dynmap).bind('playerremoved', function() { console.log('playerremoved'); });
$(dynmap).bind('playerupdated', function() { console.log('playerupdated'); });
}
};
console.log('initialize');
$(dynmap).bind('worldchanged', function() { console.log('worldchanged'); });
$(dynmap).bind('mapchanged', function() { console.log('mapchanged'); });
$(dynmap).bind('zoomchanged', function() { console.log('zoomchanged'); });
$(dynmap).bind('worldupdating', function() { console.log('worldupdating'); });
$(dynmap).bind('worldupdate', function() { console.log('worldupdate'); });
$(dynmap).bind('worldupdated', function() { console.log('worldupdated'); });
$(dynmap).bind('worldupdatefailed', function() { console.log('worldupdatefailed'); });
$(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) {
@ -214,19 +208,6 @@ DynMap.prototype = {
.appendTo(maplist);
});
});
// 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.
@ -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;

86
web/js/timeofdayclock.js Normal file
View File

@ -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);
});
};