From bacc6f03259529045acd367e3f4342b3b2f4a029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= <raphael.forment@gmail.com>
Date: Sat, 5 Jul 2025 18:19:39 +0200
Subject: [PATCH] better eval mechanism and transparency

---
 index.html     | 67 +++++++++++++++++++++++++++++++++++++++-----------
 src/Storage.ts |  7 ++++--
 src/main.ts    | 32 ++++++++++++++++++++++++
 3 files changed, 90 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index f8adac2..29b5491 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,10 @@
     <meta name="twitter:title" content="Bitfielder - Bitfield Shader App">
     <meta name="twitter:description" content="Interactive bitfield shader editor for creating visual patterns using bitwise operations">
     <style>
+        :root {
+            --ui-opacity: 0.3;
+        }
+        
         * {
             margin: 0;
             padding: 0;
@@ -44,7 +48,7 @@
             left: 0;
             right: 0;
             height: 40px;
-            background: rgba(0, 0, 0, 0.8);
+            background: rgba(0, 0, 0, var(--ui-opacity));
             border-bottom: 1px solid #333;
             display: flex;
             align-items: center;
@@ -86,11 +90,11 @@
             left: 0;
             right: 0;
             height: 140px;
-            background: rgba(0, 0, 0, 0.6);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
             display: flex;
+            align-items: stretch;
+            gap: 10px;
+            padding: 10px;
             z-index: 100;
-            backdrop-filter: blur(5px);
             transition: all 0.3s ease;
         }
         
@@ -99,14 +103,15 @@
             bottom: 20px;
             left: 20px;
             right: 20px;
-            border-radius: 8px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 5px;
         }
         
         #editor {
-            width: 100%;
-            background: rgba(0, 0, 0, 0.3);
-            border: none;
+            flex: 1;
+            background: rgba(0, 0, 0, var(--ui-opacity));
+            backdrop-filter: blur(2px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
             color: #fff;
             font-family: monospace;
             font-size: 16px;
@@ -116,10 +121,38 @@
             transition: all 0.3s ease;
         }
         
+        #eval-btn {
+            background: rgba(0, 0, 0, var(--ui-opacity));
+            backdrop-filter: blur(2px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: #fff;
+            padding: 20px 30px;
+            font-family: monospace;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+            align-self: stretch;
+        }
+        
+        #eval-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.4);
+        }
+        
+        #eval-btn:active {
+            transform: scale(0.95);
+        }
+        
         #editor.minimal {
             padding: 12px 15px;
             font-size: 14px;
-            background: rgba(0, 0, 0, 0.3);
+        }
+        
+        #eval-btn.minimal {
+            padding: 10px 20px;
+            font-size: 14px;
         }
         
         #help-popup {
@@ -191,7 +224,7 @@
             position: fixed;
             top: 10px;
             right: 10px;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, var(--ui-opacity));
             border: 1px solid #555;
             color: #fff;
             padding: 8px 12px;
@@ -213,11 +246,11 @@
             right: -300px;
             width: 300px;
             height: 100vh;
-            background: rgba(0, 0, 0, 0.9);
+            background: rgba(0, 0, 0, calc(var(--ui-opacity) + 0.1));
             border-left: 1px solid rgba(255, 255, 255, 0.1);
             z-index: 90;
             transition: right 0.3s ease;
-            backdrop-filter: blur(10px);
+            backdrop-filter: blur(3px);
             overflow-y: auto;
         }
         
@@ -376,7 +409,7 @@
         
         .shader-code {
             padding: 8px 10px;
-            background: rgba(0, 0, 0, 0.3);
+            background: rgba(0, 0, 0, var(--ui-opacity));
             color: #ccc;
             font-family: monospace;
             font-size: 11px;
@@ -555,6 +588,11 @@
                     <option value="rainbow">Rainbow</option>
                 </select>
             </label>
+            <label style="color: #ccc; font-size: 12px; margin-right: 10px;">
+                UI Opacity: 
+                <input type="range" id="opacity-slider" min="10" max="100" value="30" style="width: 80px; vertical-align: middle;">
+                <span id="opacity-value" style="font-size: 11px;">30%</span>
+            </label>
             <button id="help-btn">?</button>
             <button id="fullscreen-btn">Fullscreen</button>
             <button id="hide-ui-btn">Hide UI</button>
@@ -566,6 +604,7 @@
     
     <div id="editor-panel">
         <textarea id="editor" placeholder="Enter shader code... (x, y, t, i, mouseX, mouseY)" spellcheck="false">x^y</textarea>
+        <button id="eval-btn">Eval</button>
     </div>
     
     <div id="shader-library-trigger"></div>
diff --git a/src/Storage.ts b/src/Storage.ts
index 6f9b5f3..869958d 100644
--- a/src/Storage.ts
+++ b/src/Storage.ts
@@ -11,6 +11,7 @@ interface AppSettings {
     fps: number;
     lastShaderCode: string;
     renderMode: string;
+    uiOpacity?: number;
 }
 
 export class Storage {
@@ -97,7 +98,8 @@ export class Storage {
                 resolution: 1,
                 fps: 30,
                 lastShaderCode: 'x^y',
-                renderMode: 'classic'
+                renderMode: 'classic',
+                uiOpacity: 0.3
             };
             return stored ? { ...defaults, ...JSON.parse(stored) } : defaults;
         } catch (error) {
@@ -106,7 +108,8 @@ export class Storage {
                 resolution: 1,
                 fps: 30,
                 lastShaderCode: 'x^y',
-                renderMode: 'classic'
+                renderMode: 'classic',
+                uiOpacity: 0.3
             };
         }
     }
diff --git a/src/main.ts b/src/main.ts
index 6679e50..d2a0fd4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -58,6 +58,9 @@ class BitfielderApp {
         const resolutionSelect = document.getElementById('resolution-select') as HTMLSelectElement;
         const fpsSelect = document.getElementById('fps-select') as HTMLSelectElement;
         const renderModeSelect = document.getElementById('render-mode-select') as HTMLSelectElement;
+        const opacitySlider = document.getElementById('opacity-slider') as HTMLInputElement;
+        const opacityValue = document.getElementById('opacity-value')!;
+        const evalBtn = document.getElementById('eval-btn')!;
         const helpPopup = document.getElementById('help-popup')!;
         const closeBtn = helpPopup.querySelector('.close-btn')!;
         
@@ -76,6 +79,8 @@ class BitfielderApp {
         resolutionSelect.addEventListener('change', () => this.updateResolution());
         fpsSelect.addEventListener('change', () => this.updateFPS());
         renderModeSelect.addEventListener('change', () => this.updateRenderMode());
+        opacitySlider.addEventListener('input', () => this.updateUIOpacity());
+        evalBtn.addEventListener('click', () => this.evalShader());
         closeBtn.addEventListener('click', () => this.hideHelp());
         
         // Library events
@@ -175,6 +180,7 @@ class BitfielderApp {
         const topbar = document.getElementById('topbar')!;
         const editorPanel = document.getElementById('editor-panel')!;
         const editor = document.getElementById('editor')!;
+        const evalBtn = document.getElementById('eval-btn')!;
         const showUiBtn = document.getElementById('show-ui-btn')!;
         
         if (this.uiVisible) {
@@ -182,12 +188,14 @@ class BitfielderApp {
             topbar.classList.remove('hidden');
             editorPanel.classList.remove('minimal');
             editor.classList.remove('minimal');
+            evalBtn.classList.remove('minimal');
             showUiBtn.style.display = 'none';
         } else {
             // Hide topbar, make editor minimal
             topbar.classList.add('hidden');
             editorPanel.classList.add('minimal');
             editor.classList.add('minimal');
+            evalBtn.classList.add('minimal');
             showUiBtn.style.display = 'block';
         }
         
@@ -200,11 +208,13 @@ class BitfielderApp {
         const topbar = document.getElementById('topbar')!;
         const editorPanel = document.getElementById('editor-panel')!;
         const editor = document.getElementById('editor')!;
+        const evalBtn = document.getElementById('eval-btn')!;
         const showUiBtn = document.getElementById('show-ui-btn')!;
         
         topbar.classList.remove('hidden');
         editorPanel.classList.remove('minimal');
         editor.classList.remove('minimal');
+        evalBtn.classList.remove('minimal');
         showUiBtn.style.display = 'none';
         
         // Recalculate canvas size when UI is shown
@@ -272,6 +282,22 @@ class BitfielderApp {
         Storage.saveSettings({ renderMode });
     }
 
+    private updateUIOpacity(): void {
+        const opacitySlider = document.getElementById('opacity-slider') as HTMLInputElement;
+        const opacityValue = document.getElementById('opacity-value')!;
+        const opacity = parseInt(opacitySlider.value) / 100;
+        
+        document.documentElement.style.setProperty('--ui-opacity', opacity.toString());
+        opacityValue.textContent = `${opacitySlider.value}%`;
+        
+        Storage.saveSettings({ uiOpacity: opacity });
+    }
+
+    private evalShader(): void {
+        this.shader.setCode(this.editor.value);
+        this.render();
+    }
+
     private exportPNG(): void {
         const link = document.createElement('a');
         link.download = `bitfielder-${Date.now()}.png`;
@@ -289,6 +315,12 @@ class BitfielderApp {
         (document.getElementById('fps-select') as HTMLSelectElement).value = settings.fps.toString();
         (document.getElementById('render-mode-select') as HTMLSelectElement).value = settings.renderMode || 'classic';
         
+        // Apply UI opacity
+        const opacity = settings.uiOpacity ?? 0.3;
+        document.documentElement.style.setProperty('--ui-opacity', opacity.toString());
+        (document.getElementById('opacity-slider') as HTMLInputElement).value = (opacity * 100).toString();
+        document.getElementById('opacity-value')!.textContent = `${Math.round(opacity * 100)}%`;
+        
         // Load last shader code if no URL hash
         if (!window.location.hash) {
             this.editor.value = settings.lastShaderCode;