Abstracted clock and tile-updating a bit.

This commit is contained in:
FrozenCow 2011-01-12 01:28:45 +01:00
parent 8263918b8d
commit 27fb8a20f1
5 changed files with 176 additions and 155 deletions

View File

@ -21,6 +21,7 @@
</head> </head>
<body> <body>
<div id="mcmap"></div> <div id="mcmap"></div>
<div id="alert">Updating...</div>
<div id="plist"> <div id="plist">
<img id="plistbtn" alt="on" src="list_on.png" onclick="plistopen()" title="Toggle Player List" /> <img id="plistbtn" alt="on" src="list_on.png" onclick="plistopen()" title="Toggle Player List" />
<div id="maplist"></div> <div id="maplist"></div>

View File

@ -26,8 +26,10 @@ KzedProjection.prototype = {
} }
}; };
KzedMapType.prototype = new DynMapType();
function KzedMapType() {} function KzedMapType() {}
KzedMapType.prototype = { KzedMapType.prototype = {
constructor: KzedMapType,
projection: new KzedProjection(), projection: new KzedProjection(),
tileSize: new google.maps.Size(128, 128), tileSize: new google.maps.Size(128, 128),
minZoom: 0, minZoom: 0,
@ -96,7 +98,7 @@ KzedMapType.prototype = {
} }
if (tileName) { if (tileName) {
img = $('<img/>') img = $('<img/>')
.attr('src', tileUrl(tileName)) .attr('src', getTileUrl(tileName))
.error(function() { img.hide(); }) .error(function() { img.hide(); })
.css({ .css({
width: imgSize + 'px', width: imgSize + 'px',
@ -106,9 +108,9 @@ KzedMapType.prototype = {
marginTop: offset.y + 'px' marginTop: offset.y + 'px'
}) })
.appendTo(tile); .appendTo(tile);
tileDict[tileName] = img; registerTile(this, tileName, img);
} else { } else {
delete tileDict[tileName]; unregisterTile(this, tileName);
} }
return tile.get(0); return tile.get(0);
}, },

View File

@ -1,63 +1,59 @@
if (!console) console = { log: function() {} }; if (!console) console = { log: function() {} };
/* generic function for making an XMLHttpRequest function DynMapType() { }
* url: request URL DynMapType.prototype = {
* func: callback function for success onTileUpdated: function(tile, tileName) {
* type: 'text' by default (callback is called with response text) var src = getTileUrl(tileName);
* otherwise, callback is called with a parsed XML dom tile.attr('src', src);
* fail: callback function for failure tile.show();
* post: if given, make a POST request instead of GET; post data given }
* };
* contenttype: if given for a POST, set request content-type header
*/
function makeRequest(url, func, type, fail, post, contenttype)
{
var http_request = false;
type = typeof(type) != 'undefined' ? type : 'text'; function MinecraftClock(element) { this.element = element; }
fail = typeof(fail) != 'undefined' ? fail : function() { }; MinecraftClock.prototype = {
element: null,
timeout: null,
time: null,
create: function(element) {
if (!element) element = $('<div/>');
this.element = element;
return element;
},
setTime: function(time) {
if (this.timeout != null) {
window.clearTimeout(this.timeout);
this.timeout = null;
}
this.time = time;
this.element
.addClass(time.day ? 'day' : 'night')
.removeClass(time.night ? 'day' : 'night')
.text(this.formatTime(time));
if(window.XMLHttpRequest) { if (this.timeout == null) {
http_request = new XMLHttpRequest(); var me = this;
} else if(window.ActiveXObject) { this.timeout = window.setTimeout(function() {
http_request = new ActiveXObject("Microsoft.XMLHTTP"); me.timeout = null;
me.setTime(getMinecraftTime(me.time.servertime+(1000/60)));
}, 700 /* should be 600, but since server-resyncing it looks better with 700 */);
} }
},
if(type == 'text') { formatTime: function(time) {
http_request.onreadystatechange = function() { var formatDigits = function(n, digits) {
if(http_request.readyState == 4) { var s = n.toString();
if(http_request.status == 200) { while (s.length < digits) {
func(http_request.responseText); s = '0' + s;
} else {
fail(http_request);
} }
return s;
} }
return formatDigits(time.hours, 2) + ':' + formatDigits(time.minutes, 2);
} }
} else { };
http_request.onreadystatechange = function() {
if(http_request.readyState == 4) {
if(http_request.status == 200) { func(http_request.responseXML); } else {
fail(http_request);
}
}
}
}
if(typeof(post) != 'undefined') {
http_request.open('POST', url, true);
if(typeof(contenttype) != 'undefined')
http_request.setRequestHeader("Content-Type", contenttype);
http_request.send(post);
} else {
http_request.open('GET', url, true);
http_request.send(null);
}
}
var tileDict = new Array(); var tileDict = new Array();
var lastSeen = new Array(); var lastSeen = new Array();
function tileUrl(tile, always) { function getTileUrl(tile, always) {
if(always) { if(always) {
var now = new Date(); var now = new Date();
return config.tileUrl + tile + '.png?' + now.getTime(); return config.tileUrl + tile + '.png?' + now.getTime();
@ -68,21 +64,27 @@ function makeRequest(url, func, type, fail, post, contenttype)
} }
} }
function onTileUpdated(tileName, f) { function registerTile(mapType, tileName, tile) {
tileDict[tileName] = {
tileElement: tile,
mapType: mapType
};
} }
function imgSubst(tileName) { function unregisterTile(mapType, tileName) {
if(!(tileName in tileDict)) delete tileDict[tileName];
return;
var src = tileUrl(tileName);
var t = tileDict[tileName];
t.attr('src', src);
t.show();
} }
function onTileUpdated(tileName) {
lastSeen[tileName] = lasttimestamp;
var tile = tileDict[tileName];
if (tile) {
tile.mapType.onTileUpdated(tile.tileElement, tileName);
}
}
var clock = null;
var markers = new Array(); var markers = new Array();
var lasttimestamp = '0'; var lasttimestamp = '0';
var followPlayer = ''; var followPlayer = '';
@ -90,8 +92,6 @@ function makeRequest(url, func, type, fail, post, contenttype)
var lst; var lst;
var plistbtn; var plistbtn;
var lstopen = true; var lstopen = true;
var oldplayerlst = '[Connecting]';
var servertime = 0;
function updateMarker(mi) { function updateMarker(mi) {
if(mi.id in markers) { if(mi.id in markers) {
@ -173,7 +173,11 @@ function makeRequest(url, func, type, fail, post, contenttype)
function mapUpdate() function mapUpdate()
{ {
makeRequest(config.updateUrl + lasttimestamp, function(res) { $.ajax({
url: config.updateUrl + lasttimestamp,
success: function(res) {
$('#alert')
.hide();
var typeVisibleMap = { var typeVisibleMap = {
'warp': document.getElementById('showWarps').checked, 'warp': document.getElementById('showWarps').checked,
'sign': document.getElementById('showSigns').checked, 'sign': document.getElementById('showSigns').checked,
@ -187,18 +191,18 @@ function makeRequest(url, func, type, fail, post, contenttype)
var loggedin = new Array(); var loggedin = new Array();
var firstRow = rows[0].split(' '); var firstRow = rows[0].split(' ');
lasttimestamp = firstRow[0]; lasttimestamp = firstRow[0];
servertime = firstRow[1];
delete rows[0]; delete rows[0];
var servertime = firstRow[1];
clock.setTime(getMinecraftTime(servertime));
for(var line in rows) { for(var line in rows) {
var p = rows[line].split(' '); var p = rows[line].split(' ');
if (p[0] == '') continue; if (p[0] == '') continue;
({ tile: function() { ({ tile: function() {
var tileName = p[1]; onTileUpdated(p[1]);
lastSeen[tileName] = lasttimestamp;
imgSubst(tileName);
} }
}[p[0]] || function() { }[p[0]] || function() {
var mi = { var mi = {
@ -216,19 +220,6 @@ function makeRequest(url, func, type, fail, post, contenttype)
})(); })();
} }
var time = {
// Assuming it is day at 8:00
hours: (parseInt(servertime / 1000)+8) % 24,
minutes: parseInt(((servertime / 1000) % 1) * 60),
seconds: parseInt(((((servertime / 1000) % 1) * 60) % 1) * 60)
};
$('#clock')
.addClass(servertime > 12000 ? 'night' : 'day')
.removeClass(servertime > 12000 ? 'day' : 'night')
.text(formatTime(time));
for(var m in markers) { for(var m in markers) {
if(!(m in loggedin)) { if(!(m in loggedin)) {
markers[m].remove(null); markers[m].remove(null);
@ -243,20 +234,14 @@ function makeRequest(url, func, type, fail, post, contenttype)
document.getElementById('signsDiv').style.display = (typeCount['signs'] == 0)?'none':''; document.getElementById('signsDiv').style.display = (typeCount['signs'] == 0)?'none':'';
document.getElementById('homesDiv').style.display = (typeCount['homes'] == 0)?'none':''; document.getElementById('homesDiv').style.display = (typeCount['homes'] == 0)?'none':'';
document.getElementById('spawnsDiv').style.display = (typeCount['spawns'] == 0)?'none':''; document.getElementById('spawnsDiv').style.display = (typeCount['spawns'] == 0)?'none':'';
}, 'text', function() { alert('failed to get update data'); } ); },
error: function(request, statusText, ex) {
$('#alert')
.text('Could not update map')
.show();
setTimeout(mapUpdate, config.updateRate);
} }
});
function formatTime(time) {
//return formatDigits(time.hours, 2) + ':' + formatDigits(time.minutes, 2) + ':' + formatDigits(time.seconds, 2);
return formatDigits(time.hours, 2) + ':' + formatDigits(time.minutes, 2);
}
function formatDigits(n, digits) {
var s = n.toString();
while (s.length < digits) {
s = '0' + s;
}
return s;
} }
window.onload = function initialize() { window.onload = function initialize() {
@ -317,6 +302,8 @@ function makeRequest(url, func, type, fail, post, contenttype)
map.setMapTypeId(config.defaultMap); map.setMapTypeId(config.defaultMap);
clock = new MinecraftClock($('#clock'));
setTimeout(mapUpdate, config.updateRate); setTimeout(mapUpdate, config.updateRate);
} }

View File

@ -68,3 +68,19 @@ function getMinecraftHead(player,size,completed) {
completed(resizeImage(head,size)); completed(resizeImage(head,size));
} }
} }
function getMinecraftTime(servertime) {
servertime = parseInt(servertime);
return {
servertime: servertime,
days: parseInt((servertime+8000) / 24000),
// Assuming it is day at 8:00
hours: (parseInt(servertime / 1000)+8) % 24,
minutes: parseInt(((servertime / 1000) % 1) * 60),
seconds: parseInt(((((servertime / 1000) % 1) * 60) % 1) * 60),
day: servertime > 12000,
night: servertime <= 12000
};
}

View File

@ -87,6 +87,21 @@ a, a:visited, label {
#clock.night { background-image: url(clock_night.png); } #clock.night { background-image: url(clock_night.png); }
#clock.day { background-image: url(clock_day.png); } #clock.day { background-image: url(clock_day.png); }
#alert {
padding: 5px;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
width: 25em;
text-align: center;
font: 14px/16px sans-serif;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
background-color: InfoBackground;
border-radius: 0 0 3px 3px;
}
.playerIcon { .playerIcon {
} }