mobile: add sandbox+touch-action+viewport listeners to mohr/ifs/astar

Author: zmuhls

artifacts/astar.html

@@ -113,7 +113,7 @@ <h1 class="artifact-title">A* Pathfinding</h1>
       <a class="meta-nav" href="../gallery.html">← Gallery</a>
     </div>
   </div>
-  <iframe class="sketch-frame" src="../gallery/astar.html" title="A* Pathfinding" allowfullscreen></iframe>
+  <iframe class="sketch-frame" src="../gallery/astar.html" title="A* Pathfinding" allowfullscreen sandbox="allow-scripts"></iframe>
 </main>
 
 <script>

artifacts/mohr.html

@@ -113,7 +113,7 @@ <h1 class="artifact-title">Mohr</h1>
       <a class="meta-nav" href="../gallery.html">← Gallery</a>
     </div>
   </div>
-  <iframe class="sketch-frame" src="../gallery/mohr.html" title="Mohr Hypercube" allowfullscreen></iframe>
+  <iframe class="sketch-frame" src="../gallery/mohr.html" title="Mohr Hypercube" allowfullscreen sandbox="allow-scripts"></iframe>
 </main>
 
 <script>

gallery/astar.html

@@ -10,7 +10,7 @@
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
 html,body{width:100%;height:100%;height:100dvh;overflow:hidden;background:#0a0a0f;font-family:'Courier New',monospace;color:#c0c0c0;touch-action:none}
-canvas{display:block;position:absolute;top:0;left:0}
+canvas{display:block;position:absolute;top:0;left:0;touch-action:none}
 @media(max-width:600px){
   html.standalone body{display:flex;flex-direction:column;position:relative}
   html.standalone canvas{position:relative;top:auto;left:auto;flex:1;min-height:0;width:100%!important;height:auto!important}
@@ -416,6 +416,8 @@
 }
 
 window.addEventListener('resize',()=>{init();});
+if(window.visualViewport)window.visualViewport.addEventListener('resize',()=>{init();});
+window.addEventListener('orientationchange',()=>{setTimeout(init,200);});
 // Defer init when inside an iframe to ensure layout has painted before sizing
 if(inIframe){
   window.addEventListener('load',()=>{setTimeout(()=>init(),100);},{once:true});