import { observer } from "mobx-react" ; import * as React from "react" ; import { CityBuilderTab } from "../../classes/CityBuilderTab" ; import { lazyInject } from "../../inversify.config" ; import AppStatusStore from "../../stores/AppStatusStore" ; import CityBuilderStore from "../../stores/CityBuilderStore" ; import SceneStore from "../../stores/SceneStore" ; import AdvancedAnalysisOptions from "./AdvancedAnalysisOptions" ; import InfoTab from "./InfoTab" ; import OptionsSimple from "./OptionsSimple" ; @ observer export default class CityBuilder extends React . Component < Record < string , never > , any > { @ lazyInject ( "SceneStore" ) private readonly sceneStore ! : SceneStore ; @ lazyInject ( "CityBuilderStore" ) private readonly cityBuilderStore ! : CityBuilderStore ; @ lazyInject ( "AppStatusStore" ) private readonly appStatusStore ! : AppStatusStore ; private readonly tabList = [ { name : CityBuilderTab . Default , label : "Options" , content : < OptionsSimple />, } , { name : CityBuilderTab . OptionAnalysis , label : "Advanced options" , content : < AdvancedAnalysisOptions />, } , { name : CityBuilderTab . Info , label : "Info" , content : < InfoTab />, } , ] ; public render ( ) { if ( ! ( this . cityBuilderStore . show && ! this . appStatusStore . isVisible ) ) { return < div />; } return ( < div className = "city-builder" > < div > < ul className = "tabrow" > { this . tabList . map ( ( tab , i ) => ( < li id = { "city-builder-tab-" + tab . name } key = { i } onClick = { ( ) => this . setCurrentTab ( tab . name ) } className = { tab . name === this . cityBuilderStore . currentTab ? "selected" : "" } > { tab . label } < /li>))} < /ul> < /div> { this . tabList . map ( ( tab , i ) => { if ( tab . name === this . cityBuilderStore . currentTab ) { return ( < div className = "tab-content" key = { i } > { tab . content } < /div>); } else { return null ; } } ) } { this . renderButtons ( ) } < /div>); } private renderButtons ( ) { if ( ! this . sceneStore . isVisible ) { return ( < div className = "buttons" > < button onClick = { ( ) => this . loadScene ( ) } > Load Scene < /button> < /div>); } return ( < div className = "buttons" > < button className = "left" onClick = { ( ) => this . loadScene ( ) } > Load Scene < /button> < button className = "right" onClick = { ( ) => this . close ( ) } > Close < /button> < /div>); } private loadScene ( ) { this . cityBuilderStore . show = false ; this . cityBuilderStore . initiateBuildProcess = true ; } private close ( ) { this . cityBuilderStore . show = false ; } private setCurrentTab ( name ) { this . cityBuilderStore . currentTab = name ; } }