@littlecarlito/blorktools 0.50.3 → 0.51.0

package/src/asset_debugger/landing-page/landing-page.css

@@ -0,0 +1,396 @@
+/* Update lighting preview container sizing */
+#lighting-dropzone {
+   width: 275px;
+   max-width: 275px;
+   height: 200px;
+   display: flex;
+   flex-direction: column;
+   padding: 15px;
+   margin: 0 auto;
+}
+
+#lighting-dropzone.has-file {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+#lighting-dropzone.has-file h3 {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+#upload-section {
+    position: fixed;
+    top: 70px;  /* Below header */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 1200px;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    z-index: 900;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+#upload-section > h2 {
+    margin-top: 8px;
+    margin-bottom: 5px;
+}
+
+/* Section heading style for Asset Files and World Files */
+.section-heading {
+    font-size: 22px;
+    color: var(--primary-color);
+    text-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
+    margin-top: 15px;
+    margin-bottom: 15px;
+    padding-bottom: 5px;
+    font-weight: normal;
+    letter-spacing: 1px;
+}
+
+/* Card panel */
+.tool-panel {
+   padding: 20px;
+   background-color: rgba(30, 30, 30, 0.9);
+   border: 3px solid var(--fallout-yellow);
+   border-radius: 4px;
+   max-height: unset;
+   overflow-y: visible;
+   backdrop-filter: blur(10px);
+}
+
+/* Main container dropzone styles */
+.dropzone-container-main {
+    border: 3px solid var(--tool-color);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.dropzone-container-active {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
+}
+
+/* Adjust dropzone container to distribute items evenly */
+.dropzone-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    width: 100%;
+    margin-bottom: 15px;
+    justify-content: flex-start;
+}
+
+/* New wrapper for centering dropzone containers */
+.dropzone-row {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 15px;
+}
+
+/* Inside dropzone-row, adjust container to center its content */
+.dropzone-row .dropzone-container {
+    justify-content: center;
+    margin-bottom: 0;
+}
+
+/* Dropzone styling as requested */
+.dropzone {
+    position: relative;
+    border: 2px dashed #4a4a4a; /* More visible gray dashed border */
+    border-radius: 4px;
+    padding: 15px; /* Consistent padding regardless of state */
+    height: 200px; /* Fixed height */
+    background-color: rgba(0,0,0,0.1);
+    text-align: center;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start; /* Changed from space-between to flex-start */
+    align-items: center;
+    cursor: pointer;
+    overflow: hidden;
+    max-width: 100%; /* Ensure no clipping */
+    min-width: unset; /* Remove fixed width */
+    width: 275px; /* Fixed width for all dropzones */
+    flex: 0 0 auto; /* Prevent flex growing/shrinking */
+    box-sizing: border-box; /* Include padding in the height calculation */
+}
+
+.dropzone.active {
+    border: 2px dashed var(--fallout-yellow); /* Use fallout yellow for hover state */
+    box-shadow: 0 0 8px rgba(248, 183, 62, 0.5); /* Subtle glow with fallout yellow */
+}
+
+.dropzone.has-file {
+    border: 2px solid var(--primary-color); /* Green when file dropped */
+    box-shadow: var(--success-glow);
+    cursor: default; /* Change cursor to default for filled dropzones */
+}
+
+.dropzone:not(.has-file):hover {
+    background-color: rgba(50, 50, 50, 0.4);
+}
+
+/* Preview styling to indicate it's interactive */
+.dropzone.has-file .asset-preview,
+.dropzone.has-file .texture-preview-container,
+.dropzone.has-file .hdr-preview-container,
+.dropzone.has-file .model-preview-container {
+    cursor: grab; /* Show grab cursor to indicate the preview can be interacted with */
+    border: 1px solid var(--panel-border);
+    background-color: rgba(0,0,0,0.2);
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+/* When actively dragging/interacting */
+.dropzone.has-file .asset-preview:active,
+.dropzone.has-file .texture-preview-container:active,
+.dropzone.has-file .hdr-preview-container:active,
+.dropzone.has-file .model-preview-container:active {
+    cursor: grabbing; /* Change to grabbing cursor when being moved */
+}
+
+/* Hover effect for previews */
+.dropzone.has-file .asset-preview:hover,
+.dropzone.has-file .texture-preview-container:hover,
+.dropzone.has-file .hdr-preview-container:hover,
+.dropzone.has-file .model-preview-container:hover {
+    border-color: var(--button-color);
+    box-shadow: 0 0 5px rgba(30, 136, 229, 0.5);
+}
+
+.dropzone h3 {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.dropzone p {
+    margin: 3px 0;
+    font-size: 12px;
+    color: var(--text-color);
+    max-width: 100%;
+}
+
+.file-info {
+    font-size: 12px;
+    margin-top: 10px;
+    color: var(--label-text);
+}
+
+/* Updated asset preview styles */
+.asset-preview {
+    width: 100%;
+    max-width: 140px;
+    aspect-ratio: 1/1;
+    height: auto;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    border: 1px solid var(--panel-border);
+    background-color: rgba(0,0,0,0.2);
+    position: relative; /* Ensure proper positioning of children */
+    margin-top: auto; /* Push preview to bottom when visible */
+}
+
+/* Use a hidden class for the asset preview instead of display: none */
+.dropzone:not(.has-file) .asset-preview {
+    visibility: hidden;
+    height: 0;
+    margin: 0;
+    border: none;
+    position: absolute;
+}
+
+.dropzone.has-file .asset-preview {
+    visibility: visible;
+    height: auto;
+    margin-top: 10px;
+    display: flex;
+}
+
+/* Create placeholder space for the asset preview to maintain consistent height */
+.asset-preview-placeholder {
+    margin-top: auto; /* Push placeholder to the bottom */
+    height: 140px;
+    width: 100%;
+    max-width: 140px;
+    visibility: hidden;
+}
+
+/* Hide the placeholder when we have a file (since the real preview will be shown) */
+.dropzone.has-file .asset-preview-placeholder {
+    display: none;
+}
+
+.asset-preview img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* Preserve aspect ratio while fitting in square */
+}
+
+/* Group paragraphs together with consistent spacing */
+.dropzone p + p {
+    margin-top: 2px; /* Tighter spacing between consecutive paragraphs */
+}
+
+/* Blue button */
+.start-button {
+   display: block;
+   width: 100%;
+   margin-top: 8px;
+   padding: 10px 20px;
+   font-family: monospace;
+   font-size: 14px;
+   background-color: var(--button-color);
+   color: white;
+   border: none;
+   border-radius: 4px;
+   font-weight: bold;
+   cursor: pointer;
+   transition: all 0.3s ease;
+}
+
+.start-button:hover, .button-base:hover {
+    background-color: #0d74c7;
+}
+
+.start-button:disabled {
+    background-color: #555;
+    color: #888;
+    cursor: not-allowed;
+}
+
+/* File Handler Styles */
+.texture-preview-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+/* Update the HDR preview container for better fit */
+.hdr-preview-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.hdr-preview-canvas {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* Ensure the canvas fits without distortion */
+}
+
+.texture-preview-img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.texture-preview-img.hidden {
+    display: none;
+}
+
+.texture-preview-img.visible {
+    display: block;
+}
+
+.hdr-preview-canvas.hidden {
+    display: none;
+}
+
+.hdr-preview-canvas.visible {
+    display: block;
+}
+
+.texture-hint.optional {
+    color: #88cc88;
+}
+
+.clear-preview-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+}
+
+.clear-preview-button:hover {
+    background-color: rgba(255, 0, 0, 0.6);
+    transform: scale(1.1);
+}
+
+/* Add relative positioning to dropzone to position the clear button properly */
+.dropzone {
+    position: relative;
+    min-width: unset; /* Remove the fixed minimum width */
+    max-width: 275px;
+    flex: 1 1 0;
+}
+
+/* More compact dropzone headers */
+.dropzone h3 {
+    font-size: 16px;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+
+/* More compact paragraphs in dropzones */
+.dropzone p {
+    margin: 3px 0;
+    font-size: 12px;
+    color: var(--text-color);
+    max-width: 100%;
+}
+
+/* Add this to hide file info in lighting dropzone when a file is loaded */
+.dropzone.has-file .file-info {
+    display: none;
+}
+
+/* Style the canvas to ensure it displays properly */
+.hdr-preview-canvas {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.square-preview {
+    display: block;
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    aspect-ratio: 1/1;
+}
+
+.preview {
+    margin-top: 10px;
+    width: 100%;
+    max-width: 140px;
+    aspect-ratio: 1/1;
+    height: auto;
+}

package/src/asset_debugger/landing-page/landing-page.html

@@ -0,0 +1,81 @@
+<!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>Upload Section - Asset Debugger</title>
+</head>
+<body>
+    <!-- Upload section overlay -->
+    <div id="upload-section" class="tool-panel dropzone-container-main">
+        <h2 class="section-heading">Asset Files</h2>
+        <div class="dropzone-row">
+            <div class="dropzone-container">
+                <div class="dropzone" id="basecolor-dropzone">
+                    <h3>Base Color Atlas</h3>
+                    <p>Drag & drop your base color texture atlas here</p>
+                    <p class="file-info" id="basecolor-info"></p>
+                    <div class="asset-preview" id="basecolor-preview"></div>
+                    <div class="asset-preview-placeholder"></div>
+                </div>
+                
+                <div class="dropzone" id="orm-dropzone">
+                    <h3>ORM Atlas</h3>
+                    <p>Drag & drop your ORM (Occlusion, Roughness, Metalness) texture atlas here</p>
+                    <p class="file-info" id="orm-info"></p>
+                    <div class="asset-preview" id="orm-preview"></div>
+                    <div class="asset-preview-placeholder"></div>
+                </div>
+                
+                <div class="dropzone" id="normal-dropzone">
+                    <h3>Normal Atlas</h3>
+                    <p>Drag & drop your normal map texture atlas here</p>
+                    <p class="file-info" id="normal-info"></p>
+                    <div class="asset-preview" id="normal-preview"></div>
+                    <div class="asset-preview-placeholder"></div>
+                </div>
+                
+                <div class="dropzone" id="model-dropzone">
+                    <h3>3D Model</h3>
+                    <p>Drag & drop a GLB model file here</p>
+                    <p>If not provided, a cube will be used</p>
+                    <p class="file-info" id="model-info"></p>
+                    <div class="asset-preview" id="model-preview"></div>
+                    <div class="asset-preview-placeholder"></div>
+                </div>
+            </div>
+        </div>
+        
+        <h2 class="section-heading">World Files</h2>
+        <div class="dropzone-row">
+            <div class="dropzone-container" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;">
+                <div style="grid-column: 1/2; visibility: hidden;"></div>
+                
+                <div class="dropzone" id="lighting-dropzone" style="grid-column: 2/3;">
+                    <h3>Lighting File</h3>
+                    <p>Drag & drop your HDR or EXR lighting file here</p>
+                    <p class="file-info" id="lighting-info"></p>
+                    <div class="asset-preview" id="lighting-preview"></div>
+                    <div class="asset-preview-placeholder"></div>
+                </div>
+                
+                <div class="dropzone" id="background-dropzone" style="grid-column: 3/4;">
+                    <h3>Background Image</h3>
+                    <p>Drag & drop your HDR, EXR, JPEG, PNG, WebP, or TIFF background image here</p>
+                    <p class="file-info" id="background-info"></p>
+                    <div class="asset-preview" id="background-preview"></div>
+                    <div class="asset-preview-placeholder"></div>
+                </div>
+                
+                <div style="grid-column: 4/5; visibility: hidden;"></div>
+            </div>
+        </div>
+        
+        <p id="zip-info" class="file-info" style="text-align: center; margin-top: 15px; display: none;"></p>
+        
+        <button id="start-debug" class="start-button">Start Debugging</button>
+    </div>
+    
+    <div id="examples-modal-container"></div>
+</body>
+</html>