From dffd70c0cbeedca5ff89a9c537483585389ab336 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 15:08:06 +0100
Subject: [PATCH 01/10] Check if mobile to show tabs or not

---
 .../campaign/resources/CheatSheet.vue         | 179 +++++++++---------
 1 file changed, 93 insertions(+), 86 deletions(-)

diff --git a/src/components/campaign/resources/CheatSheet.vue b/src/components/campaign/resources/CheatSheet.vue
index 813caf7f..fb497264 100644
--- a/src/components/campaign/resources/CheatSheet.vue
+++ b/src/components/campaign/resources/CheatSheet.vue
@@ -1,105 +1,112 @@
 <template>
-  <div>
-    <hk-input 
-			v-model="query" 
-			:dense="!compendium"
-			label="Search"
-			class="mb-2"
-			clearable>
+	<div>
+		<hk-input v-model="query" :dense="!compendium" label="Search" class="mb-2" clearable>
 			<q-icon slot="prepend" name="search" />
 		</hk-input>
 		<p class="red" v-if="query && !sheet.length">Nothing found</p>
-    <q-tabs
-      v-if="!query"
-			v-model="type"
+		<q-tabs
+			v-if="!query && !isMobile"
+			v-model="tab_type"
 			:dark="$store.getters.theme === 'dark'"
 			inline-label
 			outside-arrows
 			mobile-arrows
-      class="mb-2"
+			class="mb-2"
 		>
-			<q-tab
-				v-for="{ name, label } in types"
-				:name="name"
-				:label="label"
-				:key="name"
-			/>
+			<q-tab v-for="{ name, label } in types" :name="name" :label="label" :key="name" />
 		</q-tabs>
 
-    <q-list :dark="$store.getters.theme === 'dark'" class="accordion">
-      <q-expansion-item
-        v-for="{ type, name, description, caption, src, url } in sheet"
-        :dark="$store.getters.theme === 'dark'"
-        switch-toggle-side
-        :name="name"
-        :key="url"
-      >
-        <template v-slot:header>
-          <q-item-section>
-            <router-link v-if="compendium" :to="`/compendium/rules/${url}`" stop.prevent>
-             {{ name }}
-            </router-link>
-            <template v-else>{{ name }}</template>
-            <q-item-label caption class="neutral-3">{{ caption }}</q-item-label>
-          </q-item-section>
-          <q-item-section avatar class="neutral-3">
-            {{ types.filter(item => item.name === type)[0]?.label }}
-          </q-item-section>
-        </template>
+		<q-list :dark="$store.getters.theme === 'dark'" class="accordion">
+			<q-expansion-item
+				v-for="{ type, name, description, caption, src, url } in sheet"
+				:dark="$store.getters.theme === 'dark'"
+				switch-toggle-side
+				:name="name"
+				:key="url"
+			>
+				<template v-slot:header>
+					<q-item-section>
+						<router-link v-if="compendium" :to="`/compendium/rules/${url}`" stop.prevent>
+							{{ name }}
+						</router-link>
+						<template v-else>{{ name }}</template>
+						<q-item-label caption class="neutral-3">{{ caption }}</q-item-label>
+					</q-item-section>
+					<q-item-section avatar class="neutral-3">
+						{{ types.filter((item) => item.name === type)[0]?.label }}
+					</q-item-section>
+				</template>
 
-        <div class="accordion-body">
-          <hk-markdown-editor :value="description" read-only />
-          <span class="neutral-2">{{ src }}</span>
-        </div>
-      </q-expansion-item>
-    </q-list>
-  </div>
+				<div class="accordion-body">
+					<hk-markdown-editor :value="description" read-only />
+					<span class="neutral-2">{{ src }}</span>
+				</div>
+			</q-expansion-item>
+		</q-list>
+	</div>
 </template>
 
 <script>
 import { rules } from "src/utils/generalConstants";
 
 export default {
-  name: "CheatSheet",
-  props: {
-    compendium: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  data() {
-    return {
-      type: "action",
-      query: null,
-      types: [
-        {
-          name: "action",
-          label: "Action"
-        },
-        {
-          name: "bonus_action",
-          label: "Bonus Action"
-        },
-        {
-          name: "reaction",
-          label: "Reaction"
-        },
-        {
-          name: "movement",
-          label: "Movement"
-        },
-        {
-          name: "environment",
-          label: "Environment"
-        },
-      ],
-      cheatSheet: rules,
-    }
-  },
-  computed: {
-    sheet() {
-      return this.query ? this.cheatSheet.filter(({ name, description }) => name.toLowerCase().includes(this.query.toLowerCase()) || description.toLowerCase().includes(this.query.toLowerCase())) : this.cheatSheet.filter(item => item.type === this.type);
-    }
-  }
-}
+	name: "CheatSheet",
+	props: {
+		compendium: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			tab_type: "action",
+			query: null,
+			types: [
+				{
+					name: "action",
+					label: "Action",
+				},
+				{
+					name: "bonus_action",
+					label: "Bonus Action",
+				},
+				{
+					name: "reaction",
+					label: "Reaction",
+				},
+				{
+					name: "movement",
+					label: "Movement",
+				},
+				{
+					name: "environment",
+					label: "Environment",
+				},
+			],
+			cheatSheet: rules,
+		};
+	},
+	mounted() {
+		console.log("Mount Cheat Sheet");
+	},
+	computed: {
+		isMobile() {
+			// This only works for real mobiles, not for small desktop screens
+			return this.$q.platform.is.mobile
+		},
+		sheet() {
+			if (this.query) {
+				return this.cheatSheet.filter(
+						({ name, description }) =>
+							name.toLowerCase().includes(this.query.toLowerCase()) ||
+							description.toLowerCase().includes(this.query.toLowerCase())
+					)
+			}
+			// if (this.tab_type) {
+			//   return this.cheatSheet.filter((item) => item.type === this.tab_type);
+			// }
+			return this.cheatSheet;
+		},
+	},
+};
 </script>

From ff48efc5325633fd33ff6f7dc28f58bd007bdf79 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 15:45:50 +0100
Subject: [PATCH 02/10] 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";
 			}

From 1a88978bd269fa308f46c87d1b33755fb6e8cde0 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 16:16:46 +0100
Subject: [PATCH 03/10] Changed panel layouts for better readability for
 responsiveness

---
 .../UserContent/Campaigns/RunCampaign.vue     | 72 +++++++++++--------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/views/UserContent/Campaigns/RunCampaign.vue b/src/views/UserContent/Campaigns/RunCampaign.vue
index 4f4c5f39..fd18a79c 100644
--- a/src/views/UserContent/Campaigns/RunCampaign.vue
+++ b/src/views/UserContent/Campaigns/RunCampaign.vue
@@ -92,43 +92,53 @@
 						/>
 					</hk-pane>
 				</Splitpanes>
+				<Splitpanes v-else-if="container.width >= lg" class="default-theme">
+					<Pane :size="paneSize('left')" min-size="20">
+						<Splitpanes horizontal>
+							<hk-pane :size="paneSize('left-top')">
+								<SoundBoard />
+							</hk-pane>
+							<hk-pane v-if="!campaign.private" :size="paneSize('left-bottom')" min-size="20">
+								<Share :campaign="campaign" />
+							</hk-pane>
+						</Splitpanes>
+					</Pane>
+					<Pane :size="paneSize('mid')" min-size="20">
+						<Splitpanes horizontal>
+							<hk-pane 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 :size="paneSize('right')" min-size="20">
+						<Resources />
+					</hk-pane>
+				</Splitpanes>
 				<Splitpanes v-else class="default-theme" horizontal>
-					<Pane>
+					<Pane size="60" min-size="20">
 						<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>
+							<hk-pane size="50" min-size="20">
 								<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 size="50" min-size="20">
+								<Players
+									:userId="user.uid"
+									:campaignId="campaignId"
+									:campaign="campaign"
+									:players="players"
+								/>
 							</hk-pane>
 						</Splitpanes>
 					</Pane>
-					<hk-pane v-if="container.width < lg && container.height >= 780">
+					<hk-pane size="40" min-size="20" v-if="container.width < lg && container.height >= 780">
 						<Players
 							v-if="container.width < md"
 							:userId="user.uid"
@@ -136,7 +146,7 @@
 							:campaign="campaign"
 							:players="players"
 						/>
-						<Share :campaign="campaign" v-else />
+						<Share v-else-if="!campaign.private" :campaign="campaign" />
 					</hk-pane>
 				</Splitpanes>
 			</template>

From 8254b39907de798ea377bae01c7626688726fc4a Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 16:21:37 +0100
Subject: [PATCH 04/10] legacy layout make horizontal splitpanel when width <
 md

---
 src/views/UserContent/Campaigns/RunCampaign.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/UserContent/Campaigns/RunCampaign.vue b/src/views/UserContent/Campaigns/RunCampaign.vue
index fd18a79c..6c73e3a7 100644
--- a/src/views/UserContent/Campaigns/RunCampaign.vue
+++ b/src/views/UserContent/Campaigns/RunCampaign.vue
@@ -79,7 +79,7 @@
 				</div>
 			</div>
 			<template v-if="container.width >= sm">
-				<Splitpanes v-if="legacy_layout" class="default-theme">
+				<Splitpanes v-if="legacy_layout" class="default-theme" :horizontal="container.width < md">
 					<hk-pane min-size="30">
 						<Encounters />
 					</hk-pane>

From c2d0edc752c3ec0e465e49f04fe7e271b651ef78 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 16:23:42 +0100
Subject: [PATCH 05/10] version bump

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e39e293..53682142 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "harmless_key",
-	"version": "2.20.0",
+	"version": "2.20.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "harmless_key",
-			"version": "2.20.0",
+			"version": "2.20.1",
 			"dependencies": {
 				"@octokit/rest": "^19.0.5",
 				"@quasar/extras": "^1.0.0",
diff --git a/package.json b/package.json
index bdd88c76..ab847cf0 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "2.20.0",
+	"version": "2.20.1",
 	"name": "harmless_key",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Harmless Key",

From 84851ffd12341ba6e3eb29f6f41a27cbd7b54080 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 16:33:56 +0100
Subject: [PATCH 06/10] no double player panel on md screen

---
 src/views/UserContent/Campaigns/RunCampaign.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/UserContent/Campaigns/RunCampaign.vue b/src/views/UserContent/Campaigns/RunCampaign.vue
index 6c73e3a7..0fbe1f45 100644
--- a/src/views/UserContent/Campaigns/RunCampaign.vue
+++ b/src/views/UserContent/Campaigns/RunCampaign.vue
@@ -125,10 +125,10 @@
 				<Splitpanes v-else class="default-theme" horizontal>
 					<Pane size="60" min-size="20">
 						<Splitpanes>
-							<hk-pane size="50" min-size="20">
+							<hk-pane min-size="20">
 								<Encounters />
 							</hk-pane>
-							<hk-pane size="50" min-size="20">
+							<hk-pane min-size="20" v-if="container.width >= md">
 								<Players
 									:userId="user.uid"
 									:campaignId="campaignId"

From 0145f8f67828ee208e5998c231e4995f6720f136 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 16:42:11 +0100
Subject: [PATCH 07/10] update release template and codesmells

---
 .github/release.yml                           |  4 +++
 ReleaseTemplate.md                            | 25 -------------------
 .../campaign/resources/CheatSheet.vue         | 16 ++++++------
 .../UserContent/Campaigns/RunCampaign.vue     |  2 +-
 4 files changed, 13 insertions(+), 34 deletions(-)
 delete mode 100644 ReleaseTemplate.md

diff --git a/.github/release.yml b/.github/release.yml
index 251f2a41..6890171a 100644
--- a/.github/release.yml
+++ b/.github/release.yml
@@ -6,8 +6,12 @@ changelog:
     - title: Improvements 🦾
       labels:
         - "improvement"
+        - "Improvement"
         - "enhancement"
+        - "Enhancement"
     - title: Bugfixes 🐛
       labels:
         - "bugfix"
+        - "Bugfix"
         - "bug"
+        - "Bug"
diff --git a/ReleaseTemplate.md b/ReleaseTemplate.md
deleted file mode 100644
index a78b6c7b..00000000
--- a/ReleaseTemplate.md
+++ /dev/null
@@ -1,25 +0,0 @@
-**NEW** 🚀
-
-- New features added in this release
-
-**IMPROVEMENTS** 🦾
-
-- Improvements made to existing features
-
-**BUGFIXES** 🐛
-
-- All the bugs squashed along the way
-
-Copy the following markdown
-
-```
-**NEW** 🚀
-- New features added in this release
-
-**IMPROVEMENTS** 🦾
-- Improvements made to existing features
-
-**BUGFIXES** 🐛
-- All the bugs squashed along the way
-
-```
diff --git a/src/components/campaign/resources/CheatSheet.vue b/src/components/campaign/resources/CheatSheet.vue
index fb497264..cbc91bd4 100644
--- a/src/components/campaign/resources/CheatSheet.vue
+++ b/src/components/campaign/resources/CheatSheet.vue
@@ -92,19 +92,19 @@ export default {
 	computed: {
 		isMobile() {
 			// This only works for real mobiles, not for small desktop screens
-			return this.$q.platform.is.mobile
+			return this.$q.platform.is.mobile;
 		},
 		sheet() {
 			if (this.query) {
 				return this.cheatSheet.filter(
-						({ name, description }) =>
-							name.toLowerCase().includes(this.query.toLowerCase()) ||
-							description.toLowerCase().includes(this.query.toLowerCase())
-					)
+					({ name, description }) =>
+						name.toLowerCase().includes(this.query.toLowerCase()) ||
+						description.toLowerCase().includes(this.query.toLowerCase())
+				);
+			}
+			if (this.tab_type) {
+				return this.cheatSheet.filter((item) => item.type === this.tab_type);
 			}
-			// if (this.tab_type) {
-			//   return this.cheatSheet.filter((item) => item.type === this.tab_type);
-			// }
 			return this.cheatSheet;
 		},
 	},
diff --git a/src/views/UserContent/Campaigns/RunCampaign.vue b/src/views/UserContent/Campaigns/RunCampaign.vue
index 0fbe1f45..39352cee 100644
--- a/src/views/UserContent/Campaigns/RunCampaign.vue
+++ b/src/views/UserContent/Campaigns/RunCampaign.vue
@@ -312,7 +312,7 @@ export default {
 				case "right":
 					return this.container.width > this.md ? "25" : "50";
 				case "mid":
-					return this.container.width > this.md ? "50" : "50";
+					return "50";
 				case "left":
 					return this.container.width > this.md ? "25" : "50";
 				case "left-top":

From 2b023250e3154b40c3c4548503eb992282736c59 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 16:43:27 +0100
Subject: [PATCH 08/10] cheatsheet initially shows all

---
 src/components/campaign/resources/CheatSheet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/campaign/resources/CheatSheet.vue b/src/components/campaign/resources/CheatSheet.vue
index cbc91bd4..1e0f68af 100644
--- a/src/components/campaign/resources/CheatSheet.vue
+++ b/src/components/campaign/resources/CheatSheet.vue
@@ -59,7 +59,7 @@ export default {
 	},
 	data() {
 		return {
-			tab_type: "action",
+			tab_type: undefined,
 			query: null,
 			types: [
 				{

From 3dfbe36e763954f6209d2595139a53881ba83c16 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 17:44:57 +0100
Subject: [PATCH 09/10] Fixed monster compendium hkroll color

---
 src/components/compendium/Monster.vue | 39 +++++++++++++++------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/compendium/Monster.vue b/src/components/compendium/Monster.vue
index aeea8bc0..fe2908ab 100644
--- a/src/components/compendium/Monster.vue
+++ b/src/components/compendium/Monster.vue
@@ -105,7 +105,7 @@
 					<br />
 				</template>
 				<template v-if="monster.skills"
-					><strong>Skills</strong>
+					><strong>Skills </strong>
 					<span class="saves">
 						<hk-roll
 							v-for="(skill, index) in monster.skills"
@@ -129,12 +129,9 @@
 							"
 						>
 							<span class="save">
-								{{ skill }}
-								{{
-									skillModifier(skillList[skill].ability, skill) > 0
-										? `+${skillModifier(skillList[skill].ability, skill)}`
-										: skillModifier(skillList[skill].ability, skill)
-								}}{{ index+1 &lt; monster.skills.length ? "," : "" }}
+								{{ skill.capitalize() }}
+								{{ skillModifier2str(skillModifier(skillList[skill].ability, skill)) }}
+								{{ index+1 &lt; monster.skills.length ? "," : "" }}
 							</span>
 						</hk-roll>
 						<br />
@@ -217,11 +214,7 @@
 							<i aria-hidden="true" v-else class="far fa-circle"></i>
 							{{ skill.skill }}
 						</span>
-						<span>{{
-							skillModifier(skill.ability, key) > 0
-								? `+${skillModifier(skill.ability, key)}`
-								: skillModifier(skill.ability, key)
-						}}</span>
+						<span>{{ skillModifier2str(skillModifier(skill.ability, key)) }}</span>
 					</span>
 				</hk-roll>
 			</div>
@@ -260,7 +253,7 @@
 									<template #content>
 										<Spell :id="spell.key" />
 									</template> </hk-popover
-								>{{ index+1 &lt; spellsForLevel(level).length ? "," : "" }}
+								>{{ index + 1 &lt; spellsForLevel(level).length ? "," : "" }}
 							</i>
 						</div>
 					</template>
@@ -296,7 +289,7 @@
 									<template #content>
 										<Spell :id="spell.key" />
 									</template> </hk-popover
-								>{{ index+1 &lt; spellsForLimit(limit).length ? "," : "" }}
+								>{{ index + 1 &lt; spellsForLimit(limit).length ? "," : "" }}
 							</i>
 						</div>
 					</template>
@@ -362,7 +355,11 @@
 								{{ ability.legendary_cost > 1 ? `(Costs ${ability.legendary_cost} Actions)` : `` }}
 							</em></strong
 						>
-						<hk-dice-text v-if="ability.desc" :input_text="ability.desc" />
+						<hk-dice-text
+							v-if="ability.desc"
+							class="action-description"
+							:input_text="ability.desc"
+						/>
 					</p>
 				</template>
 			</div>
@@ -509,6 +506,12 @@ export default {
 
 			return calc_skill_mod(ability_mod, proficiency, bonus, proficient, expertise);
 		},
+		skillModifier2str(mod_value) {
+			if (mod_value > 0) {
+				return `+${mod_value}`;
+			}
+			return `${mod_value}`;
+		},
 	},
 };
 </script>
@@ -520,8 +523,10 @@ export default {
 	padding: 20px;
 	color: $black;
 	font-family: Helvetica, sans-serif, serif;
-	.hk-roll {
-		color: $black;
+	&::v-deep {
+		.hk-roll {
+			color: $black !important;
+		}
 	}
 
 	h2 {

From 03dd9f924de3e051b0da39cb658dfb2e2c06553d Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 20 Nov 2023 18:13:30 +0100
Subject: [PATCH 10/10] set up pane size for future use of settings

---
 .../UserContent/Campaigns/RunCampaign.vue     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/views/UserContent/Campaigns/RunCampaign.vue b/src/views/UserContent/Campaigns/RunCampaign.vue
index 39352cee..2bb32760 100644
--- a/src/views/UserContent/Campaigns/RunCampaign.vue
+++ b/src/views/UserContent/Campaigns/RunCampaign.vue
@@ -95,20 +95,20 @@
 				<Splitpanes v-else-if="container.width >= lg" class="default-theme">
 					<Pane :size="paneSize('left')" min-size="20">
 						<Splitpanes horizontal>
-							<hk-pane :size="paneSize('left-top')">
+							<hk-pane>
 								<SoundBoard />
 							</hk-pane>
-							<hk-pane v-if="!campaign.private" :size="paneSize('left-bottom')" min-size="20">
+							<hk-pane v-if="!campaign.private" :size="100 - paneSize('left-top')" min-size="20">
 								<Share :campaign="campaign" />
 							</hk-pane>
 						</Splitpanes>
 					</Pane>
 					<Pane :size="paneSize('mid')" min-size="20">
 						<Splitpanes horizontal>
-							<hk-pane min-size="20">
+							<hk-pane :size="paneSize('mid-top')" min-size="20">
 								<Encounters />
 							</hk-pane>
-							<hk-pane min-size="20">
+							<hk-pane :size="100 - paneSize('mid-top')" min-size="20">
 								<Players
 									:userId="user.uid"
 									:campaignId="campaignId"
@@ -125,10 +125,10 @@
 				<Splitpanes v-else class="default-theme" horizontal>
 					<Pane size="60" min-size="20">
 						<Splitpanes>
-							<hk-pane min-size="20">
+							<hk-pane size="50" min-size="20">
 								<Encounters />
 							</hk-pane>
-							<hk-pane min-size="20" v-if="container.width >= md">
+							<hk-pane size="50" min-size="20" v-if="container.width >= md">
 								<Players
 									:userId="user.uid"
 									:campaignId="campaignId"
@@ -309,16 +309,16 @@ export default {
 		},
 		paneSize(pane) {
 			switch (pane) {
-				case "right":
-					return this.container.width > this.md ? "25" : "50";
-				case "mid":
-					return "50";
 				case "left":
-					return this.container.width > this.md ? "25" : "50";
+					return 25;
+				case "mid":
+					return 45;
+				case "right":
+					return 30;
 				case "left-top":
-					return this.container.width > this.lg ? "60" : "100";
-				case "left-bottom":
-					return this.container.width > this.md ? "50" : "0";
+					return 60;
+				case "mid-top":
+					return 50;
 			}
 		},
 	},