Merge pull request #9 from mordachai/dev

Dev

Author: mordachai

README.md

@@ -6,8 +6,6 @@
 
 ![image](https://github.com/user-attachments/assets/c39f24ce-467d-4593-bcde-156685089401)
 
-Check the video on YouTube: https://www.youtube.com/watch?v=c95AF7TEV7E
-
 ## Installation
 
 In Foundry VTT, go to the Add-on Modules tab and click Install Module. Then:
@@ -25,7 +23,6 @@ https://github.com/mordachai/sleek-chat/raw/main/module.json
 
 ### The Sleek Chat will appear only when you collapse the Foundry sidebar.
 
-- **Enable Drag and Drop:** Allow the Sleek Chat interface to be repositioned on the screen.
 - **Sleek Chat Opacity:** Adjust the overall opacity of the Sleek Chat interface (0.1 to 1.0).
 - **Hide Navigation Menus:** You can occult the selected navigation buttons in the sidebar to help lessen the cluttering, keeping only the ones your players need.
 - **Hide Always:** Keep the selected menus hidden even when the sidebar is expanded.

module.json

@@ -2,7 +2,7 @@
   "id": "sleek-chat",
   "title": "Sleek Chat",
   "description": "A minimalist dice rolling toolbar that integrates seamlessly with the Foundry VTT chat, focusing on a clean and uncluttered interface.",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "compatibility": {
     "minimum": "12",
     "verified": "12"
@@ -20,8 +20,7 @@
     "scripts/settings.js",
     "scripts/sleek-chat-debug.js",
     "scripts/main.js",
-    "scripts/recent-message-display.js",
-    "scripts/drag-pos.js"
+    "scripts/recent-message-display.js"
   ],
   "url": "https://github.com/mordachai/sleek-chat",
   "manifest": "https://github.com/mordachai/sleek-chat/raw/main/module.json",

scripts/drag-pos.js

@@ -1,8 +1,6 @@
 import { debugLog } from './sleek-chat-debug.js';
 import './settings.js';
 import { RecentMessageDisplay } from './recent-message-display.js';
-import { updateDragAndDropState } from './drag-pos.js';
-import { getDragPosition, setDragPosition } from './drag-pos.js';
 
 function parseDiceRanges() {
     const ranges = {};
@@ -30,6 +28,34 @@ function parseDiceRanges() {
     return ranges;
 }
 
+export function applyChatBaseContainerOpacity() {
+    const chatBaseContainer = document.querySelector('.chat-base-container');
+    const sleekChatOpacity = game.settings.get("sleek-chat", "sleekChatOpacity");
+    
+    if (chatBaseContainer) {
+        // Set initial opacity to the setting value
+        chatBaseContainer.style.opacity = sleekChatOpacity;
+        
+        // Add hover event listeners
+        chatBaseContainer.addEventListener('mouseenter', () => {
+            chatBaseContainer.style.opacity = '1.0';
+            debugLog("Chat base container opacity set to 1.0 on hover");
+        });
+        
+        chatBaseContainer.addEventListener('mouseleave', () => {
+            // Start fade out timer
+            setTimeout(() => {
+                chatBaseContainer.style.opacity = sleekChatOpacity;
+                debugLog(`Chat base container opacity reset to ${sleekChatOpacity} after mouse leave`);
+            }, game.settings.get("sleek-chat", "messageFadeOutTime") * 1000);
+        });
+        
+        debugLog("Chat base container opacity events set up");
+    } else {
+        debugLog("Chat base container not found");
+    }
+}
+
 function getResultClass(result, ranges) {
     if (result >= ranges[0].min && result <= ranges[0].max) {
         return 'fumble';
@@ -59,17 +85,6 @@ export function applySeeOnlyChat(seeOnlyChat) {
 Hooks.once("ready", () => {
     const seeOnlyChat = game.settings.get("sleek-chat", "seeOnlyChat");
     applySeeOnlyChat(seeOnlyChat);
-
-    // Set the initial position of the sleek chat container
-    const sleekChatContainer = document.querySelector('.sleek-chat-container');
-    if (sleekChatContainer) {
-        const savedPosition = getDragPosition('sleek-chat');
-        sleekChatContainer.style.left = savedPosition.left;
-        sleekChatContainer.style.top = savedPosition.top;
-    }
-
-    // Initialize drag and drop
-    updateDragAndDropState(game.settings.get("sleek-chat", "enableDragAndDrop"));
 });
 
 // Function to apply navigation button hiding based on settings
@@ -126,6 +141,7 @@ export function applyNavButtonHiding() {
     // Observe changes in the sidebar state
     const observer = new MutationObserver(() => {
         updateButtonVisibility();
+        cleanupSleekChat();
     });
 
     observer.observe(document.getElementById('sidebar'), { attributes: true, attributeFilter: ['class'] });
@@ -290,9 +306,10 @@ Hooks.on("renderChatLog", async (app, html, data) => {
         const recentMessageContainer = document.querySelector('.recent-message-container');
         const navButtonsContainer = document.querySelector('.nav-buttons-container');
         const sleekChatContainer = document.querySelector('.sleek-chat-container');
-
+        const chatBaseContainer = document.querySelector('.chat-base-container');
+        
         debugLog("Sidebar is collapsed:", isCollapsed);
-
+        
         if (toolbar) {
             toolbar.style.display = isCollapsed ? 'flex' : 'none';
             debugLog("Toolbar visibility set to:", isCollapsed ? 'flex' : 'none');
@@ -308,6 +325,9 @@ Hooks.on("renderChatLog", async (app, html, data) => {
         if (sleekChatContainer) {
             sleekChatContainer.style.display = isCollapsed ? 'block' : 'none';
         }
+        if (chatBaseContainer && isCollapsed) {
+            applyChatBaseContainerOpacity();
+        }
     };
 
     updateVisibility();
@@ -486,13 +506,12 @@ Hooks.on('ready', () => {
     $('.sleek-chat').css('opacity', sleekChatOpacity);
     debugLog("Sleek Chat Opacity set to:", sleekChatOpacity);
 
+    applyChatBaseContainerOpacity();
+
     // Apply the dice color filter on startup
     const diceColorFilter = game.settings.get("sleek-chat", "diceColorFilter");
     applyDiceColorFilter(diceColorFilter);
 
-    // Initialize drag and drop
-    updateDragAndDropState(game.settings.get("sleek-chat", "enableDragAndDrop"));
-
     const hideAdvDisadv = game.settings.get("sleek-chat", "hideAdvDisadv");
     if (hideAdvDisadv) {
         $('#advantage-toggle').hide();
@@ -518,6 +537,16 @@ Hooks.on('ready', () => {
 
 });
 
+function cleanupSleekChat() {
+    const existingContainers = document.querySelectorAll('.sleek-chat-container');
+    if (existingContainers.length > 1) {
+      // Remove all but the most recently created container
+      for (let i = 0; i < existingContainers.length - 1; i++) {
+        existingContainers[i].remove();
+      }
+    }
+  }
+
 // Function to apply dice color filter based on settings
 export function applyDiceColorFilter(color) {
     let filter;

scripts/main.js

@@ -113,10 +113,9 @@ export class RecentMessageDisplay {
 
             this.updateButtonStates();
         }, 5); // 5ms delay to ensure the DOM is updated
-    }
-    
+    }    
 
-       static navigateMessages(direction) {
+    static navigateMessages(direction) {
         debugLog("RecentMessageDisplay: Navigating messages with direction:", direction);
         this.currentMessageIndex += direction;
         if (this.currentMessageIndex < 0) {
@@ -166,20 +165,58 @@ export class RecentMessageDisplay {
     }
 
     static startFadeOutTimer() {
-        const fadeOutTime = game.settings.get("sleek-chat", "messageFadeOutTime") * 1000; // Convert seconds to milliseconds
+        const fadeOutTime = game.settings.get("sleek-chat", "messageFadeOutTime") * 1000;
         const fadeOutOpacity = game.settings.get("sleek-chat", "messageFadeOutOpacity");
-    
-        // Log the value of fadeOutTime to the console
+        const sleekChatOpacity = game.settings.get("sleek-chat", "sleekChatOpacity");
+        
         debugLog(`RecentMessageDisplay: Calculated fadeOutTime is ${fadeOutTime} milliseconds.`);
+        
+        const container = this.recentMessageContainer;
+        const chatBaseContainer = document.querySelector('.chat-base-container');
+        
+        // First, wait for the fadeOutTime delay
+        setTimeout(() => {
+            debugLog("RecentMessageDisplay: Starting fade out after specified delay.");
+            
+            // Add the faded class to recent message container
+            $(container).addClass('faded');
+            
+            // Apply opacity to chat base container
+            if (chatBaseContainer && !chatBaseContainer.matches(':hover')) {
+                chatBaseContainer.style.opacity = sleekChatOpacity;
+                debugLog(`Chat base container opacity set to ${sleekChatOpacity}`);
+            }
+        }, fadeOutTime);
+    }
 
-        const container = this.recentMessageContainer; // Target the container instead of message-display
+    static setupHoverEffect() {
+        const fadeOutTime = game.settings.get("sleek-chat", "messageFadeOutTime") * 1000;
+        const container = this.recentMessageContainer;
 
-        // First, wait for the fadeOutTime delay
+        // Mouse enter: instantly restore full opacity by removing the faded class
+        container.addEventListener('mouseover', () => {
+            $(container).removeClass('faded');
+            debugLog("RecentMessageDisplay: Mouse over - container opacity restored.");
+        });
+    
+        // Mouse leave: start the fade-out after the specified delay
+        container.addEventListener('mouseleave', () => {
+            setTimeout(() => {
+                $(container).addClass('faded');
+                debugLog("RecentMessageDisplay: Mouse leave - reapplied fade effect to container.");
+            }, fadeOutTime);
+        });
+    }
+    
+    static applyFadeOutEffect(element) {
+        const fadeOutTime = game.settings.get("sleek-chat", "messageFadeOutTime") * 1000;
+    
+        // Start the fade-out effect after the specified delay
         setTimeout(() => {
             debugLog("RecentMessageDisplay: Starting fade out after specified delay.");
-            $(container).fadeTo(1000, fadeOutOpacity); // 1 second fade-out
+            $(element).addClass('faded');
         }, fadeOutTime);
-    } 
+    }
 
     static setupHoverEffect() {
         const fadeOutTime = game.settings.get("sleek-chat", "messageFadeOutTime") * 1000;
@@ -291,26 +328,6 @@ export class RecentMessageDisplay {
         // Update the state of navigation buttons
         this.updateButtonStates();
     }
-
-    static applyFadeOutEffect(element) {
-        const fadeOutTime = game.settings.get("sleek-chat", "messageFadeOutTime") * 1000; // Convert to milliseconds
-        const fadeOutOpacity = game.settings.get("sleek-chat", "messageFadeOutOpacity");
-
-        // Start the fade-out effect after the specified delay
-        setTimeout(() => {
-            debugLog("RecentMessageDisplay: Starting fade out after specified delay.");
-            $(element).fadeTo(1000, fadeOutOpacity); // 1 second fade-out
-        }, fadeOutTime);
-    }
-
-    static applyMessageFadeOutSettings() {
-        debugLog("RecentMessageDisplay: Applying message fade out settings.");
-        const messageElements = document.querySelectorAll('.recent-message');
-        messageElements.forEach(element => {
-            // Reapply the fade-out effect with updated settings
-            RecentMessageDisplay.applyFadeOutEffect(element);
-        });
-    }
 }
 
 // Export the function correctly