Merge pull request #1549 from Gazook89/Images-Snippet-Menu

New Snippet Menu for Images, +3 new snippets

client/homebrew/editor/editor.jsx

@@ -76,7 +76,8 @@ const Editor = createClass({
 		const cursorPos = this.refs.codeEditor.getCursorPosition();
 		lines[cursorPos.line] = splice(lines[cursorPos.line], cursorPos.ch, injectText);
 
-		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectText.split('\n').length, cursorPos.ch  + injectText.length);
+		const injectLines = injectText.split('\n');
+		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectLines.length, cursorPos.ch  + injectLines[injectLines.length - 1].length);
 
 		if(this.isText())  this.props.onTextChange(lines.join('\n'));
 		if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));

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

@@ -7,6 +7,7 @@ const ClassFeatureGen = require('./classfeature.gen.js');
 const CoverPageGen = require('./coverpage.gen.js');
 const TableOfContentsGen = require('./tableOfContents.gen.js');
 const dedent = require('dedent-tabs').default;
+const watercolorGen = require('./watercolor.gen.js');
 
 
 module.exports = [
@@ -48,28 +49,6 @@ module.exports = [
 					}}
 					\n`
 			},
-			{
-				name : 'Image',
-				icon : 'fas fa-image',
-				gen  : dedent`
-					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}
-
-					{{artist,position:relative,top:-230px,left:-100px,margin-bottom:-30px
-					##### Cat Warrior
-					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
-					}}`
-			},
-			{
-				name : 'Background Image',
-				icon : 'fas fa-tree',
-				gen  : dedent`
-					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
-
-					{{artist,top:90px,right:30px
-					##### Homebrew Mug
-					[naturalcrit](https://homebrew.naturalcrit.com)
-					}}`
-			},
 			{
 				name : 'QR Code',
 				icon : 'fas fa-qrcode',
@@ -79,7 +58,6 @@ module.exports = [
 							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
 							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}
-
 			},
 			{
 				name : 'Page Number',
@@ -134,6 +112,48 @@ module.exports = [
 		]
 	},
 
+	/*********************** IMAGES *******************/
+	{
+		groupName : 'Images',
+		icon      : 'fas fa-images',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Image',
+				icon : 'fas fa-image',
+				gen  : dedent`
+					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}
+
+					{{artist,position:relative,top:-230px,left:-100px,margin-bottom:-30px
+					##### Cat Warrior
+					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
+					}}`
+			},
+			{
+				name : 'Background Image',
+				icon : 'fas fa-tree',
+				gen  : dedent`
+					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
+
+					{{artist,top:90px,right:30px
+					##### Homebrew Mug
+					[naturalcrit](https://homebrew.naturalcrit.com)
+					}}`
+			},
+			{
+				name : 'Watercolor Splatter',
+				icon : 'fas fa-fill-drip',
+				gen  : watercolorGen,
+			},
+			{
+				name : 'Watermark',
+				icon : 'fas fa-id-card',
+				gen  : dedent`
+				{{watermark Homebrewery}}\n`
+			},
+		]
+	},
+
 
 	/************************* PHB ********************/
 
@@ -237,7 +257,7 @@ module.exports = [
 			{
 				name : 'Class Table',
 				icon : 'fas fa-table',
-				gen  : ClassTableGen.full('classTable,frame,wide'),
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
 			},
 			{
 				name : 'Class Table (unframed)',
@@ -247,7 +267,7 @@ module.exports = [
 			{
 				name : '1/2 Class Table',
 				icon : 'fas fa-list-alt',
-				gen  : ClassTableGen.half('classTable,frame'),
+				gen  : ClassTableGen.half('classTable,decoration,frame'),
 			},
 			{
 				name : '1/2 Class Table (unframed)',

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

@@ -0,0 +1,5 @@
+const _ = require('lodash');
+
+module.exports = ()=>{
+	return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;
+};

themes/5ePhb.style.less

@@ -9,6 +9,7 @@
 @headerText            : #58180D; // Dark maroon
 @monsterStatBackground : #EEDBAB; // Light orange parchment
 @captionText           : #766649; // Brown
+@watercolorStain       : #BBAD82; // Light brown
 @page { margin: 0; }
 body {
 	counter-reset : phb-page-numbers;
@@ -182,7 +183,9 @@ body {
 	table{
 		.useSansSerif();
 		width         : 100%;
-		margin-bottom : 1em;
+		& + * {
+			margin-top : 1em;
+		}
 		thead{
 			display: table-row-group;
 			font-weight : 800;
@@ -272,8 +275,10 @@ body {
 		}
 	}
 	//*****************************
-	// *    ARTIST CREDIT BLOCK
+	// *    Images Snippets
 	// *****************************/
+
+	/* Arist Credit */
 	.artist {
 		position    : absolute;
 		text-align  : center;
@@ -298,6 +303,64 @@ body {
 		}
 	}
 
+	/* Watermark */
+	.watermark {
+		display			: grid !important;
+		place-items		: center;
+		justify-content	: center;
+		position		: absolute;
+		top				: 0;
+		left			: 0;
+		width			: 100%;
+		height			: 100%;
+		font-size		: 120px;
+		text-transform	: uppercase;
+		color			: black;
+		mix-blend-mode 	: overlay;
+		opacity			: 30%;
+		transform		: rotate(-45deg);
+		z-index			: 500;
+		p {
+			margin-bottom : none;
+		}
+	}
+
+	/* Watercolor */
+	[class*="watercolor"] {
+		position            : absolute;
+		width               : 2000px;    /* dimensions need to be real big so the user can set */
+		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
+		-webkit-mask-image  : var(--wc);
+		-webkit-mask-size   : contain;
+		-webkit-mask-repeat : no-repeat;
+		mask-image          : var(--wc);
+		mask-size           : contain;
+		mask-repeat         : no-repeat;
+		background-size     : cover;
+		background-color    : @watercolorStain;			/*default color*/
+		--wc                : @watercolor1;         /*default image*/
+		z-index             : -2;
+	}
+
+	.watercolor1  { --wc : @watercolor1; }
+	.watercolor2  { --wc : @watercolor2; }
+	.watercolor3  { --wc : @watercolor3; }
+	.watercolor4  { --wc : @watercolor4; }
+	.watercolor5  { --wc : @watercolor5; }
+	.watercolor6  { --wc : @watercolor6; }
+	.watercolor7  { --wc : @watercolor7; }
+	.watercolor8  { --wc : @watercolor8; }
+	.watercolor9  { --wc : @watercolor9; }
+	.watercolor10 { --wc : @watercolor10; }
+	.watercolor11 { --wc : @watercolor11; }
+	.watercolor12 { --wc : @watercolor12; }
+
+	img {
+		z-index: 2 !important;
+		filter : drop-shadow(0px 6px 6px rgba(0,0,0,.4));
+		position: absolute;
+	}
+
 	//*****************************
 	// *    MONSTER STAT BLOCK
 	// *****************************/
@@ -564,20 +627,43 @@ body {
 		white-space : nowrap;
 	}
 	&.frame {
-		margin-top          : 25px;
+		margin-top          : 0.66cm;
-		margin-bottom       : 40px;
+		margin-bottom       : 1.05cm;
+		margin-left         : -0.1cm;
+		margin-right        : -0.1cm;
 		border-collapse     : separate;
 		background-color    : white;
 		border              : initial;
 		border-style        : solid;
-		border-image-outset : 25px 17px;
+		border-image-outset : 0.55cm 0.3cm;
 		border-image-repeat : stretch;
-		border-image-slice  : 150 200 150 200;
+		border-image-slice  : 200;
 		border-image-source : @frameBorderImage;
 		border-image-width  : 47px;
 	}
-	h5{
+	&.decoration {
-		margin-bottom : 10px;
+		transform-style : preserve-3d;
+	}
+	&.decoration::before {
+		content           :'';
+		position          : absolute;
+		background-image  : @classTableDecoration;
+		background-size   : contain;
+		background-repeat : space;
+		width             : 7.75cm;
+		height            : calc(100% + 3.3cm);
+		top               : 50%;
+		left              : 50%;
+		transform         : translateY(-50%) translateX(-50%) translateZ(-1px);
+		filter            : drop-shadow(0px 0px 1px #C8C5C080)
+	}
+	&.decoration.wide::before {
+		width             : calc(100% + 3.3cm);
+		height            : 7.75cm;
+		top               : calc(50% + 0.4cm);
+	}
+	h5 + table{
+		margin-top : 0.2cm;
 	}
 }
 //*****************************

themes/assets/assets.less

@@ -1,3 +1,4 @@
+// PHB
 @footerAccentImage        : data-uri('./themes/assets/footerAccent.png');
 @frameBorderImage         : data-uri('./themes/assets/frameBorder.png');
 @backgroundImage          : data-uri('./themes/assets/parchmentBackground.jpg');
@@ -8,3 +9,18 @@
 @monsterBlockBackground   : data-uri('./themes/assets/parchmentBackgroundGrayscale.jpg');
 @monsterBorderImage       : data-uri('./themes/assets/monsterBorderFancy.png');
 @codeBorderImage          : data-uri('./themes/assets/codeBorder.png');
+@classTableDecoration     : data-uri('./themes/assets/classTableDecoration.png');
+
+// Watercolor Images
+@watercolor1  : data-uri('./themes/assets/watercolor/watercolor1.png');
+@watercolor2  : data-uri('./themes/assets/watercolor/watercolor2.png');
+@watercolor3  : data-uri('./themes/assets/watercolor/watercolor3.png');
+@watercolor4  : data-uri('./themes/assets/watercolor/watercolor4.png');
+@watercolor5  : data-uri('./themes/assets/watercolor/watercolor5.png');
+@watercolor6  : data-uri('./themes/assets/watercolor/watercolor6.png');
+@watercolor7  : data-uri('./themes/assets/watercolor/watercolor7.png');
+@watercolor8  : data-uri('./themes/assets/watercolor/watercolor8.png');
+@watercolor9  : data-uri('./themes/assets/watercolor/watercolor9.png');
+@watercolor10 : data-uri('./themes/assets/watercolor/watercolor10.png');
+@watercolor11 : data-uri('./themes/assets/watercolor/watercolor11.png');
+@watercolor12 : data-uri('./themes/assets/watercolor/watercolor12.png');