Lots of progress, think I've figured out the spell format to use

client/spellsort/spellRenderer/spellRenderer.jsx

@@ -2,13 +2,96 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var COM = React.createClass({
+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='COM'>
-			COM Ready!
+		return <div className='spellRenderer'>
+
+			<div className='phb'>
+				{this.renderSpells()}
+			</div>
+
 		</div>
 	}
 });
 
-module.exports = COM;
+module.exports = SpellRenderer;

client/spellsort/spellRenderer/spellRenderer.less

@@ -1,3 +1,40 @@
-.COM{
+@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;
+
+		}
+
+	}
 
 }

server/parsespell.js

@@ -0,0 +1,49 @@
+var _ = require('lodash');
+
+var spells = require('./5espells.js');
+
+String.prototype.replaceAll = function(s,r){return this.split(s).join(r)}
+
+
+var parsedSpells = _.map(spells, (spell)=>{
+
+	var comp = {}
+
+	var name = spell.name.replace(' (Ritual)', '');
+
+
+	return {
+		id : _.snakeCase(name),
+		name : name,
+		description : spell.description
+			.replaceAll('\r\n', '\n')
+			.replaceAll(' ', ''),
+
+		scales : spell.athigherlevel,
+
+		components : {},
+		classes : _.map(spell.classes || [], (cls)=>{return cls.toLowerCase();}),
+
+
+		level : Number(spell.level),
+
+		ritual : spell.ritual == "Yes",
+		concentration : spell.concentration == "Yes",
+
+		range : spell.range,
+		duration : spell.duration,
+
+
+		school : spell.school.toLowerCase(),
+
+		source : spell.source,
+		page : spell.page,
+	}
+
+
+
+
+});
+
+module.exports = parsedSpells;
+

server/spellsort.server.js

@@ -2,6 +2,10 @@ var _ = require('lodash');
 var vitreumRender = require('vitreum/render');
 
 
+
+console.log(JSON.stringify(require('./parsespell.js'), null, '  '));
+
+
 module.exports = function(app){
 	app.get('/spellsort*', (req, res)=>{
 		vitreumRender({
@@ -10,7 +14,8 @@ module.exports = function(app){
 			prerenderWith : './client/spellsort/spellsort.jsx',
 			initialProps: {
 				url: req.originalUrl,
-				spells : require('./spellsort.spells.js')
+				//spells : require('./spellsort.spells.js')
+				spells : require('./parsespell.js')
 			},
 			clearRequireCache : !process.env.PRODUCTION,
 		}, function (err, page) {

server/spellsort.spells.js

@@ -6,14 +6,17 @@ var spells = [
 		casting_time : "1 action",
 		components : {v : true, s : true},
 		description : `You hurl a bubble of acid. Choose one creature within range, or choose two creatures within range that are within 5 feet of each other.
-			A target must succeed on a Dexterity saving throw or take 1d6 acid damage.
-			This spell’s damage increases by 1d6 when you reach 5th level (2d6), 11th level (3d6), and 17th level (4d6).`,
+			A target must succeed on a Dexterity saving throw or take 1d6 acid damage.`,
+		scales : 'This spell’s damage increases by 1d6 when you reach 5th level (2d6), 11th level (3d6), and 17th level (4d6).',
 		duration : "Instantaneous",
+		concentration : false,
 		level : 0,
+		ritual : false,
 		range : "60 feet",
 		school : "Conjuration",
 		classes : ["sorcerer", "wizard"],
-		source : "PHB pg.211"
+		source : "Player's Handbook",
+		page : "pg.211"
 	},
 	{
 		name : "Aid",
@@ -21,10 +24,14 @@ var spells = [
 		components : {v : true, s : true, m : "(a tiny strip of white cloth)"},
 		description : `Your spell bolsters your allies with toughness and resolve. Choose up to three creatures within range. Each target’s hit point maximum and current hit points increase by 5 for the duration. At Higher Levels. When you cast this spell using a spell slot of 3rd level or higher, a target’s hit points increase by an additional 5 for each slot level above 2nd.`,
 		duration : "8 hours",
+		concentration : false,
 		level : 2,
+		ritual : false,
 		range : "30 feet",
 		school : "Abjuration",
-		source : "PHB pg.211"
+		classes : [],
+		source : "Player's Handbook",
+		page : "pg.211"
 	},
 	{
 		name : "Antimagic Field",
@@ -32,10 +39,14 @@ var spells = [
 		components : {v : true, s : true, m : "(a pinch of powdered iron or iron filings)"},
 		description : `A 10-foot-radius invisible sphere of antimagic surrounds you. This area is divorced from the magical energy that suffuses the multiverse. Within the sphere, spells can’t be cast, summoned creatures disappear, and even magic items become mundane. Until the spell ends, the sphere moves with you, centered on you. Spells and other magical effects, except those created by an artifact or a deity, are suppressed in the sphere and can’t protrude into it. A slot expended to cast a suppressed spell is consumed. While an effect is suppressed, it doesn’t function, but the time it spends suppressed counts against its duration. Targeted Effects. Spells and other magical effects, such as magic missile and charm person, that target a creature or an object in the sphere have no effect on that target. Areas of Magic. The area of another spell or magical effect, such as fireball, can’t extend into the sphere. If the sphere overlaps an area of magic, the part of the area that is covered by the sphere is suppressed. For example, the flames created by a wall of fire are suppressed within the sphere, creating a gap in the wall if the overlap is large enough. Spells. Any active spell or other magical effect on a creature or an object in the sphere is suppressed while the creature or object is in it. Magic Items. The properties and powers of magic items are suppressed in the sphere. For example, a +1 longsword in the sphere functions as a nonmagical longsword. A magic weapon’s properties and powers are suppressed if it is used against a target in the sphere or wielded by an attacker in the sphere. If a magic weapon or a piece of magic ammunition fully leaves the sphere (for example, if you fire a magic arrow or throw a magic spear at a target outside the sphere), the magic of the item ceases to be suppressed as soon as it exits. Magical Travel. Teleportation and planar travel fail to work in the sphere, whether the sphere is the destination or the departure point for such magical travel. A portal to another location, world, or plane of existence, as well as an opening to an extradimensional space such as that created by the rope trick spell, temporarily closes while in the sphere. Creatures and Objects. A creature or object summoned or created by magic temporarily winks out of existence in the sphere. Such a creature instantly reappears once the space the creature occupied is no longer within the sphere. Dispel Magic. Spells and magical effects such as dispel magic have no effect on the sphere. Likewise, the spheres created by different antimagic field spells don’t nullify each other.`,
 		duration : "Concentration, up to 1 hour",
+		concentration : true,
 		level : 8,
+		ritual : false,
 		range : "Self (10-foot-radius sphere)",
 		school : "Abjuration",
-		source : "PHB pg.213"
+		classes : [],
+		source : "Player's Handbook",
+		page : "pg.213"
 	}
 
 ];