IW4M-Admin/Admin/webfront/stats.html

147 lines
6.0 KiB
HTML
Raw Normal View History

<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 = [];
var refreshInterval = 250;
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;
$.each(newKills, function (i, kill) {
if (kill.Distance > furthestKill)
furthestKill = kill.Distance;
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/>';
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/>`;
}
else
html += '<span class="last-kill">' + $('#stats-container-' + i).find('.last-kill').text() + '</span><br/>';
$('#stats-container-' + i + ' .stats-serverinfo').html(html);
});
});
setTimeout(loadKills, refreshInterval)
}
$(document).ready(function () {
$('#KillEventCount').on('input change', function () {
$(this).next().text('Showing ' + $(this).val() + ' Kills');
if ($(this).val() > 300)
refreshInterval = 500;
else
refreshInterval = 250;
});
loadKills();
});
</script>