npm - @littlecarlito/blorktools - Versions diffs - 0.50.4 → 0.51.0 - Mend

@littlecarlito/blorktools 0.50.4 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/src/asset_debugger/debugger-scene/debugger-scene.css ADDED Viewed

@@ -0,0 +1,142 @@
+/* View layout with panel */
+#viewport {
+    width: 100%;
+    height: 100vh;
+    background-color: #000;
+    display: none;
+    border: none;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.view-container {
+    display: flex;
+    gap: 0;
+    height: 100vh;
+    position: relative;
+    margin: 0;
+}
+.view-panel {
+    flex: 1;
+    position: relative;
+    height: 100vh;
+}
+/* Tabs styling */
+.tab-navigation {
+    display: flex;
+    border-bottom: 1px solid var(--panel-border);
+    flex-shrink: 0;
+}
+.ui-tab-container {
+   position: fixed;
+   right: 20px;
+   top: 70px;
+   background-color: rgba(30, 30, 30, 0.95);
+   border: 1px solid var(--panel-border);
+   max-height: calc(100vh - 100px);
+   height: auto;
+   transition: background-color 0.3s ease;
+   display: flex;
+   flex-direction: column;
+   overflow: hidden;
+   backdrop-filter: blur(5px);
+   z-index: 2000;
+   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+   width: 320px;
+   visibility: visible;
+   opacity: 1;
+}
+.tab-button {
+    flex: 1;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    padding: 10px;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-color);
+    transition: all 0.3s ease;
+    font-family: monospace;
+}
+.tab-button:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+.tab-button.active {
+    border-bottom-color: var(--button-color);
+    font-weight: bold;
+    background-color: rgba(30, 136, 229, 0.1);
+    color: var(--button-color);
+}
+.tab-content {
+   display: none;
+   padding: 15px;
+   overflow-y: auto;
+   overflow-x: hidden;
+   flex-grow: 1;
+   max-height: calc(100vh - 150px);
+   box-sizing: border-box;
+   height: 100%;
+   padding-right: 15px;
+   scrollbar-gutter: stable;
+}
+.tab-content.active {
+   display: block;
+}
+.tab-content .tab-content-inner {
+   display: flex;
+   flex-direction: column;
+   align-items: stretch;
+   width: 100%;
+   height: 100%;
+   overflow: visible;
+}
+.tab-content > div > div {
+   overflow: visible;
+}
+.tab-content * {
+   overflow: visible;
+}
+.tab-content pre,
+.tab-content code,
+.tab-content .code-block {
+   overflow-x: auto;
+   overflow-y: visible;
+}
+.tab-content h3 {
+   margin-top: 0;
+   margin-bottom: 15px;
+   padding-bottom: 10px;
+   border-bottom: 1px solid var(--panel-border);
+}
+.tab-content::-webkit-scrollbar {
+   width: 8px;
+}
+.tab-content::-webkit-scrollbar-track {
+   background: #222;
+}
+.tab-content::-webkit-scrollbar-thumb {
+   background: #444;
+   border-radius: 4px;
+}
+.tab-content::-webkit-scrollbar-thumb:hover {
+   background: #555;
+}

package/src/asset_debugger/debugger-scene/debugger-scene.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en" class="dark-mode">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Asset Debugger - Blorktools</title>
+    <script>
+        // Get pinned state from localStorage before DOM is constructed
+        function getPinnedState() {
+            try {
+                const savedSettings = localStorage.getItem('assetDebuggerSettings');
+                if (savedSettings) {
+                    const settings = JSON.parse(savedSettings);
+                    if (settings && settings.hasOwnProperty('pinned')) {
+                        return settings.pinned;
+                    }
+                }
+            } catch (e) {
+                console.error('Error checking pin state:', e);
+            }
+            return true; // Default to pinned if no setting or error
+        }
+        // Store for later use in JS
+        window.initialPinState = getPinnedState();
+    </script>
+</head>
+<body>
+    <!-- Header container - will be populated by the header.js script -->
+    <div id="header-container"></div>
+    <div class="container">
+        <!-- Viewport is first to ensure it's behind everything -->
+        <div class="view-container">
+            <div class="view-panel">
+                <div id="viewport"></div>
+                <div id="loading-indicator" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: white; padding: 15px; border-radius: 5px; z-index: 100; justify-content: center; align-items: center;">
+                    <div>Loading model...</div>
+                </div>
+            </div>
+        </div>
+        <!-- Tab container overlay -->
+        <div id="tab-container" class="ui-tab-container">
+            <div class="tab-navigation">
+                <button id="world-tab-button" class="tab-button active">World</button>
+                <button id="asset-tab-button" class="tab-button">Asset</button>
+            </div>
+            <!-- Tab content containers - will be loaded dynamically -->
+            <div id="world-tab-container" class="tab-content active"></div>
+            <div id="asset-tab-container" class="tab-content"></div>
+        </div>
+    </div>
+    <!-- Modal containers - will be loaded dynamically -->
+    <div id="settings-modal-container"></div>
+    <div id="html-editor-modal-container"></div>
+    <div id="mesh-info-modal-container"></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>
+    <!-- Main application script -->
+    <script type="module">
+        import { setupDebuggerScene } from './debugger-scene.js';
+        // Initialize the debugger when the DOM is ready
+        document.addEventListener('DOMContentLoaded', () => {
+            setupDebuggerScene();
+        });
+    </script>
+</body>
+</html>