mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-04-29 12:27:07 +02:00
Refactored Main Menu UI implementation. Fixed several bugs related to recent JS -> TypeScript refactors
This commit is contained in:
danielyxie
@@ -0,0 +1,152 @@
|
||||
// Implement the collapsible main menu headers
|
||||
import { MainMenuLinks } from "./Links";
|
||||
import { IPlayer } from "../../PersonObjects/IPlayer";
|
||||
|
||||
interface IMainMenuHeaders {
|
||||
Hacking: HTMLElement | null;
|
||||
Character: HTMLElement | null;
|
||||
World: HTMLElement | null;
|
||||
Help: HTMLElement | null;
|
||||
}
|
||||
|
||||
export const MainMenuHeaders: IMainMenuHeaders = {
|
||||
Hacking: null,
|
||||
Character: null,
|
||||
World: null,
|
||||
Help: null,
|
||||
}
|
||||
|
||||
// Implements collapsible toggle feature when a header is clicked
|
||||
function toggleHeader(open: boolean, elems: HTMLElement[], links: HTMLElement[]) {
|
||||
for (var i = 0; i < elems.length; ++i) {
|
||||
if (open) {
|
||||
elems[i].style.opacity = "1";
|
||||
elems[i].style.maxHeight = elems[i].scrollHeight + "px";
|
||||
} else {
|
||||
elems[i].style.opacity = "0";
|
||||
elems[i].style.maxHeight = null;
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < links.length; ++i) {
|
||||
if (open) {
|
||||
links[i].style.opacity = "1";
|
||||
links[i].style.maxHeight = links[i].scrollHeight + "px";
|
||||
links[i].style.pointerEvents = "auto";
|
||||
} else {
|
||||
links[i].style.opacity = "0";
|
||||
links[i].style.maxHeight = null;
|
||||
links[i].style.pointerEvents = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function initializeMainMenuHeaders(p: IPlayer, dev: boolean=false): boolean {
|
||||
function safeGetElement(id: string): HTMLElement {
|
||||
const elem: HTMLElement | null = document.getElementById(id);
|
||||
if (elem == null) {
|
||||
throw new Error(`Failed to find element with id ${id} in initializeMainMenuHeaders()`);
|
||||
}
|
||||
|
||||
return elem!;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get references to the DOM elements
|
||||
MainMenuHeaders.Hacking = safeGetElement("hacking-menu-header");
|
||||
MainMenuHeaders.Character = safeGetElement("character-menu-header");
|
||||
MainMenuHeaders.World = safeGetElement("world-menu-header");
|
||||
MainMenuHeaders.Help = safeGetElement("help-menu-header");
|
||||
|
||||
// Set click handlers to turn the headers into collapsibles
|
||||
MainMenuHeaders.Hacking.onclick = function() {
|
||||
const terminal: HTMLElement = safeGetElement("terminal-tab");
|
||||
const createScript: HTMLElement = safeGetElement("create-script-tab");
|
||||
const activeScripts: HTMLElement = safeGetElement("active-scripts-tab");
|
||||
const createProgram: HTMLElement = safeGetElement("create-program-tab");
|
||||
const createProgramNot: HTMLElement = safeGetElement("create-program-notification");
|
||||
|
||||
this.classList.toggle("opened");
|
||||
|
||||
const elems: HTMLElement[] = [terminal, createScript, activeScripts, createProgram];
|
||||
const links: HTMLElement[] = [MainMenuLinks.Terminal!, MainMenuLinks.ScriptEditor!, MainMenuLinks.ActiveScripts!, MainMenuLinks.CreateProgram!];
|
||||
if (terminal.style.maxHeight) {
|
||||
toggleHeader(false, elems, links);
|
||||
createProgramNot!.style.display = "none";
|
||||
} else {
|
||||
toggleHeader(true, elems, links);
|
||||
createProgramNot!.style.display = "block"
|
||||
}
|
||||
}
|
||||
|
||||
MainMenuHeaders.Character.onclick = function() {
|
||||
const stats: HTMLElement = safeGetElement("stats-tab");
|
||||
const factions: HTMLElement = safeGetElement("factions-tab");
|
||||
const augmentations: HTMLElement = safeGetElement("augmentations-tab");
|
||||
const hacknetnodes: HTMLElement = safeGetElement("hacknet-nodes-tab");
|
||||
|
||||
this.classList.toggle("opened");
|
||||
|
||||
const elems: HTMLElement[] = [stats, factions, augmentations, hacknetnodes];
|
||||
const links: HTMLElement[] = [MainMenuLinks.Stats!, MainMenuLinks.Factions!, MainMenuLinks.Augmentations!, MainMenuLinks.HacknetNodes!];
|
||||
if (stats.style.maxHeight) {
|
||||
toggleHeader(false, elems, links);
|
||||
} else {
|
||||
toggleHeader(true, elems, links);
|
||||
}
|
||||
}
|
||||
|
||||
MainMenuHeaders.World.onclick = function() {
|
||||
const city: HTMLElement = safeGetElement("city-tab");
|
||||
const travel: HTMLElement = safeGetElement("travel-tab");
|
||||
const job: HTMLElement = safeGetElement("job-tab");
|
||||
const stockmarket: HTMLElement = safeGetElement("stock-market-tab");
|
||||
const bladeburner: HTMLElement = safeGetElement("bladeburner-tab");
|
||||
const corporation: HTMLElement = safeGetElement("corporation-tab");
|
||||
const gang: HTMLElement = safeGetElement("gang-tab");
|
||||
|
||||
// Determine whether certain links should show up
|
||||
job.style.display = p.companyName !== "" ? "list-item" : "none";
|
||||
stockmarket.style.display = p.hasWseAccount ? "list-item" : "none";
|
||||
bladeburner.style.display = p.inBladeburner() ? "list-item" : "none";
|
||||
corporation.style.display = p.hasCorporation() ? "list-item" : "none";
|
||||
gang.style.display = p.inGang() ? "list-item" : "none";
|
||||
|
||||
this.classList.toggle("opened");
|
||||
|
||||
const elems: HTMLElement[] = [city, travel, job, stockmarket, bladeburner, corporation, gang];
|
||||
const links: HTMLElement[] = [MainMenuLinks.City!, MainMenuLinks.Travel!, MainMenuLinks.Job!, MainMenuLinks.StockMarket!, MainMenuLinks.Bladeburner!, MainMenuLinks.Corporation!, MainMenuLinks.Gang!];
|
||||
if (city.style.maxHeight) {
|
||||
toggleHeader(false, elems, links);
|
||||
} else {
|
||||
toggleHeader(true, elems, links);
|
||||
}
|
||||
}
|
||||
|
||||
MainMenuHeaders.Help.onclick = function() {
|
||||
const tutorial: HTMLElement = safeGetElement("tutorial-tab");
|
||||
const options: HTMLElement = safeGetElement("options-tab");
|
||||
|
||||
this.classList.toggle("opened");
|
||||
|
||||
const elems: HTMLElement[] = [tutorial, options];
|
||||
const links: HTMLElement[] = [MainMenuLinks.Tutorial!, MainMenuLinks.Options!];
|
||||
|
||||
if (dev) {
|
||||
elems.push(safeGetElement("dev-tab"));
|
||||
links.push(safeGetElement("dev-menu-link"));
|
||||
}
|
||||
|
||||
if (tutorial.style.maxHeight) {
|
||||
toggleHeader(false, elems, links);
|
||||
} else {
|
||||
toggleHeader(true, elems, links);
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch(e) {
|
||||
console.error(`Failed to initialize Main Menu Headers: ${e}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
// Get references to the Main Menu link DOM elements
|
||||
// Does NOT include collapsible headers for the links
|
||||
import { clearEventListeners } from "../../../utils/uiHelpers/clearEventListeners";
|
||||
|
||||
interface IMainMenuLinks {
|
||||
Terminal: HTMLElement | null;
|
||||
ScriptEditor: HTMLElement | null;
|
||||
ActiveScripts: HTMLElement | null;
|
||||
CreateProgram: HTMLElement | null;
|
||||
Stats: HTMLElement | null;
|
||||
Factions: HTMLElement | null;
|
||||
Augmentations: HTMLElement | null;
|
||||
HacknetNodes: HTMLElement | null;
|
||||
City: HTMLElement | null;
|
||||
Travel: HTMLElement | null;
|
||||
Job: HTMLElement | null;
|
||||
StockMarket: HTMLElement | null;
|
||||
Bladeburner: HTMLElement | null;
|
||||
Corporation: HTMLElement | null;
|
||||
Gang: HTMLElement | null;
|
||||
Tutorial: HTMLElement | null;
|
||||
Options: HTMLElement | null;
|
||||
DevMenu: HTMLElement | null;
|
||||
}
|
||||
|
||||
export const MainMenuLinks: IMainMenuLinks = {
|
||||
Terminal: null,
|
||||
ScriptEditor: null,
|
||||
ActiveScripts: null,
|
||||
CreateProgram: null,
|
||||
Stats: null,
|
||||
Factions: null,
|
||||
Augmentations: null,
|
||||
HacknetNodes: null,
|
||||
City: null,
|
||||
Travel: null,
|
||||
Job: null,
|
||||
StockMarket: null,
|
||||
Bladeburner: null,
|
||||
Corporation: null,
|
||||
Gang: null,
|
||||
Tutorial: null,
|
||||
Options: null,
|
||||
DevMenu: null,
|
||||
}
|
||||
|
||||
export function initializeMainMenuLinks(): boolean {
|
||||
try {
|
||||
function safeGetLink(id: string): HTMLElement {
|
||||
const elem: HTMLElement | null = clearEventListeners(id);
|
||||
if (elem == null) {
|
||||
throw new Error(`clearEventListeners() failed for element with id: ${id}`);
|
||||
}
|
||||
|
||||
return elem!;
|
||||
}
|
||||
|
||||
MainMenuLinks.Terminal = safeGetLink("terminal-menu-link");
|
||||
MainMenuLinks.ScriptEditor = safeGetLink("create-script-menu-link");
|
||||
MainMenuLinks.ActiveScripts = safeGetLink("active-scripts-menu-link");
|
||||
MainMenuLinks.CreateProgram = safeGetLink("create-program-menu-link");
|
||||
MainMenuLinks.Stats = safeGetLink("stats-menu-link");
|
||||
MainMenuLinks.Factions = safeGetLink("factions-menu-link");
|
||||
MainMenuLinks.Augmentations = safeGetLink("augmentations-menu-link");
|
||||
MainMenuLinks.HacknetNodes = safeGetLink("hacknet-nodes-menu-link");
|
||||
MainMenuLinks.City = safeGetLink("city-menu-link");
|
||||
MainMenuLinks.Travel = safeGetLink("travel-menu-link");
|
||||
MainMenuLinks.Job = safeGetLink("job-menu-link");
|
||||
MainMenuLinks.StockMarket = safeGetLink("stock-market-menu-link");
|
||||
MainMenuLinks.Bladeburner = safeGetLink("bladeburner-menu-link");
|
||||
MainMenuLinks.Corporation = safeGetLink("corporation-menu-link");
|
||||
MainMenuLinks.Gang = safeGetLink("gang-menu-link");
|
||||
MainMenuLinks.Tutorial = safeGetLink("tutorial-menu-link");
|
||||
MainMenuLinks.Options = document.getElementById("options-menu-link"); // This click listener is already set, so don't clear it
|
||||
MainMenuLinks.DevMenu = safeGetLink("dev-menu-link");
|
||||
|
||||
return true;
|
||||
} catch(e) {
|
||||
console.error(`Failed to initialize Main Menu Links: ${e}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user