Added in the dm dice

client/naturalCrit/encounter/monsterCard/monsterCard.less

@@ -1,13 +1,5 @@
 
 @marginSize : 10px;
-.noselect(){
-	-webkit-touch-callout : none;
-	-webkit-user-select   : none;
-	-khtml-user-select    : none;
-	-moz-user-select      : none;
-	-ms-user-select       : none;
-	user-select           : none;
-}
 .playerCard{
 	display          : inline-block;
 	box-sizing       : border-box;

client/naturalCrit/naturalCrit.less

@@ -24,4 +24,13 @@ body{
 		display: inline-block;
 		vertical-align: top;
 	}
+}
+
+.noselect(){
+	-webkit-touch-callout : none;
+	-webkit-user-select   : none;
+	-khtml-user-select    : none;
+	-moz-user-select      : none;
+	-ms-user-select       : none;
+	user-select           : none;
 }

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%);
+		}
+	}
+
 }

client/naturalCrit/sidebar/sidebar.jsx

@@ -4,6 +4,13 @@ var cx = require('classnames');
 
 var JSONFileEditor = require('naturalCrit/jsonFileEditor/jsonFileEditor.jsx');
 
+
+var DMDice = require('./dmDice/dmDice.jsx');
+
+var Encounters = require('./encounters/encounters.jsx');
+
+
+
 var Sidebar = React.createClass({
 
 	getDefaultProps: function() {
@@ -101,17 +108,16 @@ var Sidebar = React.createClass({
 
 						</div>
 					</div>
+
+					<Encounters />
+
 					<div className='addPlayers'>
 						<h3> <i className='fa fa-group' /> Players </h3>
 						<textarea value={this.props.players} onChange={this.props.onPlayerChange} />
 					</div>
 
-					<div className='dmDice'>
-						<h3> <i className='fa fa-random' /> DM Dice </h3>
 
-						ah yeah
-
-					</div>
+					<DMDice />