Added spellcasting to the stats page, click the icon next to a spell slot to cast
This commit is contained in:
Stefan Zermatten
@@ -1,86 +1,56 @@
|
||||
<template lang="html">
|
||||
<v-list-tile
|
||||
class="spell-slot-list-tile"
|
||||
:class="{hover}"
|
||||
v-on="hasClickListener ? {click} : {}"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<div
|
||||
v-if="value > 4"
|
||||
class="layout row align-center"
|
||||
>
|
||||
<div class="buttons layout column justify-center">
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="
|
||||
currentValue >= value ||
|
||||
context.editPermission === false
|
||||
"
|
||||
@click="increment(1)"
|
||||
>
|
||||
<v-icon>arrow_drop_up</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="
|
||||
currentValue <= 0 ||
|
||||
context.editPermission === false
|
||||
"
|
||||
@click="increment(-1)"
|
||||
>
|
||||
<v-icon>arrow_drop_down</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
<div
|
||||
v-if="model.value > 4"
|
||||
class="layout row value"
|
||||
style="align-items: baseline;"
|
||||
>
|
||||
<div class="display-1">
|
||||
{{ currentValue }}
|
||||
<div
|
||||
style="font-weight: 500; font-size: 24px"
|
||||
class="current-value"
|
||||
>
|
||||
{{ model.currentValue }}
|
||||
</div>
|
||||
<div class="title ml-2 max-value">
|
||||
/{{ value }}
|
||||
<div class="ml-2 max-value">
|
||||
/{{ model.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="layout row align-center justify-end slot-buttons"
|
||||
>
|
||||
<v-btn
|
||||
v-for="i in value"
|
||||
:key="i"
|
||||
icon
|
||||
small
|
||||
:disabled="
|
||||
!(i === currentValue || i === currentValue + 1) ||
|
||||
context.editPermission === false
|
||||
"
|
||||
@click="increment(i > currentValue ? 1 : -1)"
|
||||
<div
|
||||
v-else
|
||||
class="layout row align-center slot-bubbles"
|
||||
>
|
||||
<v-icon>
|
||||
<v-icon
|
||||
v-for="i in model.value"
|
||||
:key="i"
|
||||
>
|
||||
{{
|
||||
i > currentValue ?
|
||||
i > model.currentValue ?
|
||||
'radio_button_unchecked' :
|
||||
'radio_button_checked'
|
||||
}}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content
|
||||
class="content ml-2"
|
||||
@click="click"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<v-list-tile-title>
|
||||
{{ name }}
|
||||
</div>
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-sub-title>
|
||||
{{ model.name }}
|
||||
</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-avatar v-if="!hideCastButton">
|
||||
<v-btn
|
||||
icon
|
||||
flat
|
||||
class="primary--text"
|
||||
:data-id="`spell-slot-cast-btn-${model._id}`"
|
||||
@click.stop="$emit('cast')"
|
||||
>
|
||||
<v-icon>$vuetify.icons.spell</v-icon>
|
||||
</v-btn>
|
||||
</v-list-tile-avatar>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
|
||||
@@ -88,18 +58,13 @@
|
||||
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
|
||||
export default {
|
||||
props: {
|
||||
_id: String,
|
||||
name: String,
|
||||
color: String,
|
||||
value: Number,
|
||||
damage: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
dark: Boolean,
|
||||
hideCastButton: Boolean,
|
||||
},
|
||||
data(){ return{
|
||||
hover: false,
|
||||
}},
|
||||
inject: {
|
||||
context: { default: {} }
|
||||
},
|
||||
@@ -107,15 +72,15 @@ export default {
|
||||
currentValue(){
|
||||
return this.value - this.damage;
|
||||
},
|
||||
hasClickListener(){
|
||||
return this.$listeners && !!this.$listeners.click;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
signed: numberToSignedString,
|
||||
click(e){
|
||||
this.$emit('click', e);
|
||||
},
|
||||
increment(value){
|
||||
this.$emit('change', {type: 'increment', value})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -124,22 +89,9 @@ export default {
|
||||
.spell-slot-list-tile {
|
||||
background: inherit;
|
||||
}
|
||||
.spell-slot-list-tile >>> .v-list__tile {
|
||||
height: 56px;
|
||||
}
|
||||
.v-list__tile__action {
|
||||
width: 112px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.slot-buttons > .v-btn {
|
||||
margin: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.buttons {
|
||||
height: 100%;
|
||||
}
|
||||
.buttons > .v-btn {
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.spell-slot-list-tile.hover {
|
||||
background: #f5f5f5 !important;
|
||||
@@ -156,4 +108,7 @@ export default {
|
||||
.theme--dark .max-value {
|
||||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
.primary--text .v-icon, .primary--text .max-value, .primary--text .current-value, .primary--text .v-list__tile__sub-title {
|
||||
color: #b71c1c
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<template lang="html">
|
||||
<div
|
||||
v-if="$vuetify.breakpoint.smAndUp"
|
||||
class="layout row split"
|
||||
>
|
||||
<v-list
|
||||
class="left"
|
||||
subheader
|
||||
two-line
|
||||
dense
|
||||
>
|
||||
<v-slide-x-transition
|
||||
group
|
||||
leave-absolute
|
||||
>
|
||||
<slot name="left" />
|
||||
</v-slide-x-transition>
|
||||
</v-list>
|
||||
<v-divider
|
||||
class="mx-3"
|
||||
vertical
|
||||
/>
|
||||
<v-list
|
||||
class="right"
|
||||
subheader
|
||||
two-line
|
||||
dense
|
||||
>
|
||||
<v-slide-x-transition
|
||||
group
|
||||
leave-absolute
|
||||
>
|
||||
<slot name="right" />
|
||||
</v-slide-x-transition>
|
||||
</v-list>
|
||||
</div>
|
||||
<v-list
|
||||
v-else
|
||||
class="small"
|
||||
subheader
|
||||
two-line
|
||||
dense
|
||||
>
|
||||
<v-slide-x-transition
|
||||
group
|
||||
leave-absolute
|
||||
>
|
||||
<slot name="left" />
|
||||
<slot name="right" />
|
||||
</v-slide-x-transition>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.split{
|
||||
height: 100%;
|
||||
}
|
||||
.left, .right {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
flex-basis: 250px;
|
||||
}
|
||||
.right, .small {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<template slot="toolbar">
|
||||
<v-toolbar-title>
|
||||
Cast a Spell
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-input icon="search" />
|
||||
</template>
|
||||
<split-list-layout>
|
||||
<template slot="left">
|
||||
<div
|
||||
key="slot-title"
|
||||
class="title my-3"
|
||||
>
|
||||
Slot
|
||||
</div>
|
||||
<v-list-tile
|
||||
v-if="!(selectedSpell && selectedSpell.level > 0)"
|
||||
key="cantrip-dummy-slot"
|
||||
class="spell-slot-list-tile"
|
||||
:class="{ 'primary--text': selectedSlotId === undefined}"
|
||||
@click="selectedSlotId = undefined"
|
||||
>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title class="title">
|
||||
Cantrip
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<spell-slot-list-tile
|
||||
v-for="spellSlot in spellSlots"
|
||||
:key="spellSlot._id"
|
||||
:model="spellSlot"
|
||||
:class="{ 'primary--text': selectedSlotId === spellSlot._id }"
|
||||
hide-cast-button
|
||||
@click="selectedSlotId = spellSlot._id"
|
||||
/>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<div
|
||||
key="spell-title"
|
||||
class="title my-3"
|
||||
>
|
||||
Spell
|
||||
</div>
|
||||
<template v-for="spell in computedSpells">
|
||||
<v-subheader
|
||||
v-if="spell.isSubheader"
|
||||
:key="`${spell.level}-header`"
|
||||
class="item"
|
||||
>
|
||||
{{ spell.level === 0 ? 'Cantrips' : `Level ${spell.level}` }}
|
||||
</v-subheader>
|
||||
<spell-list-tile
|
||||
v-else
|
||||
:key="spell._id"
|
||||
hide-handle
|
||||
:class="{ 'primary--text': selectedSpellId === spell._id}"
|
||||
:model="spell"
|
||||
@click="selectedSpellId = spell._id"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</split-list-layout>
|
||||
<template slot="actions">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
flat
|
||||
@click="$store.dispatch('popDialogStack')"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn
|
||||
flat
|
||||
:disabled="!canCast"
|
||||
class="primary--text"
|
||||
@click="$store.dispatch('popDialogStack', {
|
||||
spellId: selectedSpellId,
|
||||
slotId: selectedSlotId,
|
||||
})"
|
||||
>
|
||||
Cast
|
||||
</v-btn>
|
||||
</template>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
||||
import SplitListLayout from '/imports/ui/properties/components/attributes/SplitListLayout.vue';
|
||||
import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
|
||||
import spellsWithSubheaders from '/imports/ui/properties/components/spells/spellsWithSubheaders.js';
|
||||
import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
|
||||
import SpellListTile from '/imports/ui/properties/components/spells/SpellListTile.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DialogBase,
|
||||
SplitListLayout,
|
||||
SpellSlotListTile,
|
||||
SpellListTile,
|
||||
},
|
||||
props: {
|
||||
creatureId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
slotId: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
spellId: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
data(){ return {
|
||||
searchString: undefined,
|
||||
selectedSlotId: this.slotId,
|
||||
selectedSpellId: this.spellId,
|
||||
}},
|
||||
computed: {
|
||||
computedSpells(){
|
||||
return spellsWithSubheaders(this.spells);
|
||||
},
|
||||
canCast(){
|
||||
let spell = this.selectedSpell;
|
||||
let slot = this.selectedSlot;
|
||||
if (!spell) return false;
|
||||
if (spell.level === 0){
|
||||
return this.selectedSlotId === undefined;
|
||||
} else if (!slot) {
|
||||
return false
|
||||
} else {
|
||||
return slot.spellSlotLevelValue >= spell.level;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedSpell(spell){
|
||||
if (!spell) return;
|
||||
if(spell.level === 0){
|
||||
this.selectedSlotId = undefined;
|
||||
}
|
||||
},
|
||||
selectedSlot(slot){
|
||||
if (!slot) return;
|
||||
if (!this.selectedSpell) return;
|
||||
if(slot.spellSlotLevelValue > 0 && this.selectedSpell.level === 0){
|
||||
this.selectedSpellId = undefined;
|
||||
}
|
||||
},
|
||||
},
|
||||
meteor: {
|
||||
spells(){
|
||||
let slotLevel = this.selectedSlot && this.selectedSlot.spellSlotLevelValue || 0;
|
||||
return CreatureProperties.find({
|
||||
'ancestors.id': this.creatureId,
|
||||
removed: {$ne: true},
|
||||
inactive: {$ne: true},
|
||||
prepared: true,
|
||||
level: {$lte: slotLevel},
|
||||
}, {
|
||||
sort: {order: 1}
|
||||
});
|
||||
},
|
||||
spellSlots(){
|
||||
let filter = {
|
||||
'ancestors.id': this.creatureId,
|
||||
type: 'attribute',
|
||||
attributeType: 'spellSlot',
|
||||
removed: {$ne: true},
|
||||
inactive: {$ne: true},
|
||||
currentValue: {$gte: 1},
|
||||
};
|
||||
if (this.selectedSpell){
|
||||
filter.spellSlotLevelValue = {$gte: this.selectedSpell.level};
|
||||
}
|
||||
return CreatureProperties.find(filter, {
|
||||
sort: {order: 1},
|
||||
});
|
||||
},
|
||||
selectedSlot(){
|
||||
return CreatureProperties.findOne(this.selectedSlotId);
|
||||
},
|
||||
selectedSpell(){
|
||||
return CreatureProperties.findOne(this.selectedSpellId);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.v-list {
|
||||
flex-basis: 200px;
|
||||
}
|
||||
.v-list.spells {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -40,24 +40,7 @@
|
||||
import draggable from 'vuedraggable';
|
||||
import SpellListTile from '/imports/ui/properties/components/spells/SpellListTile.vue';
|
||||
import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
|
||||
|
||||
function spellsWithSubheaders(spells = []){
|
||||
let result = [];
|
||||
let lastSpell = undefined;
|
||||
let sortedSpells = [...spells].sort((a, b) => a.level - b.level)
|
||||
sortedSpells.forEach(spell => {
|
||||
if (spell.isSubheader) return;
|
||||
if (!lastSpell || spell.level > lastSpell.level){
|
||||
result.push({
|
||||
isSubheader: true,
|
||||
level: spell.level,
|
||||
});
|
||||
}
|
||||
result.push(spell);
|
||||
lastSpell = spell;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
import spellsWithSubheaders from '/imports/ui/properties/components/spells/spellsWithSubheaders.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
@change="setPrepared"
|
||||
/>
|
||||
<v-icon
|
||||
v-else
|
||||
v-else-if="!hideHandle"
|
||||
style="height: 100%; width: 40px; cursor: move;"
|
||||
class="handle"
|
||||
>
|
||||
@@ -45,6 +45,7 @@ export default {
|
||||
mixins: [treeNodeViewMixin],
|
||||
props: {
|
||||
preparingSpells: Boolean,
|
||||
hideHandle: Boolean,
|
||||
},
|
||||
computed: {
|
||||
hasClickListener(){
|
||||
@@ -82,4 +83,7 @@ export default {
|
||||
.spell {
|
||||
background-color: inherit;
|
||||
}
|
||||
.primary--text .v-icon, .primary--text .v-list__tile__sub-title {
|
||||
color: #b71c1c
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
export default function spellsWithSubheaders(spells = []){
|
||||
let result = [];
|
||||
let lastSpell = undefined;
|
||||
let sortedSpells = [...spells].sort((a, b) => a.level - b.level)
|
||||
sortedSpells.forEach(spell => {
|
||||
if (spell.isSubheader) return;
|
||||
if (!lastSpell || spell.level > lastSpell.level){
|
||||
result.push({
|
||||
isSubheader: true,
|
||||
level: spell.level,
|
||||
});
|
||||
}
|
||||
result.push(spell);
|
||||
lastSpell = spell;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
Reference in New Issue
Block a user