mirror of
https://github.com/webbukkit/dynmap.git
synced 2024-12-29 12:07:41 +01:00
Changed clocks to be components.
This commit is contained in:
parent
1cda538eef
commit
f93eb8dcbc
@ -89,6 +89,8 @@ web:
|
||||
messagettl: 5
|
||||
- type: playermarkers
|
||||
showplayerfaces: true
|
||||
- type: digitalclock
|
||||
#- type: timeofdayclock
|
||||
|
||||
defaultworld: world
|
||||
worlds:
|
||||
|
@ -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
|
||||
*/
|
||||
|
@ -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">
|
||||
|
@ -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 {
|
||||
|
@ -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); };
|
@ -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(" ‏ ");
|
||||
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
42
web/js/digitalclock.js
Normal 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);
|
||||
});
|
||||
};
|
@ -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
86
web/js/timeofdayclock.js
Normal 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);
|
||||
});
|
||||
};
|
Loading…
Reference in New Issue
Block a user