Skip to content

Instantly share code, notes, and snippets.

@totty90
Created January 1, 2014 16:32
Show Gist options
  • Save totty90/8209324 to your computer and use it in GitHub Desktop.
Save totty90/8209324 to your computer and use it in GitHub Desktop.
React example vs jquery in pure javascript
var BuildTemplate = ' \
<h2 class="small-caps">build</h2> \
';
var BuildV = BaseV.extend({
className: 'btn-group-vertical',
initialize: function(o){
this.__player = o.player;
this.__player.on('changeMoney', this.update.bind(this));
this.__buildItems = o.buildItems;
this.__htmlTemplate = BuildTemplate;
this.__appendTemplate();
this.$el.css({
width : '100%',
margin : '0 auto',
})
key.on('a', null, this.__tryBuildItemByName.bind(this, 'Basic attack'));
key.on('c', null, this.__tryBuildItemByName.bind(this, 'Crate'));
this.$buildItems = [];
_.each(this.__buildItems, function(buildItem){
var html = '<button type="button" class="btn btn-default" data-build-item="'+buildItem.metadata.name+'">'+buildItem.metadata.name+' [' + buildItem.metadata.buildPrice + ']'+'</button>';
var $buildItem = $(html);
this.$buildItems.push($buildItem)
// $buildItem.on('click', function(){this.trigger('build', buildItem.metadata.name);}.bind(this));
$buildItem.on('click', this.__onBuildItemClick.bind(this));
this.$el.append($buildItem);
}.bind(this))
},
__onBuildItemClick: function(e){
var $buildItem = $(e.target);
var buildItem = this.__getBuildItemByName($buildItem.attr('data-build-item'));
var built = this.__tryBuildItem(buildItem);
},
__tryBuildItemByName: function(buildItemName){
var buildItem = this.__getBuildItemByName(buildItemName);
return this.__tryBuildItem(buildItem);
},
__tryBuildItem: function(buildItem){
if(this.__canBuyBuildItem(buildItem)){
this.trigger('build', buildItem.metadata.name);
return true;
}else{
return false;
}
},
update: function(){
_.each(this.$buildItems, function($buildItem){
$buildItem.removeClass('disabled enabled');
var buildItem = this.__getBuildItemByName($buildItem.attr('data-build-item'));
if(this.__canBuyBuildItem(buildItem)){
$buildItem.addClass('enabled');
}else{
$buildItem.addClass('disabled');
}
}.bind(this))
},
__canBuyBuildItem: function(buildItem){
return this.__player.getMoney() >= buildItem.metadata.buildPrice;
},
__getBuildItemByName: function(buildItemName){
var buildItem;
_.each(this.__buildItems, function(_buildItem){
if(_buildItem.metadata.name === buildItemName){
buildItem = _buildItem;
}
})
return buildItem;
},
});
/**
* React mini tutorial
*
* on virtual doms:
* - add "ref:myName" to reference later as "this.refs.myName.getDOMNode()"
* - add "onClick:fn" to run fn when clicked
*
* Props: what you send on the instance is set in the props so:
* var a = new ReactClass({a: 1})
*
* // will be found into the ReactClass as:
*
* // ...
* this.props.a === 1 // true
* // ...
*
* - can't change
*
* State: data that can change and is set with component.setState({b: 3})
*/
var BuildMenu = React.createClass({
getInitialState: function(){
return {
buildItems : [],
hotKeys : [],
};
},
onSelect: function(buildItemId){
this.__selectedBuildItemId = buildItemId;
_.each(this.__buildItems, function(buildItem){
if(buildItem.props.id === buildItemId) return
buildItem.deselect();
})
this.props.onBuild(buildItemId);
},
getSelectedBuildItemId: function(){
return this.__selectedBuildItemId;
},
componentWillMount: function(){
},
onBuilt: function(){
this.deselect();
},
deselect: function(){
_.each(this.__buildItems, function(buildItem){
buildItem.deselect();
})
},
render: function(){
console.log('>>> update build')
var buildItems = this.__buildItems = this.state.buildItems.map(function(buildItem, i){
var b = BuildItem({
id : buildItem.metadata.id,
name : buildItem.metadata.name,
buildPrice : buildItem.metadata.buildPrice,
hotKey : this.state.hotKeys[buildItem.metadata.id],
onSelect : this.onSelect,
player : this.props.player,
})
// b.setState({player: this.props.player})
return b;
}.bind(this))
var children = [React.DOM.h2({ref: 'title', className: 'small-caps', style: {
backgroundColor : '#50629E',
padding : '5px 0 9px 5px',
lineHeight : '20px',
margin : 0,
}}, 'build'), buildItems]
return (
React.DOM.div({ref: 'root',style: {width: '100%', margin: '0 auto'}},
children
)
)
}
})
var BuildItem = React.createClass({
getInitialState: function(){
return {
available : true,
selected : false,
hover : false,
}
},
componentWillMount: function(){
key.on(this.props.hotKey, null, this.__select);
},
deselect: function(){
this.setState({selected: false});
},
__select: function(){
if(!this.props.player.hasMoney(this.props.buildPrice)) return;
this.setState({selected: true});
this.props.onSelect(this.props.id);
},
__onClick: function(){
if(this.state.selected){
this.deselect()
}else{
this.__select();
}
},
__onMouseEnter: function(){
this.setState({hover: true});
},
__onMouseLeave: function(){
this.setState({hover: false});
},
render: function(){
return React.DOM.div({
onClick: this.__onClick,
onMouseEnter: this.__onMouseEnter,
onMouseLeave: this.__onMouseLeave,
style: {
cursor : 'pointer',
width : '100%',
margin : '0 auto',
padding : '10px',
color : this.state.available ? 'white' : 'grey',
backgroundColor : this.state.hover || this.state.selected ? '#1FB1A5' : 'transparent',
}}, this.props.name + ' [price: ' + this.props.buildPrice + '] (key: ' + this.props.hotKey + ')');
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment