Themes list to use object instead of array.

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -30,11 +30,6 @@ const MetadataEditor = createClass({
 		};
 	},
 
-	getThemeData : function(renderer, theme){
-
-		return Themes[_.upperFirst(renderer)].find((x)=>x.path == theme);
-	},
-
 	handleFieldChange : function(name, e){
 		this.props.onChange(_.merge({}, this.props.metadata, {
 			[name] : e.target.value
@@ -136,7 +131,8 @@ const MetadataEditor = createClass({
 
 	renderThemeDropdown : function(){
 		const listThemes = (renderer)=>{
-			return _.map(Themes[renderer], (theme)=>{
+			return _.map(_.values(Themes[renderer]), (theme)=>{
+				console.log(theme);
 				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
 					{`${theme.renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
@@ -144,7 +140,7 @@ const MetadataEditor = createClass({
 			});
 		};
 
-		const currentTheme = this.getThemeData(this.props.metadata.renderer, this.props.metadata.theme);
+		const currentTheme = Themes[this.props.metadata.renderer][this.props.metadata.theme];
 		let dropdown;
 
 		if(this.props.metadata.renderer == 'legacy') {

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -6,9 +6,12 @@ const cx    = require('classnames');
 
 //Import all themes
 
+const ThemesSettings = require('themes/themes.json');
+
 const Themes = {};
 Themes['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
 Themes['V3_5ePHB']     = require('themes/V3/5ePHB/snippets.js');
+Themes['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
 
 const execute = function(val, brew){
 	if(_.isFunction(val)) return val(brew);
@@ -42,7 +45,8 @@ const Snippetbar = createClass({
 	componentDidMount : async function() {
 		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
 		const themePath    = this.props.theme ?? '5ePHB';
-		const snippets = Themes[`${rendererPath}_${themePath}`];
+		let snippets = Themes[`${rendererPath}_${themePath}`];
+		snippets = this.compileSnippets(rendererPath, themePath, snippets);
 		this.setState({
 			snippets : snippets
 		});
@@ -52,13 +56,29 @@ const Snippetbar = createClass({
 		if(prevProps.renderer != this.props.renderer) {
 			const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
 			const themePath    = this.props.theme ?? '5ePHB';
-			const snippets = Themes[`${rendererPath}_${themePath}`];
+			let snippets = Themes[`${rendererPath}_${themePath}`];
+			snippets = this.compileSnippets(rendererPath, themePath, snippets);
 			this.setState({
 				snippets : snippets
 			});
 		}
 	},
 
+	compileSnippets : function(rendererPath, themePath, snippets) {
+		let compiledSnippets = snippets;
+		console.log(ThemesSettings);
+		console.log("rendererpath:");
+		console.log(rendererPath);
+		console.log("themepath");
+		console.log(themePath);
+		const baseThemePath = ThemesSettings[rendererPath][themePath].baseTheme;
+		if(baseThemePath) {
+			compiledSnippets = _.merge(compiledSnippets, Themes[`${rendererPath}_${baseThemePath}`]);
+			this.compileSnippets(rendererPath, themePath, compiledSnippets);
+		}
+		return compiledSnippets;
+	},
+
 	handleSnippetClick : function(injectedText){
 		this.props.onInject(injectedText);
 	},

scripts/buildHomebrew.js

@@ -45,13 +45,13 @@ fs.emptyDirSync('./build');
 	//v==----------------------------- COMPILE THEMES --------------------------------==v//
 
 	// Update list of all Theme files
-	const themes = { Legacy: [], V3: [] };
+	const themes = { Legacy: {}, V3: {} };
 
 	let themeFiles = fs.readdirSync('./themes/Legacy');
 	for (dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
 		themeData.path = dir;
-		themes.Legacy.push(themeData);
+		themes.Legacy[dir] = (themeData);
 		//fs.copy(`./themes/Legacy/${dir}/dropdownTexture.png`, `./build/themes/Legacy/${dir}/dropdownTexture.png`);
 		const src = `./themes/Legacy/${dir}/style.less`;
 		((outputDirectory)=>{
@@ -68,7 +68,7 @@ fs.emptyDirSync('./build');
 	for (dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
 		themeData.path = dir;
-		themes.V3.push(themeData);
+		themes.V3[dir] = (themeData);
 		fs.copy(`./themes/V3/${dir}/dropdownTexture.png`, `./build/themes/V3/${dir}/dropdownTexture.png`);
 		const src = `./themes/V3/${dir}/style.less`;
 	  ((outputDirectory)=>{

themes/V3/5ePHB/style.less

@@ -1,9 +1,13 @@
 @import (less) './themes/fonts/5e/fonts.less';
 @import (less) './themes/assets/assets.less';
 
+:root {
+	--noteGreen : red; // Pastel green
+}
+
 //Colors
 @background            : #EEE5CE; // Light parchment
-@noteGreen             : #e0e5c1; // Pastel green
+@noteGreen            : #e0e5c1; // Pastel green
 @headerUnderline       : #c9ad6a; // Gold
 @horizontalRule        : #9c2b1b; // Maroon
 @headerText            : #58180D; // Dark maroon
@@ -211,7 +215,7 @@ body {
 					padding : 0.14em 0.4em;
 				}
 				&:nth-child(odd){
-					background-color : @noteGreen;
+					background-color : var(--noteGreen);
 				}
 			}
 		}
@@ -221,7 +225,7 @@ body {
 	// *****************************/
 	.note{
 		.useSansSerif();
-		background-color    : @noteGreen;
+		background-color    : var(--noteGreen);
 		border-style        : solid;
 		border-width        : 1px;
 		border-image        : @noteBorderImage 12 stretch;

themes/themes.json

@@ -1,24 +1,24 @@
 {
-  "Legacy": [
+  "Legacy": {
-    {
+    "5ePHB": {
       "name": "5e PHB",
       "renderer": "legacy",
       "baseTheme": false,
       "path": "5ePHB"
     }
-  ],
+  },
-  "V3": [
+  "V3": {
-    {
+    "5eDMG": {
       "name": "5e DMG",
       "renderer": "V3",
       "baseTheme": "5ePHB",
       "path": "5eDMG"
     },
-    {
+    "5ePHB": {
       "name": "5e PHB",
       "renderer": "V3",
       "baseTheme": false,
       "path": "5ePHB"
     }
-  ]
+  }
 }