More and more things

client/src/App.vue

@@ -31,8 +31,7 @@ onMounted(() => {
     DisplayToast('aqua', 'All modules loaded successfully');
 
     if(GetUser()){
-      CreateWindow('main_menu')
-      // CreateWindow('test');
+      CreateWindow('main_menu');
       DisplayToast('green', 'Logged in successfully as ' + GetUser().username + '!', 3000)
       return;
     }

client/src/assets/base.css

@@ -66,6 +66,7 @@
   --color-background-softer: var(--c-white-softer);
   --color-background-softest: var(--c-white-softest);
   --color-button-active: var(--c-white-muter);
+  --tooltip-background: #2b2b2b;
 
   --text-disabled: #7e7e7e;
 

client/src/assets/main.css

@@ -39,11 +39,6 @@ a {
   }
 }
 
-.icon-no-filter {
-  width: 24px;
-  height: 24px;
-}
-
 .icon-add-margin {
   width: 16px;
   height: 16px;
@@ -120,6 +115,7 @@ input[type=text], input[type=password], input[type=email] {
   border-radius: 6px;
   color: var(--color-text);
   transition: 300ms background-color;
+  border: solid 1px var(--color-border);
 }
 
 input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
@@ -193,3 +189,12 @@ button:active {
   -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);
 }
+
+.document {
+  text-align: left;
+}
+
+.document h1 {
+  font-weight: normal;
+  font-size: 32px;
+}

client/src/services/Tooltip.js

@@ -0,0 +1,57 @@
+import { ref } from 'vue';
+
+let content = ref("");
+let margin = 14;
+
+let cursorX = 0;
+let cursorY = 0;
+
+function ShowTooltip(){
+    let tooltip = document.getElementById('mouse-tooltip');
+    tooltip.style.display = "block";
+}
+
+function HideTooltip(){
+    let tooltip = document.getElementById('mouse-tooltip');
+    tooltip.style.display = "none";
+}
+
+function AddTooltip(element, val){
+    element._dr_tooltip = val;
+}
+
+function UpdateVisibilityThread(){
+    let hiding = true;
+    document.elementsFromPoint(cursorX, cursorY).forEach(element => {
+        if(element._dr_tooltip){
+            hiding = false;
+            content.value = element._dr_tooltip;
+        }
+    });
+    if(hiding) HideTooltip();
+    else ShowTooltip();
+
+    setTimeout(UpdateVisibilityThread, 0);
+}
+
+function SetupTooltip(){
+    let tooltip = document.getElementById('mouse-tooltip');
+
+    document.addEventListener("mousemove", (event) => {
+        cursorX = event.clientX;
+        cursorY = event.clientY;
+
+        tooltip.style.top = (cursorY + margin) + "px";
+        tooltip.style.left = (cursorX + margin) + "px";
+    });
+
+    UpdateVisibilityThread();
+}
+
+let GetContentRef = () => content;
+
+export {
+    SetupTooltip,
+    GetContentRef,
+    AddTooltip,
+};

client/src/services/Windows.js

@@ -21,6 +21,14 @@ const defValues = {
     'main_menu': {
         id: 'main_menu',
         title: "DragonRoll",
+        create: () => {
+            CreateChildWindow('main_menu', 'welcome');
+        }
+    },
+    'welcome': {
+        id: 'welcome',
+        title: "Welcome",
+        close: true
     },
     'edit_profile': {
         id: 'edit_profile',
@@ -305,7 +313,10 @@ function CreateWindow(type, data = {}){
         windows.value.push(finalData);
         // reload.value += 1;
 
-        setTimeout(() => SetOnTop(finalData.id), 0);
+        setTimeout(() => {
+            SetOnTop(finalData.id);
+            if(finalData.create) finalData.create();
+        }, 0);
     }
 }
 

client/src/views/HomeView.vue

@@ -9,6 +9,7 @@ import { CreateWindow } from '@/services/Windows'
 import Toast from './partials/Toast.vue';
 import { DisplayToast, SetEmitter } from '../services/Dragonroll';
 import GameManager from './managers/GameManager.vue';
+import TooltipManager from './managers/TooltipManager.vue';
 
 
 </script>
@@ -16,6 +17,7 @@ import GameManager from './managers/GameManager.vue';
 <template>
   <Toast></Toast>
   <GameManager></GameManager>
+  <TooltipManager></TooltipManager>
   <WindowManager></WindowManager>
 </template>
 

client/src/views/managers/TooltipManager.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { onMounted, watch, ref } from 'vue';
+import { GetContentRef, SetupTooltip } from '../../services/Tooltip';
+
+let contentRef = ref("");
+
+onMounted(() => {
+    SetupTooltip();
+    let content = GetContentRef();
+
+    watch(GetContentRef(), () => {
+        contentRef.value = GetContentRef().value;
+    })
+});
+
+</script>
+
+<template>
+<div id="mouse-tooltip" class="mouse-tooltip">
+    <span v-html="contentRef"></span>
+</div>
+</template>
+
+<style scoped lang="scss">
+.mouse-tooltip {
+    display: none;
+    position: absolute;
+    z-index: 214748364;
+
+    background-color: var(--tooltip-background);
+    padding: 3px 6px 3px 6px;
+
+  -webkit-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
+
+    border: solid 1px var(--color-border);
+}
+</style>

client/src/views/managers/WindowManager.vue

@@ -27,6 +27,7 @@ import EntityWindow from '../windows/dm/EntityWindow.vue'
 import CharactersWindow from '../windows/game/CharactersWindow.vue'
 import CompendiumWindow from '../windows/game/CompendiumWindow.vue'
 import CharacterSheet from '../windows/game/dnd-5e/CharacterSheet.vue'
+import WelcomeWindow from '../windows/WelcomeWindow.vue'
 
 
 // Gestionem ventanas
@@ -37,6 +38,7 @@ let WindowMap = {
   test: ExampleWindow,
   login: LoginWindow,
   main_menu: MainMenuWindow,
+  welcome: WelcomeWindow,
   register: RegisterWindow,
   edit_profile: EditProfileWindow,
   account_settings: AccountSettingsWindow,

client/src/views/windows/LoginWindow.vue

@@ -11,7 +11,7 @@ import { SetUser, GetUser } from '@/services/User'
 import Api from '@/services/Api.js'
 
 import WindowHandle from '@/views/partials/WindowHandle.vue';
-import { ClearWindows, CreateWindow } from '../../services/Windows';
+import { ClearWindows, CreateChildWindow, CreateWindow } from '../../services/Windows';
 import { DisplayToast } from '../../services/Dragonroll';
 
 const handle = ref(null);

client/src/views/windows/MainMenuWindow.vue

@@ -5,13 +5,14 @@ import WindowHandle from '@/views/partials/WindowHandle.vue';
 
 import EditUserPartial from '@/views/partials/EditUserPartial.vue'
 
-import { onMounted, onUpdated, ref } from 'vue';
+import { capitalize, onMounted, onUpdated, ref } from 'vue';
 import { SetupHandle, SetSize, SetResizable, SetMinSize, SetMaxSize, SetPosition, ResetPosition } from '@/services/Windows';
 
 import Api from '@/services/Api.js'
 
 import useEmitter from '@/services/Emitter';
 import { ClearWindow, CreateWindow, Windows } from '../../services/Windows';
+import { AddTooltip } from '../../services/Tooltip';
 const emitter = useEmitter();
 const handle = ref(null);
 
@@ -19,6 +20,8 @@ const props = defineProps(['data']);
 
 const data = props.data;
 
+const campaignButton = ref(null);
+
 let id = data.id;
 let title = data.title;
 
@@ -26,6 +29,8 @@ onMounted(() => {
     SetupHandle(id, handle);
     SetSize(id, {width: 500, height: 540});
     ResetPosition(id, "center", emitter);
+
+    AddTooltip(campaignButton.value, "<h2>Hey</h2>Hola test");
 });
 
 // ???
@@ -65,7 +70,7 @@ function OpenCampaigns(){
         <h1>Main Menu</h1>
 
         <div class="button-container">
-            <button class="btn-primary button-expand sound-click" v-on:click="OpenCampaigns">Campaigns</button>
+            <button class="btn-primary button-expand sound-click" v-on:click="OpenCampaigns" ref="campaignButton">Campaigns</button>
             <hr>
             <button class="btn-primary button-expand sound-click" v-on:click="OpenCollection">Your Collection</button>
             <button class="btn-primary button-expand sound-click" v-on:click="OpenLibrary">The Cosmic Library</button>

client/src/views/windows/RegisterWindow.vue

@@ -30,7 +30,7 @@ let title = data.title;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {width: 450, height: 800});
+    SetSize(id, {width: 500, height: 800});
     ResetPosition(id, "center");
 });
 

client/src/views/windows/WelcomeWindow.vue

@@ -0,0 +1,53 @@
+<script setup>
+
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+
+import { capitalize, onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetResizable, SetMinSize, SetMaxSize, SetPosition, ResetPosition } from '@/services/Windows';
+
+import { AddTooltip } from '../../services/Tooltip';
+const handle = ref(null);
+
+const props = defineProps(['data']);
+
+const data = props.data;
+
+let id = data.id;
+
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {width: 500, height: 700});
+    ResetPosition(id, {x: 100, y: window.innerHeight / 2 - 250 - 24});
+});
+
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+        <div class="document">
+            <h1>Welcome to Dragonroll!</h1>
+            <p>Dragonroll is the ultimate open-source virtual table top for role-playing games</p>
+        </div>
+
+    </div>
+</template>
+
+
+<style scoped>
+.document {
+    height: 100%;
+    overflow-y: auto;
+    padding: 20px 15px 30px 15px;
+    width: 100%;
+}
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+</style>

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

@@ -56,19 +56,22 @@ function ConfigureBookmarks(){
 
         <div class="bookmarks" ref="bookmarks">
             <div class="bookmark active">
-                <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/lorc/cog.svg">
+                <img class="icon bookmark-icon" draggable="false" src="icons/game-icons/ffffff/lorc/cog.svg">
             </div>
             <div class="bookmark">
-                <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/sbed/electric.svg">
+                <img class="icon bookmark-icon" draggable="false" src="icons/game-icons/ffffff/lorc/locked-chest.svg">
             </div>
             <div class="bookmark">
-                <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/delapouite/light-backpack.svg">
+                <img class="icon bookmark-icon white" draggable="false" src="icons/iconoir/regular/list.svg">
             </div>
             <div class="bookmark">
-                <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/delapouite/skills.svg">
+                <img class="icon bookmark-icon" draggable="false" src="icons/game-icons/ffffff/lorc/book-cover.svg">
             </div>
             <div class="bookmark">
-                <img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/willdabeast/white-book.svg">
+                <img class="icon bookmark-icon" draggable="false" src="icons/game-icons/ffffff/lorc/power-lightning.svg">
+            </div>
+            <div class="bookmark">
+                <img class="icon bookmark-icon" draggable="false" src="icons/game-icons/ffffff/lorc/feather.svg">
             </div>
         </div>
 
@@ -609,13 +612,23 @@ div.player-info-div {
         border-left-width: 0px;
         transition: width 0.3s, border-color 0.2s;
 
+        .bookmark-icon {
+            width: 24px;
+            height: 24px;
+            filter: invert(0.1);
+        }
+
+        .bookmark-icon.white {
+            filter: invert(1);
+        }
+
         &:hover {
             width: 70px;
         }
 
         &.active {
             width: 80px;
-            border-color: var(--color-golden-border)
+            border-color: var(--color-golden-border);
         }
     }
 }