jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added spell slot display, improved resource card

Browse Source
This commit is contained in:
Stefan Zermatten
2019-02-26 16:37:19 +02:00
parent 8305596373
commit 687b517164
7 changed files with 233 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/imports/ui/StoryBook.vue
View File

@@ -54,6 +54,7 @@
import ResourceCard from '/imports/ui/components/attributes/ResourceCard.Story.vue';
import SkillListTile from '/imports/ui/components/skills/SkillListTile.Story.vue';
import SmartInput from '/imports/ui/components/global/SmartInput.Story.vue';
import SpellSlotListTile from '/imports/ui/components/attributes/SpellSlotListTile.Story.vue';
import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
export default {
@@ -73,6 +74,7 @@
ResourceCard,
SkillListTile,
SmartInput,
SpellSlotListTile,
ToolbarLayout,
},
data(){ return {

39
app/imports/ui/character/StatsTab.vue
View File

@@ -100,6 +100,22 @@
/>
</div>
<div class="spell-slots" v-if="spellSlots.length">
<v-card>
<v-list>
<v-subheader>Spell Slots</v-subheader>
<spell-slot-list-tile
v-for="spellSlot in spellSlots"
v-bind="spellSlot"
:key="spellSlot._id"
:data-id="spellSlot._id"
@click="clickAttribute({_id: spellSlot._id})"
@change="e => incrementChange(spellSlot._id, e)"
/>
</v-list>
</v-card>
</div>
</column-layout>
<v-btn fixed fab bottom right
@@ -123,6 +139,7 @@
import HitDiceListTile from '/imports/ui/components/attributes/HitDiceListTile.vue';
import SkillListTile from '/imports/ui/components/skills/SkillListTile.vue';
import ResourceCard from '/imports/ui/components/attributes/ResourceCard.vue';
import SpellSlotListTile from '/imports/ui/components/attributes/SpellSlotListTile.vue';
import { adjustAttribute, insertAttribute } from '/imports/api/creature/properties/Attributes.js';
@@ -130,6 +147,16 @@
return Attributes.find({charId, type}, {sort: {order: 1}});
};
const getNonZeroAttributeOfType = function(charId, type){
return Attributes.find({
charId,
type,
value: {$ne: 0},
}, {
sort: {order: 1}
});
};
export default {
props: {
charId: String,
@@ -142,6 +169,7 @@
HitDiceListTile,
SkillListTile,
ResourceCard,
SpellSlotListTile,
},
meteor: {
abilities(){
@@ -154,13 +182,10 @@
return getAttributeOfType(this.charId, 'modifier');
},
resources(){
return Attributes.find({
charId: this.charId,
type: 'resource',
value: {$ne: 0},
}, {
sort: {order: 1}
});
return getNonZeroAttributeOfType(this.charId, 'resource');
},
spellSlots(){
return getNonZeroAttributeOfType(this.charId, 'spellSlot');
},
hitDice(){
return Attributes.find({

8
app/imports/ui/components/attributes/AttributeCard.vue
View File

@@ -1,14 +1,14 @@
<template lang="html">
<v-card :hover="hasClickListener" @click="click">
<v-card-text>
<v-layout row align-center>
<div class="layout row align-center">
<div class="value display-1 mr-1">
{{modifier ? signed(value) : value}}
</div>
<v-flex class="name text-truncate">
<div class="name text-truncate">
{{name}}
</v-flex>
</v-layout>
</div>
</div>
</v-card-text>
</v-card>
</template>

4
app/imports/ui/components/attributes/HitDiceListTile.vue
View File

@@ -5,10 +5,10 @@
<v-layout row align-center class="left">
<v-layout column class="buttons" justify-center>
<v-btn icon flat :disabled="value >= maxValue" @click="increment(1)">
<v-btn icon small :disabled="value >= maxValue" @click="increment(1)">
<v-icon>arrow_drop_up</v-icon>
</v-btn>
<v-btn icon flat :disabled="value <= 0" @click="increment(-1)">
<v-btn icon small :disabled="value <= 0" @click="increment(-1)">
<v-icon>arrow_drop_down</v-icon>
</v-btn>
</v-layout>

50
app/imports/ui/components/attributes/ResourceCard.vue
View File

@@ -1,26 +1,28 @@
<template lang="html">
<v-card>
<div class="layout row align-center" :class="{hover}">
<div class="buttons layout column justify-center">
<v-btn icon flat :disabled="currentValue >= value" @click="increment(1)">
<v-icon>arrow_drop_up</v-icon>
</v-btn>
<v-btn icon flat :disabled="currentValue <= 0" @click="increment(-1)">
<v-icon>arrow_drop_down</v-icon>
</v-btn>
</div>
<div class="layout row value" style="align-items: baseline;">
<div class="display-1">{{currentValue}}</div>
<div class="title ml-2 max-value">/{{value}}</div>
</div>
<v-card-text
class="content text-truncate"
@click="click"
@mouseover="hover = true"
@mouseleave="hover = false"
>
<v-card class="resource-card layout row" :class="hover ? 'elevation-8': ''">
<div class="buttons layout column justify-center pl-3">
<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
<v-icon>arrow_drop_up</v-icon>
</v-btn>
<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
<v-icon>arrow_drop_down</v-icon>
</v-btn>
</div>
<div
class="layout row align-center value pl-2 pr-3"
>
<div class="display-1">{{currentValue}}</div>
<div class="title ml-2 max-value">/{{value}}</div>
</div>
<div
class="content layout row align-center pr-3"
@click="click"
@mouseover="hover = true"
@mouseleave="hover = false"
>
<div class="text-truncate ">
{{name}}
</v-card-text>
</div>
</div>
</v-card>
</template>
@@ -54,11 +56,13 @@
</script>
<style lang="css" scoped>
.buttons {
height: 100%;
.resource-card > div {
padding-top: 16px;
padding-bottom: 16px;
}
.buttons, .value {
flex-shrink: 0;
flex-grow: 0;
}
.buttons > .v-btn {
margin: 0;

44
app/imports/ui/components/attributes/SpellSlotListTile.Story.vue Normal file
View File

@@ -0,0 +1,44 @@
<template lang="html">
<v-list>
<spell-slot-list-tile
v-for="(slot, index) in spellSlots"
:key="'tile ' + index"
v-bind="slot"
@change="e => spellSlots[index].adjustment += e.value"
/>
</v-list>
</template>
<script>
import SpellSlotListTile from '/imports/ui/components/attributes/SpellSlotListTile.vue';
export default {
components: {
SpellSlotListTile,
},
data(){return {
spellSlots: [
{
name: "Level 1",
value: 4,
adjustment: -2,
}, {
name: "Level 1",
value: 1,
adjustment: 0,
}, {
name: "Level 2",
value: 12,
adjustment: -8,
}, {
name: "Level 3",
value: 10,
adjustment: -5,
},
],
}}
};
</script>
<style lang="css" scoped>
</style>

122
app/imports/ui/components/attributes/SpellSlotListTile.vue Normal file
View File

@@ -0,0 +1,122 @@
<template lang="html">
<v-list-tile class="spell-slot-list-tile" :class="{hover}">
<v-list-tile-action>
<div class="layout row align-center" v-if="value > 4">
<div class="buttons layout column justify-center">
<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
<v-icon>arrow_drop_up</v-icon>
</v-btn>
<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
<v-icon>arrow_drop_down</v-icon>
</v-btn>
</div>
<div class="layout row value" style="align-items: baseline;">
<div class="display-1">{{currentValue}}</div>
<div class="title ml-2 max-value">/{{value}}</div>
</div>
</div>
<div class="layout row align-center justify-end slot-buttons" v-else>
<v-btn
icon
small
v-for="i in value"
:disabled="!(i === currentValue || i === currentValue + 1)"
:key="i"
@click="increment(i > currentValue ? 1 : -1)"
>
<v-icon>{{
i > 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}}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<script>
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
export default {
data(){ return{
hover: false,
}},
props: {
_id: String,
name: String,
color: String,
value: Number,
adjustment: {
type: Number,
default: 0,
},
},
computed: {
currentValue(){
return this.value + (this.adjustment || 0);
},
},
methods: {
signed: numberToSignedString,
click(e){
this.$emit('click', e);
},
increment(value){
this.$emit('change', {type: 'increment', value})
},
},
};
</script>
<style lang="css" scoped>
.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;
}
.spell-slot-list-tile.hover {
background: #f5f5f5 !important;
}
.theme--dark .spell-slot-list-tile.hover {
background: #515151 !important;
}
.content {
cursor: pointer;
}
.max-value {
color: rgba(0,0,0,.54);
}
.theme--dark .max-value {
color: rgba(255, 255, 255, 0.54);
}
</style>