Sidebar is nearing completion

client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.jsx

@@ -0,0 +1,119 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var AttackSlot = React.createClass({
+	getDefaultProps: function() {
+		return {
+			name : '',
+			uses : null
+		};
+	},
+
+	getInitialState: function() {
+		return {
+			lastRoll: {},
+			usedCount : 0
+		};
+	},
+
+	rollDice : function(key, notation){
+		var additive = 0;
+		var dice = _.reduce([/\+(.*)/, /\-(.*)/], function(r, regexp){
+			var res = r.match(regexp);
+			if(res){
+				additive = res[0]*1;
+				r = r.replace(res[0], '')
+			}
+			return r;
+		}, notation)
+
+		var numDice = dice.split('d')[0];
+		var die = dice.split('d')[1];
+
+		var diceRoll = _.times(numDice, function(){
+			return _.random(1, die);
+		});
+		var res = _.sum(diceRoll) + additive;
+		if(numDice == 1 && die == 20){
+			if(diceRoll[0] == 1) res = 'Fail!';
+			if(diceRoll[0] == 20) res = 'Crit!';
+		}
+		this.state.lastRoll[key] = res
+		this.state.lastRoll[key + 'key'] = _.uniqueId(key);
+		this.setState({
+			lastRoll : this.state.lastRoll
+		})
+	},
+
+	renderUses : function(){
+		var self = this;
+		if(!this.props.uses) return null;
+
+		return _.times(this.props.uses, function(index){
+			var atCount = index < self.state.usedCount;
+			return <i
+				key={index}
+				className={cx('fa', {'fa-circle-o' : !atCount, 'fa-circle' : atCount})}
+				onClick={self.updateCount.bind(self, atCount)}
+			/>
+		})
+	},
+	updateCount : function(used){
+		this.setState({
+			usedCount : this.state.usedCount + (used ? -1 : 1)
+		});
+	},
+
+	renderNotes : function(){
+		var notes = _.omit(this.props, ['name', 'atk', 'dmg', 'uses', 'heal']);
+		return _.map(notes, function(text, key){
+			return <div key={key}>{key + ': ' + text}</div>
+		});
+	},
+
+	renderRolls : function(){
+		var self = this;
+
+		return _.map(['atk', 'dmg', 'heal'], function(type){
+			if(!self.props[type]) return null;
+			return <div className={cx('roll', type)} key={type}>
+
+				<button onClick={self.rollDice.bind(self, type, self.props[type])}>
+					<i className={cx('fa', {
+						'fa-hand-grab-o' : type=='dmg',
+						'fa-bullseye' : type=='atk',
+						'fa-medkit' : type=='heal'
+					})} />
+					{self.props[type]}
+				</button>
+				<span key={self.state.lastRoll[type+'key']}>{self.state.lastRoll[type] || ''}</span>
+			</div>
+		})
+
+	},
+
+
+	render : function(){
+		var self = this;
+		return(
+			<div className='attackSlot'>
+				<div className='info'>
+					<div className='name'>{this.props.name}</div>
+					<div className='uses'>
+						{this.renderUses()}
+					</div>
+					<div className='notes'>
+						{this.renderNotes()}
+					</div>
+
+				</div>
+				<div className='rolls'>
+					{this.renderRolls()}
+				</div>
+			</div>
+		);
+	}
+});
+
+module.exports = AttackSlot;

client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.less

@@ -0,0 +1,71 @@
+
+.attackSlot{
+	//border : 1px solid black;
+	border-bottom: 1px solid #eee;
+	margin-bottom : 5px;
+	font-size     : 0.8em;
+	.info, .rolls{
+		display        : inline-block;
+		vertical-align : top;
+	}
+	.info{
+		width : 40%;
+		.name{
+			font-weight : 800;
+			margin-bottom: 3px;
+		}
+		.notes{
+			font-size : 0.8em;
+		}
+		.uses{
+			cursor : pointer;
+			//font-size: 0.8em;
+			//margin-top: 3px;
+		}
+	}
+	.rolls{
+		.roll{
+			margin-bottom : 2px;
+			&>span{
+				font-weight: 800;
+				.fadeInLeft();
+			}
+			button{
+				width        : 70px;
+				margin-right : 5px;
+				cursor       : pointer;
+				font-size    : 0.7em;
+				font-weight  : 800;
+				text-align   : left;
+				border       : none;
+				outline      : 0;
+				i{
+					width        : 15px;
+					margin-right : 5px;
+					border-right : 1px solid white;
+				}
+				&:hover{
+					//text-align: right;
+				}
+			}
+			&.atk{
+				button{
+					background-color : fade(@blue, 40%);
+					i { border-color: @blue}
+				}
+			}
+			&.dmg{
+				button{
+					background-color : fade(@red, 40%);
+					i { border-color: @red}
+				}
+			}
+			&.heal{
+				button{
+					background-color : fade(@green, 40%);
+					i { border-color: @green}
+				}
+			}
+		}
+	}
+}