2017-10-03 19:17:35 -04:00
|
|
|
|
<div id="stats">
|
|
|
|
|
<div id="stats-info">
|
|
|
|
|
<input type="range" min="1" max="1000" value="100" class="slider" id="KillEventCount">
|
|
|
|
|
<label for="KillEventCount">Showing 100 Kills</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var killsList = [];
|
2017-10-04 19:01:04 -04:00
|
|
|
|
var refreshInterval = 250;
|
2017-10-03 19:17:35 -04:00
|
|
|
|
|
|
|
|
|
function drawCircle(context, x, y, color) {
|
|
|
|
|
context.beginPath();
|
|
|
|
|
context.arc(x, y, 3.5, 0, 2 * Math.PI, false);
|
|
|
|
|
context.fillStyle = color;
|
|
|
|
|
context.fill();
|
|
|
|
|
context.lineWidth = 0.5;
|
|
|
|
|
context.strokeStyle = 'rgba(255, 255, 255, 0.5)';
|
|
|
|
|
context.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawLine(context, x1, y1, x2, y2, color) {
|
|
|
|
|
context.beginPath();
|
|
|
|
|
context.lineWidth = '1';
|
|
|
|
|
|
|
|
|
|
var grad = context.createLinearGradient(x1, y1, x2, y2);
|
|
|
|
|
grad.addColorStop(0, 'rgba(0, 255, 0, 0.75)');
|
|
|
|
|
grad.addColorStop(0.75, 'rgba(223, 66, 244, 0.8)');
|
|
|
|
|
context.strokeStyle = grad;
|
|
|
|
|
|
|
|
|
|
context.moveTo(x1, y1);
|
|
|
|
|
context.lineTo(x2, y2);
|
|
|
|
|
context.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clearCanvas(canvas) {
|
|
|
|
|
var context = canvas[0].getContext("2d");
|
|
|
|
|
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function checkCanvasSize(canvas, context, minimap, minimapInfo) {
|
|
|
|
|
var height = minimap.height() - minimapInfo.Top - minimapInfo.Bottom;
|
|
|
|
|
var width = minimap.width() - minimapInfo.Left - minimapInfo.Right;
|
|
|
|
|
|
|
|
|
|
if (context.canvas.height != height || context.canvas.width != width) {
|
|
|
|
|
context.canvas.height = height;
|
|
|
|
|
context.canvas.width = width;
|
|
|
|
|
|
|
|
|
|
canvas.css('position', 'absolute');
|
|
|
|
|
canvas.css('left', minimapInfo.Left + minimap.offset().left);
|
|
|
|
|
canvas.css('top', minimapInfo.Top + minimap.offset().top);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawKill(opacity, canvas, server, kill) {
|
|
|
|
|
var context = canvas[0].getContext("2d");
|
|
|
|
|
var minimapInfo = server.Minimap[0];
|
|
|
|
|
|
|
|
|
|
var calcX1 = (minimapInfo.MaxLeft - kill.KillOrigin.Y) / (minimapInfo.Width / canvas.width());
|
|
|
|
|
var calcY1 = (minimapInfo.MaxTop - kill.KillOrigin.X) / (minimapInfo.Height / canvas.height());
|
|
|
|
|
|
|
|
|
|
var calcX2 = (minimapInfo.MaxLeft - kill.DeathOrigin.Y) / (minimapInfo.Width / canvas.width());
|
|
|
|
|
var calcY2 = (minimapInfo.MaxTop - kill.DeathOrigin.X) / (minimapInfo.Height / canvas.height());
|
|
|
|
|
|
|
|
|
|
drawCircle(context, calcX1, calcY1, 'rgba(0, 122, 204, ' + opacity + ')');
|
|
|
|
|
drawLine(context, calcX1, calcY1, calcX2, calcY2, 'rgba(0, 255, 0, 0.1)');
|
|
|
|
|
drawCircle(context, calcX2, calcY2, 'rgba(255, 0, 0, ' + opacity + ')');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadKills() {
|
|
|
|
|
$.getJSON("/_killstats?count=" + $('#KillEventCount').val(), function (result) {
|
|
|
|
|
|
|
|
|
|
$.each(result.Servers, function (i, server) {
|
|
|
|
|
|
|
|
|
|
if (server.Minimap.length == 0) {
|
|
|
|
|
//console.log("missing minimap data for " + server.ServerName);
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ($('#minimap-overlay-' + i).length == 0) {
|
|
|
|
|
var html = '<div style="clear: both;"></div><div id="stats-container-' + i + '"><div class="stats-minimap-container" id="stats-minimap-' + i + '"><h2 class="datThing">' + server.ServerName + '</h2><img class="stats-minimap-image" src="/webfront/images/minimap_' + server.Minimap[0].MapName + '.png" /> </div>';
|
|
|
|
|
html += '<div class="stats-serverinfo"></div><canvas id="minimap-overlay-' + i + '"></canvas></div>';
|
|
|
|
|
$('#stats').append(html);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
server.MapKills = server.MapKills.reverse();
|
|
|
|
|
|
|
|
|
|
var newKills = [];
|
|
|
|
|
var oldKills = [];
|
|
|
|
|
if (killsList[i] != undefined) {
|
|
|
|
|
newKills = server.MapKills.filter(x => killsList[i].filter(x2 => x2.ID == x.ID).length == 0);
|
|
|
|
|
oldKills = server.MapKills.filter(x => newKills.findIndex(x2 => x2.ID == x.ID) === -1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
killsList[i] = server.MapKills;
|
|
|
|
|
|
|
|
|
|
var canvas = $('#minimap-overlay-' + i);
|
|
|
|
|
var minimap = $('#stats-minimap-' + i + ' img');
|
|
|
|
|
|
|
|
|
|
clearCanvas(canvas);
|
|
|
|
|
checkCanvasSize(canvas, canvas[0].getContext("2d"), minimap, server.Minimap[0]);
|
|
|
|
|
|
|
|
|
|
var furthestKill = 0;
|
2017-10-04 19:01:04 -04:00
|
|
|
|
|
2017-10-03 19:17:35 -04:00
|
|
|
|
$.each(newKills, function (i, kill) {
|
2017-10-04 19:01:04 -04:00
|
|
|
|
if (kill.Distance > furthestKill)
|
|
|
|
|
furthestKill = kill.Distance;
|
2017-10-03 19:17:35 -04:00
|
|
|
|
drawKill('1', canvas, server, kill);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$.each(oldKills, function (i, kill) {
|
|
|
|
|
if (kill.Distance > furthestKill)
|
|
|
|
|
furthestKill = kill.Distance;
|
|
|
|
|
drawKill('0.35', canvas, server, kill);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var html = '<span>' + server.ServerInfo.Uptime + ' of uptime</span><br/><span>Round started ' + server.ServerInfo.ElapsedRoundTime + '</span><br/>';
|
|
|
|
|
html += '<span>Furthest kill from ' + Math.round(furthestKill * 10) / 10 + ' meters</span><br/>';
|
2017-10-04 19:01:04 -04:00
|
|
|
|
if (newKills.length > 0) {
|
|
|
|
|
if (newKills[0].KillerPlayer != null)
|
|
|
|
|
html += '<span class="last-kill">' + newKills[0].KillerPlayer + ' killed ' + newKills[0].VictimPlayer + '</span><br/>';
|
|
|
|
|
else
|
|
|
|
|
html += `<span class="last-kill">Kill information pulled from database</span><br/>`;
|
|
|
|
|
}
|
2017-10-03 19:17:35 -04:00
|
|
|
|
else
|
|
|
|
|
html += '<span class="last-kill">' + $('#stats-container-' + i).find('.last-kill').text() + '</span><br/>';
|
|
|
|
|
$('#stats-container-' + i + ' .stats-serverinfo').html(html);
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
});
|
2017-10-04 19:01:04 -04:00
|
|
|
|
|
|
|
|
|
setTimeout(loadKills, refreshInterval)
|
2017-10-03 19:17:35 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
$('#KillEventCount').on('input change', function () {
|
|
|
|
|
$(this).next().text('Showing ' + $(this).val() + ' Kills');
|
2017-10-04 19:01:04 -04:00
|
|
|
|
if ($(this).val() > 300)
|
|
|
|
|
refreshInterval = 500;
|
|
|
|
|
else
|
|
|
|
|
refreshInterval = 250;
|
2017-10-03 19:17:35 -04:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
loadKills();
|
|
|
|
|
});
|
|
|
|
|
</script>
|