107 lines
3.4 KiB
JavaScript
107 lines
3.4 KiB
JavaScript
import {
|
|
ColourBackPre,
|
|
ColourBlue,
|
|
ColourGray,
|
|
ColourGreen,
|
|
ColourOrange,
|
|
ColourPurple,
|
|
ColourRed,
|
|
ColourTextPre,
|
|
ColourYellow,
|
|
} from '../VariablesAndData';
|
|
|
|
/**
|
|
* This function creates the legend for the upgrade bar
|
|
* @returns {object} legend The legend-object to be added
|
|
*/
|
|
function CreateUpgradeBarLegend() {
|
|
const legend = document.createElement('div');
|
|
legend.style.minWidth = '330px';
|
|
legend.style.marginBottom = '4px';
|
|
const title = document.createElement('div');
|
|
title.className = 'name';
|
|
title.style.marginBottom = '4px';
|
|
title.textContent = 'Legend';
|
|
legend.appendChild(title);
|
|
|
|
const legendLine = function (color, text) {
|
|
const div = document.createElement('div');
|
|
div.style.verticalAlign = 'middle';
|
|
const span = document.createElement('span');
|
|
span.className = ColourBackPre + color;
|
|
span.style.display = 'inline-block';
|
|
span.style.height = '10px';
|
|
span.style.width = '10px';
|
|
span.style.marginRight = '4px';
|
|
div.appendChild(span);
|
|
div.appendChild(document.createTextNode(text));
|
|
return div;
|
|
};
|
|
|
|
legend.appendChild(
|
|
legendLine(ColourBlue, 'Better than the best PP of a building option'),
|
|
);
|
|
legend.appendChild(
|
|
legendLine(ColourGreen, 'Same as the best PP building option'),
|
|
);
|
|
legend.appendChild(
|
|
legendLine(ColourYellow, 'Within the top 10 of PP for buildings'),
|
|
);
|
|
legend.appendChild(
|
|
legendLine(ColourOrange, 'Within the top 20 of PP for buildings'),
|
|
);
|
|
legend.appendChild(
|
|
legendLine(ColourRed, 'Within the top 30 of PP for buildings'),
|
|
);
|
|
legend.appendChild(
|
|
legendLine(ColourPurple, 'Outside of the top 30 of PP for buildings'),
|
|
);
|
|
legend.appendChild(legendLine(ColourGray, 'Negative or infinity PP'));
|
|
return legend;
|
|
}
|
|
|
|
/**
|
|
* This function creates the upgrade bar above the upgrade-section in the right section of the screen
|
|
*/
|
|
export default function CreateUpgradeBar() {
|
|
const UpgradeBar = document.createElement('div');
|
|
UpgradeBar.id = 'CMUpgradeBar';
|
|
UpgradeBar.style.width = '100%';
|
|
UpgradeBar.style.backgroundColor = 'black';
|
|
UpgradeBar.style.textAlign = 'center';
|
|
UpgradeBar.style.fontWeight = 'bold';
|
|
UpgradeBar.style.display = 'none';
|
|
UpgradeBar.style.zIndex = '21';
|
|
UpgradeBar.onmouseout = function () {
|
|
Game.tooltip.hide();
|
|
};
|
|
|
|
const placeholder = document.createElement('div');
|
|
placeholder.appendChild(CreateUpgradeBarLegend());
|
|
UpgradeBar.onmouseover = function () {
|
|
Game.tooltip.draw(this, escape(placeholder.innerHTML), 'store');
|
|
};
|
|
|
|
const upgradeNumber = function (id, color) {
|
|
const span = document.createElement('span');
|
|
span.id = id;
|
|
span.className = ColourTextPre + color;
|
|
span.style.width = '14.28571428571429%';
|
|
span.style.display = 'inline-block';
|
|
span.textContent = '0';
|
|
return span;
|
|
};
|
|
UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarBlue', ColourBlue));
|
|
UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGreen', ColourGreen));
|
|
UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarYellow', ColourYellow));
|
|
UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarOrange', ColourOrange));
|
|
UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarRed', ColourRed));
|
|
UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarPurple', ColourPurple));
|
|
UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGray', ColourGray));
|
|
|
|
l('upgrades').parentNode.insertBefore(
|
|
UpgradeBar,
|
|
l('upgrades').parentNode.childNodes[3],
|
|
);
|
|
}
|