Nearly done, jsut need to clean up the json file and add local storage support

client/naturalCrit/sidebar/sidebar.jsx

@@ -14,8 +14,9 @@ var Sidebar = React.createClass({
 			encounters : [],
 
 			onSelectEncounter : function(){},
-
 			onJSONChange : function(encounterIndex, json){},
+
+			onPlayerChange : function(){},
 		};
 	},
 
@@ -48,7 +49,6 @@ var Sidebar = React.createClass({
 		var self = this;
 
 		return _.map(this.props.encounters, function(encounter, index){
-			console.log(self.props.selectedEncounter, index);
 
 			var isSelected = self.props.selectedEncounter == index;
 			return <div className={cx('encounter' , {'selected' : isSelected})} key={index}>
@@ -85,13 +85,17 @@ var Sidebar = React.createClass({
 						<JSONFileEditor name="Monster Manual" />
 					</div>
 					<div className='encounterContainer'>
-						<h3> <i className='fa fa-flag' /> encounters </h3>
+						<h3> <i className='fa fa-flag' /> Encounters </h3>
 						{this.renderEncounters()}
-					</div>
-					<div className='encounterStats'>
 
+						<div className='controls'>
+
+						</div>
 					</div>
-					<div className='addPC'>
+					<div className='addPlayers'>
+						<h3> <i className='fa fa-group' /> Players </h3>
+
+						<textarea value={this.props.players} onChange={this.props.onPlayerChange} />
 
 					</div>
 

client/naturalCrit/sidebar/sidebar.less

@@ -9,19 +9,22 @@
 }
 .sidebar{
 	.animateAll();
-	display        : inline-block;
-	vertical-align : top;
-	box-sizing     : border-box;
-	height         : 100%;
-	width          : 300px;
-
+	float            : left;
+	box-sizing       : border-box;
+	height           : 100%;
+	width            : @sidebarWidth;
+	padding-bottom   : 20px;
+	background-color : white;
+	//border           : 1px solid @steel;
 	&.hide{
 		height : 50px;
 		width  : 50px;
 		.logo .name{
-			left : -200px;
+			left    : -200px;
+			opacity : 0;
 		}
 		.contents{
+			height  : 0px;
 			opacity : 0;
 		}
 	}
@@ -43,27 +46,45 @@
 			position : absolute;
 			top      : 13px;
 			left     : 50px;
+			opacity  : 1;
 			span.crit{
 				font-family : 'CodeBold';
 			}
 		}
 	}
-
 	.contents{
 		.animate(opacity);
-		width : 100%;
+		box-sizing : border-box;
+		width      : 100%;
 		&>*{
 			width : 100%;
 		}
-
+		h3{
+			padding        : 10px;
+			font-size      : 0.8em;
+			font-weight    : 800;
+			text-transform : uppercase;
+		}
 		.encounterContainer{
+			margin-bottom : 20px;
+			h3{
+				background-color : fade(@red, 25%);
+			}
 			.encounter{
 				&.selected{
 					background-color : @green;
 				}
 			}
 		}
-
-
+		.addPlayers{
+			h3{
+				background-color : fade(@purple, 25%);
+			}
+			textarea{
+				height : 80px;
+				width  : 100px;
+				margin : 10px;
+			}
+		}
 	}
 }