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

Added forms for Class level, damage multiplier, experience, folder, note, proficiency

Browse Source
This commit is contained in:
Stefan Zermatten
2019-07-23 11:28:26 +02:00
parent 946b47ea61
commit 1bfb48c672
18 changed files with 604 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/imports/api/creature/properties/ClassLevels.js
View File

@@ -18,10 +18,6 @@ let ClassLevelSchema = schema({
type: String,
optional: true,
},
enabled: {
type: Boolean,
defaultValue: true,
},
// The name of this class level's variable
variableName: {
type: String,
@@ -31,17 +27,11 @@ let ClassLevelSchema = schema({
baseClass: {
type: String,
regEx: VARIABLE_NAME_REGEX,
},
// The name of the class level that needs to preceed this class level
// So a totemWarrior level 5 must be preceded by a totemWarrior level 4
// If it's not set, any level below with the same baseClass is matched
previousClassLevel: {
type: String,
regEx: VARIABLE_NAME_REGEX,
optional: true,
},
level: {
type: SimpleSchema.Integer,
defaultValue: 1,
},
});

5
app/imports/api/creature/properties/DamageMultipliers.js
View File

@@ -27,12 +27,13 @@ let DamageMultiplierSchema = schema({
damageType: {
type: String,
allowedValues: DAMAGE_TYPES,
defaultValue: 'bludgeoning',
},
// The value of the damage multiplier
value: {
type: Number,
defaultValue: 1,
allowedValues: [0, 0.5, 1, 2],
defaultValue: 0.5,
allowedValues: [0, 0.5, 2],
},
});

8
app/imports/api/creature/properties/Experiences.js
View File

@@ -15,7 +15,7 @@ import updateSchemaMixin from '/imports/api/creature/mixins/updateSchemaMixin.js
let Experiences = new Mongo.Collection("experience");
let ExperienceSchema = schema({
name: {
title: {
type: String,
optional: true,
},
@@ -33,11 +33,9 @@ let ExperienceSchema = schema({
date: {
type: Date,
autoValue: function() {
// If the date isn't set, set it to now on insert
if (this.isInsert && !this.isSet) {
// If the date isn't set, set it to now
if (!this.isSet) {
return new Date();
} else if (this.isUpsert && !this.isSet) {
return {$setOnInsert: new Date()};
}
},
},

5
app/imports/api/creature/properties/Folders.js
View File

@@ -17,11 +17,6 @@ let Folders = new Mongo.Collection('folders');
let FolderSchema = schema({
name: {
type: String,
optional: true,
},
enabled: {
type: Boolean,
defaultValue: true,
},
});

10
app/imports/api/creature/properties/Proficiencies.js
View File

@@ -14,21 +14,17 @@ import updateSchemaMixin from '/imports/api/creature/mixins/updateSchemaMixin.js
let Proficiencies = new Mongo.Collection("proficiencies");
let ProficiencySchema = schema({
name: {
// The variableName of the skill to apply this to
skill: {
type: String,
optional: true,
},
// A number representing how proficient the character is
value: {
type: Number,
allowedValues: [0, 0.5, 1, 2],
allowedValues: [0.5, 1, 2],
defaultValue: 1,
},
// The variableName of the skill to apply this to
skill: {
type: String,
optional: true,
},
});
Proficiencies.attachSchema(ProficiencySchema);

52
app/imports/ui/components/global/DatePicker.vue Normal file
View File

@@ -0,0 +1,52 @@
<template lang="html">
<v-menu
v-model="menu"
:close-on-content-click="false"
lazy
transition="scale-transition"
full-width
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
:value="formattedSafeValue"
v-bind="$attrs"
prepend-icon="event"
readonly
v-on="on"
:loading="loading"
:error-messages="errors"
@focus="focused = true"
@blur="focused = false"
box
></v-text-field>
</template>
<v-date-picker :value="formattedSafeValue" @input="dateInput"></v-date-picker>
</v-menu>
</template>
<script>
import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
import { format } from 'date-fns';
export default {
mixins: [SmartInput],
data(){return {
menu: false,
};},
methods: {
dateInput(e){
this.menu = false;
this.input(e);
},
},
computed: {
formattedSafeValue(){
return format(this.safeValue, 'YYYY-MM-DD')
},
},
}
</script>
<style lang="css" scoped>
</style>

2
app/imports/ui/components/global/SmartInputMixin.js
View File

@@ -20,7 +20,7 @@ export default {
inputValue: this.value,
};},
props: {
value: [String, Number],
value: [String, Number, Date],
debounceTime: {
type: Number,
default: 750,

2
app/imports/ui/components/global/globalIndex.js
View File

@@ -1,9 +1,11 @@
import Vue from "vue";
// Global components
import DatePicker from '/imports/ui/components/global/DatePicker.vue';
import TextField from '/imports/ui/components/global/TextField.vue';
import TextArea from '/imports/ui/components/global/TextArea.vue';
import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
Vue.component("date-picker", DatePicker);
Vue.component("text-field", TextField);
Vue.component("text-area", TextArea);
Vue.component("smart-select", SmartSelect);

3
app/imports/ui/creature/properties/PropertySelector.vue
View File

@@ -25,8 +25,7 @@ export default {
{name: 'Action', icon: 'offline-bolt', type: 'action'},
{name: 'Attribute', icon: 'star-rate', type: 'attribute'},
{name: 'Buff', icon: 'star', type: 'buff'},
{name: 'Class', icon: 'school', type: 'class'},
{name: 'Class Level', icon: 'plus-one', type: 'classLevel'},
{name: 'Class Level', icon: 'school', type: 'classLevel'},
{name: 'Damage Multiplier', icon: 'layers', type: 'damageMultiplier'},
{name: 'Effect', icon: 'show-chart', type: 'effect'},
{name: 'Experience', icon: 'add', type: 'experience'},

66
app/imports/ui/forms/ClassLevelForm.vue Normal file
View File

@@ -0,0 +1,66 @@
<template lang="html">
<div class="class-form">
<div class="layout column align-center">
<text-field
label="Level"
type="number"
class="base-value-field text-xs-center large-format no-flex"
:value="model.level"
@change="(value, ack) => $emit('change', {path: ['level'], value, ack})"
:error-messages="errors.level"
:debounce-time="debounceTime"
/>
</div>
<div class="layout row wrap">
<text-field
label="Name"
:value="model.name"
@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
:error-messages="errors.name"
:debounce-time="debounceTime"
/>
<text-field
label="Variable name"
:value="model.variableName"
style="flex-basis: 300px;"
@change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
hint="Use this name in formulae to reference this class"
:error-messages="errors.variableName"
:debounce-time="debounceTime"
/>
<text-field
label="Base Class Variable name"
:value="model.baseClass"
style="flex-basis: 300px;"
@change="(value, ack) => $emit('change', {path: ['baseClass'], value, ack})"
hint="This is the name of the class this class level belongs to"
:error-messages="errors.baseClass"
:debounce-time="debounceTime"
/>
</div>
</div>
</template>
<script>
import FormSection from '/imports/ui/forms/components/FormSection.vue';
export default {
components: {
FormSection,
},
props: {
model: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
debounceTime: Number,
},
};
</script>
<style lang="css" scoped>
</style>

133
app/imports/ui/forms/DamageMultiplierForm.vue Normal file
View File

@@ -0,0 +1,133 @@
<template lang="html">
<div class="attribute-form">
<text-field
label="Name"
:value="model.name"
@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
:error-messages="errors.name"
:debounce-time="debounceTime"
/>
<div class="layout row wrap">
<smart-select
label="Damage Type"
style="flex-basis: 300px;"
:items="damageTypes"
:value="model.damageType"
:error-messages="errors.damageType"
:menu-props="{auto: true, lazy: true}"
@change="(value, ack) => $emit('change', {path: ['damageType'], value, ack})"
:debounce-time="debounceTime"
/>
<smart-select
label="Value"
style="flex-basis: 300px;"
:items="values"
:value="model.value"
:error-messages="errors.value"
:menu-props="{auto: true, lazy: true}"
@change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
:debounce-time="debounceTime"
/>
</div>
</div>
</template>
<script>
import FormSection from '/imports/ui/forms/components/FormSection.vue';
import DAMAGE_TYPES from '/imports/constants/DAMAGE_TYPES.js';
export default {
components: {
FormSection,
},
props: {
model: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
debounceTime: Number,
},
data(){return {
damageTypes: [
{
value: "bludgeoning",
text: "Bludgeoning",
}, {
value: "piercing",
text: "Piercing",
}, {
value: "slashing",
text: "Slashing",
}, {
value: "magicalBludgeoning",
text: "Magical Bludgeoning",
}, {
value: "magicalPiercing",
text: "Magical Piercing",
}, {
value: "magicalSlashing",
text: "Magical Slashing",
}, {
value: "acid",
text: "Acid",
}, {
value: "cold",
text: "Cold",
}, {
value: "fire",
text: "Fire",
}, {
value: "force",
text: "Force",
}, {
value: "lightning",
text: "Lightning",
}, {
value: "necrotic",
text: "Necrotic",
}, {
value: "poison",
text: "Poison",
}, {
value: "psychic",
text: "Psychic",
}, {
value: "radiant",
text: "Radiant",
}, {
value: "thunder",
text: "Thunder",
},
],
values: [
{
value: 0,
text: "Immunity",
}, {
value: 0.5,
text: "Resistance",
}, {
value: 2,
text: "Vulnerability",
},
],
};},
};
</script>
<style lang="css" scoped>
.no-flex {
flex: initial;
}
.layout.row.wrap {
margin-right: -8px;
}
.layout.row.wrap > *{
margin-right: 8px;
}
</style>

74
app/imports/ui/forms/ExperienceForm.vue Normal file
View File

@@ -0,0 +1,74 @@
<template lang="html">
<div class="class-form">
<div class="layout column align-center">
<text-field
label="XP"
type="number"
class="base-value-field text-xs-center large-format no-flex"
:value="model.value"
@change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
:error-messages="errors.value"
:debounce-time="debounceTime"
/>
</div>
<div class="layout row wrap">
<text-field
label="Title"
style="flex-basis: 300px;"
:value="model.title"
@change="(value, ack) => $emit('change', {path: ['title'], value, ack})"
:error-messages="errors.title"
:debounce-time="debounceTime"
/>
<text-field
label="In-World date"
:value="model.worldDate"
style="flex-basis: 300px;"
@change="(value, ack) => $emit('change', {path: ['worldDate'], value, ack})"
hint="The date in-game that the experience occured"
:error-messages="errors.worldDate"
:debounce-time="debounceTime"
/>
<date-picker
label="Real date"
:value="model.date"
style="flex-basis: 300px;"
@change="(value, ack) => $emit('change', {path: ['date'], value, ack})"
hint="Real life date"
:error-messages="errors.date"
:debounce-time="debounceTime"
/>
</div>
<text-area
label="Description"
:value="model.description"
:error-messages="errors.description"
@change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
:debounce-time="debounceTime"
/>
</div>
</template>
<script>
import FormSection from '/imports/ui/forms/components/FormSection.vue';
export default {
components: {
FormSection,
},
props: {
model: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
debounceTime: Number,
},
};
</script>
<style lang="css" scoped>
</style>

33
app/imports/ui/forms/FolderForm.vue Normal file
View File

@@ -0,0 +1,33 @@
<template lang="html">
<div class="folder-form">
<div class="layout row wrap">
<text-field
label="Name"
style="flex-basis: 300px;"
:value="model.name"
@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
:error-messages="errors.name"
:debounce-time="debounceTime"
/>
</div>
</div>
</template>
<script>
export default {
props: {
model: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
debounceTime: Number,
},
};
</script>
<style lang="css" scoped>
</style>

37
app/imports/ui/forms/NoteForm.vue Normal file
View File

@@ -0,0 +1,37 @@
<template lang="html">
<div class="feature-form">
<text-field
label="Name"
:value="model.name"
@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
:error-messages="errors.name"
:debounce-time="debounceTime"
/>
<text-area
label="Description"
:value="model.description"
:error-messages="errors.description"
@change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
:debounce-time="debounceTime"
/>
</div>
</template>
<script>
export default {
props: {
model: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
debounceTime: Number,
},
};
</script>
<style lang="css" scoped>
</style>

115
app/imports/ui/forms/ProficiencyForm.vue Normal file
View File

@@ -0,0 +1,115 @@
<template lang="html">
<div class="layout row wrap justify-start proficiency-form">
<text-field
label="Skill"
class="mr-2"
append-icon="arrow_drop_down"
item-text="name"
item-value="skill"
:menu-props="{transition: 'slide-y-transition', lazy: true}"
:value="model.skill"
:items="undefined"
@change="(value, ack) => $emit('change', {path: ['skill'], value, ack})"
/>
<smart-select
label="Proficiency"
append-icon="arrow_drop_down"
class="mr-2 ml-3"
:menu-props="{transition: 'slide-y-transition', lazy: true}"
:items="values"
:value="model.value"
@change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
>
<v-icon
class="icon"
slot="prepend"
:class="iconClass"
>{{displayedIcon}}</v-icon>
</smart-select>
</div>
</template>
<script>
const ICON_SPIN_DURATION = 300;
export default {
props: {
model: {
type: Object,
default: () => ({}),
},
stats: {
type: Array,
},
},
data(){ return {
displayedIcon: 'radio_button_unchecked',
iconClass: '',
values: [
{value: 1, text: 'Proficient'},
{value: 0.5, text: 'Half proficiency bonus'},
{value: 2, text: 'Double proficiency bonuys'},
],
}},
methods: {
proficiencyIcon(value){
if (value == 0.5){
return 'brightness_2';
} else if (value == 1) {
return 'brightness_1'
} else if (value == 2){
return 'album'
} else {
return 'radio_button_unchecked';
}
},
},
watch: {
'model.value': {
immediate: true,
handler(newValue, oldValue, e){
let newIcon = this.proficiencyIcon(newValue);
if (!oldValue){
// Skip animation
this.displayedIcon = newIcon;
} else {
this.iconClass="leaving";
setTimeout(() => {
this.displayedIcon = newIcon;
this.iconClass="arriving";
requestAnimationFrame(() => {
this.iconClass="";
});
}, ICON_SPIN_DURATION / 2);
}
},
},
}
};
</script>
<style lang="css" scoped>
.theme--light .icon {
color: black;
}
.icon {
min-width: 30px;
transition: transform 0.15s linear, opacity 0.15s ease;
transform-origin: 18px center;
margin-left: -12px;
}
.icon.leaving {
transform: translateY(-24px);
opacity: 0;
}
.icon.arriving {
transform: translateY(24px);
opacity: 0;
transition: none;
}
.hidden {
visibility: hidden;
}
.proficiency-form > div {
flex-basis: 220px;
}
</style>

12
app/imports/ui/forms/components/propertyFormIndex.js
View File

@@ -1,13 +1,25 @@
import ActionForm from '/imports/ui/forms/ActionForm.vue';
import AttributeForm from '/imports/ui/forms/AttributeForm.vue';
import BuffForm from '/imports/ui/forms/BuffForm.vue';
import ClassLevelForm from '/imports/ui/forms/ClassLevelForm.vue';
import DamageMultiplierForm from '/imports/ui/forms/DamageMultiplierForm.vue';
import EffectForm from '/imports/ui/forms/EffectForm.vue';
import ExperienceForm from '/imports/ui/forms/ExperienceForm.vue';
import FeatureForm from '/imports/ui/forms/FeatureForm.vue';
import FolderForm from '/imports/ui/forms/FolderForm.vue';
import NoteForm from '/imports/ui/forms/NoteForm.vue';
import ProficiencyForm from '/imports/ui/forms/ProficiencyForm.vue';
export default {
action: ActionForm,
attribute: AttributeForm,
buff: BuffForm,
classLevel: ClassLevelForm,
damageMultiplier: DamageMultiplierForm,
experience:ExperienceForm,
effect: EffectForm,
feature: FeatureForm,
folder: FolderForm,
note: NoteForm,
proficiency: ProficiencyForm,
};

67
app/package-lock.json generated
View File

@@ -185,6 +185,11 @@
"resolved": "https://registry.npmjs.org/css-box-shadow/-/css-box-shadow-1.0.0-3.tgz",
"integrity": "sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg=="
},
"date-fns": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -1225,6 +1230,37 @@
"requires": {
"inherits": "~2.0.1",
"readable-stream": "^2.0.2"
},
"dependencies": {
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
},
"dependencies": {
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
}
}
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"requires": {
"safe-buffer": "~5.1.0"
}
}
}
},
"stream-http": {
@@ -1237,6 +1273,37 @@
"readable-stream": "^2.3.3",
"to-arraybuffer": "^1.0.0",
"xtend": "^4.0.0"
},
"dependencies": {
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
},
"dependencies": {
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
}
}
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"requires": {
"safe-buffer": "~5.1.0"
}
}
}
},
"string_decoder": {

1
app/package.json
View File

@@ -18,6 +18,7 @@
"bcrypt": "^3.0.6",
"core-js": "^2.6.9",
"css-box-shadow": "^1.0.0-3",
"date-fns": "^1.30.1",
"fibers": "^2.0.2",
"lodash": "^4.17.15",
"marked": "^0.6.3",