Fixing issue#413 class feature duping entire brew

I think this might be caused by a new bug in Chrome or something since it seems to have popped up in GMBinder as well in the last couple weeks. See #683

Anyway, the error only occurs on the Class Table and Descriptive Text Box, which are also the only ones to use `border-image-repeat: round`. I changed it to `border-image-repeat: stretch` which solves the graphical issue and doesn't affect the appearance otherwise in this particular case.

changelog.md

@@ -1,5 +1,12 @@
 # changelog
 
+### Saturday, 22/04/217 - v2.7.4
+- Give ability to hide the render warning notification
+
+
+### Friday, 03/03/2017 - v2.7.3
+- Increasing the range on the Partial Page Rendering for a quick-fix for it getting out of sync on long brews.
+
 ### Saturday, 18/02/2017 - v2.7.2
 - Adding ability to delete a brew from the user page, incase the user creates a brew that makes the edit page unrender-able. (re:309)
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -77,9 +77,13 @@ const BrewRenderer = React.createClass({
 		if(!this.state.isMounted) return false;
 
 		var viewIndex = this.state.viewablePageNumber;
+		if(index == viewIndex - 3) return true;
+		if(index == viewIndex - 2) return true;
 		if(index == viewIndex - 1) return true;
 		if(index == viewIndex)     return true;
 		if(index == viewIndex + 1) return true;
+		if(index == viewIndex + 2) return true;
+		if(index == viewIndex + 3) return true;
 
 		//Check for style tages
 		if(pageText.indexOf('<style>') !== -1) return true;

client/homebrew/editor/snippetbar/snippets/classfeature.gen.js

@@ -2,7 +2,7 @@ var _ = require('lodash');
 
 module.exports = function(classname){
 
-	classname = classname || _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
+	classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
 			'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge'])
 
 	classname = classname.toLowerCase();

client/homebrew/phbStyle/phb.style.less

@@ -415,7 +415,7 @@ body {
 	border              : initial;
 	border-style        : solid;
 	border-image-outset : 25px 17px;
-	border-image-repeat : round;
+	border-image-repeat : stretch;
 	border-image-slice  : 150 200 150 200;
 	border-image-source : @frameBorderImage;
 	border-image-width  : 47px;
@@ -423,9 +423,9 @@ body {
 		margin-bottom : 10px;
 	}
 }
-//*****************************
+//************************************
-// *       CLASS TABLE
+// *       DESCRIPTIVE TEXT BOX
-// *****************************/
+// ************************************/
 .phb .descriptive{
 	display             : block-inline;
 	margin-bottom       : 1em;
@@ -433,7 +433,7 @@ body {
 	font-family         : ScalySans;
 	border-style        : solid;
 	border-width        : 7px;
-	border-image        : @descriptiveBoxImage 12 round;
+	border-image        : @descriptiveBoxImage 12 stretch;
 	border-image-outset : 4px;
 	box-shadow          : 0px 0px 6px #faf7ea;
 	p{

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "2.7.2",
+  "version": "2.7.5",
   "scripts": {
     "dev": "node scripts/dev.js",
     "quick": "node scripts/quick.js",

server.js

@@ -1,140 +1,140 @@
-const _ = require('lodash');
+const _ = require('lodash');
-const jwt = require('jwt-simple');
+const jwt = require('jwt-simple');
-const express = require("express");
+const express = require("express");
-const app = express();
+const app = express();
-
+
-app.use(express.static(__dirname + '/build'));''
+app.use(express.static(__dirname + '/build'));''
-app.use(require('body-parser').json({limit: '25mb'}));
+app.use(require('body-parser').json({limit: '25mb'}));
-app.use(require('cookie-parser')());
+app.use(require('cookie-parser')());
-
+
-const config = require('nconf')
+const config = require('nconf')
-	.argv()
+	.argv()
-	.env({ lowerCase: true })
+	.env({ lowerCase: true })
-	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
+	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
-	.file('defaults', { file: 'config/default.json' });
+	.file('defaults', { file: 'config/default.json' });
-
+
-//DB
+//DB
-require('mongoose')
+require('mongoose')
-	.connect(process.env.MONGODB_URI || process.env.MONGOLAB_URI || 'mongodb://localhost/naturalcrit')
+	.connect(process.env.MONGODB_URI || process.env.MONGOLAB_URI || 'mongodb://localhost/naturalcrit')
-	.connection.on('error', () => {
+	.connection.on('error', () => {
-		console.log('Error : Could not connect to a Mongo Database.');
+		console.log('Error : Could not connect to a Mongo Database.');
-		console.log('        If you are running locally, make sure mongodb.exe is running.');
+		console.log('        If you are running locally, make sure mongodb.exe is running.');
-	});
+	});
-
+
-
+
-//Account MIddleware
+//Account MIddleware
-app.use((req, res, next) => {
+app.use((req, res, next) => {
-	if(req.cookies && req.cookies.nc_session){
+	if(req.cookies && req.cookies.nc_session){
-		try{
+		try{
-			req.account = jwt.decode(req.cookies.nc_session, config.get('secret'));
+			req.account = jwt.decode(req.cookies.nc_session, config.get('secret'));
-		}catch(e){}
+		}catch(e){}
-	}
+	}
-	return next();
+	return next();
-});
+});
-
+
-
+
-app.use(require('./server/homebrew.api.js'));
+app.use(require('./server/homebrew.api.js'));
-app.use(require('./server/admin.api.js'));
+app.use(require('./server/admin.api.js'));
-
+
-
+
-const HomebrewModel = require('./server/homebrew.model.js').model;
+const HomebrewModel = require('./server/homebrew.model.js').model;
-const welcomeText = require('fs').readFileSync('./client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
+const welcomeText = require('fs').readFileSync('./client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
-const changelogText = require('fs').readFileSync('./changelog.md', 'utf8');
+const changelogText = require('fs').readFileSync('./changelog.md', 'utf8');
-
+
-
+
-//Source page
+//Source page
-String.prototype.replaceAll = function(s,r){return this.split(s).join(r)}
+String.prototype.replaceAll = function(s,r){return this.split(s).join(r)}
-app.get('/source/:id', (req, res)=>{
+app.get('/source/:id', (req, res)=>{
-	HomebrewModel.get({shareId : req.params.id})
+	HomebrewModel.get({shareId : req.params.id})
-		.then((brew)=>{
+		.then((brew)=>{
-			const text = brew.text.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+			const text = brew.text.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-			return res.send(`<code><pre>${text}</pre></code>`);
+			return res.send(`<code><pre>${text}</pre></code>`);
-		})
+		})
-		.catch((err)=>{
+		.catch((err)=>{
-			console.log(err);
+			console.log(err);
-			return res.status(404).send('Could not find Homebrew with that id');
+			return res.status(404).send('Could not find Homebrew with that id');
-		})
+		})
-});
+});
-
+
-
+
-app.get('/user/:username', (req, res, next) => {
+app.get('/user/:username', (req, res, next) => {
-	const fullAccess = req.account && (req.account.username == req.params.username);
+	const fullAccess = req.account && (req.account.username == req.params.username);
-	HomebrewModel.getByUser(req.params.username, fullAccess)
+	HomebrewModel.getByUser(req.params.username, fullAccess)
-		.then((brews) => {
+		.then((brews) => {
-			req.brews = brews;
+			req.brews = brews;
-			return next();
+			return next();
-		})
+		})
-		.catch((err) => {
+		.catch((err) => {
-			console.log(err);
+			console.log(err);
-		})
+		})
-})
+})
-
+
-
+
-app.get('/edit/:id', (req, res, next)=>{
+app.get('/edit/:id', (req, res, next)=>{
-	HomebrewModel.get({editId : req.params.id})
+	HomebrewModel.get({editId : req.params.id})
-		.then((brew)=>{
+		.then((brew)=>{
-			req.brew = brew.sanatize();
+			req.brew = brew.sanatize();
-			return next();
+			return next();
-		})
+		})
-		.catch((err)=>{
+		.catch((err)=>{
-			console.log(err);
+			console.log(err);
-			return res.status(400).send(`Can't get that`);
+			return res.status(400).send(`Can't get that`);
-		});
+		});
-});
+});
-
+
-//Share Page
+//Share Page
-app.get('/share/:id', (req, res, next)=>{
+app.get('/share/:id', (req, res, next)=>{
-	HomebrewModel.get({shareId : req.params.id})
+	HomebrewModel.get({shareId : req.params.id})
-		.then((brew)=>{
+		.then((brew)=>{
-			return brew.increaseView();
+			return brew.increaseView();
-		})
+		})
-		.then((brew)=>{
+		.then((brew)=>{
-			req.brew = brew.sanatize(true);
+			req.brew = brew.sanatize(true);
-			return next();
+			return next();
-		})
+		})
-		.catch((err)=>{
+		.catch((err)=>{
-			console.log(err);
+			console.log(err);
-			return res.status(400).send(`Can't get that`);
+			return res.status(400).send(`Can't get that`);
-		});
+		});
-});
+});
-
+
-//Print Page
+//Print Page
-app.get('/print/:id', (req, res, next)=>{
+app.get('/print/:id', (req, res, next)=>{
-	HomebrewModel.get({shareId : req.params.id})
+	HomebrewModel.get({shareId : req.params.id})
-		.then((brew)=>{
+		.then((brew)=>{
-			req.brew = brew.sanatize(true);
+			req.brew = brew.sanatize(true);
-			return next();
+			return next();
-		})
+		})
-		.catch((err)=>{
+		.catch((err)=>{
-			console.log(err);
+			console.log(err);
-			return res.status(400).send(`Can't get that`);
+			return res.status(400).send(`Can't get that`);
-		});
+		});
-});
+});
-
+
-
+
-//Render Page
+//Render Page
-const render = require('vitreum/steps/render');
+const render = require('vitreum/steps/render');
-const templateFn = require('./client/template.js');
+const templateFn = require('./client/template.js');
-app.use((req, res) => {
+app.use((req, res) => {
-	render('homebrew', templateFn, {
+	render('homebrew', templateFn, {
-			version : require('./package.json').version,
+			version : require('./package.json').version,
-			url: req.originalUrl,
+			url: req.originalUrl,
-			welcomeText : welcomeText,
+			welcomeText : welcomeText,
-			changelog : changelogText,
+			changelog : changelogText,
-			brew : req.brew,
+			brew : req.brew,
-			brews : req.brews,
+			brews : req.brews,
-			account : req.account
+			account : req.account
-		})
+		})
-		.then((page) => {
+		.then((page) => {
-			return res.send(page)
+			return res.send(page)
-		})
+		})
-		.catch((err) => {
+		.catch((err) => {
-			console.log(err);
+			console.log(err);
-			return res.sendStatus(500);
+			return res.sendStatus(500);
-		});
+		});
-});
+});
-
+
-
+
-const PORT = process.env.PORT || 8000;
+const PORT = process.env.PORT || 8000;
-app.listen(PORT);
+app.listen(PORT);
 console.log(`server on port:${PORT}`);

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -3,6 +3,8 @@ const React = require('react');
 const _     = require('lodash');
 const cx    = require('classnames');
 
+const DISMISS_KEY = 'dismiss_render_warning';
+
 const RenderWarnings = React.createClass({
 	getInitialState: function() {
 		return {
@@ -40,6 +42,9 @@ const RenderWarnings = React.createClass({
 		}
 	},
 	checkWarnings : function(){
+		const hideDismiss = localStorage.getItem(DISMISS_KEY);
+		if(hideDismiss) return this.setState({warnings : {}});
+
 		this.setState({
 			warnings : _.reduce(this.warnings, (r, fn, type) => {
 				const element = fn();
@@ -48,11 +53,16 @@ const RenderWarnings = React.createClass({
 			}, {})
 		})
 	},
+	dismiss : function(){
+		localStorage.setItem(DISMISS_KEY, true);
+		this.checkWarnings();
+	},
 	render: function(){
 		if(_.isEmpty(this.state.warnings)) return null;
 
 		return <div className='renderWarnings'>
-			<i className='fa fa-exclamation-triangle' />
+			<i className='fa fa-times dismiss' onClick={this.dismiss}/>
+			<i className='fa fa-exclamation-triangle ohno' />
 			<h3>Render Warnings</h3>
 			<small>If this homebrew is rendering badly if might be because of the following:</small>
 			<ul>{_.values(this.state.warnings)}</ul>

shared/homebrewery/renderWarnings/renderWarnings.less

@@ -11,12 +11,22 @@
 	padding-left     : 85px;
 	background-color : @yellow;
 	color            : white;
-	i{
+	i.ohno{
-		position: absolute;
+		position  : absolute;
-		left: 24px;
+		top       : 24px;
-		opacity: 0.8;
+		left      : 24px;
-		font-size: 2.5em;
+		opacity   : 0.8;
-		top: 24px;
+		font-size : 2.5em;
+	}
+	i.dismiss{
+		position : absolute;
+		top      : 10px;
+		right    : 10px;
+		cursor   : pointer;
+		opacity  : 0.6;
+		&:hover{
+			opacity : 1;
+		}
 	}
 	small{
 		opacity   : 0.7;
@@ -32,10 +42,10 @@
 		list-style-position : outside;
 		list-style-type     : disc;
 		li{
+			font-size   : 0.8em;
 			line-height : 1.6em;
-			font-size: 0.8em;
 			em{
-				font-weight: 800;
+				font-weight : 800;
 			}
 		}
 	}