From 64d133f8f63cc1a84ec1d65ea184c687b31b3156 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 19 Jul 2021 20:04:25 -0400 Subject: [PATCH 1/3] Definition List to Markdown Extension. New syntax. --- .../editor/snippetbar/snippets/magic.gen.js | 10 ++--- .../snippetbar/snippets/monsterblock.gen.js | 14 +++---- shared/naturalcrit/markdown.js | 42 +++++++++++++++++-- themes/5ePhb.style.less | 26 +++++++----- 4 files changed, 65 insertions(+), 27 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippets/magic.gen.js b/client/homebrew/editor/snippetbar/snippets/magic.gen.js index a7765e979..caea3c4af 100644 --- a/client/homebrew/editor/snippetbar/snippets/magic.gen.js +++ b/client/homebrew/editor/snippetbar/snippets/magic.gen.js @@ -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/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js index a8c287c93..37784f740 100644 --- a/shared/naturalcrit/markdown.js +++ b/shared/naturalcrit/markdown.js @@ -74,7 +74,7 @@ const mustacheSpans = { const mustacheDivs = { name : 'mustacheDivs', level : 'block', - start(src) { return src.match(/^ *{{[^{]/)?.index; }, // Hint to Marked.js to stop and check for a match + start(src) { return src.match(/^ *{{[^{]/m)?.index; }, // Hint to Marked.js to stop and check for a match tokenizer(src, tokens) { const completeBlock = /^ *{{.*\n *}}/s; // Regex for the complete token const blockRegex = /^ *{{(?:="[\w,\-. ]*"|[^"'{}\s])*$|^ *}}$/gm; @@ -116,7 +116,43 @@ const mustacheDivs = { } }; -Markdown.use({ extensions: [mustacheSpans, mustacheDivs] }); +const definitionLists = { + name : 'definitionLists', + level : 'block', + start(src) { return src.match(/^.*?::.*/m)?.index; }, // Hint to Marked.js to stop and check for a match + tokenizer(src, tokens) { + const regex = /^([^\n]*?)::([^\n]*)/ym; + let match; + let endIndex = 0; + const definitions = []; + //if(!src.match(/^[^\n]*?::/)) {console.log('return'); return;} + while (match = regex.exec(src)) { + definitions.push({ + dt : this.inlineTokens(match[1].trim()), + dd : this.inlineTokens(match[2].trim()) + }); + //console.log(regexl) + endIndex = regex.lastIndex; + } + if(definitions.length) { + return { + type : 'definitionLists', + raw : src.slice(0, endIndex), + definitions + }; + } + }, + renderer(token) { + return `
+ ${token.definitions.reduce((html, def)=>{ + return `${html}
${this.parseInline(def.dt)}
` + + `
${this.parseInline(def.dd)}
\n`; + }, '')} +
`; + } +}; + +Markdown.use({ extensions: [mustacheSpans, mustacheDivs, definitionLists] }); //Fix local links in the Preview iFrame to link inside the frame renderer.link = function (href, title, text) { @@ -216,8 +252,6 @@ module.exports = { render : (rawBrewText)=>{ rawBrewText = rawBrewText.replace(/^\\column$/gm, `
`) .replace(/^(:+)$/gm, (match)=>`${`
`.repeat(match.length)}\n`) - .replace(/(?:^|>) *:([^:\n]*):([^\n]*)\n/gm, (match, term, def)=>`
${Markdown.parseInline(term)}
${def}
`) - .replace(/(
.*<\/dt>
.*<\/dd>\n?)+/gm, `
$1
\n\n`) .replace(/^}}/gm, '\n}}') .replace(/^({{[^\n]*)$/gm, '$1\n'); return Markdown( diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index ce27a89e9..cd37bc185 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -283,11 +283,6 @@ body { dl { .useSansSerif(); color : @headerText; - padding-left :1.3em; - text-indent :-1.3em; - } - dd { - text-indent : 0px; } // Monster Ability table @@ -581,17 +576,26 @@ body { // * DEFINITION LISTS // *****************************/ .page { - // dl { - // margin-top: 10px; - // } + dl { + line-height : 1.3em; + padding-left : 1em; + text-indent : -1em; + } + dl + p { + margin-top: 0.5em; + } + p + dl { + margin-top: -0.5em; + } dt { float: left; //clear: left; //Doesn't seem necessary margin-right: 5px; } - // dd { - // margin-left: 0px; - // } + dd { + margin-left : 0px; + text-indent : 0px; + } } //***************************** From 3ed4ceb7a343ceb45789dcde6db2f6bcf920c465 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 20 Jul 2021 19:50:23 -0400 Subject: [PATCH 2/3] Fix description box snippet --- client/homebrew/editor/snippetbar/snippets/snippets.js | 4 ++-- themes/5ePhb.style.less | 9 ++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js index fca5a539b..42039dfc0 100644 --- a/client/homebrew/editor/snippetbar/snippets/snippets.js +++ b/client/homebrew/editor/snippetbar/snippets/snippets.js @@ -159,12 +159,12 @@ module.exports = [ icon : 'fas fa-comment-alt', gen : function(){ return [ - '
', + '{{descriptive', '##### Time to Drop Knowledge', 'Use notes to point out some interesting information. ', '', '**Tables and lists** both work within a note.', - '
' + '}}' ].join('\n'); }, }, diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index cd37bc185..979856167 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -464,7 +464,7 @@ body { // ************************************/ .page .descriptive{ display : block-inline; - margin-bottom : 1em; + margin-top : 1.3em; background-color : #faf7ea; font-family : ScalySansRemake; border-style : solid; @@ -472,6 +472,10 @@ body { border-image : @descriptiveBoxImage 12 stretch; border-image-outset : 4px; box-shadow : 0px 0px 6px #faf7ea; + padding : 0.1em; + & + * { + margin-top : 1.3em; + } p{ display : block; padding-bottom : 0px; @@ -480,6 +484,9 @@ body { p + p { padding-top : .8em; } + p:last-of-type { + margin-bottom : 0em; + } em { font-family : ScalySansRemake; font-style : italic; From 8f34e8bb2d79af5d47c7af0848d5e905582d8bf4 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 20 Jul 2021 23:32:49 -0400 Subject: [PATCH 3/3] Change note block to div, restyle notes and descript boxes --- .../editor/snippetbar/snippets/snippets.js | 30 ++-- themes/5ePhb.style.less | 129 +++++++++--------- 2 files changed, 84 insertions(+), 75 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js index 42039dfc0..6cb04e610 100644 --- a/client/homebrew/editor/snippetbar/snippets/snippets.js +++ b/client/homebrew/editor/snippetbar/snippets/snippets.js @@ -146,26 +146,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 [ - '{{descriptive', - '##### 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`; }, }, { diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index 979856167..17d27d00a 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -19,9 +19,12 @@ body { font-family : ScalySansRemake; font-size : 0.325cm; line-height : 1.2em; - p,dl,ul { + p,dl,ul,ol { line-height : 1.2em; } + ul, ol { + padding-left : 1em; + } em{ font-style : italic; } @@ -64,10 +67,10 @@ body { // *****************************/ p{ overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS - margin-bottom : 1em; + margin-bottom : 0.8em; line-height : 1.3em; &+p{ - margin-top : -1em; + margin-top : -0.8em; } } ul{ @@ -194,31 +197,75 @@ body { //***************************** // * NOTE // *****************************/ - blockquote{ + .note{ + &::before{ + content : ""; + box-sizing : border-box; + border-style : solid; + border-width : 11px; + border-image : @noteBorderImage 12; + border-image-outset : 9px 0px; + box-shadow : 1px 4px 14px #888; + position : absolute; + width : 100%; + height : 100%; + top : 0; + left : 0; + } .useSansSerif(); - box-sizing : border-box; - margin-bottom : 1em; - padding : 5px 10px; + position : relative; + margin-top : 1.3em; + margin-left : -0.1em; + margin-right : -0.1em; background-color : @noteGreen; - border-style : solid; - border-width : 11px; - border-image : @noteBorderImage 11; - border-image-outset : 9px 0px; - box-shadow : 1px 4px 14px #888; - -webkit-transform : translateZ(0); //Prevents shadows from breaking across columns - p, ul{ - font-size : 0.352cm; - line-height : 1.1em; + padding : 0.5em 0.6em; + & + * { + margin-top : 1.3em; + } + p{ + display : block; + padding-bottom : 0px; + } + p + p { + padding-top : .8em; + } + :last-child { + margin-bottom : 0em; } } - //If a note starts a column, give it space at the top to render border - pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote { - margin-top : 13px; + //************************************ + // * DESCRIPTIVE TEXT BOX + // ************************************/ + .descriptive{ + .useSansSerif(); + display : block-inline; + margin-top : 1.4em; + background-color : #faf7ea; + font-family : ScalySansRemake; + border-style : solid; + border-width : 7px; + border-image : @descriptiveBoxImage 12 stretch; + border-image-outset : 4px; + box-shadow : 0px 0px 6px #faf7ea; + padding : 0.1em; + & + * { + margin-top : 1.4em; + } + p{ + display : block; + padding-bottom : 0px; + line-height : 1.5em; + } + p + p { + padding-top : .8em; + } + :last-child { + margin-bottom : 0em; + } } //***************************** // * MONSTER STAT BLOCK // *****************************/ - .monster { &.frame { border-style : solid; @@ -459,47 +506,6 @@ body { margin-bottom : 10px; } } -//************************************ -// * DESCRIPTIVE TEXT BOX -// ************************************/ -.page .descriptive{ - display : block-inline; - margin-top : 1.3em; - background-color : #faf7ea; - font-family : ScalySansRemake; - border-style : solid; - border-width : 7px; - border-image : @descriptiveBoxImage 12 stretch; - border-image-outset : 4px; - box-shadow : 0px 0px 6px #faf7ea; - padding : 0.1em; - & + * { - margin-top : 1.3em; - } - p{ - display : block; - padding-bottom : 0px; - line-height : 1.5em; - } - p + p { - padding-top : .8em; - } - p:last-of-type { - margin-bottom : 0em; - } - em { - font-family : ScalySansRemake; - font-style : italic; - } - strong { - font-family : ScalySansRemake; - font-weight : 800; - letter-spacing : -0.02em; - } -} -.page pre+.descriptive{ - margin-top : 8px; -} //***************************** // * TABLE OF CONTENTS // *****************************/ @@ -570,6 +576,7 @@ body { .page { .block { break-inside : avoid; + -webkit-transform : translateZ(0); //Prevents shadows from breaking across columns } .inline { display : inline-block;