Added in the dm dice

client/naturalCrit/sidebar/dmDice/dmDice.jsx

@@ -2,13 +2,55 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var RollDice = require('naturalCrit/rollDice');
+
 var DmDice = React.createClass({
 
+	getInitialState: function() {
+		return {
+			lastRoll:{ },
+			diceNotation : {
+				a : "1d20",
+				b : "6d6 + 3",
+				c : "1d20 - 1"
+			}
+
+		};
+	},
+
+	roll : function(id){
+		this.state.lastRoll[id] = RollDice(this.state.diceNotation[id]);
+		this.setState({
+			lastRoll : this.state.lastRoll
+		});
+	},
+	handleChange : function(id, e){
+		this.state.diceNotation[id] = e.target.value;
+		this.setState({
+			diceNotation : this.state.diceNotation
+		});
+
+		e.stopPropagation();
+		e.preventDefault();
+	},
+
+	renderRolls : function(){
+		var self = this;
+		return _.map(['a', 'b', 'c'], function(id){
+			return <div className='roll' key={id} onClick={self.roll.bind(self, id)}>
+				<input type="text" value={self.state.diceNotation[id]} onChange={self.handleChange.bind(self, id)} />
+				<i className='fa fa-random' />
+				<span key={self.state.lastRoll[id]}>{self.state.lastRoll[id]}</span>
+			</div>
+		})
+	},
+
 	render : function(){
 		var self = this;
 		return(
 			<div className='dmDice'>
-				DmDice Ready!
+				<h3> <i className='fa fa-random' /> DM Dice </h3>
+				{this.renderRolls()}
 			</div>
 		);
 	}

client/naturalCrit/sidebar/dmDice/dmDice.less

@@ -1,3 +1,28 @@
 .dmDice{
 
+	.roll{
+		cursor: pointer;
+		.noselect();
+		input[type="text"]{
+			margin-left: 10px;
+			margin-bottom: 6px;
+			margin-top: 6px;
+			width : 60px;
+			font-family: monospace;
+			padding : 5px;
+		}
+		i.fa-random{
+			font-size: 0.8em;
+			margin: 0 10px;
+		}
+		span{
+			font-weight: 800;
+			.fadeInLeft();
+		}
+
+		&:hover{
+			background-color: fade(@red, 20%);
+		}
+	}
+
 }