Updated the welcome text

client/homebrew/editPage/editPage.jsx

@@ -38,12 +38,6 @@ var EditPage = React.createClass({
 			if(!self.state.pending) return;
 			return "You have unsaved changes!";
 		}
-
-		if(this.state.text === ""){
-			this.setState({
-				text : 'Put stuff huuurr'
-			})
-		}
 	},
 
 	handleTextChange : function(text){

client/homebrew/editor/snippets/snippets.js

@@ -5,11 +5,13 @@ var ClassFeatureGen = require('./classfeature.gen.js');
 var FullClassGen = require('./fullclass.gen.js');
 
 module.exports = [
+	/*
 	{
 		tooltip : 'Full Class',
 		icon : 'fa-user',
 		snippet : FullClassGen,
 	},
+	*/
 	{
 		tooltip : 'Spell',
 		icon : 'fa-magic',

client/homebrew/homePage/homePage.jsx

@@ -6,23 +6,30 @@ var Statusbar = require('../statusbar/statusbar.jsx');
 var PHB = require('../phb/phb.jsx');
 var Editor = require('../editor/editor.jsx');
 
+var WelcomeText = require('./welcomeMessage.js');
+
+
+
 var KEY = 'naturalCrit-homebrew';
 
 var HomePage = React.createClass({
 
 	getInitialState: function() {
 		return {
-			text: "# Welcome \n Oh god, what to put here. *Instructions* I guess?."
+			text: WelcomeText
 		};
 	},
 
 	componentDidMount: function() {
+		/*
 		var storage = localStorage.getItem(KEY);
 		if(storage){
 			this.setState({
 				text : storage
 			})
 		}
+		*/
+
 	},
 
 	handleTextChange : function(text){
@@ -30,7 +37,7 @@ var HomePage = React.createClass({
 			text : text
 		});
 
-		localStorage.setItem(KEY, text);
+		//localStorage.setItem(KEY, text);
 	},
 
 	render : function(){

client/homebrew/homePage/welcomeMessage.js

@@ -0,0 +1,59 @@
+module.exports = [
+"# The Homebrewery",
+"Welcome traveler from an antique land. Please sit and tell us of what you have seen. The unheard of monsters, who slither and bite.",
+"",
+"Tell us of the wonderous items and and artifacts you have found, their mysteries yet to be unlocked. Of the vexing vocations and surprising skills you have seen.",
+"",
+"### Homebrew made easy",
+"The Homebrewery allows for the creation and sharing of authentic looking Fifth-Edition homebrews, with just text editing. It accomplishes this by using [Markdown](https://help.github.com/articles/markdown-basics/) along with some custom CSS-stlying.",
+"",
+"**Try it! **Simply edit the text on the left and watch it *update live* on the right.",
+"",
+"#### Features",
+"* Monster Stat Blocks",
+"* Full class tables",
+"* Notes and Tables",
+"* Images",
+"* Vertical spacing, column breaks, and mutliple Pages",
+"",
+"",
+"#### Snippets",
+"If you aren't used the Markdown-style syntax, don't worry! I've provided several **snippets** at the top of the editor. When clicked, these will *inject* text wherever your text cursor was.",
+"",
+"Each snippet is a common format from the Player's Handbook or is a feature of The Homebrewery. You'll never have to memorize eactly how a Monster Stat Block is suppose to be formatted.",
+"",
+"### Editing and Sharing",
+"When you create your own homebrew you will be given a *edit url* and a *share url*.  Any changes you make will be automatically saved to the database within a few seconds. Anyone with the edit url will be able to make edits to your homebrew. So be careful about who you share it with.",
+"",
+"Anyone with the *share url* will be able to access a read-only version of your homebrew.",
+"",
+"",
+"> ##### Be Careful: Concurrent Editing",
+"> The Homebrewery **does not** support concurrent user editing. It's best one user at a time makes edits to avoid overwriting eachother.",
+"",
+"",
+"",
+"### Images",
+"Images can be included 'inline' with the text using Markdown-style images. However for background images more control is needed.",
+"",
+"Background images should be included as HTML-style img tags. Using inline CSS you can precisely position your image where you'd like it to be. The image **snippet** provides an example of doing this.",
+"",
+"```",
+"```",
+"",
+"### Not quite Markdown",
+"Although the Homebrewery uses Markdown, to get all the stlying features from the PHB, we had to get a little creative. Some base HTML elements are not used as expected and I've had to include a few new keywords.",
+"",
+"___",
+"* **Horizontal Rules** are generally used to *modify* existing elements into a different style. For example, a horizontal rule before a blockquote will give it the style of a Monster Stat Block.",
+"* **New Pages** are controlled by the author. It's impossible for the site to detect when the end of a page is reached, so indicate you'd like to start a new page with **`/page`** on it's own line .",
+"* **Code Blocks** are used only to indicate column breaks. Since they don't allow for styling within them, they weren't that useful to use.",
+"* **HTML** can be used to get *just* the right look for your homebrew. I've included some examples in the snippet icons above the editor.",
+"",
+"",
+"## Planned Features",
+"Here are a few features I'm planning on next",
+"* Convert to PDF",
+"* Switch between DMG-style and Monster Manual-Style",
+"* Download as images",
+].join('\n');

client/homebrew/sharePage/sharePage.jsx

@@ -16,6 +16,7 @@ var SharePage = React.createClass({
 				editId : null,
 				createdAt : null,
 				updatedAt : null,
+				views : 0
 			}
 		};
 	},
@@ -25,6 +26,7 @@ var SharePage = React.createClass({
 			<div className='sharePage'>
 				<Statusbar
 					lastUpdated={this.props.entry.updatedAt}
+					views={this.props.entry.views}
 				/>
 
 				<PHB text={this.props.entry.text} />

client/homebrew/statusbar/statusbar.jsx

@@ -13,7 +13,8 @@ var Statusbar = React.createClass({
 			shareId : null,
 			isPending : false,
 			lastUpdated : null,
-			info : null
+			info : null,
+			views : 0
 		};
 	},
 
@@ -34,16 +35,22 @@ var Statusbar = React.createClass({
 	renderInfo : function(){
 		if(!this.props.lastUpdated) return null;
 
-		return <div className='lastUpdated'>
+		return [
-			Last updated: {Moment(this.props.lastUpdated).fromNow()}
+			<div className='views' key='views'>
-		</div>
+				Views: {this.props.views}
+			</div>,
+			<div className='lastUpdated' key='lastUpdated'>
+				Last updated: {Moment(this.props.lastUpdated).fromNow()}
+			</div>
+		];
+
 	},
 
 	renderNewButton  : function(){
 		if(this.props.editId || this.props.shareId) return null;
 
 		return <a className='newButton' target='_blank' href='/homebrew/new'>
-			New <i className='fa fa-plus' />
+			New Brew <i className='fa fa-external-link' />
 		</a>
 	},
 
@@ -69,10 +76,12 @@ var Statusbar = React.createClass({
 
 	render : function(){
 		return <div className='statusbar'>
-			<Logo />
+			<Logo
+				hoverSlide={true}
+			/>
 			<div className='left'>
 				<a href='/homebrew' className='toolName'>
-					The Home<i className='fa fa-beer fa-flip-horizontal' /><small>rewery</small>
+					The Home<small>Brewery</small>
 				</a>
 			</div>
 			<div className='controls right'>

client/naturalCrit/home/home.jsx

@@ -3,9 +3,7 @@ var _ = require('lodash');
 var cx = require('classnames');
 
 var Router = require('pico-router');
-
 var Icon = require('naturalCrit/icon.svg.jsx');
-
 var Logo = require('naturalCrit/logo/logo.jsx');
 
 

client/naturalCrit/home/home.less

@@ -39,9 +39,10 @@
 			}
 			.content{
 				.addSketch(360px);
-				.animate(background-color, 0.5s);
+				.animateAll(0.5s);
-				width   : 500px;
+				position : relative;
-				padding : 40px;
+				width    : 500px;
+				padding  : 40px;
 				&:hover{
 					svg, h2{
 						.transform(scale(1.3));
@@ -53,16 +54,15 @@
 					font-size   : 2em;
 				}
 				p{
-					max-width : 300px;
+					max-width   : 300px;
-					margin    : 20px auto;
+					margin      : 20px auto;
-					line-height: 1.5em;
+					line-height : 1.5em;
 				}
 				svg{
 					.animateAll(0.5s);
 					height : 10em;
 				}
 			}
-
 			//Proejct specific styles
 			&.homebrew{
 				.content:hover{
@@ -74,9 +74,51 @@
 					background-color : fade(@red, 20%);
 				}
 			}
-
+			//Under Construction styles
-
+			&.underConstruction{
-
+				cursor : initial;
+				.content{
+					&:hover{
+						svg, h2{
+							.transform(scale(1.0));
+						}
+					}
+					svg, h2{
+						opacity : 0.3;
+					}
+					&:after{
+						.animateAll();
+						content          : "Under Construction";
+						position         : absolute;
+						display          : block;
+						top              : 120px;
+						left             : 0px;
+						width            : 100%;
+						padding          : 10px 0px;
+						//opacity          : 0;
+						background-color : fade(@grey, 50%);
+						font-size        : 2em;
+						font-weight      : 800;
+						text-align       : center;
+						text-transform   : uppercase;
+					}
+					&:before{
+						.rumble(6s);
+						content                   : "";
+						position                  : absolute;
+						display                   : block;
+						top                       : 130px;
+						right                     : 30px;
+						height                    : 50px;
+						width                     : 40px;
+						//opacity                   : 0;
+						background-image          : url('/assets/naturalCrit/home/bulldozer.png');
+						background-repeat         : no-repeat;
+						background-size           : contain;
+						animation-iteration-count : infinite;
+					}
+				}
+			}
 		}
 	}
 }

shared/naturalCrit/logo/logo.jsx

@@ -2,6 +2,12 @@ var React = require('react');
 var Icon = require('naturalCrit/icon.svg.jsx');
 
 var Logo = React.createClass({
+	getDefaultProps: function() {
+		return {
+			hoverSlide : false
+		};
+	},
+
 	render : function(){
 		return <a className='logo' {... this.props} href='/'>
 			<Icon />