diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index d80ac0f64..e3ab31742 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -181,7 +181,10 @@ const BrewRenderer = createClass({
: null}
-
+
+ style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
+ contentDidMount={this.frameDidMount}>
- {/* Apply CSS and render pages from Markdown tab */}
+ {/* Apply CSS from Style tab and render pages from Markdown tab */}
{this.state.isMounted
&&
<>
diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
index 231e3301e..abb80fc5f 100644
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,19 +1,11 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
-& {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';} //&{} keeps internal variables locally-scoped
-& {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}
.brewRenderer{
will-change : transform;
overflow-y : scroll;
.pages{
margin : 30px 0px;
- &>.phb{
- margin-right : auto;
- margin-bottom : 30px;
- margin-left : auto;
- box-shadow : 1px 4px 14px #000;
- }
- &>.phb3{
+ &>.page{
margin-right : auto;
margin-bottom : 30px;
margin-left : auto;
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 12cb0aa37..ebfd74060 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -131,7 +131,7 @@ const Editor = createClass({
// Highlight inline spans {{content}}
if(line.includes('{{') && line.includes('}}')){
- const regex = /{{(?:="[\w,\-. ]*"|[^"'\s])*\s*|}}/g;
+ const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
let match;
let blockCount = 0;
while ((match = regex.exec(line)) != null) {
@@ -150,7 +150,7 @@ const Editor = createClass({
// Highlight block divs {{\n Content \n}}
let endCh = line.length+1;
- const match = line.match(/^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/);
+ const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
if(match)
endCh = match.index+match[0].length;
codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index c3141f0d4..a58df14cd 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -18,10 +18,11 @@
font-weight : 800;
line-height : 1.8em;
text-transform : uppercase;
- flex-grow : 0;
+ flex : 0 0 auto;
}
&>.value{
- flex-grow : 1;
+ flex : 1 1 auto;
+ min-width : 200px;
}
}
.description.field textarea.value{
@@ -38,15 +39,22 @@
font-size : 0.7em;
font-weight : 800;
user-select : none;
+ white-space : nowrap;
+ display : inline-flex;
+ align-items : center;
}
input{
vertical-align : middle;
cursor : pointer;
+ margin : 3px;
}
}
.publish.field .value{
position : relative;
margin-bottom: 15px;
+ button{
+ width:100%;
+ }
button.publish{
.button(@blueLight);
}
@@ -76,4 +84,4 @@
font-size: 0.8em;
line-height : 1.5em;
}
-}
\ No newline at end of file
+}
diff --git a/client/homebrew/editor/snippetbar/snippets/magic.gen.js b/client/homebrew/editor/snippetbar/snippets/magic.gen.js
index a7765e979..43bc5843b 100644
--- a/client/homebrew/editor/snippetbar/snippets/magic.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/magic.gen.js
@@ -57,7 +57,7 @@ const itemNames = [
module.exports = {
spellList : function(){
- const levels = ['Cantrips (0 Level)', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
+ const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
const content = _.map(levels, (level)=>{
const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{
@@ -66,7 +66,7 @@ module.exports = {
return `##### ${level} \n${spells} \n`;
}).join('\n');
- return `
\n${content}\n
`;
+ return `{{spellList\n${content}\n}}`;
},
spell : function(){
@@ -82,11 +82,11 @@ module.exports = {
return [
`#### ${_.sample(spellNames)}`,
`*${_.sample(level)}-level ${_.sample(spellSchools)}*`,
- '___',
- '- **Casting Time:** 1 action',
- `- **Range:** ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
- `- **Components:** ${components}`,
- `- **Duration:** ${_.sample(['Until dispelled', '1 round', 'Instantaneous', 'Concentration, up to 10 minutes', '1 hour'])}`,
+ '',
+ '**Casting Time:** :: 1 action',
+ `**Range:** :: ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
+ `**Components:** :: ${components}`,
+ `**Duration:** :: ${_.sample(['Until dispelled', '1 round', 'Instantaneous', 'Concentration, up to 10 minutes', '1 hour'])}`,
'',
'A flame, equivalent in brightness to a torch, springs from an object that you touch. ',
'The effect look like a regular flame, but it creates no heat and doesn\'t use oxygen. ',
diff --git a/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js b/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js
index c455e90f5..4db3019ea 100644
--- a/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js
@@ -146,18 +146,18 @@ module.exports = {
## ${getMonsterName()}
*${getType()}, ${getAlignment()}*
___
- : **Armor Class** : ${_.random(10, 20)} (chain mail, shield)
- : **Hit Points** : ${_.random(1, 150)}(1d4 + 5)
- : **Speed** : ${_.random(0, 50)}ft.
+ **Armor Class** :: ${_.random(10, 20)} (chain mail, shield)
+ **Hit Points** :: ${_.random(1, 150)}(1d4 + 5)
+ **Speed** :: ${_.random(0, 50)}ft.
___
| STR | DEX | CON | INT | WIS | CHA |
|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
${getStats()}
___
- : **Condition Immunities** : ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
- : **Senses** : darkvision 60 ft., passive Perception ${_.random(3, 20)}
- : **Languages** : ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
- : **Challenge** : ${_.random(0, 15)} (${_.random(10, 10000)} XP)
+ **Condition Immunities** :: ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
+ **Senses** :: darkvision 60 ft., passive Perception ${_.random(3, 20)}
+ **Languages** :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
+ **Challenge** :: ${_.random(0, 15)} (${_.random(10, 10000)} XP)
___
:
${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n\t\t\t\n\t\t\t')}
diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js
index f72817c7a..e61289b6b 100644
--- a/client/homebrew/editor/snippetbar/snippets/snippets.js
+++ b/client/homebrew/editor/snippetbar/snippets/snippets.js
@@ -27,34 +27,46 @@ module.exports = [
},
{
name : 'Vertical Spacing',
- icon : 'fas fa-times-circle',
- gen : ''
+ icon : 'fas fa-arrows-alt-v',
+ gen : '\n::::\n'
+ },
+ {
+ name : 'Horizontal Spacing',
+ icon : 'fas fa-arrows-alt-h',
+ gen : ' {{width:100px}} '
},
{
name : 'Wide Block',
- icon : 'fas fa-times-circle',
- gen : ''
+ icon : 'fas fa-window-maximize',
+ gen : dedent`\n
+ {{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.
+ }}
+ \n`
},
{
name : 'Image',
- icon : 'fas fa-times-circle',
- gen : ''
+ icon : 'fas fa-image',
+ gen : dedent`
+  {width:325px}
+ Credit: Kyounghwan Kim`
},
{
name : 'Background Image',
icon : 'fas fa-tree',
- gen : `

`
+ gen : ` {position:absolute,top:50px,right:30px,width:280px}`
},
{
name : 'QR Code',
icon : 'fas fa-qrcode',
gen : (brew)=>{
- return `
![]()
`;
+ `&size=100x100) {width:100px;mix-blend-mode:multiply}`;
}
},
@@ -130,26 +142,28 @@ module.exports = [
name : 'Note',
icon : 'fas fa-sticky-note',
gen : function(){
- return [
- '> ##### Time to Drop Knowledge',
- '> Use notes to point out some interesting information. ',
- '> ',
- '> **Tables and lists** both work within a note.'
- ].join('\n');
+ return dedent`
+ {{note
+ ##### Time to Drop Knowledge
+ Use notes to point out some interesting information.
+
+ **Tables and lists** both work within a note.
+ }}
+ \n`;
},
},
{
name : 'Descriptive Text Box',
icon : 'fas fa-comment-alt',
gen : function(){
- return [
- '
',
- '##### Time to Drop Knowledge',
- 'Use notes to point out some interesting information. ',
- '',
- '**Tables and lists** both work within a note.',
- '
'
- ].join('\n');
+ return dedent`
+ {{descriptive
+ ##### Time to Drop Knowledge
+ Use descriptive boxes to highlight text that should be read aloud.
+
+ **Tables and lists** both work within a descriptive box.
+ }}
+ \n`;
},
},
{
@@ -242,7 +256,7 @@ module.exports = [
gen : function(){
return dedent`
##### Typical Difficulty Classes
- {{column-count="2"
+ {{column-count:2
| Task Difficulty | DC |
|:----------------|:--:|
| Very easy | 5 |
diff --git a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
index 8a03b0530..f0964e582 100644
--- a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
@@ -1,4 +1,5 @@
const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
const getTOC = (pages)=>{
const add1 = (title, page)=>{
@@ -9,7 +10,7 @@ const getTOC = (pages)=>{
});
};
const add2 = (title, page)=>{
- if(!_.last(res)) add1('', page);
+ if(!_.last(res)) add1(null, page);
_.last(res).children.push({
title : title,
page : page + 1,
@@ -17,8 +18,8 @@ const getTOC = (pages)=>{
});
};
const add3 = (title, page)=>{
- if(!_.last(res)) add1('', page);
- if(!_.last(_.last(res).children)) add2('', page);
+ if(!_.last(res)) add1(null, page);
+ if(!_.last(_.last(res).children)) add2(null, page);
_.last(_.last(res).children).children.push({
title : title,
page : page + 1,
@@ -51,13 +52,21 @@ module.exports = function(brew){
const pages = brew.text.split('\\page');
const TOC = getTOC(pages);
const markdown = _.reduce(TOC, (r, g1, idx1)=>{
- r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
+ if(g1.title !== null) {
+ r.push(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
+ }
if(g1.children.length){
_.each(g1.children, (g2, idx2)=>{
- r.push(` - [${idx1 + 1}.${idx2 + 1} ${g2.title}](#p${g2.page})`);
+ if(g2.title !== null) {
+ r.push(`\t\t - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
+ }
if(g2.children.length){
_.each(g2.children, (g3, idx3)=>{
- r.push(` - [${idx1 + 1}.${idx2 + 1}.${idx3 + 1} ${g3.title}](#p${g3.page})`);
+ if(g2.title !== null) {
+ r.push(`\t\t - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+ } else { // Don't over-indent if no level-2 parent entry
+ r.push(`\t\t - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+ }
});
}
});
@@ -65,8 +74,11 @@ module.exports = function(brew){
return r;
}, []).join('\n');
- return `
-##### Table Of Contents
+ return dedent`
+ {{toc,wide
+ # Table Of Contents
+
${markdown}
-
\n`;
+ }}
+ \n`;
};
diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx
index 94131b1dd..118c21e91 100644
--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -44,12 +44,12 @@ const Homebrew = createClass({
}/>
}/>
}/>
- }/>
+ }/>
}/>
- } />
- } />
- }/>
- }/>
+ }/>
+ }/>
+ }/>
+ }/>
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index d1e749482..b8ee5634b 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -23,19 +23,15 @@ const HomePage = createClass({
getDefaultProps : function() {
return {
brew : {
- text : ''
+ text : '',
},
- welcomeText : '',
- ver : '0.0.0'
+ ver : '0.0.0'
};
-
-
},
getInitialState : function() {
return {
- brew : {
- text : this.props.welcomeText
- }
+ brew : this.props.brew,
+ welcomeText : this.props.brew.text
};
},
handleSave : function(){
@@ -89,7 +85,7 @@ const HomePage = createClass({
-