hdijahydkaghitdeç

client/src/assets/base.css

@@ -23,6 +23,8 @@
 
   --c-black-icon-background: #000;
   --c-white-icon-background: #fff;
+  --c-white-border: #a5a5a533;
+  --c-black-border: #a5a5a533;
 
 
   --c-black-blurred: #222222;
@@ -49,10 +51,13 @@
   --c-gradient-col-1: #034159;
   --c-gradient-col-2: #02735E;
   --c-gradient-col-3: #0CF25D;
+
+  --c-golden-border: #AA9E89aa;
 }
 
 /* semantic color variables for this project */
 :root {
+  --color-golden-border: var(--c-golden-border);
   --window-background: var(--c-white-blurred);
 
   --color-background: var(--c-white);
@@ -74,6 +79,8 @@
   --separator: var(--c-black-mute);
   --chat-background: var(--c-white);
 
+  --color-border: var(--c-white-border);
+
   --section-gap: 160px;
   --separator-color: #2e2e2e;
 }
@@ -100,6 +107,8 @@
     --separator: var(--c-white-mute);
 
     --chat-background: var(--c-blacker);
+
+    --color-border: var(--c-black-border);
     --text-disabled: #7e7e7e;
 
     --color-chat-other: #1d1d1d;

client/src/assets/main.css

@@ -39,12 +39,24 @@ a {
   }
 }
 
+.icon-no-filter {
+  width: 24px;
+  height: 24px;
+}
+
 .icon-add-margin {
   width: 16px;
   height: 16px;
   margin: 4.25px;
 }
 
+.user-icon {
+  border: solid 1px var(--color-border);
+  -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
+}
+
 .buttons-row {
   width: 100%;
   padding-right: 10px;
@@ -123,7 +135,11 @@ button {
   font-size: 15px;
   border-radius: 6px;
   outline: none;
-  border: none;
+  
+  border: solid 1px var(--color-border);
+  -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
+  -moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
+  box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
 
   transition: 300ms background-color;
   background-color: var(--color-background-softer);
@@ -170,7 +186,7 @@ button:active {
 .window-wrapper {
   display: flex;
   align-items: center;
-  border: solid 1px #a5a5a533;
+  border: solid 1px var(--color-border);
 
   user-select: none;
   -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);

client/src/views/partials/EditUserPartial.vue

@@ -123,5 +123,9 @@ onMounted(() => {
 
 .main-user-actions {
     margin-left: auto;
+
+    button {
+        margin-left: 10px;
+    }
 }
 </style>

client/src/views/windows/game/dnd-5e/CharacterSheet.vue

@@ -7,15 +7,31 @@ const props = defineProps(['data']);
 const data = props.data;
 
 const handle = ref(null);
+const bookmarks = ref(null);
+const selectedBookmark = ref(0);
 
 let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 750, y: 850});
+    SetSize(id, {x: 700, y: 850});
     ResetPosition(id, {x: window.innerWidth - 600, y: 60});
+
+    ConfigureBookmarks();
 });
 
+function ConfigureBookmarks(){
+    let children = bookmarks.value.children;
+    for(let i = 0; i < children.length; i++){
+        children[i].addEventListener('click', () => {
+            selectedBookmark.value = i;
+            for(let p = 0; p < children.length; p++){
+                children[p].classList.remove('active');
+            }
+            children[i].classList.add('active');
+        })
+    }
+}
 </script>
 
 
@@ -38,8 +54,8 @@ onMounted(() => {
             </div>
         </div>
 
-        <div class="bookmarks">
+        <div class="bookmarks" ref="bookmarks">
-            <div class="bookmark">
+            <div class="bookmark active">
                 <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/lorc/cog.svg">
             </div>
             <div class="bookmark">
@@ -48,9 +64,6 @@ onMounted(() => {
             <div class="bookmark">
                 <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/delapouite/light-backpack.svg">
             </div>
-            <div class="bookmark">
-                <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/lorc/burning-blobs.svg">
-            </div>
             <div class="bookmark">
                 <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/delapouite/skills.svg">
             </div>
@@ -59,50 +72,93 @@ onMounted(() => {
             </div>
         </div>
 
-        <div class="header-attr">
+        <!-- Sheet content -->
-            <div class="header-hex">
+        <div class="sheet-content" v-show="selectedBookmark == 0">
-                <span class="attr-name">STR</span>
+            <div class="header-attr">
-                <span class="attr-bonus">+1</span>
+                <div class="header-hex">
-                <span class="attr-score">13</span>
+                    <span class="attr-name">STR</span>
+                    <span class="attr-bonus">+1</span>
+                    <span class="attr-score">13</span>
+                </div>
+                <div class="header-hex">
+                    <span class="attr-name">DEX</span>
+                    <span class="attr-bonus">+3</span>
+                    <span class="attr-score">16</span>
+                </div>
+                <div class="header-hex">
+                    <span class="attr-name">CON</span>
+                    <span class="attr-bonus">+2</span>
+                    <span class="attr-score">14</span>
+                </div>
+                <div class="header-hex">
+                    <span class="attr-name">INT</span>
+                    <span class="attr-bonus">+1</span>
+                    <span class="attr-score">12</span>
+                </div>
+                <div class="header-hex">
+                    <span class="attr-name">WIS</span>
+                    <span class="attr-bonus">-1</span>
+                    <span class="attr-score">8</span>
+                </div>
+                <div class="header-hex">
+                    <span class="attr-name">CHA</span>
+                    <span class="attr-bonus">+1</span>
+                    <span class="attr-score">13</span>
+                </div>
             </div>
-            <div class="header-hex">
+            <div class="two-column-layout">
-                <span class="attr-name">DEX</span>
+                <div class="flex-container">
-                <span class="attr-bonus">+3</span>
+                    
-                <span class="attr-score">16</span>
+                </div>
-            </div>
+                <div class="flex-container"></div>
-            <div class="header-hex">
-                <span class="attr-name">CON</span>
-                <span class="attr-bonus">+2</span>
-                <span class="attr-score">14</span>
-            </div>
-            <div class="header-hex">
-                <span class="attr-name">INT</span>
-                <span class="attr-bonus">+1</span>
-                <span class="attr-score">12</span>
-            </div>
-            <div class="header-hex">
-                <span class="attr-name">WIS</span>
-                <span class="attr-bonus">-1</span>
-                <span class="attr-score">8</span>
-            </div>
-            <div class="header-hex">
-                <span class="attr-name">CHA</span>
-                <span class="attr-bonus">+1</span>
-                <span class="attr-score">13</span>
             </div>
         </div>
-        Hola
+        <div class="sheet-content" v-show="selectedBookmark == 1">
+            Actions
+        </div>
+        <div class="sheet-content" v-show="selectedBookmark == 2">
+            Inventory
+        </div>
+        <div class="sheet-content" v-show="selectedBookmark == 3">
+            Traits
+        </div>
+        <div class="sheet-content" v-show="selectedBookmark == 4">
+            Bio
+        </div>
     </div>
 </template>
 
 
 <style scoped lang="scss">
+.two-column-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    flex-direction: row;
+    margin-top: 50px;
+    margin-left: 20px;
+    margin-right: 20px;
+
+    .flex-container {
+        margin: auto;
+        width: 300px;
+        display: flex;
+        
+    }
+}
+
+.sheet-content {
+    width: 100%;
+    height: calc(100% - 90px);
+    overflow-y: auto;
+}
+
 .bookmarks {
     position: absolute;
     top: 120px;
-    left: 750px;
+    left: 700px;
 
     .bookmark {
+        width: 50px;
         background-color: #181818;
         padding: 10px;
         margin-top: 10px;
@@ -110,11 +166,16 @@ onMounted(() => {
         padding-top: 9px;
         border: solid 1px #9e9e9e22;
         border-left-width: 0px;
+        transition: width 0.3s, border-color 0.2s;
 
-        .icon-no-filter {
+        &:hover {
-            width: 24px;
+            width: 70px;
-            height: 24px;
+        }
-        }   
+
+        &.active {
+            width: 80px;
+            border-color: var(--color-golden-border)
+        }
     }
 }
 
@@ -240,7 +301,7 @@ onMounted(() => {
 .window-wrapper {
     display: flex;
     align-items: center;
-    border: solid 1px #AA9E89aa;
+    border: solid 1px var(--color-golden-border);
 
     user-select: none;
 }