diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 213e35f71..20f084c28 100644 --- a/client/homebrew/editor/editor.jsx +++ b/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')); diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js index 4a0e300eb..3ee91906e 100644 --- a/client/homebrew/editor/snippetbar/snippets/snippets.js +++ b/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)', diff --git a/client/homebrew/editor/snippetbar/snippets/watercolor.gen.js b/client/homebrew/editor/snippetbar/snippets/watercolor.gen.js new file mode 100644 index 000000000..735a35602 --- /dev/null +++ b/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`; +}; diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index 8b4026867..e17a9038e 100644 --- a/themes/5ePhb.style.less +++ b/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-bottom : 40px; + margin-top : 0.66cm; + 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{ - margin-bottom : 10px; + &.decoration { + 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; } } //***************************** diff --git a/themes/assets/assets.less b/themes/assets/assets.less index f159c9fc6..8790b1e59 100644 --- a/themes/assets/assets.less +++ b/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'); diff --git a/themes/assets/classTableDecoration.png b/themes/assets/classTableDecoration.png new file mode 100644 index 000000000..3d8346c67 Binary files /dev/null and b/themes/assets/classTableDecoration.png differ diff --git a/themes/assets/watercolor/watercolor1.png b/themes/assets/watercolor/watercolor1.png new file mode 100644 index 000000000..5855e6aff Binary files /dev/null and b/themes/assets/watercolor/watercolor1.png differ diff --git a/themes/assets/watercolor/watercolor10.png b/themes/assets/watercolor/watercolor10.png new file mode 100644 index 000000000..96c38892e Binary files /dev/null and b/themes/assets/watercolor/watercolor10.png differ diff --git a/themes/assets/watercolor/watercolor11.png b/themes/assets/watercolor/watercolor11.png new file mode 100644 index 000000000..e43ab4f0e Binary files /dev/null and b/themes/assets/watercolor/watercolor11.png differ diff --git a/themes/assets/watercolor/watercolor12.png b/themes/assets/watercolor/watercolor12.png new file mode 100644 index 000000000..f901dd46a Binary files /dev/null and b/themes/assets/watercolor/watercolor12.png differ diff --git a/themes/assets/watercolor/watercolor2.png b/themes/assets/watercolor/watercolor2.png new file mode 100644 index 000000000..3ce39c171 Binary files /dev/null and b/themes/assets/watercolor/watercolor2.png differ diff --git a/themes/assets/watercolor/watercolor3.png b/themes/assets/watercolor/watercolor3.png new file mode 100644 index 000000000..2b6600e97 Binary files /dev/null and b/themes/assets/watercolor/watercolor3.png differ diff --git a/themes/assets/watercolor/watercolor4.png b/themes/assets/watercolor/watercolor4.png new file mode 100644 index 000000000..d7b91c377 Binary files /dev/null and b/themes/assets/watercolor/watercolor4.png differ diff --git a/themes/assets/watercolor/watercolor5.png b/themes/assets/watercolor/watercolor5.png new file mode 100644 index 000000000..8b0d08a10 Binary files /dev/null and b/themes/assets/watercolor/watercolor5.png differ diff --git a/themes/assets/watercolor/watercolor6.png b/themes/assets/watercolor/watercolor6.png new file mode 100644 index 000000000..f82bc3a3e Binary files /dev/null and b/themes/assets/watercolor/watercolor6.png differ diff --git a/themes/assets/watercolor/watercolor7.png b/themes/assets/watercolor/watercolor7.png new file mode 100644 index 000000000..c49bcbafe Binary files /dev/null and b/themes/assets/watercolor/watercolor7.png differ diff --git a/themes/assets/watercolor/watercolor8.png b/themes/assets/watercolor/watercolor8.png new file mode 100644 index 000000000..bfc82f227 Binary files /dev/null and b/themes/assets/watercolor/watercolor8.png differ diff --git a/themes/assets/watercolor/watercolor9.png b/themes/assets/watercolor/watercolor9.png new file mode 100644 index 000000000..c001f2dee Binary files /dev/null and b/themes/assets/watercolor/watercolor9.png differ