bitburner-src/utils/YesNoBox.ts

161 lines
5.1 KiB
TypeScript
Raw Normal View History

/**
* Generic Yes-No Pop-up box
* Used to create pop-up boxes that require a yes/no response from player
*
* There are two types of pop ups:
* 1. Just a Yes/No response from player
* 2. Popup also includes a text input field in addition to the Yes/No response
*/
import { clearEventListeners } from "./uiHelpers/clearEventListeners";
import { KEY } from "./helpers/keyCodes";
import * as React from "react";
import * as ReactDOM from "react-dom";
export let yesNoBoxOpen: boolean = false;
const yesNoBoxContainer: HTMLElement | null = document.getElementById("yes-no-box-container");
const yesNoBoxTextElement: HTMLElement | null = document.getElementById("yes-no-box-text");
function yesNoBoxHotkeyHandler(e: KeyboardEvent) {
if (e.keyCode === KEY.ESC) {
yesNoBoxClose();
} else if (e.keyCode === KEY.ENTER) {
const yesBtn: HTMLElement | null = document.getElementById("yes-no-box-yes");
if (yesBtn) {
yesBtn.click();
} else {
console.error(`Could not find YesNoBox Yes button DOM element`)
}
}
}
export function yesNoBoxClose(): boolean {
if (yesNoBoxContainer) {
yesNoBoxContainer.style.display = "none";
} else {
console.error("Container not found for YesNoBox");
}
yesNoBoxOpen = false;
// Remove hotkey handler
document.removeEventListener("keydown", yesNoBoxHotkeyHandler);
return false; //So that 'return yesNoBoxClose()' is return false in event listeners
}
export function yesNoBoxGetYesButton() {
return clearEventListeners("yes-no-box-yes");
}
export function yesNoBoxGetNoButton() {
return clearEventListeners("yes-no-box-no");
}
export function yesNoBoxCreate(txt: string | JSX.Element) {
if (yesNoBoxOpen) { return false; } //Already open
yesNoBoxOpen = true;
if (yesNoBoxTextElement) {
ReactDOM.unmountComponentAtNode(yesNoBoxTextElement);
yesNoBoxTextElement.innerHTML = '';
if(typeof txt === 'string') {
yesNoBoxTextElement.innerHTML = txt as string;
} else {
ReactDOM.render(txt, yesNoBoxTextElement);
}
} else {
console.error(`Text element not found for YesNoBox`);
}
if (yesNoBoxContainer) {
yesNoBoxContainer.style.display = "flex";
} else {
console.error("Container not found for YesNoBox");
}
// Add event listener for Esc and Enter hotkeys
document.addEventListener("keydown", yesNoBoxHotkeyHandler);
return true;
}
/**
* Yes-No pop up box with text input field
*/
const yesNoTextInputBoxContainer: HTMLElement | null = document.getElementById("yes-no-text-input-box-container");
const yesNoTextInputBoxInput: HTMLInputElement | null = document.getElementById("yes-no-text-input-box-input") as HTMLInputElement;
const yesNoTextInputBoxTextElement: HTMLElement | null = document.getElementById("yes-no-text-input-box-text");
export function yesNoTxtInpBoxHotkeyHandler(e: KeyboardEvent) {
if (e.keyCode === KEY.ESC) {
yesNoTxtInpBoxClose();
} else if (e.keyCode === KEY.ENTER) {
const yesBtn: HTMLElement | null = document.getElementById("yes-no-text-input-box-yes");
if (yesBtn) {
yesBtn.click();
} else {
console.error(`Could not find YesNoTxtInputBox Yes button DOM element`)
}
}
}
export function yesNoTxtInpBoxClose(): boolean {
if (yesNoTextInputBoxContainer != null) {
yesNoTextInputBoxContainer.style.display = "none";
} else {
console.error("Container not found for YesNoTextInputBox");
return false;
}
yesNoBoxOpen = false;
yesNoTextInputBoxInput!.value = "";
// Remove hotkey handler
document.removeEventListener("keydown", yesNoTxtInpBoxHotkeyHandler);
return false;
}
export function yesNoTxtInpBoxGetYesButton(): HTMLElement | null {
return clearEventListeners("yes-no-text-input-box-yes");
}
export function yesNoTxtInpBoxGetNoButton(): HTMLElement | null {
return clearEventListeners("yes-no-text-input-box-no");
}
export function yesNoTxtInpBoxGetInput(): string {
if (yesNoTextInputBoxInput == null) {
console.error("Could not find YesNoTextInputBox input element");
return "";
}
let val: string = yesNoTextInputBoxInput!.value;
val = val.replace(/\s+/g, '');
return val;
}
export function yesNoTxtInpBoxCreate(txt: string | JSX.Element) {
yesNoBoxOpen = true;
if (yesNoTextInputBoxTextElement) {
ReactDOM.unmountComponentAtNode(yesNoTextInputBoxTextElement);
yesNoTextInputBoxTextElement.innerHTML = '';
if(typeof txt === 'string') {
yesNoTextInputBoxTextElement.innerHTML = txt;
} else {
ReactDOM.render(txt, yesNoTextInputBoxTextElement);
}
}
if (yesNoTextInputBoxContainer) {
yesNoTextInputBoxContainer.style.display = "flex";
} else {
console.error("Container not found for YesNoTextInputBox");
}
// Add event listener for Esc and Enter hotkeys
document.addEventListener("keydown", yesNoTxtInpBoxHotkeyHandler);
yesNoTextInputBoxInput!.focus();
}