From 769e24cd31a0acd985626a3883261517382c34ef Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 15:45:50 +0100
Subject: [PATCH] legacy layout setting

---
 src/components/settings/General.vue           |  22 ++++
 .../UserContent/Campaigns/RunCampaign.vue     | 122 +++++++++++-------
 2 files changed, 94 insertions(+), 50 deletions(-)

diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue
index dc162149..050df29e 100644
--- a/src/components/settings/General.vue
+++ b/src/components/settings/General.vue
@@ -233,6 +233,28 @@ export default {
 								},
 							],
 						},
+						{
+							key: "legacy_campaign_layout",
+							name: "Campaign Layout",
+							icon: "fas fa-bars",
+							info: "Select whether or not you want to use the modern campaign layout, or if you want to switch to the old layout.",
+							options: [
+								{
+									value: true,
+									name: "Legacy",
+									action: "Legacy",
+									icon: "fas fa-columns",
+									color: "neutral-2",
+								},
+								{
+									value: undefined,
+									name: "DM Screen",
+									action: "DM Screen",
+									icon: "fas fa-map",
+									color: "neutral-2",
+								},
+							],
+						},
 					],
 				},
 			},
diff --git a/src/views/UserContent/Campaigns/RunCampaign.vue b/src/views/UserContent/Campaigns/RunCampaign.vue
index b7c1ee32..4f4c5f39 100644
--- a/src/views/UserContent/Campaigns/RunCampaign.vue
+++ b/src/views/UserContent/Campaigns/RunCampaign.vue
@@ -37,7 +37,7 @@
 							Private campaign
 						</q-tooltip>
 					</div>
-					<template v-if="container.width < lg && container.width > sm">
+					<template v-if="legacy_layout || (container.width < lg && container.width > sm)">
 						<button
 							class="btn btn-clear btn-sm"
 							@click="
@@ -78,50 +78,68 @@
 					</template>
 				</div>
 			</div>
-			<Splitpanes v-if="container.width >= sm" class="default-theme" horizontal>
-				<Pane>
-					<Splitpanes>
-						<Pane :size="paneSize('left')" min-size="20">
-							<Splitpanes horizontal>
-								<hk-pane :size="paneSize('left-top')" min-size="20">
-									<Encounters />
-								</hk-pane>
-								<hk-pane v-if="container.width >= lg" :size="paneSize('left-bottom')">
-									<SoundBoard />
-								</hk-pane>
-							</Splitpanes>
-						</Pane>
-						<Pane v-if="container.width >= md" :size="paneSize('mid')" min-size="20">
-							<Splitpanes horizontal>
-								<hk-pane min-size="20">
-									<Players
-										:userId="user.uid"
-										:campaignId="campaignId"
-										:campaign="campaign"
-										:players="players"
-									/>
-								</hk-pane>
-								<hk-pane v-if="!campaign.private && container.width > lg" size="60" min-size="20">
-									<Share :campaign="campaign" />
-								</hk-pane>
-							</Splitpanes>
-						</Pane>
-						<hk-pane v-if="container.width >= lg" :size="paneSize('right')" min-size="20">		
-							<Resources />								
-						</hk-pane>
-					</Splitpanes>
-				</Pane>
-				<hk-pane v-if="container.width < lg && container.height >= 780">
-					<Players
-						v-if="container.width < md"
-						:userId="user.uid"
-						:campaignId="campaignId"
-						:campaign="campaign"
-						:players="players"
-					/>
-					<Share :campaign="campaign" v-else />
-				</hk-pane>
-			</Splitpanes>
+			<template v-if="container.width >= sm">
+				<Splitpanes v-if="legacy_layout" class="default-theme">
+					<hk-pane min-size="30">
+						<Encounters />
+					</hk-pane>
+					<hk-pane min-size="30">
+						<Players
+							:userId="user.uid"
+							:campaignId="campaignId"
+							:campaign="campaign"
+							:players="players"
+						/>
+					</hk-pane>
+				</Splitpanes>
+				<Splitpanes v-else class="default-theme" horizontal>
+					<Pane>
+						<Splitpanes>
+							<Pane v-if="container.width >= lg" :size="paneSize('left')" min-size="20">
+								<Splitpanes horizontal>
+									<hk-pane :size="paneSize('left-top')">
+										<SoundBoard />
+									</hk-pane>
+									<hk-pane v-if="!campaign.private" min-size="20">
+										<Share :campaign="campaign" />
+									</hk-pane>
+								</Splitpanes>
+							</Pane>
+							<hk-pane v-else>
+								<Encounters />
+							</hk-pane>
+							<Pane v-if="container.width >= md" :size="paneSize('mid')" min-size="20">
+								<Splitpanes horizontal>
+									<hk-pane v-if="container.width >= lg" min-size="20">
+										<Encounters />
+									</hk-pane>
+									<hk-pane min-size="20">
+										<Players
+											:userId="user.uid"
+											:campaignId="campaignId"
+											:campaign="campaign"
+											:players="players"
+										/>
+									</hk-pane>
+								</Splitpanes>
+							</Pane>
+							<hk-pane v-if="container.width >= lg" :size="paneSize('right')" min-size="20">
+								<Resources />
+							</hk-pane>
+						</Splitpanes>
+					</Pane>
+					<hk-pane v-if="container.width < lg && container.height >= 780">
+						<Players
+							v-if="container.width < md"
+							:userId="user.uid"
+							:campaignId="campaignId"
+							:campaign="campaign"
+							:players="players"
+						/>
+						<Share :campaign="campaign" v-else />
+					</hk-pane>
+				</Splitpanes>
+			</template>
 
 			<div v-else class="mobile">
 				<hk-select
@@ -228,6 +246,7 @@ export default {
 		};
 	},
 	async mounted() {
+		console.log("settings", this.userSettings);
 		await this.get_campaign({
 			uid: this.user.uid,
 			id: this.campaignId,
@@ -258,7 +277,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters(["broadcast"]),
+		...mapGetters(["broadcast", "userSettings"]),
 		background_image() {
 			return this.campaign.hk_background
 				? require(`src/assets/_img/atmosphere/${this.campaign.hk_background}.jpg`)
@@ -267,6 +286,9 @@ export default {
 		tab_icon() {
 			return this.mobile_tabs.find((tab) => tab.value === this.mobile_tab).icon;
 		},
+		legacy_layout() {
+			return this.userSettings.general.legacy_campaign_layout;
+		},
 	},
 	methods: {
 		...mapActions(["setDrawer"]),
@@ -278,13 +300,13 @@ export default {
 		paneSize(pane) {
 			switch (pane) {
 				case "right":
-					return this.container.width > this.md ? "30" : "50";
+					return this.container.width > this.md ? "25" : "50";
 				case "mid":
-					return this.container.width > this.md ? "40" : "50";
+					return this.container.width > this.md ? "50" : "50";
 				case "left":
-					return this.container.width > this.md ? "30" : "50";
+					return this.container.width > this.md ? "25" : "50";
 				case "left-top":
-					return this.container.width > this.lg ? "50" : "100";
+					return this.container.width > this.lg ? "60" : "100";
 				case "left-bottom":
 					return this.container.width > this.md ? "50" : "0";
 			}