From 5f13bc63362c57c53afb1acc014095db91693faa Mon Sep 17 00:00:00 2001 From: Mat Jaworski Date: Thu, 30 Aug 2018 01:12:33 +1000 Subject: [PATCH 1/2] UI Enhancements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updates: – Character Overview box (top right corner) – redesigned and added colours to the attributes. – Added prompt colour in the terminal. – Minor copy fixes (grammar and typos). – Code formatting cleanup. – Character > Stats – Fixed spacing issue when Intelligence is not yet available – Main Menu – Adjusted the spacing and changed the border to outline to improve the readability. – Tooltip boxes (Firefox only) – fixed the issue when tooltips were generating additional spacing around the
tags. – Multiple general updates to UI to improve accessibility and readability. Aimed to improve the user experience when playing the game on a smaller screen resolutions. – Accordion/Dropdown buttons – improved the readability of the plus/minus icons. – Added .editorconfig with the most basic settings. --- .editorconfig | 13 ++++++ css/_theme.scss | 10 +++++ css/menupages.scss | 79 +++++++++++++++++---------------- css/popupboxes.scss | 12 ++--- css/styles.scss | 104 ++++++++++++++++++++++++++++++-------------- css/terminal.scss | 1 + index.html | 38 ++++++++-------- src/HacknetNode.js | 4 +- src/Player.js | 2 +- src/engine.js | 22 +++++----- 10 files changed, 177 insertions(+), 108 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..eba264699 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 4 +trim_trailing_whitespace = true +insert_final_newline = true + +[package.json] +indent_size = 2 + +[md] +trim_trailing_whitespace = false diff --git a/css/_theme.scss b/css/_theme.scss index e9ffd2225..75134be78 100644 --- a/css/_theme.scss +++ b/css/_theme.scss @@ -1,2 +1,12 @@ $fontFamily: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman'; $defaultFontSize: 16px; + +/* COLORS */ +$hacky-green: #adff2f; + +/* 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; diff --git a/css/menupages.scss b/css/menupages.scss index 8c9e475a1..64cd82939 100644 --- a/css/menupages.scss +++ b/css/menupages.scss @@ -22,17 +22,15 @@ #script-editor-container { background-color: transparent; } + #javascript-editor { margin: 10px; - height: 80%; width: 100%; margin-left: 6px; - padding-left: 6px; padding-top: 6px; padding-bottom: 6px; - border: 2px solid var(--my-highlight-color); z-index: 1; font-family: $fontFamily; @@ -101,9 +99,7 @@ resize: none; color: #fff; margin: 4px; - padding: 2px; - border: 2px solid var(--my-highlight-color); } @@ -225,15 +221,15 @@ .active-scripts-script-header:after { content: '\02795'; /* "plus" sign (+) */ font-size: $defaultFontSize * 0.8125; - color: var(--my-font-color); float: right; margin-left: 5px; + color: transparent; + text-shadow: 0 0 0 var(--my-font-color); } .active-scripts-script-header.active:after { content: "\2796"; /* "minus" sign (-) */ font-size: $defaultFontSize * 0.8125; - color: var(--my-font-color); float: right; margin-left: 5px; } @@ -291,6 +287,16 @@ float: left; overflow: hidden; white-space: nowrap; + + &.hacknet-node { + $boxShadowArgs: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); + @include boxShadow($boxShadowArgs); + + margin: 6px; + padding: 7px; + width: 35vw; + border: 2px solid var(--my-highlight-color); + } } #hacknet-nodes-list { @@ -316,16 +322,6 @@ display: inline-block; } -.hacknet-node { - $boxShadowArgs: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); - @include boxShadow($boxShadowArgs); - - margin: 6px; - padding: 6px; - width: 34vw; - border: 2px solid var(--my-highlight-color); -} - .hacknet-node-container { display: inline-table; } @@ -426,17 +422,14 @@ } /* Faction Augmentations */ -#faction-augmentations-container{ +#faction-augmentations-container { position: fixed; padding-top: 10px; -} -#faction-augmentations-container p, -#faction-augmentations-container a, -#faction-augmentations-container ul, -#faction-augmentations-container h1{ - margin: 8px; - padding: 4px; + p, a, ul, h1 { + margin: 8px; + padding: 4px; + } } /* World */ @@ -451,11 +444,20 @@ padding-top: 10px; } -.augmentations-list button, -.augmentations-list div { - color: var(--my-font-color); - padding: 8px; - text-decoration: none; +.augmentations-list { + button, + div { + color: var(--my-font-color); + text-decoration: none; + } + + button { + padding: 2px 5px; + } + + div { + padding: 6px; + } } /* Tutorial */ @@ -510,11 +512,12 @@ padding: 6px; } -#location-container * { +#location-container > * { margin: 10px 5px 10px 5px; } -#location-job-reputation, #location-company-favor { +#location-job-reputation, +#location-company-favor { display: inline; } @@ -523,6 +526,7 @@ position: fixed; padding: 6px; } + #infiltration-left-panel, #infiltration-right-panel { display: inline-block; @@ -552,6 +556,7 @@ #stock-market-container { position: fixed; padding: 6px; + p { font-size: $defaultFontSize * 0.8125; } @@ -559,9 +564,9 @@ font-size: $defaultFontSize * 0.875; } h2 { - margin-top:10px; - margin-left:10px; - display:block; + margin-top: 10px; + margin-left: 10px; + display: block; } } @@ -583,8 +588,8 @@ } #stock-market-watchlist-filter { - width:50%; - margin-left:10px; + width: 50%; + margin-left: 10px; } .stock-market-input { diff --git a/css/popupboxes.scss b/css/popupboxes.scss index 60c18d8ab..453a06e7a 100644 --- a/css/popupboxes.scss +++ b/css/popupboxes.scss @@ -8,8 +8,8 @@ z-index: 10; /* Sit on top */ left: 0; top: 0; - align-items:center; - justify-content:center; + align-items: center; + justify-content: center; width: 100%; height: 100%; overflow: auto; @@ -21,7 +21,7 @@ padding: 12px; border: 5px solid var(--my-highlight-color); width: 70%; - max-height:80%; + max-height: 80%; /* margin: auto; height:auto; @@ -32,7 +32,7 @@ bottom:0; right:0; */ - overflow-y:auto; + overflow-y: auto; color: var(--my-font-color); } @@ -158,8 +158,8 @@ border: 5px solid var(--my-highlight-color); color: var(--my-font-color); width: 80%; - max-height:80%; - overflow-y:auto; + max-height: 80%; + overflow-y: auto; } #game-options-left-panel, diff --git a/css/styles.scss b/css/styles.scss index feebc7177..0f2fead93 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -3,10 +3,11 @@ @import "reset"; -:root{ +:root { --my-font-color: #6f3; --my-background-color: #000; --my-highlight-color: #fff; + --my-prompt-color: #f92672; } body { @@ -83,7 +84,7 @@ tr:focus { display: block; color: #e6e6e6; background-color: #555; - padding: 16px; + padding: 12px 8px; text-decoration: none; } @@ -105,13 +106,23 @@ tr:focus { background-color: #aaa; } +#hacking-menu-header-li, +#character-menu-header-li, +#world-menu-header-li, +#help-menu-header-li { + position: relative; +} + /* Plus and minus signs */ .mainmenu-accordion-header:after { content: '\02795'; - font-size: $defaultFontSize * 0.8125; - color: #fff; float: right; - margin-left: 5px; + font-size: $defaultFontSize * 0.8125; + position: absolute; + bottom: 25%; + right: 3px; + color: transparent; + text-shadow: 0 0 0 #fff; } .mainmenu-accordion-header.opened:after { @@ -129,9 +140,9 @@ tr:focus { transition: max-height 0.2s ease-out; } -/* Borders */ +/* Accordion Outline */ .mainmenu-accordion-header { - border: 2px solid #fff; + outline: 2px solid #fff; } /* Make html links ("a" elements) nice looking buttons with this class */ @@ -144,7 +155,7 @@ a:visited { text-decoration: none; background-color: #555; color: #fff; - padding: 5px; + padding: 3px 5px; margin: 5px; border: 1px solid #333; @@ -167,7 +178,7 @@ a:visited { text-decoration: none; background-color: #333; color: #fff; - padding: 5px; + padding: 3px 5px; margin: 5px; border: 1px solid #333; cursor: default; @@ -188,7 +199,7 @@ a:visited { text-decoration: none; background-color: #0a0; color: #fff; - padding: 5px; + padding: 3px 5px; margin: 5px; border: 1px solid #0a0; cursor: default; @@ -218,9 +229,9 @@ a:visited { #create-program-tab { position: relative; } + #create-program-notification { font-size: $defaultFontSize * 0.625; - position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; @@ -364,7 +375,7 @@ a:visited { /* Blinking Cursor */ /* ----- blinking cursor animation ----- */ -.typed-cursor{ +.typed-cursor { opacity: 1; -webkit-animation: blink 0.95s infinite; -moz-animation: blink 0.95s infinite; @@ -400,16 +411,16 @@ a:visited { } /* Status text */ -@-webkit-keyframes status-text{ - from{ +@-webkit-keyframes status-text { + from { opacity: 1; } - to{ + to { opacity: 0; } } -.status-text{ +.status-text { display: inline-block; height: 15%; position: fixed; @@ -437,47 +448,78 @@ a:visited { #character-overview-wrapper { position: relative; } + #character-overview-container { display: none; position: absolute; /* Stay in place */ right: 0; top: 0; height: auto; /* Full height */ - padding: 8px; + padding: 10px 2px; border: 2px solid var(--my-highlight-color); - width: 19%; + width: auto; + max-width: 280px; overflow: auto; /* Enable scroll if needed */ - background-color: #444; /* Fallback color */ + background-color: #393636; /* Fallback color */ z-index: 1; } #character-overview-text { - color: #fff; - background-color: #444; + color: #faffdf; + + table { + border-collapse: collapse; + margin: auto; + } + + td { + padding: 2px; + vertical-align: middle; + } } .character-stat-text { color: #fff; background-color: #444; } - .character-stat-cell { + +.character-stat-cell { text-align: right; } +#character-hack-wrapper td, +#character-agi-wrapper td { + border-bottom: 1px #aaa solid; + padding-bottom: 10px; +} + +#character-str-wrapper td, +#character-cha-wrapper td { + padding-top: 10px; +} + +#character-hp-wrapper { color: $my-stat-hp-color; } +#character-money-wrapper { color: $my-stat-money-color; } +#character-hack-wrapper { color: $my-stat-hack-color; } +#character-cha-wrapper { color: $my-stat-cha-color; } +#character-int-wrapper { color: $my-stat-int-color; } + #character-overview-save-button, #character-overview-options-button { @include borderRadius(12px); @include boxShadow(1px 1px 3px #000); - - color: #aaa; + color: #cecece; + display: inline-block; font-size: $defaultFontSize * 0.875; font-weight: bold; - height: 22px; + height: 25px; background-color: #000; + padding: 5px 8px; } .character-quick-options { - padding-top: 5px; + margin-top: 10px; + text-align: center; } #character-overview-save-button:hover, @@ -489,16 +531,13 @@ a:visited { cursor: pointer; } -#character-overview-options-button { - display: inline; -} - /* Scan analyze links from AutoLink */ .scan-analyze-link { cursor: pointer; color: #fff; text-decoration: underline; } + .scan-analyze-link:hover { text-decoration: none; } @@ -509,7 +548,7 @@ a:visited { font-size: $defaultFontSize * 1.25; color: #fff; margin: 6px 6px 0 6px; - padding: 6px; + padding: 4px 6px; cursor: pointer; width: 80%; text-align: left; @@ -529,9 +568,10 @@ a:visited { .accordion-header:after { content: '\02795'; /* "plus" sign (+) */ font-size: $defaultFontSize * 0.8125; - color: #fff; float: right; margin-left: 5px; + color: transparent; + text-shadow: 0 0 0 #fff; } .accordion-header.active:after { diff --git a/css/terminal.scss b/css/terminal.scss index ac26b9b3d..cbc54b782 100644 --- a/css/terminal.scss +++ b/css/terminal.scss @@ -51,6 +51,7 @@ } #terminal-input-header { + color: var(--my-prompt-color); white-space: pre; } diff --git a/index.html b/index.html index 19f370c7f..66439fff0 100644 --- a/index.html +++ b/index.html @@ -110,7 +110,7 @@

Script name:

- +
@@ -160,7 +160,7 @@
- +
@@ -169,11 +169,11 @@
- + - +
$ - +
@@ -215,7 +215,7 @@

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

x1 @@ -452,7 +452,7 @@

This page displays any programs that you are able to create. Writing the code for a program takes time, which - can vary based on how complex the program is. If you are working on creating on a program you can cancel + can vary based on how complex the program is. If you are working on creating a program you can cancel at any time. Your progress will be saved and you can continue later.

@@ -625,9 +625,9 @@

You have entered the Slums, a poverty-ridden district filled with gangs, criminals, and - other shadowy entities. The city's government and police have neglected this area for years...


- - In the Slums you can commit crimes to earn money and experience. Crime attempts are not always + other shadowy entities. The city's government and police have neglected this area for years... +


+ In the Slums, you can commit crimes to earn money and experience. Crime attempts are not always successful. Your chance at successfully committing a crime is determined by your stats.

Shoplift @@ -744,7 +744,7 @@

- + Yes No
@@ -840,8 +840,8 @@
- Save Game - Options + Save Game + Options
@@ -868,7 +868,7 @@ - + @@ -882,7 +882,7 @@ - + @@ -896,7 +896,7 @@ - + @@ -908,7 +908,7 @@ - + @@ -994,7 +994,7 @@ Save Game Delete Game Export Game - + Import Game (DEBUG) Delete Active Scripts @@ -1006,7 +1006,7 @@ (DEBUG) Soft Reset - Perform a soft reset. Resets everything as if you had just purchased an Augmentation + Perform a soft reset. Resets everything as if you had just purchased an Augmentation. diff --git a/src/HacknetNode.js b/src/HacknetNode.js index 8f1faa218..60a956ce9 100644 --- a/src/HacknetNode.js +++ b/src/HacknetNode.js @@ -446,7 +446,7 @@ function updateHacknetNodesContent() { //Update player's money updateText("hacknet-nodes-player-money", "$" + formatNumber(Player.money.toNumber(), 2)); - updateText("hacknet-nodes-total-production", "$" + formatNumber(Player.totalHacknetNodeProduction, 2) + " / second"); + updateText("hacknet-nodes-total-production", "$" + formatNumber(Player.totalHacknetNodeProduction, 2) + " / sec"); //Update information in each owned hacknet node for (var i = 0; i < Player.hacknetNodes.length; ++i) { @@ -548,7 +548,7 @@ function updateHacknetNodeDomElement(nodeObj) { updateText("hacknet-node-name-" + nodeName, nodeName); updateText("hacknet-node-total-production-" + nodeName, "$" + formatNumber(nodeObj.totalMoneyGenerated, 2)); - updateText("hacknet-node-production-rate-" + nodeName, "($" + formatNumber(nodeObj.moneyGainRatePerSecond, 2) + " / second)"); + updateText("hacknet-node-production-rate-" + nodeName, "($" + formatNumber(nodeObj.moneyGainRatePerSecond, 2) + " / sec)"); updateText("hacknet-node-level-" + nodeName, nodeObj.level); updateText("hacknet-node-ram-" + nodeName, nodeObj.ram + "GB"); updateText("hacknet-node-cores-" + nodeName, nodeObj.cores); diff --git a/src/Player.js b/src/Player.js index 48d4771a5..03ea14a7c 100644 --- a/src/Player.js +++ b/src/Player.js @@ -2049,7 +2049,7 @@ PlayerObject.prototype.reapplyAllSourceFiles = function() { //those requirements and will return an array of all factions that the Player should //receive an invitation to PlayerObject.prototype.checkForFactionInvitations = function() { - let invitedFactions = []; //Array which will hold all Factions th eplayer should be invited to + let invitedFactions = []; //Array which will hold all Factions the player should be invited to var numAugmentations = this.augmentations.length; diff --git a/src/engine.js b/src/engine.js index 8ea543dcd..e9745dea0 100644 --- a/src/engine.js +++ b/src/engine.js @@ -548,11 +548,11 @@ let Engine = { displayCharacterOverviewInfo: function() { Engine.overview.update(); - + const save = document.getElementById("character-overview-save-button"); const flashClass = "flashing-button"; - if(!Settings.AutosaveInterval) { + if(!Settings.AutosaveInterval) { save.classList.add(flashClass); } else { save.classList.remove(flashClass); @@ -570,7 +570,7 @@ let Engine = { var intText = ""; if (Player.intelligence > 0) { - intText = 'Intelligence: ' + (Player.intelligence).toLocaleString() + "


"; + intText = 'Intelligence: ' + (Player.intelligence).toLocaleString() + '
'; } let bitNodeTimeText = ""; @@ -584,21 +584,21 @@ let Engine = { 'Current City: ' + Player.city + '

' + 'Employer: ' + Player.companyName + '
' + 'Job Title: ' + companyPosition + '

' + - 'Money: $' + formatNumber(Player.money.toNumber(), 2)+ '


' + + 'Money: $' + formatNumber(Player.money.toNumber(), 2) + '


' + 'Stats

' + 'Hacking Level: ' + (Player.hacking_skill).toLocaleString() + - " (" + numeral(Player.hacking_exp).format('(0.000a)') + ' experience)
' + + ' (' + numeral(Player.hacking_exp).format('(0.000a)') + ' experience)
' + 'Strength: ' + (Player.strength).toLocaleString() + - " (" + numeral(Player.strength_exp).format('(0.000a)') + ' experience)
' + + ' (' + numeral(Player.strength_exp).format('(0.000a)') + ' experience)
' + 'Defense: ' + (Player.defense).toLocaleString() + - " (" + numeral(Player.defense_exp).format('(0.000a)')+ ' experience)
' + + ' (' + numeral(Player.defense_exp).format('(0.000a)')+ ' experience)
' + 'Dexterity: ' + (Player.dexterity).toLocaleString() + - " (" + numeral(Player.dexterity_exp).format('(0.000a)') + ' experience)
' + + ' (' + numeral(Player.dexterity_exp).format('(0.000a)') + ' experience)
' + 'Agility: ' + (Player.agility).toLocaleString() + - " (" + numeral(Player.agility_exp).format('(0.000a)') + ' experience)
' + + ' (' + numeral(Player.agility_exp).format('(0.000a)') + ' experience)
' + 'Charisma: ' + (Player.charisma).toLocaleString() + - " (" + numeral(Player.charisma_exp).format('(0.000a)') + ' experience)
' + - intText + + ' (' + numeral(Player.charisma_exp).format('(0.000a)') + ' experience)
' + + intText + '

' + 'Multipliers

' + 'Hacking Chance multiplier: ' + formatNumber(Player.hacking_chance_mult * 100, 2) + '%
' + 'Hacking Speed multiplier: ' + formatNumber(Player.hacking_speed_mult * 100, 2) + '%
' + From dbab0d73a76c9cf536319206d4a60f0a078a2d67 Mon Sep 17 00:00:00 2001 From: Mat Jaworski Date: Thu, 30 Aug 2018 01:48:26 +1000 Subject: [PATCH 2/2] UI Enhancements part 2 A bit more refactoring and cleaning up the code. Updated the Augmentations accordion icons as they were barely visible. --- css/menupages.scss | 53 ++++++++++++++++------------------ css/styles.scss | 71 ++++++++++++++++++++++------------------------ 2 files changed, 59 insertions(+), 65 deletions(-) diff --git a/css/menupages.scss b/css/menupages.scss index 64cd82939..cd35bec4a 100644 --- a/css/menupages.scss +++ b/css/menupages.scss @@ -240,16 +240,13 @@ width: auto; display: none; margin-bottom: 6px; -} -.active-scripts-script-panel p, -.active-scripts-script-panel h2, -.active-scripts-script-panel ul, -.active-scripts-script-panel li { - background-color: #555; - width: auto; - color: #fff; - margin-left: 5%; + p, h2, ul, li { + background-color: #555; + width: auto; + color: #fff; + margin-left: 5%; + } } .active-scripts-button { @@ -262,13 +259,13 @@ margin: 4px; padding: 4px; background-color: #000; -} -.active-scripts-button:hover, -.active-scripts-button:focus { - color: #fff; - text-decoration: none; - cursor: pointer; + &:hover, + &:focus { + color: #fff; + text-decoration: none; + cursor: pointer; + } } /* Hacknet Nodes */ @@ -324,22 +321,22 @@ .hacknet-node-container { display: inline-table; -} -.hacknet-node-container .row { - display: table-row; - height: 30px; -} + .row { + display: table-row; + height: 30px; -.hacknet-node-container .row p { - display: table-cell; -} + p { + display: table-cell; + } + } -.hacknet-node-container .upgradable-info { - display: inline-block; - margin: 0 4px; /* Don't want the vertical margin/padding, just left & right */ - padding: 0 4px; - width: $defaultFontSize * 4; + .upgradable-info { + display: inline-block; + margin: 0 4px; /* Don't want the vertical margin/padding, just left & right */ + padding: 0 4px; + width: $defaultFontSize * 4; + } } .menu-page-text { diff --git a/css/styles.scss b/css/styles.scss index 0f2fead93..6daebde94 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -113,6 +113,11 @@ tr:focus { position: relative; } +/* Accordion Outline */ +.mainmenu-accordion-header { + outline: 2px solid #fff; +} + /* Plus and minus signs */ .mainmenu-accordion-header:after { content: '\02795'; @@ -125,12 +130,12 @@ tr:focus { text-shadow: 0 0 0 #fff; } -.mainmenu-accordion-header.opened:after { - content: "\2796"; -} - .mainmenu-accordion-header.opened { background-color: #222; + + &:after { + content: "\2796"; + } } /* Slide down transition */ @@ -140,11 +145,6 @@ tr:focus { transition: max-height 0.2s ease-out; } -/* Accordion Outline */ -.mainmenu-accordion-header { - outline: 2px solid #fff; -} - /* Make html links ("a" elements) nice looking buttons with this class */ a:link, a:visited { @@ -554,32 +554,32 @@ a:visited { text-align: left; border: none; outline: none; -} + position: relative; -.accordion-header.active, -.accordion-header:hover { - background-color: #555; -} + &.active, + &:hover { + background-color: #555; + } -.accordion-header.active:hover { - background-color: #666; -} + &.active:hover { + background-color: #666; + } -.accordion-header:after { - content: '\02795'; /* "plus" sign (+) */ - font-size: $defaultFontSize * 0.8125; - float: right; - margin-left: 5px; - color: transparent; - text-shadow: 0 0 0 #fff; -} + &:after { + content: '\02795'; /* "plus" sign (+) */ + font-size: $defaultFontSize * 0.8125; + float: right; + color: transparent; + text-shadow: 0 0 0 #fff; + position: absolute; + bottom: 3px; + right: 6px; + } + + &.active:after { + content: "\2796"; /* "minus" sign (-) */ + } -.accordion-header.active:after { - content: "\2796"; /* "minus" sign (-) */ - font-size: $defaultFontSize * 0.8125; - color: #fff; - float: right; - margin-left: 5px; } .accordion-panel { @@ -591,13 +591,10 @@ a:visited { background-color: #555; overflow-y: auto; overflow-x: none; -} -.accordion-panel div, -.accordion-panel ul, -.accordion-panel p, -.accordion-panel ul > li { - background-color: #555; + div, ul, p, ul > li { + background-color: #555; + } } /* override the global styling */