zM render process

// zursor master render functions
// updated feb 25, 2020

zM.dependenciesLoaded |= 0b001000;
let ctx;

zM.reqLoad = function() {
    zM.r = {
        fps: 0,
        hudText: function(text, x, y, subLength = 0, color = '#fff') {
            ctx.font = '12px "Nova Flat"';
            ctx.globalAlpha = .5;
            ctx.lineWidth = 3;
            ctx.strokeStyle = '#000';
            ctx.strokeText(text, x-ctx.measureText(text).width*subLength, y);

            ctx.globalAlpha = 1;
            ctx.fillStyle = color;
            ctx.fillText(text, x-ctx.measureText(text).width*subLength, y);
        },
        infLvl: 5
    }
    ctx = zM.el.game.getContext('2d');
}

zM.reqDo = function() {
    ctx.clearRect(0, 0, 800, 600);

    if (isNaN(zM.fSel)) {
        ctx.font = '60px "Nova Flat"';
        ctx.fillStyle = '#000';
        var t = 'No fleet selected';
        ctx.fillText(t, 400 - ctx.measureText(t).width/2, 330);
    } else if (!zM.fleet[zM.fSel]) {
        ctx.font = '60px "Nova Flat"';
        ctx.fillStyle = '#000';
        var t = 'Undefined fleet selected';
        ctx.fillText(t, 400 - ctx.measureText(t).width/2, 330);
    } else if (!zM.fleet[zM.fSel].bots[zM.fleet[zM.fSel].cSel]) { // you can get this if the bot no longer exists (or an invalid bot selected state)
        ctx.font = '60px "Nova Flat"';
        ctx.fillStyle = '#000';
        var t = 'Lost connection to server';
        ctx.fillText(t, 400 - ctx.measureText(t).width/2, 330);
    } else {
        var b = zM.fleet[zM.fSel].bots[zM.fleet[zM.fSel].cSel];

        if (b.socket.readyState == WebSocket.CONNECTING) {
            ctx.font = '60px "Nova Flat"';
            ctx.fillStyle = '#000';
            var t = 'Connecting';
            ctx.fillText(t, 400 - ctx.measureText(t).width/2, 330);
        } else { // we don't need to handle closed states, the bot will be gone
            for (var i = 0; i < b.obj.length; ++i) {
                var o = b.obj[i];
                switch (o.type) {
                    case 0:
                        ctx.globalAlpha = 1;
                        ctx.font = o.size + 'px "Nova Flat"';
                        ctx.fillStyle = '#000';
                        var x = o.x*2;
                        if (o.isCentered) x -= ctx.measureText(o.content).width/2;
                        ctx.fillText(o.content, x, o.y*2);
                        break;
                    case 1:
                        ctx.globalAlpha = 1;
                        ctx.fillStyle = o.color;
                        ctx.fillRect(o.x*2, o.y*2, o.w*2, o.h*2);
                        ctx.globalAlpha = .2;
                        ctx.strokeStyle = '#000';
                        ctx.lineWidth = 1;
                        ctx.strokeRect(o.x*2+1, o.y*2+1, o.w*2-2, o.h*2-2);
                        break;
                    case 2:
                        ctx.globalAlpha = .2;
                        ctx.fillStyle = o.isBad?'#f00':'#0f0';
                        ctx.fillRect(o.x*2, o.y*2, o.w*2, o.h*2);
                        break;
                    case 3:
                        ctx.globalAlpha = .2;
                        ctx.fillStyle = o.color;
                        ctx.fillRect(o.x*2, o.y*2, o.w*2, o.h*2);
                        ctx.font = '24px "Nova Flat"';
                        ctx.fillStyle = '#000';
                        ctx.globalAlpha = .5;
                        ctx.fillText(o.count, o.x*2 + o.w - ctx.measureText(o.count).width/2, o.y*2+o.h+9);
                        break;
                    case 4:
                        ctx.globalAlpha = 1;
                        ctx.fillStyle = o.color;
                        ctx.fillRect(o.x*2, o.y*2, o.w*2, o.h*2);

                        ctx.globalAlpha = .2;
                        ctx.fillStyle = '#000';
                        ctx.fillRect(o.x*2, o.y*2, o.w*2, o.h*2);

                        ctx.globalAlpha = 1;
                        ctx.fillStyle = o.color;
                        ctx.fillRect(o.x*2+8, o.y*2+8, o.w*2-16, o.h*2-16);

                        var l = Date.now() - o.lastClickAt > 150 ? 8 : 16;

                        ctx.globalAlpha = .2;
                        ctx.lineWidth = 1;
                        ctx.strokeStyle = '#000';
                        ctx.beginPath(),

                        ctx.moveTo(o.x*2+1, o.y*2+1),
                        ctx.lineTo(o.x*2+o.w*2-2, o.y*2+1),
                        ctx.lineTo(o.x*2+o.w*2-2, o.y*2+o.h*2-2),
                        ctx.lineTo(o.x*2+1, o.y*2+o.h*2-2),
                        ctx.lineTo(o.x*2+1, o.y*2+1);

                        ctx.lineTo(o.x*2+1+l, o.y*2+1+l);

                        ctx.moveTo(o.x*2+o.w*2-2, o.y*2+1),
                        ctx.lineTo(o.x*2+o.w*2-2-l, o.y*2+1+l);

                        ctx.moveTo(o.x*2+o.w*2-2, o.y*2+o.h*2-2);
                        ctx.lineTo(o.x*2+o.w*2-2-l, o.y*2+o.h*2-2-l);

                        ctx.moveTo(o.x*2+1, o.y*2+o.h*2-2),
                        ctx.lineTo(o.x*2+1+l, o.y*2+o.h*2-2-l);

                        ctx.moveTo(o.x*2+l, o.y*2+l),
                        ctx.lineTo(o.x*2+o.w*2-l, o.y*2+l),
                        ctx.lineTo(o.x*2+o.w*2-l, o.y*2+o.h*2-l),
                        ctx.lineTo(o.x*2+l, o.y*2+o.h*2-l),
                        ctx.lineTo(o.x*2+l, o.y*2+l);

                        ctx.stroke();

                        ctx.fillStyle = '#000';
                        ctx.globalAlpha = .5;
                        ctx.font = '24px "Nova Flat"';
                        ctx.fillText(o.count, o.x*2 + o.w - ctx.measureText(o.count).width/2, o.y*2+o.h+9);
                }
            }

            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1.5;
            for (var i = 0; i < b.clicks.length; ++i) {
                if (typeof b.clicks[i] === 'object') {
                    if (Date.now() - b.clicks[i].time > 500) b.clicks.splice(i--, 1);
                    else {
                        ctx.beginPath(),
                        ctx.globalAlpha = .5 - (Date.now() - b.clicks[i].time)/1000;
                        var radius = (Date.now() - b.clicks[i].time)/20;
                        if (radius < 0.1) radius = 0.1 // Anti-crash failsafe
                        ctx.arc(b.clicks[i].x*2, b.clicks[i].y*2, radius, 0, 2*Math.PI);
                        ctx.stroke();
                    }
                }
            }

            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            ctx.globalAlpha = .3;
            for (var i = 0; i < b.drawings.length; ++i) {
                if (typeof b.drawings[i] === 'object') {
                    if (Date.now() - b.drawings[i].time > 10000) b.drawings.splice(i--, 1);
                    else {
                        ctx.beginPath(),
                        ctx.moveTo(b.drawings[i].x*2, b.drawings[i].y*2);
                        ctx.lineTo(b.drawings[i].x2*2, b.drawings[i].y2*2);
                        ctx.stroke();
                    }
                }
            }

            ctx.globalAlpha = 1;
            ctx.font = '12px "Nova Flat"';
            for (var i = 0; i < b.players.length; ++i) {
                var img;
                if (zM.fleet[zM.fSel].ids.indexOf(b.players[i].id) != -1) {
                    for (var j = 0; i < zM.fleet[zM.fSel].bots.length; ++j) {
                        if (zM.fleet[zM.fSel].bots[j]) if (zM.fleet[zM.fSel].bots[j].id == b.players[i].id) break;
                    }
                    if (j < zM.fleet[zM.fSel].bots.length) {
                        if (zM.fleet[zM.fSel].bots[j].helping || zM.fleet[zM.fSel].bots[j].deployed) img = zMIMG.movement.img;
                        else img = zMIMG.local.img;
                    } else img = zMIMG.local.img;
                } else img = zMIMG.cursor.img;
                var x = zM.ease(b.players[i].x, b.players[i].ox, b.players[i].lastUpdate)*2;
                var y = zM.ease(b.players[i].y, b.players[i].oy, b.players[i].lastUpdate)*2;
                ctx.drawImage(img, x-4, y-5);
                x += 5;
                y-= 2;
                if (x + ctx.measureText(`${b.players[i].id}`).width > 790) x = 790 - ctx.measureText(`${b.players[i].id}`).width;
                if (y - 12 < 10) y = 22;
                zM.r.hudText(`${b.players[i].id}`, x, y);
            }

            switch (zM.r.infLvl) {
                case 5:
                    zM.r.hudText(`Received (tp/ps) ${b.packets.receivedTotal} / ${b.packets.receivedPS}`, 790, 22, 1);
                    zM.r.hudText(`Sent (tp/ps) ${b.packets.sentTotal} / ${b.packets.sentPS}`, 790, 36, 1);
                case 4:
                case 3:
                case 2:
                    zM.r.hudText(`Level ${b.level}`, 10, 36);
                case 1:
                    zM.r.hudText(
                        b.local < 30 ? 'Use shift+click to draw ('+b.local+' > 0)' :
                        b.local < 100 ? 'Too many cursors, drawing is disabled ('+b.local+' > 30)' :
                        b.local < 1010 ? 'Too many cursors, not all cursors are shown ('+b.local+' > 100)' :
                        'Use shift+click to draw ('+b.local+' > 1010)'
                    , 10, 590);

                    zM.r.hudText(`${b.online} players online`, 790, 590, 1);
                case 0:
            }
        }
    }

    if (zM.r.infLvl >= 2) zM.r.hudText('FPS ' + zM.r.fps,10,22);

    ctx.fillStyle = zM.movement?'#ff0':'#f00';
    ctx.globalAlpha = 0.3;
    ctx.beginPath();
    ctx.moveTo(zM.pos.mouseX+3, zM.pos.mouseY+6);
    ctx.arc(zM.pos.mouseX+3, zM.pos.mouseY+6, 20, 0, 2*Math.PI);
    ctx.fill();

    ctx.globalAlpha = 1;
    ctx.drawImage(zMIMG.cursor.img, zM.pos.mouseX-4, zM.pos.mouseY-5);


    zM.reqAfter();
}

zM.reqAfter = function() {
    ++zM.r.fps;
    requestAnimationFrame(zM.reqDo);
    setTimeout(()=>{--zM.r.fps},1000);
}