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

Added labels to healthBars and improved attribute dialog opening

Browse Source
This commit is contained in:
Stefan Zermatten
2019-01-30 16:38:47 +02:00
parent a80d070533
commit e357b29145
8 changed files with 165 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/imports/api/creature/creatureComputation.js
View File

@@ -92,6 +92,7 @@ function writeCreature(char) {
writeAttributes(char); writeAttributes(char);
writeSkills(char); writeSkills(char);
writeDamageMultipliers(char); writeDamageMultipliers(char);
// TODO write effect results to effect.result
Creatures.update(char.id, {$set: {level: char.level}}); Creatures.update(char.id, {$set: {level: char.level}});
}; };

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

@@ -16,24 +16,26 @@
v-bind="ability" v-bind="ability"
:key="ability._id" :key="ability._id"
:id="`${_uid}-${ability._id}`" :id="`${_uid}-${ability._id}`"
@click="clickAbility({elementId: `${_uid}-${ability._id}`, abilityId: ability._id})" @click="clickAttribute({elementId: `${_uid}-${ability._id}`, _id: ability._id})"
/> />
</template> </template>
</v-list> </v-list>
</v-card> </v-card>
</div> </div>
<div v-for="stat in stats" class="stat"> <div v-for="stat in stats" class="stat" :key="stat._id">
<attribute-card <attribute-card
:name="stat.name" v-bind="stat"
:value="stat.value" :id="`${_uid}-${stat._id}`"
@click="clickAttribute({elementId: `${_uid}-${stat._id}`, _id: stat._id})"
/> />
</div> </div>
<div v-for="modifier in modifiers" class="modifier"> <div v-for="modifier in modifiers" class="modifier">
<attribute-card modifier <attribute-card modifier
:name="modifier.name" v-bind="modifier"
:value="modifier.value" :id="`${_uid}-${modifier._id}`"
@click="clickAttribute({elementId: `${_uid}-${modifier._id}`, _id: modifier._id})"
/> />
</div> </div>
@@ -45,6 +47,9 @@
<v-divider v-if="index !== 0"/> <v-divider v-if="index !== 0"/>
<hit-dice-list-tile <hit-dice-list-tile
v-bind="hitDie" v-bind="hitDie"
:key="hitDie._id"
:id="`${_uid}-${hitDie._id}`"
@click="clickAttribute({elementId: `${_uid}-${hitDie._id}`, _id: hitDie._id})"
/> />
</template> </template>
</v-list> </v-list>
@@ -59,6 +64,8 @@
v-for="save in savingThrows" v-for="save in savingThrows"
v-bind="save" v-bind="save"
:key="save._id" :key="save._id"
:id="`${_uid}-${save._id}`"
@click="clickSkill({elementId: `${_uid}-${save._id}`, _id: save._id})"
/> />
</v-list> </v-list>
</v-card> </v-card>
@@ -72,6 +79,8 @@
v-for="skill in skills" v-for="skill in skills"
v-bind="skill" v-bind="skill"
:key="skill._id" :key="skill._id"
:id="`${_uid}-${skill._id}`"
@click="clickSkill({elementId: `${_uid}-${skill._id}`, _id: skill._id})"
/> />
</v-list> </v-list>
</v-card> </v-card>
@@ -134,6 +143,7 @@
}); });
let conMod = con && con.mod; let conMod = con && con.mod;
return { return {
_id: hd._id,
dice, dice,
conMod, conMod,
key: hd._id, key: hd._id,
@@ -160,11 +170,11 @@
}, },
}, },
methods: { methods: {
clickAbility({elementId, abilityId}){ clickAttribute({elementId, _id}){
this.$store.commit("pushDialogStack", { this.$store.commit("pushDialogStack", {
component: "attribute-dialog-container", component: "attribute-dialog-container",
elementId, elementId,
data: {_id: abilityId}, data: {_id},
}); });
}, },
}, },

24
app/imports/ui/components/AttributeDialog.vue
View File

@@ -3,14 +3,23 @@
<div slot="toolbar"> <div slot="toolbar">
{{name}} {{name}}
</div> </div>
<v-layout align-center column> <v-layout align-center column v-if="type === 'ability'">
<div class="display-3 mod" v-if="typeof mod === 'number'"> <div class="display-3 mod">
{{numberToSignedString(mod)}} {{numberToSignedString(mod)}}
</div> </div>
<div class="display-1 value"> <div class="display-1 ability-value">
{{value}} {{value}}
</div> </div>
</v-layout> </v-layout>
<div class="display-3 attribute-value" v-else-if="type === 'healthBar'">
{{value+adjustment}} / {{value}}
</div>
<div class="display-3 attribute-value" v-else-if="type === 'modifier'">
{{numberToSignedString(value)}}
</div>
<div class="display-3 attribute-value" v-else>
{{value}}
</div>
<div v-if="effects && effects.length"> <div v-if="effects && effects.length">
<h6 class="title">Effects</h6> <h6 class="title">Effects</h6>
<attribute-effect-list :effects="effects" @click="clickedEffect"/> <attribute-effect-list :effects="effects" @click="clickedEffect"/>
@@ -27,8 +36,10 @@
export default { export default {
props: { props: {
name: String, name: String,
type: String,
value: Number, value: Number,
mod: Number, mod: Number,
adjustment: Number,
effects: Array, effects: Array,
}, },
methods: { methods: {
@@ -45,13 +56,16 @@
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.value { .ability-value {
font-weight: 600; font-weight: 600;
font-size: 24px !important; font-size: 24px !important;
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
} }
.mod, .value { .mod, .ability-value {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.attribute-value {
text-align: center;
}
</style> </style>

23
app/imports/ui/components/HealthBar.Story.vue
View File

@@ -1,9 +1,28 @@
<template lang="html"> <template lang="html">
<health-bar <div class="pa-1">
<health-bar
:value="value" :value="value"
:max-value="maxValue" :max-value="maxValue"
name="Hit Points"
@change="healthBarChanged" @change="healthBarChanged"
/> />
<health-bar
:value="50"
:max-value="100"
name="Temporary Hit Points"
/>
<health-bar
:value="70"
:max-value="100"
name="Some other bar"
@change="healthBarChanged"
/>
<health-bar
:value="90"
:max-value="100"
name="Cow"
/>
</div>
</template> </template>
<script> <script>

140
app/imports/ui/components/HealthBar.vue
View File

@@ -1,60 +1,64 @@
<template> <template>
<div style="height: 48px;"> <v-layout row wrap align-center justify-center style="min-height: 48px;" :class="{hover}" class="my-3 white" :id="`${_uid}-${_id}`">
<v-layout column align-center @click="edit" style="height: 100%; cursor: pointer;"> <div class="subheading text-truncate pa-2 name" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('click', {elementId: `${_uid}-${_id}`})">
<v-progress-linear :value="(value / maxValue) * 100" height="20" color="green lighten-1"> {{name}}
</v-progress-linear> </div>
<span class="value" <v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
style="margin-top: -35px; z-index: 1; font-size: 16px; font-weight: 600;" <v-layout column align-center @click="edit" style="cursor: pointer;" class="bar">
> <v-progress-linear :value="(value / maxValue) * 100" height="20" color="green lighten-1" class="ma-0">
{{value}} / {{maxValue}} </v-progress-linear>
</span> <span class="value"
</v-layout> style="margin-top: -20px; z-index: 1; font-size: 16px; font-weight: 600; height: 20px;"
>
{{value}} / {{maxValue}}
</span>
</v-layout>
<transition name="transition">
<v-toolbar
v-if="editing"
justify-center
height="48"
flat
class="transparent toolbar"
>
<v-spacer/>
<v-btn-toggle
v-model="operation"
@click="$refs.editInput.focus()"
class="mr-2"
>
<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>add</v-icon></v-btn>
<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>remove</v-icon></v-btn>
</v-btn-toggle>
<v-text-field solo hide-details
type="number"
v-if="editing"
ref="editInput"
style="max-width: 120px;"
min="0"
:value="editValue"
:prefix="operation === 0 ? '+' : operation === 1 ? '-' : null"
@focus="$event.target.select()"
@keyup.enter="commitEdit"
@keypress.43="operation === 0 ? operation = null : operation = 0"
@keypress.45="operation === 1 ? operation = null : operation = 1"
@keypress="rejectNonNumbers($event)"
>
</v-text-field>
<v-btn small fab @click="commitEdit" class="white">
<v-icon>done</v-icon>
</v-btn>
<v-btn small fab @click="cancelEdit" class="mx-0 white">
<v-icon>close</v-icon>
</v-btn>
<v-spacer/>
</v-toolbar>
</transition>
</v-flex>
<transition name="background-transition"> <transition name="background-transition">
<div v-if="editing" class="page-tint" @click="cancelEdit" /> <div v-if="editing" class="page-tint" @click="cancelEdit" />
</transition> </transition>
<transition name="transition"> </v-layout>
<v-toolbar
v-if="editing"
justify-center
height="48"
flat
class="transparent"
style="margin-top: -46px; z-index: 4;"
>
<v-spacer/>
<v-btn-toggle
v-model="operation"
@click="$refs.editInput.focus()"
class="mr-2"
>
<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>add</v-icon></v-btn>
<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>remove</v-icon></v-btn>
</v-btn-toggle>
<v-text-field solo hide-details
type="number"
v-if="editing"
ref="editInput"
style="max-width: 120px;"
min="0"
:value="editValue"
:prefix="operation === 0 ? '+' : operation === 1 ? '-' : null"
@focus="$event.target.select()"
@keyup.enter="commitEdit"
@keypress.43="operation === 0 ? operation = null : operation = 0"
@keypress.45="operation === 1 ? operation = null : operation = 1"
@keypress="rejectNonNumbers($event)"
>
</v-text-field>
<v-btn small fab @click="commitEdit" class="white">
<v-icon>done</v-icon>
</v-btn>
<v-btn small fab @click="cancelEdit" class="ml-0 white">
<v-icon>close</v-icon>
</v-btn>
<v-spacer/>
</v-toolbar>
</transition>
</div>
</template> </template>
<script> <script>
@@ -63,10 +67,13 @@
editing: false, editing: false,
editValue: 0, editValue: 0,
operation: null, operation: null,
hover: false,
}}, }},
props: { props: {
value: Number, value: Number,
maxValue: Number, maxValue: Number,
name: String,
_id: String,
}, },
methods: { methods: {
edit(){ edit(){
@@ -103,6 +110,33 @@
</script> </script>
<style scoped> <style scoped>
.name {
text-align: center;
cursor: pointer;
min-width: 150px;
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 1;
}
.name:hover {
font-weight: 500;
}
.bar {
transition: box-shadow 0.2s;
}
.bar:hover {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important
}
.toolbar {
margin-left: -50%;
margin-right: -50%;
width: 200%;
margin-top: -34px !important;
z-index: 4;
}
.hover {
background: rgba(0,0,0,.04);
}
.background-transition-enter-active, .background-transition-leave-active{ .background-transition-enter-active, .background-transition-leave-active{
transition: all .2s; transition: all .2s;
} }

20
app/imports/ui/components/HealthBarCard.vue
View File

@@ -1,14 +1,14 @@
<template lang="html"> <template lang="html">
<v-card> <v-card class="pa-2">
<v-card-text> <health-bar
<health-bar v-for="attribute in attributes"
v-for="attribute in attributes" :key="attribute._id"
:key="attribute._id" :value="attribute.value + (attribute.adjustment || 0)"
:value="attribute.value + (attribute.adjustment || 0)" :maxValue="attribute.value"
:maxValue="attribute.value" :name="attribute.name"
@change="e => $emit('change', {_id: attribute._id, change: e})" @change="e => $emit('change', {_id: attribute._id, change: e})"
/> @click="e => $emit('click', {_id: attribute._id, elementId: e.elementId})"
</v-card-text> />
</v-card> </v-card>
</template> </template>

8
app/imports/ui/components/HealthBarCardContainer.vue
View File

@@ -2,6 +2,7 @@
<health-bar-card <health-bar-card
:attributes="attributes" :attributes="attributes"
@change="healthBarChanged" @change="healthBarChanged"
@click="healthBarClicked"
/> />
</template> </template>
@@ -29,6 +30,13 @@
}, },
}, },
methods: { methods: {
healthBarClicked({_id, elementId}){
this.$store.commit("pushDialogStack", {
component: "attribute-dialog-container",
elementId,
data: {_id},
});
},
healthBarChanged({_id, change}){ healthBarChanged({_id, change}){
adjustAttribute.call({ adjustAttribute.call({
_id, _id,

2
app/imports/ui/components/HitDiceListTile.vue
View File

@@ -1,5 +1,5 @@
<template lang="html"> <template lang="html">
<v-list-tile class="hit-dice-list-tile" :class="{hover}"> <v-list-tile class="hit-dice-list-tile white" :class="{hover}">
<v-list-tile-action class="mr-4"> <v-list-tile-action class="mr-4">