From 51116efba7aa9c911177e3cc86809b7f2378fbd3 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 10 Aug 2021 20:56:28 -0500
Subject: [PATCH] Add Blended Watercolor Background Image

Add a snippet to create a nice watercolor background for use behind other images.  Includes injection syntax which includes absolute position, hue-rotate, mix-blend-mode, and opacity.

Chooses an image randomly from an Imgur album.  All images created by me (and open to creating more/making adjustments).

v3 only.

Could be improved by cycling through images rather than choosing randomly.
---
 .../editor/snippetbar/snippets/snippets.js    |  9 +++++++--
 .../snippetbar/snippets/watercolor.gen.js     | 20 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 client/homebrew/editor/snippetbar/snippets/watercolor.gen.js

diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js
index b3be55914..7aa2c2208 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 = [
@@ -131,8 +132,12 @@ module.exports = [
 			{
 				name : 'Class Table Decoration',
 				icon : 'fas fa-award',
-				gen  : dedent`\n
-					![ClassTable Decoration](https://i.imgur.com/xYVVT7e.png) {position:absolute,top:0px,right:0px,width:380px}`
+				gen  : `\n![ClassTable Decoration](https://i.imgur.com/xYVVT7e.png) {position:absolute,top:0px,right:0px,width:380px}`
+			},
+			{
+				name : 'Watercolor Splatter',
+				icon : 'fas fa-fill-drip',
+				gen  : watercolorGen,
 			},
 		]
 	},
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..17be660f8
--- /dev/null
+++ b/client/homebrew/editor/snippetbar/snippets/watercolor.gen.js
@@ -0,0 +1,20 @@
+const _ = require('lodash');
+
+const watercolorBG = [
+	'https://i.imgur.com/UPUX4zG.png',
+	'https://i.imgur.com/Q6Uquv9.png',
+	'https://i.imgur.com/UOtaJpJ.png',
+	'https://i.imgur.com/Wy2DVk3.png',
+	'https://i.imgur.com/IempVlg.png',
+    'https://i.imgur.com/iJ1ddgd.png',
+	'https://i.imgur.com/qg4an04.png',
+	'https://i.imgur.com/ogGTcCh.png',
+	'https://i.imgur.com/itBD19A.png',
+	'https://i.imgur.com/tbbycAt.png',
+	'https://i.imgur.com/1SVWpGR.png',
+	'https://i.imgur.com/wC1zkuJ.png'
+];
+
+module.exports = ()=>{
+	return `\n![watercolor bg](${_.sample(watercolorBG)}) {watercolor,position:absolute,top:0px,left:0px,width:240px,filter:hue-rotate(0deg),mix-blend-mode:multiply,opacity:80%}\n`
+};
\ No newline at end of file