level gui

setInterval(function() {
  updateGUI();
}, 1000 / 4);

function initGUI()
{
    let $ = parent.$;
    let brc = $("#bottomrightcorner");
    let bmid = $("#bottommid");

    bmid.find("#xpbar_bg").remove();
    let xpbar_bg = $('<div id="xpbar_bg"></div>').css({
        background: "black",
        height: "5px",
        fontSize: "14px",
        color: "#000000",
        textAlign: "center"
    });
    xpbar_bg.insertAfter($('#mpbar'));

    bmid.find("#xpbar_fg").remove();
    let xpbar_fg = $('<div id="xpbar_fg"></div>').css({
        background: "#FFFFFF",
        height: "5px",
        fontSize: "14px",
        color: "#FFD800",
        textAlign: "center"
    });
    $("#xpbar_bg").append(xpbar_fg);

    brc.find("#xpslider").css({
        background: "#10198C",
        opacity: "0.5"
    });

    bmid.find("#xpbar_text").remove();
    let xpbar_text = $('<div id="xpbar_text"></div>').css({
        background: "url('https://cdn.discordapp.com/attachments/202046273052868608/547468098907668532/xp_bar.png')",
        width: "500",
        height: "26"
    });
    xpbar_text.attr("class", "clickable enableclicks");
    xpbar_text.attr("onClick", "toggle_stats()");
    xpbar_text.insertAfter($("#mpbar"));

    bmid.find("#xpbar_text_level").remove();
    let xpbar_text_level = $('<div id="xpbar_text_level"></div>').css({
        display: "inline",
        fontSize: "20px",
        fontFamily: "Serif",
        color: "FFFFFF",
        textShadow: "0 0 5px #888888"
    });
    xpbar_text.append(xpbar_text_level);

    bmid.find("#xpbar_text_percent").remove();
    let xpbar_text_percent = $('<div id="xpbar_text_percent"></div>').css({
        display: "inline",
        fontSize: "15px",
        marginLeft: "70px",
        fontFamily: "Serif",
        color: "#FFFF00",
        fontStyle: "italic",
        textShadow: "0 0 3px #888800"
    });
    xpbar_text.append(xpbar_text_percent);

    brc.find("#xpui").parent().remove();
}

function updateGUI() {
    let $ = parent.$;
    let xp_percent = ((character.xp / G.levels[character.level]) * 100).toFixed(3);

    $("#bottommid").find("#xpbar_fg").css({ width: `${xp_percent}%`});
    $("#bottommid").find("#xpbar_text_level").html(`Level: ${character.level}`);
    $("#bottommid").find("#xpbar_text_percent").html(`${xp_percent}%`);
}

function ncomma(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

initGUI();