Proof of concept working

client/splatsheet/codeEditor/codeEditor.jsx

@@ -1,14 +0,0 @@
-var React = require('react');
-var _ = require('lodash');
-var cx = require('classnames');
-
-var SheetEditor = React.createClass({
-
-	render : function(){
-		return <div className='sheetEditor'>
-			SheetEditor Ready!
-		</div>
-	}
-});
-
-module.exports = SheetEditor;

client/splatsheet/sheetEditor/sheetEditor.jsx

@@ -16,10 +16,8 @@ var SheetEditor = React.createClass({
 
 	render : function(){
 		return <div className='sheetEditor'>
-			SheetEditor Ready!
+			<h2>Sheet Template</h2>
-
 			<textarea value={this.props.code} onChange={this.handleCodeChange} />
-
 		</div>
 	}
 });

client/splatsheet/sheetEditor/sheetEditor.less

@@ -1,8 +1,8 @@
 .sheetEditor{
 
 	textarea{
-		margin-top: 50px;
+		height : 300px;
-		height : 500px
+		width : 80%;
 	}
 
 }

client/splatsheet/sheetRenderer/parts/box/box.jsx

@@ -0,0 +1,50 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Box = React.createClass({
+	getDefaultProps: function() {
+		return {
+			data : {},
+			onChange : function(){},
+			defaultValue : {},
+
+			id : 'box',
+		};
+	},
+
+	//Maybe remove
+	id : function(){
+		return _.snakeCase(this.props.label) || this.props.id;
+	},
+
+
+	data : function(){
+		return this.props.data[this.id()] || this.props.defaultValue;
+	},
+
+
+	handleChange : function(newData){
+		this.props.onChange({
+			[this.id()] : _.extend(this.data(), newData)
+		});
+	},
+
+	renderChildren : function(){
+		return React.Children.map(this.props.children, (child)=>{
+			if(!React.isValidElement(child)) return null;
+			return React.cloneElement(child, {
+				onChange : this.handleChange,
+				data : this.data()
+			})
+		})
+	},
+
+	render : function(){
+		return <div className={cx('box', this.props.className)}>
+			{this.renderChildren()}
+		</div>
+	}
+});
+
+module.exports = Box;

client/splatsheet/sheetRenderer/parts/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+	TextInput : require('./textInput/textInput.jsx'),
+	PlayerInfo : require('./playerInfo/playerInfo.jsx'),
+}

client/splatsheet/sheetRenderer/parts/playerInfo/playerInfo.jsx

@@ -0,0 +1,67 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var TextInput = require('../textInput/textInput.jsx');
+
+var Box = require('../box/box.jsx');
+
+var PlayerInfo = React.createClass({
+	getDefaultProps: function() {
+		return {
+			data : {},
+			onChange : function(){},
+
+			id : 'playerInfo',
+		};
+	},
+/*
+	id : function(){
+		return _.snakeCase(this.props.label) || this.props.id;
+	},
+	data : function(){
+		return this.props.data[this.id()] || this.props.defaultValue;
+	},
+
+
+	handleChange : function(newData){
+		this.props.onChange({
+			[this.id()] : _.extend(this.data(), newData)
+		});
+	},
+
+	renderChildren : function(){
+		return React.Children.map(this.props.children, (child)=>{
+			return React.cloneElement(child, {
+				onChange : this.handleChange,
+				data : this.data()
+			})
+		})
+	},
+*/
+	render : function(){
+		return <Box className='playerInfo' {...this.props}>
+			<TextInput id='name' label="Name" />
+			<TextInput id='class' label="Class" />
+			<TextInput id='race' label="Race" />
+
+			{this.props.children}
+		</Box>
+	}
+
+	/*{this.props.children}*/
+
+/*
+	render : function(){
+		return <div className='playerInfo'>
+			<TextInput id='name' label="Name" onChange={this.handleChange} data={this.data()} />
+			<TextInput id='class' label="Class" onChange={this.handleChange} data={this.data()} />
+			<TextInput id='race' label="Race" onChange={this.handleChange} data={this.data()} />
+
+			{this.renderChildren()}
+		</div>
+	}
+	*/
+});
+
+module.exports = PlayerInfo;

client/splatsheet/sheetRenderer/parts/playerInfo/playerInfo.less

@@ -0,0 +1,3 @@
+.playerInfo{
+	margin-bottom: 20px;
+}

client/splatsheet/sheetRenderer/parts/textInput/textInput.jsx

@@ -0,0 +1,45 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var TextInput = React.createClass({
+	getDefaultProps: function() {
+		return {
+			data : {},
+			defaultValue : '',
+			onChange : function(){},
+
+
+			id : 'textInput',
+			label : '',
+
+		};
+	},
+
+	id : function(){
+		return _.snakeCase(this.props.label) || this.props.id;
+	},
+	data : function(){
+		return this.props.data[this.id()] || this.props.defaultValue;
+	},
+
+	handleChange : function(e){
+		this.props.onChange({
+			[this.id()] : e.target.value
+		});
+	},
+
+	renderLabel : function(){
+		if(!this.props.label) return;
+		return <label htmlFor={this.id()}>{this.props.label}</label>
+	},
+
+	render : function(){
+		return <div className='textInput'>
+			{this.renderLabel()}
+			<input id={this.id()} type='text' onChange={this.handleChange} value={this.data()} />
+		</div>
+	}
+});
+
+module.exports = TextInput;

client/splatsheet/sheetRenderer/parts/textInput/textInput.less

@@ -0,0 +1,6 @@
+.textInput{
+	label{
+		display: inline-block;
+		width : 50px;
+	}
+}

client/splatsheet/sheetRenderer/sheetRenderer.jsx

@@ -2,7 +2,10 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var babel = require('babel-core')
+var jsx2json = require('jsx-parser');
+
+var Parts = require('./parts');
+
 
 var SheetRenderer = React.createClass({
 	getDefaultProps: function() {
@@ -13,29 +16,57 @@ var SheetRenderer = React.createClass({
 		};
 	},
 
-	componentWillReceiveProps: function(nextProps) {
+/*
-
+	augmentProps : function(props, key){
+		return _.extend({}, props, {
+			key : key,
+			data : this.props.characterData,
+			onChange :
+		})
 	},
+*/
+	renderElement : function(node, key){
+		return React.createElement(
+			(Parts[node.tag] ? Parts[node.tag] : node.tag),
 
+			{key : key, ...node.props},
 
+			//this.augmentProps(node.props, key),
+			...this.renderChildren(node.children))
+	},
+	renderChildren : function(nodes){
+		return _.map(nodes, (node, index)=>{
+			if(_.isString(node)) return node;
+			return this.renderElement(node, index);
+		})
+	},
 	renderSheet : function(){
-//		var render = jsx.transform(this.props.code);
+
+		try{
+			var nodes = jsx2json(this.props.code);
+
+			nodes = _.map(nodes, (node)=>{
+				node.props.data = this.props.characterData;
+				node.props.onChange = (newData)=>{
+					this.props.onChange(_.extend(this.props.characterData, newData));
+				}
+				return node
+			})
 
 
-
+			return this.renderChildren(nodes);
-
+		}catch(e){
-
+			return <div>Error bruh {e.toString()}</div>
-//		return eval(render);
+		}
-
 	},
 
+
+
+
 	render : function(){
+		return <div className='sheetRenderer'>
 
-		console.log(babel);
+			<h2>Character Sheet</h2>
-
-
-		return <div className='SheetRenderer'>
-
 
 			<div className='sheetContainer' ref='sheetContainer'>
 				{this.renderSheet()}
@@ -46,4 +77,15 @@ var SheetRenderer = React.createClass({
 	}
 });
 
+
 module.exports = SheetRenderer;
+
+
+/*
+
+<Temp text="cool">yo test  <a href="google.com">link</a> </Temp>
+
+
+
+
+*/

client/splatsheet/sheetRenderer/sheetRenderer.less

@@ -1,3 +1,11 @@
-.COM{
+.sheetRenderer{
+
+	padding-right : 10px;
+
+
+	.sheetContainer{
+		background-color: white;
+		padding : 20px;
+	}
 
 }

client/splatsheet/splatsheet.jsx

@@ -6,34 +6,64 @@ var StatusBar = require('./statusBar/statusBar.jsx');
 var SheetEditor = require('./sheetEditor/sheetEditor.jsx');
 var SheetRenderer = require('./sheetRenderer/sheetRenderer.jsx');
 
+
+const SPLATSHEET_TEMPLATE = 'splatsheet_template';
+const SPLATSHEET_CHARACTER = 'splatsheet_character';
+
+
 var SplatSheet = React.createClass({
 
 	getInitialState: function() {
 		return {
-			sheetCode: '<div>yo test</div>',
+			sheetCode: '',
-			characterData : {}
+			characterData : {
+				playerInfo : {
+					name : 'scott',
+					race : 'human',
+					class : 'coder'
+				}
+			}
 		};
 	},
 
+	componentDidMount: function() {
+		this.setState({
+			sheetCode : localStorage.getItem(SPLATSHEET_TEMPLATE),
+			characterData : JSON.parse(localStorage.getItem(SPLATSHEET_CHARACTER)) || this.state.characterData
+		})
+	},
 
 	handleCodeChange : function(text){
 		this.setState({
 			sheetCode : text,
 		});
+		localStorage.setItem(SPLATSHEET_TEMPLATE, text);
 	},
 
 	handeCharacterChange : function(data){
+		this.setState({
+			characterData : data,
+		});
+		localStorage.setItem(SPLATSHEET_CHARACTER, JSON.stringify(data));
+	},
 
+	clearCharacterData : function(){
+		this.handeCharacterChange({});
 	},
 
 
 	render : function(){
-		return <div className='splatSheet'>
+		return <div className='splatsheet'>
 			<StatusBar />
 
 			<div className='paneSplit'>
 				<div className='leftPane'>
 					<SheetEditor code={this.state.sheetCode} onChange={this.handleCodeChange} />
+					<h2>
+						Character Data
+						<i className='fa fa-times' style={{color : 'red'}} onClick={this.clearCharacterData} />
+					</h2>
+					<pre><code>{JSON.stringify(this.state.characterData, null, '  ')}</code></pre>
 				</div>
 				<div className='rightPane'>
 					<SheetRenderer

client/splatsheet/splatsheet.less

@@ -25,12 +25,34 @@ html,body, #reactContainer{
 			min-height     : 100%;
 		}
 		.leftPane{
-			width : 40%;
+			width : 50%;
 		}
 		.rightPane{
 			overflow-y : scroll;
 			height     : 100%;
-			width      : 60%;
+			width      : 50%;
 		}
 	}
 }
+
+
+h2{
+	color : white;
+	margin-top: 20px;
+	text-transform: uppercase;
+	font-weight: 800;
+}
+
+pre{
+	background-color: black;
+	padding : 10px;
+	display: inline-block;
+	min-width: 200px;
+	code{
+		font-size: 0.8em;
+		font-family: monospace;
+		color : @teal;
+
+	}
+}
+

gulpfile.js

@@ -55,3 +55,6 @@ gulp.task('phb', function(){
 		.pipe(gulp.dest('./'));
 })
 
+
+
+//Maybe remove later?

shared/jsx-parser.js

@@ -1,20 +1,10 @@
-var WHITESPACE = /(\s|\t|\n)/g;
+var WHITESPACE = /(\s|\t|\n|\r)/g;
 var NUMBERS = /[0-9]/;
 var LETTERS = /[a-zA-Z_]/;
 
-
-var tokenMap = {
-	//'<' : 'brace',
-	//'>' : 'brace',
-	//'/' : 'close',
-	'=' : 'equals',
-}
-
-
 var tokenizer = function(input){
 	var tokens = [];
 	var current = 0;
-
 	var inTag = false;
 
 	while(current < input.length){
@@ -35,7 +25,6 @@ var tokenizer = function(input){
 				tokens.push({
 					type : 'closeTag'
 				})
-
 			}
 			else if(char == '/' && input[current+1] == '>'){
 				inTag = false;
@@ -57,15 +46,14 @@ var tokenizer = function(input){
 					type : 'number',
 					value : getToken(NUMBERS)*1
 				});
-				continue;
+				current--;
 			}
-
 			else if(LETTERS.test(char)){
 				tokens.push({
 					type : 'word',
 					value : getToken(LETTERS)
 				});
-				continue;
+				current--;
 			}
 			else if(char == "'"){
 				char = input[++current]
@@ -73,7 +61,6 @@ var tokenizer = function(input){
 					type : 'text',
 					value : getToken(/[^\']/)
 				});
-
 			}
 			else if(char == '"'){
 				char = input[++current]
@@ -83,10 +70,8 @@ var tokenizer = function(input){
 				});
 			}
 		}
-
+		//Not tokenizing a tag definition
-		//Not in a tag def
 		else{
-
 			//End tag
 			if(char == '<' && input[current+1] == '/'){
 				char = input[++current]
@@ -95,7 +80,6 @@ var tokenizer = function(input){
 					type : 'endTag',
 					value : getToken(LETTERS)
 				})
-				//current++;
 			}
 			else if(char == '<'){
 				inTag = true;
@@ -104,7 +88,6 @@ var tokenizer = function(input){
 					type : 'openTag',
 					value : getToken(LETTERS)
 				})
-				console.log(char);
 				current--;
 			}
 			else{
@@ -123,62 +106,49 @@ var tokenizer = function(input){
 				}
 				current--;
 			}
-
 		}
-
 		current++;
-		continue;
 	}
-
 	return tokens;
-
 }
 
-
-
-
-
-
 var parser = function(tokens){
 	var nodes = [];
 	var current = 0;
 	var token = tokens[current];
 
-	var getProps = function(){
+	var parseProps = function(){
 		var props = {};
 		var key = null;
-		var temp = null;
+		var last = null;
 
-		while(token.type != 'endTag' && token.type != 'closeTag' && current < tokens.length){
+		while(current < tokens.length && token.type != 'endTag' && token.type != 'closeTag'){
-			if(temp && token.type == 'equals'){
+			if(!key && token.type == 'word'){
-				key = temp;
+				last = token.value;
-				temp = null;
+			}else if(last && token.type == 'equals'){
-				token = tokens[++current];
+				key = last;
-				continue;
+				last = null;
-			}
+			}else if(key && (token.type == 'number' || token.type == 'text')){
-			if(key){
 				props[key] = token.value;
 				key = null;
-				temp = null;
+				last = null;
 				token = tokens[++current];
 				continue;
+			}else if(last && token.type == 'word'){
+				props[last] = true;
+			}else{
+				throw "Invalid property value: " + key + '=' + token.value;
 			}
-
-			if(temp){
-				props[temp] = true;
-			}
-			temp = token.value;
 			token = tokens[++current];
 		}
 		return props;
 	}
 
-
 	var genNode = function(tagType){
 		token = tokens[++current];
 		var node = {
 			tag : tagType,
-			props : getProps(),
+			props : parseProps(),
 			children : getChildren(tagType)
 		}
 		return node
@@ -186,7 +156,14 @@ var parser = function(tokens){
 
 	var getChildren = function(tagType){
 		var children = [];
-		while(current < tokens.length && token.type != 'endTag' && token.value != tagType){
+		while(current < tokens.length){
+			if(token.type == 'endTag'){
+				if(token.value && token.value != tagType){
+					throw "Invalid closing tag: " + token.value + ". Expected closing tag of type: " + tagType
+				}else{
+					break;
+				}
+			}
 			if(token.type == 'openTag'){
 				children.push(genNode(token.value));
 			}else if(token.type == 'text'){
@@ -196,43 +173,34 @@ var parser = function(tokens){
 		}
 		return children;
 	}
-
 	return getChildren();
-
-
 }
 
 
-
+/*
 
 var test1 = `
-why you so cray
+<div test="hey there champ" more_cool=shoobydo size=0>
-<div test="here there 'champ'" more_cool size=0>
+	<span>
-	<span>Hey there!<a>so fucking cool</a></span>
+		Hey there!
-	let's go party!@
+		<a>so fucking cool </span>  </a>
-	we be cray
+	</span>
+	let's go party
+	<a href='neato' />
 </div>
-<a href='neato' />
 `
 
 var test2 = "<div>Hey there!</div>"
 
 
-
-
-
-
-
 var tokens = tokenizer(test1);
 
-console.log(tokens);
+console.log(test1, '\n---\n', tokens, '---\n', JSON.stringify(parser(tokens), null, '  '));
+*/
 
-
+module.exports = function(input){
-console.log(test1, JSON.stringify(parser(tokens), null, '  '));
+	return parser(tokenizer(input));
-
+}
-
-
-module.exports = tokenizer;