WeaponList.jsx

var React = require('react');


var WeaponList = React.createClass({
    render: function() {
        return (<ul className="list-unstyled">
                <li>
                    <Weapon name="flail" attrs={["1d8 bludgeoning;"]} />
                </li>
                <li>
                    <Weapon name="morning star" attrs={["1d8 piercing;"]} />
                </li>
            </ul>
        );
    }
});


var Weapon = React.createClass({
    render: function() {
        return (<div>
                <h2 className="text-center">{this.props.name}</h2>
                <AttributeList attributes={this.props.attrs} />
            </div>
        );
    }
});


var AttributeList = React.createClass({
    processAttributes: function(attrs) {
        return attrs.map(function(attr) {

            return (<li>
                <Attribute>{attr}</Attribute>
            </li>);
        }, this);
    },

    render: function() {
        var attrs = this.processAttributes(this.props.attributes);
        return (
            <ul>
                {attrs}
            </ul>
        );
    }
});


var Attribute = React.createClass({
    render: function () {
        return (
            <span>{this.props.children.toString()}</span>
        );
    }

});

module.exports = WeaponList;