Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-20 05:05:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

character overview element reuse

Browse Source
This commit is contained in:
Olivier Gagnon 2018-08-03 10:54:13 -04:00
parent b5e8d61ad6
commit ddca5ae987
4 changed files with 111 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/styles.scss
View File

@ -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,

38
index.html
View File

@ -781,9 +781,41 @@
<!-- Character Overview Screen -->
<div id="character-overview-wrapper">
<div id="character-overview-container">
<p id="character-overview-text"> </p>
<span id="character-overview-save-button"> Save Game </span>
<span id="character-overview-options-button"> Options </span>
<div id="character-overview-text">
<table>
<tr id="character-hp-wrapper">
<td>Hp:</td><td id="character-hp-text" class="character-stat-cell"></td>
</tr>
<tr id="character-money-wrapper">
<td>Money:&nbsp;</td><td id="character-money-text" class="character-stat-cell"></td>
</tr>
<tr id="character-hack-wrapper">
<td>Hack:&nbsp;</td><td id="character-hack-text" class="character-stat-cell"></td>
</tr>
<tr id="character-str-wrapper">
<td>Str:&nbsp;</td><td id="character-str-text" class="character-stat-cell"></td>
</tr>
<tr id="character-def-wrapper">
<td>Def:&nbsp;</td><td id="character-def-text" class="character-stat-cell"></td>
</tr>
<tr id="character-dex-wrapper">
<td>Dex:&nbsp;</td><td id="character-dex-text" class="character-stat-cell"></td>
</tr>
<tr id="character-agi-wrapper">
<td>Agi:&nbsp;</td><td id="character-agi-text" class="character-stat-cell"></td>
</tr>
<tr id="character-cha-wrapper">
<td>Cha:&nbsp;</td><td id="character-cha-text" class="character-stat-cell"></td>
</tr>
<tr id="character-int-wrapper">
<td>Int:&nbsp;</td><td id="character-int-text" class="character-stat-cell"></td>
</tr>
<table>
</div>
<div class="character-quick-options">
<span id="character-overview-save-button"> Save Game </span>
<span id="character-overview-options-button"> Options </span>
</div>
</div>
</div>

59
src/CharacterOverview.js Normal file
View File

@ -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};

17
src/engine.js
View File

@ -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 + "<br>" +
"Money: " + numeral(Player.money.toNumber()).format('($0.000a)') + "<br>" +
"Hack: " + (Player.hacking_skill).toLocaleString() + "<br>" +
"Str: " + (Player.strength).toLocaleString() + "<br>" +
"Def: " + (Player.defense).toLocaleString() + "<br>" +
"Dex: " + (Player.dexterity).toLocaleString() + "<br>" +
"Agi: " + (Player.agility).toLocaleString() + "<br>" +
"Cha: " + (Player.charisma).toLocaleString();
if (Player.intelligence >= 1) {
overviewText += "<br>Int: " + (Player.intelligence).toLocaleString();
}
document.getElementById("character-overview-text").innerHTML = overviewText.replace( / /g, "&nbsp;");
Engine.overview.update();
const save = document.getElementById("character-overview-save-button");