show unit data in a bubble when selected. Press t to toggle

unitbubble.js

var ub_window_body = ub_window_body || window.body;
var ub_battlemode_onkeydown = ub_battlemode_onkeydown || battleMode.onkeydown;
var ub_enabled = false;

function ub_drawBubble() {
    let fmod = function(a,b) { return Number((a - (Math.floor(a / b) * b)).toPrecision(8)); };
    let wrapAngle = th => {
        let rst = fmod(th + Math.PI, 2 * Math.PI);
        return rst < 0 ? rst + Math.PI : rst - Math.PI;
    };

    if(ub_enabled && ui.mode === "battle" && commander.selection.length > 0) {
        onecup.div("#unit_bubble", () => {
            onecup.position("absolute");
            onecup.top(80);
            onecup.left(10);
            onecup.width(420);
            onecup.padding(15);
            onecup.font_size(14);
            onecup.color("white");
            onecup.background_color("rgba(30, 30, 30, 0.6)");
            onecup.border_radius(10);
            let statSum = {};
            let stat = (icon, unit, value, max = 0, opts = {hideZero: false, max: false, sum: true}) => {
                if(opts.hideZero && value === 0) return;
                if(!statSum[icon]) {
                    statSum[icon] = {
                        value: value,
                        max: max,
                        unit: unit,
                        count: 1
                    };
                } else {
                    if(opts.max) {
                        statSum[icon].value = Math.max(statSum[icon].value, value);
                        statSum[icon].max = Math.max(statSum[icon].max, max);
                    } else {
                        statSum[icon].value += value;
                        statSum[icon].max += max;
                    }
                    if(!opts.sum && !opts.max) statSum[icon].count++;
                }
            };

            let showStat = () => {
                for(let icon in statSum) {
                    let count = statSum[icon].count;
                    let value = statSum[icon].value / count;
                    let max = statSum[icon].max / count;
                    let unit = statSum[icon].unit;

                    onecup.div(() => {
                        onecup.font_size(13);
                        onecup.width(175);
                        onecup.float("left");
                        onecup.margin(10);
                        onecup.img({
                            src: "img/ui/" + icon,
                            height: 22
                        }, () => {
                            onecup.float("left");
                            onecup.margin_right(10);
                            onecup.margin_top(-2);
                        });
                        onecup.text(value.toFixed(1));
                        if(max > 0)
                            onecup.text(" / " + max.toFixed(1));
                        onecup.text(unit);
                    });
                }
            };
            onecup.div(() => {
                onecup.color("#DDD");

                let units = commander.selection;

                onecup.text("$" + units.reduce((a, b) => a + b.cost, 0));

                if(units.filter(u => u.spec.name === units[0].spec.name).length === units.length) {
                    onecup.span(() => {
                        onecup.float("right");
                        onecup.i(() => onecup.text(units[0].spec.name || "Unnamed"));
                    });
                }

                onecup.hr();

                let energy = 0, store = 0, gen = 0, weapon = 0, weaponRatio = 0, movement = 0, moveRatio = 0;
                for(let unit of units) {
                    stat("dps.png", "dps", unit.weaponDPS * 16);
                    stat("damage.png", "d", unit.weaponDamage);
                    stat("mass.png", "T", unit.mass);
                    stat("restart/battle.png", "dps·hp/$", unit.weaponDPS * 16 * unit.maxHP / unit.cost, {sum: false});
                    stat("range.png", "m", unit.weaponRange, 0, {max: true});
                    stat("arc.png", "°", unit.weaponArc, 0, {max: true});
                    stat("armor.png", "hp", unit.hp, unit.maxHP);
                    stat("energy.png", "e", unit.energy, unit.storeEnergy);
                    stat("speed.png", "m/s", v2.mag(unit.vel) * 16, unit.maxSpeed * 16, {sum: false});
                    stat("turnSpeed.png", "°/s", wrapAngle(unit.rot - unit._rot) * 180 / Math.PI * 16, unit.turnSpeed * 180 / Math.PI * 16, {sum: false});
                    stat("shield.png", "sh", unit.shield, unit.maxShield, {hideZero: true});
                    stat("burnDamage.png", "d", unit.burn, 0, {hideZero: true});
                    stat("jump.png", "m", unit.jumpDistance, 0, {hideZero: true, max: true});

                    energy += unit.energy;
                    store += unit.storeEnergy;
                    gen += unit.genEnergy;
                    weapon += unit.fireEnergy;
                    movement += unit.moveEnergy;
                    moveRatio += v2.mag(unit.vel) / unit.maxSpeed;
                    let wRatio = 0;
                    for(let weapon of unit.weapons) {
                        if(!weapon.working && unit.energy >= weapon.shotEnergy)
                            wRatio += weapon.fireEnergy;
                    }
                    weaponRatio += wRatio / unit.fireEnergy;
                }

                weaponRatio /= units.length;
                moveRatio /= units.length;

                gen *= 160;
                weapon *= 160 * weaponRatio;
                movement *= 160 * moveRatio;

                showStat();

                // Energy bar
                onecup.div(() => {
                    onecup.clear("left");
                    onecup.border("1px white solid");
                    onecup.width(Math.min(1 / ((weapon + movement) / store), 1) * 100 + "%");
                    onecup.height(20);
                    onecup.position("relative");

                    // Left
                    onecup.div(() => {
                        onecup.position("absolute");
                        onecup.border_left("1px white solid");
                        onecup.height(18);
                        onecup.background_color("#00bc66");
                        onecup.width(energy / store * 100 + "%");
                    });

                    // Regen
                    onecup.div(() => {
                        onecup.position("absolute");
                        onecup.border_left("1px white solid");
                        onecup.border_right("1px white solid");
                        onecup.height(18);
                        onecup.background_color("#9bbce2");
                        onecup.left(energy / store * 100 + "%");
                        onecup.width(Math.min(gen / store, 1 - energy / store) * 100 + "%");
                    });

                    // Movement
                    onecup.div(() => {
                        onecup.position("absolute");
                        onecup.border("1px white solid");
                        onecup.top(2);
                        onecup.height(14);
                        onecup.background_color("#c6eda0");
                        onecup.width(movement / store * 100 + "%");
                    });

                    // Weapon
                    onecup.div(() => {
                        onecup.position("absolute");
                        onecup.border("1px white solid");
                        onecup.margin_left(2);
                        onecup.top(2);
                        onecup.height(14);
                        onecup.background_color("#e59090");
                        onecup.left(movement / store * 100 + "%");
                        onecup.width(weapon / store * 100 + "%");
                    });
                });
            });
        });
    }
}

window.body = function() {
    ub_window_body.apply(this, arguments);
    ub_drawBubble();
}

if(typeof(ub_intv) !== "undefined")
    clearInterval(ub_intv);
ub_intv = setInterval(onecup.refresh, 500);

battleMode.onkeydown = e => {
    if(e.key === "t") {
        ub_enabled = !ub_enabled;
    } else {
        return ub_battlemode_onkeydown.call(this, e);
    }
};