Merge branch 'feature-tabletop' into develop

app/imports/client/ui/creature/character/CharacterSheet.vue

@@ -30,18 +30,17 @@
       <div
         v-else
         key="character-tabs"
-        class="fill-height"
+        class="card-background fill-height"
       >
         <v-tabs-items
           :key=" '' +
             creature.settings.hideSpellsTab +
             creature.settings.showTreeTab
           "
-          :value="$store.getters.tabById($route.params.id)"
-          class="card-background"
+          :value="$store.getters.tabById(creatureId)"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
-            {id: $route.params.id, tab: e}
+            {id: creatureId, tab: e}
           )"
         >
           <v-tab-item>
@@ -72,7 +71,7 @@
       </div>
     </v-fade-transition>
     <character-sheet-fab
-      v-if="$vuetify.breakpoint.xsOnly"
+      v-if="!embedded && $vuetify.breakpoint.xsOnly"
       direction="top"
       fixed
       bottom
@@ -81,15 +80,15 @@
       :edit-permission="editPermission"
     />
     <v-bottom-navigation
-      v-if="$vuetify.breakpoint.xsOnly && creature && creature.settings"
+      v-if="!embedded && $vuetify.breakpoint.xsOnly && creature && creature.settings"
       app
       shift
       mandatory
       class="bottom-nav-btns"
-      :value="$store.getters.tabById($route.params.id)"
+      :value="$store.getters.tabById(creatureId)"
       @change="e => $store.commit(
         'setTabForCharacterSheet',
-        {id: $route.params.id, tab: e}
+        {id: creatureId, tab: e}
       )"
     >
       <v-btn>
@@ -144,6 +143,7 @@ import CreatureLogs from '/imports/api/creature/log/CreatureLogs';
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue';
 import CharacterSheetFab from '/imports/client/ui/creature/character/CharacterSheetFab.vue';
 import ActionsTab from '/imports/client/ui/creature/character/characterSheetTabs/ActionsTab.vue';
+import CharacterSheetInitiative from '/imports/client/ui/creature/character/CharacterSheetInitiative.vue';
 
 export default {
   components: {
@@ -156,13 +156,16 @@ export default {
     BuildTab,
     TreeTab,
     CharacterSheetFab,
+    CharacterSheetInitiative,
   },
   props: {
     creatureId: {
       type: String,
       required: true,
     },
+    embedded: Boolean,
   },
+  // @ts-ignore
   reactiveProvide: {
     name: 'context',
     include: ['creatureId', 'editPermission'],
@@ -250,4 +253,9 @@ export default {
   min-height: calc(100vh - 96px);
   overflow: hidden;
 }
+
+.dialog-component .character-sheet .v-window-item {
+  min-height: unset;
+  overflow: unset;
+}
 </style>

app/imports/client/ui/creature/character/CharacterSheetInitiative.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="d-flex character-sheet-initiative"
+    :style="{
+      left: `${$vuetify.application.left}px`,
+      right: `${$vuetify.application.right}px`,
+      bottom: $vuetify.breakpoint.xsOnly ? '60px' : '4px',
+    }"
+  >
+    <v-card
+      v-for="c in [1,2,3,4,5]"
+      :key="c"
+      :width="48"
+      :height="64"
+      class="mx-1"
+    >
+      <v-progress-linear :value="62" />
+      <v-img src="https://picsum.photos/200/300" />
+    </v-card>
+  </div>
+</template>
+
+<script lang="js">
+
+export default {
+  
+}
+</script>
+
+<style scoped>
+.character-sheet-initiative {
+  position: fixed;
+  bottom: 0;
+  padding-right: 56px; 
+  z-index: 5;
+  overflow-x: auto;
+  overflow-y: hidden;
+  transition: .2s cubic-bezier(0.4, 0, 0.2, 1) transform,
+    .2s cubic-bezier(0.4, 0, 0.2, 1) background-color,
+    .2s cubic-bezier(0.4, 0, 0.2, 1) left,
+    .2s cubic-bezier(0.4, 0, 0.2, 1) right,
+    280ms cubic-bezier(0.4, 0, 0.2, 1) box-shadow,
+    .25s cubic-bezier(0.4, 0, 0.2, 1) max-width,
+    .25s cubic-bezier(0.4, 0, 0.2, 1) width;
+}
+</style>

app/imports/client/ui/creature/character/MiniCharacterSheet.vue

@@ -1,5 +1,10 @@
 <template lang="html">
-  <div class="mini-character-sheet" />
+  <v-card
+    hover
+    @click="$emit('click')"
+  >
+    Character sheet
+  </v-card>
 </template>
 
 <script lang="js">