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"; import Svg from "../../Svg"; export default class HelpText extends UIElement { private helpText: UIElement; private returnButton: UIElement; constructor(currentSetting: UIEventSource>) { super(); this.returnButton = new SubtleButton(Svg.close_ui(), new VariableUiElement( currentSetting.map(currentSetting => { if (currentSetting === undefined) { return ""; } return "Return to general help"; } ) )) .ListenTo(currentSetting) .SetClass("small-button") .onClick(() => currentSetting.setData(undefined)); this.helpText = new VariableUiElement(currentSetting.map((setting: SingleSetting) => { if (setting === undefined) { return "

Welcome to the Custom Theme Builder

" + "Here, one can make their own custom mapcomplete themes.
" + "Fill out the fields to get a working mapcomplete theme. More information on the selected field will appear here when you click it.
" + "Want to see how the quests are doing in number of visits? All the stats are open on goatcounter"; } return new Combine(["

", setting._name, "

", setting._description.Render()]).Render(); })) } InnerRender(): string { return new Combine([this.helpText, this.returnButton, ]).Render(); } }