From 0b0a3d366ca6f35e296e31671bb90c7157df841c Mon Sep 17 00:00:00 2001 From: Mat Jaworski Date: Mon, 3 Sep 2018 22:10:00 +1000 Subject: [PATCH] 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 --- css/_theme.scss | 16 +++--- css/menupages.scss | 58 ++++++++++++--------- css/styles.scss | 116 ++++++++++++++++++++++++++--------------- css/terminal.scss | 7 ++- index.html | 10 ++-- src/Infiltration.js | 64 +++++++++++------------ src/Location.js | 2 +- src/Terminal.js | 6 +-- utils/JSONReviver.d.ts | 2 +- 9 files changed, 165 insertions(+), 116 deletions(-) diff --git a/css/_theme.scss b/css/_theme.scss index 75134be78..54c868bca 100644 --- a/css/_theme.scss +++ b/css/_theme.scss @@ -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; diff --git a/css/menupages.scss b/css/menupages.scss index cd35bec4a..e949b0fce 100644 --- a/css/menupages.scss +++ b/css/menupages.scss @@ -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%; diff --git a/css/styles.scss b/css/styles.scss index b725b4fff..d2156b3d8 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -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; +} diff --git a/css/terminal.scss b/css/terminal.scss index cbc54b782..856df717c 100644 --- a/css/terminal.scss +++ b/css/terminal.scss @@ -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; } diff --git a/index.html b/index.html index 66439fff0..90bcab019 100644 --- a/index.html +++ b/index.html @@ -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.

Total online production of - Active scripts: $0.000 / sec
- Total online production since last Aug installation: $0.000 - ($0.000 / sec)

+ Active scripts: $0.000 / sec
+ Total online production since last Aug installation: $0.000 + ($0.000 / sec)

@@ -214,8 +214,8 @@

- Money:
- Total Hacknet Node Production: + Money:
+ Total Hacknet Node Production:

x1 diff --git a/src/Infiltration.js b/src/Infiltration.js index feb8b0609..0e4a0f2cd 100644 --- a/src/Infiltration.js +++ b/src/Infiltration.js @@ -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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 SUCCESSFULLY 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 FAILED 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 + "
" + + "Facility name:   " + inst.companyName + "
" + "Clearance Level: " + inst.clearanceLevel + "
" + - "Security Level: " + formatNumber(inst.securityLevel, 3) + "

" + + "Security Level:  " + formatNumber(inst.securityLevel, 3) + "

" + "Total reputation value of secrets stolen: " + formatNumber(totalValue, 3) + "
" + - "Total monetary value of secrets stolen: $" + formatNumber(totalMoneyValue, 2) + "

" + + "Total monetary value of secrets stolen:  $" + formatNumber(totalMoneyValue, 2) + "

" + "Hack exp gained: " + formatNumber(inst.hackingExpGained * expMultiplier, 3) + "
" + - "Str exp gained: " + formatNumber(inst.strExpGained * expMultiplier, 3) + "
" + - "Def exp gained: " + formatNumber(inst.defExpGained * expMultiplier, 3) + "
" + - "Dex exp gained: " + formatNumber(inst.dexExpGained * expMultiplier, 3) + "
" + - "Agi exp gained: " + formatNumber(inst.agiExpGained * expMultiplier, 3) + "
" + - "Cha exp gained: " + formatNumber(inst.chaExpGained * expMultiplier, 3); + "Str exp gained:  " + formatNumber(inst.strExpGained * expMultiplier, 3) + "
" + + "Def exp gained:  " + formatNumber(inst.defExpGained * expMultiplier, 3) + "
" + + "Dex exp gained:  " + formatNumber(inst.dexExpGained * expMultiplier, 3) + "
" + + "Agi exp gained:  " + formatNumber(inst.agiExpGained * expMultiplier, 3) + "
" + + "Cha exp gained:  " + formatNumber(inst.chaExpGained * expMultiplier, 3); } function updateInfiltrationButtons(inst, scenario) { diff --git a/src/Location.js b/src/Location.js index f7cb96f31..4abaee68f 100644 --- a/src/Location.js +++ b/src/Location.js @@ -1001,7 +1001,7 @@ function displayLocationContent() { slumsDealDrugs.innerHTML = "Deal Drugs (" + (drugsChance*100).toFixed(3) + "% chance of success)"; slumsDealDrugs.innerHTML += ' Attempt to deal drugs '; 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 += " Attempt to forge corporate bonds"; slumsTrafficArms.style.display = "block"; slumsTrafficArms.innerHTML = "Traffick Illegal Arms (" + (armsChance*100).toFixed(3) + "% chance of success)"; diff --git a/src/Terminal.js b/src/Terminal.js index d87277a60..996f84aa8 100644 --- a/src/Terminal.js +++ b/src/Terminal.js @@ -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( - "[" + + "[" + (FconfSettings.ENABLE_TIMESTAMPS ? getTimestamp() + " " : "") + Player.getCurrentServer().hostname + - " ~]> " + command + " ~]> " + command ); if (command.length > 0) { @@ -520,7 +520,7 @@ let Terminal = { resetTerminalInput: function() { document.getElementById("terminal-input-td").innerHTML = - "
[" + Player.getCurrentServer().hostname + " ~]" + "$
" + + "
[" + Player.getCurrentServer().hostname + " ~]" + "$
" + ''; var hdr = document.getElementById("terminal-input-header"); hdr.style.display = "inline"; diff --git a/utils/JSONReviver.d.ts b/utils/JSONReviver.d.ts index 08ff98bd4..f4405df83 100644 --- a/utils/JSONReviver.d.ts +++ b/utils/JSONReviver.d.ts @@ -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; -} \ No newline at end of file +}