@littlecarlito/blorktools 0.50.4 → 0.51.0

package/src/asset_debugger/header/header.css

@@ -0,0 +1,73 @@
+/* Title area with debug controls */
+.title-area {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+/* Ensure right-side buttons are properly aligned */
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-right: 0; /* Remove any potential margin */
+}
+
+/* Debug controls in the header */
+.debug-controls {
+    display: none; /* Hidden by default, shown when debugging starts */
+    align-items: center;
+    gap: 10px;
+}
+
+/* Style for the settings button in the header */
+.settings-button {
+    width: 40px;
+    height: 40px;
+    background-color: var(--secondary-color);
+    border: 1px solid var(--button-color);
+    color: var(--button-color);
+    cursor: pointer;
+    padding: 0;
+    margin-left: 10px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.settings-button svg path {
+    fill: var(--button-color);
+}
+
+.settings-button:hover {
+    background-color: rgba(30, 136, 229, 0.2);
+}
+
+/* Pin button styles */
+.pin-button {
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pin-button svg {
+    transform: rotate(-90deg); /* Default state - horizontal */
+    transition: transform 0.3s ease, fill 0.3s ease;
+}
+
+.pin-button.pinned svg {
+    transform: rotate(0deg); /* Pinned state - vertical */
+}
+
+.pin-button.pinned svg path {
+    fill: var(--button-color);
+}
+
+.pin-button:not(.pinned) svg path {
+    fill: none;
+    stroke: var(--button-color);
+    stroke-width: 1.5px;
+}

package/src/asset_debugger/header/header.html

@@ -0,0 +1,24 @@
+<!-- Reusable header component -->
+<header>
+    <div class="title-area">
+        <h1>Asset Debugger</h1>
+        <div class="debug-controls" style="display: none; margin-left: 15px;">
+            <button id="restart-debug" class="theme-toggle">Restart</button>
+            <button id="settings-button" class="theme-toggle pin-button" aria-label="Settings" style="padding: 8px; display: flex; align-items: center; justify-content: center;">
+                <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M17.4039 10.9839C17.4373 10.6618 17.4373 10.3382 17.4039 10.0161L19.0039 8.7661C19.1706 8.63275 19.2239 8.41608 19.1373 8.23275L17.3039 5.10775C17.2173 4.92441 17.0039 4.84108 16.8206 4.92441L14.9373 5.69108C14.5039 5.35775 14.0373 5.09108 13.5373 4.89108L13.2706 2.89108C13.2373 2.69108 13.0706 2.55774 12.8706 2.55774H9.20394C9.00394 2.55774 8.83727 2.69108 8.80394 2.89108L8.53727 4.89108C8.03727 5.09108 7.57061 5.35775 7.13727 5.69108L5.25394 4.92441C5.07061 4.84108 4.85727 4.92441 4.77061 5.10775L2.93727 8.23275C2.85061 8.41608 2.90394 8.63275 3.07061 8.7661L4.67061 10.0161C4.63727 10.3382 4.63727 10.6618 4.67061 10.9839L3.07061 12.2339C2.90394 12.3672 2.85061 12.5839 2.93727 12.7672L4.77061 15.8922C4.85727 16.0755 5.07061 16.1589 5.25394 16.0755L7.13727 15.3089C7.57061 15.6422 8.03727 15.9089 8.53727 16.1089L8.80394 18.1089C8.83727 18.3089 9.00394 18.4422 9.20394 18.4422H12.8706C13.0706 18.4422 13.2373 18.3089 13.2706 18.1089L13.5373 16.1089C14.0373 15.9089 14.5039 15.6422 14.9373 15.3089L16.8206 16.0755C17.0039 16.1589 17.2173 16.0755 17.3039 15.8922L19.1373 12.7672C19.2239 12.5839 19.1706 12.3672 19.0039 12.2339L17.4039 10.9839ZM11.0373 13.8089C9.17061 13.8089 7.65394 12.2922 7.65394 10.4255C7.65394 8.55889 9.17061 7.04222 11.0373 7.04222C12.9039 7.04222 14.4206 8.55889 14.4206 10.4255C14.4206 12.2922 12.9039 13.8089 11.0373 13.8089Z" fill="currentColor"/>
+                </svg>
+            </button>
+            <button id="toggle-panel" class="theme-toggle pin-button" aria-label="Toggle Panel" title="Hide Side Panel" style="padding: 8px; display: flex; align-items: center; justify-content: center;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
+                </svg>
+            </button>
+        </div>
+    </div>
+    <div class="header-controls">
+        <button id="return-to-toolbox" class="theme-toggle">Exit to Toolbox</button>
+        <button id="theme-toggle" class="theme-toggle">System Status</button>
+        <div id="pin-button-container"></div>
+    </div>
+</header> 

package/src/asset_debugger/header/header.js

@@ -0,0 +1,224 @@
+/**
+ * Header Component Loader
+ * Loads the common header component into the specified container element
+ */
+
+// Import settings utilities for pin button functionality
+// Using relative path with "../" to navigate up from components directory
+import { loadSettings, saveSettings } from '../util/data/localstorage-manager.js';
+
+// Mac dock behavior settings
+const HEADER_SHOW_DISTANCE = 20; // px from top to show header
+const HEADER_HIDE_DISTANCE = 60; // px from top to hide header
+const HEADER_HIDE_DELAY = 1000; // ms to wait before hiding header
+let headerHideTimer = null;
+
+/**
+ * Loads the header component into the specified container
+ * @param {string} containerId - The ID of the container element
+ * @returns {Promise} - A promise that resolves when the header is loaded
+ */
+export function loadHeader(containerId = 'header-container') {
+    return new Promise((resolve, reject) => {
+        const container = document.getElementById(containerId);
+        if (!container) {
+            console.error(`Header container with ID '${containerId}' not found`);
+            reject(new Error(`Header container with ID '${containerId}' not found`));
+            return;
+        }
+
+        // Fetch the header HTML
+        fetch('./header/header.html')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Failed to load header: ${response.status} ${response.statusText}`);
+                }
+                return response.text();
+            })
+            .then(html => {
+                // Insert the header HTML into the container
+                container.innerHTML = html;
+                
+                // Wait for the DOM to be updated before setting up components
+                return new Promise(resolve => {
+                    // Use requestAnimationFrame to ensure DOM is painted
+                    requestAnimationFrame(() => {
+                        resolve();
+                    });
+                });
+            })
+            .then(() => {
+                // Add the pin button with the correct state
+                setupPinButton();
+                
+                // Set up all header button event listeners
+                setupHeaderButtons();
+                
+                // Set up Mac-like dock behavior for header
+                setupHeaderDockBehavior(true);
+                
+                resolve();
+            })
+            .catch(error => {
+                console.error('Error loading header:', error);
+                reject(error);
+            });
+    });
+}
+
+/**
+ * Sets up all header button event listeners
+ */
+function setupHeaderButtons() {
+    // System status button
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.textContent = 'System Status';
+        
+        themeToggle.addEventListener('click', function() {
+            alert('System Status: Online\nAsset Debugger: Ready\nRig Visualizer: Ready');
+        });
+    }
+    
+    // Return to Toolbox functionality
+    const returnToToolboxBtn = document.getElementById('return-to-toolbox');
+    if (returnToToolboxBtn) {
+        returnToToolboxBtn.addEventListener('click', function() {
+            window.location.href = '../../../';
+        });
+    }
+    
+    // Pin button functionality with localStorage persistence
+    const pinButton = document.getElementById('pin-button');
+    if (pinButton) {
+        pinButton.addEventListener('click', function() {
+            this.classList.toggle('pinned');
+            
+            // Save the new state to settings
+            const isPinned = this.classList.contains('pinned');
+            const currentSettings = loadSettings() || {};
+            currentSettings.pinned = isPinned;
+            saveSettings(currentSettings);
+            
+            // If pinned, ensure header is visible
+            const header = document.querySelector('#header-container > header');
+            if (isPinned) {
+                header.style.transform = 'translateY(0)';
+                header.style.opacity = '1';
+            } else {
+                // If not pinned, just register the dock behavior
+                // but don't hide the header immediately - keep it visible
+                // and let the mouse movement behavior handle when to hide it
+                setupHeaderDockBehavior(false);
+            }
+        });
+    }
+}
+
+/**
+ * Sets up the pin button with the correct state
+ */
+function setupPinButton() {
+    const pinButtonContainer = document.getElementById('pin-button-container');
+    if (!pinButtonContainer) return;
+    
+    // Get pinned state from localStorage
+    let isPinned = true; // Default to pinned
+    try {
+        const savedSettings = localStorage.getItem('assetDebuggerSettings');
+        if (savedSettings) {
+            const settings = JSON.parse(savedSettings);
+            if (settings && settings.hasOwnProperty('pinned')) {
+                isPinned = settings.pinned;
+            }
+        }
+    } catch (e) {
+        console.error('Error checking pin state:', e);
+    }
+    
+    // Generate the pin button HTML with the correct state
+    const pinnedClass = isPinned ? "pinned" : "";
+    
+    // Create the pin button HTML
+    pinButtonContainer.innerHTML = `
+        <button id="pin-button" class="theme-toggle pin-button ${pinnedClass}" aria-label="Pin">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M16 9V4H17C17.55 4 18 3.55 18 3C18 2.45 17.55 2 17 2H7C6.45 2 6 2.45 6 3C6 3.55 6.45 4 7 4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9Z" fill="currentColor"/>
+            </svg>
+        </button>
+    `;
+    
+    // Store for later use in JS
+    window.initialPinState = isPinned;
+}
+
+/**
+ * Sets up the Mac-like dock behavior for the header
+ * @param {boolean} hideInitially - Whether to hide the header initially if unpinned
+ */
+function setupHeaderDockBehavior(hideInitially = true) {
+    // Wait for the header to be loaded
+    setTimeout(() => {
+        const header = document.querySelector('#header-container > header');
+        const pinButton = document.getElementById('pin-button');
+        
+        if (!header || !pinButton) {
+            console.warn('Header or pin button not found for dock behavior setup, retrying...');
+            // Retry after a short delay
+            setTimeout(() => setupHeaderDockBehavior(hideInitially), 100);
+            return;
+        }
+        
+        // Add CSS transitions for smooth show/hide
+        header.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
+        
+        // Initial state
+        const isPinned = pinButton.classList.contains('pinned');
+        if (!isPinned && hideInitially) {
+            // Start with header hidden if not pinned and hideInitially is true
+            header.style.transform = 'translateY(-100%)';
+            header.style.opacity = '0';
+        }
+        
+        // Add mouse movement listener to show/hide header
+        document.addEventListener('mousemove', (e) => {
+            // Get latest pin state
+            const isPinned = pinButton.classList.contains('pinned');
+            
+            // If pinned, keep header visible at all times
+            if (isPinned) {
+                header.style.transform = 'translateY(0)';
+                header.style.opacity = '1';
+                
+                // Clear any pending hide timer
+                if (headerHideTimer) {
+                    clearTimeout(headerHideTimer);
+                    headerHideTimer = null;
+                }
+                return;
+            }
+            
+            // When mouse is near the top, show the header
+            if (e.clientY <= HEADER_SHOW_DISTANCE) {
+                header.style.transform = 'translateY(0)';
+                header.style.opacity = '1';
+                
+                // Clear any pending hide timer
+                if (headerHideTimer) {
+                    clearTimeout(headerHideTimer);
+                    headerHideTimer = null;
+                }
+            } 
+            // When mouse moves away, start timer to hide header
+            else if (e.clientY > HEADER_HIDE_DISTANCE && !headerHideTimer) {
+                headerHideTimer = setTimeout(() => {
+                    header.style.transform = 'translateY(-100%)';
+                    header.style.opacity = '0';
+                    headerHideTimer = null;
+                }, HEADER_HIDE_DELAY);
+            }
+        });
+    }, 100); // Wait for header to load
+}
+
+export default { loadHeader }; 

package/src/asset_debugger/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Asset Debugger - Blorktools</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+
+    <!-- Loading screen -->
+    <div id="loading-splash" class="loading-splash" style="display: none;">
+        <div class="loading-content">
+            <h1 class="loading-title">ASSET DEBUGGER</h1>
+            <div class="loading-spinner-container">
+                <div class="atomic-spinner">
+                    <div class="nucleus"></div>
+                    <div class="electron-orbit">
+                        <div class="electron"></div>
+                    </div>
+                    <div class="electron-orbit">
+                        <div class="electron"></div>
+                    </div>
+                    <div class="electron-orbit">
+                        <div class="electron"></div>
+                    </div>
+                </div>
+            </div>
+            <div id="loading-progress-text" class="loading-progress-text">Initializing</div>
+        </div>
+    </div>
+
+    <!-- Header container - will be populated by the header.js script -->
+    <div id="header-container"></div>
+
+    <div id="app">
+        <div class="loading">
+            <h1>Asset Debugger</h1>
+            <p>Loading application...</p>
+        </div>
+    </div>
+
+    <!-- Load the header component -->
+    <script type="module">
+        import { loadHeader } from './header/header.js';
+        
+        // Load the header when the DOM is ready
+        document.addEventListener('DOMContentLoaded', () => {
+            loadHeader('header-container');
+        });
+    </script>
+
+    <script>
+    console.log('Asset Debugger page loaded');
+    console.log('Current URL:', window.location.href);
+    console.log('Current hash:', window.location.hash);
+
+    // DOM ready handler for debugging
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('DOM loaded for asset debugger');
+        
+        // Log app div status
+        const appDiv = document.getElementById('app');
+        if (appDiv) {
+            console.log('App div found:', appDiv);
+            console.log('App div content:', appDiv.innerHTML.substring(0, 100));
+        } else {
+            console.error('App div not found!');
+        }
+    });
+    </script>
+    
+    <!-- Load router as a module -->
+    <script type="module" src="router.js"></script>
+</body>
+</html>