From e42ec4b862408f865ea05209eabe0b2254bec7b2 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 23 Aug 2022 14:44:35 +0200
Subject: [PATCH] Continued work on point buy UI

---
 .../buildComputation/linkTypeDependencies.js  |  20 +-
 .../computeByType/computePointBuy.js          |  18 +-
 app/imports/ui/components/global/SmartBtn.vue |  72 ++++
 .../ui/components/global/SmartInputMixin.js   |   2 +-
 .../ui/components/global/SmartSlider.vue      |  34 ++
 .../ui/components/global/globalIndex.js       |   4 +
 app/imports/ui/pages/Tabletops.vue            |   2 +-
 .../ui/properties/forms/PointBuyForm.vue      | 340 +++++++++---------
 .../ui/properties/forms/PointBuySpendForm.vue |  98 ++++-
 .../properties/forms/shared/FormSection.vue   |   4 +-
 app/imports/ui/tabletop/TabletopComponent.vue |   2 +-
 11 files changed, 391 insertions(+), 205 deletions(-)
 create mode 100644 app/imports/ui/components/global/SmartBtn.vue
 create mode 100644 app/imports/ui/components/global/SmartSlider.vue

diff --git a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
index 08eef012..c8799d4f 100644
--- a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
+++ b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
@@ -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;
 }
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
index a24794f3..fff558c0 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
@@ -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;
diff --git a/app/imports/ui/components/global/SmartBtn.vue b/app/imports/ui/components/global/SmartBtn.vue
new file mode 100644
index 00000000..324fcf3e
--- /dev/null
+++ b/app/imports/ui/components/global/SmartBtn.vue
@@ -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>
diff --git a/app/imports/ui/components/global/SmartInputMixin.js b/app/imports/ui/components/global/SmartInputMixin.js
index 5e44cc7b..9cf02830 100644
--- a/app/imports/ui/components/global/SmartInputMixin.js
+++ b/app/imports/ui/components/global/SmartInputMixin.js
@@ -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(){
diff --git a/app/imports/ui/components/global/SmartSlider.vue b/app/imports/ui/components/global/SmartSlider.vue
new file mode 100644
index 00000000..b9797d9b
--- /dev/null
+++ b/app/imports/ui/components/global/SmartSlider.vue
@@ -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>
diff --git a/app/imports/ui/components/global/globalIndex.js b/app/imports/ui/components/global/globalIndex.js
index 05992177..84c28bbe 100644
--- a/app/imports/ui/components/global/globalIndex.js
+++ b/app/imports/ui/components/global/globalIndex.js
@@ -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);
diff --git a/app/imports/ui/pages/Tabletops.vue b/app/imports/ui/pages/Tabletops.vue
index fca7d1c6..5417feb4 100644
--- a/app/imports/ui/pages/Tabletops.vue
+++ b/app/imports/ui/pages/Tabletops.vue
@@ -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: {
diff --git a/app/imports/ui/properties/forms/PointBuyForm.vue b/app/imports/ui/properties/forms/PointBuyForm.vue
index 3919f7e0..41426acb 100644
--- a/app/imports/ui/properties/forms/PointBuyForm.vue
+++ b/app/imports/ui/properties/forms/PointBuyForm.vue
@@ -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() {
diff --git a/app/imports/ui/properties/forms/PointBuySpendForm.vue b/app/imports/ui/properties/forms/PointBuySpendForm.vue
index 8f525450..289450fb 100644
--- a/app/imports/ui/properties/forms/PointBuySpendForm.vue
+++ b/app/imports/ui/properties/forms/PointBuySpendForm.vue
@@ -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>
diff --git a/app/imports/ui/properties/forms/shared/FormSection.vue b/app/imports/ui/properties/forms/shared/FormSection.vue
index 04d5b3d7..96946f77 100644
--- a/app/imports/ui/properties/forms/shared/FormSection.vue
+++ b/app/imports/ui/properties/forms/shared/FormSection.vue
@@ -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>
diff --git a/app/imports/ui/tabletop/TabletopComponent.vue b/app/imports/ui/tabletop/TabletopComponent.vue
index 81e4318c..690219e9 100644
--- a/app/imports/ui/tabletop/TabletopComponent.vue
+++ b/app/imports/ui/tabletop/TabletopComponent.vue
@@ -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: {