Skip to content

Speed up rendering #165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andreareina wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Speed up rendering #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
43238e2
Don't rerender infinite turkimp time
andreareina Sep 15, 2018
e58d06b
Change .innerHTML -> .textContent where HTML isn't needed
andreareina Sep 15, 2018
21c1526
Speedify updateAllBattleNumbers
andreareina Sep 15, 2018
b103fec
Speedify updateAntiStacks
andreareina Sep 15, 2018
481be82
Speedify drawAllUpgrades
andreareina Sep 15, 2018
62b7656
Speedify drawGrid()
andreareina Sep 15, 2018
d14013d
Batch drawGrid() HTML parsing to once per row
andreareina Sep 15, 2018
3891de5
Batch drawGrid() HTML parsing to once per call
andreareina Sep 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 46 additions & 25 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3662,7 +3662,7 @@ function breed() {
if (remainingTime == 0.0)
updateGenes = true;
}
document.getElementById("trimpsTimeToFill").innerHTML = (fullBreed) ? fullBreed : "";
document.getElementById("trimpsTimeToFill").textContent = (fullBreed) ? fullBreed : "";
if (updateGenes || (!game.global.fighting && totalTimeText == "0.0")){
updateStoredGenInfo(breeding.toNumber());
}
Expand Down Expand Up @@ -7311,21 +7311,15 @@ function drawGrid(maps) { //maps t or f. This function overwrites the current gr
var idText = (maps) ? "mapCell" : "cell";
var size = 0;
if (maps) size = game.global.mapGridArray.length;
var rowHTMLs = [];
for (var i = 0; i < rows; i++) {
if (maps && counter >= size) return;
var row = document.createElement("ul");
grid.insertBefore(row, grid.childNodes[0]);
row.setAttribute("id", "row" + i);
row.className = "battleRow";
var cellHTMLs = [];
for (var x = 0; x < cols; x++) {

var title, onclick;

if (maps && counter >= size) return;
var cell = document.createElement("li");
cell.setAttribute("id", idText + counter);
row.appendChild(cell);
cell.style.width = (100 / cols) + "%";
cell.style.paddingTop = ((100 / cols) / 19)+ "vh";
cell.style.paddingBottom = ((100 / cols) / 19) + "vh";
cell.style.fontSize = ((cols / 14) + 1) + "vh";
var className = "battleCell cellColorNotBeaten"
if (maps && game.global.mapGridArray[counter].name == "Pumpkimp") className += " mapPumpkimp";
if (maps && map.location == "Void") className += " voidCell";
Expand All @@ -7338,20 +7332,36 @@ function drawGrid(maps) { //maps t or f. This function overwrites the current gr
}
if (!maps && game.global.gridArray[counter].empowerment){
className += " empoweredCell" + game.global.gridArray[counter].empowerment;
cell.title = "Token of " + game.global.gridArray[counter].empowerment;
title = "Token of " + game.global.gridArray[counter].empowerment;
}
else if (!maps && checkIfSpireWorld() && game.global.spireActive) className += " spireCell";
cell.className = className;
cell.innerHTML = (maps) ? game.global.mapGridArray[counter].text : game.global.gridArray[counter].text;
if (cell.innerHTML === "") cell.innerHTML = "&nbsp;";

if (!maps && game.global.gridArray[counter].special == "easterEgg"){
cell.onclick = function () { easterEggClicked(); };
onclick = ' onclick="easterEggClicked();"';
game.global.eggLoc = counter;
cell.className += " eggCell";
className += " eggCell";
}
var cell = "<li id=\"" + (idText + counter) + "\" class=\"" + className + "\" \"" + (title || "") + (onclick || "") + ">" + ((maps ? game.global.mapGridArray[counter].text : game.global.gridArray[counter].text) || "&nbsp") + "</li>";
cellHTMLs.push(cell);
counter++;
}
rowHTMLs.push(
'<ul id="row' + i + '" class="battleRow">'
+ cellHTMLs.join('')
+ '</ul>'
);
}
// The grid has row 0 at the bottom, so reverse
grid.innerHTML = rowHTMLs.reverse().join('');
Array.from(document.querySelectorAll(".battleCell"))
.forEach(function(cell) {
Object.assign(cell.style, {
width: 100 / cols + "%",
paddingTop: 100 / cols / 19 + "vh",
paddingBottom: 100 / cols / 19 + "vh",
fontSize: cols / 14 + 1 + "vh"
});
});
}

function easterEggClicked(){
Expand Down Expand Up @@ -8377,11 +8387,11 @@ function updateAllBattleNumbers (skipNum) {
document.getElementById("goodGuyHealthMax").innerHTML = prettify(game.global.soldierHealthMax);
updateGoodBar();
updateBadBar(cell);
document.getElementById("badGuyHealthMax").innerHTML = prettify(cell.maxHealth);
if (!skipNum && game.global.challengeActive == "Trimp" && game.jobs.Amalgamator.owned > 0) document.getElementById("trimpsFighting").innerHTML = toZalgo(prettify(game.resources.trimps.getCurrentSend()), game.global.world);
else if (!skipNum) document.getElementById("trimpsFighting").innerHTML = prettify(game.resources.trimps.getCurrentSend());
document.getElementById("goodGuyBlock").innerHTML = prettify(game.global.soldierCurrentBlock);
document.getElementById("goodGuyAttack").innerHTML = calculateDamage(game.global.soldierCurrentAttack, true, true);
document.getElementById("badGuyHealthMax").textContent = prettify(cell.maxHealth);
if (!skipNum && game.global.challengeActive == "Trimp" && game.jobs.Amalgamator.owned > 0) document.getElementById("trimpsFighting").textContent = toZalgo(prettify(game.resources.trimps.getCurrentSend()), game.global.world);
else if (!skipNum) document.getElementById("trimpsFighting").textContent = prettify(game.resources.trimps.getCurrentSend());
document.getElementById("goodGuyBlock").textContent = prettify(game.global.soldierCurrentBlock);
document.getElementById("goodGuyAttack").textContent = calculateDamage(game.global.soldierCurrentAttack, true, true);
var badAttackElem = document.getElementById("badGuyAttack");
badAttackElem.innerHTML = calculateDamage(cell.attack, true, false, false, cell);
if (game.global.usingShriek) {
Expand Down Expand Up @@ -11347,7 +11357,17 @@ function updateAntiStacks(){
number = Math.floor(number * 100);
var verb = game.jobs.Amalgamator.owned > 0 ? "prepare" : "populate";
var s = game.global.antiStacks == 1 ? '' : 's';
elem.innerHTML = '<span class="badge antiBadge" onmouseover="tooltip(\'Anticipation\', \'customText\', event, \'Your Trimps are dealing ' + number + '% extra damage for taking ' + game.global.antiStacks + ' second' + s + ' to ' + verb + '.\')" onmouseout="tooltip(\'hide\')">' + game.global.antiStacks + '<span class="icomoon icon-target2"></span></span>';
var span = elem.querySelector('span.badge.antiBadge');
var antiTooltip = function(event){tooltip('Anticipation', 'customText', event, 'Your Trimps are dealing ' + number + '% extra damage for taking ' + game.global.antiStacks + ' second' + s + ' to ' + verb + '.');};
var hideTooltip = function() {tooltip('hid');};
if (span) {
span.onmouseover = antiTooltip;
span.onmouseout = hideTooltip;
if (game.global.antistacks)
span.childNodes[0].textContent = game.global.antistacks.toString();
} else {
elem.innerHTML = '<span class="badge antiBadge" onmouseover="tooltip(\'Anticipation\', \'customText\', event, \'Your Trimps are dealing ' + number + '% extra damage for taking ' + game.global.antiStacks + ' second' + s + ' to ' + verb + '.\')" onmouseout="tooltip(\'hide\')">' + game.global.antiStacks + '<span class="icomoon icon-target2"></span></span>';
}
}
else elem.innerHTML = "";
}
Expand Down Expand Up @@ -12339,7 +12359,8 @@ function updateTurkimpTime() {
var timeRemaining = game.global.turkimpTimer;
var elem = document.getElementById("turkimpTime");
if (game.talents.turkimp4.purchased){
elem.innerHTML = "<span class='icomoon icon-infinity'></span>";
if (!elem.querySelector('.icomoon.icon-infinity'))
elem.innerHTML = "<span class='icomoon icon-infinity'></span>";
return;
}
if (timeRemaining <= 0) {
Expand Down
43 changes: 23 additions & 20 deletions updates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3503,13 +3503,13 @@ function updateLabels() { //Tried just updating as something changes, but seems
toUpdate.owned = parseFloat(toUpdate.owned);
if (!(toUpdate.owned > 0)) toUpdate.owned = 0;
}
document.getElementById(item + "Owned").innerHTML = prettify(Math.floor(toUpdate.owned));
document.getElementById(item + "Owned").textContent = prettify(Math.floor(toUpdate.owned));
if (toUpdate.max == -1 || document.getElementById(item + "Max") === null) continue;
var newMax = toUpdate.max;
if (item != "trimps")
newMax = calcHeirloomBonus("Shield", "storageSize", (newMax * (game.portal.Packrat.modifier * game.portal.Packrat.level + 1)));
else if (item == "trimps") newMax = toUpdate.realMax();
document.getElementById(item + "Max").innerHTML = prettify(newMax);
document.getElementById(item + "Max").textContent = prettify(newMax);
var bar = document.getElementById(item + "Bar");
if (game.options.menu.progressBars.enabled){
var percentToMax = ((toUpdate.owned / newMax) * 100);
Expand All @@ -3527,12 +3527,12 @@ function updateLabels() { //Tried just updating as something changes, but seems
unlockBuilding(itemA);
elem = document.getElementById(itemA + "Owned");
}
elem.innerHTML = (game.options.menu.menuFormatting.enabled) ? prettify(toUpdate.owned) : toUpdate.owned;
elem.textContent = (game.options.menu.menuFormatting.enabled) ? prettify(toUpdate.owned) : toUpdate.owned;
if (itemA == "Trap") {
var trap1 = document.getElementById("trimpTrapText")
if (trap1) trap1.innerHTML = prettify(toUpdate.owned);
if (trap1) trap1.textContent = prettify(toUpdate.owned);
var trap2 = document.getElementById("trimpTrapText2")
if (trap2) trap2.innerHTML = prettify(toUpdate.owned);
if (trap2) trap2.textContent = prettify(toUpdate.owned);
}
}
//Jobs, check PS here and stuff. Trimps per second is handled by breed() function
Expand All @@ -3545,7 +3545,7 @@ function updateLabels() { //Tried just updating as something changes, but seems
continue;
}
if (document.getElementById(itemB) === null) unlockJob(itemB);
document.getElementById(itemB + "Owned").innerHTML = (game.options.menu.menuFormatting.enabled) ? prettify(toUpdate.owned) : toUpdate.owned;
document.getElementById(itemB + "Owned").textContent = (game.options.menu.menuFormatting.enabled) ? prettify(toUpdate.owned) : toUpdate.owned;
var perSec = (toUpdate.owned * toUpdate.modifier);
updatePs(toUpdate, false, itemB);
}
Expand All @@ -3565,7 +3565,7 @@ function updateLabels() { //Tried just updating as something changes, but seems
var toUpdate = game.equipment[itemD];
if (toUpdate.locked == 1) continue;
if (document.getElementById(itemD) === null) drawAllEquipment();
document.getElementById(itemD + "Owned").innerHTML = toUpdate.level;
document.getElementById(itemD + "Owned").textContent = toUpdate.level;
}
}

Expand Down Expand Up @@ -3642,14 +3642,14 @@ function updatePs(jobObj, trimps, jobName){ //trimps is true/false, send PS as f

function updateSideTrimps(){
var trimps = game.resources.trimps;
document.getElementById("trimpsEmployed").innerHTML = prettify(trimps.employed);
document.getElementById("trimpsEmployed").textContent = prettify(trimps.employed);
var breedCount = (trimps.owned - trimps.employed > 2) ? prettify(Math.floor(trimps.owned - trimps.employed)) : 0;
document.getElementById("trimpsUnemployed").innerHTML = breedCount;
document.getElementById("maxEmployed").innerHTML = prettify(Math.ceil(trimps.realMax() / 2));
document.getElementById("trimpsUnemployed").textContent = breedCount;
document.getElementById("maxEmployed").textContent = prettify(Math.ceil(trimps.realMax() / 2));
var free = (Math.ceil(trimps.realMax() / 2) - trimps.employed);
if (free < 0) free = 0;
var s = (free > 1) ? "s" : "";
document.getElementById("jobsTitleUnemployed").innerHTML = prettify(free) + " workspace" + s;
document.getElementById("jobsTitleUnemployed").textContent = prettify(free) + " workspace" + s;
}

function unlockBuilding(what) {
Expand Down Expand Up @@ -3810,22 +3810,24 @@ function unlockUpgrade(what, displayOnly) {

function drawAllUpgrades(){
var elem = document.getElementById("upgradesHere");
elem.innerHTML = "";
// Batch all HTML manipulation into one operation to save on the parsing
elem.innerHTML = Object.keys(game.upgrades)
.filter(what => game.upgrades[what].locked != 1)
.map(upgradeDivHTML)
.join('');
for (var item in game.upgrades){
if (game.upgrades[item].locked == 1) continue;
drawUpgrade(item, elem);
if (game.upgrades[item].alert && game.options.menu.showAlerts.enabled){
document.getElementById("upgradesAlert").innerHTML = "!";
if (document.getElementById(item + "Alert")) document.getElementById(item + "Alert").innerHTML = "!";
document.getElementById("upgradesAlert").textContent = "!";
if (document.getElementById(item + "Alert")) document.getElementById(item + "Alert").textContent = "!";
}
}
goldenUpgradesShown = false;
displayGoldenUpgrades();
}



function drawUpgrade(what, where){
function upgradeDivHTML(what) {
div = document.createElement('div');
var upgrade = game.upgrades[what];
if (upgrade.prestiges && (!upgrade.cost.resources[metal] || !upgrade.cost.resources[wood])){
var resName = (what == "Supershield") ? "wood" : "metal";
Expand All @@ -3834,10 +3836,11 @@ function drawUpgrade(what, where){
var done = upgrade.done;
var dif = upgrade.allowed - done;
if (dif >= 1) dif -= 1;
where.innerHTML += '<div onmouseover="tooltip(\'' + what + '\',\'upgrades\',event)" onmouseout="tooltip(\'hide\')" class="thingColorCanNotAfford thing noselect pointer upgradeThing" id="' + what + '" onclick="buyUpgrade(\'' + what + '\')"><span id="' + what + 'Alert" class="alert badge"></span><span class="thingName">' + what + '</span><br/><span class="thingOwned" id="' + what + 'Owned">' + done + '</span></div>';
if (dif >= 1) document.getElementById(what + "Owned").innerHTML = upgrade.done + "(+" + dif + ")";
return '<div onmouseover="tooltip(\'' + what + '\',\'upgrades\',event)" onmouseout="tooltip(\'hide\')" class="thingColorCanNotAfford thing noselect pointer upgradeThing" id="' + what + '" onclick="buyUpgrade(\'' + what + '\')"><span id="' + what + 'Alert" class="alert badge"></span><span class="thingName">' + what + '</span><br/><span class="thingOwned" id="' + what + 'Owned">' + done + ((dif >= 1) ? ('(+' + dif + ')') : '') + '</span></div>';
return div;
}


function checkButtons(what) {
var where = game[what];
if (what == "jobs") {
Expand Down