DM Screen

package.json

@@ -33,6 +33,7 @@
 		"morgan": "^1.10.0",
 		"quasar": "^1.0.0",
 		"sanitize-html": "^2.7.0",
+		"splitpanes": "^2.4.1",
 		"vee-validate": "^3.4.14",
 		"vue": "^2.7.14",
 		"vue-analytics": "^5.22.1",

quasar.conf.js

@@ -130,7 +130,7 @@ module.exports = function (/* ctx */) {
 				start_url: ".",
 				description:
 					"Harmless Key is the initiative tracker for D&D 5e. We keep track of everything in encounters so even during combat you can give your players the attention they deserve.",
-				orientation: "portrait",
+				orientation: "any",
 				theme_color: "#191a1c",
 				background_color: "#191a1c",
 				display: "standalone",

src/App.vue

@@ -26,15 +26,8 @@
 			enter-active-class="animated animate__slideInRight"
 			leave-active-class="animated animate__slideOutRight"
 		>
-			<div v-if="slide.show == true" class="slide">
-				<a @click="hideSlide()" v-shortkey="['esc']" @shortkey="hideSlide()" class="hide">
-					<i aria-hidden="true" class="far fa-chevron-double-right" />
-					<hk-show-keybind class="neutral-2 ml-2 d-none d-sm-inline" :binds="['esc']" />
-					<q-tooltip anchor="bottom middle" self="center middle"> Hide [esc] </q-tooltip>
-				</a>
-				<div class="content" :class="slide.classes">
-					<Slide />
-				</div>
+			<div v-if="drawer.show == true" class="drawer-wrapper">
+				<Drawer />
 			</div>
 		</transition>
 
@@ -68,7 +61,7 @@
 import { db } from "./firebase";
 import Header from "./components/Header.vue";
 import Sidebar from "./components/Sidebar.vue";
-import Slide from "./components/Slide.vue";
+import Drawer from "./components/Drawer.vue";
 import CookieConsent from "./components/CookieConsent.vue";
 import { mapActions, mapGetters } from "vuex";
 import HkRolls from "./components/hk-components/hk-rolls";
@@ -84,7 +77,7 @@ export default {
 	components: {
 		navMain: Header,
 		Sidebar,
-		Slide,
+		Drawer,
 		CookieConsent,
 		HkRolls,
 		Home,
@@ -238,7 +231,7 @@ export default {
 	},
 	computed: {
 		...mapGetters({
-			slide: "getSlide",
+			drawer: "getDrawer",
 			storeBroadcast: "broadcast",
 		}),
 		...mapGetters(["initialized", "theme", "user", "action_rolls"]),
@@ -313,7 +306,6 @@ export default {
 	},
 	methods: {
 		...mapActions([
-			"setSlide",
 			"setSideSmallScreen",
 			"setLive",
 			"initialize",
@@ -325,9 +317,6 @@ export default {
 			this.small_screen = size.width < 576;
 			this.width = size.width;
 		},
-		hideSlide() {
-			this.setSlide(false);
-		},
 		closeAnnouncement() {
 			const max_age = 24 * 60 * 60; // 24 hours in seconds
 

src/boot/hk-components.js

@@ -1,3 +1,6 @@
+import HkInput from "../components/hk-components/hk-input";
+import HkSelect from "../components/hk-components/hk-select";
+import HkIcon from "../components/hk-components/hk-icon";
 import HkTable from "../components/hk-components/hk-table";
 import HkCard from "../components/hk-components/hk-card";
 import HkCardDeck from "../components/hk-components/hk-card-deck";
@@ -20,8 +23,12 @@ import HkLinkCharacter from "../components/hk-components/hk-link-character";
 import HkActionRollForm from "../components/hk-components/hk-action-rolls/hk-action-roll-form";
 import HkActionRollsTable from "../components/hk-components/hk-action-rolls/hk-action-rolls-table";
 import HkActionRollScaling from "../components/hk-components/hk-action-rolls/hk-action-roll-scaling";
+import HkPane from "../components/hk-components/hk-pane";
 
 export default async ({ Vue }) => {
+	Vue.component("hk-input", HkInput);
+	Vue.component("hk-select", HkSelect);
+	Vue.component("hk-icon", HkIcon);
 	Vue.component("hk-table", HkTable);
 	Vue.component("hk-card", HkCard);
 	Vue.component("hk-card-deck", HkCardDeck);
@@ -44,4 +51,5 @@ export default async ({ Vue }) => {
 	Vue.component("hk-action-roll-form", HkActionRollForm);
 	Vue.component("hk-action-rolls-table", HkActionRollsTable);
 	Vue.component("hk-action-roll-scaling", HkActionRollScaling);
+	Vue.component("hk-pane", HkPane);
 };

src/boot/plugins.js

@@ -5,6 +5,7 @@ import numeral from "vue-numeral-filter";
 import "animate.css";
 import Croppa from "vue-croppa";
 import { Cookies } from "quasar";
+import { Splitpanes, Pane } from "splitpanes";
 
 export default async ({ router, Vue }) => {
 	Vue.config.productionTip = false;
@@ -14,6 +15,9 @@ export default async ({ router, Vue }) => {
 	Vue.use(numeral, { locale: "en" });
 	Vue.use(Croppa);
 
+	Vue.component("Splitpanes", Splitpanes);
+	Vue.component("Pane", Pane);
+
 	require("../functions.js");
 
 	Vue.use(

src/components/ContentSideRight.vue

@@ -19,9 +19,9 @@
 				<button
 					class="btn btn-block bg-green"
 					@click="
-						setSlide({
+						setDrawer({
 							show: true,
-							type: 'slides/CharacterSync',
+							type: 'drawers/CharacterSync',
 						})
 					"
 				>
@@ -62,7 +62,7 @@
 					Share initiative
 					<i class="fas fa-external-link blue-light" aria-hidden="true" />
 				</a>
-				<a class="btn btn-sm bg-neutral-5" @click="setSlide({ show: true, type: 'PlayerLink' })">
+				<a class="btn btn-sm bg-neutral-5" @click="setDrawer({ show: true, type: 'PlayerLink' })">
 					<i aria-hidden="true" class="fas fa-qrcode" />
 				</a>
 			</div>
@@ -228,7 +228,7 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions(["setSlide"]),
+		...mapActions(["setDrawer"]),
 		setWidth(size) {
 			this.width = size.width;
 		},

src/components/Drawer.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="drawer">
+		<a @click="hideDrawer()" v-shortkey="['esc']" @shortkey="hideDrawer()" class="hide">
+			<i aria-hidden="true" class="far fa-chevron-double-right" />
+			<span class="neutral-2 ml-2 d-none d-sm-inline">[esc]</span>
+			<q-tooltip anchor="bottom middle" self="center middle"> Hide [esc] </q-tooltip>
+		</a>
+		<q-scroll-area :dark="$store.getters.theme === 'dark'" :thumb-style="{ width: '5px' }">
+			<div class="drawer__content" :class="drawer.classes">
+				<component
+					v-if="component"
+					v-bind="drawer.data"
+					:is="component"
+					:data="drawer.data"
+					:type="drawer.type"
+				/>
+			</div>
+		</q-scroll-area>
+	</div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+export default {
+	name: "Drawer",
+	data() {
+		return {
+			drawer: this.$store.getters.getDrawer,
+			component: null,
+		};
+	},
+	computed: {
+		loader() {
+			if (!this.drawer.type) {
+				return null;
+			}
+			return () => import(`./${this.drawer.type}.vue`);
+		},
+	},
+	mounted() {
+		this.loader()
+			.then(() => {
+				this.component = () => this.loader();
+			})
+			.catch(() => {
+				this.component = () => import("./drawers/Error.vue");
+			});
+	},
+	methods: {
+		...mapActions(["setDrawer"]),
+		hideDrawer() {
+			this.setDrawer(false);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.q-scrollarea {
+	height: 100%;
+	position: relative;
+
+	&::v-deep {
+		.q-scrollarea__content {
+			width: 100%;
+		}
+	}
+}
+</style>

src/components/Header.vue

@@ -33,6 +33,8 @@
 				</router-link>
 			</div>
 
+			<MusicPlayer />
+
 			<!-- ENVIRONMENT LABEL -->
 			<q-chip v-if="environment !== 'live'" color="red" icon="far fa-rocket" class="white">
 				<span class="ml-1">{{ environment.capitalize() }}</span>
@@ -67,7 +69,7 @@
 						class="icon d-none d-md-block"
 						aria-label="Keybindings"
 						:tabindex="tabindex"
-						@click="setSlide({ show: true, type: 'slides/Keybindings', data: { sm: true } })"
+						@click="setDrawer({ show: true, type: 'drawers/Keybindings', data: { sm: true } })"
 					>
 						<i aria-hidden="true" class="fas fa-keyboard" />
 						<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">
@@ -78,7 +80,7 @@
 						class="icon"
 						aria-label="Compendium"
 						:tabindex="tabindex"
-						@click="setSlide({ show: true, type: 'slides/Compendium' })"
+						@click="setDrawer({ show: true, type: 'drawers/Compendium' })"
 					>
 						<i aria-hidden="true" class="fas fa-book-spells"></i>
 						<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">
@@ -90,7 +92,7 @@
 						aria-label="Live initiative link"
 						class="icon"
 						:tabindex="tabindex"
-						@click="setSlide({ show: true, type: 'PlayerLink' })"
+						@click="setDrawer({ show: true, type: 'PlayerLink' })"
 					>
 						<i aria-hidden="true" class="fas fa-share-alt"></i>
 						<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">
@@ -102,8 +104,8 @@
 						aria-label="Dice roller"
 						v-shortkey="['r']"
 						:tabindex="tabindex"
-						@shortkey="setSlide({ show: true, type: 'slides/roll/index' })"
-						@click="setSlide({ show: true, type: 'slides/roll/index' })"
+						@shortkey="setDrawer({ show: true, type: 'drawers/roll/index' })"
+						@click="setDrawer({ show: true, type: 'drawers/roll/index' })"
 					>
 						<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">
 							Dice roller
@@ -176,10 +178,14 @@
 </template>
 
 <script>
+import MusicPlayer from "./MusicPlayer";
 import { mapActions, mapGetters } from "vuex";
 
 export default {
 	name: "Header",
+	components: {
+		MusicPlayer,
+	},
 	props: {
 		maintenance: {
 			type: [Boolean, String],
@@ -198,13 +204,7 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions(["setSlide", "setSideSmallScreen", "setTheme", "sign_out"]),
-		showSlide(type) {
-			this.setSlide({
-				show: true,
-				type,
-			});
-		},
+		...mapActions(["setDrawer", "setSideSmallScreen", "setTheme", "sign_out"]),
 		signOut() {
 			if (this.$route.path !== "/") this.$router.replace("/");
 			this.sign_out();

src/components/MusicPlayer.vue

@@ -0,0 +1,48 @@
+<template>
+	<div>
+		<iframe
+			v-if="music"
+			ref="music"
+			:src="`${music_url}?autoplay=1&mute=0&playsinline=1&controls=0`"
+			title="Music player"
+			class="music-player"
+			allow="autoplay"
+		/>
+		<iframe
+			v-for="sound in ambience"
+			:key="sound.url"
+			:src="`${ambience_url(sound.url)}?autoplay=1&mute=0&playsinline=1&controls=0`"
+			title="Music player"
+			class="music-player"
+			allow="autoplay"
+		/>
+	</div>
+</template>
+
+<script>
+import { generateYoutubeEmbedUrl, urlType } from "src/utils/generalFunctions";
+import { mapGetters } from "vuex";
+
+export default {
+	name: "MusicPlayer",
+	computed: {
+		...mapGetters(["music", "ambience"]),
+		music_url() {
+			return urlType(this.music?.url) === "youtube"
+				? generateYoutubeEmbedUrl(this.music?.url)
+				: this.music?.url;
+		},
+	},
+	methods: {
+		ambience_url(url) {
+			return urlType(url) === "youtube" ? generateYoutubeEmbedUrl(url) : url;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+iframe {
+	display: none;
+}
+</style>