Fixed tabletop action card

app/imports/client/ui/tabletop/TabletopActionCard.vue

@@ -8,28 +8,19 @@
     <div class="layout align-center px-3">
       <div
         class="avatar"
-        :style="{ opacity: active ? '' : '0.5'}"
       >
         <v-btn
-          :icon="!active"
-          :outlined="!active"
-          :fab="active"
+          icon
+          outlined
           style="letter-spacing: normal;"
           class="mr-2"
           :style="{
-            fontSize: active ? '24px' : '16px'
+            fontSize: '24px'
           }"
-          :large="active"
           :color="model.color || 'primary'"
           :loading="doActionLoading"
-          :disabled="model.insufficientResources || !context.editPermission || !!targetingError"
-          v-on="active ? {
-            click: e => {
-              if (!active) return;
-              e.stopPropagation();
-              doAction({});
-            }
-          } : {}"
+          :disabled="model.insufficientResources || !context.editPermission"
+          @click="doAction"
         >
           <template v-if="rollBonus && !rollBonusTooLong">
             {{ rollBonus }}
@@ -43,9 +34,6 @@
       <div
         class="action-header flex layout column justify-center pl-1"
         style="height: 72px; cursor: pointer;"
-        @mouseover="() => { if (active) hovering = true }"
-        @mouseleave="() => { if (active) hovering = false }"
-        @click="(e) => { if (active) { $emit('deactivate'); e.stopPropagation() } }"
       >
         <div class="action-title my-1">
           {{ model.name || propertyName }}
@@ -67,14 +55,6 @@
           </template>
         </div>
       </div>
-      <v-btn
-        v-if="active"
-        icon
-        class="flex-grow-0"
-        @click.stop="openPropertyDetails(model._id)"
-      >
-        <v-icon>mdi-window-restore</v-icon>
-      </v-btn>
     </div>
     <div class="px-3 pb-3">
       <template
@@ -95,42 +75,35 @@
           :action="model"
         />
         <v-divider
-          v-if="active && model.summary"
+          v-if="model.summary"
           class="my-2"
         />
       </template>
-      <template v-if="active && model.summary">
+      <template v-if=" model.summary">
         <markdown-text :markdown="model.summary.value || model.summary.text" />
       </template>
-      <v-divider v-if="active && children && children.length" />
+      <v-divider v-if="children && children.length" />
       <tree-node-list
-        v-if="active && children && children.length"
+        v-if="children && children.length"
         start-expanded
+        show-external-details
         :children="children"
+        :root="model.root"
         @selected="e => $emit('sub-click', e)"
       />
     </div>
-    <card-highlight :active="hovering" />
-    <div
-      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer"
-      :style="{pointerEvents: active ? 'none' : ''}"
-      @mouseover="() => { if (!active) hovering = true }"
-      @mouseleave="hovering = false"
-      @click="() => { if (!active) $emit('activate') }"
-    />
   </v-sheet>
 </template>
 
 <script lang="js">
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import numberToSignedString from '/imports/api/utility/numberToSignedString.js';
-//TODO import doAction from '/imports/api/engine/actions/doAction.js';
+import doAction from '/imports/client/ui/creature/actions/doAction';
 import AttributeConsumedView from '/imports/client/ui/properties/components/actions/AttributeConsumedView.vue';
 import ItemConsumedView from '/imports/client/ui/properties/components/actions/ItemConsumedView.vue';
 import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
 import MarkdownText from '/imports/client/ui/components/MarkdownText.vue';
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
-import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
 import TreeNodeList from '/imports/client/ui/components/tree/TreeNodeList.vue';
 import { docsToForest } from '/imports/api/parenting/parentingFunctions';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties';
@@ -142,7 +115,6 @@ export default {
     ItemConsumedView,
     MarkdownText,
     PropertyIcon,
-    CardHighlight,
     TreeNodeList,
   },
   inject: {
@@ -164,7 +136,6 @@ export default {
       type: Array,
       default: undefined,
     },
-    active: Boolean,
   },
   data() {
     return {
@@ -243,22 +214,13 @@ export default {
     click(e) {
       this.$emit('click', e);
     },
-    doAction({ advantage }) {
+    doAction() {
       this.doActionLoading = true;
-      this.shwing();
-      doAction.call({
-        actionId: this.model._id,
-        targetIds: this.targets,
-        scope: {
-          $attackAdvantage: advantage,
-        }
-      }, error => {
+      doAction(this.model, this.$store, this.model._id).catch((e) => {
+        console.error(e);
+        snackbar({ text: e.message || e.reason || e.toString() });
+      }).finally(() => {
         this.doActionLoading = false;
-        this.$emit('deactivate');
-        if (error) {
-          console.error(error);
-          snackbar({ text: error.reason });
-        }
       });
     },
     shwing() {

app/imports/client/ui/tabletop/TabletopComponent.vue

@@ -19,7 +19,7 @@
       <v-row
         dense
         class="initiative-row flex-grow-0"
-        style="flex-wrap: nowrap; overflow-x: auto; padding-bottom: 50px;"
+        style="flex-wrap: nowrap; overflow-x: azuto; padding-bottom: 50px; min-width: 200px;"
         @wheel="transformScroll($event)"
       >
         <tabletop-creature-card
@@ -48,7 +48,7 @@
           @untarget="untarget(creature._id)"
         />
         <div
-          class="layout column ma-1 flex-grow-0"
+          class="layout column ma-1 flex-grow-0 flex-shrink-0"
         >
           <v-btn
             data-id="select-creatures"
@@ -68,36 +68,6 @@
           </v-btn>
         </div>
       </v-row>
-      <div class="d-flex flex-column align-start ml-2">
-        <div class="d-flex flex-column">
-          <tabletop-creature-list-item
-            v-for="creature in creatures"
-            :key="creature._id"
-            :model="creature"
-            :title="creature.name"
-            :active="activeCreatureId === creature._id"
-            :targeted="targets.includes(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 {
-                  activeCreatureId = creature._id;
-                  targets = [];
-                  activeActionId = undefined;
-                }
-              }
-            } : {}"
-            @target="targets.push(creature._id)"
-            @untarget="untarget(creature._id)"
-          />
-        </div>
-      </div>
     </v-container>
     <v-footer
       inset

app/imports/client/ui/tabletop/selectedCreatureBar/SelectedCreatureBar.vue

@@ -4,16 +4,6 @@
     class="selected-creature-bar d-flex pa-3  align-end"
     style="gap: 8px;"
   >
-    <!--
-    <tabletop-buff-icons
-      creature-id="creatureId"
-      @select-icon="selectIcon"
-    />
-    <tabletop-portrait
-      creature-id="creatureId"
-      @select-icon="selectIcon"
-    />
-    -->
     <v-menu
       v-model="menuOpen"
       v-click-outside="{
@@ -125,12 +115,6 @@
         </template>
       </div>
     </v-card>
-    <!--<tabletop-actions
-      creature-id="creatureId"
-      @select-icon="selectIcon"
-    />
-    <tabletop-detail-popover />
-    -->
   </div>
 </template>