'Sheet

client/tpk/navbar/navbar.jsx

@@ -9,7 +9,7 @@ var Navbar = React.createClass({
 			<Nav.section>
 				<Nav.logo />
 				<Nav.item href='/tpk' className='tpkLogo'>
-					<div>Total Party Knolling</div>
+					<div>Total Player Knolling</div>
 				</Nav.item>
 				<Nav.item>v0.0.0</Nav.item>
 			</Nav.section>

client/tpk/sheetRenderer/parts/box/box.jsx

@@ -0,0 +1,54 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var utils = require('../utils');
+
+var Box = React.createClass({
+	mixins : [utils],
+	getDefaultProps: function() {
+		return {
+			//name : 'box',
+			defaultData : {},
+
+			id : '',
+			title : '',
+			label : '',
+			shadow : false,
+			border : false
+		};
+	},
+
+	handleChange : function(newData){
+		this.updateData(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()
+			})
+		})
+	},
+	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, {
+				shadow : this.props.shadow,
+				border : this.props.border
+			})}>
+			{this.renderTitle()}
+			{this.renderChildren()}
+			{this.renderLabel()}
+		</div>
+	}
+});
+
+module.exports = Box;

client/tpk/sheetRenderer/parts/box/box.less

@@ -0,0 +1,30 @@
+.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/tpk/sheetRenderer/parts/index.js

@@ -0,0 +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/tpk/sheetRenderer/parts/playerInfo/playerInfo.jsx

@@ -0,0 +1,25 @@
+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 {
+			title: "player info",
+			border : true
+		};
+	},
+	render : function(){
+		return <Box className='playerInfo' {...this.props} >
+			<TextInput label="Name" placeholder="name" />
+			<TextInput label="Class" />
+			<TextInput label="Race" />
+			{this.props.children}
+		</Box>
+	}
+});
+
+module.exports = PlayerInfo;

client/tpk/sheetRenderer/parts/playerInfo/playerInfo.less

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

client/tpk/sheetRenderer/parts/skill/skill.jsx

@@ -0,0 +1,62 @@
+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/tpk/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/tpk/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/tpk/sheetRenderer/parts/skillList/skillList.less

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

client/tpk/sheetRenderer/parts/textInput/textInput.jsx

@@ -0,0 +1,44 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var utils = require('../utils');
+
+var TextInput = React.createClass({
+	getDefaultProps: function() {
+		return {
+			name : 'text',
+			defaultData : '',
+
+			id : '',
+			label : '',
+		};
+	},
+
+	id : utils.id,
+	data : utils.data,
+	updateData : utils.updateData,
+
+	handleChange : function(e){
+		this.updateData(e.target.value);
+	},
+
+	renderLabel : function(){
+		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()}
+				placeholder={this.props.placeholder}
+			/>
+		</div>
+	}
+});
+
+module.exports = TextInput;

client/tpk/sheetRenderer/parts/textInput/textInput.less

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

client/tpk/sheetRenderer/parts/utils.js

@@ -0,0 +1,33 @@
+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";
+
+		var newVal = val;
+
+		//Clone the data if it's an object to avoid mutation bugs
+		if(_.isObject(val)) newVal = _.extend({}, this.data(), val);
+
+		if(this.id()){
+			this.props.onChange({
+				[this.id()] : newVal
+			});
+		}else{
+			//If the box has no id, don't add it to the chain
+			this.props.onChange(newVal)
+		}
+	}
+}

client/tpk/sheetRenderer/sheetRenderer.jsx

@@ -0,0 +1,79 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var jsx2json = require('naturalcrit/jsx-parser');
+
+var Parts = require('./parts');
+
+
+var SheetRenderer = React.createClass({
+	getDefaultProps: function() {
+		return {
+			code : '',
+			characterData : {},
+			onChange : function(){},
+		};
+	},
+
+	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],
+			{key : key, ...node.props},
+			...this.renderChildren(node.children))
+	},
+	renderChildren : function(nodes){
+		return _.map(nodes, (node, index)=>{
+			if(_.isString(node)) return node;
+			return this.renderElement(node, index);
+		})
+	},
+	renderSheet : function(){
+		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>
+		}
+	},
+
+
+
+
+	render : function(){
+		return <div className='sheetRenderer'>
+
+			<h2>Character Sheet</h2>
+
+			<div className='sheetContainer' ref='sheetContainer'>
+				{this.renderSheet()}
+
+			</div>
+
+		</div>
+	}
+});
+
+
+module.exports = SheetRenderer;
+
+
+/*
+
+<Temp text="cool">yo test  <a href="google.com">link</a> </Temp>
+
+
+
+
+*/

client/tpk/sheetRenderer/sheetRenderer.less

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

client/tpk/tpk.jsx

@@ -7,6 +7,12 @@ var Navbar = require('./navbar/navbar.jsx');
 
 var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 var SheetEditor = require('./sheetEditor/sheetEditor.jsx');
+var SheetRenderer = require('./sheetRenderer/sheetRenderer.jsx');
+
+
+const SPLATSHEET_TEMPLATE = 'splatsheet_template';
+const SPLATSHEET_DATA = 'splatsheet_data';
+
 
 
 var TPK = React.createClass({
@@ -14,14 +20,17 @@ var TPK = React.createClass({
 
 	getInitialState: function() {
 		return {
-			sheetCode: ''
+			sheetCode: "<Box>\n\t<TextInput label='test' />\n</Box>",
+
+			sheetData : {}
 		};
 	},
 
 	//remove later
 	componentDidMount: function() {
 		this.setState({
-			sheetCode : localStorage.getItem('temp')
+			sheetCode : localStorage.getItem(SPLATSHEET_TEMPLATE) || this.state.sheetCode,
+			sheetData : JSON.parse(localStorage.getItem(SPLATSHEET_DATA)) || this.state.sheetData
 		})
 	},
 
@@ -34,7 +43,14 @@ var TPK = React.createClass({
 			sheetCode : code
 		});
 
-		localStorage.setItem('temp', code);
+		localStorage.setItem(SPLATSHEET_TEMPLATE, code);
+	},
+
+	handleDataChange : function(data){
+		this.setState({
+			sheetData : JSON.parse(JSON.stringify(data)),
+		});
+		localStorage.setItem(SPLATSHEET_DATA, JSON.stringify(data));
 	},
 
 	render : function(){
@@ -49,9 +65,10 @@ var TPK = React.createClass({
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<SheetEditor value={this.state.sheetCode} onChange={this.handleCodeChange} ref='editor' />
-					<div>
-						{this.state.sheetCode}
-					</div>
+					<SheetRenderer
+						code={this.state.sheetCode}
+						characterData={this.state.sheetData}
+						onChange={this.handleDataChange} />
 				</SplitPane>
 			</div>
 		</div>

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -39,7 +39,7 @@ var CodeEditor = React.createClass({
 	},
 
 	componentWillReceiveProps: function(nextProps){
-		if(this.codeMirror && nextProps.value !== undefined && this.codeMirror.getValue() != nextProps.value) {
+		if(this.codeMirror && nextProps.value && this.codeMirror.getValue() != nextProps.value) {
 			this.codeMirror.setValue(nextProps.value);
 		}
 	},