Refactored code that initializes main menu buttons/header/panels

This commit is contained in:
danielyxie 2017-09-01 13:49:21 -05:00
parent 9b96e2537d
commit 78ca383ee2
2 changed files with 198 additions and 220 deletions

113
dist/bundle.js vendored

@ -4341,6 +4341,53 @@ let Engine = {
document.getElementById("entire-game-container").style.visibility = "visible";
},
//Used when initializing a game
//elems should be an array of all DOM elements under the header
closeMainMenuHeader: function(elems) {
for (var i = 0; i < elems.length; ++i) {
elems[i].style.maxHeight = null;
elems[i].style.opacity = 0;
elems[i].style.pointerEvents = "none";
}
},
//Used when initializing the game
//elems should be an array of all DOM elements under the header
openMainMenuHeader: function(elems) {
for (var i = 0; i < elems.length; ++i) {
elems[i].style.maxHeight = elems[i].scrollHeight + "px";
elems[i].style.display = "block";
}
},
//Used in game when clicking on a main menu header (NOT FOR INITIALIZATION)
//open is a boolean specifying whether its being opened or closed
//elems is an array of DOM elements for main menu tabs (li)
//links is an array of DOM elements for main menu links (a)
toggleMainMenuHeader: function(open, elems, links) {
for (var i = 0; i < elems.length; ++i) {
if (open) {
elems[i].style.opacity = 1;
elems[i].style.maxHeight = elems[i].scrollHeight + "px";
} else {
elems[i].style.opacity = 0;
elems[i].style.maxHeight = null;
}
}
for (var i = 0; i < links.length; ++i) {
if (open) {
links[i].style.opacity = 1;
links[i].style.maxHeight = links[i].scrollHeight + "px";
links[i].style.pointerEvents = "auto";
} else {
links[i].style.opacity = 0;
links[i].style.maxHeight = null;
links[i].style.pointerEvents = "none";
}
}
},
load: function() {
//Load script editor
var editor = ace.edit('javascript-editor');
@ -4431,6 +4478,12 @@ let Engine = {
Object(__WEBPACK_IMPORTED_MODULE_4__utils_StringHelperFunctions_js__["c" /* formatNumber */])(offlineProductionFromScripts, 2) + " and your Hacknet Nodes generated $" +
Object(__WEBPACK_IMPORTED_MODULE_4__utils_StringHelperFunctions_js__["c" /* formatNumber */])(offlineProductionFromHacknetNodes, 2));
//Close main menu accordions for loaded game
Engine.closeMainMenuHeader(
[terminal, createScript, activeScripts, createProgram, stats,
factions, augmentations, hacknetnodes, city, travel, job,
tutorial, options]
);
/*
terminal.style.maxHeight = null;
terminal.style.opacity = 0;
terminal.style.pointerEvents = "none";
@ -4470,6 +4523,7 @@ let Engine = {
options.style.maxHeight = null;
options.style.opacity = 0;
options.style.pointerEvents = "none";
*/
} else {
//No save found, start new game
console.log("Initializing new game");
@ -4500,6 +4554,12 @@ let Engine = {
worldHdr.classList.toggle("opened");
var helpHdr = document.getElementById("help-menu-header");
helpHdr.classList.toggle("opened");
Engine.openMainMenuHeader(
[terminal, createScript, activeScripts, createProgram, stats,
factions, augmentations, hacknetnodes, city, travel, job,
tutorial, options]
);
/*
terminal.style.maxHeight = terminal.scrollHeight + "px";
terminal.style.display = "block";
createScript.style.maxHeight = createScript.scrollHeight + "px";
@ -4526,6 +4586,7 @@ let Engine = {
tutorial.style.display = "block";
options.style.maxHeight = options.scrollHeight + "px";
options.style.display = "block";
*/
//Start interactive tutorial
Object(__WEBPACK_IMPORTED_MODULE_16__InteractiveTutorial_js__["d" /* iTutorialStart */])();
@ -4673,13 +4734,9 @@ let Engine = {
//Main menu accordions
var hackingHdr = document.getElementById("hacking-menu-header");
//hackingHdr.classList.toggle("opened");
var characterHdr = document.getElementById("character-menu-header");
//characterHdr.classList.toggle("opened");
var worldHdr = document.getElementById("world-menu-header");
//worldHdr.classList.toggle("opened");
var helpHdr = document.getElementById("help-menu-header");
//helpHdr.classList.toggle("opened");
hackingHdr.onclick = function() {
var terminal = document.getElementById("terminal-tab");
@ -4693,6 +4750,11 @@ let Engine = {
var createProgramNot = document.getElementById("create-program-notification");
this.classList.toggle("opened");
if (terminal.style.maxHeight) {
Engine.toggleMainMenuHeader(false,
[terminal, createScript, activeScripts, createProgram],
[terminalLink, createScriptLink, activeScriptsLink, createProgramLink]
);
/*
terminal.style.opacity = 0;
terminal.style.maxHeight = null;
terminalLink.style.opacity = 0;
@ -4716,9 +4778,15 @@ let Engine = {
createProgramLink.style.opacity = 0;
createProgramLink.style.maxHeight = null;
createProgramLink.style.pointerEvents = "none";
*/
createProgramNot.style.display = "none";
} else {
Engine.toggleMainMenuHeader(true,
[terminal, createScript, activeScripts, createProgram],
[terminalLink, createScriptLink, activeScriptsLink, createProgramLink]
);
/*
terminal.style.maxHeight = terminal.scrollHeight + "px";
terminal.style.opacity = 1;
terminalLink.style.maxHeight = terminalLink.scrollHeight + "px";
@ -4742,6 +4810,7 @@ let Engine = {
createProgramLink.style.maxHeight = createProgramLink.scrollHeight + "px";
createProgramLink.style.opacity = 1;
createProgramLink.style.pointerEvents = "auto";
*/
createProgramNot.style.display = "block"
}
}
@ -4757,6 +4826,11 @@ let Engine = {
var hacknetnodesLink = document.getElementById("hacknet-nodes-menu-link");
this.classList.toggle("opened");
if (stats.style.maxHeight) {
Engine.toggleMainMenuHeader(false,
[stats, factions, augmentations, hacknetnodes],
[statsLink, factionsLink, augmentationsLink, hacknetnodesLink]
);
/*
stats.style.opacity = 0;
stats.style.maxHeight = null;
statsLink.style.opacity = 0;
@ -4780,7 +4854,13 @@ let Engine = {
hacknetnodesLink.style.opacity = 0;
hacknetnodesLink.style.maxHeight = null;
hacknetnodesLink.style.pointerEvents = "none";
*/
} else {
Engine.toggleMainMenuHeader(true,
[stats, factions, augmentations, hacknetnodes],
[statsLink, factionsLink, augmentationsLink, hacknetnodesLink]
);
/*
stats.style.maxHeight = stats.scrollHeight + "px";
stats.style.opacity = 1;
statsLink.style.maxHeight = statsLink.scrollHeight + "px";
@ -4804,6 +4884,7 @@ let Engine = {
hacknetnodesLink.style.maxHeight = hacknetnodesLink.scrollHeight + "px";
hacknetnodesLink.style.opacity = 1;
hacknetnodesLink.style.pointerEvents = "auto";
*/
}
}
@ -4816,6 +4897,11 @@ let Engine = {
var jobLink = document.getElementById("job-menu-link");
this.classList.toggle("opened");
if (city.style.maxHeight) {
Engine.toggleMainMenuHeader(false,
[city, travel, job],
[cityLink, travelLink, jobLink]
);
/*
city.style.opacity = 0;
city.style.maxHeight = null;
cityLink.style.opacity = 0;
@ -4833,7 +4919,13 @@ let Engine = {
jobLink.style.opacity = 0;
jobLink.style.maxHeight = null;
jobLink.style.pointerEvents = "none";
*/
} else {
Engine.toggleMainMenuHeader(true,
[city, travel, job],
[cityLink, travelLink, jobLink]
);
/*
city.style.maxHeight = city.scrollHeight + "px";
city.style.opacity = 1;
cityLink.style.maxHeight = cityLink.scrollHeight + "px";
@ -4851,6 +4943,7 @@ let Engine = {
jobLink.style.maxHeight = jobLink.scrollHeight + "px";
jobLink.style.opacity = 1;
jobLink.style.pointerEvents = "auto";
*/
}
}
@ -4861,6 +4954,11 @@ let Engine = {
var optionsLink = document.getElementById("options-menu-link");
this.classList.toggle("opened");
if (tutorial.style.maxHeight) {
Engine.toggleMainMenuHeader(false,
[tutorial, options],
[tutorialLink, optionsLink]
);
/*
tutorial.style.opacity = 0;
tutorial.style.maxHeight = null;
tutorialLink.style.opacity = 0;
@ -4872,7 +4970,13 @@ let Engine = {
optionsLink.style.opacity = 0;
optionsLink.style.maxHeight = null;
optionsLink.style.pointerEvents = "none";
*/
} else {
Engine.toggleMainMenuHeader(true,
[tutorial, options],
[tutorialLink, optionsLink]
);
/*
tutorial.style.maxHeight = tutorial.scrollHeight + "px";
tutorial.style.opacity = 1;
tutorialLink.style.maxHeight = tutorialLink.scrollHeight + "px";
@ -4884,6 +4988,7 @@ let Engine = {
optionsLink.style.maxHeight = optionsLink.scrollHeight + "px";
optionsLink.style.opacity = 1;
optionsLink.style.pointerEvents = "auto";
*/
}
}

@ -1018,6 +1018,53 @@ let Engine = {
document.getElementById("entire-game-container").style.visibility = "visible";
},
//Used when initializing a game
//elems should be an array of all DOM elements under the header
closeMainMenuHeader: function(elems) {
for (var i = 0; i < elems.length; ++i) {
elems[i].style.maxHeight = null;
elems[i].style.opacity = 0;
elems[i].style.pointerEvents = "none";
}
},
//Used when initializing the game
//elems should be an array of all DOM elements under the header
openMainMenuHeader: function(elems) {
for (var i = 0; i < elems.length; ++i) {
elems[i].style.maxHeight = elems[i].scrollHeight + "px";
elems[i].style.display = "block";
}
},
//Used in game when clicking on a main menu header (NOT FOR INITIALIZATION)
//open is a boolean specifying whether its being opened or closed
//elems is an array of DOM elements for main menu tabs (li)
//links is an array of DOM elements for main menu links (a)
toggleMainMenuHeader: function(open, elems, links) {
for (var i = 0; i < elems.length; ++i) {
if (open) {
elems[i].style.opacity = 1;
elems[i].style.maxHeight = elems[i].scrollHeight + "px";
} else {
elems[i].style.opacity = 0;
elems[i].style.maxHeight = null;
}
}
for (var i = 0; i < links.length; ++i) {
if (open) {
links[i].style.opacity = 1;
links[i].style.maxHeight = links[i].scrollHeight + "px";
links[i].style.pointerEvents = "auto";
} else {
links[i].style.opacity = 0;
links[i].style.maxHeight = null;
links[i].style.pointerEvents = "none";
}
}
},
load: function() {
//Load script editor
var editor = ace.edit('javascript-editor');
@ -1108,45 +1155,11 @@ let Engine = {
formatNumber(offlineProductionFromScripts, 2) + " and your Hacknet Nodes generated $" +
formatNumber(offlineProductionFromHacknetNodes, 2));
//Close main menu accordions for loaded game
terminal.style.maxHeight = null;
terminal.style.opacity = 0;
terminal.style.pointerEvents = "none";
createScript.style.maxHeight = null;
createScript.style.opacity = 0;
createScript.style.pointerEvents = "none";
activeScripts.style.maxHeight = null;
activeScripts.style.opacity = 0;
activeScripts.style.pointerEvents = "none";
createProgram.style.maxHeight = null;
createProgram.style.opacity = 0;
createProgram.style.pointerEvents = "none";
stats.style.maxHeight = null;
stats.style.opacity = 0;
stats.style.pointerEvents = "none";
factions.style.maxHeight = null;
factions.style.opacity = 0;
factions.style.pointerEvents = "none";
augmentations.style.maxHeight = null;
augmentations.style.opacity = 0;
augmentations.style.pointerEvents = "none";
hacknetnodes.style.maxHeight = null;
hacknetnodes.style.opacity = 0;
hacknetnodes.style.pointerEvents = "none";
city.style.maxHeight = null;
city.style.opacity = 0;
city.style.pointerEvents = "none";
travel.style.maxHeight = null;
travel.style.opacity = 0;
travel.style.pointerEvents = "none";
job.style.maxHeight = null;
job.style.opacity = 0;
job.style.pointerEvents = "none";
tutorial.style.maxHeight = null;
tutorial.style.opacity = 0;
tutorial.style.pointerEvents = "none";
options.style.maxHeight = null;
options.style.opacity = 0;
options.style.pointerEvents = "none";
Engine.closeMainMenuHeader(
[terminal, createScript, activeScripts, createProgram, stats,
factions, augmentations, hacknetnodes, city, travel, job,
tutorial, options]
);
} else {
//No save found, start new game
console.log("Initializing new game");
@ -1177,32 +1190,11 @@ let Engine = {
worldHdr.classList.toggle("opened");
var helpHdr = document.getElementById("help-menu-header");
helpHdr.classList.toggle("opened");
terminal.style.maxHeight = terminal.scrollHeight + "px";
terminal.style.display = "block";
createScript.style.maxHeight = createScript.scrollHeight + "px";
createScript.style.display = "block";
activeScripts.style.maxHeight = activeScripts.scrollHeight + "px";
activeScripts.style.display = "block";
createProgram.style.maxHeight = createProgram.scrollHeight + "px";
createProgram.style.display = "block";
stats.style.maxHeight = stats.scrollHeight + "px";
stats.style.display = "block";
factions.style.maxHeight = factions.scrollHeight + "px";
factions.style.display = "block";
augmentations.style.maxHeight = augmentations.scrollHeight + "px";
augmentations.style.display = "block";
hacknetnodes.style.maxHeight = hacknetnodes.scrollHeight + "px";
hacknetnodes.style.display = "block";
city.style.maxHeight = city.scrollHeight + "px";
city.style.display = "block";
travel.style.maxHeight = travel.scrollHeight + "px";
travel.style.display = "block";
job.style.maxHeight = job.scrollHeight + "px";
job.style.display = "block";
tutorial.style.maxHeight = tutorial.scrollHeight + "px";
tutorial.style.display = "block";
options.style.maxHeight = options.scrollHeight + "px";
options.style.display = "block";
Engine.openMainMenuHeader(
[terminal, createScript, activeScripts, createProgram, stats,
factions, augmentations, hacknetnodes, city, travel, job,
tutorial, options]
);
//Start interactive tutorial
iTutorialStart();
@ -1350,13 +1342,9 @@ let Engine = {
//Main menu accordions
var hackingHdr = document.getElementById("hacking-menu-header");
//hackingHdr.classList.toggle("opened");
var characterHdr = document.getElementById("character-menu-header");
//characterHdr.classList.toggle("opened");
var worldHdr = document.getElementById("world-menu-header");
//worldHdr.classList.toggle("opened");
var helpHdr = document.getElementById("help-menu-header");
//helpHdr.classList.toggle("opened");
hackingHdr.onclick = function() {
var terminal = document.getElementById("terminal-tab");
@ -1370,55 +1358,18 @@ let Engine = {
var createProgramNot = document.getElementById("create-program-notification");
this.classList.toggle("opened");
if (terminal.style.maxHeight) {
terminal.style.opacity = 0;
terminal.style.maxHeight = null;
terminalLink.style.opacity = 0;
terminalLink.style.maxHeight = null;
terminalLink.style.pointerEvents = "none";
createScript.style.opacity = 0;
createScript.style.maxHeight = null;
createScriptLink.style.opacity = 0;
createScriptLink.style.maxHeight = null;
createScriptLink.style.pointerEvents = "none";
activeScripts.style.opacity = 0;
activeScripts.style.maxHeight = null;
activeScriptsLink.style.opacity = 0;
activeScriptsLink.style.maxHeight = null;
activeScriptsLink.style.pointerEvents = "none";
createProgram.style.opacity = 0;
createProgram.style.maxHeight = null;
createProgramLink.style.opacity = 0;
createProgramLink.style.maxHeight = null;
createProgramLink.style.pointerEvents = "none";
Engine.toggleMainMenuHeader(false,
[terminal, createScript, activeScripts, createProgram],
[terminalLink, createScriptLink, activeScriptsLink, createProgramLink]
);
createProgramNot.style.display = "none";
} else {
terminal.style.maxHeight = terminal.scrollHeight + "px";
terminal.style.opacity = 1;
terminalLink.style.maxHeight = terminalLink.scrollHeight + "px";
terminalLink.style.opacity = 1;
terminalLink.style.pointerEvents = "auto";
Engine.toggleMainMenuHeader(true,
[terminal, createScript, activeScripts, createProgram],
[terminalLink, createScriptLink, activeScriptsLink, createProgramLink]
);
createScript.style.maxHeight = createScript.scrollHeight + "px";
createScript.style.opacity = 1;
createScriptLink.style.maxHeight = createScriptLink.scrollHeight + "px";
createScriptLink.style.opacity = 1;
createScriptLink.style.pointerEvents = "auto";
activeScripts.style.maxHeight = activeScripts.scrollHeight + "px";
activeScripts.style.opacity = 1;
activeScriptsLink.style.maxHeight = activeScriptsLink.scrollHeight + "px";
activeScriptsLink.style.opacity = 1;
activeScriptsLink.style.pointerEvents = "auto";
createProgram.style.maxHeight = createProgram.scrollHeight + "px";
createProgram.style.opacity = 1;
createProgramLink.style.maxHeight = createProgramLink.scrollHeight + "px";
createProgramLink.style.opacity = 1;
createProgramLink.style.pointerEvents = "auto";
createProgramNot.style.display = "block"
}
}
@ -1434,53 +1385,15 @@ let Engine = {
var hacknetnodesLink = document.getElementById("hacknet-nodes-menu-link");
this.classList.toggle("opened");
if (stats.style.maxHeight) {
stats.style.opacity = 0;
stats.style.maxHeight = null;
statsLink.style.opacity = 0;
statsLink.style.maxHeight = null;
statsLink.style.pointerEvents = "none";
factions.style.opacity = 0;
factions.style.maxHeight = null;
factionsLink.style.opacity = 0;
factionsLink.style.maxHeight = null;
factionsLink.style.pointerEvents = "none";
augmentations.style.opacity = 0;
augmentations.style.maxHeight = null;
augmentationsLink.style.opacity = 0;
augmentationsLink.style.maxHeight = null;
augmentationsLink.style.pointerEvents = "none";
hacknetnodes.style.opacity = 0;
hacknetnodes.style.maxHeight = null;
hacknetnodesLink.style.opacity = 0;
hacknetnodesLink.style.maxHeight = null;
hacknetnodesLink.style.pointerEvents = "none";
Engine.toggleMainMenuHeader(false,
[stats, factions, augmentations, hacknetnodes],
[statsLink, factionsLink, augmentationsLink, hacknetnodesLink]
);
} else {
stats.style.maxHeight = stats.scrollHeight + "px";
stats.style.opacity = 1;
statsLink.style.maxHeight = statsLink.scrollHeight + "px";
statsLink.style.opacity = 1;
statsLink.style.pointerEvents = "auto";
factions.style.maxHeight = factions.scrollHeight + "px";
factions.style.opacity = 1;
factionsLink.style.maxHeight = factionsLink.scrollHeight + "px";
factionsLink.style.opacity = 1;
factionsLink.style.pointerEvents = "auto";
augmentations.style.maxHeight = augmentations.scrollHeight + "px";
augmentations.style.opacity = 1;
augmentationsLink.style.maxHeight = augmentationsLink.scrollHeight + "px";
augmentationsLink.style.opacity = 1;
augmentationsLink.style.pointerEvents = "auto";
hacknetnodes.style.maxHeight = hacknetnodes.scrollHeight + "px";
hacknetnodes.style.opacity = 1;
hacknetnodesLink.style.maxHeight = hacknetnodesLink.scrollHeight + "px";
hacknetnodesLink.style.opacity = 1;
hacknetnodesLink.style.pointerEvents = "auto";
Engine.toggleMainMenuHeader(true,
[stats, factions, augmentations, hacknetnodes],
[statsLink, factionsLink, augmentationsLink, hacknetnodesLink]
);
}
}
@ -1493,41 +1406,15 @@ let Engine = {
var jobLink = document.getElementById("job-menu-link");
this.classList.toggle("opened");
if (city.style.maxHeight) {
city.style.opacity = 0;
city.style.maxHeight = null;
cityLink.style.opacity = 0;
cityLink.style.maxHeight = null;
cityLink.style.pointerEvents = "none";
travel.style.opacity = 0;
travel.style.maxHeight = null;
travelLink.style.opacity = 0;
travelLink.style.maxHeight = null;
travelLink.style.pointerEvents = "none";
job.style.opacity = 0;
job.style.maxHeight = null;
jobLink.style.opacity = 0;
jobLink.style.maxHeight = null;
jobLink.style.pointerEvents = "none";
Engine.toggleMainMenuHeader(false,
[city, travel, job],
[cityLink, travelLink, jobLink]
);
} else {
city.style.maxHeight = city.scrollHeight + "px";
city.style.opacity = 1;
cityLink.style.maxHeight = cityLink.scrollHeight + "px";
cityLink.style.opacity = 1;
cityLink.style.pointerEvents = "auto";
travel.style.maxHeight = travel.scrollHeight + "px";
travel.style.opacity = 1;
travelLink.style.maxHeight = travelLink.scrollHeight + "px";
travelLink.style.opacity = 1;
travelLink.style.pointerEvents = "auto";
job.style.maxHeight = job.scrollHeight + "px";
job.style.opacity = 1;
jobLink.style.maxHeight = jobLink.scrollHeight + "px";
jobLink.style.opacity = 1;
jobLink.style.pointerEvents = "auto";
Engine.toggleMainMenuHeader(true,
[city, travel, job],
[cityLink, travelLink, jobLink]
);
}
}
@ -1538,29 +1425,15 @@ let Engine = {
var optionsLink = document.getElementById("options-menu-link");
this.classList.toggle("opened");
if (tutorial.style.maxHeight) {
tutorial.style.opacity = 0;
tutorial.style.maxHeight = null;
tutorialLink.style.opacity = 0;
tutorialLink.style.maxHeight = null;
tutorialLink.style.pointerEvents = "none";
options.style.opacity = 0;
options.style.maxHeight = null;
optionsLink.style.opacity = 0;
optionsLink.style.maxHeight = null;
optionsLink.style.pointerEvents = "none";
Engine.toggleMainMenuHeader(false,
[tutorial, options],
[tutorialLink, optionsLink]
);
} else {
tutorial.style.maxHeight = tutorial.scrollHeight + "px";
tutorial.style.opacity = 1;
tutorialLink.style.maxHeight = tutorialLink.scrollHeight + "px";
tutorialLink.style.opacity = 1;
tutorialLink.style.pointerEvents = "auto";
options.style.maxHeight = options.scrollHeight + "px";
options.style.opacity = 1;
optionsLink.style.maxHeight = optionsLink.scrollHeight + "px";
optionsLink.style.opacity = 1;
optionsLink.style.pointerEvents = "auto";
Engine.toggleMainMenuHeader(true,
[tutorial, options],
[tutorialLink, optionsLink]
);
}
}