Added Import/Export To Json Files.

README.md

@@ -67,3 +67,4 @@ Below is a table for all the settings in this plugin
 - ~~Randomization within a note.~~
 - Possibly more Generation type.
 - Better UI
+- JSON Import And Export

esbuild.config.mjs

@@ -38,7 +38,7 @@ const context = await esbuild.context({
 	logLevel: "info",
 	sourcemap: prod ? false : "inline",
 	treeShaking: true,
-	outfile: "fantasy-content-generator/main.js",
+	outfile: "main.js",
 });
 
 if (prod) {

package.json

@@ -5,7 +5,7 @@
 	"main": "main.js",
 	"scripts": {
 		"dev": "node esbuild.config.mjs",
-		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production && copy manifest.json fantasy-content-generator && copy styles.css fantasy-content-generator && zip-build fantasy-content-generator builds",
+		"build": "tsc -noEmit -skipLibCheck && node prod.esbuild.config.mjs production && copy manifest.json fantasy-content-generator && copy styles.css fantasy-content-generator && zip-build fantasy-content-generator builds",
 		"version": "node version-bump.mjs && git add manifest.json versions.json"
 	},
 	"keywords": [],

prod.esbuild.config.mjs

@@ -0,0 +1,49 @@
+import esbuild from "esbuild";
+import process from "process";
+import builtins from "builtin-modules";
+
+const banner =
+`/*
+THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
+if you want to view the source, please visit the github repository of this plugin
+*/
+`;
+
+const prod = (process.argv[2] === "production");
+
+const context = await esbuild.context({
+	banner: {
+		js: banner,
+	},
+	entryPoints: ["main.ts"],
+	bundle: true,
+	external: [
+		"obsidian",
+		"electron",
+		"@codemirror/autocomplete",
+		"@codemirror/collab",
+		"@codemirror/commands",
+		"@codemirror/language",
+		"@codemirror/lint",
+		"@codemirror/search",
+		"@codemirror/state",
+		"@codemirror/view",
+		"@lezer/common",
+		"@lezer/highlight",
+		"@lezer/lr",
+		...builtins,
+	],
+	format: "cjs",
+	target: "es2018",
+	logLevel: "info",
+	sourcemap: prod ? false : "inline",
+	treeShaking: true,
+	outfile: "fantasy-content-generator/main.js",
+});
+
+if (prod) {
+	await context.rebuild();
+	process.exit(0);
+} else {
+	await context.watch();
+}

settings/Datatypes.ts

@@ -1,3 +1,7 @@
+
+import * as fs from 'fs';
+import { Notice } from 'obsidian';
+
 // The possible Options that could be selected durring inline generation
 export const possibleOptions = [
     'Gen-ElfMale',
@@ -161,6 +165,10 @@ export type innGeneratorSettings = {
     rumors: string[]
 }
 
+export interface FileWithPath extends File {
+    path: string
+}
+
 // the interface that uses all 
 export interface FantasyPluginSettings {
     enableCurrency: boolean;
@@ -173,4 +181,30 @@ export interface FantasyPluginSettings {
     groupSettings: groupGenSettings;
     dungeonSettings: dungeonGenSettings;
     inlineCallout: string;
-}
+}
+
+export function importJSON(path: string, callback: (data: object) => void): void {
+    fs.readFile(path, 'utf8', (error, data) => {
+        if (error) {
+            new Notice("Error Importing: " + error);
+            return;
+        }
+        const jsonData = JSON.parse(data);
+        new Notice("Data Successfully Imported!");
+        callback(jsonData);
+    });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function exportJSON(data: any) {
+    const json = JSON.stringify(data);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.download = 'data.json';
+    a.href = url;
+    a.click();
+
+    new Notice("Data Exporting!");
+}

settings/SettingsTab.ts

@@ -1,5 +1,6 @@
 import FantasyPlugin from "main";
-import { PluginSettingTab, App, Setting } from "obsidian";
+import { PluginSettingTab, App, Setting, Platform } from "obsidian";
+import { cityGeneratorSetting, currency, drinkGeneratorSettings, dungeonGenSettings, exportJSON, FileWithPath, groupGenSettings, importJSON, innGeneratorSettings, lootTables } from "./Datatypes";
 import { DEFAULT_SETTINGS } from "./DefaultSetting";
 
 export class SettingTab extends PluginSettingTab {
@@ -20,6 +21,7 @@ export class SettingTab extends PluginSettingTab {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     createSettingsBlock(containerEl: HTMLElement, textA: string, arr: any[], type: string): void {
+        new Setting(containerEl).setName(type + " being used").setDesc("Click 'remove' for any item you want removed from the Array");
         new Setting(containerEl)
             .setName("New Addition:")
             .addTextArea((text) => {
@@ -36,9 +38,6 @@ export class SettingTab extends PluginSettingTab {
                     })
             })
 
-
-        containerEl.createEl("p", { text: "Click 'remove' on a prefix you would like to removed" });
-
         const foldDiv = containerEl.createEl('details', { cls: "OFCGDetails" });
         foldDiv.createEl("summary", { text: type, cls: "OFCGSummary" });
 
@@ -56,7 +55,6 @@ export class SettingTab extends PluginSettingTab {
                 )
 
         }
-
         containerEl.createEl('hr');
     }
 
@@ -66,8 +64,8 @@ export class SettingTab extends PluginSettingTab {
         containerEl.empty();
 
         containerEl.createEl('h1', { text: 'Fantasy Content Generator' });
-
+        const generalSettings = containerEl.createDiv("general")
-        new Setting(containerEl)
+        new Setting(generalSettings)
             .setName('Reset To Defaults')
             .setDesc('Click if you would like to use the default settings again')
             .addButton((btn) => {
@@ -80,7 +78,7 @@ export class SettingTab extends PluginSettingTab {
                     })
             })
 
-        new Setting(containerEl).setName("Inline Generator Callout").setDesc("Set callout character to activate the inline Generator.")
+        new Setting(generalSettings).setName("Inline Generator Callout").setDesc("Set callout character to activate the inline Generator.")
             .addText((text) => {
                 text.setValue(String(this.plugin.settings.inlineCallout));
                 text.onChange(async (value) => {
@@ -91,9 +89,11 @@ export class SettingTab extends PluginSettingTab {
 
         // CURRENCEY SETTINGS //
 
-        containerEl.createEl("h2", { text: "Currency Settings" });
+        const currencyEl = containerEl.createDiv("currencyDiv");
 
-        new Setting(containerEl)
+        new Setting(currencyEl).setHeading().setName("Currency Settings");
+
+        new Setting(currencyEl)
             .setName('Enable Currency for Loot Generation.')
             .setDesc('If you have Currency in your World or game consider Activating this')
             .addToggle((toggle) => {
@@ -107,7 +107,7 @@ export class SettingTab extends PluginSettingTab {
 
         if (this.plugin.settings.enableCurrency) {
 
-            new Setting(containerEl).setName("Occurance Rate:").setDesc("Set How Frequently Loot generates currency as a percentage of 100")
+            new Setting(currencyEl).setName("Occurance Rate:").setDesc("Set How Frequently Loot generates currency as a percentage of 100")
                 .addText((text) => {
                     text.setValue(String(this.plugin.settings.currencyFrequency));
                     text.onChange(async (value) => {
@@ -119,11 +119,53 @@ export class SettingTab extends PluginSettingTab {
                     })
                 })
 
+            if (Platform.isDesktopApp) {
+                const importExportFile = new Setting(currencyEl)
+                    .setName("Import | Export")
+                    .setDesc("Import A Json File With Supported information");
+
+                const inputAppfile = createEl("input", {
+                    attr: {
+                        type: "file",
+                        name: "currency",
+                        accept: ".json",
+                        multiple: false
+                    }
+                });
+
+                inputAppfile.onchange = async () => {
+                    const { files } = inputAppfile;
+                    if (files === null || !files.length) return;
+                    try {
+                        const file = files[0] as FileWithPath;
+                        importJSON(file.path, async (data) => {
+                            this.plugin.settings.currencyTypes = data as currency[];
+                            this.display();
+                            await this.plugin.saveSettings();
+                        });
+
+                    } catch (e) { /* empty */ }
+                }
+
+                importExportFile.addButton((b) => {
+                    b.setButtonText("Choose Import File").setTooltip(
+                        "Import Json File for the Generator"
+                    ).buttonEl.appendChild(inputAppfile)
+                    b.buttonEl.addClass("FCGInput");
+                    b.onClick(() => inputAppfile.click());
+                }).addButton((b) => {
+                    b.setButtonText("Export Section To File").setCta()
+                        .onClick(() => {
+                            exportJSON(this.plugin.settings.currencyTypes);
+                        })
+                });
+            }
+
             const ctext = {
                 name: '',
                 rarity: 'common'
             }
-            new Setting(containerEl)
+            new Setting(currencyEl)
                 .setName("Currency Name:")
                 .addText((text) => {
                     text.onChange((value) => {
@@ -147,10 +189,9 @@ export class SettingTab extends PluginSettingTab {
                         })
                 })
 
-            containerEl.createEl("h4", { text: "Added Currency" });
+            new Setting(currencyEl).setName("Added currency").setDesc("Click Remove on a Currency you would like to Remove");
-            containerEl.createEl("p", { text: "Click remove on a currency you would like to removed" });
 
-            const foldDiv = containerEl.createEl('details', { cls: "OFCGDetails" });
+            const foldDiv = currencyEl.createEl('details', { cls: "OFCGDetails" });
             foldDiv.createEl("summary", { text: "Currency", cls: "OFCGSummary" });
 
             for (let index = 0; index < this.plugin.settings.currencyTypes.length; index++) {
@@ -171,99 +212,108 @@ export class SettingTab extends PluginSettingTab {
         }
 
         // END CURRENCY SETTINGS //
-
+        currencyEl.createEl('hr');
-        containerEl.createEl('hr');
-
         //SETTLEMENT SETTINGS//
 
-        containerEl.createEl("h2", { text: "Settlement Settings" });
+        const settlementDiv = containerEl.createDiv("settlementDiv");
+        new Setting(settlementDiv).setHeading().setName("Settlement Settings");
+        settlementDiv.createEl('br');
 
-        let preText = "";
+        if (Platform.isDesktopApp) {
-        let sufText = "";
+            const importExportFile = new Setting(settlementDiv)
-        containerEl.createEl("h4", { text: "Prefixes being used" });
+                .setName("Import | Export")
-        new Setting(containerEl)
+                .setDesc("Import A Json File With Supported information");
-            .setName("New Prefix:")
+
-            .addTextArea((text) => {
+            const inputAppfile = createEl("input", {
-                text.onChange((value) => {
+                attr: {
-                    preText = value;
+                    type: "file",
-                })
+                    name: "settlement",
-            })
+                    accept: ".json",
-            .addButton((btn) => {
+                    multiple: false
-                btn.setCta().setButtonText("Add")
+                }
-                    .onClick(async () => {
+            });
-                        this.convertStringToArray(preText, this.plugin.settings.citySettings.prefixArray);
+
+            inputAppfile.onchange = async () => {
+                const { files } = inputAppfile;
+                if (files === null || !files.length) return;
+                try {
+                    const file = files[0] as FileWithPath;
+                    importJSON(file.path, async (data) => {
+                        this.plugin.settings.citySettings = data as cityGeneratorSetting;
                         this.display();
                         await this.plugin.saveSettings();
+                    });
+
+                } catch (e) { /* empty */ }
+            }
+
+            importExportFile.addButton((b) => {
+                b.setButtonText("Choose Import File").setTooltip(
+                    "Import Json File for the Generator"
+                ).buttonEl.appendChild(inputAppfile)
+                b.buttonEl.addClass("FCGInput");
+                b.onClick(() => inputAppfile.click());
+            }).addButton((b) => {
+                b.setButtonText("Export Section To File").setCta()
+                    .onClick(() => {
+                        exportJSON(this.plugin.settings.citySettings);
                     })
-            })
+            });
-
-
-        containerEl.createEl("p", { text: "Click 'remove' on a prefix you would like to removed" });
-
-        const foldDiv = containerEl.createEl('details', { cls: "OFCGDetails" });
-        foldDiv.createEl("summary", { text: "Prefixes", cls: "OFCGSummary" });
-
-        for (let index = 0; index < this.plugin.settings.citySettings.prefixArray.length; index++) {
-            new Setting(foldDiv)
-                .setName(this.plugin.settings.citySettings.prefixArray[index])
-                .addButton((btn) => btn
-                    .setCta()
-                    .setButtonText("Remove")
-                    .onClick(async () => {
-                        this.plugin.settings.citySettings.prefixArray.splice(index, 1);
-                        this.display();
-                        await this.plugin.saveSettings();
-                    })
-                )
-
         }
 
-        containerEl.createEl('hr');
+        const preText = "";
-
+        const sufText = "";
-        containerEl.createEl("h4", { text: "Suffixes being used" });
+        this.createSettingsBlock(settlementDiv, preText, this.plugin.settings.citySettings.prefixArray, "Prefixes");
-        new Setting(containerEl)
+        this.createSettingsBlock(settlementDiv, sufText, this.plugin.settings.citySettings.suffixArray, "Suffixes");
-            .setName("New Suffix:")
-            .addTextArea((text) => {
-                text.onChange((value) => {
-                    sufText = value;
-                })
-            })
-            .addButton((btn) => {
-                btn.setCta().setButtonText("Add")
-                    .onClick(async () => {
-                        this.convertStringToArray(sufText, this.plugin.settings.citySettings.suffixArray);
-                        this.display();
-                        await this.plugin.saveSettings();
-                    })
-            })
-
-
-        containerEl.createEl("p", { text: "Click 'remove' on a suffix you would like to removed" });
-
-        const foldDiv2 = containerEl.createEl('details', { cls: "OFCGDetails" });
-        foldDiv2.createEl("summary", { text: "Suffixes", cls: "OFCGSummary" });
-
-        for (let index = 0; index < this.plugin.settings.citySettings.suffixArray.length; index++) {
-            new Setting(foldDiv2)
-                .setName(this.plugin.settings.citySettings.suffixArray[index])
-                .addButton((btn) => btn
-                    .setCta()
-                    .setButtonText("Remove")
-                    .onClick(async () => {
-                        this.plugin.settings.citySettings.suffixArray.splice(index, 1);
-                        this.display();
-                        await this.plugin.saveSettings();
-                    })
-                )
-
-        }
 
         // END SETTLEMENT SETTINGS //
 
-        containerEl.createEl('hr');
-
         // INN'S / TAVERN SETTINGS //
-        containerEl.createEl("h2", { text: "Inn & Tavern Settings" });
+        const innDiv = containerEl.createDiv("innDiv");
+        new Setting(innDiv).setHeading().setName("Inn Settings");
+        innDiv.createEl('br');
+
+        if (Platform.isDesktopApp) {
+            const importExportFile = new Setting(innDiv)
+                .setName("Import | Export")
+                .setDesc("Import A Json File With Supported information");
+
+            const inputAppfile = createEl("input", {
+                attr: {
+                    type: "file",
+                    name: "inn",
+                    accept: ".json",
+                    multiple: false
+                }
+            });
+
+            inputAppfile.onchange = async () => {
+                const { files } = inputAppfile;
+                if (files === null || !files.length) return;
+                try {
+                    const file = files[0] as FileWithPath;
+                    importJSON(file.path, async (data) => {
+                        this.plugin.settings.innSettings = data as innGeneratorSettings;
+                        this.display();
+                        await this.plugin.saveSettings();
+                    });
+
+                } catch (e) { /* empty */ }
+            }
+
+            importExportFile.addButton((b) => {
+                b.setButtonText("Choose Import File").setTooltip(
+                    "Import Json File for the Generator"
+                ).buttonEl.appendChild(inputAppfile)
+                b.buttonEl.addClass("FCGInput");
+                b.onClick(() => inputAppfile.click());
+            }).addButton((b) => {
+                b.setButtonText("Export Section To File").setCta()
+                    .onClick(() => {
+                        exportJSON(this.plugin.settings.innSettings);
+                    })
+            });
+        }
 
         const innPreText = "";
         const innTypeText = "";
@@ -271,52 +321,169 @@ export class SettingTab extends PluginSettingTab {
         const innDescText = "";
         const innRumorText = "";
 
-        containerEl.createEl("h4", { text: "Prefixes being used" });
+        this.createSettingsBlock(innDiv, innPreText, this.plugin.settings.innSettings.prefixes, "Prefixes");
-        this.createSettingsBlock(containerEl, innPreText, this.plugin.settings.innSettings.prefixes, "Prefixes");
+        this.createSettingsBlock(innDiv, innTypeText, this.plugin.settings.innSettings.innType, "Type's");
-
+        this.createSettingsBlock(innDiv, innNounText, this.plugin.settings.innSettings.nouns, "Nouns");
-        containerEl.createEl("h4", { text: "Type's being used" });
+        this.createSettingsBlock(innDiv, innDescText, this.plugin.settings.innSettings.desc, "Description's");
-        this.createSettingsBlock(containerEl, innTypeText, this.plugin.settings.innSettings.innType, "Type's");
+        this.createSettingsBlock(innDiv, innRumorText, this.plugin.settings.innSettings.rumors, "Rumors");
-
-        containerEl.createEl("h4", { text: "Nouns being used" });
-        this.createSettingsBlock(containerEl, innNounText, this.plugin.settings.innSettings.nouns, "Nouns");
-
-        containerEl.createEl("h4", { text: "Description's being used" });
-        this.createSettingsBlock(containerEl, innDescText, this.plugin.settings.innSettings.desc, "Description's");
-
-        containerEl.createEl("h4", { text: "Rumors being used" });
-        this.createSettingsBlock(containerEl, innRumorText, this.plugin.settings.innSettings.rumors, "Rumors");
 
         // END INN'S / TAVERN SETTINGS //
 
         // DRINK SETTINGS //
 
-        containerEl.createEl("h2", { text: "Drink Generator Settings" });
+        const drinkDiv = containerEl.createDiv("drinkDiv");
+        new Setting(drinkDiv).setHeading().setName("Drink Settings");
+        drinkDiv.createEl('br');
+
+        if (Platform.isDesktopApp) {
+            const importExportFile = new Setting(drinkDiv)
+                .setName("Import | Export")
+                .setDesc("Import A Json File With Supported information");
+
+            const inputAppfile = createEl("input", {
+                attr: {
+                    type: "file",
+                    name: "drink",
+                    accept: ".json",
+                    multiple: false
+                }
+            });
+
+            inputAppfile.onchange = async () => {
+                const { files } = inputAppfile;
+                if (files === null || !files.length) return;
+                try {
+                    const file = files[0] as FileWithPath;
+                    importJSON(file.path, async (data) => {
+                        this.plugin.settings.drinkSettings = data as drinkGeneratorSettings;
+                        this.display();
+                        await this.plugin.saveSettings();
+                    });
+
+                } catch (e) { /* empty */ }
+            }
+
+            importExportFile.addButton((b) => {
+                b.setButtonText("Choose Import File").setTooltip(
+                    "Import Json File for the Generator"
+                ).buttonEl.appendChild(inputAppfile)
+                b.buttonEl.addClass("FCGInput");
+                b.onClick(() => inputAppfile.click());
+            }).addButton((b) => {
+                b.setButtonText("Export Section To File").setCta()
+                    .onClick(() => {
+                        exportJSON(this.plugin.settings.drinkSettings);
+                    })
+            });
+        }
 
         const drinkNounText = "";
         const drinkAdjText = "";
 
-        containerEl.createEl("h4", { text: "Adjectives being used" });
+        this.createSettingsBlock(drinkDiv, drinkAdjText, this.plugin.settings.drinkSettings.adj, "Adjectives");
-        this.createSettingsBlock(containerEl, drinkAdjText, this.plugin.settings.drinkSettings.adj, "Adjectives");
+        this.createSettingsBlock(drinkDiv, drinkNounText, this.plugin.settings.drinkSettings.nouns, "Nouns");
-
-        containerEl.createEl("h4", { text: "Nouns being used" });
-        this.createSettingsBlock(containerEl, drinkNounText, this.plugin.settings.drinkSettings.nouns, "Nouns");
 
         // LOOT SETTINGS //
 
-        containerEl.createEl("h2", { text: "Loot Generator Settings" });
+        const lootDiv = containerEl.createDiv("lootDiv");
+        new Setting(lootDiv).setHeading().setName("Loot Settings");
+        lootDiv.createEl('br');
+
+        if (Platform.isDesktopApp) {
+            const importExportFile = new Setting(lootDiv)
+                .setName("Import | Export")
+                .setDesc("Import A Json File With Supported information");
+
+            const inputAppfile = createEl("input", {
+                attr: {
+                    type: "file",
+                    name: "loot",
+                    accept: ".json",
+                    multiple: false
+                }
+            });
+
+            inputAppfile.onchange = async () => {
+                const { files } = inputAppfile;
+                if (files === null || !files.length) return;
+                try {
+                    const file = files[0] as FileWithPath;
+                    importJSON(file.path, async (data) => {
+                        this.plugin.settings.lootSettings = data as lootTables;
+                        this.display();
+                        await this.plugin.saveSettings();
+                    });
+
+                } catch (e) { /* empty */ }
+            }
+
+            importExportFile.addButton((b) => {
+                b.setButtonText("Choose Import File").setTooltip(
+                    "Import Json File for the Generator"
+                ).buttonEl.appendChild(inputAppfile)
+                b.buttonEl.addClass("FCGInput");
+                b.onClick(() => inputAppfile.click());
+            }).addButton((b) => {
+                b.setButtonText("Export Section To File").setCta()
+                    .onClick(() => {
+                        exportJSON(this.plugin.settings.lootSettings);
+                    })
+            });
+        }
 
         const lootNounText = "";
         const lootAdjText = "";
 
-        containerEl.createEl("h4", { text: "Adjectives being used" });
+        this.createSettingsBlock(lootDiv, lootAdjText, this.plugin.settings.drinkSettings.adj, "Adjectives");
-        this.createSettingsBlock(containerEl, lootAdjText, this.plugin.settings.drinkSettings.adj, "Adjectives");
+        this.createSettingsBlock(lootDiv, lootNounText, this.plugin.settings.drinkSettings.nouns, "Nouns");
-
-        containerEl.createEl("h4", { text: "Nouns being used" });
-        this.createSettingsBlock(containerEl, lootNounText, this.plugin.settings.drinkSettings.nouns, "Nouns");
 
         // GROUP SETTINGS //
 
-        containerEl.createEl("h2", { text: "Group Generator Settings" });
+        const groupDiv = containerEl.createDiv("groupDiv");
+        new Setting(groupDiv).setHeading().setName("Group Settings");
+        groupDiv.createEl('br');
+
+        if (Platform.isDesktopApp) {
+            const importExportFile = new Setting(groupDiv)
+                .setName("Import | Export")
+                .setDesc("Import A Json File With Supported information");
+
+            const inputAppfile = createEl("input", {
+                attr: {
+                    type: "file",
+                    name: "group",
+                    accept: ".json",
+                    multiple: false
+                }
+            });
+
+            inputAppfile.onchange = async () => {
+                const { files } = inputAppfile;
+                if (files === null || !files.length) return;
+                try {
+                    const file = files[0] as FileWithPath;
+                    importJSON(file.path, async (data) => {
+                        this.plugin.settings.groupSettings = data as groupGenSettings;
+                        this.display();
+                        await this.plugin.saveSettings();
+                    });
+
+                } catch (e) { /* empty */ }
+            }
+
+            importExportFile.addButton((b) => {
+                b.setButtonText("Choose Import File").setTooltip(
+                    "Import Json File for the Generator"
+                ).buttonEl.appendChild(inputAppfile)
+                b.buttonEl.addClass("FCGInput");
+                b.onClick(() => inputAppfile.click());
+            }).addButton((b) => {
+                b.setButtonText("Export Section To File").setCta()
+                    .onClick(() => {
+                        exportJSON(this.plugin.settings.groupSettings);
+                    })
+            });
+        }
 
         const groupAdjectives = ''
         const groupNouns = ''
@@ -324,24 +491,59 @@ export class SettingTab extends PluginSettingTab {
         const groupTypes = ''
         const groupSingleDescriptors = ''
 
-        containerEl.createEl("h4", { text: "Adjectives being used" });
+        this.createSettingsBlock(groupDiv, groupAdjectives, this.plugin.settings.groupSettings.adj, "Adjectives");
-        this.createSettingsBlock(containerEl, groupAdjectives, this.plugin.settings.groupSettings.adj, "Adjectives");
+        this.createSettingsBlock(groupDiv, groupNouns, this.plugin.settings.groupSettings.nouns, "Nouns");
-
+        this.createSettingsBlock(groupDiv, groupNounsPlural, this.plugin.settings.groupSettings.nounsP, "Plural Nouns");
-        containerEl.createEl("h4", { text: "Nouns being used" });
+        this.createSettingsBlock(groupDiv, groupTypes, this.plugin.settings.groupSettings.groupTypes, "Types");
-        this.createSettingsBlock(containerEl, groupNouns, this.plugin.settings.groupSettings.nouns, "Nouns");
+        this.createSettingsBlock(groupDiv, groupSingleDescriptors, this.plugin.settings.groupSettings.singleDescriptors, "Descriptors");
-
-        containerEl.createEl("h4", { text: "Plural Nouns being used" });
-        this.createSettingsBlock(containerEl, groupNounsPlural, this.plugin.settings.groupSettings.nounsP, "Plural Nouns");
-
-        containerEl.createEl("h4", { text: "Group Types being used" });
-        this.createSettingsBlock(containerEl, groupTypes, this.plugin.settings.groupSettings.groupTypes, "Types");
-
-        containerEl.createEl("h4", { text: "Single Descriptors being used" });
-        this.createSettingsBlock(containerEl, groupSingleDescriptors, this.plugin.settings.groupSettings.singleDescriptors, "Descriptors");
 
         // END GROUP SETTINGS //
 
-        containerEl.createEl("h2", { text: "Dungeon Generator Settings" });
+        const dungDiv = containerEl.createDiv("dungDiv");
+        new Setting(dungDiv).setHeading().setName("Dungeon Settings");
+        dungDiv.createEl('br');
+
+        if (Platform.isDesktopApp) {
+            const importExportFile = new Setting(dungDiv)
+                .setName("Import | Export")
+                .setDesc("Import A Json File With Supported information");
+
+            const inputAppfile = createEl("input", {
+                attr: {
+                    type: "file",
+                    name: "dungeon",
+                    accept: ".json",
+                    multiple: false
+                }
+            });
+
+            inputAppfile.onchange = async () => {
+                const { files } = inputAppfile;
+                if (files === null || !files.length) return;
+                try {
+                    const file = files[0] as FileWithPath;
+                    importJSON(file.path, async (data) => {
+                        this.plugin.settings.dungeonSettings = data as dungeonGenSettings;
+                        this.display();
+                        await this.plugin.saveSettings();
+                    });
+
+                } catch (e) { /* empty */ }
+            }
+
+            importExportFile.addButton((b) => {
+                b.setButtonText("Choose Import File").setTooltip(
+                    "Import Json File for the Generator"
+                ).buttonEl.appendChild(inputAppfile)
+                b.buttonEl.addClass("FCGInput");
+                b.onClick(() => inputAppfile.click());
+            }).addButton((b) => {
+                b.setButtonText("Export Section To File").setCta()
+                    .onClick(() => {
+                        exportJSON(this.plugin.settings.dungeonSettings);
+                    })
+            });
+        }
 
         const dungAdjectives = ''
         const dungNouns = ''
@@ -349,20 +551,11 @@ export class SettingTab extends PluginSettingTab {
         const dungLocations = ''
         const dungRandomDesc = ''
 
-        containerEl.createEl("h4", { text: "Adjectives being used" });
+        this.createSettingsBlock(dungDiv, dungAdjectives, this.plugin.settings.dungeonSettings.adjectives, "Adjectives");
-        this.createSettingsBlock(containerEl, dungAdjectives, this.plugin.settings.dungeonSettings.adjectives, "Adjectives");
+        this.createSettingsBlock(dungDiv, dungNouns, this.plugin.settings.groupSettings.nouns, "Nouns");
-
+        this.createSettingsBlock(dungDiv, dungLocations, this.plugin.settings.dungeonSettings.locations, "Locations");
-        containerEl.createEl("h4", { text: "Nouns being used" });
+        this.createSettingsBlock(dungDiv, dungTypes, this.plugin.settings.dungeonSettings.dungeonTypes, "Types");
-        this.createSettingsBlock(containerEl, dungNouns, this.plugin.settings.groupSettings.nouns, "Nouns");
+        this.createSettingsBlock(dungDiv, dungRandomDesc, this.plugin.settings.dungeonSettings.randomDesc, "Descriptors");
-
-        containerEl.createEl("h4", { text: "Locations being used" });
-        this.createSettingsBlock(containerEl, dungLocations, this.plugin.settings.dungeonSettings.locations, "Locations");
-
-        containerEl.createEl("h4", { text: "Dungeon Types being used" });
-        this.createSettingsBlock(containerEl, dungTypes, this.plugin.settings.dungeonSettings.dungeonTypes, "Types");
-
-        containerEl.createEl("h4", { text: "Random Descriptions being used" });
-        this.createSettingsBlock(containerEl, dungRandomDesc, this.plugin.settings.dungeonSettings.randomDesc, "Descriptors");
     }
 
 }

styles.css

@@ -1,7 +1,9 @@
 .OFCGDetails {
-    border: 1px solid #aaa;
+    border: 1px solid #272727;
-    border-radius: 4px;
+        box-shadow: 0px 12px 0px 0px rgba(0, 0, 0, 0.37);
+        background-color: #313131;
     padding: 0.5em 0.5em 0.5em;
+    margin: 1em;
 }
 
 .OFCGSSummary {
@@ -17,4 +19,7 @@
 .OFCGDetails[open] summary {
     border-bottom: 1px solid #aaa;
     margin-bottom: 0.5em;
+}
+.FCGInput>input[type="file"] {
+    display: none;
 }