100 lines
2.5 KiB
JavaScript
100 lines
2.5 KiB
JavaScript
var React = require('react'),
|
|
|
|
// ## mixins
|
|
{ ObservableStateMixin } = require('thundercats'),
|
|
|
|
// ## components
|
|
SidePanel = require('./SidePanel.jsx'),
|
|
Results = require('./Results.jsx'),
|
|
Display = require('../displayCode'),
|
|
Editor = require('../editor'),
|
|
{ Grid, Row, Col } = require('react-bootstrap'),
|
|
|
|
// ## flux
|
|
BonfireActions = require('./Actions'),
|
|
BonfireStore = require('./Store');
|
|
|
|
var Bonfire = React.createClass({
|
|
|
|
mixins: [ObservableStateMixin],
|
|
|
|
contextTypes: {
|
|
makePath: React.PropTypes.func.isRequired,
|
|
replaceWith: React.PropTypes.func.isRequired
|
|
},
|
|
|
|
getObservable: function() {
|
|
return BonfireStore;
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
// get history object
|
|
var his = typeof window !== 'undefined' ? window.history : null;
|
|
// spinal-case bonfireName
|
|
var bonfireName = this.state.name.toLowerCase().replace(/\s/g, '-');
|
|
// create proper URI from react-router
|
|
var path = this.context.makePath('bonfires', { bonfireName: bonfireName });
|
|
|
|
// if html5 push state exists, update URI
|
|
// else we are using hash location and should just cause a re render
|
|
if (his) {
|
|
his.replaceState({ path: path }, '', path);
|
|
} else {
|
|
this.context.replaceWith('bonfires', { bonfireName: bonfireName});
|
|
}
|
|
},
|
|
|
|
_onTestBonfire: function() {
|
|
BonfireActions.testUserCode({
|
|
userCode: this.state.userCode,
|
|
tests: this.state.tests
|
|
});
|
|
},
|
|
|
|
render: function() {
|
|
var {
|
|
name,
|
|
userCode,
|
|
difficulty,
|
|
description,
|
|
results,
|
|
display
|
|
} = this.state;
|
|
var brief = description.slice(0, 1).pop();
|
|
|
|
// convert bonfire difficulty from floating point string
|
|
// to integer.
|
|
var difficultyInt = Math.floor(+difficulty);
|
|
|
|
return (
|
|
<Grid>
|
|
<Row>
|
|
<Col
|
|
xs={ 12 }
|
|
md={ 4 }>
|
|
<SidePanel
|
|
name={ name }
|
|
brief={ brief }
|
|
difficulty={ difficultyInt }
|
|
onTestBonfire={ this._onTestBonfire }
|
|
description={ description.length > 1 ? description : [] }/>
|
|
<Display
|
|
value={ display }/>
|
|
<Results
|
|
results={ results }/>
|
|
</Col>
|
|
<Col
|
|
xs={ 12 }
|
|
md={ 8 }>
|
|
<Editor
|
|
onValueChange={ BonfireActions.setUserCode }
|
|
value={ userCode }/>
|
|
</Col>
|
|
</Row>
|
|
</Grid>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = Bonfire;
|