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

Continued work on point buy UI

Browse Source
This commit is contained in:
Stefan Zermatten
2022-08-23 14:44:35 +02:00
parent 59fc5ab851
commit e42ec4b862
11 changed files with 391 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
View File

@@ -248,14 +248,18 @@ function linkPointBuy(dependencyGraph, prop){
dependOnCalc({ dependencyGraph, prop, key: 'max' });
dependOnCalc({ dependencyGraph, prop, key: 'cost' });
prop.values?.forEach(row => {
row.type = 'pointBuyRow';
row.tableName = prop.name;
row.tableId = prop._id;
dependencyGraph.addNode(row._id, row);
linkVariableName(dependencyGraph, row);
dependOnCalc({ dependencyGraph, row, key: 'min' });
dependOnCalc({ dependencyGraph, row, key: 'max' });
dependOnCalc({ dependencyGraph, row, key: 'cost' });
// Wrap the document in a new object so we don't bash it unintentionally
const pointBuyRow = {
...row,
type: 'pointBuyRow',
tableName: prop.name,
tableId: prop._id,
}
dependencyGraph.addNode(row._id, pointBuyRow);
linkVariableName(dependencyGraph, pointBuyRow);
dependOnCalc({ dependencyGraph, pointBuyRow, key: 'row.min' });
dependOnCalc({ dependencyGraph, pointBuyRow, key: 'row.max' });
dependOnCalc({ dependencyGraph, pointBuyRow, key: 'row.cost' });
});
if (prop.inactive) return;
}

18
app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
View File

@@ -8,9 +8,9 @@ export default function computePointBuy(computation, node) {
prop.spent = 0;
prop.values?.forEach(row => {
// Clean up added properties
delete row.tableId;
delete row.tableName;
delete row.type;
// delete row.tableId;
// delete row.tableName;
// delete row.type;
row.spent = 0;
if (row.value === undefined) return;
@@ -21,18 +21,10 @@ export default function computePointBuy(computation, node) {
// Check min and max
if (min !== null && row.value < min) {
row.errors = row.errors || [];
row.errors.push({
type: 'pointBuyError',
message: 'Value smaller than min value'
});
row.value = min;
}
if (max !== null && row.value > max) {
row.errors = row.errors || [];
row.errors.push({
type: 'pointBuyError',
message: 'Value larger than max value'
});
row.value = max;
}
// Evaluate the cost function
if (!costFunction) return;

72
app/imports/ui/components/global/SmartBtn.vue Normal file
View File

@@ -0,0 +1,72 @@
<template lang="html">
<v-btn
v-bind="$attrs"
:disabled="isDisabled"
:loading="loading"
@click="click"
>
<slot />
</v-btn>
</template>
<script lang="js">
import { debounce } from 'lodash';
import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
export default {
inject: {
context: { default: {} }
},
props: {
disabled: Boolean,
debounce: {
type: Number,
default: undefined,
},
},
data() {
return {
loading: false,
timesClicked: 0,
};
},
computed: {
isDisabled(){
return this.context.editPermission === false || this.disabled;
},
debounceTime() {
if (Number.isFinite(this.debounce)){
return this.debounce;
} else if (Number.isFinite(this.context.debounceTime)){
return this.context.debounceTime;
} else {
return 750;
}
},
},
created(){
this.debounceClicks = debounce(this.clicks, this.debounceTime);
},
beforeDestroy(){
this.debounceClicks.flush();
},
methods: {
click() {
this.timesClicked += 1;
this.debounceClicks();
this.$emit('click', this.acknowledgeChange);
},
clicks() {
this.$emit('clicks', this.timesClicked, this.acknowledgeChange);
this.loading = true;
this.timesClicked = 0;
},
acknowledgeChange(error){
this.loading = false;
if (error) {
snackbar({ text: error.reason || error.message || error.toString() });
}
},
},
};
</script>

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

@@ -115,7 +115,7 @@ export default {
},
change(val){
this.dirty = true;
if (this.hasChangeListener) this.loading = true;
if (this.hasChangeListener()) this.loading = true;
this.$emit('change', val, this.acknowledgeChange);
},
hasChangeListener(){

34
app/imports/ui/components/global/SmartSlider.vue Normal file
View File

@@ -0,0 +1,34 @@
<template lang="html">
<v-slider
ref="input"
v-bind="$attrs"
class="dc-text-field"
:hide-details="!(errors && errors.length)"
:loading="loading"
:error-messages="errors"
:value="safeValue"
:disabled="isDisabled"
:outlined="!regular"
@change="change"
@focus="focused = true"
@blur="focused = false"
>
<template #prepend>
<slot name="prepend" />
</template>
<template #append>
<slot name="append" />
</template>
</v-slider>
</template>
<script lang="js">
import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
export default {
mixins: [SmartInput],
props: {
regular: Boolean,
},
};
</script>

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

@@ -5,17 +5,21 @@ import IconPicker from '/imports/ui/components/global/IconPicker.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';
import SmartBtn from '/imports/ui/components/global/SmartBtn.vue';
import SmartCombobox from '/imports/ui/components/global/SmartCombobox.vue';
import SmartCheckbox from '/imports/ui/components/global/SmartCheckbox.vue';
import SmartSwitch from '/imports/ui/components/global/SmartSwitch.vue';
import SvgIcon from '/imports/ui/components/global/SvgIcon.vue';
import SmartSlider from '/imports/ui/components/global/SmartSlider.vue';
Vue.component('DatePicker', DatePicker);
Vue.component('IconPicker', IconPicker);
Vue.component('TextField', TextField);
Vue.component('TextArea', TextArea);
Vue.component('SmartSelect', SmartSelect);
Vue.component('SmartBtn', SmartBtn);
Vue.component('SmartCombobox', SmartCombobox);
Vue.component('SmartCheckbox', SmartCheckbox);
Vue.component('SmartSlider', SmartSlider);
Vue.component('SmartSwitch', SmartSwitch);
Vue.component('SvgIcon', SvgIcon);

2
app/imports/ui/pages/Tabletops.vue
View File

@@ -37,7 +37,7 @@
import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue'
import Tabletops from '/imports/api/tabletop/Tabletops.js';
import insertTabletop from '/imports/api/tabletop/methods/insertTabletop.js';
import snackbar from '/imports/ui/components/snackbars/SnackbarQueue.js';
import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
export default {
components: {

340
app/imports/ui/properties/forms/PointBuyForm.vue
View File

@@ -1,187 +1,177 @@
<template lang="html">
<div class="point-buy-form">
<v-row dense>
<v-col
cols="12"
md="6"
>
<text-field
ref="focusFirst"
label="Table name"
:value="model.name"
:error-messages="errors.name"
@change="change('name', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Min"
hint="The minimum value for each row"
:model="model.min"
:error-messages="errors.min"
@change="({path, value, ack}) =>
$emit('change', {path: ['min', ...path], value, ack})"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Max"
hint="The maximum value for each row"
:model="model.max"
:error-messages="errors.max"
@change="({path, value, ack}) =>
$emit('change', {path: ['max', ...path], value, ack})"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Cost"
hint="A function of `value` that determines the cost of each row"
hide-value
:model="model.cost"
:error-messages="errors.cost"
@change="({path, value, ack}) =>
$emit('change', {path: ['cost', ...path], value, ack})"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Total available points"
hint="The total allowed cost of all rows"
:model="model.total"
:error-messages="errors.total"
@change="({path, value, ack}) =>
$emit('change', {path: ['total', ...path], value, ack})"
/>
</v-col>
</v-row>
<v-subheader>
Rows
</v-subheader>
<v-slide-x-transition
group
leave-absolute
>
<v-row
v-for="(row, i) in model.values"
:key="row._id"
dense
>
<v-divider
v-if="i"
style="flex-basis: 100%;"
class="mb-6"
/>
<v-col cols="11">
<v-row dense>
<v-col
cols="12"
md="6"
>
<text-field
ref="focusFirst"
label="Row Name"
:value="row.name"
:error-messages="errors.values && errors.values[i] && errors.values[i].name"
@change="change(['values', i, 'name'], ...arguments)"
/>
<point-buy-spend-form
:model="model"
@change="e => $emit('change', e)"
@push="e => $emit('change', e)"
@pull="e => $emit('change', e)"
/>
<form-sections>
<form-section name="Settings">
<v-row dense>
<v-col
cols="12"
md="6"
>
<text-field
ref="focusFirst"
label="Table name"
:value="model.name"
:error-messages="errors.name"
@change="change('name', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Min"
hint="The minimum value for each row"
:model="model.min"
:error-messages="errors.min"
@change="({path, value, ack}) =>
$emit('change', {path: ['min', ...path], value, ack})"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Max"
hint="The maximum value for each row"
:model="model.max"
:error-messages="errors.max"
@change="({path, value, ack}) =>
$emit('change', {path: ['max', ...path], value, ack})"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Cost"
hint="A function of `value` that determines the cost of each row"
hide-value
:model="model.cost"
:error-messages="errors.cost"
@change="({path, value, ack}) =>
$emit('change', {path: ['cost', ...path], value, ack})"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<computed-field
label="Total available points"
hint="The total allowed cost of all rows"
:model="model.total"
:error-messages="errors.total"
@change="({path, value, ack}) =>
$emit('change', {path: ['total', ...path], value, ack})"
/>
</v-col>
</v-row>
</form-section>
<form-section name="Rows">
<v-slide-x-transition
group
leave-absolute
>
<v-row
v-for="(row, i) in model.values"
:key="row._id"
dense
>
<v-divider
v-if="i"
style="flex-basis: 100%;"
class="mb-6"
/>
<v-col cols="11">
<v-row dense>
<v-col
cols="12"
md="6"
>
<text-field
ref="focusFirst"
label="Row Name"
:value="row.name"
:error-messages="errors.values && errors.values[i] && errors.values[i].name"
@change="change(['values', i, 'name'], ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<text-field
label="Variable name"
:value="row.variableName"
hint="Use this name in calculations to reference this row of the table"
:error-messages="errors.values && errors.values[i] && errors.values[i].variableName"
@change="change(['values', i, 'variableName'], ...arguments)"
/>
</v-col>
<v-col
v-if="row.errors && row.errors.length"
cols="12"
>
<calculation-error-list
:errors="row.errors"
/>
</v-col>
</v-row>
</v-col>
<v-col
cols="12"
md="6"
cols="1"
class="d-flex align-center justify-center"
>
<text-field
label="Variable name"
:value="row.variableName"
hint="Use this name in calculations to reference this row of the table"
:error-messages="errors.values && errors.values[i] && errors.values[i].variableName"
@change="change(['values', i, 'variableName'], ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<text-field
label="Value"
type="number"
:min="row.hasOwnProperty('min') ? row.min && row.min.value : model.min && model.min.value"
:max="row.hasOwnProperty('max') ? row.max && row.max.value : model.max && model.max.value"
:value="row.value"
:error-messages="errors.values && errors.values[i] && errors.values[i].value"
@change="(value, ack) => $emit('change', {path: ['values', i, 'value'], value, ack})"
<v-btn
icon
large
@click="$emit('pull', {path: ['values', i]})"
>
<template v-if="row.spent">
Cost: {{ row.spent }}
</template>
</text-field>
</v-col>
<v-col
v-if="row.errors && row.errors.length"
cols="12"
>
<calculation-error-list
:errors="row.errors"
/>
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-col>
</v-row>
</v-col>
<v-col
cols="1"
class="d-flex align-center justify-center"
>
<v-btn
icon
large
@click="$emit('pull', {path: ['values', i]})"
<v-row
key="addButton"
dense
justify="end"
class="mb-4"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row
key="addButton"
dense
justify="end"
class="mb-4"
<v-col
cols="1"
class="d-flex justify-center"
>
<v-btn
icon
outlined
:loading="addRowLoading"
:disabled="rowsFull"
@click="addRow"
>
<v-icon>
mdi-plus
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-slide-x-transition>
</form-section>
<form-section
v-if="$slots.children"
name="Children"
>
<v-col
cols="1"
class="d-flex justify-center"
>
<v-btn
icon
outlined
:loading="addRowLoading"
:disabled="rowsFull"
@click="addRow"
>
<v-icon>
mdi-plus
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-slide-x-transition>
<form-section
v-if="$slots.children"
name="Children"
standalone
>
<slot name="children" />
</form-section>
<slot name="children" />
</form-section>
</form-sections>
</div>
</template>
@@ -190,10 +180,12 @@ import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attrib
import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
import { PointBuySchema } from '/imports/api/properties/PointBuys.js';
import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
import PointBuySpendForm from '/imports/ui/properties/forms/PointBuySpendForm.vue';
export default {
components: {
CalculationErrorList,
PointBuySpendForm,
},
mixins: [propertyFormMixin, attributeListMixin],
data() {

98
app/imports/ui/properties/forms/PointBuySpendForm.vue
View File

@@ -1,13 +1,101 @@
<template lang="html">
<div class="point-buy-spend-form">
<div />
<v-row dense>
<v-col
cols="10"
md="11"
/>
<v-col
cols="2"
md="1"
class="text-truncate d-flex justify-center"
>
Cost
</v-col>
</v-row>
<v-row
v-for="(row, i) in model.values"
:key="row._id"
dense
align="center"
>
<v-col
cols="12"
md="2"
class="d-flex justify-md-end"
>
{{ row.name }}
</v-col>
<v-col
cols="2"
md="1"
class="d-flex justify-md-center justify-end"
>
{{ row.value }}
</v-col>
<v-col
cols="8"
>
<smart-slider
thumb-label
dense
:ticks="max(row) - min(row) <= 20"
:min="min(row)"
:max="max(row)"
:value="row.value"
:error-messages="errors.values && errors.values[i] && errors.values[i].value"
@change="(value, ack) => $emit('change', {path: ['values', i, 'value'], value, ack})"
/>
</v-col>
<v-col
cols="2"
md="1"
class="text-truncate d-flex justify-center"
>
{{ row.spent }}
</v-col>
<v-col
v-if="row.errors && row.errors.length"
cols="12"
>
<calculation-error-list
:errors="row.errors"
/>
</v-col>
</v-row>
<v-row
dense
>
<v-col
cols="12"
class="text-h4 mb-4 pr-8 d-flex justify-end"
:class="{
'error--text': model.spent > (model.total && model.total.value),
'warning--text': model.spent < (model.total && model.total.value),
}"
>
{{ model.spent }} / {{ model.total && model.total.value }}
</v-col>
</v-row>
</div>
</template>
<script lang="js">
import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
export default {
mixins: [propertyFormMixin],
};
export default {
components: {
CalculationErrorList,
},
methods: {
max(row) {
return row.max ? row.max && row.max.value : this.model.max && this.model.max.value;
},
min(row) {
return row.min ? row.min && row.min.value : this.model.min && this.model.min.value;
},
},
mixins: [propertyFormMixin],
};
</script>

4
app/imports/ui/properties/forms/shared/FormSection.vue
View File

@@ -4,7 +4,7 @@
<v-expansion-panel-header>
{{ name }}
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-expansion-panel-content class="pt-2">
<slot />
</v-expansion-panel-content>
</v-expansion-panel>
@@ -13,7 +13,7 @@
<v-expansion-panel-header>
{{ name }}
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-expansion-panel-content class="pt-2">
<slot />
</v-expansion-panel-content>
</v-expansion-panel>

2
app/imports/ui/tabletop/TabletopComponent.vue
View File

@@ -43,7 +43,7 @@ import TabletopMap from '/imports/ui/tabletop/TabletopMap.vue';
import Creatures from '/imports/api/creature/creatures/Creatures.js';
import TabletopActionCards from '/imports/ui/tabletop/TabletopActionCards.vue';
import MiniCharacterSheet from '/imports/ui/creature/character/MiniCharacterSheet.vue';
import snackbar from '/imports/ui/components/snackbars/SnackbarQueue.js';
import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
export default {
components: {