Revamped Combat Tracker

src/components/Drawer.vue

@@ -1,9 +1,11 @@
 <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>
+			<i aria-hidden="true" class="far fa-chevron-double-right mr-2" />
+			<hk-show-keybind :binds="['esc']" />
+			<q-tooltip anchor="bottom middle" self="center middle">
+				Hide <hk-show-keybind :binds="['esc']" show />
+			</q-tooltip>
 		</a>
 		<q-scroll-area :dark="$store.getters.theme === 'dark'" :thumb-style="{ width: '5px' }">
 			<div class="drawer__content" :class="drawer.classes">

src/components/combat/DeathSaves.vue

@@ -1,63 +1,76 @@
 <template>
-	<div>
-		<template v-if="target.curHp === 0 && !target.stable && !target.dead">
-			<a
-				class="btn btn-sm btn-clear"
-				@click="setDrawer({ show: true, type: 'drawers/DeathSaves' })"
-			>
-				What is this <i aria-hidden="true" class="fas fa-question"></i>
-			</a>
-			<div class="px-1 my-3 d-flex justify-content-between saves">
-				<div v-for="(n, index) in 5" :key="index">
-					<template v-if="Object.keys(target.saves).length == n">
-						<a v-show="target.saves[n] === 'succes'" class="green" @click="save('unset', n)">
-							<i aria-hidden="true" class="fas fa-check-circle"></i>
-							<q-tooltip anchor="top middle" self="center middle"> Undo </q-tooltip>
-						</a>
-						<a v-show="target.saves[n] === 'fail'" class="red" @click="save('unset', n)">
-							<i aria-hidden="true" class="fas fa-times-circle"></i>
-							<q-tooltip anchor="top middle" self="center middle"> Undo </q-tooltip>
-						</a>
-					</template>
-					<template v-else>
-						<span v-show="target.saves[n] === 'succes'" class="green"
-							><i aria-hidden="true" class="fas fa-check-circle"></i
-						></span>
-						<span v-show="target.saves[n] === 'fail'" class="red"
-							><i aria-hidden="true" class="fas fa-times-circle"></i
-						></span>
-					</template>
-					<span v-show="!target.saves[n]" class="neutral-2"
-						><i aria-hidden="true" class="fas fa-dot-circle"></i
-					></span>
-				</div>
-			</div>
-			<div v-if="Object.keys(target.saves).length < 5" class="d-flex gap-1 justify-content-between">
+	<div v-if="target.curHp === 0 && !target.stable && !target.dead" class="saves__wrapper">
+		<div v-if="showActions" class="d-flex gap-1 justify-content-between items-center">
+			<template v-if="Object.keys(target.saves).length < 5 && death_fails < 3 && !target.dead">
 				<button
-					class="btn btn-block save bg-green"
+					class="btn btn-block bg-neutral-5"
 					@click="save('succes', Object.keys(target.saves).length)"
 				>
-					<i aria-hidden="true" class="fas fa-check"></i>
+					<i aria-hidden="true" class="fas fa-check green mr-1" /> Save
 				</button>
 				<button
-					class="btn btn-block save bg-red"
+					class="btn btn-block bg-neutral-5"
 					@click="save('fail', Object.keys(target.saves).length)"
 				>
-					<i aria-hidden="true" class="fas fa-times"></i>
+					<i aria-hidden="true" class="fas fa-times red mr-1" /> Fail
 				</button>
-			</div>
-			<a v-if="death_fails >= 3" class="btn btn-block bg-red my-3" @click="kill_revive(false)"
-				><i aria-hidden="true" class="fas fa-skull"></i>
-				{{ target.entityType.capitalize() }} died</a
+			</template>
+			<button
+				v-if="death_fails >= 3"
+				class="btn btn-block bg-neutral-5"
+				@click="kill_revive(false)"
 			>
-			<a class="btn btn-block my-3" @click="set_stable({ key: target.key, action: 'set' })"
-				><i aria-hidden="true" class="fas fa-heartbeat"></i> Stabilize</a
-			>
-		</template>
-		<a v-else-if="target.dead" class="btn bg-green btn-block my-3" @click="kill_revive(true)"
-			><i aria-hidden="true" class="fas fa-hand-holding-magic"></i> Revive</a
-		>
+				<i aria-hidden="true" class="fas fa-skull red mr-1" />
+				{{ target.entityType.capitalize() }} died
+			</button>
+			<button class="btn btn-block bg-neutral-5" @click="stabilize">
+				<i aria-hidden="true" class="fas fa-heartbeat mr-1" /> Stabilize
+			</button>
+		</div>
+		<div class="d-flex justify-content-start gap-1 items-center saves">
+			<div v-for="(n, index) in 5" :key="index">
+				<template v-if="Object.keys(target.saves).length == n">
+					<button
+						v-show="target.saves[n] === 'succes'"
+						class="green pointer"
+						@click="save('unset', n)"
+					>
+						<i aria-hidden="true" class="fas fa-check-circle" />
+						<q-tooltip anchor="top middle" self="center middle"> Undo </q-tooltip>
+					</button>
+					<button v-show="target.saves[n] === 'fail'" class="red pointer" @click="save('unset', n)">
+						<i aria-hidden="true" class="fas fa-times-circle" />
+						<q-tooltip anchor="top middle" self="center middle"> Undo </q-tooltip>
+					</button>
+				</template>
+				<template v-else>
+					<span v-show="target.saves[n] === 'succes'" class="green">
+						<i aria-hidden="true" class="fas fa-check-circle" />
+					</span>
+					<span v-show="target.saves[n] === 'fail'" class="red">
+						<i aria-hidden="true" class="fas fa-times-circle" />
+					</span>
+				</template>
+				<span v-show="!target.saves[n]" class="neutral-2">
+					<i aria-hidden="true" class="fas fa-skull" />
+				</span>
+			</div>
+		</div>
 	</div>
+	<button
+		v-else-if="target.dead && showActions"
+		class="btn bg-neutral-5"
+		@click="kill_revive(true)"
+	>
+		<i aria-hidden="true" class="fas fa-hand-holding-magic mr-1" /> Revive
+	</button>
+	<button
+		v-else-if="target.stable && showActions"
+		class="btn bg-neutral-5"
+		@click="set_stable({ key: target.key, action: 'unset' })"
+	>
+		<i aria-hidden="true" class="fas fa-heart-broken mr-1" /> Destabilize
+	</button>
 </template>
 
 <script>
@@ -67,7 +80,16 @@ import { dice } from "src/mixins/dice.js";
 export default {
 	name: "DeathSaves",
 	mixins: [dice],
-	props: ["target"],
+	props: {
+		target: {
+			type: Object,
+			required: true,
+		},
+		showActions: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	computed: {
 		...mapGetters(["entities", "targeted"]),
 		death_fails() {
@@ -81,7 +103,7 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions(["setDrawer", "set_save", "set_dead", "set_stable"]),
+		...mapActions(["set_save", "set_dead", "set_stable"]),
 		save(check, index) {
 			this.set_save({
 				key: this.target.key,
@@ -108,6 +130,15 @@ export default {
 
 <style lang="scss" scoped>
 .saves {
-	font-size: 20px;
+	font-size: 18px;
+
+	&__wrapper {
+		display: flex;
+		gap: 10px;
+
+		button {
+			white-space: nowrap;
+		}
+	}
 }
 </style>

src/components/combat/Finished.vue

@@ -185,7 +185,7 @@
 								<q-tab-panel name="dmg">
 									<div class="row q-col-gutter-md">
 										<div class="col-12 col-md-6">
-											<Dmg />
+											<DamageMeters />
 										</div>
 										<div class="col-12 col-md-6">
 											<h2>Log</h2>
@@ -212,8 +212,8 @@
 </template>
 
 <script>
-import Dmg from "src/components/combat/side/Dmg.vue";
-import Log from "src/components/combat/side/Log.vue";
+import DamageMeters from "src/components/combat/side/DamageMeters.vue";
+import Log from "src/components/combat/legacy/side/Log.vue";
 import { currencyMixin } from "src/mixins/currency.js";
 import { mapActions, mapGetters } from "vuex";
 
@@ -222,7 +222,7 @@ export default {
 	props: ["encounter"],
 	mixins: [currencyMixin],
 	components: {
-		Dmg,
+		DamageMeters,
 		Log,
 		Players: () => import("src/components/campaign/Players.vue"),
 	},

src/components/combat/Pane.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="combat-pane" @focus="$emit('focus')">
+		<div class="combat-pane__header">
+			<div class="combat-pane__header-title">
+				<slot name="header-title">
+					{{ title }}
+				</slot>
+			</div>
+			<slot name="header-action" />
+		</div>
+		<q-scroll-area
+			:dark="$store.getters.theme === 'dark'"
+			:thumb-style="{ width: '5px' }"
+			:class="{ shadow: scroll > 0 }"
+			@scroll="setScroll"
+		>
+			<div class="combat-pane__content">
+				<slot />
+			</div>
+		</q-scroll-area>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "CombatTrackerPane",
+	props: {
+		title: {
+			type: String,
+		},
+	},
+	data() {
+		return {
+			scroll: 0,
+		};
+	},
+	methods: {
+		setScroll(e) {
+			this.scroll = e.verticalPosition;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.combat-pane {
+	background-color: $neutral-6-transparent;
+	border-radius: $border-radius;
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: $neutral-8;
+		padding: 0 10px;
+		min-height: 51px;
+		border-top-left-radius: inherit;
+		border-top-right-radius: inherit;
+
+		&.shadow {
+			box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
+		}
+
+		&-title {
+			font-size: 18px;
+			font-weight: bold;
+		}
+	}
+	&__content {
+		padding: 10px;
+	}
+	.q-scrollarea {
+		position: relative;
+		height: calc(100% - 52px);
+		max-width: 100%;
+
+		// Position relative on scrollarea__content causes target items to overflow horizontally
+		&::v-deep {
+			.q-scrollarea__content {
+				position: unset;
+			}
+		}
+
+		&:before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 10;
+			pointer-events: none;
+		}
+		&.shadow:before {
+			box-shadow: inset 0px 15px 15px -20px $black;
+		}
+	}
+}
+
+@media only screen and (max-width: 576px) {
+	.combat-pane {
+		&__header {
+			&-title {
+				font-size: 15px;
+			}
+		}
+	}
+}
+</style>