diff --git a/coolshaders.md b/coolshaders.md index 226e173..b99d9d3 100644 --- a/coolshaders.md +++ b/coolshaders.md @@ -1,3 +1,4 @@ x<<127*y*t x<<20*t*80*y^8 x**10*y^200*t+20 +x**10*y^200*t+20 diff --git a/index.html b/index.html index c380cb3..66ea2e1 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,7 @@ color: #fff; font-family: 'IBM Plex Mono', monospace; overflow: hidden; + touch-action: manipulation; /* Allow pan and zoom but disable double-tap zoom */ } #canvas { @@ -43,6 +44,8 @@ image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; + touch-action: none; /* Disable all touch gestures on canvas for shader interaction */ + pointer-events: auto; /* Allow canvas interactions */ } #topbar { @@ -57,6 +60,8 @@ align-items: center; padding: 0 20px; z-index: 100; + pointer-events: auto; /* Ensure topbar can be clicked */ + touch-action: manipulation; /* Allow normal touch interactions */ } #topbar .title { @@ -123,6 +128,8 @@ transition: right 0.3s ease; overflow-y: auto; padding: 20px; + pointer-events: auto; /* Ensure mobile menu can be clicked */ + touch-action: manipulation; /* Allow normal touch interactions */ } #mobile-menu.open { @@ -197,10 +204,12 @@ bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 149; + pointer-events: none; /* Don't block clicks when hidden */ } #mobile-menu-overlay.open { display: block; + pointer-events: auto; /* Only block clicks when visible */ } #topbar button { @@ -242,6 +251,11 @@ pointer-events: none; } + /* Ensure all button contents don't intercept clicks */ + button *, button svg, button [data-lucide] { + pointer-events: none !important; + } + #editor-panel { position: fixed; bottom: 0; @@ -254,6 +268,8 @@ padding: 10px; z-index: 100; transition: all 0.3s ease; + pointer-events: auto; /* Ensure editor panel can be clicked */ + touch-action: manipulation; /* Allow normal touch interactions */ } #editor-panel.minimal { @@ -277,6 +293,7 @@ resize: none; outline: none; transition: all 0.3s ease; + touch-action: manipulation; /* Allow normal touch interactions for text editing */ } #eval-btn { @@ -328,6 +345,8 @@ max-height: 80vh; overflow-y: auto; display: none; + pointer-events: auto; /* Ensure help popup can be clicked */ + touch-action: manipulation; /* Allow normal touch interactions */ } #help-popup h3 { @@ -410,6 +429,8 @@ transition: left 0.3s ease; backdrop-filter: blur(3px); overflow-y: auto; + pointer-events: auto; /* Ensure shader library can be clicked */ + touch-action: manipulation; /* Allow normal touch interactions */ } diff --git a/src/main.ts b/src/main.ts index 30a5ae4..b3aa80b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -266,21 +266,30 @@ class BitfielderApp { // Touch tracking window.addEventListener('touchstart', (e) => { - e.preventDefault(); + // Only prevent default on canvas area for shader interaction + if (e.target === this.canvas) { + e.preventDefault(); + } this.touchCount = e.touches.length; this.updateTouchPositions(e.touches); this.initializePinchGesture(e.touches); }); window.addEventListener('touchmove', (e) => { - e.preventDefault(); + // Only prevent default on canvas area to allow UI scrolling + if (e.target === this.canvas) { + e.preventDefault(); + } this.touchCount = e.touches.length; this.updateTouchPositions(e.touches); this.updatePinchGesture(e.touches); }); window.addEventListener('touchend', (e) => { - e.preventDefault(); + // Only prevent default on canvas area + if (e.target === this.canvas) { + e.preventDefault(); + } this.touchCount = e.touches.length; if (this.touchCount === 0) { this.touch0X = this.touch0Y = this.touch1X = this.touch1Y = 0;