mapcomplete/UI/CustomGenerator/HelpText.ts

50 lines
1.9 KiB
TypeScript
Raw Normal View History

2020-09-17 14:24:36 +02:00
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import {SubtleButton} from "../Base/SubtleButton";
import Combine from "../Base/Combine";
import SingleSetting from "./SingleSetting";
2020-09-02 11:37:34 +02:00
export default class HelpText extends UIElement {
private helpText: UIElement;
private returnButton: UIElement;
constructor(currentSetting: UIEventSource<SingleSetting<any>>) {
super();
this.returnButton = new SubtleButton("./assets/close.svg",
new VariableUiElement(
currentSetting.map(currentSetting => {
if (currentSetting === undefined) {
return "";
}
return "Return to general help";
}
)
))
.ListenTo(currentSetting)
.SetClass("small-button")
2020-09-02 11:37:34 +02:00
.onClick(() => currentSetting.setData(undefined));
this.helpText = new VariableUiElement(currentSetting.map((setting: SingleSetting<any>) => {
if (setting === undefined) {
return "<h1>Welcome to the Custom Theme Builder</h1>" +
"Here, one can make their own custom mapcomplete themes.<br/>" +
2020-09-06 00:11:02 +02:00
"Fill out the fields to get a working mapcomplete theme. More information on the selected field will appear here when you click it.<br/>" +
2020-09-17 13:13:02 +02:00
"Want to see how the quests are doing in number of visits? All the stats are open on <a href='https://pietervdvn.goatcounter.com' target='_blank'>goatcounter</a>";
2020-09-02 11:37:34 +02:00
}
return new Combine(["<h1>", setting._name, "</h1>", setting._description.Render()]).Render();
}))
}
InnerRender(): string {
return new Combine([this.helpText,
this.returnButton,
]).Render();
}
}