Getting splatsheet rolling

client/homebrew/homebrew.less

@@ -1,18 +1,16 @@
+
 @import 'naturalCrit/styles/reset.less';
 //@import 'naturalCrit/styles/elements.less';
 @import 'naturalCrit/styles/animations.less';
 @import 'naturalCrit/styles/colors.less';
 @import 'naturalCrit/styles/tooltip.less';
-
 html,body, #reactContainer{
-	min-height: 100%;
-	font-family      : 'Open Sans', sans-serif;
+	min-height  : 100%;
+	font-family : 'Open Sans', sans-serif;
 }
-
 .homebrew{
-	background-color: @steel;
-	height : 100%;
-
+	height           : 100%;
+	background-color : @steel;
 	.paneSplit{
 		width : 100%;
 		height: 100vh;
@@ -29,7 +27,6 @@ html,body, #reactContainer{
 			min-height: 100%;
 			//margin-top: 25px;
 		}
-
 		.leftPane{
 			width : 40%;
 		}
@@ -40,6 +37,5 @@ html,body, #reactContainer{
 
 			overflow: hidden;
 		}
-
 	}
 }

client/splatsheet/codeEditor/codeEditor.jsx

@@ -0,0 +1,14 @@
+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/codeEditor/codeEditor.less

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

client/splatsheet/sheetEditor/sheetEditor.jsx

@@ -0,0 +1,27 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var SheetEditor = React.createClass({
+	getDefaultProps: function() {
+		return {
+			code : '',
+			onChange : function(){}
+		};
+	},
+
+	handleCodeChange : function(e){
+		this.props.onChange(e.target.value);
+	},
+
+	render : function(){
+		return <div className='sheetEditor'>
+			SheetEditor Ready!
+
+			<textarea value={this.props.code} onChange={this.handleCodeChange} />
+
+		</div>
+	}
+});
+
+module.exports = SheetEditor;

client/splatsheet/sheetEditor/sheetEditor.less

@@ -0,0 +1,8 @@
+.sheetEditor{
+
+	textarea{
+		margin-top: 50px;
+		height : 500px
+	}
+
+}

client/splatsheet/sheetRenderer/sheetRenderer.jsx

@@ -0,0 +1,49 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var babel = require('babel-core')
+
+var SheetRenderer = React.createClass({
+	getDefaultProps: function() {
+		return {
+			code : '',
+			characterData : {},
+			onChange : function(){},
+		};
+	},
+
+	componentWillReceiveProps: function(nextProps) {
+
+	},
+
+
+	renderSheet : function(){
+//		var render = jsx.transform(this.props.code);
+
+
+
+
+
+//		return eval(render);
+
+	},
+
+	render : function(){
+
+		console.log(babel);
+
+
+		return <div className='SheetRenderer'>
+
+
+			<div className='sheetContainer' ref='sheetContainer'>
+				{this.renderSheet()}
+
+			</div>
+
+		</div>
+	}
+});
+
+module.exports = SheetRenderer;

client/splatsheet/sheetRenderer/sheetRenderer.less

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

client/splatsheet/splatsheet.jsx

@@ -0,0 +1,49 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var StatusBar = require('./statusBar/statusBar.jsx');
+var SheetEditor = require('./sheetEditor/sheetEditor.jsx');
+var SheetRenderer = require('./sheetRenderer/sheetRenderer.jsx');
+
+var SplatSheet = React.createClass({
+
+	getInitialState: function() {
+		return {
+			sheetCode: '<div>yo test</div>',
+			characterData : {}
+		};
+	},
+
+
+	handleCodeChange : function(text){
+		this.setState({
+			sheetCode : text,
+		});
+	},
+
+	handeCharacterChange : function(data){
+
+	},
+
+
+	render : function(){
+		return <div className='splatSheet'>
+			<StatusBar />
+
+			<div className='paneSplit'>
+				<div className='leftPane'>
+					<SheetEditor code={this.state.sheetCode} onChange={this.handleCodeChange} />
+				</div>
+				<div className='rightPane'>
+					<SheetRenderer
+						code={this.state.sheetCode}
+						characterData={this.state.characterData}
+						onChange={this.handeCharacterChange} />
+				</div>
+			</div>
+		</div>
+	}
+});
+
+module.exports = SplatSheet;

client/splatsheet/splatsheet.less

@@ -0,0 +1,36 @@
+
+@import 'naturalCrit/styles/reset.less';
+//@import 'naturalCrit/styles/elements.less';
+@import 'naturalCrit/styles/animations.less';
+@import 'naturalCrit/styles/colors.less';
+@import 'naturalCrit/styles/tooltip.less';
+html,body, #reactContainer{
+	min-height  : 100%;
+	font-family : 'Open Sans', sans-serif;
+}
+.splatsheet{
+	height           : 100%;
+	background-color : @steel;
+	.paneSplit{
+		position    : relative;
+		box-sizing  : border-box;
+		height      : 100vh;
+		width       : 100%;
+		padding-top : 25px;
+		.leftPane, .rightPane{
+			position       : relative;
+			display        : inline-block;
+			vertical-align : top;
+			height         : 100%;
+			min-height     : 100%;
+		}
+		.leftPane{
+			width : 40%;
+		}
+		.rightPane{
+			overflow-y : scroll;
+			height     : 100%;
+			width      : 60%;
+		}
+	}
+}

client/splatsheet/statusbar/statusbar.jsx

@@ -0,0 +1,30 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Logo = require('naturalCrit/logo/logo.jsx');
+
+var Statusbar = React.createClass({
+	getDefaultProps: function() {
+		return {
+		};
+	},
+
+	render : function(){
+		return <div className='statusbar'>
+			<Logo
+				hoverSlide={true}
+			/>
+			<div className='left'>
+				<a href='/splatsheet' className='toolName'>
+					The SplatSheet
+				</a>
+			</div>
+			<div className='controls right'>
+
+			</div>
+		</div>
+	}
+});
+
+module.exports = Statusbar;

client/splatsheet/statusbar/statusbar.less

@@ -0,0 +1,135 @@
+
+.statusbar{
+	position         : fixed;
+	z-index          : 1000;
+	height           : 25px;
+	width            : 100%;
+	background-color : black;
+	font-size        : 24px;
+	color            : white;
+	line-height      : 1.0em;
+	border-bottom    : 1px solid @grey;
+	.logo{
+		display        : inline-block;
+		vertical-align : middle;
+		margin-top     : -5px;
+		margin-right   : 20px;
+		svg{
+			margin-top : -6px;
+		}
+	}
+	.left{
+		display        : inline-block;
+		vertical-align : top;
+	}
+	.right{
+		float : right;
+	}
+	.toolName{
+		display         : block;
+		vertical-align  : middle;
+		font-family     : CodeBold;
+		font-size       : 16px;
+		color           : white;
+		line-height     : 30px;
+		text-decoration : none;
+		small{
+			font-family : CodeBold;
+		}
+	}
+	.controls{
+		font-size : 12px;
+		>*{
+			display     : inline-block;
+			height      : 100%;
+			padding     : 0px 10px;
+			border-left : 1px solid @grey;
+		}
+		.savingStatus{
+			width      : 56px;
+			color      : @grey;
+			text-align : center;
+		}
+		.newButton{
+			.animate(background-color);
+			color           : white;
+			text-decoration : none;
+			&:hover{
+				background-color : fade(@green, 70%);
+			}
+		}
+		.chromeField{
+			background-color: @orange;
+			color           : white;
+			text-decoration : none;
+			i{
+				margin-right: 10px;
+			}
+		}
+		.changelogButton{
+			.animate(background-color);
+			color           : white;
+			text-decoration : none;
+			&:hover{
+				background-color : fade(@purple, 70%);
+			}
+		}
+		.deleteButton{
+			.animate(background-color);
+			color           : white;
+			text-decoration : none;
+			cursor: pointer;
+			&:hover{
+				background-color : fade(@red, 70%);
+			}
+		}
+		.shareField{
+			.animate(background-color);
+			cursor          : pointer;
+			color           : white;
+			text-decoration : none;
+			&:hover{
+				background-color : fade(@teal, 70%);
+			}
+			span{
+				margin-right : 5px;
+			}
+			input{
+				width     : 100px;
+				font-size : 12px;
+			}
+		}
+		.printField{
+			.animate(background-color);
+			cursor          : pointer;
+			color           : white;
+			text-decoration : none;
+			&:hover{
+				background-color : fade(@orange, 70%);
+			}
+			span{
+				margin-right : 5px;
+			}
+			input{
+				width     : 100px;
+				font-size : 12px;
+			}
+		}
+		.sourceField{
+			.animate(background-color);
+			cursor          : pointer;
+			color           : white;
+			text-decoration : none;
+			&:hover{
+				background-color : fade(@teal, 70%);
+			}
+			span{
+				margin-right : 5px;
+			}
+			input{
+				width     : 100px;
+				font-size : 12px;
+			}
+		}
+	}
+}

gulpfile.js

@@ -5,7 +5,14 @@ var gulp = require("gulp");
 
 
 var gulp = vitreumTasks(gulp, {
-	entryPoints: ["./client/naturalCrit", "./client/homebrew", "./client/admin"],
+	entryPoints: [
+		"./client/naturalCrit",
+
+		"./client/splatsheet",
+		"./client/homebrew",
+
+		"./client/admin"
+	],
 
 	DEV: true,
 

server.js

@@ -64,9 +64,11 @@ app.get('/admin', function(req, res){
 
 
 app = require('./server/homebrew.api.js')(app);
+app = require('./server/splatsheet.api.js')(app);
 
 
 
+//Render the homepage
 app.get('*', function (req, res) {
 	vitreumRender({
 		page: './build/naturalCrit/bundle.dot',

server/pdfConvert.js

@@ -1,31 +0,0 @@
-var pdf = require('html-pdf');
-var Markdown = require('marked');
-
-var PHBStyle = '<style>' + require('fs').readFileSync('../phb.standalone.css', 'utf8') + '</style>'
-
-
-var content = Markdown('# oh hey \n welcome! isnt this neat \n \\page ##### test');
-
-
-var html = "<html><head>" + PHBStyle + "</head><body><div class='phb'>"+ content +"</div></body></html>"
-
-//var h = 279.4 - 20*2.8;
-var h = 279.4 - 56;
-
-
-
-//var w = 215.9 - 56*1.7
-
-var w = 215.9 - 43;
-
-
-var config = {
-	"height": (279.4 - 56) + "mm",
-	"width": (215.9 - 43) + "mm",
-	"border": "0",
-}
-
-pdf.create(html, config).toFile('./temp.pdf', function(err, res){
-	console.log(err);
-	console.log(res.filename);
-});

server/splatsheet.api.js

@@ -0,0 +1,27 @@
+var _ = require('lodash');
+var Moment = require('moment');
+var vitreumRender = require('vitreum/render');
+
+
+
+
+module.exports = function(app){
+
+	app.get('/splatsheet', function(req, res){
+		vitreumRender({
+			page: './build/splatsheet/bundle.dot',
+			globals:{},
+			prerenderWith : './client/splatsheet/splatsheet.jsx',
+			initialProps: {
+				url: req.originalUrl,
+			},
+			clearRequireCache : true,
+		}, function (err, page) {
+			return res.send(page)
+		});
+	});
+
+
+
+	return app;
+}