test

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,5 +1,5 @@
 
-@import (less) './client/homebrew/phbStyle/phb.style.less';
+@import (less) 'naturalcrit/phbStyle/phb.style.less';
 .pane{
 	position : relative;
 }

client/main/main.jsx

@@ -22,13 +22,13 @@ var Main = React.createClass({
 					beta : false
 				},
 				{
-					id : 'homebrew2',
-					path : '/homebrew',
-					name : 'The Homebrewery',
+					id : 'spellsort',
+					path : '/spellsort',
+					name : 'Spellsort',
 					icon : <HomebrewIcon />,
-					desc : 'Make authentic-looking 5e homebrews using Markdown',
+					desc : 'Sort and search through spells',
 
-					show : false,
+					show : true,
 					beta : true
 				},
 				{

client/spellsort/navbar/navbar.jsx

@@ -0,0 +1,21 @@
+var React = require('react');
+var _ = require('lodash');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+var Navbar = React.createClass({
+	render : function(){
+		return <Nav.base>
+			<Nav.section>
+				<Nav.logo />
+				<Nav.item href='/spellsort' className='spellsortLogo'>
+					<div>Spellsort</div>
+				</Nav.item>
+				<Nav.item>v0.0.0</Nav.item>
+			</Nav.section>
+			{this.props.children}
+		</Nav.base>
+	}
+});
+
+module.exports = Navbar;

client/spellsort/navbar/navbar.less

@@ -0,0 +1,16 @@
+
+.spellsort nav{
+	.spellsortLogo{
+		.animate(color);
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
+		div{
+			margin-top    : 2px;
+			margin-bottom : -2px;
+		}
+		&:hover{
+			color : @teal;
+		}
+	}
+}

client/spellsort/sorter/sorter.jsx

@@ -0,0 +1,32 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Sorter = React.createClass({
+	getDefaultProps: function() {
+		return {
+			spells : []
+		};
+	},
+
+
+	renderSpell : function(spell){
+		return <div className='spell' key={spell.id}>
+			{spell.name}
+		</div>
+	},
+
+	renderSpells : function(){
+		return _.map(this.props.spells, (spell)=>{
+			return this.renderSpell(spell)
+		});
+	},
+
+	render : function(){
+		return <div className='sorter'>
+			{this.renderSpells()}
+		</div>
+	}
+});
+
+module.exports = Sorter;

client/spellsort/sorter/sorter.less

@@ -0,0 +1,3 @@
+.COM{
+
+}

client/spellsort/spellRenderer/spellRenderer.jsx

@@ -0,0 +1,97 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Markdown = require('marked');
+
+var SpellRenderer = React.createClass({
+	getDefaultProps: function() {
+		return {
+			spells : []
+		};
+	},
+
+	//TODO: Add in ritual tag
+	getSubtitle : function(spell){
+		if(spell.level == 0) return <p><em>{spell.school} cantrip</em></p>;
+		if(spell.level == 1) return <p><em>{spell.level}st-level {spell.school}</em></p>;
+		if(spell.level == 2) return <p><em>{spell.level}nd-level {spell.school}</em></p>;
+		if(spell.level == 3) return <p><em>{spell.level}rd-level {spell.school}</em></p>;
+		return <p><em>{spell.level}th-level {spell.school}</em></p>;
+	},
+
+	getComponents : function(spell){
+		var result = [];
+		if(spell.components.v) result.push('V');
+		if(spell.components.s) result.push('S');
+		if(spell.components.m) result.push('M ' + spell.components.m);
+		return result.join(', ');
+	},
+
+	getHigherLevels : function(spell){
+		if(!spell.scales) return null;
+		return <p>
+			<strong><em>At Higher Levels. </em></strong>
+			<span dangerouslySetInnerHTML={{__html: Markdown(spell.scales)}} />
+		</p>;
+	},
+
+	getClasses : function(spell){
+		if(!spell.classes || !spell.classes.length) return null;
+
+		var classes = _.map(spell.classes, (cls)=>{
+			return _.capitalize(cls);
+		}).join(', ');
+
+		return <li>
+			<strong>Classes:</strong> {classes}
+		</li>
+	},
+
+
+	renderSpell : function(spell){
+		console.log('rendering', spell);
+		return <div className='spell' key={spell.id}>
+
+			<h4>{spell.name}</h4>
+			{this.getSubtitle(spell)}
+			<hr />
+			<ul>
+				<li>
+					<strong>Casting Time:</strong> {spell.casting_time}
+				</li>
+				<li>
+					<strong>Range:</strong> {spell.range}
+				</li>
+				<li>
+					<strong>Components:</strong> {this.getComponents(spell)}
+				</li>
+				<li>
+					<strong>Duration:</strong> {spell.duration}
+				</li>
+				{this.getClasses(spell)}
+			</ul>
+
+			<span dangerouslySetInnerHTML={{__html: Markdown(spell.description)}} />
+			{this.getHigherLevels(spell)}
+		</div>
+	},
+
+	renderSpells : function(){
+		return _.map(this.props.spells, (spell)=>{
+			return this.renderSpell(spell);
+		})
+	},
+
+	render : function(){
+		return <div className='spellRenderer'>
+
+			<div className='phb'>
+				{this.renderSpells()}
+			</div>
+
+		</div>
+	}
+});
+
+module.exports = SpellRenderer;

client/spellsort/spellRenderer/spellRenderer.less

@@ -0,0 +1,40 @@
+@import (less) 'naturalcrit/phbStyle/phb.style.less';
+.pane{
+	position : relative;
+}
+.spellRenderer{
+	overflow-y : scroll;
+
+	&>.phb{
+		margin-right  : auto;
+		margin-bottom : 30px;
+		margin-left   : auto;
+		box-shadow    : 1px 4px 14px #000;
+
+		height : auto;
+		width : 100%;
+
+		display: flex;
+			flex-direction: column;
+			flex-wrap: wrap;
+
+		column-count         : initial;
+		column-fill          : initial;
+		column-gap           : initial;
+		column-width         : initial;
+		-webkit-column-count : initial;
+		-moz-column-count    : initial;
+		-webkit-column-width : initial;
+		-moz-column-width    : initial;
+		-webkit-column-gap   : initial;
+		-moz-column-gap      : initial;
+
+		.spell{
+			display: inline;
+			width : 8cm;
+
+		}
+
+	}
+
+}

client/spellsort/spellsort.jsx

@@ -0,0 +1,45 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+var Navbar = require('./navbar/navbar.jsx');
+
+var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+var SpellRenderer = require('./spellRenderer/spellRenderer.jsx');
+var Sorter = require('./sorter/sorter.jsx');
+
+var SpellSort = React.createClass({
+
+	getDefaultProps: function() {
+		return {
+			spells : []
+		};
+	},
+
+	handleSplitMove : function(){
+
+	},
+
+	render : function(){
+		console.log(this.props.spells);
+
+		return <div className='spellsort page'>
+			<Navbar>
+				<Nav.section>
+					yo
+				</Nav.section>
+			</Navbar>
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+
+					<Sorter spells={this.props.spells} />
+					<SpellRenderer spells={this.props.spells} />
+
+				</SplitPane>
+			</div>
+		</div>
+	}
+});
+
+module.exports = SpellSort;

client/spellsort/spellsort.less

@@ -0,0 +1,4 @@
+@import 'naturalcrit/styles/core.less';
+.spellsort{
+
+}

gulpfile.js

@@ -8,6 +8,7 @@ var gulp = vitreumTasks(gulp, {
 	entryPoints: [
 		'./client/main',
 		'./client/homebrew',
+		'./client/spellsort',
 		'./client/admin'
 	],
 
@@ -43,7 +44,7 @@ var gulp = vitreumTasks(gulp, {
 var rename = require('gulp-rename');
 var less = require('gulp-less');
 gulp.task('phb', function(){
-	gulp.src('./client/homebrew/phbStyle/phb.style.less')
+	gulp.src('./shared/naturalcrit/phbStyle/phb.style.less')
 		.pipe(less())
 		.pipe(rename('phb.standalone.css'))
 		.pipe(gulp.dest('./'));

server.js

@@ -46,6 +46,9 @@ app = require('./server/homebrew.api.js')(app);
 app = require('./server/homebrew.server.js')(app);
 
 
+//Populate Spellsort routes
+app = require('./server/spellsort.server.js')(app);
+
 
 app.get('*', function (req, res) {
 	vitreumRender({