Fixed issue in Hacking Missions where nodes weren't easily selectable

This commit is contained in:
danielyxie 2017-10-13 10:19:42 -05:00
parent 4186326771
commit 8f0dad0d10
5 changed files with 140 additions and 46 deletions

@ -29,6 +29,10 @@
align-self: center; align-self: center;
justify-self: center; justify-self: center;
display:inline-block; display:inline-block;
}
.hack-mission-node p {
margin-top:8px;
color:white; color:white;
font-size:12px; font-size:12px;
text-align:center; text-align:center;

@ -398,3 +398,59 @@ a:link, a:visited {
.scan-analyze-link:hover { .scan-analyze-link:hover {
text-decoration:none; text-decoration:none;
} }
/* Accordion menus (Header with collapsible panel) */
.accordion-header {
background-color: #444;
font-size: 20px;
color: white;
margin: 6px 6px 0px 6px;
padding: 6px;
cursor: pointer;
width: 80%;
text-align: left;
border: none;
outline: none;
}
.accordion-header.active,
.accordion-header:hover {
background-color: #555;
}
.accordion-header.active:hover {
background-color: #666;
}
.accordion-header:after {
content: '\02795'; /* "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.accordion-header.active:after {
content: "\2796"; /* "minus" sign (-) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.accordion-panel {
margin: 0px 6px 6px 6px;
padding: 0px 6px 6px 6px;
width: 75%;
margin-left: 5%;
display: none;
background-color: #555;
overflow:auto;
}
.accordion-panel div,
.accordion-panel ul,
.accordion-panel p,
.accordion-panel ul > li {
background-color: #555;
}

63
dist/bundle.js vendored

@ -3616,7 +3616,8 @@ let CONSTANTS = {
"-Rebalanced BitNode-2 so that Crime and Infiltration are more profitable but hacking is less profitable. Infiltration also gives more faction rep<br>" + "-Rebalanced BitNode-2 so that Crime and Infiltration are more profitable but hacking is less profitable. Infiltration also gives more faction rep<br>" +
"-Rebalanced BitNode-4 so that hacking is slightly less profitable<br>" + "-Rebalanced BitNode-4 so that hacking is slightly less profitable<br>" +
"-Rebalanced BitNode-5 so that Infiltration is more profitable and gives more faction rep<br>" + "-Rebalanced BitNode-5 so that Infiltration is more profitable and gives more faction rep<br>" +
"-Rebalanced BitNode-11 so that Crime and Infiltration are more profitable. Infiltration also gives more faction rep.<br>" "-Rebalanced BitNode-11 so that Crime and Infiltration are more profitable. Infiltration also gives more faction rep.<br>" +
"-Fixed an annoying issue in Hacking Missions where sometimes you would click a Node but it wouldnt actually get selected<br>"
} }
@ -36461,12 +36462,12 @@ HackingMission.prototype.createNodeDomElement = function(nodeObj) {
var txt; var txt;
switch (nodeObj.type) { switch (nodeObj.type) {
case NodeTypes.Core: case NodeTypes.Core:
txt = "CPU Core<br>" + "HP: " + txt = "<p>CPU Core<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-cpu-node"); nodeDiv.classList.add("hack-mission-cpu-node");
break; break;
case NodeTypes.Firewall: case NodeTypes.Firewall:
txt = "Firewall<br>" + "HP: " + txt = "<p>Firewall<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-firewall-node"); nodeDiv.classList.add("hack-mission-firewall-node");
break; break;
@ -36476,7 +36477,7 @@ HackingMission.prototype.createNodeDomElement = function(nodeObj) {
nodeDiv.classList.add("hack-mission-database-node"); nodeDiv.classList.add("hack-mission-database-node");
break; break;
case NodeTypes.Spam: case NodeTypes.Spam:
txt = "Spam<br>" + "HP: " + txt = "<p>Spam<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-spam-node"); nodeDiv.classList.add("hack-mission-spam-node");
break; break;
@ -36487,14 +36488,14 @@ HackingMission.prototype.createNodeDomElement = function(nodeObj) {
break; break;
case NodeTypes.Shield: case NodeTypes.Shield:
default: default:
txt = "<br>Shield<br>" + "HP: " + txt = "<p>Shield<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-shield-node"); nodeDiv.classList.add("hack-mission-shield-node");
break; break;
} }
txt += "<br>Atk: " + Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.atk, 1) + txt += "<br>Atk: " + Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.atk, 1) +
"<br>Def: " + Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.def, 1); "<br>Def: " + Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.def, 1) + "</p>";
nodeDiv.innerHTML = txt; nodeDiv.innerHTML = txt;
} }
@ -36512,11 +36513,11 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
var txt; var txt;
switch (nodeObj.type) { switch (nodeObj.type) {
case NodeTypes.Core: case NodeTypes.Core:
txt = "CPU Core<br>" + "HP: " + txt = "<p>CPU Core<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
break; break;
case NodeTypes.Firewall: case NodeTypes.Firewall:
txt = "Firewall<br>" + "HP: " + txt = "<p>Firewall<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
break; break;
case NodeTypes.Database: case NodeTypes.Database:
@ -36524,7 +36525,7 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
break; break;
case NodeTypes.Spam: case NodeTypes.Spam:
txt = "Spam<br>" + "HP: " + txt = "<p>Spam<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
break; break;
case NodeTypes.Transfer: case NodeTypes.Transfer:
@ -36533,7 +36534,7 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
break; break;
case NodeTypes.Shield: case NodeTypes.Shield:
default: default:
txt = "<br>Shield<br>" + "HP: " + txt = "<p>Shield<br>" + "HP: " +
Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1); Object(__WEBPACK_IMPORTED_MODULE_6__utils_StringHelperFunctions_js__["c" /* formatNumber */])(nodeObj.hp, 1);
break; break;
} }
@ -36543,8 +36544,11 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
if (nodeObj.action) { if (nodeObj.action) {
txt += "<br>" + nodeObj.action; txt += "<br>" + nodeObj.action;
} }
//txt += "</p>"; txt += "</p>";
nodeDiv.innerHTML = txt; nodeDiv.innerHTML = txt;
if (nodeObj.type === NodeTypes.Core || nodeObj.type === NodeTypes.Transfer) {
this.configurePlayerNodeElement(nodeObj.el, true);
}
} }
//Gets a Node DOM element's corresponding Node object using its //Gets a Node DOM element's corresponding Node object using its
@ -36571,23 +36575,38 @@ HackingMission.prototype.getNodeFromElement = function(el) {
return this.map[x][y]; return this.map[x][y];
} }
function selectNode(hackMissionInst, el) {
var nodeObj = hackMissionInst.getNodeFromElement(el);
if (nodeObj === null) {console.log("Error getting Node object");}
if (!nodeObj.plyrCtrl) {return;}
if (hackMissionInst.selectedNode instanceof Node) {
hackMissionInst.selectedNode.deselect(hackMissionInst.actionButtons);
hackMissionInst.selectedNode = null;
}
console.log("Selecting node :" + el.id);
nodeObj.select(hackMissionInst.actionButtons);
hackMissionInst.selectedNode = nodeObj;
}
//Configures a DOM element representing a player-owned node to //Configures a DOM element representing a player-owned node to
//be selectable and actionable //be selectable and actionable
//Note: Does NOT change its css class. This is handled by Node.setControlledBy... //Note: Does NOT change its css class. This is handled by Node.setControlledBy...
HackingMission.prototype.configurePlayerNodeElement = function(el) { HackingMission.prototype.configurePlayerNodeElement = function(el, reconfigureChildOnly=false) {
var nodeObj = this.getNodeFromElement(el); var nodeObj = this.getNodeFromElement(el);
if (nodeObj === null) {console.log("Error getting Node object");} if (nodeObj === null) {console.log("Error getting Node object");}
//Add event listener //Add event listener
el.addEventListener("click", ()=>{ function selectNodeWrapper() {
if (this.selectedNode instanceof Node) { selectNode(this, el);
this.selectedNode.deselect(this.actionButtons); }
this.selectedNode = null; if (!reconfigureChildOnly) {
} el.addEventListener("click", selectNodeWrapper);
console.log("Selecting node :" + el.id); }
nodeObj.select(this.actionButtons);
this.selectedNode = nodeObj; if (el.firstChild) {
}); el.firstChild.addEventListener("click", selectNodeWrapper);
}
} }
//Configures a DOM element representing an enemy-node by removing //Configures a DOM element representing an enemy-node by removing
@ -36598,8 +36617,6 @@ HackingMission.prototype.configureEnemyNodeElement = function(el) {
if (this.selectedNode == nodeObj) { if (this.selectedNode == nodeObj) {
nodeObj.deselect(this.actionButtons); nodeObj.deselect(this.actionButtons);
} }
//TODO Need to remove event listeners
} }
//Returns bool indicating whether a node is reachable by player //Returns bool indicating whether a node is reachable by player

@ -1058,7 +1058,8 @@ let CONSTANTS = {
"-Rebalanced BitNode-2 so that Crime and Infiltration are more profitable but hacking is less profitable. Infiltration also gives more faction rep<br>" + "-Rebalanced BitNode-2 so that Crime and Infiltration are more profitable but hacking is less profitable. Infiltration also gives more faction rep<br>" +
"-Rebalanced BitNode-4 so that hacking is slightly less profitable<br>" + "-Rebalanced BitNode-4 so that hacking is slightly less profitable<br>" +
"-Rebalanced BitNode-5 so that Infiltration is more profitable and gives more faction rep<br>" + "-Rebalanced BitNode-5 so that Infiltration is more profitable and gives more faction rep<br>" +
"-Rebalanced BitNode-11 so that Crime and Infiltration are more profitable. Infiltration also gives more faction rep.<br>" "-Rebalanced BitNode-11 so that Crime and Infiltration are more profitable. Infiltration also gives more faction rep.<br>" +
"-Fixed an annoying issue in Hacking Missions where sometimes you would click a Node but it wouldnt actually get selected<br>"
} }
export {CONSTANTS}; export {CONSTANTS};

@ -696,12 +696,12 @@ HackingMission.prototype.createNodeDomElement = function(nodeObj) {
var txt; var txt;
switch (nodeObj.type) { switch (nodeObj.type) {
case NodeTypes.Core: case NodeTypes.Core:
txt = "CPU Core<br>" + "HP: " + txt = "<p>CPU Core<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-cpu-node"); nodeDiv.classList.add("hack-mission-cpu-node");
break; break;
case NodeTypes.Firewall: case NodeTypes.Firewall:
txt = "Firewall<br>" + "HP: " + txt = "<p>Firewall<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-firewall-node"); nodeDiv.classList.add("hack-mission-firewall-node");
break; break;
@ -711,7 +711,7 @@ HackingMission.prototype.createNodeDomElement = function(nodeObj) {
nodeDiv.classList.add("hack-mission-database-node"); nodeDiv.classList.add("hack-mission-database-node");
break; break;
case NodeTypes.Spam: case NodeTypes.Spam:
txt = "Spam<br>" + "HP: " + txt = "<p>Spam<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-spam-node"); nodeDiv.classList.add("hack-mission-spam-node");
break; break;
@ -722,14 +722,14 @@ HackingMission.prototype.createNodeDomElement = function(nodeObj) {
break; break;
case NodeTypes.Shield: case NodeTypes.Shield:
default: default:
txt = "<br>Shield<br>" + "HP: " + txt = "<p>Shield<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
nodeDiv.classList.add("hack-mission-shield-node"); nodeDiv.classList.add("hack-mission-shield-node");
break; break;
} }
txt += "<br>Atk: " + formatNumber(nodeObj.atk, 1) + txt += "<br>Atk: " + formatNumber(nodeObj.atk, 1) +
"<br>Def: " + formatNumber(nodeObj.def, 1); "<br>Def: " + formatNumber(nodeObj.def, 1) + "</p>";
nodeDiv.innerHTML = txt; nodeDiv.innerHTML = txt;
} }
@ -747,11 +747,11 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
var txt; var txt;
switch (nodeObj.type) { switch (nodeObj.type) {
case NodeTypes.Core: case NodeTypes.Core:
txt = "CPU Core<br>" + "HP: " + txt = "<p>CPU Core<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
break; break;
case NodeTypes.Firewall: case NodeTypes.Firewall:
txt = "Firewall<br>" + "HP: " + txt = "<p>Firewall<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
break; break;
case NodeTypes.Database: case NodeTypes.Database:
@ -759,7 +759,7 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
break; break;
case NodeTypes.Spam: case NodeTypes.Spam:
txt = "Spam<br>" + "HP: " + txt = "<p>Spam<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
break; break;
case NodeTypes.Transfer: case NodeTypes.Transfer:
@ -768,7 +768,7 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
break; break;
case NodeTypes.Shield: case NodeTypes.Shield:
default: default:
txt = "<br>Shield<br>" + "HP: " + txt = "<p>Shield<br>" + "HP: " +
formatNumber(nodeObj.hp, 1); formatNumber(nodeObj.hp, 1);
break; break;
} }
@ -778,8 +778,11 @@ HackingMission.prototype.updateNodeDomElement = function(nodeObj) {
if (nodeObj.action) { if (nodeObj.action) {
txt += "<br>" + nodeObj.action; txt += "<br>" + nodeObj.action;
} }
//txt += "</p>"; txt += "</p>";
nodeDiv.innerHTML = txt; nodeDiv.innerHTML = txt;
if (nodeObj.type === NodeTypes.Core || nodeObj.type === NodeTypes.Transfer) {
this.configurePlayerNodeElement(nodeObj.el, true);
}
} }
//Gets a Node DOM element's corresponding Node object using its //Gets a Node DOM element's corresponding Node object using its
@ -806,23 +809,38 @@ HackingMission.prototype.getNodeFromElement = function(el) {
return this.map[x][y]; return this.map[x][y];
} }
function selectNode(hackMissionInst, el) {
var nodeObj = hackMissionInst.getNodeFromElement(el);
if (nodeObj === null) {console.log("Error getting Node object");}
if (!nodeObj.plyrCtrl) {return;}
if (hackMissionInst.selectedNode instanceof Node) {
hackMissionInst.selectedNode.deselect(hackMissionInst.actionButtons);
hackMissionInst.selectedNode = null;
}
console.log("Selecting node :" + el.id);
nodeObj.select(hackMissionInst.actionButtons);
hackMissionInst.selectedNode = nodeObj;
}
//Configures a DOM element representing a player-owned node to //Configures a DOM element representing a player-owned node to
//be selectable and actionable //be selectable and actionable
//Note: Does NOT change its css class. This is handled by Node.setControlledBy... //Note: Does NOT change its css class. This is handled by Node.setControlledBy...
HackingMission.prototype.configurePlayerNodeElement = function(el) { HackingMission.prototype.configurePlayerNodeElement = function(el, reconfigureChildOnly=false) {
var nodeObj = this.getNodeFromElement(el); var nodeObj = this.getNodeFromElement(el);
if (nodeObj === null) {console.log("Error getting Node object");} if (nodeObj === null) {console.log("Error getting Node object");}
//Add event listener //Add event listener
el.addEventListener("click", ()=>{ function selectNodeWrapper() {
if (this.selectedNode instanceof Node) { selectNode(this, el);
this.selectedNode.deselect(this.actionButtons); }
this.selectedNode = null; if (!reconfigureChildOnly) {
} el.addEventListener("click", selectNodeWrapper);
console.log("Selecting node :" + el.id); }
nodeObj.select(this.actionButtons);
this.selectedNode = nodeObj; if (el.firstChild) {
}); el.firstChild.addEventListener("click", selectNodeWrapper);
}
} }
//Configures a DOM element representing an enemy-node by removing //Configures a DOM element representing an enemy-node by removing
@ -833,8 +851,6 @@ HackingMission.prototype.configureEnemyNodeElement = function(el) {
if (this.selectedNode == nodeObj) { if (this.selectedNode == nodeObj) {
nodeObj.deselect(this.actionButtons); nodeObj.deselect(this.actionButtons);
} }
//TODO Need to remove event listeners
} }
//Returns bool indicating whether a node is reachable by player //Returns bool indicating whether a node is reachable by player