Merge remote-tracking branch 'upstream/master' into Style-Editor-Menu-and-comments

client/homebrew/editor/editor.jsx

@@ -68,15 +68,18 @@ const Editor = createClass({
 	},
 
 	handleInject : function(injectText){
-		const text = (this.isText() ? this.props.brew.text : this.props.brew.style);
+		let text;
+		if(this.isText())  text = this.props.brew.text;
+		if(this.isStyle()) text = this.props.brew.style ?? DEFAULT_STYLE_TEXT;
 
 		const lines = text.split('\n');
 		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.isText())  this.props.onTextChange(lines.join('\n'));
 		if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));
 	},
 
@@ -119,7 +122,7 @@ const Editor = createClass({
 
 				// New Codemirror styling for V3 renderer
 				if(this.props.renderer == 'V3') {
-					if(line.startsWith('\\page')){
+					if(line.match(/^\\page$/)){
 						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
 						r.push(lineNumber);
 					}

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -167,6 +167,10 @@ const MetadataEditor = createClass({
 						onChange={(e)=>this.handleRenderer('V3', e)} />
 					V3
 				</label>
+
+				<a href='/v3_preview' target='_blank' rel='noopener noreferrer'>
+					Click here for a quick intro to V3!
+				</a>
 			</div>
 		</div>;
 	},

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -43,6 +43,11 @@
 			display        : inline-flex;
 			align-items    : center;
 		}
+		a {
+			font-size   : 0.7em;
+			font-weight : 800;
+			display     : inline-flex;
+		}
 		input{
 			vertical-align : middle;
 			cursor         : pointer;
@@ -62,9 +67,6 @@
 			.button(@silver);
 		}
 		small{
-			position   : absolute;
-			bottom     : -15px;
-			left       : 0px;
 			font-size  : 0.6em;
 			font-style : italic;
 		}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -40,19 +40,9 @@ const Snippetbar = createClass({
 		let snippets = [];
 
 		if(this.props.renderer === 'V3')
-			if(this.props.view === 'text') {
-				snippets = SnippetsV3.filter((SnippetsV3)=>SnippetsV3.view === 'text');
-			} else if(this.props.view === 'style') {
-				snippets = SnippetsV3.filter((SnippetsV3)=>SnippetsV3.view === 'style');
-			} else
-				snippets = null;
+			snippets = SnippetsV3.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 		else
-		if(this.props.view === 'text') {
-			snippets = SnippetsLegacy.filter((SnippetsLegacy)=>SnippetsLegacy.view === 'text');
-		} else if(this.props.view === 'style') {
-			snippets = SnippetsLegacy.filter((SnippetsLegacy)=>SnippetsLegacy.view === 'style');
-		} else
-			snippets = null;
+			snippets = SnippetsLegacy.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
 		return _.map(snippets, (snippetGroup)=>{
 			return <SnippetGroup

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

@@ -2,86 +2,77 @@ const _ = require('lodash');
 
 const features = [
 	'Astrological Botany',
-	'Astrological Chemistry',
 	'Biochemical Sorcery',
-	'Civil Alchemy',
-	'Consecrated Biochemistry',
+	'Civil Divination',
+	'Consecrated Augury',
 	'Demonic Anthropology',
 	'Divinatory Mineralogy',
-	'Genetic Banishing',
-	'Hermetic Geography',
-	'Immunological Incantations',
-	'Nuclear Illusionism',
-	'Ritual Astronomy',
-	'Seismological Divination',
-	'Spiritual Biochemistry',
-	'Statistical Occultism',
-	'Police Necromancer',
-	'Sixgun Poisoner',
-	'Pharmaceutical Gunslinger',
-	'Infernal Banker',
-	'Spell Analyst',
-	'Gunslinger Corruptor',
-	'Torque Interfacer',
 	'Exo Interfacer',
+	'Genetic Banishing',
 	'Gunpowder Torturer',
-	'Orbital Gravedigger',
-	'Phased Linguist',
-	'Mathematical Pharmacist',
-	'Plasma Outlaw',
+	'Gunslinger Corruptor',
+	'Hermetic Geography',
+	'Immunological Cultist',
 	'Malefic Chemist',
-	'Police Cultist'
+	'Mathematical Pharmacy',
+	'Nuclear Biochemistry',
+	'Orbital Gravedigger',
+	'Pharmaceutical Outlaw',
+	'Phased Linguist',
+	'Plasma Gunslinger',
+	'Police Necromancer',
+	'Ritual Astronomy',
+	'Sixgun Poisoner',
+	'Seismological Alchemy',
+	'Spiritual Illusionism',
+	'Statistical Occultism',
+	'Spell Analyst',
+	'Torque Interfacer'
 ];
 
-const classnames = ['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
-	'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge'];
+const classnames = ['Ackerman', 'Berserker-Typist', 'Concierge', 'Fishmonger',
+	                  'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'];
 
-const levels = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th', '15th', '16th', '17th', '18th', '19th', '20th'];
+const levels = ['1st', '2nd', '3rd', '4th', '5th',
+              	'6th', '7th', '8th', '9th', '10th',
+	              '11th', '12th', '13th', '14th', '15th',
+              	'16th', '17th', '18th', '19th', '20th'];
 
 const profBonus = [2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6];
 
-const getFeature = (level)=>{
-	let res = [];
-	if(_.includes([4, 6, 8, 12, 14, 16, 19], level+1)){
-		res = ['Ability Score Improvement'];
-	}
-	res = _.union(res, _.sampleSize(features, _.sample([0, 1, 1, 1, 1, 1])));
-	if(!res.length) return '─';
-	return res.join(', ');
+const maxes = [4, 3, 3, 3, 3, 2, 2, 1, 1];
+
+const drawSlots = function(Slots, rows, padding){
+	let slots = Number(Slots);
+	return _.times(rows, function(i){
+		const max = maxes[i];
+		if(slots < 1) return _.pad('—', padding);
+		const res = _.min([max, slots]);
+		slots -= res;
+		return _.pad(res.toString(), padding);
+	}).join(' | ');
 };
 
 module.exports = {
-	full : function(){
+	full : function(classes){
 		const classname = _.sample(classnames);
 
-		const maxes = [4, 3, 3, 3, 3, 2, 2, 1, 1];
-		const drawSlots = function(Slots){
-			let slots = Number(Slots);
-			return _.times(9, function(i){
-				const max = maxes[i];
-				if(slots < 1) return '—';
-				const res = _.min([max, slots]);
-				slots -= res;
-				return res;
-			}).join(' | ');
-		};
-
 
 		let cantrips = 3;
 		let spells = 1;
 		let slots = 2;
-		return `{{classTable,wide\n##### The ${classname}\n` +
-		`| Level | Proficiency | Features | Cantrips | Spells | --- Spell Slots Per Level ---               |||||||||\n`+
-		`|      ^| Bonus      ^|         ^| Known   ^| Known ^| 1st | 2nd | 3rd | 4th | 5th | 6th | 7th | 8th | 9th |\n`+
-		`|:-----:|:-----------:|:---------|:--------:|:------:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n${
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency | Features     | Cantrips | Spells | --- Spell Slots Per Spell Level ---|||||||||\n`+
+		`|      ^| Bonus      ^|             ^| Known   ^| Known ^|1st |2nd |3rd |4th |5th |6th |7th |8th |9th |\n`+
+		`|:-----:|:-----------:|:-------------|:--------:|:------:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|\n${
 			_.map(levels, function(levelName, level){
 				const res = [
-					levelName,
-					`+${profBonus[level]}`,
-					getFeature(level),
-					cantrips,
-					spells,
-					drawSlots(slots)
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 21),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 6),
+					drawSlots(slots, 9, 2),
 				].join(' | ');
 
 				cantrips += _.random(0, 1);
@@ -92,24 +83,50 @@ module.exports = {
 			}).join('\n')}\n}}\n\n`;
 	},
 
-	half : function(){
+	half : function(classes){
 		const classname =  _.sample(classnames);
 
 		let featureScore = 1;
-		return `<div class='classTable'>\n##### The ${classname}\n` +
-		`| Level | Proficiency Bonus | Features | ${_.sample(features)}|\n` +
-		`|:---:|:---:|:---|:---:|\n${
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency Bonus | Features | ${_.pad(_.sample(features), 21)} |\n` +
+		`|:-----:|:-----------------:|:---------|:---------------------:|\n${
 			_.map(levels, function(levelName, level){
 				const res = [
-					levelName,
-					`+${profBonus[level]}`,
-					getFeature(level),
-					`+${featureScore}`
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 23),
+					_.pad(`+${featureScore}`, 21),
 				].join(' | ');
 
 				featureScore += _.random(0, 1);
 
 				return `| ${res} |`;
-			}).join('\n')}\n</div>\n\n`;
+			}).join('\n')}\n}}\n\n`;
+	},
+
+	third : function(classes){
+		const classname = _.sample(classnames);
+
+		let cantrips = 3;
+		let spells = 1;
+		let slots = 2;
+		return `{{${classes}\n##### ${classname} Spellcasting\n` +
+		`| Class  | Cantrips | Spells  |--- Spells Slots per Spell Level ---||||\n` +
+		`| Level ^| Known   ^| Known  ^|   1st   |   2nd   |   3rd   |   4th   |\n` +
+		`|:------:|:--------:|:-------:|:-------:|:-------:|:-------:|:-------:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 6),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 7),
+					drawSlots(slots, 4, 7),
+				].join(' | ');
+
+				cantrips += _.random(0, 1);
+				spells += _.random(0, 1);
+				slots += _.random(0, 1);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\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 = [
@@ -43,23 +44,11 @@ module.exports = [
 					{{wide
 					Everything in here will be extra wide. Tables, text, everything!
 					Beware though, CSS columns can behave a bit weird sometimes. You may
-					have to rely on the automatic column-break rather than \`\column\` if
-					you mix columns and wide blocks on the same page.
+					have to manually place column breaks with \`\column\` to make the
+					surrounding text flow with this wide block the way you want.
 					}}
 					\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}
-					Credit: Kyounghwan Kim`
-			},
-			{
-				name : 'Background Image',
-				icon : 'fas fa-tree',
-				gen  : `![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}`
-			},
 			{
 				name : 'QR Code',
 				icon : 'fas fa-qrcode',
@@ -69,7 +58,6 @@ module.exports = [
 							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
 							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}
-
 			},
 			{
 				name : 'Page Number',
@@ -135,6 +123,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 ********************/
 
@@ -211,6 +241,18 @@ module.exports = [
 				icon : 'fas fa-hat-wizard',
 				gen  : MagicGen.item,
 			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : function(){
+					return dedent`
+						{{artist,top:90px,right:30px
+						##### Starry Night
+						[Van Gogh](https://www.vangoghmuseum.nl/en)
+						}}
+						\n`;
+				},
+			},
 		]
 	},
 
@@ -226,12 +268,32 @@ module.exports = [
 			{
 				name : 'Class Table',
 				icon : 'fas fa-table',
-				gen  : ClassTableGen.full,
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
 			},
 			{
-				name : 'Half Class Table',
+				name : 'Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.full('classTable,wide'),
+			},
+			{
+				name : '1/2 Class Table',
 				icon : 'fas fa-list-alt',
-				gen  : ClassTableGen.half,
+				gen  : ClassTableGen.half('classTable,decoration,frame'),
+			},
+			{
+				name : '1/2 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.half('classTable'),
+			},
+			{
+				name : '1/3 Class Table',
+				icon : 'fas fa-border-all',
+				gen  : ClassTableGen.third('classTable,frame'),
+			},
+			{
+				name : '1/3 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.third('classTable'),
 			},
 			{
 				name : 'Table',
@@ -302,7 +364,7 @@ module.exports = [
 	/**************** PAGE *************/
 
 	{
-		groupName : 'Page',
+		groupName : 'Print',
 		icon      : 'fas fa-print',
 		view      : 'style',
 		snippets  : [
@@ -310,8 +372,8 @@ module.exports = [
 				name : 'A4 Page Size',
 				icon : 'far fa-file',
 				gen  : ['/* A4 Page Size */',
-					'.phb{',
-					'	width : 210mm;',
+					'.page{',
+					'	width  : 210mm;',
 					'	height : 296.8mm;',
 					'}',
 					''
@@ -322,10 +384,10 @@ module.exports = [
 				icon : 'far fa-file',
 				gen  : ['/* Square Page Size */',
 					'.page {',
-					'	width:5.25in;',
-					'	height:5.25in;',
-					'	padding:.5in;',
-					'	columns:unset;',
+					'	width   : 125mm;',
+					'	height  : 125mm;',
+					'	padding : 12.5mm;',
+					'	columns : unset;',
 					'}',
 					''
 				].join('\n')
@@ -333,17 +395,20 @@ module.exports = [
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
-				gen  : ['/* Ink Friendly */',
-					'.pages *:is(.page,.monster,.note,.descriptive) {',
-					'	background:white !important;',
-					'	box-shadow:0px 0px 3px !important;',
-					'}',
-					'',
-					'.page .note:before {',
-					'	box-shadow:0px 0px 3px;',
-					'}',
-					''
-				].join('\n')
+				gen  : dedent`
+					/* Ink Friendly */
+					.pages *:is(.page,.monster,.note,.descriptive) {
+						background : white !important;
+						box-shadow : 0px 0px 3px !important;
+					}
+
+					.page .note:before {
+						box-shadow : 0px 0px 3px;
+					}
+
+					.page img {
+						visibility : hidden;
+					}`
 			},
 		]
 	},

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`;
+};

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

@@ -6,7 +6,7 @@ const MonsterBlockGen = require('./monsterblock.gen.js');
 const ClassFeatureGen = require('./classfeature.gen.js');
 const CoverPageGen = require('./coverpage.gen.js');
 const TableOfContentsGen = require('./tableOfContents.gen.js');
-
+const dedent = require('dedent-tabs').default;
 
 module.exports = [
 
@@ -184,6 +184,14 @@ module.exports = [
 				icon : 'far fa-file-word',
 				gen  : CoverPageGen,
 			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : '<div class=\'artist\' style=\'top:90px;right:30px;\'>\n' +
+						'##### Starry Night\n' +
+						'[Van Gogh](https://www.vangoghmuseum.nl/en)\n' +
+						'</div>\n'
+			},
 		]
 	},
 
@@ -277,7 +285,7 @@ module.exports = [
 	/**************** PRINT *************/
 
 	{
-		groupName : 'Page',
+		groupName : 'Print',
 		icon      : 'fas fa-print',
 		view      : 'style',
 		snippets  : [
@@ -286,8 +294,8 @@ module.exports = [
 				icon : 'far fa-file',
 				gen  : ['/* A4 Page Size */',
 					'.phb {',
-					'    width : 210mm;',
-					'    height : 296.8mm;',
+					'	width  : 210mm;',
+					'	height : 296.8mm;',
 					'}'
 				].join('\n')
 			},
@@ -296,10 +304,10 @@ module.exports = [
 				icon : 'far fa-file',
 				gen  : ['/* Square Page Size */',
 					'.phb {',
-					'	width:5.25in;',
-					'	height:5.25in;',
-					'	padding:.5in;',
-					'	columns:unset;',
+					'	width   : 125mm;',
+					'	height  : 125mm;',
+					'	padding : 12.5mm;',
+					'	columns : unset;',
 					'}',
 					''
 				].join('\n')
@@ -307,13 +315,16 @@ module.exports = [
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
-				gen  : ['/* Ink Friendly */',
-					'.phb, .phb blockquote, .phb hr+blockquote {',
-					'	background : white;',
-					'	box-shadow : 0px 0px 3px;',
-					'}',
-					''
-				].join('\n')
+				gen  : dedent`
+					/* Ink Friendly */
+					.phb, .phb blockquote, .phb hr+blockquote {
+						background : white;
+						box-shadow : 0px 0px 3px;
+					}
+
+					.phb img {
+						visibility : hidden;
+					}`
 			},
 		]
 	},