tree?

let tiles,
    branches,
    tankTree,


function generateTankTree(indexes) {
    tiles = [];
    branches = [];
    tankTree = { width: 0, height: 0 };
    let rightmostSoFar = 0;
    if (!Array.isArray(indexes)) indexes = [indexes];
    for (let index of indexes) {
        rightmostSoFar += 3 + measureSize(rightmostSoFar, 0, 0, { index }).width;
    }
    for (let { x, y } of tiles) {
        tankTree.width = Math.max(tankTree.width, x);
        tankTree.height = Math.max(tankTree.height, y);
    }
} // (...drawFloor)


global.showTree = false;
global.scrollX = global.scrollY = global.fixedScrollX = global.fixedScrollY = -1;
global.scrollVelocityY = global.scrollVelocityX = 0;
let lastGuiType = null;
function drawUpgradeTree(spacing, alcoveSize) {
    /*if (global.died) {
        global.showTree = false;
        global.scrollX = global.scrollY = global.fixedScrollX = global.fixedScrollY = global.scrollVelocityY = global.scrollVelocityX = 0;
        global.treeScale = 1;
        return;
    }*/ // Hide the tree on death

    if (lastGuiType != gui.type) {
        let m = util.getEntityImageFromMockup(gui.type), // The mockup that corresponds to the player's tank
            rootName = m.rerootUpgradeTree, // The upgrade tree root of the player's tank
            rootIndex = [];
        for (let name of rootName) {
            let ind = name == undefined ? -1 : global.mockups.find(i => i.className == name).index;
            rootIndex.push(ind); // The index of the mockup that corresponds to the root tank (-1 for no root)
        }
        if (!rootIndex.includes(-1)) {
            generateTankTree(rootIndex);
        }
        lastGuiType = gui.type;
    }

    if (!tankTree) {
        console.log('No tank tree rendered yet.');
        return;
    }

    let tileSize = alcoveSize / 2,
        size = tileSize - 4, // TODO: figure out where this 4 comes from
        spaceBetween = 10,
        screenDivisor = (spaceBetween + tileSize) * 2 * global.treeScale,
        padding = tileSize / screenDivisor,
        dividedWidth = global.screenWidth / screenDivisor,
        dividedHeight = global.screenHeight / screenDivisor,
        treeFactor = 1 + spaceBetween / tileSize;

    global.fixedScrollX = Math.max(
        dividedWidth - padding,
        Math.min(
            tankTree.width * treeFactor + padding - dividedWidth,
            global.fixedScrollX + global.scrollVelocityX
        )
    );
    global.fixedScrollY = Math.max(
        dividedHeight - padding,
        Math.min(
            tankTree.height * treeFactor + padding - dividedHeight,
            global.fixedScrollY + global.scrollVelocityY
        )
    );
    global.scrollX = util.lerp(global.scrollX, global.fixedScrollX, 0.1);
    global.scrollY = util.lerp(global.scrollY, global.fixedScrollY, 0.1);

    for (let [start, end] of branches) {
        let sx = ((start.x - global.scrollX) * (tileSize + spaceBetween) + 1 + 0.5 * size) * global.treeScale + global.screenWidth / 2,
            sy = ((start.y - global.scrollY) * (tileSize + spaceBetween) + 1 + 0.5 * size) * global.treeScale + global.screenHeight / 2,
            ex = ((end.x - global.scrollX) * (tileSize + spaceBetween) + 1 + 0.5 * size) * global.treeScale + global.screenWidth / 2,
            ey = ((end.y - global.scrollY) * (tileSize + spaceBetween) + 1 + 0.5 * size) * global.treeScale + global.screenHeight / 2;
        if (ex < 0 || sx > global.screenWidth || ey < 0 || sy > global.screenHeight) continue;
        ctx.strokeStyle = color.black;
        ctx.lineWidth = 2 * global.treeScale;
        drawGuiLine(sx, sy, ex, ey);
    }
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = color.guiwhite;
    ctx.fillRect(0, 0, innerWidth, innerHeight);
    ctx.globalAlpha = 1;

    //draw the various tank icons
    let angle = -Math.PI / 4;
    for (let { x, y, colorIndex, index } of tiles) {
        let ax = (x - global.scrollX) * (tileSize + spaceBetween) * global.treeScale + global.screenWidth / 2,
            ay = (y - global.scrollY) * (tileSize + spaceBetween) * global.treeScale + global.screenHeight / 2;
        if (ax < -tileSize || ax > global.screenWidth + tileSize || ay < -tileSize || ay > global.screenHeight + tileSize) continue;
        drawEntityIcon(index.toString(), ax, ay, tileSize * global.treeScale, tileSize * global.treeScale, global.treeScale, angle, 1, colorIndex);
    }

    let text = "Arrow keys to navigate the class tree. Shift to navigate faster. Scroll wheel (or +/- keys) to zoom in/out.";
    let w = measureText(text, 18);
    ctx.globalAlpha = 1;
    ctx.lineWidth = 1;
    ctx.fillStyle = color.dgrey;
    ctx.strokeStyle = color.black;
    ctx.fillText(text, global.screenWidth / 2 - w / 2, innerHeight * 0.04);
    ctx.strokeText(text, global.screenWidth / 2 - w / 2, innerHeight * 0.04);
} // (...drawMessages)


    global.canSkill = !!gui.points && !global.showTree;
    global.fps = global.metrics.rendertime;
    if (global.showTree) {
        drawUpgradeTree(spacing, alcoveSize);
    } else {
        if (global.mobile) { // MOBILE UI
            drawMobileJoysticks();
            drawMobileButtons(spacing, alcoveSize);
        } // (mobile ui)