v0.51.0 (#826)

* Hash upgrades and Bladeburner skills can now be clicked to copy to clipboard

* Aug purchase confirmation popup displays money in 0.000a format

* Character now displays hacknet server info properly

* Character,Info now displays hacknet server info correctly.

* Formulas (#825)

Formulas API v0.1

* Make all money the same color, same for reputation, format all numbers consistently.

* rename a lot of the formulas function to no longer contain calculate

* added hacking related formulas

* removed unused variable

* v0.51.0

src/ui/React/Augmentation.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+export function Augmentation(name: string): JSX.Element {
+	return <span className={"samefont"} style={{'color': 'white'}}>{name}</span>
+}

src/ui/React/AutoupdatingParagraph.tsx

@@ -8,8 +8,8 @@ import * as React from "react";
 interface IProps {
     intervalTime?: number;
     style?: object;
-    getText: () => string;
-    getTooltip?: () => string;
+    getContent: () => JSX.Element;
+    getTooltip?: () => JSX.Element;
 }
 
 interface IState {
@@ -50,30 +50,20 @@ export class AutoupdatingParagraph extends React.Component<IProps, IState> {
 
     render() {
         let hasTooltip = this.props.getTooltip != null;
-        let tooltip: string | null;
+        let tooltip: JSX.Element | null;
         if (hasTooltip) {
             tooltip = this.props.getTooltip!();
-            if (tooltip === "") {
+            if (!tooltip) {
                 hasTooltip = false;
             }
         }
 
-        const className = "tooltip";
-
-        // Tooltip will be set using inner HTML
-        let tooltipMarkup: IInnerHTMLMarkup | null;
-        if (hasTooltip) {
-            tooltipMarkup = {
-                __html: tooltip!
-            }
-        }
-
         return (
-            <p className={className} style={this.props.style}>
-                {this.props.getText()}
+            <p className="tooltip" style={this.props.style}>
+                {this.props.getContent()}
                 {
                     hasTooltip &&
-                    <span className={"tooltiptext"} dangerouslySetInnerHTML={tooltipMarkup!}></span>
+                    <span className={"tooltiptext"}>{tooltip!}</span>
                 }
             </p>
         )

src/ui/React/AutoupdatingStdButton.tsx

@@ -11,7 +11,7 @@ interface IProps {
     intervalTime?: number;
     onClick?: (e: React.MouseEvent<HTMLElement>) => any;
     style?: object;
-    text: string;
+    text: string | JSX.Element;
     tooltip?: string;
 }
 

src/ui/React/CharacterOverview.jsx

@@ -10,7 +10,7 @@ export class CharacterOverviewComponent extends Component {
     render() {
         const intelligence = (
             <tr id="character-int-wrapper">
-                <td className="character-int-cell">Int:&nbsp;</td><td id="character-int-text" className="character-int-cell character-stat-cell">{(Player.intelligence).toLocaleString()}</td>
+                <td className="character-int-cell">Int:&nbsp;</td><td id="character-int-text" className="character-int-cell character-stat-cell">{numeralWrapper.formatSkill(Player.intelligence)}</td>
             </tr>
         );
 
@@ -22,25 +22,25 @@ export class CharacterOverviewComponent extends Component {
                         <td className="character-hp-cell">Hp:</td><td id="character-hp-text" className="character-hp-cell character-stat-cell">{Player.hp + " / " + Player.max_hp}</td>
                     </tr>
                     <tr id="character-money-wrapper">
-                        <td className="character-money-cell">Money:&nbsp;</td><td id="character-money-text" className="character-money-cell character-stat-cell">{numeralWrapper.format(Player.money.toNumber(), '$0.000a')}</td>
+                        <td className="character-money-cell">Money:&nbsp;</td><td id="character-money-text" className="character-money-cell character-stat-cell">{numeralWrapper.formatMoney(Player.money.toNumber())}</td>
                     </tr>
                     <tr id="character-hack-wrapper">
-                        <td className="character-hack-cell">Hack:&nbsp;</td><td id="character-hack-text" className="character-hack-cell character-stat-cell">{(Player.hacking_skill).toLocaleString()}</td>
+                        <td className="character-hack-cell">Hack:&nbsp;</td><td id="character-hack-text" className="character-hack-cell character-stat-cell">{numeralWrapper.formatSkill(Player.hacking_skill)}</td>
                     </tr>
                     <tr id="character-str-wrapper">
-                        <td className="character-combat-cell">Str:&nbsp;</td><td id="character-str-text" className="character-combat-cell character-stat-cell">{(Player.strength).toLocaleString()}</td>
+                        <td className="character-combat-cell">Str:&nbsp;</td><td id="character-str-text" className="character-combat-cell character-stat-cell">{numeralWrapper.formatSkill(Player.strength)}</td>
                     </tr>
                     <tr id="character-def-wrapper">
-                        <td className="character-combat-cell">Def:&nbsp;</td><td id="character-def-text" className="character-combat-cell character-stat-cell">{(Player.defense).toLocaleString()}</td>
+                        <td className="character-combat-cell">Def:&nbsp;</td><td id="character-def-text" className="character-combat-cell character-stat-cell">{numeralWrapper.formatSkill(Player.defense)}</td>
                     </tr>
                     <tr id="character-dex-wrapper">
-                        <td className="character-combat-cell">Dex:&nbsp;</td><td id="character-dex-text" className="character-combat-cell character-stat-cell">{(Player.dexterity).toLocaleString()}</td>
+                        <td className="character-combat-cell">Dex:&nbsp;</td><td id="character-dex-text" className="character-combat-cell character-stat-cell">{numeralWrapper.formatSkill(Player.dexterity)}</td>
                     </tr>
                     <tr id="character-agi-wrapper">
-                        <td className="character-combat-cell">Agi:&nbsp;</td><td id="character-agi-text" className="character-combat-cell character-stat-cell">{(Player.agility).toLocaleString()}</td>
+                        <td className="character-combat-cell">Agi:&nbsp;</td><td id="character-agi-text" className="character-combat-cell character-stat-cell">{numeralWrapper.formatSkill(Player.agility)}</td>
                     </tr>
                     <tr id="character-cha-wrapper">
-                        <td className="character-cha-cell">Cha:&nbsp;</td><td id="character-cha-text" className="character-cha-cell character-stat-cell">{(Player.charisma).toLocaleString()}</td>
+                        <td className="character-cha-cell">Cha:&nbsp;</td><td id="character-cha-text" className="character-cha-cell character-stat-cell">{numeralWrapper.formatSkill(Player.charisma)}</td>
                     </tr>
                     {
                         Player.intelligence >= 1 &&

src/ui/React/CopyableText.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+type IProps = {
+    value: string;
+}
+
+type IState = {
+    tooltipVisible: boolean;
+}
+
+export class CopyableText extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.copy = this.copy.bind(this);
+        this.tooltipClasses = this.tooltipClasses.bind(this);
+        this.textClasses = this.textClasses.bind(this);
+
+        this.state = {
+            tooltipVisible: false,
+        }
+    }
+
+    copy(e: React.MouseEvent<HTMLHeadingElement>) {
+        const copyText = document.createElement("textarea");
+        copyText.value = this.props.value;
+        document.body.appendChild(copyText);
+        copyText.select();
+        copyText.setSelectionRange(0, 1e10);
+        document.execCommand("copy");
+        document.body.removeChild(copyText);
+        this.setState({tooltipVisible: true});
+        setTimeout(() => this.setState({tooltipVisible: false}), 1000);
+    }
+
+    tooltipClasses(): string {
+        let classes = "copy_tooltip_text";
+        if(this.state.tooltipVisible) {
+            classes += " copy_tooltip_text_visible";
+        }
+
+        return classes;
+    }
+
+    textClasses(): string {
+        let classes = "copy_tooltip noselect text";
+        if(this.state.tooltipVisible) {
+            classes += " copy_tooltip_copied";
+        }
+
+        return classes;
+    }
+
+
+    render() {
+        return (<span className={this.textClasses()} onClick={this.copy}>
+            <b>{this.props.value}</b>
+            <span className={this.tooltipClasses()}>Copied!</span>
+        </span>);
+    }
+}

src/ui/React/Favor.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+export function Favor(favor: number | string): JSX.Element {
+	return <span className={"light-yellow samefont"}>{typeof favor === 'number' ? numeralWrapper.formatFavor(favor) : favor}</span>
+}

src/ui/React/HashRate.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { Hashes } from "../../ui/React/Hashes";
+
+export function HashRate(hashes: number): JSX.Element {
+	return Hashes(`${numeralWrapper.formatHashes(hashes)} / sec`);
+}

src/ui/React/Hashes.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+export function Hashes(hashes: number | string): JSX.Element {
+	return <span className={"money-gold samefont"}>{typeof hashes === 'number' ? numeralWrapper.formatHashes(hashes) : hashes}</span>
+}

src/ui/React/Money.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+export function Money(money: number | string): JSX.Element {
+	return <span className={"money-gold samefont"}>{typeof money === 'number' ? numeralWrapper.formatMoney(money) : money}</span>
+}

src/ui/React/MoneyRate.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { Money } from "../../ui/React/Money";
+
+export function MoneyRate(money: number): JSX.Element {
+	return Money(`${numeralWrapper.formatMoney(money)} / sec`);
+}

src/ui/React/ParagraphWithTooltip.tsx

@@ -5,7 +5,7 @@ import * as React       from "react";
 
 export interface IParagraphWithTooltipProps {
     style?: object;
-    text: string;
+    content: JSX.Element;
     tooltip: string;
 }
 
@@ -13,7 +13,7 @@ export class ParagraphWithTooltip extends React.Component<IParagraphWithTooltipP
     render() {
         return (
             <p className={"tooltip"} style={this.props.style}>
-                {this.props.text}
+                {this.props.content}
                 <span className={"tooltiptext"}>
                     {this.props.tooltip}
                 </span>

src/ui/React/Reputation.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+export function Reputation(reputation: number | string): JSX.Element {
+	return <span className={"reputation samefont"}>{typeof reputation === 'number' ? numeralWrapper.formatReputation(reputation) : reputation}</span>
+}

src/ui/React/ReputationRate.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { Reputation } from "../../ui/React/Reputation";
+
+export function ReputationRate(reputation: number): JSX.Element {
+	return Reputation(`${numeralWrapper.formatReputation(reputation)} / sec`);
+}

src/ui/React/StdButton.tsx

@@ -10,7 +10,7 @@ interface IStdButtonProps {
     id?: string;
     onClick?: (e: React.MouseEvent<HTMLElement>) => any;
     style?: object;
-    text: string;
+    text: string | JSX.Element;
     tooltip?: string;
 }