diff --git a/client/homebrew/editPage/editPage.jsx b/client/homebrew/editPage/editPage.jsx index 42a61b4..52e5f18 100644 --- a/client/homebrew/editPage/editPage.jsx +++ b/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){ diff --git a/client/homebrew/editor/snippets/snippets.js b/client/homebrew/editor/snippets/snippets.js index ae547ae..3b54e30 100644 --- a/client/homebrew/editor/snippets/snippets.js +++ b/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', diff --git a/client/homebrew/homePage/homePage.jsx b/client/homebrew/homePage/homePage.jsx index 216eac2..4f2e3d8 100644 --- a/client/homebrew/homePage/homePage.jsx +++ b/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(){ diff --git a/client/homebrew/homePage/welcomeMessage.js b/client/homebrew/homePage/welcomeMessage.js new file mode 100644 index 0000000..9b63308 --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/client/homebrew/sharePage/sharePage.jsx b/client/homebrew/sharePage/sharePage.jsx index b7ee6f0..30e9a16 100644 --- a/client/homebrew/sharePage/sharePage.jsx +++ b/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({
diff --git a/client/homebrew/statusbar/statusbar.jsx b/client/homebrew/statusbar/statusbar.jsx index d76b9bd..bd20ca3 100644 --- a/client/homebrew/statusbar/statusbar.jsx +++ b/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
- Last updated: {Moment(this.props.lastUpdated).fromNow()} -
+ return [ +
+ Views: {this.props.views} +
, +
+ Last updated: {Moment(this.props.lastUpdated).fromNow()} +
+ ]; + }, renderNewButton : function(){ if(this.props.editId || this.props.shareId) return null; return - New + New Brew }, @@ -69,10 +76,12 @@ var Statusbar = React.createClass({ render : function(){ return
- +
diff --git a/client/naturalCrit/home/bulldozer.png b/client/naturalCrit/home/bulldozer.png new file mode 100644 index 0000000..3e5acc3 Binary files /dev/null and b/client/naturalCrit/home/bulldozer.png differ diff --git a/client/naturalCrit/home/home.jsx b/client/naturalCrit/home/home.jsx index 8e4e498..cfc4021 100644 --- a/client/naturalCrit/home/home.jsx +++ b/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'); diff --git a/client/naturalCrit/home/home.less b/client/naturalCrit/home/home.less index 0381be6..dba681f 100644 --- a/client/naturalCrit/home/home.less +++ b/client/naturalCrit/home/home.less @@ -39,9 +39,10 @@ } .content{ .addSketch(360px); - .animate(background-color, 0.5s); - width : 500px; - padding : 40px; + .animateAll(0.5s); + position : relative; + width : 500px; + padding : 40px; &:hover{ svg, h2{ .transform(scale(1.3)); @@ -53,16 +54,15 @@ font-size : 2em; } p{ - max-width : 300px; - margin : 20px auto; - line-height: 1.5em; + max-width : 300px; + margin : 20px auto; + 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; + } + } + } } } } diff --git a/shared/naturalCrit/logo/logo.jsx b/shared/naturalCrit/logo/logo.jsx index e1ade03..d3e0904 100644 --- a/shared/naturalCrit/logo/logo.jsx +++ b/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