DDTank mini map ruler

ddt-mini-ruler.js

var s = document.createElement("link");
s.rel = "stylesheet";
s.type = 'text/css';
s.href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css";
$("head").append(s);

$.getScript('//code.jquery.com/ui/1.12.1/jquery-ui.js', () => {

var lines = [];
for(let i = 0; i <= 20; i++){
    lines.push(`<div style="
        width: ${i % 10 === 0 ? "2px" : "1px"};
        background: #F00;
        height:  ${i % 5 === 0 ? "10px" : "5px"};
        box-sizing: border-box;
    " title="${i}"></div>`);
}
var tool = document.createElement('div');
tool.innerHTML = `
<div id="resizable" style="
    width: 200px;
    position: absolute;
    right: 100px;
    bottom: 5px;
">
<div id="ruler" style="
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    height: 10px;
    width: 100%; flex-direction: row;
    box-sizing: border-box;
    border-bottom: 1px solid #F00;
    "
>
${lines.join('')}
</div>
</div>
<div id="handle" style="width: 20px; height: 20px; background: #F00; border-radius: 100%; cursor: move"></div>`;
tool.id = "draggable";
tool.style.height = "20px";
tool.style.width = "20px";
tool.style.position = "fixed";
tool.style.transition = "none";
tool.style.top = "200px";
tool.style.left = "200px";
tool.style.zIndex = "99999";
document.body.appendChild(tool);

let color = 0;

$("#draggable").draggable({
    handle: "#handle",
});
$("#resizable").resizable({
    handles: "e, w"
});
$("#handle").on('dblclick', () => {
    color = (color + 1) % 4;
    if(color === 0){
        $("#ruler").css({borderBottomColor: "red"});
        $("#ruler > div").css({background: "red"});
    }else if(color === 1){
        $("#ruler").css({borderBottomColor: "blue"});
        $("#ruler > div").css({background: "blue"});
    }else if(color === 2){
        $("#ruler").css({borderBottomColor: "white"});
        $("#ruler > div").css({background: "white"});
    }else if(color === 3){
        $("#ruler").css({borderBottomColor: "black"});
        $("#ruler > div").css({background: "black"});
    }
})
    

});

1. Right click on DDTank Logo
2. Inspect Element
3. When developer tools appeared, click console tab
4. Paste the code
5. Press enter

1. Resize on sides of the ruler
2. Drag the red circle to move (Slowly drag because its buggy)
3. Double click circle to change color

Preview:

Practice how to use it in firing range
This is not Aim-bot, just a ruler :)