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 : {},
-
-			id : 'box',
+			name : 'box',
+			defaultData : {},
+
+			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{
+
+}