More UI updates

- infiltration: added colours, updated spacing and fixed alignment
- terminal prompt: added colour for the previous lines as well
- Active Scripts and Hacknet Nodes: money values have a gold colour now; minor spacing updates
- minor code refactoring
This commit is contained in:
Mat Jaworski 2018-09-03 22:10:00 +10:00
parent e2e0bee150
commit 0b0a3d366c
9 changed files with 165 additions and 116 deletions

@ -2,11 +2,15 @@ $fontFamily: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', '
$defaultFontSize: 16px;
/* COLORS */
$hacky-green: #adff2f;
$hacker-green: #adff2f;
$success-green: #3adb76;
$alert-red: #ff2929;
$money-gold: #ffd700;
/* Attributes */
$my-stat-hp-color: #dd3434;
$my-stat-money-color: #ffd700;
$my-stat-hack-color: $hacky-green;
$my-stat-cha-color: #a671d1;
$my-stat-int-color: #6495ed;
$my-stat-hp-color: #dd3434;
$my-stat-money-color: $money-gold;
$my-stat-hack-color: $hacker-green;
$my-stat-physical: #faffdf;
$my-stat-cha-color: #a671d1;
$my-stat-int-color: #6495ed;

@ -200,38 +200,37 @@
.active-scripts-script-header {
background-color: #555;
color: var(--my-font-color);
padding: 4px;
padding-left: 10px;
padding: 4px 25px 4px 10px;
cursor: pointer;
width: auto;
text-align: left;
border: none;
outline: none;
}
position: relative;
.active-scripts-script-header:hover,
.active-scripts-script-header.active:hover {
background-color: #666;
}
&:after {
content: '\02795'; /* "plus" sign (+) */
font-size: $defaultFontSize * 0.8125;
float: right;
margin-left: 5px;
color: transparent;
text-shadow: 0 0 0 var(--my-font-color);
position: absolute;
bottom: 4px;
}
.active-scripts-script-header.active {
background-color: #555;
}
&.active:after {
content: "\2796"; /* "minus" sign (-) */
}
.active-scripts-script-header:after {
content: '\02795'; /* "plus" sign (+) */
font-size: $defaultFontSize * 0.8125;
float: right;
margin-left: 5px;
color: transparent;
text-shadow: 0 0 0 var(--my-font-color);
}
&:hover,
&.active:hover {
background-color: #666;
}
.active-scripts-script-header.active:after {
content: "\2796"; /* "minus" sign (-) */
font-size: $defaultFontSize * 0.8125;
float: right;
margin-left: 5px;
&.active {
background-color: #555;
}
}
.active-scripts-script-panel {
@ -405,8 +404,8 @@
#faction-container p,
#faction-container pre {
padding: 6px;
margin: 6px;
padding: 4px 6px;
margin: 4px 6px;
}
#faction-container pre {
@ -522,6 +521,11 @@
#infiltration-container {
position: fixed;
padding: 6px;
span {
margin: 0;
padding: 0;
}
}
#infiltration-left-panel,
@ -544,6 +548,10 @@
margin: 4px;
}
#infiltration-buttons {
margin-top: 20px;
}
#infiltration-buttons .a-link-button {
display: inline;
width: 25%;

@ -163,14 +163,14 @@ a:visited {
-ms-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
.a-link-button:hover {
background-color: #666;
}
&:hover {
background-color: #666;
}
.a-link-button:active {
@include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
&:active {
@include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
}
}
/* Make anchor tags ("a" elements) inactive (not clickable) */
@ -182,16 +182,18 @@ a:visited {
margin: 5px;
border: 1px solid #333;
cursor: default;
}
.a-link-button-inactive:hover .tooltiptext,
.a-link-button-inactive:hover .tooltiptexthigh,
.a-link-button-inactive:hover .tooltiptextleft {
visibility: visible;
}
&:hover {
.tooltiptext,
.tooltiptexthigh,
.tooltiptextleft {
visibility: visible;
}
}
.a-link-button-inactive:active {
pointer-events: none;
&:active {
pointer-events: none;
}
}
/* Make anchor tags ("a" elements) for activated actions */
@ -203,16 +205,18 @@ a:visited {
margin: 5px;
border: 1px solid #0a0;
cursor: default;
}
.a-link-button-bought:hover .tooltiptext,
.a-link-button-bought:hover .tooltiptexthigh,
.a-link-button-bought:hover .tooltiptextleft {
visibility: visible;
}
&:hover {
.tooltiptext,
.tooltiptexthigh,
.tooltiptextleft {
visibility: visible;
}
}
.a-link-button-bought:active {
pointer-events: none;
&:active {
pointer-events: none;
}
}
.dropdown {
@ -253,22 +257,23 @@ a:visited {
/* Tool tips (when hovering over an element */
.tooltip {
position: relative;
display: inline-block;
}
position: relative;
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: var(--my-background-color);
border: 2px solid var(--my-highlight-color);
color: #fff;
text-align: center;
padding: 4px;
left: 101%;
.tooltiptext {
visibility: hidden;
width: 300px;
background-color: var(--my-background-color);
border: 2px solid var(--my-highlight-color);
color: #fff;
text-align: center;
padding: 4px;
left: 101%;
position: absolute;
z-index: 99;
pointer-events: none;
position: absolute;
z-index: 99;
}
}
/* Same thing as a normal tooltip except its a bit higher */
@ -287,7 +292,7 @@ a:visited {
z-index: 99;
}
/* Similar to a normal tooltip except its positioned on the left of the elemnt
/* Similar to a normal tooltip except its positioned on the left of the element
rather than the right to avoid exceeding the elements normal width */
.tooltip .tooltiptextleft {
visibility: hidden;
@ -460,12 +465,12 @@ a:visited {
width: auto;
max-width: 280px;
overflow: auto; /* Enable scroll if needed */
background-color: #393636; /* Fallback color */
background-color: rgba(57, 54, 54, 0.9); /* Fallback color */
z-index: 1;
}
#character-overview-text {
color: #faffdf;
color: $my-stat-physical;
table {
border-collapse: collapse;
@ -536,10 +541,10 @@ a:visited {
cursor: pointer;
color: #fff;
text-decoration: underline;
}
.scan-analyze-link:hover {
text-decoration: none;
&:hover {
text-decoration: none;
}
}
/* Accordion menus (Header with collapsible panel) */
@ -572,7 +577,7 @@ a:visited {
color: transparent;
text-shadow: 0 0 0 #fff;
position: absolute;
bottom: 3px;
bottom: 5px;
right: 6px;
}
@ -603,3 +608,30 @@ a:visited {
margin: 0;
padding: 0;
}
/* Helper Classes */
.hacker-green {
color: $hacker-green;
}
.money-gold {
color: $money-gold;
}
.failure {
color: $alert-red;
text-shadow: 0 0 0 $alert-red;
}
.success {
color: $success-green;
text-shadow: 0 0 0 $success-green;
}
.physical-yellow {
color: $my-stat-physical;
}
.charisma-purple {
color: $my-stat-cha-color;
}

@ -19,6 +19,12 @@
overflow-y: scroll;
background-color: var(--my-background-color);
table-layout: fixed;
.prompt {
color: var(--my-prompt-color);
margin: 0;
padding: 0;
}
}
#terminal-input {
@ -51,7 +57,6 @@
}
#terminal-input-header {
color: var(--my-prompt-color);
white-space: pre;
}

@ -188,9 +188,9 @@
provides information about each script's production. The scripts are categorized by the hostname of the servers on which
they are running. </p>
<p id="active-scripts-total-prod">Total online production of
Active scripts: <span id="active-scripts-total-production-active">$0.000</span> / sec<br />
Total online production since last Aug installation: <span id="active-scripts-total-prod-aug-total">$0.000</span>
(<span id="active-scripts-total-prod-aug-avg">$0.000</span> / sec)</p>
Active scripts: <span class="money-gold"><span id="active-scripts-total-production-active">$0.000</span> / sec</span><br />
Total online production since last Aug installation: <span id="active-scripts-total-prod-aug-total" class="money-gold">$0.000</span>
(<span class="money-gold"><span id="active-scripts-total-prod-aug-avg">$0.000</span> / sec</span>)</p>
<ul class="active-scripts-list" id="active-scripts-list" style="list-style: none;">
</ul>
</div>
@ -214,8 +214,8 @@
<br>
<div id="hacknet-nodes-money-multipliers-div">
<p id="hacknet-nodes-money">
<span>Money:</span><span id="hacknet-nodes-player-money"></span><br/>
<span>Total Hacknet Node Production:</span><span id="hacknet-nodes-total-production"></span>
<span>Money:</span><span id="hacknet-nodes-player-money" class="money-gold"></span><br/>
<span>Total Hacknet Node Production:</span><span id="hacknet-nodes-total-production" class="money-gold"></span>
</p>
<span id="hacknet-nodes-multipliers">
<a id="hacknet-nodes-1x-multiplier" class="a-link-button-inactive"> x1 </a>

@ -162,7 +162,7 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationKill(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY killed the security bots! Unfortunately you alerted the " +
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> killed the security bots! Unfortunately you alerted the " +
"rest of the facility's security. The facility's security " +
"level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
Player.karma -= 1;
@ -170,7 +170,7 @@ function nextInfiltrationLevel(inst) {
return false;
} else {
var dmgTaken = Math.max(1, Math.round(1.5 * inst.securityLevel / Player.defense));
writeInfiltrationStatusText("You FAILED to kill the security bots. The bots fight back " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to kill the security bots. The bots fight back " +
"and raise the alarm! You take " + dmgTaken + " damage and " +
"the facility's security level increases by " +
formatNumber((res[1]*100)-100, 2).toString() + "%");
@ -186,12 +186,12 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationAssassinate(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY assassinated the security bots without being detected!");
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> assassinated the security bots without being detected!");
Player.karma -= 1;
endInfiltrationLevel(inst);
return false;
} else {
writeInfiltrationStatusText("You FAILED to assassinate the security bots. The bots have not detected " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to assassinate the security bots. The bots have not detected " +
"you but are now more alert for an intruder. The facility's security level " +
"has increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
}
@ -209,7 +209,7 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationKill(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY killed the security guard! Unfortunately you alerted the " +
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> killed the security guard! Unfortunately you alerted the " +
"rest of the facility's security. The facility's security " +
"level has increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
Player.karma -= 3;
@ -218,7 +218,7 @@ function nextInfiltrationLevel(inst) {
return false;
} else {
var dmgTaken = Math.max(1, Math.round(inst.securityLevel / Player.defense));
writeInfiltrationStatusText("You FAILED to kill the security guard. The guard fights back " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to kill the security guard. The guard fights back " +
"and raises the alarm! You take " + dmgTaken + " damage and " +
"the facility's security level has increased by " +
formatNumber((res[1]*100)-100, 2).toString() + "%");
@ -236,13 +236,13 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationAssassinate(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY assassinated the security guard without being detected!");
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> assassinated the security guard without being detected!");
Player.karma -= 3;
++Player.numPeopleKilled;
endInfiltrationLevel(inst);
return false;
} else {
writeInfiltrationStatusText("You FAILED to assassinate the security guard. The guard has not detected " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to assassinate the security guard. The guard has not detected " +
"you but is now more alert for an intruder. The facility's security level " +
"has increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
}
@ -259,14 +259,14 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationKnockout(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY knocked out the security guard! " +
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> knocked out the security guard! " +
"Unfortunately you made a lot of noise and alerted other security.");
writeInfiltrationStatusText("The facility's security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
endInfiltrationLevel(inst);
return false;
} else {
var dmgTaken = Math.max(1, Math.round(inst.securityLevel / Player.defense));
writeInfiltrationStatusText("You FAILED to knockout the security guard. The guard " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to knockout the security guard. The guard " +
"raises the alarm and fights back! You take " + dmgTaken + " damage and " +
"the facility's security level increases by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
if (Player.takeDamage(dmgTaken)) {
@ -282,13 +282,13 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationStealthKnockout(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY knocked out the security guard without making " +
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> knocked out the security guard without making " +
"any noise!");
endInfiltrationLevel(inst);
return false;
} else {
var dmgTaken = Math.max(1, Math.round(inst.securityLevel / Player.defense));
writeInfiltrationStatusText("You FAILED to stealthily knockout the security guard. The guard " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to stealthily knockout the security guard. The guard " +
"raises the alarm and fights back! You take " + dmgTaken + " damage and " +
"the facility's security level increases by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
if (Player.takeDamage(dmgTaken)) {
@ -304,12 +304,12 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationHack(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY hacked and disabled the security system!");
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> hacked and disabled the security system!");
writeInfiltrationStatusText("The facility's security level increased by " + ((res[1]*100) - 100).toString() + "%");
endInfiltrationLevel(inst);
return false;
} else {
writeInfiltrationStatusText("You FAILED to hack the security system. The facility's " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to hack the security system. The facility's " +
"security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
}
updateInfiltrationButtons(inst, scenario);
@ -321,12 +321,12 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationDestroySecurity(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY and violently destroy the security system!");
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> and violently destroy the security system!");
writeInfiltrationStatusText("The facility's security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
endInfiltrationLevel(inst);
return false;
} else {
writeInfiltrationStatusText("You FAILED to destroy the security system. The facility's " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to destroy the security system. The facility's " +
"security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
}
updateInfiltrationButtons(inst, scenario);
@ -338,11 +338,11 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationSneak(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY sneak past the security undetected!");
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> sneak past the security undetected!");
endInfiltrationLevel(inst);
return false;
} else {
writeInfiltrationStatusText("You FAILED and were detected while trying to sneak past security! The facility's " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> and were detected while trying to sneak past security! The facility's " +
"security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
}
updateInfiltrationButtons(inst, scenario);
@ -354,12 +354,12 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationPickLockedDoor(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY pick the locked door!");
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> pick the locked door!");
writeInfiltrationStatusText("The facility's security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
endInfiltrationLevel(inst);
return false;
} else {
writeInfiltrationStatusText("You FAILED to pick the locked door. The facility's security level " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to pick the locked door. The facility's security level " +
"increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
}
updateInfiltrationButtons(inst, scenario);
@ -377,13 +377,13 @@ function nextInfiltrationLevel(inst) {
}
var res = attemptInfiltrationBribe(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY bribed a guard to let you through " +
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> bribed a guard to let you through " +
"to the next clearance level for $" + bribeAmt);
Player.loseMoney(bribeAmt);
endInfiltrationLevel(inst);
return false;
} else {
writeInfiltrationStatusText("You FAILED to bribe a guard! The guard is alerting " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to bribe a guard! The guard is alerting " +
"other security guards about your presence! The facility's " +
"security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
}
@ -396,12 +396,12 @@ function nextInfiltrationLevel(inst) {
if (!e.isTrusted) {return false;}
var res = attemptInfiltrationEscape(inst);
if (res[0]) {
writeInfiltrationStatusText("You SUCCESSFULLY escape from the facility with the stolen classified " +
writeInfiltrationStatusText("You <span class='success'>SUCCESSFULLY</span> escape from the facility with the stolen classified " +
"documents and company secrets!");
endInfiltration(inst, true);
return false;
} else {
writeInfiltrationStatusText("You FAILED to escape from the facility. You took 1 damage. The facility's " +
writeInfiltrationStatusText("You <span class='failure'>FAILED</span> to escape from the facility. You took 1 damage. The facility's " +
"security level increased by " + formatNumber((res[1]*100)-100, 2).toString() + "%");
if (Player.takeDamage(1)) {
endInfiltration(inst, false);
@ -469,17 +469,17 @@ function updateInfiltrationLevelText(inst) {
var expMultiplier = 2 * inst.clearanceLevel / inst.maxClearanceLevel;
document.getElementById("infiltration-level-text").innerHTML =
"Facility name: " + inst.companyName + "<br>" +
"Facility name:   " + inst.companyName + "<br>" +
"Clearance Level: " + inst.clearanceLevel + "<br>" +
"Security Level: " + formatNumber(inst.securityLevel, 3) + "<br><br>" +
"Security Level:  " + formatNumber(inst.securityLevel, 3) + "<br><br>" +
"Total reputation value of secrets stolen: " + formatNumber(totalValue, 3) + "<br>" +
"Total monetary value of secrets stolen: $" + formatNumber(totalMoneyValue, 2) + "<br><br>" +
"Total monetary value of secrets stolen:  $" + formatNumber(totalMoneyValue, 2) + "<br><br>" +
"Hack exp gained: " + formatNumber(inst.hackingExpGained * expMultiplier, 3) + "<br>" +
"Str exp gained: " + formatNumber(inst.strExpGained * expMultiplier, 3) + "<br>" +
"Def exp gained: " + formatNumber(inst.defExpGained * expMultiplier, 3) + "<br>" +
"Dex exp gained: " + formatNumber(inst.dexExpGained * expMultiplier, 3) + "<br>" +
"Agi exp gained: " + formatNumber(inst.agiExpGained * expMultiplier, 3) + "<br>" +
"Cha exp gained: " + formatNumber(inst.chaExpGained * expMultiplier, 3);
"Str exp gained:  " + formatNumber(inst.strExpGained * expMultiplier, 3) + "<br>" +
"Def exp gained:  " + formatNumber(inst.defExpGained * expMultiplier, 3) + "<br>" +
"Dex exp gained:  " + formatNumber(inst.dexExpGained * expMultiplier, 3) + "<br>" +
"Agi exp gained:  " + formatNumber(inst.agiExpGained * expMultiplier, 3) + "<br>" +
"Cha exp gained:  " + formatNumber(inst.chaExpGained * expMultiplier, 3);
}
function updateInfiltrationButtons(inst, scenario) {

@ -1001,7 +1001,7 @@ function displayLocationContent() {
slumsDealDrugs.innerHTML = "Deal Drugs (" + (drugsChance*100).toFixed(3) + "% chance of success)";
slumsDealDrugs.innerHTML += '<span class="tooltiptext"> Attempt to deal drugs </span>';
slumsBondForgery.style.display = "block";
slumsBondForgery.innerHTML = "Bond Forgery(" + (bondChance*100).toFixed(3) + "% chance of success)";
slumsBondForgery.innerHTML = "Bond Forgery (" + (bondChance*100).toFixed(3) + "% chance of success)";
slumsBondForgery.innerHTML += "<span class='tooltiptext'> Attempt to forge corporate bonds</span>";
slumsTrafficArms.style.display = "block";
slumsTrafficArms.innerHTML = "Traffick Illegal Arms (" + (armsChance*100).toFixed(3) + "% chance of success)";

@ -65,10 +65,10 @@ $(document).keydown(function(event) {
event.preventDefault(); //Prevent newline from being entered in Script Editor
var command = $('input[class=terminal-input]').val();
post(
"[" +
"<span class='prompt'>[" +
(FconfSettings.ENABLE_TIMESTAMPS ? getTimestamp() + " " : "") +
Player.getCurrentServer().hostname +
" ~]> " + command
" ~]&gt;</span> " + command
);
if (command.length > 0) {
@ -520,7 +520,7 @@ let Terminal = {
resetTerminalInput: function() {
document.getElementById("terminal-input-td").innerHTML =
"<div id='terminal-input-header'>[" + Player.getCurrentServer().hostname + " ~]" + "$ </div>" +
"<div id='terminal-input-header' class='prompt'>[" + Player.getCurrentServer().hostname + " ~]" + "$ </div>" +
'<input type="text" id="terminal-input-text-box" class="terminal-input" tabindex="1"/>';
var hdr = document.getElementById("terminal-input-header");
hdr.style.display = "inline";

@ -7,4 +7,4 @@ export function Generic_toJSON(ctorName: string, obj: object, keys?: string[]):
export function Reviver(key, value: IReviverValue);
export namespace Reviver {
export var constructors: any;
}
}