diff --git a/client/src/App.vue b/client/src/App.vue index 7b56d061..d3cfccea 100644 --- a/client/src/App.vue +++ b/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; } diff --git a/client/src/assets/base.css b/client/src/assets/base.css index cc0467d1..1395ae08 100644 --- a/client/src/assets/base.css +++ b/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; diff --git a/client/src/assets/main.css b/client/src/assets/main.css index 6c512582..87686962 100644 --- a/client/src/assets/main.css +++ b/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 { @@ -192,4 +188,13 @@ button:active { -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); +} + +.document { + text-align: left; +} + +.document h1 { + font-weight: normal; + font-size: 32px; } \ No newline at end of file diff --git a/client/src/services/Tooltip.js b/client/src/services/Tooltip.js new file mode 100644 index 00000000..4ce057a3 --- /dev/null +++ b/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, +}; \ No newline at end of file diff --git a/client/src/services/Windows.js b/client/src/services/Windows.js index 082c8803..ba1c6fb0 100644 --- a/client/src/services/Windows.js +++ b/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); } } diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue index 4a9ef0fa..4ade5a4f 100644 --- a/client/src/views/HomeView.vue +++ b/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'; @@ -16,6 +17,7 @@ import GameManager from './managers/GameManager.vue'; diff --git a/client/src/views/managers/TooltipManager.vue b/client/src/views/managers/TooltipManager.vue new file mode 100644 index 00000000..e142a239 --- /dev/null +++ b/client/src/views/managers/TooltipManager.vue @@ -0,0 +1,39 @@ + + + + + \ No newline at end of file diff --git a/client/src/views/managers/WindowManager.vue b/client/src/views/managers/WindowManager.vue index e20fef79..d45ec750 100644 --- a/client/src/views/managers/WindowManager.vue +++ b/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, diff --git a/client/src/views/windows/LoginWindow.vue b/client/src/views/windows/LoginWindow.vue index b78023fa..0c459234 100644 --- a/client/src/views/windows/LoginWindow.vue +++ b/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); diff --git a/client/src/views/windows/MainMenuWindow.vue b/client/src/views/windows/MainMenuWindow.vue index 3e351857..e84573cc 100644 --- a/client/src/views/windows/MainMenuWindow.vue +++ b/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, "

Hey

Hola test"); }); // ??? @@ -65,7 +70,7 @@ function OpenCampaigns(){

Main Menu

- +
diff --git a/client/src/views/windows/RegisterWindow.vue b/client/src/views/windows/RegisterWindow.vue index 54d19de4..40271eb3 100644 --- a/client/src/views/windows/RegisterWindow.vue +++ b/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"); }); diff --git a/client/src/views/windows/WelcomeWindow.vue b/client/src/views/windows/WelcomeWindow.vue new file mode 100644 index 00000000..b7cb37e9 --- /dev/null +++ b/client/src/views/windows/WelcomeWindow.vue @@ -0,0 +1,53 @@ + + + + + + + diff --git a/client/src/views/windows/game/dnd-5e/CharacterSheet.vue b/client/src/views/windows/game/dnd-5e/CharacterSheet.vue index c3875bf8..e7b5c755 100644 --- a/client/src/views/windows/game/dnd-5e/CharacterSheet.vue +++ b/client/src/views/windows/game/dnd-5e/CharacterSheet.vue @@ -56,19 +56,22 @@ function ConfigureBookmarks(){
- +
- +
- +
- +
- + +
+
+
@@ -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); } } }