Skip to content

Commit bee537d

Browse files
willwadewillwade
authored
Merge pull request #150 from dasher-project/wasm-dashercore
Wasm dashercore
2 parents 8fb739b + b676571 commit bee537d

1 file changed

Lines changed: 100 additions & 52 deletions

File tree

‎wasm-build/demo.html‎

Lines changed: 100 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,83 +2,131 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>DasherCore WebAssembly Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<title>Dasher</title>
77
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
max-width: 1200px;
11-
margin: 0 auto;
12-
padding: 20px;
13-
background-color: #f5f5f5;
8+
* { box-sizing: border-box; }
9+
:root {
10+
--bg: #1a1a2e; --surface: #16213e; --surface2: #0f3460;
11+
--border: #2a2a4e; --text: #eee; --text-dim: #8a8a9a;
12+
--text-muted: #4a4a5a; --canvas-bg: #000;
13+
--accent: #e94560; --accent-hover: #c81e45;
14+
--stats: rgba(255,255,255,0.4);
1415
}
15-
.container { display: flex; gap: 20px; margin-bottom: 20px; }
16-
.canvas-container {
17-
flex: 1; background: white; border-radius: 8px; padding: 20px;
18-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
16+
@media (prefers-color-scheme: light) {
17+
:root {
18+
--bg: #f5f5f5; --surface: #fff; --surface2: #e8e8f0;
19+
--border: #ddd; --text: #333; --text-dim: #666;
20+
--text-muted: #aaa; --canvas-bg: #f0f0f0;
21+
--accent: #007bff; --accent-hover: #0056b3;
22+
--stats: rgba(0,0,0,0.3);
23+
}
24+
}
25+
html, body {
26+
margin: 0; padding: 0; height: 100%;
27+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
28+
background: var(--bg); color: var(--text);
29+
overflow: hidden;
30+
}
31+
#app {
32+
display: flex; flex-direction: column; height: 100vh; height: 100dvh;
33+
}
34+
.main-area {
35+
flex: 1; display: flex; gap: 8px; padding: 8px;
36+
min-height: 0;
37+
}
38+
.canvas-wrap {
39+
flex: 1; display: flex; flex-direction: column;
40+
background: var(--canvas-bg); border-radius: 12px; overflow: hidden;
41+
position: relative;
1942
}
2043
canvas {
21-
border: 2px solid #ddd; border-radius: 4px; display: block;
22-
margin: 0 auto; cursor: crosshair; touch-action: none;
23-
width: 100%; height: auto; aspect-ratio: 4 / 3;
44+
flex: 1; display: block; cursor: crosshair; touch-action: none;
45+
width: 100%;
46+
}
47+
.canvas-stats {
48+
position: absolute; bottom: 8px; right: 12px;
49+
font-size: 11px; color: var(--stats);
50+
pointer-events: none;
2451
}
25-
.output-container {
26-
width: 280px; background: white; border-radius: 8px; padding: 20px;
27-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
28-
display: flex; flex-direction: column;
52+
.output-wrap {
53+
width: 280px; min-width: 200px; display: flex; flex-direction: column;
54+
background: var(--surface); border-radius: 12px; padding: 12px;
55+
}
56+
.output-wrap h2 {
57+
margin: 0 0 8px 0; font-size: 13px; font-weight: 600;
58+
text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
2959
}
30-
.output-container h2 { margin-top: 0; color: #333; font-size: 18px; }
3160
#output-text {
32-
flex: 1; width: 100%; min-height: 100px; padding: 10px;
33-
border: 1px solid #ddd; border-radius: 4px; font-size: 16px; resize: none;
61+
flex: 1; width: 100%; border: none; background: transparent;
62+
color: var(--text); font-size: 18px; font-family: inherit;
63+
resize: none; outline: none; line-height: 1.5;
3464
}
65+
#output-text::placeholder { color: var(--text-muted); }
3566
.controls {
36-
display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
37-
background: white; border-radius: 8px; padding: 15px 20px;
38-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
67+
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
68+
padding: 10px 12px; background: var(--surface);
3969
}
40-
.control-group { margin-bottom: 0; }
4170
.control-group label {
42-
display: block; margin-bottom: 5px; font-weight: bold; color: #333;
71+
display: block; font-size: 11px; font-weight: 600;
72+
text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim);
73+
margin-bottom: 4px;
4374
}
4475
.control-group select {
45-
padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;
76+
padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
77+
background: var(--surface2); color: var(--text); font-size: 14px; cursor: pointer;
4678
}
4779
.control-group button {
48-
padding: 8px 16px; background-color: #4CAF50; color: white;
49-
border: none; border-radius: 4px; cursor: pointer; font-size: 14px;
80+
padding: 8px 14px; border: none; border-radius: 6px;
81+
background: var(--accent); color: white; font-size: 14px; font-weight: 500;
82+
cursor: pointer; transition: background 0.15s;
5083
}
51-
.control-group button:hover { background-color: #45a049; }
52-
.control-group button:disabled { background-color: #ccc; cursor: not-allowed; }
84+
.control-group button:hover { background: var(--accent-hover); }
85+
.control-group button:disabled { background: var(--border); opacity: 0.5; cursor: not-allowed; }
5386
.toggle-group {
54-
display: flex; align-items: center; gap: 6px; margin-bottom: 0;
87+
display: flex; align-items: center; gap: 6px;
88+
}
89+
.toggle-group label {
90+
margin: 0; font-size: 14px; color: var(--text); cursor: pointer;
5591
}
56-
.toggle-group label { margin: 0; cursor: pointer; font-weight: normal; color: #333; }
57-
.toggle-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
58-
.speed-group { min-width: 200px; }
59-
.speed-group input[type="range"] { width: 100%; cursor: pointer; }
60-
.canvas-stats { text-align: center; margin-top: 10px; font-size: 12px; color: #666; }
61-
@media (max-width: 850px) {
62-
.container { flex-direction: column; }
63-
.output-container { width: 100%; }
92+
.toggle-group input[type="checkbox"] {
93+
width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer;
94+
}
95+
.speed-group { min-width: 160px; flex: 1; max-width: 240px; }
96+
.speed-group input[type="range"] {
97+
width: 100%; cursor: pointer; accent-color: var(--accent);
98+
}
99+
.btn-group { display: flex; gap: 8px; }
100+
101+
@media (max-width: 768px) {
102+
.main-area { flex-direction: column; padding: 6px; gap: 6px; }
103+
.output-wrap { width: 100%; min-height: 80px; max-height: 140px; }
104+
.controls { padding: 8px; gap: 10px; }
105+
.speed-group { min-width: 120px; }
106+
.control-group select { font-size: 13px; }
107+
.canvas-stats { font-size: 10px; }
108+
}
109+
@media (max-width: 480px) {
110+
.controls { overflow-x: auto; flex-wrap: nowrap; }
111+
.controls::-webkit-scrollbar { display: none; }
112+
.toggle-group label { font-size: 13px; }
64113
}
65114
</style>
66115
</head>
67116
<body>
68-
<div class="container">
69-
<div class="canvas-container">
117+
<div id="app">
118+
<div class="main-area">
119+
<div class="canvas-wrap">
70120
<canvas id="dasher-canvas" width="800" height="600"></canvas>
71121
<div class="canvas-stats">
72-
<span id="fps">FPS: 0</span> | <span id="frame-time">Frame Time: 0ms</span>
122+
<span id="fps">FPS: 0</span> | <span id="frame-time">Frame: 0ms</span>
73123
</div>
74124
</div>
75-
76-
<div class="output-container">
125+
<div class="output-wrap">
77126
<h2>Output</h2>
78127
<textarea id="output-text" readonly placeholder="Text appears here..."></textarea>
79128
</div>
80129
</div>
81-
82130
<div class="controls">
83131
<div class="control-group">
84132
<label for="alphabet-select">Alphabet</label>
@@ -96,13 +144,12 @@ <h2>Output</h2>
96144
<input type="checkbox" id="learning-toggle" disabled>
97145
<label for="learning-toggle">Learning</label>
98146
</div>
99-
<div class="control-group">
100-
<button id="reset-btn" disabled>Clear Text</button>
101-
</div>
102-
<div class="control-group">
103-
<button id="full-reset-btn" disabled>Full Reset</button>
147+
<div class="btn-group">
148+
<button id="reset-btn" disabled>Clear</button>
149+
<button id="full-reset-btn" disabled>Reset</button>
104150
</div>
105151
</div>
152+
</div>
106153

107154
<script src="dasher-wasm-wrapper.js"></script>
108155
<script type="module">
@@ -337,6 +384,7 @@ <h2>Output</h2>
337384
}
338385

339386
window.addEventListener('resize', resizeCanvas);
387+
window.addEventListener('orientationchange', () => setTimeout(resizeCanvas, 200));
340388
const resizeObserver = new ResizeObserver(resizeCanvas);
341389
resizeObserver.observe(canvas);
342390
resizeCanvas();

0 commit comments

Comments
 (0)