Merge pull request #148 from dasher-project/wasm-dashercore

willwade · web-flow · commit f79c533398cc · 2026-06-16T20:09:08.000+01:00
Wasm dashercore
diff --git a/wasm-build/demo.html b/wasm-build/demo.html
@@ -23,6 +23,7 @@
         canvas {
             border: 2px solid #ddd; border-radius: 4px; display: block;
             margin: 0 auto; cursor: crosshair; touch-action: none;
+            width: 100%; height: auto; aspect-ratio: 4 / 3;
         }
         .controls {
             width: 280px; background: white; border-radius: 8px; padding: 20px;
@@ -74,23 +75,6 @@
     </style>
 </head>
 <body>
-    <div class="header">
-        <h1>DasherCore WebAssembly Demo</h1>
-        <p>Native DasherCore performance in your browser &mdash; Built with C++ and WebAssembly</p>
-    </div>
-
-    <div class="instructions">
-        <h3>How to use Dasher:</h3>
-        <p>1. Move your mouse over the canvas to steer &mdash; the letters zoom toward you</p>
-        <p>2. The crosshair (vertical line) is where text gets entered &mdash; move up/down to choose letters</p>
-        <p>3. Move further right to dash faster; move left to slow down / reverse</p>
-        <p>4. Typed text appears in the output box below</p>
-    </div>
-
-    <div class="status loading" id="status-container">
-        <p class="status-text" id="status">Loading DasherCore WebAssembly...</p>
-    </div>
-
     <div class="container">
         <div class="canvas-container">
             <canvas id="dasher-canvas" width="800" height="600"></canvas>
@@ -153,8 +137,8 @@ <h2>Output Text</h2>
         let lastFpsTime = performance.now();
 
         function updateStatus(message, type) {
-            statusText.textContent = message;
-            statusContainer.className = 'status ' + (type || 'loading');
+            if (statusText) statusText.textContent = message;
+            if (statusContainer) statusContainer.className = 'status ' + (type || 'loading');
         }
 
         function enableControls() {
@@ -348,6 +332,25 @@ <h2>Output Text</h2>
         ctx.textAlign = 'center';
         ctx.fillText('Loading DasherCore...', canvas.width / 2, canvas.height / 2);
 
+        // Responsive canvas: sync resolution to display size
+        function resizeCanvas() {
+            const rect = canvas.getBoundingClientRect();
+            const w = Math.round(rect.width);
+            const h = Math.round(rect.height);
+            if (w > 0 && h > 0 && (w !== canvas.width || h !== canvas.height)) {
+                canvas.width = w;
+                canvas.height = h;
+                if (dasher && isRunning) {
+                    dasher.setScreenSize(w, h);
+                }
+            }
+        }
+
+        window.addEventListener('resize', resizeCanvas);
+        const resizeObserver = new ResizeObserver(resizeCanvas);
+        resizeObserver.observe(canvas);
+        resizeCanvas();
+
         window.addEventListener('beforeunload', () => {
             if (dasher) dasher.destroy();
         });
