From ddca5ae987522205e4e32e57becf87c95c96ee0c Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Fri, 3 Aug 2018 10:54:13 -0400 Subject: [PATCH] character overview element reuse --- css/styles.scss | 18 +++++++++--- index.html | 38 ++++++++++++++++++++++++-- src/CharacterOverview.js | 59 ++++++++++++++++++++++++++++++++++++++++ src/engine.js | 17 ++---------- 4 files changed, 111 insertions(+), 21 deletions(-) create mode 100644 src/CharacterOverview.js diff --git a/css/styles.scss b/css/styles.scss index 75b051143..2a3572257 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -433,8 +433,8 @@ a:visited { position: absolute; /* Stay in place */ right: 0; top: 0; - height: 205px; /* Full height */ - padding: 5px; + height: auto; /* Full height */ + padding: 8px; border: 2px solid var(--my-highlight-color); width: 19%; overflow: auto; /* Enable scroll if needed */ @@ -443,12 +443,18 @@ a:visited { } #character-overview-text { - padding: 4px; - margin: 8px; color: #fff; background-color: #444; } +.character-stat-text { + color: #fff; + background-color: #444; +} + .character-stat-cell { + text-align: right; +} + #character-overview-save-button, #character-overview-options-button { @include borderRadius(12px); @@ -461,6 +467,10 @@ a:visited { background-color: #000; } +.character-quick-options { + padding-top: 5px; +} + #character-overview-save-button:hover, #character-overview-save-button:focus, #character-overview-options-button:hover, diff --git a/index.html b/index.html index 343ee7fe4..e52f4208c 100644 --- a/index.html +++ b/index.html @@ -781,9 +781,41 @@
-

- Save Game - Options +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hp:
Money: 
Hack: 
Str: 
Def: 
Dex: 
Agi: 
Cha: 
Int: 
+ +
+ Save Game + Options +
diff --git a/src/CharacterOverview.js b/src/CharacterOverview.js new file mode 100644 index 000000000..5b8b00ab4 --- /dev/null +++ b/src/CharacterOverview.js @@ -0,0 +1,59 @@ +import {Player} from "./Player"; +import numeral from "numeral/min/numeral.min"; + +function CharacterOverview() { + this.hp = document.getElementById("character-hp-text"); + this.money = document.getElementById("character-money-text"); + this.hack = document.getElementById("character-hack-text"); + this.str = document.getElementById("character-str-text"); + this.def = document.getElementById("character-def-text"); + this.dex = document.getElementById("character-dex-text"); + this.agi = document.getElementById("character-agi-text"); + this.cha = document.getElementById("character-cha-text"); + this.int = document.getElementById("character-int-text"); + this.intWrapper = document.getElementById("character-int-wrapper"); + this.repaintElem = document.getElementById("character-overview-text"); + console.log(this.hp,this.money,this.hack,this.str,this.def,this.dex,this.agi,this.cha,this.int,this.intWrapper,this.repaintElem) +} + +CharacterOverview.prototype.repaint = function() { + // this is an arbitrary function we can call to trigger a repaint. + this.repaintElem.getClientRects(); +} + +CharacterOverview.prototype.update = function() { + if (Player.hp == null) {Player.hp = Player.max_hp;} + + const replaceAndChanged = function(elem, text) { + if(elem.textContent === text) { + return false; + } + elem.textContent = text; + return true; + } + + let changed = false; + changed = replaceAndChanged(this.hp, Player.hp + " / " + Player.max_hp) || changed; + changed = replaceAndChanged(this.money, numeral(Player.money.toNumber()).format('($0.000a)')) || changed; + changed = replaceAndChanged(this.hack, (Player.hacking_skill).toLocaleString()) || changed; + changed = replaceAndChanged(this.str, (Player.strength).toLocaleString()) || changed; + changed = replaceAndChanged(this.def, (Player.defense).toLocaleString()) || changed; + changed = replaceAndChanged(this.dex, (Player.dexterity).toLocaleString()) || changed; + changed = replaceAndChanged(this.agi, (Player.agility).toLocaleString()) || changed; + changed = replaceAndChanged(this.cha, (Player.charisma).toLocaleString()) || changed; + changed = replaceAndChanged(this.int, (Player.intelligence).toLocaleString()) || changed; + + // handle int appearing + const int = this.intWrapper; + const old = int.style.display; + const now = Player.intelligence >= 1 ? "" : "none"; + if(old !== now) { + int.style.display = now; + changed = true; + } + + // recalculate box size if something changed + if(changed) this.repaint(); +} + +export {CharacterOverview}; \ No newline at end of file diff --git a/src/engine.js b/src/engine.js index 6dc573c3d..9620ea6ef 100644 --- a/src/engine.js +++ b/src/engine.js @@ -20,6 +20,7 @@ import {Augmentations, installAugmentations, import {BitNodes, initBitNodes, initBitNodeMultipliers} from "./BitNode"; import {Bladeburner} from "./Bladeburner"; +import {CharacterOverview} from "./CharacterOverview"; import {cinematicTextFlag} from "./CinematicText"; import {CompanyPositions, initCompanies} from "./Company"; import {Corporation} from "./CompanyManagement"; @@ -280,6 +281,7 @@ let Engine = { Bladeburner: "Bladeburner", }, currentPage: null, + overview: new CharacterOverview(), //Time variables (milliseconds unix epoch time) @@ -570,20 +572,7 @@ let Engine = { }, displayCharacterOverviewInfo: function() { - if (Player.hp == null) {Player.hp = Player.max_hp;} - var overviewText = "Hp: " + Player.hp + " / " + Player.max_hp + "
" + - "Money: " + numeral(Player.money.toNumber()).format('($0.000a)') + "
" + - "Hack: " + (Player.hacking_skill).toLocaleString() + "
" + - "Str: " + (Player.strength).toLocaleString() + "
" + - "Def: " + (Player.defense).toLocaleString() + "
" + - "Dex: " + (Player.dexterity).toLocaleString() + "
" + - "Agi: " + (Player.agility).toLocaleString() + "
" + - "Cha: " + (Player.charisma).toLocaleString(); - if (Player.intelligence >= 1) { - overviewText += "
Int: " + (Player.intelligence).toLocaleString(); - } - document.getElementById("character-overview-text").innerHTML = overviewText.replace( / /g, " "); - + Engine.overview.update(); const save = document.getElementById("character-overview-save-button");