import React, {Component} from 'react' import './App.css'; import Level from './render/Level' import LevelData from './game/Level' import testLevel from './data/testlevel1' import Editor from './editor/Editor' class App extends Component<{}> { state = { margin: 0, scale: 1.5, showOptions: false, rawLevelData: null, levelData: null, screen: 'game', } componentDidMount() { this.loadLevelData(testLevel) } async loadLevelData(data = this.state.rawLevelData) { const levelData = await LevelData.from(data) await levelData.tick() this.setState({ levelData, rawLevelData: data }) } render() { const { margin, scale, showOptions, levelData } = this.state const opts = {margin, scale} return ( <React.Fragment> <div className="render-controls" style={showOptions && {marginLeft: 0} || {}}> <div className="render-controls-row"> <label>Margin: </label> <input type="number" value={margin} onChange={this.set('margin')}/> </div> <div className="render-controls-row"> <label>Scale: </label> <input type="number" value={scale} onChange={this.set('scale')} step={0.25}/> </div> </div> <div className="root-container" style={showOptions && {marginLeft: 420} || {}}> <button onClick={this.set('showOptions', s => !s.showOptions)}>{ showOptions ? 'Hide' : 'Show' } Options</button> <button onClick={this.set('screen', s => s.screen === 'editor' ? 'game' : 'editor')}>Toggle Editor</button> <button onClick={() => this.loadLevelData()}>Reset Level</button> <br/> { (() => { switch (this.state.screen) { case 'game': if (levelData == null) { return <span>LOADING</span> } else { return <Level level={levelData} {...opts} /> } case 'editor': { return this.state.rawLevelData && ( <Editor data={this.state.rawLevelData} onChange={data => { this.loadLevelData(data) }} /> ) } default: return null } })() } </div> </React.Fragment> ); } set = (name, value = null) => e => { const targetValue = e.currentTarget.value this.setState(s => ({ [name]: value && value.call ? value(s) : value || targetValue })) } } export default App;