From f0f57150aacb43d3fd87b3c637f6a2a3399d0185 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Thu, 16 Sep 2021 17:30:47 -0400 Subject: [PATCH] character overview in mui --- css/characteroverview.scss | 114 +------- .../Player/PlayerObjectGeneralMethods.jsx | 17 -- src/engine.jsx | 36 +-- src/index.html | 11 +- src/ui/React/CharacterOverview.tsx | 275 ++++++++++++------ src/ui/React/Theme.tsx | 13 + 6 files changed, 217 insertions(+), 249 deletions(-) diff --git a/css/characteroverview.scss b/css/characteroverview.scss index b72d854aa..fc4a12a00 100644 --- a/css/characteroverview.scss +++ b/css/characteroverview.scss @@ -5,120 +5,8 @@ * Styling for the Character Overview Panel (top-right panel) */ -#character-overview-wrapper { +#character-overview { position: fixed; top: 0; right: 0; } - -#character-overview-container { - display: none; - position: absolute; /* Stay in place */ - right: 0; - top: 0; - height: auto; /* Full height */ - padding: 10px 2px; - border: 2px solid var(--my-highlight-color); - width: auto; - max-width: 280px; - overflow: auto; /* Enable scroll if needed */ - background-color: rgba(57, 54, 54, 0.9); /* Fallback color */ - z-index: 1; -} - -#character-overview-text { - color: $my-stat-physical; - - table { - border-collapse: collapse; - margin: auto; - } - - td { - padding: 2px; - vertical-align: middle; - } -} - -.character-stat-text { - color: #fff; - background-color: #444; -} - -.character-stat-cell { - text-align: right; -} - -#character-str-wrapper td, -#character-cha-wrapper td { - padding-top: 10px; -} - -.character-divider td { - border-top: 1px #aaa solid; - padding-top: 10px; -} - -#character-hp-wrapper { - color: $my-stat-hp-color; -} -.character-hp-cell { - color: $my-stat-hp-color; -} -#character-money-wrapper { - color: $my-stat-money-color; -} -.character-money-cell { - color: $my-stat-money-color; -} -#character-hack-wrapper { - color: $my-stat-hack-color; -} -.character-hack-cell { - color: $my-stat-hack-color; -} -#character-cha-wrapper { - color: $my-stat-cha-color; -} -.character-cha-cell { - color: $my-stat-cha-color; -} -#character-int-wrapper { - color: $my-stat-int-color; -} -.character-int-cell { - color: $my-stat-int-color; -} -.character-combat-cell { - color: $my-stat-physical; -} -#character-work-wrapper { - color: $my-stat-hack-color; -} -.character-work-cell { - color: $my-stat-hack-color; -} - -.character-overview-btn { - @include borderRadius(12px); - @include boxShadow(1px 1px 3px #000); - color: #cecece; - display: inline-block; - font-size: $defaultFontSize * 0.875; - font-weight: bold; - height: 25px; - background-color: #000; - padding: 5px 8px; -} - -.character-quick-options { - margin-top: 10px; - text-align: center; -} - -.character-overview-btn:hover, -.character-overview-btn:focus { - color: #fff; - text-decoration: none; - cursor: pointer; -} diff --git a/src/PersonObjects/Player/PlayerObjectGeneralMethods.jsx b/src/PersonObjects/Player/PlayerObjectGeneralMethods.jsx index 0bc2e44ab..31515d03b 100644 --- a/src/PersonObjects/Player/PlayerObjectGeneralMethods.jsx +++ b/src/PersonObjects/Player/PlayerObjectGeneralMethods.jsx @@ -197,12 +197,6 @@ export function prestigeSourceFile() { } } - const characterMenuHeader = document.getElementById("character-menu-header"); - if (characterMenuHeader instanceof HTMLElement) { - characterMenuHeader.click(); - characterMenuHeader.click(); - } - this.timeWorked = 0; // Gang @@ -2065,9 +2059,6 @@ export function applyForJob(entryPosType, sing = false) { this.jobs[company.name] = pos.name; this.companyName = this.location; - document.getElementById("world-menu-header").click(); - document.getElementById("world-menu-header").click(); - if (sing) { return true; } @@ -2183,8 +2174,6 @@ export function applyForEmployeeJob(sing = false) { if (this.isQualified(company, CompanyPositions[posNames.MiscCompanyPositions[1]])) { this.companyName = company.name; this.jobs[company.name] = posNames.MiscCompanyPositions[1]; - document.getElementById("world-menu-header").click(); - document.getElementById("world-menu-header").click(); if (sing) { return true; } @@ -2201,8 +2190,6 @@ export function applyForPartTimeEmployeeJob(sing = false) { var company = Companies[this.location]; //Company being applied to if (this.isQualified(company, CompanyPositions[posNames.PartTimeCompanyPositions[1]])) { this.jobs[company.name] = posNames.PartTimeCompanyPositions[1]; - document.getElementById("world-menu-header").click(); - document.getElementById("world-menu-header").click(); if (sing) { return true; } @@ -2220,8 +2207,6 @@ export function applyForWaiterJob(sing = false) { if (this.isQualified(company, CompanyPositions[posNames.MiscCompanyPositions[0]])) { this.companyName = company.name; this.jobs[company.name] = posNames.MiscCompanyPositions[0]; - document.getElementById("world-menu-header").click(); - document.getElementById("world-menu-header").click(); if (sing) { return true; } @@ -2239,8 +2224,6 @@ export function applyForPartTimeWaiterJob(sing = false) { if (this.isQualified(company, CompanyPositions[posNames.PartTimeCompanyPositions[0]])) { this.companyName = company.name; this.jobs[company.name] = posNames.PartTimeCompanyPositions[0]; - document.getElementById("world-menu-header").click(); - document.getElementById("world-menu-header").click(); if (sing) { return true; } diff --git a/src/engine.jsx b/src/engine.jsx index b48e46fb6..4169dba24 100644 --- a/src/engine.jsx +++ b/src/engine.jsx @@ -96,6 +96,7 @@ const Engine = { redPillContent: null, cinematicTextContent: null, missionContent: null, + overview: null, }, indexedDb: undefined, @@ -309,7 +310,7 @@ const Engine = { loadMissionContent: function () { Engine.hideAllContent(); document.getElementById("mainmenu-container").style.visibility = "hidden"; - document.getElementById("character-overview-wrapper").style.visibility = "hidden"; + document.getElementById("character-overview").style.visibility = "hidden"; Engine.Display.missionContent.style.display = "block"; routing.navigateTo(Page.Mission); }, @@ -397,15 +398,12 @@ const Engine = { }, displayCharacterOverviewInfo: function () { - ReactDOM.render(, document.getElementById("character-overview-text")); - - const save = document.getElementById("character-overview-save-button"); - const flashClass = "flashing-button"; - if (!Settings.AutosaveInterval) { - save.classList.add(flashClass); - } else { - save.classList.remove(flashClass); - } + ReactDOM.render( + + saveObject.saveGame(Engine.indexedDb)} /> + , + document.getElementById("character-overview"), + ); }, // Main Game Loop @@ -575,11 +573,6 @@ const Engine = { } } - if (Engine.Counters.updateDisplays <= 0) { - Engine.displayCharacterOverviewInfo(); - Engine.Counters.updateDisplays = 3; - } - if (Engine.Counters.checkFactionInvitations <= 0) { const invitedFactions = Player.checkForFactionInvitations(); if (invitedFactions.length > 0) { @@ -879,16 +872,12 @@ const Engine = { // Cinematic Text Engine.Display.cinematicTextContent = document.getElementById("cinematic-text-container"); Engine.Display.cinematicTextContent.style.display = "none"; + + Engine.Display.overview = document.getElementById("character-overview"); }, // Initialization init: function () { - // Character Overview buttons - document.getElementById("character-overview-save-button").addEventListener("click", function () { - saveObject.saveGame(Engine.indexedDb); - return false; - }); - // Message at the top of terminal postVersion(); @@ -922,10 +911,9 @@ const Engine = { } Engine.loadWorkInProgressContent(); - } - // Character overview screen - document.getElementById("character-overview-container").style.display = "block"; + Engine.displayCharacterOverviewInfo(); + } }, start: function () { diff --git a/src/index.html b/src/index.html index 79526592c..e2960b0eb 100644 --- a/src/index.html +++ b/src/index.html @@ -96,16 +96,7 @@ -
-
-
- -
-
- -
-
-
+
diff --git a/src/ui/React/CharacterOverview.tsx b/src/ui/React/CharacterOverview.tsx index c8e732884..333381a5f 100644 --- a/src/ui/React/CharacterOverview.tsx +++ b/src/ui/React/CharacterOverview.tsx @@ -1,102 +1,207 @@ // Root React Component for the Corporation UI -import React from "react"; +import React, { useState, useEffect } from "react"; +import { makeStyles } from "@material-ui/core/styles"; import { IPlayer } from "../../PersonObjects/IPlayer"; import { numeralWrapper } from "../../ui/numeralFormat"; import { Reputation } from "./Reputation"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; +import Box from "@material-ui/core/Box"; +import Typography from "@material-ui/core/Typography"; +import Divider from "@material-ui/core/Divider"; +import Button from "@material-ui/core/Button"; +import Collapse from "@material-ui/core/Collapse"; + +import { colors } from "./Theme"; + interface IProps { player: IPlayer; + save: () => void; } -export function CharacterOverview(props: IProps): React.ReactElement { - const intelligence = ( - - Int:  - - {numeralWrapper.formatSkill(props.player.intelligence)} - - - ); - - const work = ( - <> - - Work progress: - - - +{Reputation(props.player.workRepGained)} rep - - - - - - - +function Intelligence({ player }: { player: IPlayer }): React.ReactElement { + if (player.intelligence === 0) return <>; + const classes = useStyles(); + return ( + + + Int  + + + {numeralWrapper.formatSkill(player.intelligence)} + + ); +} +function Work({ player }: { player: IPlayer }): React.ReactElement { + if (!player.isWorking || player.focus) return <>; + const classes = useStyles(); return ( <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {props.player.intelligence >= 1 && intelligence} - {props.player.isWorking && !props.player.focus && work} - -
HP: - {numeralWrapper.formatHp(props.player.hp) + " / " + numeralWrapper.formatHp(props.player.max_hp)} -
Money:  - {numeralWrapper.formatMoney(props.player.money.toNumber())} -
Hack:  - {numeralWrapper.formatSkill(props.player.hacking_skill)} -
Str:  - {numeralWrapper.formatSkill(props.player.strength)} -
Def:  - {numeralWrapper.formatSkill(props.player.defense)} -
Dex:  - {numeralWrapper.formatSkill(props.player.dexterity)} -
Agi:  - {numeralWrapper.formatSkill(props.player.agility)} -
Cha:  - {numeralWrapper.formatSkill(props.player.charisma)} -
+ + + Work in progress: + + + + + +{Reputation(player.workRepGained)} rep + + + + + + + ); } + +const useStyles = makeStyles({ + cellNone: { + borderBottom: "none", + padding: 0, + margin: 0, + }, + cell: { + padding: 0, + margin: 0, + }, + hp: { + color: colors.hp, + }, + money: { + color: colors.money, + }, + hack: { + color: colors.hack, + }, + combat: { + color: colors.combat, + }, + cha: { + color: colors.cha, + }, + int: { + color: colors.int, + }, +}); + +export function CharacterOverview({ player, save }: IProps): React.ReactElement { + const setRerender = useState(false)[1]; + + useEffect(() => { + const id = setInterval(() => setRerender((old) => !old), 600); + return () => clearInterval(id); + }, []); + + const classes = useStyles(); + return ( + + + + + + + HP  + + + + {numeralWrapper.formatHp(player.hp)} / {numeralWrapper.formatHp(player.max_hp)} + + + + + + + Money  + + + + {numeralWrapper.formatMoney(player.money.toNumber())} + + + + + + + Hack  + + + + {numeralWrapper.formatSkill(player.hacking_skill)} + + + + + + + Str  + + + + {numeralWrapper.formatSkill(player.strength)} + + + + + + + Def  + + + {numeralWrapper.formatSkill(player.defense)} + + + + + + Dex  + + + + {numeralWrapper.formatSkill(player.dexterity)} + + + + + + Agi  + + + {numeralWrapper.formatSkill(player.agility)} + + + + + + Cha  + + + {numeralWrapper.formatSkill(player.charisma)} + + + + + + + + + + + +
+ + + ); +} diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx index 221ddf6e0..adc3333fa 100644 --- a/src/ui/React/Theme.tsx +++ b/src/ui/React/Theme.tsx @@ -18,6 +18,13 @@ export const colors = { well: "#222", white: "#fff", black: "#000", + + hp: "#dd3434", + money: "#ffd700", + hack: "#adff2f", + combat: "#faffdf", + cha: "#a671d1", + int: "#6495ed", }; export const theme = createMuiTheme({ @@ -175,6 +182,12 @@ export const theme = createMuiTheme({ backgroundColor: colors.welllight, }, }, + MuiPaper: { + root: { + backgroundColor: colors.black, + border: "1px solid " + colors.welllight, + }, + }, }, });