mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-22 22:22:26 +01:00
more conversion
This commit is contained in:
Olivier Gagnon
parent
0de3deee3f
commit
361ef31fe7
@ -1,20 +0,0 @@
|
||||
// Base class for React Components for Corporation UI
|
||||
// Contains a few helper functions that let derived classes easily
|
||||
// access Corporation properties
|
||||
import React from "react";
|
||||
|
||||
const Component = React.Component;
|
||||
|
||||
export class BaseReactComponent extends Component {
|
||||
corp() {
|
||||
return this.props.corp;
|
||||
}
|
||||
|
||||
eventHandler() {
|
||||
return this.props.eventHandler;
|
||||
}
|
||||
|
||||
routing() {
|
||||
return this.props.routing;
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
// React Component for managing the Corporation's Industry UI
|
||||
// This Industry component does NOT include the city tabs at the top
|
||||
import React from "react";
|
||||
import { BaseReactComponent } from "./BaseReactComponent";
|
||||
|
||||
import { IndustryOffice } from "./IndustryOffice";
|
||||
import { IndustryOverview } from "./IndustryOverview";
|
||||
import { IndustryWarehouse } from "./IndustryWarehouse";
|
||||
|
||||
export class Industry extends BaseReactComponent {
|
||||
constructor(props) {
|
||||
if (props.currentCity == null) {
|
||||
throw new Error(`Industry component constructed without 'city' prop`);
|
||||
}
|
||||
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className={"cmpy-mgmt-industry-left-panel"}>
|
||||
<IndustryOverview
|
||||
routing={this.props.routing}
|
||||
eventHandler={this.props.eventHandler}
|
||||
corp={this.props.corp}
|
||||
currentCity={this.props.currentCity}
|
||||
/>
|
||||
<IndustryOffice {...this.props} />
|
||||
</div>
|
||||
|
||||
<div className={"cmpy-mgmt-industry-right-panel"}>
|
||||
<IndustryWarehouse
|
||||
corp={this.props.corp}
|
||||
routing={this.props.routing}
|
||||
currentCity={this.props.currentCity}
|
||||
eventHandler={this.props.eventHandler}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
}
|
||||
40
src/Corporation/ui/Industry.tsx
Normal file
40
src/Corporation/ui/Industry.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
// React Component for managing the Corporation's Industry UI
|
||||
// This Industry component does NOT include the city tabs at the top
|
||||
import React from "react";
|
||||
|
||||
import { IndustryOffice } from "./IndustryOffice";
|
||||
import { IndustryOverview } from "./IndustryOverview";
|
||||
import { IndustryWarehouse } from "./IndustryWarehouse";
|
||||
|
||||
interface IProps {
|
||||
routing: any;
|
||||
eventHandler: any;
|
||||
corp: any;
|
||||
currentCity: string;
|
||||
}
|
||||
|
||||
export function Industry(props: IProps): React.ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<div className={"cmpy-mgmt-industry-left-panel"}>
|
||||
<IndustryOverview
|
||||
routing={props.routing}
|
||||
eventHandler={props.eventHandler}
|
||||
corp={props.corp}
|
||||
currentCity={props.currentCity} />
|
||||
<IndustryOffice
|
||||
routing={props.routing}
|
||||
eventHandler={props.eventHandler}
|
||||
corp={props.corp}
|
||||
currentCity={props.currentCity} />
|
||||
</div>
|
||||
<div className={"cmpy-mgmt-industry-right-panel"}>
|
||||
<IndustryWarehouse
|
||||
corp={props.corp}
|
||||
routing={props.routing}
|
||||
currentCity={props.currentCity}
|
||||
eventHandler={props.eventHandler} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,106 +0,0 @@
|
||||
// React Component for the element that contains the actual info/data
|
||||
// for the Corporation UI. This panel lies below the header tabs and will
|
||||
// be filled with whatever is needed based on the routing/navigation
|
||||
import React from "react";
|
||||
import { BaseReactComponent } from "./BaseReactComponent";
|
||||
|
||||
import { CityTabs } from "./CityTabs";
|
||||
import { Industry } from "./Industry";
|
||||
import { Overview } from "./Overview";
|
||||
|
||||
import { OfficeSpace } from "../OfficeSpace";
|
||||
|
||||
import { CityName } from "../../Locations/data/CityNames";
|
||||
|
||||
export class MainPanel extends BaseReactComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
division: "",
|
||||
city: CityName.Sector12,
|
||||
}
|
||||
}
|
||||
|
||||
// We can pass this setter to child components
|
||||
changeCityState(newCity) {
|
||||
if (Object.values(CityName).includes(newCity)) {
|
||||
this.state.city = newCity;
|
||||
} else {
|
||||
console.error(`Tried to change MainPanel's city state to an invalid city: ${newCity}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Determines what UI content to render based on routing
|
||||
renderContent() {
|
||||
if (this.routing().isOnOverviewPage()) {
|
||||
// Corporation overview Content
|
||||
return this.renderOverviewPage();
|
||||
} else {
|
||||
// Division content
|
||||
|
||||
// First, check if we're at a new division. If so, we need to reset the city to Sector-12
|
||||
// Otherwise, just switch the 'city' state
|
||||
const currentDivision = this.routing().current();
|
||||
if (currentDivision !== this.state.division) {
|
||||
this.state.division = currentDivision;
|
||||
this.state.city = CityName.Sector12;
|
||||
}
|
||||
|
||||
return this.renderDivisionPage();
|
||||
}
|
||||
}
|
||||
|
||||
renderOverviewPage() {
|
||||
return (
|
||||
<div id="cmpy-mgmt-panel">
|
||||
<Overview {...this.props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderDivisionPage() {
|
||||
// Note: Division is the same thing as Industry...I wasn't consistent with naming
|
||||
const division = this.routing().currentDivision;
|
||||
if (division == null) {
|
||||
throw new Error(`Routing does not hold reference to the current Industry`);
|
||||
}
|
||||
|
||||
// City tabs
|
||||
const onClicks = {};
|
||||
for (const cityName in division.offices) {
|
||||
if (division.offices[cityName] instanceof OfficeSpace) {
|
||||
onClicks[cityName] = () => {
|
||||
this.state.city = cityName;
|
||||
this.corp().rerender();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const cityTabs = (
|
||||
<CityTabs
|
||||
{...this.props}
|
||||
corp={this.props.corp}
|
||||
city={this.state.city}
|
||||
onClicks={onClicks}
|
||||
cityStateSetter={this.changeCityState.bind(this)}
|
||||
/>
|
||||
)
|
||||
|
||||
// Rest of Industry UI
|
||||
const industry = (
|
||||
<Industry {...this.props} currentCity={this.state.city} />
|
||||
)
|
||||
|
||||
return (
|
||||
<div id="cmpy-mgmt-panel">
|
||||
{cityTabs}
|
||||
{industry}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.renderContent();
|
||||
}
|
||||
}
|
||||
93
src/Corporation/ui/MainPanel.tsx
Normal file
93
src/Corporation/ui/MainPanel.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
// React Component for the element that contains the actual info/data
|
||||
// for the Corporation UI. This panel lies below the header tabs and will
|
||||
// be filled with whatever is needed based on the routing/navigation
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { CityTabs } from "./CityTabs";
|
||||
import { Industry } from "./Industry";
|
||||
import { Overview } from "./Overview";
|
||||
|
||||
import { OfficeSpace } from "../OfficeSpace";
|
||||
|
||||
import { CityName } from "../../Locations/data/CityNames";
|
||||
|
||||
interface IProps {
|
||||
corp: any;
|
||||
eventHandler: any;
|
||||
routing: any;
|
||||
}
|
||||
|
||||
export function MainPanel(props: IProps): React.ReactElement {
|
||||
const [division, setDivision] = useState("");
|
||||
const [city, setCity] = useState<string>(CityName.Sector12);
|
||||
|
||||
// We can pass this setter to child components
|
||||
function changeCityState(newCity: string): void {
|
||||
if (Object.values(CityName).includes(newCity as CityName)) {
|
||||
setCity(newCity);
|
||||
} else {
|
||||
console.error(`Tried to change MainPanel's city state to an invalid city: ${newCity}`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderOverviewPage() {
|
||||
return (
|
||||
<div id="cmpy-mgmt-panel">
|
||||
<Overview {...props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderDivisionPage() {
|
||||
// Note: Division is the same thing as Industry...I wasn't consistent with naming
|
||||
const division = props.routing.currentDivision;
|
||||
if (division == null) {
|
||||
throw new Error(`Routing does not hold reference to the current Industry`);
|
||||
}
|
||||
|
||||
// City tabs
|
||||
const onClicks: { [key: string]: () => void } = {};
|
||||
for (const cityName in division.offices) {
|
||||
if (division.offices[cityName] instanceof OfficeSpace) {
|
||||
onClicks[cityName] = () => {
|
||||
setCity(cityName);
|
||||
props.corp.rerender();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const cityTabs = (
|
||||
<CityTabs
|
||||
{...props}
|
||||
corp={props.corp}
|
||||
city={city}
|
||||
onClicks={onClicks}
|
||||
cityStateSetter={changeCityState}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div id="cmpy-mgmt-panel">
|
||||
{cityTabs}
|
||||
<Industry {...props} currentCity={city} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (props.routing.isOnOverviewPage()) {
|
||||
// Corporation overview Content
|
||||
return renderOverviewPage();
|
||||
} else {
|
||||
// Division content
|
||||
|
||||
// First, check if we're at a new division. If so, we need to reset the city to Sector-12
|
||||
// Otherwise, just switch the 'city' state
|
||||
const currentDivision = props.routing.current();
|
||||
if (currentDivision !== division) {
|
||||
setDivision(currentDivision);
|
||||
setCity(CityName.Sector12);
|
||||
}
|
||||
|
||||
return renderDivisionPage();
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
// Root React Component for the Corporation UI
|
||||
import React from "react";
|
||||
import { BaseReactComponent } from "./BaseReactComponent";
|
||||
|
||||
import { HeaderTabs } from "./HeaderTabs";
|
||||
import { MainPanel } from "./MainPanel";
|
||||
|
||||
export class CorporationRoot extends BaseReactComponent {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<HeaderTabs corp={this.props.corp} eventHandler={this.props.eventHandler} routing={this.props.routing} />
|
||||
<MainPanel {...this.props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
20
src/Corporation/ui/Root.tsx
Normal file
20
src/Corporation/ui/Root.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
// Root React Component for the Corporation UI
|
||||
import React from "react";
|
||||
|
||||
import { HeaderTabs } from "./HeaderTabs";
|
||||
import { MainPanel } from "./MainPanel";
|
||||
|
||||
interface IProps {
|
||||
corp: any;
|
||||
eventHandler: any;
|
||||
routing: any;
|
||||
}
|
||||
|
||||
export function CorporationRoot(props: IProps): React.ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<HeaderTabs corp={props.corp} eventHandler={props.eventHandler} routing={props.routing} />
|
||||
<MainPanel corp={props.corp} eventHandler={props.eventHandler} routing={props.routing} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user