2021-09-11 07:54:19 +02:00
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
import { IEngine } from "../../IEngine";
|
|
|
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
|
|
|
import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
|
|
|
|
import { getAvailableCreatePrograms } from "../../Programs/ProgramHelpers";
|
|
|
|
import { ICorporation } from "../../Corporation/ICorporation";
|
|
|
|
import { IGang } from "../../Gang/IGang";
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
player: IPlayer;
|
|
|
|
engine: IEngine;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function SidebarRoot(props: IProps): React.ReactElement {
|
|
|
|
const setRerender = useState(false)[1];
|
|
|
|
function rerender(): void {
|
|
|
|
setRerender((old) => !old);
|
|
|
|
}
|
|
|
|
const [divisionName, setDivisionName] = useState("Overview");
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const id = setInterval(rerender, 20);
|
|
|
|
return () => clearInterval(id);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const [hackingOpen, setHackingOpen] = useState(true);
|
|
|
|
const [characterOpen, setCharacterOpen] = useState(true);
|
|
|
|
const [worldOpen, setWorldOpen] = useState(true);
|
|
|
|
const [helpOpen, setHelpOpen] = useState(true);
|
|
|
|
|
|
|
|
const flashTerminal =
|
|
|
|
ITutorial.currStep === iTutorialSteps.CharacterGoToTerminalPage ||
|
|
|
|
ITutorial.currStep === iTutorialSteps.ActiveScriptsPage;
|
|
|
|
|
|
|
|
const flashStats = ITutorial.currStep === iTutorialSteps.GoToCharacterPage;
|
|
|
|
|
|
|
|
const flashActiveScripts = ITutorial.currStep === iTutorialSteps.TerminalGoToActiveScriptsPage;
|
|
|
|
|
|
|
|
const flashHacknet = ITutorial.currStep === iTutorialSteps.GoToHacknetNodesPage;
|
|
|
|
|
|
|
|
const flashCity = ITutorial.currStep === iTutorialSteps.HacknetNodesGoToWorldPage;
|
|
|
|
|
|
|
|
const flashTutorial = ITutorial.currStep === iTutorialSteps.WorldDescription;
|
|
|
|
|
|
|
|
function clickTerminal() {
|
|
|
|
props.engine.loadTerminalContent();
|
|
|
|
if (flashTerminal) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickStats() {
|
2021-09-11 08:32:15 +02:00
|
|
|
props.engine.loadCharacterContent();
|
2021-09-11 07:54:19 +02:00
|
|
|
if (flashStats) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickActiveScripts() {
|
|
|
|
props.engine.loadActiveScriptsContent();
|
|
|
|
if (flashActiveScripts) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickHacknet() {
|
|
|
|
props.engine.loadHacknetNodesContent();
|
|
|
|
if (flashHacknet) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickCity() {
|
|
|
|
props.engine.loadLocationContent();
|
|
|
|
if (flashCity) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickTutorial() {
|
|
|
|
props.engine.loadTutorialContent();
|
|
|
|
if (flashTutorial) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
const programCount = getAvailableCreatePrograms(props.player).length;
|
|
|
|
const canCreateProgram =
|
|
|
|
programCount > 0 ||
|
|
|
|
props.player.augmentations.length > 0 ||
|
|
|
|
props.player.queuedAugmentations.length > 0 ||
|
|
|
|
props.player.sourceFiles.length > 0;
|
|
|
|
|
|
|
|
const canOpenFactions =
|
|
|
|
props.player.factionInvitations.length > 0 ||
|
|
|
|
props.player.factions.length > 0 ||
|
|
|
|
props.player.augmentations.length > 0 ||
|
|
|
|
props.player.queuedAugmentations.length > 0 ||
|
|
|
|
props.player.sourceFiles.length > 0;
|
|
|
|
|
|
|
|
const canOpenAugmentations =
|
|
|
|
props.player.augmentations.length > 0 ||
|
|
|
|
props.player.queuedAugmentations.length > 0 ||
|
|
|
|
props.player.sourceFiles.length > 0;
|
|
|
|
|
|
|
|
const canOpenSleeves = props.player.sleeves.length > 0;
|
|
|
|
|
2021-09-11 08:32:15 +02:00
|
|
|
// TODO(hydroflame): these should not as any but right now the def is that it
|
|
|
|
// can only be defined;
|
|
|
|
const canCorporation = !!(props.player.corporation as any);
|
|
|
|
const canGang = !!(props.player.gang as any);
|
|
|
|
const canJob = props.player.companyName !== "";
|
|
|
|
const canStockMarket = props.player.hasWseAccount;
|
|
|
|
const canBladeburner = !!(props.player.bladeburner as any);
|
2021-09-11 07:54:19 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<ul id="mainmenu" className="mainmenu noscrollbar noselect">
|
|
|
|
{/* Hacking dropdown */}
|
|
|
|
<li className="menu-header">
|
|
|
|
<button
|
|
|
|
id="hacking-menu-header"
|
|
|
|
className={
|
|
|
|
"noselect mainmenu-accordion-header" +
|
|
|
|
(hackingOpen ? " opened" : "") +
|
|
|
|
(flashTerminal ? " flashing-button" : "")
|
|
|
|
}
|
|
|
|
onClick={() => setHackingOpen((old) => !old)}
|
|
|
|
>
|
|
|
|
Hacking
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{hackingOpen && (
|
|
|
|
<>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button className={flashTerminal ? "flashing-button" : ""} onClick={clickTerminal}>
|
|
|
|
Terminal
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadScriptEditorContent()}>Create Script</button>
|
|
|
|
</li>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button className={flashActiveScripts ? "flashing-button" : ""} onClick={clickActiveScripts}>
|
|
|
|
Active Scripts
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{canCreateProgram && (
|
|
|
|
<li className="mainmenu-accordion-panel">
|
2021-09-11 08:11:41 +02:00
|
|
|
<button className="notification" onClick={() => props.engine.loadCreateProgramContent()}>
|
|
|
|
Create Program
|
|
|
|
{programCount > 0 && <span className="badge">{programCount}</span>}
|
2021-09-11 07:54:19 +02:00
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{/* Character dropdown */}
|
|
|
|
<li className="menu-header">
|
|
|
|
<button
|
|
|
|
id="character-menu-header"
|
|
|
|
className={"noselect mainmenu-accordion-header" + (characterOpen ? " opened" : "")}
|
|
|
|
onClick={() => setCharacterOpen((old) => !old)}
|
|
|
|
>
|
|
|
|
Character
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{characterOpen && (
|
|
|
|
<>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button className={flashStats ? "flashing-button" : ""} onClick={clickStats}>
|
|
|
|
Stats
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{canOpenFactions && (
|
|
|
|
<li className="mainmenu-accordion-panel">
|
2021-09-11 08:11:41 +02:00
|
|
|
<button className="notification" onClick={() => props.engine.loadFactionsContent()}>
|
2021-09-11 07:54:19 +02:00
|
|
|
Factions
|
2021-09-11 08:11:41 +02:00
|
|
|
{props.player.factionInvitations.length > 0 && (
|
|
|
|
<span className="badge">{props.player.factionInvitations.length}</span>
|
|
|
|
)}
|
2021-09-11 07:54:19 +02:00
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
{canOpenAugmentations && (
|
|
|
|
<li className="mainmenu-accordion-panel">
|
2021-09-11 08:11:41 +02:00
|
|
|
<button className="notification" onClick={() => props.engine.loadAugmentationsContent()}>
|
2021-09-11 07:54:19 +02:00
|
|
|
Augmentations
|
2021-09-11 08:11:41 +02:00
|
|
|
{props.player.queuedAugmentations.length > 0 && (
|
|
|
|
<span className="badge">{props.player.queuedAugmentations.length}</span>
|
|
|
|
)}
|
2021-09-11 07:54:19 +02:00
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button className={flashHacknet ? "flashing-button" : ""} onClick={clickHacknet}>
|
|
|
|
Hacknet
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{canOpenSleeves && (
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadSleevesContent()}>Sleeves</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{/* World dropdown */}
|
|
|
|
<li className="menu-header">
|
|
|
|
<button
|
|
|
|
id="world-menu-header"
|
|
|
|
className={"noselect mainmenu-accordion-header" + (worldOpen ? " opened" : "")}
|
|
|
|
onClick={() => setWorldOpen((old) => !old)}
|
|
|
|
>
|
|
|
|
World
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
{worldOpen && (
|
|
|
|
<>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button className={flashCity ? "flashing-button" : ""} onClick={clickCity}>
|
|
|
|
City
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadTravelContent()}>Travel</button>
|
|
|
|
</li>
|
2021-09-11 08:32:15 +02:00
|
|
|
{canJob && (
|
2021-09-11 07:54:19 +02:00
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadJobContent()}>Job</button>
|
|
|
|
</li>
|
|
|
|
)}
|
2021-09-11 08:32:15 +02:00
|
|
|
{canStockMarket && (
|
2021-09-11 07:54:19 +02:00
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadStockMarketContent()}>Stock Market</button>
|
|
|
|
</li>
|
|
|
|
)}
|
2021-09-11 08:32:15 +02:00
|
|
|
{canBladeburner && (
|
2021-09-11 07:54:19 +02:00
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadBladeburnerContent()}>Bladeburner</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
{canCorporation && (
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadCorporationContent()}>Corp</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
{canGang && (
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadGangContent()}>Gang</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
<li className="menu-header">
|
|
|
|
<button
|
|
|
|
id="help-menu-header"
|
|
|
|
className={"noselect mainmenu-accordion-header" + (helpOpen ? " opened" : "")}
|
|
|
|
onClick={() => setHelpOpen((old) => !old)}
|
|
|
|
>
|
|
|
|
Help
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{helpOpen && (
|
|
|
|
<>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadMilestonesContent()}>Milestones</button>
|
|
|
|
</li>
|
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button className={flashTutorial ? "flashing-button" : ""} onClick={clickTutorial}>
|
|
|
|
Tutorial
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{/*<li className="mainmenu-accordion-panel">
|
|
|
|
<button>Options</button>
|
|
|
|
</li>*/}
|
2021-09-11 07:58:01 +02:00
|
|
|
{process.env.NODE_ENV === "development" && (
|
2021-09-11 07:54:19 +02:00
|
|
|
<li className="mainmenu-accordion-panel">
|
|
|
|
<button onClick={() => props.engine.loadDevMenuContent()}>Dev</button>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|