so much progress

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

@@ -2,32 +2,25 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var utils = require('../utils');
+
 var Box = React.createClass({
+	mixins : [utils],
 	getDefaultProps: function() {
 		return {
-			data : {},
-			onChange : function(){},
-			defaultValue : {},
+			name : 'box',
+			defaultData : {},
 
-			id : 'box',
+			id : '',
+			title : '',
+			label : '',
+			shadow : false,
+			border : false
 		};
 	},
 
-	//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)
-		});
+		this.updateData(newData);
 	},
 
 	renderChildren : function(){
@@ -39,10 +32,21 @@ var Box = React.createClass({
 			})
 		})
 	},
+	renderTitle : function(){
+		if(this.props.title) return <h5 className='title'>{this.props.title}</h5>
+	},
+	renderLabel : function(){
+		if(this.props.label) return <h5 className='label'>{this.props.label}</h5>
+	},
 
 	render : function(){
-		return <div className={cx('box', this.props.className)}>
+		return <div className={cx('box', this.props.className, {
+				shadow : this.props.shadow,
+				border : this.props.border
+			})}>
+			{this.renderTitle()}
 			{this.renderChildren()}
+			{this.renderLabel()}
 		</div>
 	}
 });

client/splatsheet/sheetRenderer/parts/box/box.less

@@ -1,3 +1,30 @@
-.COM{
+.box{
+	position : relative;
+	padding : 10px;
+	margin: 10px;
 
+	&.border{
+		border: 1px solid black;
+	}
+	&.shadow{
+		background-color: #ddd;
+	}
+
+
+	h5{
+		text-transform: uppercase;
+		font-size : 0.6em;
+		text-align: center;
+		width : 100%;
+		font-weight: 800;
+
+		&.title{
+			margin-top: -5px;
+			margin-bottom: 10px;
+		}
+		&.label{
+			margin-bottom: -5px;
+			margin-top: 10px;
+		}
+	}
 }

client/splatsheet/sheetRenderer/parts/index.js

@@ -1,4 +1,13 @@
 module.exports = {
 	TextInput : require('./textInput/textInput.jsx'),
 	PlayerInfo : require('./playerInfo/playerInfo.jsx'),
+
+	SkillList : require('./skillList/skillList.jsx'),
+	Skill : require('./skill/skill.jsx'),
+
+	//ShadowBox : require('./shadowBox/shadowBox.jsx'),
+	//BorderBox : require('./borderBox/borderBox.jsx'),
+
+
+	Box : require('./box/box.jsx')
 }

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

@@ -3,65 +3,23 @@ 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',
+			title: "player info",
+			border : true
 		};
 	},
-/*
-	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" />
-
+		return <Box className='playerInfo' {...this.props} >
+			<TextInput label="Name" placeholder="name" />
+			<TextInput label="Class" />
+			<TextInput 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/skill/skill.jsx

@@ -0,0 +1,64 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var utils = require('../utils');
+
+var Skill = React.createClass({
+	getDefaultProps: function() {
+		return {
+			name : 'skill',
+			defaultData : {
+				prof : false,
+				expert : false,
+				val : ''
+			},
+
+			id : '',
+			label : '',
+			sublabel : '',
+			showExpert : false
+		};
+	},
+
+	id : utils.id,
+	data : utils.data,
+	updateData : utils.updateData,
+
+	handleToggleProf : function(){
+		this.updateData({
+			prof : !this.data().prof
+		})
+	},
+	handleToggleExpert : function(){
+		this.updateData({
+			expert : !this.data().expert
+		})
+	},
+	handleValChange : function(e){
+		console.log('yo');
+		this.updateData({
+			val : e.target.value
+		})
+	},
+
+	renderExpert : function(){
+		if(this.props.showExpert){
+			return <input type="radio" className='expertToggle' onChange={this.handleToggleExpert} checked={this.data().expert} />
+		}
+	},
+
+	render : function(){
+		return <div className='skill'>
+			{this.renderExpert()}
+			<input type="radio" className='skillToggle' onChange={this.handleToggleProf} checked={this.data().prof} />
+			<input type='text' onChange={this.handleValChange} value={this.data().val} />
+			<label>
+				{this.props.label}
+				<small>{this.props.sublabel}</small>
+			</label>
+		</div>
+	}
+});
+
+module.exports = Skill;

client/splatsheet/sheetRenderer/parts/skill/skill.less

@@ -0,0 +1,35 @@
+
+.skill{
+	position     : relative;
+	padding-left : 15px;
+	input[type="radio"]{
+		margin : 0px;
+	}
+	.expertToggle{
+		position : absolute;
+		top      : 1px;
+		left     : 0px;
+	}
+	input[type="text"]{
+		width            : 25px;
+		margin-left      : 10px;
+		background-color : transparent;
+		text-align       : center;
+		border           : none;
+		border-bottom    : 1px solid black;
+		outline          : none;
+		&:focus{
+			background-color : #ddd;
+		}
+	}
+	label{
+		margin-left : 10px;
+		font-size   : 0.8em;
+		small{
+			margin-left    : 5px;
+			font-size      : 0.8em;
+			color          : #999;
+			text-transform : uppercase;
+		}
+	}
+}

client/splatsheet/sheetRenderer/parts/skillList/skillList.jsx

@@ -0,0 +1,61 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Skill = require('../skill/skill.jsx');
+var Box = require('../box/box.jsx');
+
+
+var skill_list = [
+	{name : 'Acrobatics', stat : 'Dex'},
+	{name : 'Animal Handling', stat : 'Wis'},
+	{name : 'Arcana', stat : 'Int'},
+	{name : 'Athletics', stat : 'Str'},
+	{name : 'Deception', stat : 'Cha'},
+	{name : 'History', stat : 'Int'},
+	{name : 'Insight', stat : 'Wis'},
+	{name : 'Intimidation', stat : 'Cha'},
+	{name : 'Investigation', stat : 'Int'},
+	{name : 'Medicine', stat : 'Wis'},
+	{name : 'Nature', stat : 'Int'},
+	{name : 'Perception', stat : 'Wis'},
+	{name : 'Performance', stat : 'Cha'},
+	{name : 'Persuasion', stat : 'Cha'},
+	{name : 'Religion', stat : 'Int'},
+	{name : 'Sleight of Hand', stat : 'Dex'},
+	{name : 'Stealth', stat : 'Dex'},
+	{name : 'Survival', stat : 'Wis'}
+]
+
+
+var SkillList = React.createClass({
+	getDefaultProps: function() {
+		return {
+			name : 'skills',
+
+			//title : 'Skills',
+			shadow : true,
+			border : false,
+			showExpert : false
+		};
+	},
+
+
+	renderSkills : function(){
+		return _.map(skill_list, (skill)=>{
+			return <Skill
+				label={skill.name}
+				sublabel={'(' + skill.stat + ')'}
+				showExpert={this.props.showExpert} />
+		})
+	},
+
+	render : function(){
+		return <Box className='skillList' {...this.props}>
+			{this.renderSkills()}
+			{this.props.children}
+		</Box>
+	}
+});
+
+module.exports = SkillList;

client/splatsheet/sheetRenderer/parts/skillList/skillList.less

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

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

@@ -2,42 +2,41 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var utils = require('../utils');
+
 var TextInput = React.createClass({
 	getDefaultProps: function() {
 		return {
-			data : {},
-			defaultValue : '',
-			onChange : function(){},
+			name : 'text',
+			defaultData : '',
 
-
-			id : 'textInput',
+			id : '',
 			label : '',
-
 		};
 	},
 
-	id : function(){
-		return _.snakeCase(this.props.label) || this.props.id;
-	},
-	data : function(){
-		return this.props.data[this.id()] || this.props.defaultValue;
-	},
+	id : utils.id,
+	data : utils.data,
+	updateData : utils.updateData,
 
 	handleChange : function(e){
-		this.props.onChange({
-			[this.id()] : e.target.value
-		});
+		this.updateData(e.target.value);
 	},
 
 	renderLabel : function(){
-		if(!this.props.label) return;
-		return <label htmlFor={this.id()}>{this.props.label}</label>
+		if(this.props.label) 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()} />
+			<input
+				id={this.id()}
+				type='text'
+				onChange={this.handleChange}
+				value={this.data()}
+				placeholder={this.props.placeholder}
+			/>
 		</div>
 	}
 });

client/splatsheet/sheetRenderer/parts/utils.js

@@ -0,0 +1,29 @@
+var _ = require('lodash');
+
+
+module.exports = {
+	id : function(){
+		if(this.props.id) return this.props.id;
+		if(this.props.label) return _.snakeCase(this.props.label);
+		if(this.props.title) return _.snakeCase(this.props.title);
+		return this.props.name;
+	},
+	data : function(){
+		if(!this.id()) return this.props.data || this.props.defaultData;
+		if(this.props.data && this.props.data[this.id()]) return this.props.data[this.id()];
+		return this.props.defaultData;
+	},
+	updateData : function(val){
+		if(typeof this.props.onChange !== 'function') throw "No onChange handler set";
+
+		if(_.isObject(val)){
+			this.props.onChange({
+				[this.id()] : _.extend({}, this.data(), val)
+			});
+		}else{
+			this.props.onChange({
+				[this.id()] : val
+			});
+		}
+	}
+}

client/splatsheet/sheetRenderer/sheetRenderer.jsx

@@ -16,22 +16,14 @@ var SheetRenderer = React.createClass({
 		};
 	},
 
-/*
-	augmentProps : function(props, key){
-		return _.extend({}, props, {
-			key : key,
-			data : this.props.characterData,
-			onChange :
-		})
-	},
-*/
 	renderElement : function(node, key){
+		if(!node.tag) return null;
+
+		if(!Parts[node.tag]) throw 'Could Not Find Element: ' + node.tag
+
 		return React.createElement(
-			(Parts[node.tag] ? Parts[node.tag] : node.tag),
-
+			Parts[node.tag],
 			{key : key, ...node.props},
-
-			//this.augmentProps(node.props, key),
 			...this.renderChildren(node.children))
 	},
 	renderChildren : function(nodes){
@@ -44,7 +36,6 @@ var SheetRenderer = React.createClass({
 
 		try{
 			var nodes = jsx2json(this.props.code);
-
 			nodes = _.map(nodes, (node)=>{
 				node.props.data = this.props.characterData;
 				node.props.onChange = (newData)=>{

client/splatsheet/splatsheet.jsx

@@ -42,7 +42,7 @@ var SplatSheet = React.createClass({
 
 	handeCharacterChange : function(data){
 		this.setState({
-			characterData : data,
+			characterData : JSON.parse(JSON.stringify(data)),
 		});
 		localStorage.setItem(SPLATSHEET_CHARACTER, JSON.stringify(data));
 	},

shared/jsx-parser.js

@@ -49,10 +49,18 @@ var tokenizer = function(input){
 				current--;
 			}
 			else if(LETTERS.test(char)){
+				var word = getToken(LETTERS);
+				if(word == 'true' || word == 'false'){
+					tokens.push({
+						type : 'boolean',
+						value : word == 'true'
+					});
+				}else{
 					tokens.push({
 						type : 'word',
-					value : getToken(LETTERS)
+						value : word
 					});
+				}
 				current--;
 			}
 			else if(char == "'"){
@@ -123,24 +131,25 @@ var parser = function(tokens){
 		var last = null;
 
 		while(current < tokens.length && token.type != 'endTag' && token.type != 'closeTag'){
-			if(!key && token.type == 'word'){
+			if(last && token.type == 'word'){
+				props[last] = true;
+				last = token.value;
+			}else if(!key && token.type == 'word'){
 				last = token.value;
 			}else if(last && token.type == 'equals'){
 				key = last;
 				last = null;
-			}else if(key && (token.type == 'number' || token.type == 'text')){
+			}else if(key && (token.type == 'number' || token.type == 'text' || token.type == 'boolean')){
 				props[key] = token.value;
 				key = null;
 				last = null;
-				token = tokens[++current];
-				continue;
-			}else if(last && token.type == 'word'){
-				props[last] = true;
 			}else{
 				throw "Invalid property value: " + key + '=' + token.value;
 			}
 			token = tokens[++current];
 		}
+		if(last) props[last] = true;
+
 		return props;
 	}
 
@@ -177,20 +186,20 @@ var parser = function(tokens){
 }
 
 
-/*
 
+/*
 var test1 = `
-<div test="hey there champ" more_cool=shoobydo size=0>
+<div test="hey there champ" more_cool=false size=0>
 	<span>
 		Hey there!
-		<a>so fucking cool </span>  </a>
+		<a>so fucking cool </a>
 	</span>
 	let's go party
 	<a href='neato' />
 </div>
 `
 
-var test2 = "<div>Hey there!</div>"
+var test2 = "<div cool=0 same>Hey there!</div>"
 
 
 var tokens = tokenizer(test1);