Add tools page for DM Screen

src/components/campaign/resources/CheatSheet.vue

@@ -232,7 +232,7 @@ export default {
         {
           type: "reaction",
           name: "Readied Action",
-          caption: "Part of you Ready action",
+          caption: "Part of your Ready action",
           description: "Execute the reaction specified by your Ready action.",
           src: "phb 193",
         },

src/router/routes.js

@@ -655,6 +655,31 @@ const routes = [
 					},
 				],
 			},
+			{
+				path: "dm-screen",
+				component: {
+					render(c) {
+						return c("router-view");
+					},
+				},
+				meta: {
+					title: "D&D 5e DM Screen",
+					description:
+						"A DM Screen for D&D 5e. Quickly reference rules and directly run encounters.",
+				},
+				children: [
+					{
+						path: "",
+						name: "ToolsDmScreen",
+						component: () => import("src/views/Tools/DmScreen"),
+						meta: {
+							title: "D&D 5e DM Screen",
+							description:
+							"A Dungeon Master Screen for D&D 5e. Quickly reference rules and directly run encounters.",
+						},
+					}
+				],
+			},
 			{
 				path: "monster-creator",
 				component: {

src/views/Tools/DmScreen.vue

@@ -0,0 +1,50 @@
+<template>
+	<ToolsPage title="DM Screen" bg_img="monster-tool-header.jpg">
+		<p>
+			With our DM screen you have quick access to you D&D 5e rules, your custom encounter and a soundboard.
+		</p>
+
+		<section>
+		</section>		
+	</ToolsPage>
+</template>
+
+<script>
+import ToolsPage from "src/components/ToolsPage.vue";
+
+export default {
+	name: "ToolsMonsterCreator",
+	components: {
+		ToolsPage,
+	},
+	data() {
+		return {
+			
+		};
+	},
+	methods: {
+	},
+};
+</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;
+	}
+}
+</style>

src/views/Tools/index.vue

@@ -73,6 +73,13 @@ export default {
 					url: "/tools/encounter-builder",
 					icon: "fas fa-hammer-war",
 				},
+				"dm-screen": {
+					title: "DM Screen",
+					description: "Quick access to rules, a soundboard, your players, your custom encounters and more.",
+					image: "",
+					url: "/tools/dm-screen",
+					icon: "fas fa-map",
+				},
 				"monster-creator": {
 					title: "Monster Creator",
 					description: