Finished React components for new Stock Market UI

2026-04-25 18:50:56 +02:00 · 2019-04-23 01:23:08 -07:00
parent 6b3646e981
commit 4809a21e38
21 changed files with 1173 additions and 207 deletions
@@ -0,0 +1,117 @@
+/**
+ * React Component for the text on a stock ticker that display's information
+ * about the player's position in that stock
+ */
+import * as React from "react";
+
+import { Stock } from "../Stock";
+
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
+
+type IProps = {
+    p: IPlayer;
+    stock: Stock;
+}
+
+const blockStyleMarkup = {
+    display: "block",
+}
+
+export class StockTickerPositionText extends React.Component<IProps, any> {
+    renderLongPosition(): React.ReactElement {
+        const stock = this.props.stock;
+
+        // Caculate total returns
+        const totalCost = stock.playerShares * stock.playerAvgPx;
+        const gains = (stock.price - stock.playerAvgPx) * stock.playerShares;
+        let percentageGains = gains / totalCost;
+        if (isNaN(percentageGains)) { percentageGains = 0; }
+
+        return (
+            <div>
+                <h3 className={"tooltip"}>
+                    Short Position:
+                    <span className={"tooltiptext"}>
+                        Shares in the long position will increase in value if the price
+                        of the corresponding stock increases
+                    </span>
+                </h3>
+                <p>
+                    Shares: {numeralWrapper.format(stock.playerShares, "0,0")}
+                </p>
+                <p>
+                    Average Price: {numeralWrapper.formatMoney(stock.playerAvgPx)}
+                    (Total Cost: {numeralWrapper.formatMoney(totalCost)})
+                </p>
+                <p>
+                    Profit: {numeralWrapper.formatMoney(gains)}
+                    ({numeralWrapper.formatPercentage(percentageGains)})
+                </p>
+            </div>
+        )
+    }
+
+    renderShortPosition(): React.ReactElement | null {
+        const stock = this.props.stock;
+
+        // Caculate total returns
+        const totalCost = stock.playerShortShares * stock.playerAvgShortPx;
+        const gains = (stock.playerAvgShortPx - stock.price) * stock.playerShortShares;
+        let percentageGains = gains / totalCost;
+        if (isNaN(percentageGains)) { percentageGains = 0; }
+
+        if (this.props.p.bitNodeN === 8 || (SourceFileFlags[8] >= 2)) {
+            return (
+                <div>
+                    <h3 className={"tooltip"}>
+                        Short Position:
+                        <span className={"tooltiptext"}>
+                            Shares in the short position will increase in value if the
+                            price of the corresponding stock decreases
+                        </span>
+                    </h3>
+                    <p>
+                        Shares: {numeralWrapper.format(stock.playerShortShares, "0,0")}
+                    </p>
+                    <p>
+                        Average Price: {numeralWrapper.formatMoney(stock.playerAvgShortPx)}
+                        (Total Cost: {numeralWrapper.formatMoney(totalCost)})
+                    </p>
+                    <p>
+                        Profit: {numeralWrapper.formatMoney(gains)}
+                        ({numeralWrapper.formatPercentage(percentageGains)})
+                    </p>
+                </div>
+            )
+        } else {
+            return null;
+        }
+    }
+
+    render() {
+        const stock = this.props.stock;
+
+        return (
+            <div className={"stock-market-position-text"}>
+                <p style={blockStyleMarkup}>
+                    Max Shares: ${numeralWrapper.formatMoney(stock.maxShares)}
+                </p>
+                <p className={"tooltip"} >
+                    Ask Price: {numeralWrapper.formatMoney(stock.getAskPrice())}
+                    <span className={"tooltiptext"}>
+                        See Investopedia for details on what this is
+                    </span>
+                </p>
+                <p className={"tooltip"} >
+                    <span className={"tooltiptext"}>
+                        See Investopedia for details on what this is
+                    </span>
+                </p>
+                {this.renderLongPosition()}
+                {this.renderShortPosition()}
+            </div>
+        )
+    }
+}