Merge branch 'release/2.27.0' into main

HarmlessKey · Jun 7, 2024 · 1c8e2a5 · 1c8e2a5
2 parents 30dd12d + 671f922
commit 1c8e2a5
Show file tree

Hide file tree

Showing 22 changed files with 800 additions and 698 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "2.26.1",
+	"version": "2.27.0",
 	"name": "shieldmaiden",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Shieldmaiden",

diff --git a/src/boot/hk-components.js b/src/boot/hk-components.js
@@ -30,6 +30,7 @@ const HkActionRollScaling = () =>
 const HkPane = () => import("../components/hk-components/hk-pane");
 const HkFilter = () => import("../components/hk-components/hk-filter");
 const HkTransformSelect = () => import("../components/hk-components/hk-transform-select");
+import HkCompendiumImage from "../components/hk-components/hk-compendium-image";
 
 export default async ({ Vue }) => {
 	Vue.component("hk-input", HkInput);
@@ -61,4 +62,5 @@ export default async ({ Vue }) => {
 	Vue.component("hk-pane", HkPane);
 	Vue.component("hk-filter", HkFilter);
 	Vue.component("hk-transform-select", HkTransformSelect);
+	Vue.component("hk-compendium-image", HkCompendiumImage);
 };
diff --git a/src/components/combat/TargetAvatar.vue b/src/components/combat/TargetAvatar.vue
@@ -0,0 +1,66 @@
+<template>
+	<div
+		class="target-avatar"
+		:style="{
+			'background-image':
+				(entity.img && !icons) ||
+				(entity.img &&
+					icons &&
+					!entity.hidden &&
+					!entity.transformed &&
+					!entity.reminder?.surprised)
+					? 'url(' + entity.img + ')'
+					: '',
+			'border-color': entity.color_label ? entity.color_label : ``,
+			color: entity.color_label ? entity.color_label : ``,
+		}"
+	>
+		<template v-if="icons && entity.hidden">
+			<hk-icon icon="fas fa-eye-slash" class="red" />
+			<q-tooltip anchor="top middle" self="center middle">Hidden</q-tooltip>
+		</template>
+		<template v-else-if="icons && entity.transformed">
+			<hk-icon icon="fas fa-paw-claws" />
+			<q-tooltip anchor="top middle" self="center middle">Transformed</q-tooltip>
+		</template>
+		<template v-else-if="icons && entity.reminders?.surprised">
+			<hk-icon icon="hki hki-surprised" class="orange" />
+			<q-tooltip anchor="top middle" self="center middle">Surprised</q-tooltip>
+		</template>
+		<hk-compendium-image v-else-if="!entity.img && entity.url" :value="entity.url" />
+		<hk-icon
+			v-else-if="!entity.img"
+			:icon="`hki-${entity.entityType === 'npc' ? 'monster' : entity.entityType}`"
+		/>
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "target-avatar",
+	props: {
+		entity: {
+			type: Object,
+			required: true,
+		},
+		icons: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {};
+	},
+	methods: {},
+	mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.target-avatar {
+	background-position: center top;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+</style>
diff --git a/src/components/combat/TargetItem.vue b/src/components/combat/TargetItem.vue
@@ -6,7 +6,7 @@
 				class="initiative"
 				v-if="initiative"
 				@click.stop
-				:class="targeted.includes(entity.key) ? 'blue' : ''"
+				:style="{ color: entity.color_label ? entity.color_label : `` }"
 			>
 				{{ entity.initiative }}
 				<q-popup-proxy
@@ -24,7 +24,7 @@
 							filled
 							square
 							dense
-							utofocus
+							autofocus
 							label="Initiative"
 							type="number"
 							color="white"
@@ -47,39 +47,8 @@
 				</q-popup-proxy>
 			</span>
 
-			<!-- HIDDEN -->
-			<div
-				class="img-wrapper"
-				:style="
-					entity.color_label
-						? `border-color: ${entity.color_label}; color: color: ${entity.color_label}`
-						: ``
-				"
-			>
-				<span class="img" v-if="entity.hidden">
-					<i aria-hidden="true" class="fas fa-eye-slash red" />
-					<q-tooltip anchor="top middle" self="center middle"> Hidden </q-tooltip>
-				</span>
-				<span class="img" v-else-if="entity.transformed">
-					<i aria-hidden="true" class="fas fa-paw-claws" />
-					<q-tooltip anchor="top middle" self="center middle"> Transformed </q-tooltip>
-				</span>
-				<span
-					v-else
-					class="img"
-					:style="{
-						'background-image': entity.img ? 'url(' + entity.img + ')' : '',
-						'border-color': entity.color_label ? entity.color_label : ``,
-						color: entity.color_label ? entity.color_label : ``,
-					}"
-				>
-					<i
-						aria-hidden="true"
-						v-if="!entity.img"
-						:class="`hki-${entity.entityType === 'npc' ? 'monster' : entity.entityType}`"
-					/>
-				</span>
-
+			<!-- AVATAR -->
+			<TargetAvatar :entity="entity">
 				<q-popup-proxy
 					v-if="entity.entityType === 'npc'"
 					:dark="$store.getters.theme === 'dark'"
@@ -119,7 +88,7 @@
 						</div>
 					</div>
 				</q-popup-proxy>
-			</div>
+			</TargetAvatar>
 
 			<!-- ARMOR CLASS -->
 			<div class="ac_wrapper" @click.stop>
@@ -216,7 +185,7 @@
 
 			<!-- HEALTH BAR -->
 			<q-linear-progress
-				size="35px"
+				size="40px"
 				:value="percentage(displayStats().curHp, displayStats().maxHp)"
 				:color="hpBarColor((displayStats().curHp / displayStats().maxHp) * 100)"
 			>
@@ -448,9 +417,13 @@
 
 <script>
 import { mapGetters, mapActions } from "vuex";
+import TargetAvatar from "./TargetAvatar.vue";
 
 export default {
 	name: "TargetItem",
+	components: {
+		TargetAvatar,
+	},
 	props: {
 		item: {
 			type: String,

diff --git a/src/components/combat/Targeted.vue b/src/components/combat/Targeted.vue
@@ -184,7 +184,8 @@ export default {
 				},
 				{
 					option: "transform",
-					method: () => this.setDrawer({ show: true, type: "drawers/Transform", data: this.target }),
+					method: () =>
+						this.setDrawer({ show: true, type: "drawers/Transform", data: this.target }),
 					key: ["t"],
 					icon: "fa-paw-claws",
 					tooltip: "[t] Transform",
@@ -347,16 +348,16 @@ export default {
 	}
 	.health {
 		display: grid;
-		grid-template-columns: 1fr 35px;
-		grid-template-rows: 35px;
+		grid-template-columns: 1fr 40px;
+		grid-template-rows: 40px;
 		grid-gap: 0;
 		background: $neutral-8;
 
 		.clear {
 			display: block;
-			width: 35px;
-			height: 35px;
-			line-height: 35px;
+			width: 40px;
+			height: 40px;
+			line-height: 40px;
 			font-size: 15px;
 			text-align: center;
 		}

diff --git a/src/components/combat/actions/Actions.vue b/src/components/combat/actions/Actions.vue
@@ -18,26 +18,7 @@
 				<template v-slot:selected>
 					<q-item v-if="doneBy" class="selected">
 						<q-item-section avatar>
-							<span
-								class="img"
-								:style="{
-									'background-image': 'url(' + entitiesList[doneBy].img + ')',
-									'border-color': entitiesList[doneBy].color_label
-										? entitiesList[doneBy].color_label
-										: ``,
-									color: entitiesList[doneBy].color_label ? entitiesList[doneBy].color_label : ``,
-								}"
-							>
-								<i
-									aria-hidden="true"
-									v-if="!entitiesList[doneBy].img"
-									:class="`hki-${
-										entitiesList[doneBy].entityType === 'npc'
-											? 'monster'
-											: entitiesList[doneBy].entityType
-									}`"
-								/>
-							</span>
+							<TargetAvatar :entity="entitiesList[doneBy]" class="img" :icons="false" />
 						</q-item-section>
 						<q-item-section>
 							<q-item-label v-text="entitiesList[doneBy].name.capitalizeEach()" />
@@ -48,22 +29,7 @@
 				<template v-slot:option="scope">
 					<q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
 						<q-item-section avatar>
-							<span
-								class="img"
-								:style="{
-									'background-image': 'url(' + scope.opt.img + ')',
-									'border-color': scope.opt.color_label ? scope.opt.color_label : ``,
-									color: scope.opt.color_label ? scope.opt.color_label : ``,
-								}"
-							>
-								<i
-									aria-hidden="true"
-									v-if="!scope.opt.img"
-									:class="`hki-${
-										scope.opt.entityType === 'npc' ? 'monster' : scope.opt.entityType
-									}`"
-								/>
-							</span>
+							<TargetAvatar :entity="scope.opt" class="img" :icons="false" />
 						</q-item-section>
 						<q-item-section>
 							<q-item-label v-text="scope.opt.name?.capitalizeEach()" />
@@ -151,13 +117,15 @@ import Custom from "src/components/combat/actions/custom";
 import Roll from "src/components/combat/actions/Roll.vue";
 import Spellcasting from "src/components/combat/actions/Spellcasting.vue";
 import { damage_types } from "src/utils/generalConstants";
+import TargetAvatar from "../TargetAvatar.vue";
 
 export default {
 	name: "Actions",
 	components: {
 		Custom,
 		Roll,
 		Spellcasting,
+		TargetAvatar,
 	},
 	mixins: [setHP],
 	props: {
@@ -295,12 +263,11 @@ export default {
 .modes {
 	&::v-deep {
 		.q-tabs {
-			
 			&__content {
 				padding: 10px;
 				margin: -10px;
 				gap: 0.5rem;
-				
+
 				.q-tab {
 					border: solid 1px transparent;
 					border-radius: $border-radius;
@@ -315,7 +282,6 @@ export default {
 	}
 }
 
-
 .q-tab-panel {
 	padding: 15px 0 0 0 !important;
 }

diff --git a/src/components/combat/initiative/NPCs.vue b/src/components/combat/initiative/NPCs.vue
@@ -8,16 +8,7 @@
 
 		<ul class="entities hasImg">
 			<li v-for="(entity, i) in npcs" :key="entity.key">
-				<span
-					class="img pointer"
-					:style="{
-						'background-image': entity.img ? 'url(' + entity.img + ')' : '',
-						'border-color': entity.color_label ? entity.color_label : ``,
-						color: entity.color_label ? entity.color_label : ``,
-					}"
-				>
-					<i aria-hidden="true" v-if="!entity.img" :class="`hki-monster`" />
-				</span>
+				<TargetAvatar :entity="entity" class="img pointer" :icons="false" />
 				<div class="truncate">
 					<q-checkbox
 						:dark="$store.getters.theme === 'dark'"
@@ -79,9 +70,13 @@
 import { mapGetters, mapActions } from "vuex";
 import { dice } from "src/mixins/dice.js";
 import { general } from "src/mixins/general.js";
+import TargetAvatar from "../TargetAvatar.vue";
 
 export default {
 	name: "SetInitiativeNPC",
+	components: {
+		TargetAvatar,
+	},
 	mixins: [general, dice],
 	props: ["npcs"],
 	data() {

diff --git a/src/components/combat/initiative/Overview.vue b/src/components/combat/initiative/Overview.vue
@@ -28,28 +28,7 @@
 				@keydown.h="set_hidden({ key: entity.key, hidden: !entity.hidden })"
 				@keydown.a="set_active({ key: entity.key, active: false })"
 			>
-				<span v-if="entity.hidden" class="img"
-					><i aria-hidden="true" class="fas fa-eye-slash red"></i
-				></span>
-				<span v-else-if="entity.reminders.surprised" class="img orange"
-					><i aria-hidden="true" class="hki hki-surprised"></i
-				></span>
-				<template v-else>
-					<span
-						class="img"
-						:style="{
-							'background-image': entity.img ? 'url(' + entity.img + ')' : '',
-							'border-color': entity.color_label ? entity.color_label : ``,
-							color: entity.color_label ? entity.color_label : ``,
-						}"
-					>
-						<i
-							aria-hidden="true"
-							v-if="!entity.img"
-							:class="`hki-${entity.entityType === 'npc' ? 'monster' : entity.entityType}`"
-						/>
-					</span>
-				</template>
+				<TargetAvatar :entity="entity" class="img" />
 				<div class="overview-item">
 					<div class="name truncate">{{ entity.name.capitalizeEach() }}</div>
 					<strong class="blue initiative">{{ entity.initiative }}</strong>
@@ -138,10 +117,14 @@
 import { mapActions } from "vuex";
 import { general } from "src/mixins/general.js";
 import { remindersMixin } from "src/mixins/reminders";
+import TargetAvatar from "../TargetAvatar.vue";
 
 export default {
 	name: "SetInitiativeNPC",
 	mixins: [general, remindersMixin],
+	components: {
+		TargetAvatar,
+	},
 	props: ["active", "idle"],
 	methods: {
 		...mapActions([