Improved grid

Author: Lakeyzer

src/components/combat/actor/index.vue

@@ -1,20 +1,20 @@
 <template>
 	<div class="actor">
 		<div class="actor__actions">
-			<SelectActor :actor="actor" :_active="_active" :out-of-turn="outOfTurn" />
+			<SelectActor :actor="active_actor" :_active="_active" :out-of-turn="outOfTurn" />
 			<DeathSaves
-				v-if="actor.entityType === 'player' && actor.curHp === 0"
+				v-if="active_actor.entityType === 'player' && active_actor.curHp === 0"
 				:target="actor"
 				show-actions
 			/>
-			<Manual v-else :actor="actor" />
-			<template v-if="actor.entityType !== 'player'">
-				<Actions :actor="actor" :key="`actions-${actor.key}`" />
-				<Spells :actor="actor" :key="`spells-${actor.key}`" />
+			<Manual v-else :actor="active_actor" />
+			<template v-if="active_actor.entityType !== 'player'">
+				<Actions :actor="active_actor" :key="`actions-${active_actor.key}`" />
+				<Spells :actor="active_actor" :key="`spells-${active_actor.key}`" />
 			</template>
-			<Target v-if="targeted?.length" :actor="actor" />
+			<Target v-if="targeted?.length" :actor="active_actor" />
 		</div>
-		<Details :actor="actor" />
+		<Details :actor="active_actor" />
 	</div>
 </template>
 
@@ -40,7 +40,7 @@ export default {
 		Target,
 	},
 	props: {
-		actor: {
+		current: {
 			type: Object,
 		},
 		_active: {
@@ -56,8 +56,14 @@ export default {
 		return {};
 	},
 	computed: {
-		...mapGetters(["encounter", "targeted"]),
+		...mapGetters(["encounter", "actor", "targeted"]),
 		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
+		active_actor() {
+			return this.actor || this.current;
+		},
+		out_of_turn() {
+			return this.actor && this.actor.key !== this.current.key;
+		},
 	},
 	methods: {
 		...mapActions(["set_turn", "set_targeted", "update_round", "demo"]),
@@ -67,6 +73,7 @@ export default {
 
 <style lang="scss" scoped>
 .actor {
+	grid-area: actor;
 	display: flex;
 	flex-direction: column;
 	gap: 5px;

src/components/combat/entities/Avatar.vue

@@ -15,6 +15,7 @@
 			borderColor: entity.color_label ? entity.color_label : ``,
 			width: `${size}px`,
 			minWidth: `${size}px`,
+			lineHeight: `${size}px`,
 			fontSize: `${font_size}px`,
 		}"
 	>

src/components/combat/top/Target.vue

@@ -21,7 +21,7 @@
 				<div v-else-if="targeted.includes(actor.key)" class="target__targeted-self">
 					Targeted self
 				</div>
-				<Name v-else :entity="target" />
+				<Name v-else :entity="target" class="truncate" />
 			</div>
 			<Avatar :size="60" :key="key" :entity="target" />
 		</template>
@@ -90,9 +90,12 @@ export default {
 	align-items: center;
 	gap: 10px;
 	flex-grow: 1;
+	min-width: 0;
+	overflow: hidden;
 
 	.entity-name {
 		font-weight: bold;
+		min-width: 0;
 	}
 	.multi {
 		color: $neutral-2;
@@ -109,6 +112,7 @@ export default {
 		gap: 3px;
 		justify-content: center;
 		align-items: flex-end;
+		min-width: 0;
 	}
 	&__targeted-self {
 		background-color: $orange;

src/components/combat/top/index.vue

@@ -33,29 +33,20 @@
 				</span>
 			</div>
 		</div>
-		<div class="top__main">
-			<Actor :actor="active_actor" :_active="_active" :out-of-turn="out_of_turn" />
-			<Log />
-		</div>
 	</div>
 </template>
 
 <script>
 import { mapActions, mapGetters } from "vuex";
 import Menu from "./Menu.vue";
-import Actor from "../actor";
-import Log from "./log";
 import EncounterProgress from "./EncounterProgress.vue";
 import { remindersMixin } from "src/mixins/reminders";
 import { dice } from "src/mixins/dice";
 
-
 export default {
 	name: "CombatTop",
 	components: {
 		Menu,
-		Actor,
-		Log,
 		EncounterProgress,
 	},
 	props: {
@@ -82,12 +73,6 @@ export default {
 	},
 	computed: {
 		...mapGetters(["encounter", "actor", "broadcast", "turn", "test", "demo"]),
-		active_actor() {
-			return this.actor || this.current;
-		},
-		out_of_turn() {
-			return this.actor && this.actor.key !== this.current.key;
-		},
 		timer() {
 			return this.settings ? this.settings.timer : 0;
 		},
@@ -98,7 +83,6 @@ export default {
 	watch: {
 		//Watch turn to trigger reminders when an entity starts their turn
 		turn(newVal, oldVal) {
-			console.log('New turn');
 			this.checkReminders(this.current, "startTurn");
 
 			//Check if the turn went up or down	considering round changes
@@ -126,7 +110,15 @@ export default {
 							if ((ability.limit && ability.limit_type === "turn") || ability.recharge) {
 								let remove = true;
 								// For recharge, roll to see if the ability is regained
-								console.log("ability", ability, ability.recharge, this.current, this.current.limited_uses, category, index);
+								console.log(
+									"ability",
+									ability,
+									ability.recharge,
+									this.current,
+									this.current.limited_uses,
+									category,
+									index
+								);
 								if (
 									ability.recharge &&
 									ability.recharge !== "rest" &&
@@ -202,23 +194,5 @@ export default {
 			justify-content: flex-end;
 		}
 	}
-	&__main {
-		display: flex;
-		justify-content: flex-start;
-		align-items: stretch;
-		gap: 5px;
-
-		.combat-log {
-			background-color: $neutral-6-transparent;
-			border-radius: $border-radius-small;
-			padding: 10px;
-		}
-		.actor {
-			flex-grow: 1;
-		}
-		.combat-log {
-			max-width: 300px;
-		}
-	}
 }
 </style>

src/components/combat/top/log/index.vue

@@ -28,6 +28,9 @@
 				</div>
 			</q-popup-proxy>
 		</template>
+		<div v-else class="combat-log__empty">
+			<div>Combat Log</div>
+		</div>
 	</div>
 </template>
 
@@ -77,5 +80,20 @@ export default {
 
 <style lang="scss" scoped>
 .combat-log {
+	grid-area: log;
+	background-color: $neutral-6;
+	border-radius: $border-radius;
+	padding: 10px;
+
+	&__empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: $neutral-2;
+		text-align: center;
+		font-weight: bold;
+		text-transform: uppercase;
+		height: 100%;
+	}
 }
 </style>

src/views/RunEncounter.vue

@@ -43,7 +43,8 @@
 							:next="_active[encounter.turn + 1]"
 							:settings="settings"
 						/>
-						<Pane title="Actor">
+						<Actor :current="_active[encounter.turn]" :_active="_active" />
+						<Pane title="Actor" style="grid-area: current">
 							<Card :entity="actor || _active[encounter.turn]" />
 						</Pane>
 						<Targets
@@ -63,6 +64,7 @@
 							:class="{ focused: focused_pane === 'targeted' }"
 							@focus="focusPane('targeted')"
 						/>
+						<Log />
 						<Side
 							ref="side"
 							tabindex="0"
@@ -188,6 +190,8 @@ import DemoOverlay from "src/components/combat/DemoOverlay.vue";
 import TutorialFinishedDialog from "src/components/combat/TutorialFinishedDialog.vue";
 import Pane from "src/components/combat/Pane.vue";
 import Card from "src/components/combat/entities/Card";
+import Actor from "src/components/combat/actor";
+import Log from "src/components/combat/top/log";
 
 export default {
 	name: "RunEncounter",
@@ -208,6 +212,8 @@ export default {
 		TutorialFinishedDialog,
 		Pane,
 		Card,
+		Actor,
+		Log,
 	},
 	mixins: [audio],
 	data() {
@@ -525,16 +531,12 @@ export default {
 		padding: 5px;
 		display: grid;
 		grid-template-columns: repeat(3, 1fr) 300px;
-		grid-template-rows: min-content 1fr;
+		grid-template-rows: 32px 125px 1fr;
 		grid-gap: 5px;
 		grid-template-areas:
 			"top top top top"
-			"actor targets targeted side";
-		position: absolute;
-
-		.actor {
-			grid-area: actor;
-		}
+			"actor actor actor log"
+			"current targets targeted side";
 	}
 	.legacy {
 		padding: 5px;