From 16af33b52f964e0b27e5bb4247db5fb6fa9c31f2 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 28 Nov 2022 00:23:52 +0200
Subject: [PATCH] Began designing on-sheet initiative

---
 .../ui/creature/character/CharacterSheet.vue  |  7 ++-
 .../character/CharacterSheetInitiative.vue    | 46 +++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 app/imports/client/ui/creature/character/CharacterSheetInitiative.vue

diff --git a/app/imports/client/ui/creature/character/CharacterSheet.vue b/app/imports/client/ui/creature/character/CharacterSheet.vue
index 0f6099be..fbc24c57 100644
--- a/app/imports/client/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/client/ui/creature/character/CharacterSheet.vue
@@ -30,7 +30,7 @@
       <div
         v-else
         key="character-tabs"
-        class="fill-height"
+        class="card-background"
       >
         <v-tabs-items
           :key=" '' +
@@ -38,7 +38,6 @@
             creature.settings.showTreeTab
           "
           :value="$store.getters.tabById($route.params.id)"
-          class="card-background"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
@@ -69,6 +68,7 @@
             <tree-tab :creature-id="creatureId" />
           </v-tab-item>
         </v-tabs-items>
+        <character-sheet-initiative />
       </div>
     </v-fade-transition>
     <character-sheet-fab
@@ -144,6 +144,7 @@ import CreatureLogs from '/imports/api/creature/log/CreatureLogs.js';
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
 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,6 +157,7 @@ export default {
     BuildTab,
     TreeTab,
     CharacterSheetFab,
+    CharacterSheetInitiative,
   },
   props: {
     creatureId: {
@@ -248,6 +250,7 @@ export default {
 <style>
 .character-sheet .v-window-item {
   min-height: calc(100vh - 96px);
+  padding-bottom: 70px;
   overflow: hidden;
 }
 </style>
diff --git a/app/imports/client/ui/creature/character/CharacterSheetInitiative.vue b/app/imports/client/ui/creature/character/CharacterSheetInitiative.vue
new file mode 100644
index 00000000..ecfc4a3a
--- /dev/null
+++ b/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>
\ No newline at end of file