Merge branch 'hotfix/2.20.10' into develop

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "2.20.8",
+	"version": "2.20.10",
 	"name": "harmless_key",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Harmless Key",

src/components/ContentSideRight.vue

@@ -72,7 +72,7 @@
 		</hk-card>
 
 		<!-- HOMEBREW CREATION -->
-		<hk-card v-if="false">
+		<hk-card>
 			<div
 				slot="image"
 				class="card-image"
@@ -82,15 +82,16 @@
 			</div>
 			<div class="card-body">
 				<p class="text-center">
-					Need a free adventure template, or help forming the basic idea of your adventure?
+					Need a free adventure template, homebrew content or DMing inspiration?
 				</p>
 				<a
 					class="btn btn-block btn-sm"
 					href="http://homebrewcreation.com"
 					rel="noopener"
 					target="_blank"
-					>Start creating</a
 				>
+					Checkout HBC <hk-icon icon="fas fa-external-link" class="ml-2" />
+					</a>
 			</div>
 		</hk-card>
 

src/components/Footer.vue

@@ -81,6 +81,7 @@
 							<li><router-link to="/tools/encounter-builder">Encounter builder</router-link></li>
 							<li><router-link to="/tools/monster-creator">Monster creator</router-link></li>
 							<li><router-link to="/tools/spell-creator">Spell creator</router-link></li>
+							<li><router-link to="/tools/character-sync">Character sync</router-link></li>
 						</ul>
 					</div>
 				</div>

src/components/ToolsPage.vue

@@ -8,7 +8,7 @@
       D&D {{ title }}
     </div>
 		<div class="card-body">
-      <SignedIn v-if="user" />
+      <SignedIn v-if="user && showSignedIn" />
       <slot />
     </div>
     <div slot="footer" class="card-footer">
@@ -29,6 +29,10 @@
     props: {
       title: String,
       bg_img: String,
+      showSignedIn: {
+        type: Boolean,
+        default: true
+      }
     },
     computed: {
       ...mapGetters(["user"]),

src/router/routes.js

@@ -1,3 +1,4 @@
+
 const Sitemap = () => import("src/views/Pages/Sitemap.vue");
 const Privacy = () => import("src/views/Pages/Privacy.vue");
 const Documentation = () => import("src/views/Pages/Documentation.vue");
@@ -769,6 +770,16 @@ const routes = [
 						"An advanced character builder for D&D 5e. Create a character sheet for you character.",
 				},
 			},
+			{
+				path: "homebrew-creation",
+				name: "ToolsHomebrewCreation",
+				component: () => import("src/views/Tools/HomebrewCreation"),
+				meta: {
+					title: "Homebrew Creation",
+					description:
+						"Homebrew Creation. Because the secret of D&D is: you can create everything yourself",
+				},
+			},
 		],
 	},
 

src/views/Tools/CharacterSync.vue

@@ -1,5 +1,9 @@
 <template>
-	<ToolsPage title="Character Sync" bg_img="character-sync-tool-header.png">
+	<ToolsPage
+		title="Character Sync"
+		bg_img="character-sync-tool-header.png"
+		:showSignedIn="false"
+	>
 		<template v-slot:action_btn="{ btn_classes }">
 			<q-btn 
 				color="primary" 

src/views/Tools/EncounterBuilder.vue

@@ -37,7 +37,7 @@
 
 		<section class="d-lg-flex justify-between mt-5">
 			<div>
-				<h2>Difficulty</h2>
+				<h2>Encounter Difficulty Calculator</h2>
 				<p>
 					One of the features of our encounter builder is the built-in difficulty calculator. This
 					tool uses the official rules to analyze your encounter and calculate its difficulty level

src/views/Tools/HomebrewCreation.vue

@@ -0,0 +1,94 @@
+<template>
+	<ToolsPage
+		title="Homebrew Creation"
+		bg_img="homebrew-creation-tool-header.png"
+		:showSignedIn="false"
+	>
+		<template v-slot:action_btn="{ btn_classes }">
+			<q-btn 
+				color="primary" 
+				:class="btn_classes" 
+				no-caps push target="_blank" 
+				rel="noopener" 
+				href="https://homebrewcreation.com/">
+				Checkout HBC <hk-icon icon="fas fa-external-link" class="ml-2" />
+			</q-btn>
+		</template>
+		<section id="hbc">
+			<h2>Adventure templates, homebrew content and DMing inspiration</h2>
+			<p>
+				One of our friends created a platform to offer several tools that are helpful for both beginning and experienced DMs.
+			</p>
+
+			<p>
+				His philosophy: "The secret of D&D is: you can create everything yourself"
+			</p>
+
+			<h3 class="text-bold mb-1">Adventure creation</h3>
+			<p>
+				A three step solution to help you create a one-shot or campaign. We've tried it ourselves and honestly, it was never easier or quicker to fully create a custom one-shot. 
+				By answering a few questions your idea becomes a reality in no time. 
+			</p>
+			<p>
+				<a href="https://homebrewcreation.com/" rel="noopener" target="_blank">Checkout the adventure creation templates</a>
+			</p>
+
+			<h3 class="text-bold mb-1">Homebrew content</h3>
+			<p>
+				He shares his own homebrew content including rules, monsters and classes as an inspiration to help other create their custom content.
+			</p>
+			<p>
+				<a href="https://homebrewcreation.com/dnd-homebrew/" rel="noopener" target="_blank">See all shared homebrew creations</a>
+			</p>
+
+			<h3 class="text-bold mb-1">Articles</h3>
+			<p>
+				Besides sharing his own homebrew creations, he also writes articles. Both guides and opinionated pieces are shared, all about D&D and focussed on DMing.
+			</p>
+			<p>
+				<a href="https://homebrewcreation.com/articles/" rel="noopener" target="_blank">Check the articles</a>
+			</p>
+		</section>
+	</ToolsPage>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import ToolsPage from "src/components/ToolsPage.vue";
+
+export default {
+	name: "ToolsMonsterCreator",
+	components: {
+		ToolsPage,
+	},
+	computed: {
+		...mapGetters(["user"]),
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.q-img {
+	display: block;
+	margin: 30px auto;
+	width: 100%;
+
+	&::v-deep .q-img__content {
+		> div {
+			background: none;
+		}
+	}
+	&.res-vul {
+		width: 50%;
+		max-width: 300px;
+	}
+	&.action {
+		max-width: 600px;
+		cursor: pointer;
+	}
+	&.small {
+		max-width: 600px;
+		border-radius: $border-radius;
+	}
+}
+</style>