public/homebrewery
1
0
Fork 0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-13 22:55:56 +00:00
Code Issues Releases Wiki Activity

Updated the welcome text

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-01-11 17:00:21 -05:00
parent 9bc2eb70b2
commit 793eb86c39
10 changed files with 146 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/homebrew/editPage/editPage.jsx
View File

@@ -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){

2
client/homebrew/editor/snippets/snippets.js
View File

@@ -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',

11
client/homebrew/homePage/homePage.jsx
View File

@@ -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(){

59
client/homebrew/homePage/welcomeMessage.js Normal file
View File

@@ -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');

2
client/homebrew/sharePage/sharePage.jsx
View File

@@ -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} />

19
client/homebrew/statusbar/statusbar.jsx
View File

@@ -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 [
<div className='views' key='views'>
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'>

BIN
client/naturalCrit/home/bulldozer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
client/naturalCrit/home/home.jsx
View File

@@ -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');

54
client/naturalCrit/home/home.less
View File

@@ -39,7 +39,8 @@
}
.content{
.addSketch(360px);
.animate(background-color, 0.5s);
.animateAll(0.5s);
position : relative;
width : 500px;
padding : 40px;
&:hover{
@@ -55,14 +56,13 @@
p{
max-width : 300px;
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;
}
}
}
}
}
}

6
shared/naturalCrit/logo/logo.jsx
View File

@@ -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 />