Tabletop targeted actions now work

2023-01-15 14:18:17 +02:00
parent 25e6b19b49
commit ceb170cbcf
9 changed files with 188 additions and 201 deletions
--- a/app/imports/client/ui/log/CharacterLog.vue
+++ b/app/imports/client/ui/log/CharacterLog.vue
@@ -25,8 +25,11 @@
        :hint="inputHint"
        :error-messages="inputError"
        :disabled="!editPermission"
+        :loading="submitLoading"
        @click:append-outer="submit"
        @keyup.enter="submit"
+        @keyup.up="decrementHistory"
+        @keyup.down="incrementHistory"
      />
    </v-card>
  </div>
@@ -40,6 +43,7 @@ import { assertEditPermission } from '/imports/api/creature/creatures/creaturePe
 import { parse, prettifyParseError } from '/imports/parser/parser.js';
 import resolve, { toString } from '/imports/parser/resolve.js';
 import LogEntry from '/imports/client/ui/log/LogEntry.vue';
+import { Tracker } from 'meteor/tracker'

 export default {
  components: {
@@ -48,22 +52,70 @@ export default {
  props: {
    creatureId: {
      type: String,
-      required: true,
+      default: undefined,
+    },
+    tabletopId: {
+      type: String,
+      default: undefined,
    },
  },
  data(){return {
    inputHint: undefined,
    inputError: undefined,
    input: undefined,
+    history: [],
+    historyIndex: 1,
+    submitLoading: false,
  }},
  watch: {
    input(value){
      this.input = value;
+      this.recalculate();
+    },
+    creatureId() {
+      Tracker.afterFlush(() => this.recalculate())
+    },
+    historyIndex(i) {
+      if (typeof this.history[i] === 'string') {
+        this.input = this.history[i];
+      }
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.input) return;
+      if (this.submitLoading) return;
+      const log = {
+        roll: this.input,
+      };
+      if (this.tabletopId) log.tabletopId = this.tabletopId;
+      if (this.creatureId) log.creatureId = this.creatureId;
+      this.submitLoading = true;
+      logRoll.call(log, (error) => {
+        this.submitLoading = false;
+        if (!error) {
+          this.addHistory(this.input);
+          this.input = '';
+          this.inputError = undefined;
+          return;
+        }
+        this.inputError = error.message || error.toString();
+        console.error(error);
+      });
+    },
+    addHistory(string) {
+      // Don't add duplicates back to back in history
+      if (string === this.history[this.history.length - 1]) return;
+      this.history.push(string);
+      if (this.history.length > 50) this.history.shift();
+      this.historyIndex = this.history.length;
+    },
+    recalculate() {
      this.inputHint = this.inputError = undefined;
      if (!this.input) return;
      let result;
      try {
-        result = parse(value);
+        result = parse(this.input);
      } catch (e){
        if (e.constructor.name === 'EndOfInputError'){
          this.inputError = '...';
@@ -83,24 +135,29 @@ export default {
        return;
      }
    },
-  },
-  methods: {
-    submit(input){
-      logRoll.call({
-        roll: input,
-        creatureId: this.creatureId,
-      }, (error) => {
-        if (error) console.error(error);
-      });
+    incrementHistory() {
+      if (this.historyIndex < this.history.length) {
+        this.historyIndex += 1;
+      }
    },
+    decrementHistory() {
+      if (this.historyIndex > 0) {
+        this.historyIndex -= 1;
+      }
+    }
  },
+  // @ts-ignore
  meteor: {
-    logs(){
-      return CreatureLogs.find({
-        creatureId: this.creatureId,
-      }, {
+    logs() {
+      const filter = {};
+      if (this.tabletopId) {
+        filter.tabletopId = this.tabletopId;
+      } else if (this.creatureId) {
+        filter.creatureId = this.creatureId;
+      }
+      return CreatureLogs.find(filter, {
        sort: {date: -1},
-        limit: 20
+        limit: 100
      });
    },
    creature(){
--- a/app/imports/client/ui/tabletop/TabletopActionCard.vue
+++ b/app/imports/client/ui/tabletop/TabletopActionCard.vue
@@ -53,7 +53,11 @@
          :loading="doActionLoading"
          :disabled="model.insufficientResources || !context.editPermission || !!targetingError"
          v-on="active ? {
-            'click.stop': doAction
+            click: e => {
+              if (!active) return;
+              e.stopPropagation();
+              doAction({});
+            }
          } : {}"
        >
          <template v-if="rollBonus && !rollBonusTooLong">
@@ -224,12 +228,14 @@ export default {
    actionTypeIcon() {
      return `$vuetify.icons.${this.model.actionType}`;
    },
-    targetingError(){
-      // Can always do an action without a target
-      if (!this.targets || !this.targets.length) return undefined;
-      if (this.targets.length > 1 && this.model.target !== 'multipleTargets'){
-        return 'Single target';
-      } else if (this.model.target === 'self' && this.targets[0] !== this.model.ancestors[0]._id){
+    targetingError() {
+      if (!this.active) return;
+      const targets = this.targets || [];
+      if (this.model.target === 'singleTarget' && targets.length === 0) {
+        return 'Select target';
+      } else if (targets.length > 1 && this.model.target !== 'multipleTargets'){
+        return 'Single target only';
+      } else if (this.model.target === 'self' && targets.length > 0){
        return 'Can only target self';
      }
      return undefined;
@@ -280,6 +286,7 @@ export default {
        }
      }, error => {
        this.doActionLoading = false;
+        this.$emit('deactivate');
        if (error) {
          console.error(error);
          snackbar({ text: error.reason });
--- a/app/imports/client/ui/tabletop/TabletopComponent.vue
+++ b/app/imports/client/ui/tabletop/TabletopComponent.vue
@@ -28,20 +28,22 @@
          :model="creature"
          :active="activeCreatureId === creature._id"
          :targeted="targets.includes(creature._id)"
-          :show-target-btn="!!activeActionId"
-          @click="() => {
-            if (activeActionId) {
-              if (targets.includes(creature._id)) {
-                untarget(creature._id)
+          :show-target-btn="targets.includes(creature._id) || moreTargets"
+          v-on="(!activeActionId || (targets.includes(creature._id) || moreTargets)) ? {
+            click: () => {
+              if (activeActionId) {
+                if (targets.includes(creature._id)) {
+                  untarget(creature._id)
+                } else {
+                  if (moreTargets) targets.push(creature._id);
+                }
              } else {
-                targets.push(creature._id);
+                activeCreatureId = creature._id;
+                targets = [];
+                activeActionId = undefined;
              }
-            } else {
-              activeCreatureId = creature._id;
-              targets = [];
-              activeActionId = undefined;
            }
-          }"
+          } : {}"
          @target="targets.push(creature._id)"
          @untarget="untarget(creature._id)"
        />
@@ -95,6 +97,7 @@
            :key="action._id"
            :model="action"
            :active="activeActionId === action._id"
+            :targets="targets"
            @activate="activeActionId = action._id"
            @deactivate="activeActionId = undefined; targets = [];"
          />
@@ -157,6 +160,11 @@ export default {
      targets: [],
    }
  },
+  watch: {
+    activeCreatureId(id) {
+      this.$root.$emit('active-tabletop-character-change', id);
+    }
+  },
  meteor: {
    $subscribe: {
      'tabletop'() {
@@ -169,6 +177,15 @@ export default {
    actions(){
      return getProperties(this.activeCreatureId, { type: 'action', actionType: { $ne: 'event'} });
    },
+    moreTargets(){
+      const activeAction = CreatureProperties.findOne(this.activeActionId);
+      if (!activeAction) return;
+      if (activeAction.target === 'singleTarget') {
+        return this.targets.length === 0;
+      } else if (activeAction.target === 'multipleTargets') {
+        return true;
+      }
+    },
    editPermission(){
      try {
        assertEditPermission(this.activeCreatureId, Meteor.userId());
--- a/app/imports/client/ui/tabletop/TabletopCreatureCard.vue
+++ b/app/imports/client/ui/tabletop/TabletopCreatureCard.vue
@@ -2,12 +2,12 @@
  <v-card
    style="height: 100px; width: 70px;"
    class="tabletop-creature-card"
-    :color="active ? 'accent' : ''"
-    hover
+    :class="{ active }"
+    :hover="hasClickListener"
    :elevation="active ? 8 : 2"
-    @mouseover="hover = true"
+    @mouseover="() => { if (hasClickListener) hover = true; }"
    @mouseleave="hover = false"
-    @click="$emit('click')"
+    v-on="hasClickListener ? {click: () => $emit('click')} : {}"
  >
    <v-progress-linear
      v-if="variables.hitPoints"
@@ -25,16 +25,18 @@
    </div>
    <card-highlight :active="hover" />
    <div class="d-flex justify-center">
-      <v-btn
-        v-if="showTargetBtn"
-        :color="targeted ? 'accent' : ''"
-        :elevation="targeted ? 8 : 2"
-        fab
-        small
-        @click.stop="targeted ? $emit('untarget') : $emit('target')"
-      >
-        <v-icon>{{ targeted ? 'mdi-target' : 'mdi-target' }}</v-icon>
-      </v-btn>
+      <v-scale-transition>
+        <v-btn
+          v-if="showTargetBtn"
+          :color="targeted ? 'accent' : ''"
+          :elevation="targeted ? 8 : 2"
+          fab
+          small
+          @click.stop="targeted ? $emit('untarget') : $emit('target')"
+        >
+          <v-icon>{{ targeted ? 'mdi-target' : 'mdi-target' }}</v-icon>
+        </v-btn>
+      </v-scale-transition>
    </div>
  </v-card>
 </template>
@@ -60,6 +62,11 @@ export default {
    hover: false,
  }
  },
+  computed: {
+    hasClickListener() {
+      return this.$listeners && !!this.$listeners.click;
+    },
+  },
  // @ts-ignore
  meteor: {
    variables() {
--- a/app/imports/client/ui/tabletop/TabletopLog.vue
+++ b/app/imports/client/ui/tabletop/TabletopLog.vue
@@ -1,17 +1,17 @@
 <template lang="html">
-  <log-component
-    :creature-id="tabletopId"
+  <character-log
+    :tabletop-id="tabletopId"
+    :creature-id="activeCreatureId"
  />
 </template>

 <script lang="js">
-import CreatureLogs from '/imports/api/creature/log/CreatureLogs.js';
-import insertTabletopLog from '/imports/api/creature/log/CreatureLogs.js';
-import LogComponent from '/imports/client/ui/log/CharacterLog.vue';
+import { insertTabletopLog } from '/imports/api/creature/log/CreatureLogs.js';
+import CharacterLog from '/imports/client/ui/log/CharacterLog.vue';

 export default {
  components: {
-    LogComponent,
+    CharacterLog,
  },
  inject: {
    context: {
@@ -21,18 +21,18 @@ export default {
  props: {
    tabletopId: {
      type: String,
-      required: true,
+      default: undefined,
    },
  },
-  methods: {
-    submit(){
-      insertTabletopLog.call({
-        content: this.logContent,
-        tabletopId: this.tabletopId,
-      }, (error) => {
-        if (error) console.error(error);
-      });
-    },
+  data() {
+    return {
+      activeCreatureId: undefined,
+    }
+  },
+  mounted() {
+    this.$root.$on('active-tabletop-character-change', (id) => {
+      this.activeCreatureId = id;
+    });
  },
 }
 </script>