Skip to content

Commit d170a64

Browse files
LakeyzerLakeyzer
committed
Improved grid
1 parent 9e73dff commit d170a64

File tree

5 files changed

+59
-54
lines changed

5 files changed

+59
-54
lines changed

‎src/components/combat/actor/index.vue‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<template>
22
<div class="actor">
33
<div class="actor__actions">
4-
<SelectActor :actor="actor" :_active="_active" :out-of-turn="outOfTurn" />
4+
<SelectActor :actor="active_actor" :_active="_active" :out-of-turn="outOfTurn" />
55
<DeathSaves
6-
v-if="actor.entityType === 'player' && actor.curHp === 0"
6+
v-if="active_actor.entityType === 'player' && active_actor.curHp === 0"
77
:target="actor"
88
show-actions
99
/>
10-
<Manual v-else :actor="actor" />
11-
<template v-if="actor.entityType !== 'player'">
12-
<Actions :actor="actor" :key="`actions-${actor.key}`" />
13-
<Spells :actor="actor" :key="`spells-${actor.key}`" />
10+
<Manual v-else :actor="active_actor" />
11+
<template v-if="active_actor.entityType !== 'player'">
12+
<Actions :actor="active_actor" :key="`actions-${active_actor.key}`" />
13+
<Spells :actor="active_actor" :key="`spells-${active_actor.key}`" />
1414
</template>
15-
<Target v-if="targeted?.length" :actor="actor" />
15+
<Target v-if="targeted?.length" :actor="active_actor" />
1616
</div>
17-
<Details :actor="actor" />
17+
<Details :actor="active_actor" />
1818
</div>
1919
</template>
2020

@@ -40,7 +40,7 @@ export default {
4040
Target,
4141
},
4242
props: {
43-
actor: {
43+
current: {
4444
type: Object,
4545
},
4646
_active: {
@@ -56,8 +56,14 @@ export default {
5656
return {};
5757
},
5858
computed: {
59-
...mapGetters(["encounter", "targeted"]),
59+
...mapGetters(["encounter", "actor", "targeted"]),
6060
...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
61+
active_actor() {
62+
return this.actor || this.current;
63+
},
64+
out_of_turn() {
65+
return this.actor && this.actor.key !== this.current.key;
66+
},
6167
},
6268
methods: {
6369
...mapActions(["set_turn", "set_targeted", "update_round", "demo"]),
@@ -67,6 +73,7 @@ export default {
6773

6874
<style lang="scss" scoped>
6975
.actor {
76+
grid-area: actor;
7077
display: flex;
7178
flex-direction: column;
7279
gap: 5px;

‎src/components/combat/top/Target.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div v-else-if="targeted.includes(actor.key)" class="target__targeted-self">
2222
Targeted self
2323
</div>
24-
<Name v-else :entity="target" />
24+
<Name v-else :entity="target" class="truncate" />
2525
</div>
2626
<Avatar :size="60" :key="key" :entity="target" />
2727
</template>
@@ -90,9 +90,12 @@ export default {
9090
align-items: center;
9191
gap: 10px;
9292
flex-grow: 1;
93+
min-width: 0;
94+
overflow: hidden;
9395
9496
.entity-name {
9597
font-weight: bold;
98+
min-width: 0;
9699
}
97100
.multi {
98101
color: $neutral-2;
@@ -109,6 +112,7 @@ export default {
109112
gap: 3px;
110113
justify-content: center;
111114
align-items: flex-end;
115+
min-width: 0;
112116
}
113117
&__targeted-self {
114118
background-color: $orange;

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

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -33,29 +33,20 @@
3333
</span>
3434
</div>
3535
</div>
36-
<div class="top__main">
37-
<Actor :actor="active_actor" :_active="_active" :out-of-turn="out_of_turn" />
38-
<Log />
39-
</div>
4036
</div>
4137
</template>
4238

4339
<script>
4440
import { mapActions, mapGetters } from "vuex";
4541
import Menu from "./Menu.vue";
46-
import Actor from "../actor";
47-
import Log from "./log";
4842
import EncounterProgress from "./EncounterProgress.vue";
4943
import { remindersMixin } from "src/mixins/reminders";
5044
import { dice } from "src/mixins/dice";
5145
52-
5346
export default {
5447
name: "CombatTop",
5548
components: {
5649
Menu,
57-
Actor,
58-
Log,
5950
EncounterProgress,
6051
},
6152
props: {
@@ -82,12 +73,6 @@ export default {
8273
},
8374
computed: {
8475
...mapGetters(["encounter", "actor", "broadcast", "turn", "test", "demo"]),
85-
active_actor() {
86-
return this.actor || this.current;
87-
},
88-
out_of_turn() {
89-
return this.actor && this.actor.key !== this.current.key;
90-
},
9176
timer() {
9277
return this.settings ? this.settings.timer : 0;
9378
},
@@ -98,7 +83,6 @@ export default {
9883
watch: {
9984
//Watch turn to trigger reminders when an entity starts their turn
10085
turn(newVal, oldVal) {
101-
console.log('New turn');
10286
this.checkReminders(this.current, "startTurn");
10387
10488
//Check if the turn went up or down considering round changes
@@ -126,7 +110,15 @@ export default {
126110
if ((ability.limit && ability.limit_type === "turn") || ability.recharge) {
127111
let remove = true;
128112
// For recharge, roll to see if the ability is regained
129-
console.log("ability", ability, ability.recharge, this.current, this.current.limited_uses, category, index);
113+
console.log(
114+
"ability",
115+
ability,
116+
ability.recharge,
117+
this.current,
118+
this.current.limited_uses,
119+
category,
120+
index
121+
);
130122
if (
131123
ability.recharge &&
132124
ability.recharge !== "rest" &&
@@ -202,23 +194,5 @@ export default {
202194
justify-content: flex-end;
203195
}
204196
}
205-
&__main {
206-
display: flex;
207-
justify-content: flex-start;
208-
align-items: stretch;
209-
gap: 5px;
210-
211-
.combat-log {
212-
background-color: $neutral-6-transparent;
213-
border-radius: $border-radius-small;
214-
padding: 10px;
215-
}
216-
.actor {
217-
flex-grow: 1;
218-
}
219-
.combat-log {
220-
max-width: 300px;
221-
}
222-
}
223197
}
224198
</style>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@
2828
</div>
2929
</q-popup-proxy>
3030
</template>
31+
<div v-else class="combat-log__empty">
32+
<div>Combat Log</div>
33+
</div>
3134
</div>
3235
</template>
3336

@@ -77,5 +80,20 @@ export default {
7780
7881
<style lang="scss" scoped>
7982
.combat-log {
83+
grid-area: log;
84+
background-color: $neutral-6;
85+
border-radius: $border-radius;
86+
padding: 10px;
87+
88+
&__empty {
89+
display: flex;
90+
align-items: center;
91+
justify-content: center;
92+
color: $neutral-2;
93+
text-align: center;
94+
font-weight: bold;
95+
text-transform: uppercase;
96+
height: 100%;
97+
}
8098
}
8199
</style>

‎src/views/RunEncounter.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
:next="_active[encounter.turn + 1]"
4444
:settings="settings"
4545
/>
46-
<Pane title="Actor">
46+
<Actor :current="_active[encounter.turn]" :_active="_active" />
47+
<Pane title="Actor" style="grid-area: current">
4748
<Card :entity="actor || _active[encounter.turn]" />
4849
</Pane>
4950
<Targets
@@ -63,6 +64,7 @@
6364
:class="{ focused: focused_pane === 'targeted' }"
6465
@focus="focusPane('targeted')"
6566
/>
67+
<Log />
6668
<Side
6769
ref="side"
6870
tabindex="0"
@@ -188,6 +190,8 @@ import DemoOverlay from "src/components/combat/DemoOverlay.vue";
188190
import TutorialFinishedDialog from "src/components/combat/TutorialFinishedDialog.vue";
189191
import Pane from "src/components/combat/Pane.vue";
190192
import Card from "src/components/combat/entities/Card";
193+
import Actor from "src/components/combat/actor";
194+
import Log from "src/components/combat/top/log";
191195
192196
export default {
193197
name: "RunEncounter",
@@ -208,6 +212,8 @@ export default {
208212
TutorialFinishedDialog,
209213
Pane,
210214
Card,
215+
Actor,
216+
Log,
211217
},
212218
mixins: [audio],
213219
data() {
@@ -525,16 +531,12 @@ export default {
525531
padding: 5px;
526532
display: grid;
527533
grid-template-columns: repeat(3, 1fr) 300px;
528-
grid-template-rows: min-content 1fr;
534+
grid-template-rows: 32px 125px 1fr;
529535
grid-gap: 5px;
530536
grid-template-areas:
531537
"top top top top"
532-
"actor targets targeted side";
533-
position: absolute;
534-
535-
.actor {
536-
grid-area: actor;
537-
}
538+
"actor actor actor log"
539+
"current targets targeted side";
538540
}
539541
.legacy {
540542
padding: 5px;

0 commit comments

Comments
 (0)