CaptainGalaxy / MineThings - Vehicles Map

// ==UserScript==
// @name         MineThings - Vehicles Map
// @namespace    http://calbuco.minethings.com/miners/profile/tested123
// @version      0.1
// @description  Displays your current moving vehicles on the server map
// @author       tested123@minethings.com
// @match        http://fogo.minethings.com/vehicles
// @grant        none
// ==/UserScript==

// Globals
var prefix = "t123-";
var mapLink = document.getElementsByClassName("lightview");
var $VehiclesDiv = document.getElementById("VehiclesTable"); // Get the main Vehicles element
var $VehiclesTable = $VehiclesDiv.getElementsByTagName("table"); // Get the generated table of owned vehicles
var $VehicleRows = $VehiclesDiv.getElementsByTagName("tr"); // Get all table rows
var traveling = [];
var pathName;
var nameColumn; var rankIcon; var rankColor; var rankAchor;
// Get and store all the available traveling vehicle info
for (i=1;i<$VehicleRows.length;i++) {
    pathName = $VehicleRows[i].cells[2].innerHTML;
    if (pathName.indexOf("-") > 0) {
        pathName = pathName.replace(/\s+/g, '');
        nameColumn = $VehicleRows[i].cells[0];
        if (nameColumn !== null)
            rankAchor = $VehicleRows[i].cells[0].firstChild;
        else rankAchor = null;
        if (rankAchor !== null)
            rankIcon = rankAchor.firstChild;
        else rankIcon = null;
        rankColor = "#000000";
        if (rankIcon !== null) {
            if (rankIcon.src.indexOf("R6") > 0) { rankColor = "#e0df08"; }
            else if (rankIcon.src.indexOf("R5") > 0) { rankColor = "#9dd713"; }
            else if (rankIcon.src.indexOf("R4") > 0) { rankColor = "#92b5b5"; }
            else if (rankIcon.src.indexOf("R3") > 0) { rankColor = "#ee6a6a"; }
            else if (rankIcon.src.indexOf("R2") > 0) { rankColor = "#a64891"; }
            else if (rankIcon.src.indexOf("R1") > 0) { rankColor = "#f79720"; }
        }
        var classColor = "#000000";
        switch($VehicleRows[i].cells[1].firstChild.className) {
            case "yellow": classColor = "yellow"; break; // "#cfb317"; break;
            case "green": classColor = "#678917"; break;
            case "blue": classColor = "#789b9b"; break;
            case "red": classColor = "#e31e1e"; break;
            case "purple": classColor = "#a64891"; break;
            case "orange": classColor = "#f79720"; break;
        }
        distanceRemaining = $VehicleRows[i].cells[3].innerHTML;
        id = $VehicleRows[i].cells[4].firstChild.href.split("/")[5];
        speed = $VehicleRows[i].cells[4].firstChild.innerHTML.split("/")[3];
        status = $VehicleRows[i].cells[5].innerHTML;
        traveling.push({"id":id,"pathName":pathName,"distanceRemaining":distanceRemaining,"speed":speed,"classColor":classColor,"rankColor":rankColor,"status":status});
        // Add classname to rows for kicks
        $VehicleRows[i].className=prefix+pathName;
    } else {}
}
// Methods
function createCircle(svg,pathId,route,plotPoint,name,vehicle) {
    var myCircle = document.createElementNS(svg.namespaceURI,"circle");
    myCircle.setAttributeNS(null,"id",name);
    myCircle.setAttributeNS(null,"cx",plotPoint.x);
    myCircle.setAttributeNS(null,"cy",plotPoint.y);
    myCircle.setAttributeNS(null,"r",2);
    myCircle.setAttributeNS(null,"fill","black");
    myCircle.setAttributeNS(null,"stroke-width",0);
    myCircle.setAttributeNS(null,"stroke",vehicle.rankColor);
    return myCircle;
}
function createVehicle(svg,pathId,route,vehicle) {
    var name = prefix+vehicle.id;
    var path = svg.querySelector("#"+prefix+route.name);
    var pathLength = path.getTotalLength();
    var distanceTraveled;
    if (vehicle.direction) {
        distanceTraveled = route.distance - vehicle.distanceRemaining;
    } else {
        if (route.distance-vehicle.distanceRemaining < 15) 
            distanceTraveled = route.distance-15;
        else 
            distanceTraveled = vehicle.distanceRemaining;
    }
    var distancePercentage = distanceTraveled/route.distance;
    var plotLength = pathLength*distancePercentage;
    var bow = path.getPointAtLength(plotLength);
    var pointAtLengthBack;
    var stern;
    if (vehicle.direction) {
        pointAtLengthBack = path.getPointAtLength(plotLength-10);
        stern = path.getPointAtLength(plotLength-15);
    } else {
        pointAtLengthBack = path.getPointAtLength(plotLength+10);
        stern = path.getPointAtLength(plotLength+15);
    }

    var myPolygon = document.createElementNS(svg.namespaceURI,"polygon");
    var sternStarboardX = pointAtLengthBack.x + (bow.y - pointAtLengthBack.y)/Math.sqrt(3);
    var sternStarboardY = pointAtLengthBack.y + (pointAtLengthBack.x - bow.x)/Math.sqrt(3);
    var sternPortX = pointAtLengthBack.x + (pointAtLengthBack.y - bow.y)/Math.sqrt(3);
    var sternPortY = pointAtLengthBack.y + (bow.x - pointAtLengthBack.x)/Math.sqrt(3);   
    
    myPolygon.setAttributeNS(null,"points",bow.x +","+ bow.y +" "+ sternPortX +","+ sternPortY +" "+ stern.x +","+ stern.y +" "+ sternStarboardX +","+ sternStarboardY);
    myPolygon.setAttributeNS(null,"id",name);
    myPolygon.setAttributeNS(null,"fill",vehicle.classColor);
    myPolygon.setAttributeNS(null,"stroke-width",2);
    myPolygon.setAttributeNS(null,"stroke",vehicle.rankColor);
    svg.appendChild(myPolygon);
    if(vehicle.status.indexOf("engaged") > 0) { 
        svg.appendChild(createCircle(svg,pathId,route,pointAtLengthBack,name+"Eng",vehicle));
    }
}
function createPath(svgNS,pathName,pathDescription) {
    var path= document.createElementNS(svgNS,'path');
    path.setAttribute("id", pathName);  
    path.setAttribute("d", pathDescription);  
    path.setAttribute("stroke", "black");  
    path.setAttribute("stroke-width", 0);  
    path.setAttribute("opacity", 1);  
    path.setAttribute("fill", "none");
    return path;
}
function createSVG(executionCount) {
    var mapIFrame = document.getElementById("lightviewContent");
    if (mapIFrame!=null) {
        var paths = [
            {"name":"Bywater-Quarry","description":"M 456.00,60.00 " +
             "C 456.00,60.00 466.00,68.67 439.33,139.33 " +
             "440.67,151.33 460.67,159.33 460.67,159.33 " +
             "460.67,159.33 486.67,208.00 473.33,250.67",
             "distance":250},
            {"name":"Bywater-Pincup","description":"M 456.00,58.00 " + 
             "C 456.00,58.00 594.00,116.00 617.00,210.00 " +
             "692.00,254.00 705.00,376.00 705.00,376.00",
             "distance":450},
            {"name":"Bywater-Gamwich","description":"M 457.00,60.00 " +
             "C 457.00,60.00 615.00,64.00 621.00,54.00 " +
             "627.00,44.00 686.00,32.00 736.00,100.00",
             "distance":300},
            {"name":"Quarry-Pincup","description":"M 477.00,257.00 " + 
             "C 477.00,257.00 605.00,219.00 621.00,310.00 " + 
             "634.00,381.00 706.00,376.00 706.00,376.00",
             "distance":300},
            {"name":"Gamwich-Pincup","description":"M 741.00,102.00 " + 
             "C 741.00,102.00 771.00,118.00 747.00,188.00 " + 
             "747.00,267.00 826.00,245.00 707.00,380.00",
             "distance":325},
            {"name":"Quarry-Dwaling","description":"M 476.00,258.00 " +
             "C 476.00,258.00 482.00,290.00 520.00,300.00 " + 
             "547.00,335.00 523.00,375.00 515.00,387.00 " +
             "507.00,399.00 502.00,448.00 502.00,448.00 " +
             "502.00,448.00 507.00,461.00 465.00,492.00",
             "distance":300},
            {"name":"Dwaling-Pincup","description":"M 463.00,496.00 " + 
             "C 463.00,496.00 513.00,482.00 635.00,476.00 " +
             "702.00,453.00 651.00,417.00 706.00,381.00",
             "distance":325}

        ];
        var svg  = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute("id", prefix+"_mapSVG");
        svg.setAttribute('width',832);
        svg.setAttribute('height',617);
        svg.setAttribute('style','position:absolute;');
        svg.setAttribute('viewBox','0 0 816 600');
        var svgNS = svg.namespaceURI;
        var path;
        for (var i=0 ; i<paths.length ; i++) {
            path = createPath(svgNS,prefix+paths[i].name,paths[i].description);
            svg.appendChild(path);
        }
        var vehicle, route;
        for(var i=0 ; i<traveling.length ; i++) {
            switch(traveling[i].pathName) {
                case "Quarry-Bywater": 
                    vehicle = traveling[i];
                    vehicle.direction=false;
                    route = paths[0];
                    // sending svg, svgPathID, route, and vehicle from traveling array
                    createVehicle(svg,"#t123-Bywater-Quarry",route,vehicle);
                    break;
                case "Bywater-Quarry": 
                    vehicle = traveling[i];
                    vehicle.direction=true;
                    route = paths[0];
                    createVehicle(svg,"#t123-Bywater-Quarry",route,vehicle);
                   break;
                 case "Bywater-Pincup": 
                    vehicle = traveling[i];
                    vehicle.direction=true;
                    route = paths[1];
                    createVehicle(svg,"#t123-Bywater-Pincup",route,vehicle);
                    break;
                case "Pincup-Bywater": 
                    vehicle = traveling[i];
                    vehicle.direction=false;
                    route = paths[1];
                    createVehicle(svg,"#t123-Bywater-Pincup",route,vehicle);
                    break;
                 case "Bywater-Gamwich": 
                    vehicle = traveling[i];
                    vehicle.direction=true;
                    route = paths[2];
                    createVehicle(svg,"#t123-Bywater-Gamwich",route,vehicle);
                    break;
                case "Gamwich-Bywater": 
                    vehicle = traveling[i];
                    vehicle.direction=false;
                    route = paths[2];
                    createVehicle(svg,"#t123-Bywater-Gamwich",route,vehicle);
                    break;
                case "Quarry-Pincup": 
                    vehicle = traveling[i];
                    vehicle.direction=true;
                    route = paths[3];
                    createVehicle(svg,"#t123-Quarry-Pincup",route,vehicle);
                     break;
                case "Pincup-Quarry": 
                    vehicle = traveling[i];
                    vehicle.direction=false;
                    route = paths[3];
                    createVehicle(svg,"#t123-Quarry-Pincup",route,vehicle);
                    break;
                case "Pincup-Gamwich": 
                    vehicle = traveling[i];
                    vehicle.direction=false;
                    route = paths[4];
                    createVehicle(svg,"#t123-Gamwich-Pincup",route,vehicle);
                    break;
                case "Gamwich-Pincup": 
                    vehicle = traveling[i];
                    vehicle.direction=true;
                    route = paths[4];
                    createVehicle(svg,"#t123-Gamwich-Pincup",route,vehicle);
                    break;
                 case "Quarry-Dwaling": 
                    vehicle = traveling[i];
                    vehicle.direction=true;
                    route = paths[5];
                    createVehicle(svg,"#t123-Quarry-Dwaling",route,vehicle);
                    break;
                case "Dwaling-Quarry": 
                    vehicle = traveling[i];
                    vehicle.direction=false;
                    route = paths[5];
                    createVehicle(svg,"#t123-Quarry-Dwaling",route,vehicle);
                    break;
                 case "Dwaling-Pincup": 
                    vehicle = traveling[i];
                    vehicle.direction=true;
                    route = paths[6];
                    createVehicle(svg,"#t123-Dwaling-Pincup",route,vehicle);
                    break;
                case "Pincup-Dwaling": 
                    vehicle = traveling[i];
                    vehicle.direction=false;
                    route = paths[6];
                    createVehicle(svg,"#t123-Dwaling-Pincup",route,vehicle);
                    break;
            }
        }
        mapIFrame.parentNode.insertBefore(svg,mapIFrame);
    } else if (executionCount > 10) {
        // Do nothing after 10 attempts, no sense in trying and wasting memory.
    } else {
        setTimeout(function() { 
            createSVG(executionCount+1)
        }, 1000);  // Map hasn't loaded, try again in 1 second
    }
}
// Events
mapLink[0].onclick=function(){
        createSVG(1);
};