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"});
    }
})
    

});