setting up a default monster manual and encoutners

client/naturalCrit/sidebar/encounters/encounters.jsx

@@ -2,13 +2,70 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var JSONFileEditor = require('naturalCrit/jsonFileEditor/jsonFileEditor.jsx');
+
 var Encounters = React.createClass({
+	getDefaultProps: function() {
+		return {
+			encounters : [],
+			selectedEncounter : 0,
+
+			onJSONChange : function(encounterIndex, json){},
+			onSelectEncounter : function(encounterIndex){},
+			onRemoveEncounter : function(encounterIndex){}
+		};
+	},
+
+	handleJSONChange : function(encounterIndex, json){
+		this.props.onJSONChange(encounterIndex, json);
+	},
+	handleSelectEncounter : function(encounterIndex){
+		this.props.onSelectEncounter(encounterIndex);
+	},
+	handleRemoveEncounter : function(encounterIndex){
+		this.props.onRemoveEncounter(encounterIndex);
+	},
+
+
+	renderEncounters : function(){
+		var self = this;
+		return _.map(this.props.encounters, function(encounter, index){
+
+			var isSelected = self.props.selectedEncounter == index;
+			return <div className={cx('encounter' , {'selected' : isSelected})} key={index}>
+
+				<i onClick={self.handleSelectEncounter.bind(self, index)} className={cx('select', 'fa', {
+					'fa-square-o' : !isSelected,
+					'fa-check-square-o' : isSelected,
+				})} />
+
+
+				<JSONFileEditor
+					name={encounter.name}
+					json={encounter}
+					onJSONChange={self.handleJSONChange.bind(self, index)}
+				/>
+
+				<i onClick={self.handleRemoveEncounter.bind(self, index)} className='remove fa fa-times' />
+			</div>
+		})
+	},
 
 	render : function(){
 		var self = this;
 		return(
 			<div className='encounters'>
-				Encounters Ready!
+				<h3>
+					<i className='fa fa-flag' /> Encounters
+					<button className='addEncounter'>
+						<i className='fa fa-plus' />
+					</button>
+				</h3>
+				{this.renderEncounters()}
+
+				<div className='controls'>
+
+				</div>
 			</div>
 		);
 	}

client/naturalCrit/sidebar/encounters/encounters.less

@@ -1,3 +1,53 @@
-.encounters{
 
+.encounters{
+	margin-bottom : 20px;
+	h3{
+		background-color : @red;
+		color            : white;
+		button{
+			.animate(color);
+			float            : right;
+			cursor           : pointer;
+			background-color : transparent;
+			border           : none;
+			outline          : none;
+			&:hover{
+				color : white;
+			}
+		}
+	}
+	.encounter{
+		position     : relative;
+		padding-left : 15px;
+		border-left : 0px solid @teal;
+		.animateAll();
+		&:hover{
+			i.remove{
+				opacity : 1;
+			}
+		}
+		i.remove{
+			.animate(opacity);
+			position  : absolute;
+			top       : 3px;
+			right     : 3px;
+			cursor    : pointer;
+			opacity   : 0;
+			font-size : 0.6em;
+			color     : #333;
+			&:hover{
+				color : @red;
+			}
+		}
+		i.select{
+			cursor : pointer;
+		}
+		.jsonFileEditor{
+			display : inline-block;
+		}
+		&.selected{
+			//background-color : fade(@green, 30%);
+			border-left : 8px solid @teal;
+		}
+	}
 }