mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-23 06:32: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