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);
writeSkills(char);
writeDamageMultipliers(char);
// TODO write effect results to effect.result
Creatures.update(char.id, {$set: {level: char.level}});
};

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

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

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

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

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

@@ -1,9 +1,28 @@
<template lang="html">
<health-bar
<div class="pa-1">
<health-bar
:value="value"
:max-value="maxValue"
name="Hit Points"
@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>
<script>

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

@@ -1,60 +1,64 @@
<template>
<div style="height: 48px;">
<v-layout column align-center @click="edit" style="height: 100%; cursor: pointer;">
<v-progress-linear :value="(value / maxValue) * 100" height="20" color="green lighten-1">
</v-progress-linear>
<span class="value"
style="margin-top: -35px; z-index: 1; font-size: 16px; font-weight: 600;"
>
{{value}} / {{maxValue}}
</span>
</v-layout>
<v-layout row wrap align-center justify-center style="min-height: 48px;" :class="{hover}" class="my-3 white" :id="`${_uid}-${_id}`">
<div class="subheading text-truncate pa-2 name" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('click', {elementId: `${_uid}-${_id}`})">
{{name}}
</div>
<v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
<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">
</v-progress-linear>
<span class="value"
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">
<div v-if="editing" class="page-tint" @click="cancelEdit" />
</transition>
<transition name="transition">
<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>
</v-layout>
</template>
<script>
@@ -63,10 +67,13 @@
editing: false,
editValue: 0,
operation: null,
hover: false,
}},
props: {
value: Number,
maxValue: Number,
name: String,
_id: String,
},
methods: {
edit(){
@@ -103,6 +110,33 @@
</script>
<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{
transition: all .2s;
}

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

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

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

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

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

@@ -1,5 +1,5 @@
<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">