Skip to content

Wasm dashercore #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
willwade merged 2 commits into from
Jun 16, 2026
Merged

Wasm dashercore #148

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7d01cdd
Make canvas responsive to container size
willwade Jun 16, 2026
bfb7a67
Remove header and instructions for minimal embeddable page
willwade Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 22 additions & 19 deletions wasm-build/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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();
});
Expand Down
Loading