mudra-skills 3.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/package.json +1 -1
  2. package/skills/mudra-master/SKILL.md +0 -196
  3. package/skills/mudra-master/mudra-preview/SKILL.md +0 -150
  4. package/skills/mudra-master/mudra-preview/assets/ar-menu.html +0 -382
  5. package/skills/mudra-master/mudra-preview/assets/document-scroller.html +0 -468
  6. package/skills/mudra-master/mudra-preview/assets/drum-machine.html +0 -788
  7. package/skills/mudra-master/mudra-preview/assets/emg-visualizer.html +0 -390
  8. package/skills/mudra-master/mudra-preview/assets/generative-art.html +0 -408
  9. package/skills/mudra-master/mudra-preview/assets/gesture-assistant.html +0 -342
  10. package/skills/mudra-master/mudra-preview/assets/gesture-speech.html +0 -444
  11. package/skills/mudra-master/mudra-preview/assets/hands-free-desktop.html +0 -376
  12. package/skills/mudra-master/mudra-preview/assets/model-rotator.html +0 -365
  13. package/skills/mudra-master/mudra-preview/assets/mudra-duel.html +0 -3200
  14. package/skills/mudra-master/mudra-preview/assets/mudra-monitor.html +0 -1451
  15. package/skills/mudra-master/mudra-preview/assets/mudra-ultimate-template.html +0 -891
  16. package/skills/mudra-master/mudra-preview/assets/music-sequencer.html +0 -455
  17. package/skills/mudra-master/mudra-preview/assets/neural-pong.html +0 -380
  18. package/skills/mudra-master/mudra-preview/assets/neural-snake.html +0 -364
  19. package/skills/mudra-master/mudra-preview/assets/presentation-controller.html +0 -345
  20. package/skills/mudra-master/mudra-preview/assets/pressure-painter.html +0 -285
  21. package/skills/mudra-master/mudra-preview/assets/runner.html +0 -1812
  22. package/skills/mudra-master/mudra-preview/assets/smart-home.html +0 -461
  23. package/skills/mudra-master/mudra-preview/assets/space-invaders.html +0 -1154
  24. package/skills/mudra-master/mudra-preview/assets/waterful-ring-toss.html +0 -1624
  25. package/skills/mudra-master/mudra-preview/references/agent_protocol.json +0 -634
  26. package/skills/mudra-master/mudra-preview/references/prompt.md +0 -16746
  27. package/skills/mudra-master/mudra-xr/SKILL.md +0 -245
  28. package/skills/mudra-master/mudra-xr/assets/demos/3dgs-walkthrough.html +0 -242
  29. package/skills/mudra-master/mudra-xr/assets/demos/aisimulator.html +0 -792
  30. package/skills/mudra-master/mudra-xr/assets/demos/balloonpop.html +0 -422
  31. package/skills/mudra-master/mudra-xr/assets/demos/ballpit.html +0 -284
  32. package/skills/mudra-master/mudra-xr/assets/demos/drone.html +0 -41
  33. package/skills/mudra-master/mudra-xr/assets/demos/gemini-icebreakers.html +0 -338
  34. package/skills/mudra-master/mudra-xr/assets/demos/gemini-xrobject.html +0 -302
  35. package/skills/mudra-master/mudra-xr/assets/demos/math3d.html +0 -188
  36. package/skills/mudra-master/mudra-xr/assets/demos/measure.html +0 -247
  37. package/skills/mudra-master/mudra-xr/assets/demos/occlusion.html +0 -251
  38. package/skills/mudra-master/mudra-xr/assets/demos/rain.html +0 -498
  39. package/skills/mudra-master/mudra-xr/assets/demos/screenwiper.html +0 -432
  40. package/skills/mudra-master/mudra-xr/assets/demos/splash.html +0 -519
  41. package/skills/mudra-master/mudra-xr/assets/demos/webcam_gestures.html +0 -253
  42. package/skills/mudra-master/mudra-xr/assets/demos/xremoji.html +0 -833
  43. package/skills/mudra-master/mudra-xr/assets/demos/xrpoet.html +0 -151
  44. package/skills/mudra-master/mudra-xr/assets/samples/depthmap.html +0 -266
  45. package/skills/mudra-master/mudra-xr/assets/samples/depthmesh.html +0 -100
  46. package/skills/mudra-master/mudra-xr/assets/samples/game_rps.html +0 -1099
  47. package/skills/mudra-master/mudra-xr/assets/samples/gestures_custom.html +0 -467
  48. package/skills/mudra-master/mudra-xr/assets/samples/gestures_heuristic.html +0 -256
  49. package/skills/mudra-master/mudra-xr/assets/samples/lighting.html +0 -163
  50. package/skills/mudra-master/mudra-xr/assets/samples/mesh_detection.html +0 -46
  51. package/skills/mudra-master/mudra-xr/assets/samples/modelviewer.html +0 -183
  52. package/skills/mudra-master/mudra-xr/assets/samples/paint.html +0 -133
  53. package/skills/mudra-master/mudra-xr/assets/samples/planar-vst.html +0 -45
  54. package/skills/mudra-master/mudra-xr/assets/samples/reticle.html +0 -95
  55. package/skills/mudra-master/mudra-xr/assets/samples/skybox_agent.html +0 -384
  56. package/skills/mudra-master/mudra-xr/assets/samples/sound.html +0 -390
  57. package/skills/mudra-master/mudra-xr/assets/samples/ui.html +0 -496
  58. package/skills/mudra-master/mudra-xr/assets/samples/virtual-screens.html +0 -808
  59. package/skills/mudra-master/mudra-xr/assets/templates/0_basic.html +0 -64
  60. package/skills/mudra-master/mudra-xr/assets/templates/1_ui.html +0 -107
  61. package/skills/mudra-master/mudra-xr/assets/templates/2_hands.html +0 -183
  62. package/skills/mudra-master/mudra-xr/assets/templates/3_depth.html +0 -89
  63. package/skills/mudra-master/mudra-xr/assets/templates/4_stereo.html +0 -84
  64. package/skills/mudra-master/mudra-xr/assets/templates/5_camera.html +0 -117
  65. package/skills/mudra-master/mudra-xr/assets/templates/6_ai.html +0 -154
  66. package/skills/mudra-master/mudra-xr/assets/templates/7_ai_live.html +0 -253
  67. package/skills/mudra-master/mudra-xr/assets/templates/8_objects.html +0 -95
  68. package/skills/mudra-master/mudra-xr/assets/templates/9_xr-toggle.html +0 -90
  69. package/skills/mudra-master/mudra-xr/assets/templates/heuristic_hand_gestures.html +0 -102
  70. package/skills/mudra-master/mudra-xr/assets/templates/meshes.html +0 -47
  71. package/skills/mudra-master/mudra-xr/assets/templates/planes.html +0 -47
  72. package/skills/mudra-master/mudra-xr/assets/templates/uikit.html +0 -187
  73. package/skills/mudra-master/mudra-xr/references/agent_protocol.json +0 -865
  74. package/skills/mudra-master/mudra-xr/references/prompt.md +0 -1605
  75. package/skills/mudra-preview/SKILL.md +0 -159
  76. package/skills/mudra-preview/assets/ar-menu.html +0 -382
  77. package/skills/mudra-preview/assets/document-scroller.html +0 -468
  78. package/skills/mudra-preview/assets/drum-machine.html +0 -788
  79. package/skills/mudra-preview/assets/emg-visualizer.html +0 -390
  80. package/skills/mudra-preview/assets/generative-art.html +0 -408
  81. package/skills/mudra-preview/assets/gesture-assistant.html +0 -342
  82. package/skills/mudra-preview/assets/gesture-speech.html +0 -444
  83. package/skills/mudra-preview/assets/hands-free-desktop.html +0 -376
  84. package/skills/mudra-preview/assets/model-rotator.html +0 -365
  85. package/skills/mudra-preview/assets/mudra-duel.html +0 -3200
  86. package/skills/mudra-preview/assets/mudra-monitor.html +0 -1451
  87. package/skills/mudra-preview/assets/mudra-ultimate-template.html +0 -997
  88. package/skills/mudra-preview/assets/music-sequencer.html +0 -455
  89. package/skills/mudra-preview/assets/neural-pong.html +0 -380
  90. package/skills/mudra-preview/assets/neural-snake.html +0 -364
  91. package/skills/mudra-preview/assets/presentation-controller.html +0 -345
  92. package/skills/mudra-preview/assets/pressure-painter.html +0 -285
  93. package/skills/mudra-preview/assets/runner.html +0 -1812
  94. package/skills/mudra-preview/assets/smart-home.html +0 -461
  95. package/skills/mudra-preview/assets/space-invaders.html +0 -1154
  96. package/skills/mudra-preview/assets/waterful-ring-toss.html +0 -1624
  97. package/skills/mudra-preview/references/agent_protocol.json +0 -701
  98. package/skills/mudra-preview/references/prompt.md +0 -16731
  99. package/skills/mudra-xr/SKILL.md +0 -245
  100. package/skills/mudra-xr/assets/demos/3dgs-walkthrough.html +0 -242
  101. package/skills/mudra-xr/assets/demos/aisimulator.html +0 -792
  102. package/skills/mudra-xr/assets/demos/balloonpop.html +0 -422
  103. package/skills/mudra-xr/assets/demos/ballpit.html +0 -284
  104. package/skills/mudra-xr/assets/demos/drone.html +0 -41
  105. package/skills/mudra-xr/assets/demos/gemini-icebreakers.html +0 -338
  106. package/skills/mudra-xr/assets/demos/gemini-xrobject.html +0 -302
  107. package/skills/mudra-xr/assets/demos/math3d.html +0 -188
  108. package/skills/mudra-xr/assets/demos/measure.html +0 -247
  109. package/skills/mudra-xr/assets/demos/occlusion.html +0 -251
  110. package/skills/mudra-xr/assets/demos/rain.html +0 -498
  111. package/skills/mudra-xr/assets/demos/screenwiper.html +0 -432
  112. package/skills/mudra-xr/assets/demos/splash.html +0 -519
  113. package/skills/mudra-xr/assets/demos/webcam_gestures.html +0 -253
  114. package/skills/mudra-xr/assets/demos/xremoji.html +0 -833
  115. package/skills/mudra-xr/assets/demos/xrpoet.html +0 -151
  116. package/skills/mudra-xr/assets/samples/depthmap.html +0 -266
  117. package/skills/mudra-xr/assets/samples/depthmesh.html +0 -100
  118. package/skills/mudra-xr/assets/samples/game_rps.html +0 -1099
  119. package/skills/mudra-xr/assets/samples/gestures_custom.html +0 -467
  120. package/skills/mudra-xr/assets/samples/gestures_heuristic.html +0 -256
  121. package/skills/mudra-xr/assets/samples/lighting.html +0 -163
  122. package/skills/mudra-xr/assets/samples/mesh_detection.html +0 -46
  123. package/skills/mudra-xr/assets/samples/modelviewer.html +0 -183
  124. package/skills/mudra-xr/assets/samples/paint.html +0 -133
  125. package/skills/mudra-xr/assets/samples/planar-vst.html +0 -45
  126. package/skills/mudra-xr/assets/samples/reticle.html +0 -95
  127. package/skills/mudra-xr/assets/samples/skybox_agent.html +0 -384
  128. package/skills/mudra-xr/assets/samples/sound.html +0 -390
  129. package/skills/mudra-xr/assets/samples/ui.html +0 -496
  130. package/skills/mudra-xr/assets/samples/virtual-screens.html +0 -808
  131. package/skills/mudra-xr/assets/templates/0_basic.html +0 -64
  132. package/skills/mudra-xr/assets/templates/1_ui.html +0 -107
  133. package/skills/mudra-xr/assets/templates/2_hands.html +0 -183
  134. package/skills/mudra-xr/assets/templates/3_depth.html +0 -89
  135. package/skills/mudra-xr/assets/templates/4_stereo.html +0 -84
  136. package/skills/mudra-xr/assets/templates/5_camera.html +0 -117
  137. package/skills/mudra-xr/assets/templates/6_ai.html +0 -154
  138. package/skills/mudra-xr/assets/templates/7_ai_live.html +0 -253
  139. package/skills/mudra-xr/assets/templates/8_objects.html +0 -95
  140. package/skills/mudra-xr/assets/templates/9_xr-toggle.html +0 -90
  141. package/skills/mudra-xr/assets/templates/heuristic_hand_gestures.html +0 -102
  142. package/skills/mudra-xr/assets/templates/meshes.html +0 -47
  143. package/skills/mudra-xr/assets/templates/planes.html +0 -47
  144. package/skills/mudra-xr/assets/templates/uikit.html +0 -187
  145. package/skills/mudra-xr/references/agent_protocol.json +0 -865
  146. package/skills/mudra-xr/references/prompt.md +0 -1605
package/skills/mudra-master/mudra-preview/assets/drum-machine.html DELETED
@@ -1,788 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Mudra Drum Machine</title>
7
- <style>
8
- @media (prefers-reduced-motion: reduce) {
9
- *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
10
- }
11
-
12
- :root {
13
- --bg: #0a0a12;
14
- --surface: #12122a;
15
- --card: #1a1a35;
16
- --border: rgba(255,255,255,0.07);
17
- --text: #f0f0ff;
18
- --text-dim: #7878a0;
19
- --primary: #ffd60a;
20
- --primary-glow: rgba(255,214,10,0.25);
21
- --success: #00e676;
22
- --warning: #ff9100;
23
- --error: #ff1744;
24
- }
25
-
26
- * { margin: 0; padding: 0; box-sizing: border-box; }
27
- body {
28
- background: var(--bg);
29
- color: var(--text);
30
- font-family: 'Segoe UI', system-ui, sans-serif;
31
- height: 100vh;
32
- display: flex;
33
- flex-direction: column;
34
- overflow: hidden;
35
- }
36
-
37
- /* ── Header ── */
38
- .header {
39
- display: flex;
40
- align-items: center;
41
- justify-content: space-between;
42
- padding: 8px 16px;
43
- background: var(--card);
44
- border-bottom: 1px solid var(--border);
45
- flex-shrink: 0;
46
- gap: 8px;
47
- flex-wrap: wrap;
48
- }
49
- .brand { font-weight: 800; font-size: 15px; letter-spacing: 0.04em; }
50
- .brand span { color: var(--primary); }
51
- .header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
52
- .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); transition: all 200ms; flex-shrink: 0; }
53
- .conn-dot.live { background: var(--success); box-shadow: 0 0 8px var(--success); }
54
- .conn-label { font-size: 11px; color: var(--text-dim); }
55
-
56
- .btn {
57
- background: rgba(255,255,255,0.04);
58
- border: 1px solid var(--border);
59
- color: var(--text-dim);
60
- padding: 4px 10px;
61
- border-radius: 6px;
62
- font-size: 11px;
63
- cursor: pointer;
64
- font-family: inherit;
65
- transition: all 150ms;
66
- white-space: nowrap;
67
- }
68
- .btn:hover { border-color: var(--primary); color: var(--primary); }
69
- .btn.active { background: var(--primary); color: #000; border-color: transparent; font-weight: 700; }
70
-
71
- /* ── Transport ── */
72
- .transport {
73
- display: flex;
74
- align-items: center;
75
- gap: 12px;
76
- padding: 8px 16px;
77
- background: var(--surface);
78
- border-bottom: 1px solid var(--border);
79
- flex-shrink: 0;
80
- flex-wrap: wrap;
81
- }
82
- .transport-btn {
83
- width: 34px; height: 34px;
84
- border-radius: 50%;
85
- border: 2px solid var(--primary);
86
- background: transparent;
87
- color: var(--primary);
88
- font-size: 14px;
89
- cursor: pointer;
90
- display: flex; align-items: center; justify-content: center;
91
- transition: all 150ms;
92
- flex-shrink: 0;
93
- }
94
- .transport-btn:hover { background: var(--primary-glow); }
95
- .transport-btn.playing { background: var(--primary); color: #000; }
96
- .rec-btn { border-color: #ff1744; color: #ff1744; }
97
- .rec-btn:hover { background: rgba(255,23,68,0.15); }
98
- .rec-btn.recording { background: #ff1744; color: #fff; animation: pulse-rec 1s ease-in-out infinite; }
99
- @keyframes pulse-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
100
-
101
- .bpm-control { display: flex; align-items: center; gap: 5px; }
102
- .bpm-val { font-size: 21px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; min-width: 60px; text-align: center; }
103
- .bpm-lbl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; text-align: center; }
104
-
105
- .vel-wrap { display: flex; align-items: center; gap: 7px; margin-left: auto; }
106
- .vel-lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.8px; }
107
- .vel-bar { width: 90px; height: 6px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
108
- .vel-fill { height: 100%; background: linear-gradient(90deg, #00e676, #ffd60a, #ff6d00); border-radius: 99px; transition: width 55ms; width: 70%; }
109
- .vel-pct { font-size: 11px; color: var(--text-dim); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
110
-
111
- /* ── Loop steps bar ── */
112
- .steps-bar {
113
- display: flex;
114
- align-items: center;
115
- gap: 3px;
116
- padding: 6px 16px;
117
- background: var(--surface);
118
- border-bottom: 1px solid var(--border);
119
- flex-shrink: 0;
120
- overflow-x: auto;
121
- }
122
- .steps-lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 8px; white-space: nowrap; flex-shrink: 0; }
123
- .step-dot {
124
- width: 14px; height: 14px;
125
- border-radius: 3px;
126
- background: rgba(255,255,255,0.04);
127
- border: 1px solid var(--border);
128
- flex-shrink: 0;
129
- cursor: pointer;
130
- transition: all 70ms;
131
- }
132
- .step-dot.on { background: rgba(255,214,10,0.3); border-color: var(--primary); }
133
- .step-dot.head { box-shadow: 0 0 0 2px var(--primary); }
134
- .step-dot.on.head { background: var(--primary); }
135
- .step-dot:nth-child(5n+2) { margin-left: 5px; }
136
-
137
- /* ── Pad grid ── */
138
- .grid-area {
139
- flex: 1;
140
- display: flex;
141
- align-items: center;
142
- justify-content: center;
143
- padding: 14px;
144
- overflow: hidden;
145
- }
146
- .pad-grid {
147
- display: grid;
148
- grid-template-columns: repeat(4, 1fr);
149
- gap: 10px;
150
- width: min(500px, 100%);
151
- aspect-ratio: 1;
152
- }
153
- .pad {
154
- border-radius: 14px;
155
- border: 2px solid rgba(255,255,255,0.06);
156
- cursor: pointer;
157
- display: flex;
158
- flex-direction: column;
159
- align-items: center;
160
- justify-content: center;
161
- gap: 3px;
162
- position: relative;
163
- overflow: hidden;
164
- user-select: none;
165
- transition: transform 80ms ease-out, box-shadow 80ms ease-out, border-color 80ms;
166
- min-height: 70px;
167
- }
168
- .pad::before {
169
- content: '';
170
- position: absolute;
171
- inset: 0;
172
- background: var(--pad-color, #ff6d00);
173
- opacity: 0.1;
174
- transition: opacity 80ms;
175
- border-radius: inherit;
176
- }
177
- .pad.selected { border-color: var(--pad-color); box-shadow: 0 0 0 1px var(--pad-color), 0 0 20px color-mix(in srgb, var(--pad-color) 35%, transparent); }
178
- .pad.selected::before { opacity: 0.2; }
179
- .pad.hit::before { opacity: 0.75 !important; }
180
- .pad.hit { transform: scale(0.92); }
181
- .pad-num { font-size: 9px; color: rgba(255,255,255,0.18); position: absolute; top: 5px; left: 7px; }
182
- .pad-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); position: relative; z-index: 1; transition: color 80ms; }
183
- .pad.selected .pad-name { color: var(--pad-color); }
184
- .pad.hit .pad-name { color: #fff; }
185
- .sel-dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pad-color); opacity: 0; transition: opacity 150ms; z-index: 2; }
186
- .pad.selected .sel-dot { opacity: 1; }
187
- .has-steps { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--pad-color); opacity: 0; transition: opacity 200ms; }
188
- .pad.has-pattern .has-steps { opacity: 0.7; }
189
-
190
- /* ── HUD ── */
191
- .hud {
192
- position: fixed;
193
- bottom: 38px; left: 12px;
194
- background: rgba(0,0,0,0.75);
195
- border: 1px solid var(--border);
196
- border-radius: 10px;
197
- padding: 7px 11px;
198
- font-size: 10px;
199
- color: var(--text-dim);
200
- font-variant-numeric: tabular-nums;
201
- backdrop-filter: blur(8px);
202
- z-index: 100;
203
- line-height: 1.7;
204
- min-width: 145px;
205
- }
206
- .hud-row { display: flex; justify-content: space-between; gap: 14px; }
207
- .hud-val { color: var(--text); }
208
-
209
- .mudra-badge {
210
- position: fixed;
211
- bottom: 10px; right: 10px;
212
- font-size: 10px; color: var(--text-dim); opacity: 0.45;
213
- pointer-events: none; z-index: 200; letter-spacing: 0.04em;
214
- }
215
-
216
- /* ── Hint bar ── */
217
- .hint-bar {
218
- padding: 5px 16px;
219
- background: var(--surface);
220
- border-top: 1px solid var(--border);
221
- font-size: 10px;
222
- color: var(--text-dim);
223
- text-align: center;
224
- flex-shrink: 0;
225
- opacity: 0.7;
226
- }
227
-
228
- @media (max-width: 600px) {
229
- .pad-grid { gap: 6px; }
230
- .pad { border-radius: 9px; min-height: 55px; }
231
- .hud { display: none; }
232
- .hint-bar { display: none; }
233
- .vel-bar { width: 55px; }
234
- }
235
- </style>
236
- </head>
237
- <body>
238
-
239
- <!-- Header -->
240
- <div class="header">
241
- <div class="brand"><span>Mudra</span> Drum Machine</div>
242
- <div class="header-right">
243
- <span class="conn-dot" id="connDot"></span>
244
- <span class="conn-label" id="connLabel">Connecting…</span>
245
- <button class="btn" id="simTapBtn">Simulate Tap</button>
246
- <button class="btn" id="simDirBtn">Simulate Swipe</button>
247
- <button class="btn" id="clearBtn">Clear All</button>
248
- </div>
249
- </div>
250
-
251
- <!-- Transport -->
252
- <div class="transport">
253
- <button class="transport-btn" id="playBtn" title="Play / Pause (Enter)">&#9654;</button>
254
- <button class="transport-btn rec-btn" id="recBtn" title="Record mode (R)">&#9679;</button>
255
- <div class="bpm-control">
256
- <button class="btn" id="bpmDown">&#8722;</button>
257
- <div>
258
- <div class="bpm-val" id="bpmVal">120</div>
259
- <div class="bpm-lbl">BPM</div>
260
- </div>
261
- <button class="btn" id="bpmUp">+</button>
262
- </div>
263
- <div class="vel-wrap">
264
- <span class="vel-lbl">Velocity</span>
265
- <div class="vel-bar"><div class="vel-fill" id="velFill"></div></div>
266
- <span class="vel-pct" id="velPct">70%</span>
267
- </div>
268
- </div>
269
-
270
- <!-- Step loop bar -->
271
- <div class="steps-bar" id="stepsBar">
272
- <span class="steps-lbl">Loop &rarr;</span>
273
- </div>
274
-
275
- <!-- Pad grid -->
276
- <div class="grid-area">
277
- <div class="pad-grid" id="padGrid"></div>
278
- </div>
279
-
280
- <!-- Telemetry HUD -->
281
- <div class="hud">
282
- <div class="hud-row"><span>Gesture</span><span class="hud-val" id="hudGesture">—</span></div>
283
- <div class="hud-row"><span>Direction</span><span class="hud-val" id="hudDir">—</span></div>
284
- <div class="hud-row"><span>Pressure</span><span class="hud-val" id="hudPres">—</span></div>
285
- <div class="hud-row"><span>Pad</span><span class="hud-val" id="hudPad">1 · Kick 1</span></div>
286
- <div class="hud-row"><span>Step</span><span class="hud-val" id="hudStep">—</span></div>
287
- </div>
288
-
289
- <div class="hint-bar">
290
- Arrows: navigate pads &nbsp;&middot;&nbsp; Space: hit pad &nbsp;&middot;&nbsp; Enter: play/pause &nbsp;&middot;&nbsp; R: record &nbsp;&middot;&nbsp; 1–9: select pad &nbsp;&middot;&nbsp; [&nbsp;]: velocity &nbsp;&middot;&nbsp; C: clear row
291
- </div>
292
-
293
- <div class="mudra-badge">Powered by Mudra Band</div>
294
-
295
- <script>
296
- // ── Mock WebSocket (auto-activates when real WS is blocked) ──────────────
297
- class MudraWebSocket {
298
- constructor(url) {
299
- this._handlers = {};
300
- this._subscriptions = new Set();
301
- this._timers = [];
302
- this._useMock = false;
303
- try {
304
- this._ws = new WebSocket(url);
305
- this._ws.onopen = (e) => { this._useMock = false; this._trigger('open', e); };
306
- this._ws.onmessage = (e) => this._trigger('message', e);
307
- this._ws.onclose = (e) => this._trigger('close', e);
308
- this._ws.onerror = () => { this._startMock(); };
309
- } catch (e) {
310
- this._startMock();
311
- }
312
- }
313
- set onopen(fn) { this._handlers.open = fn; }
314
- set onmessage(fn) { this._handlers.message = fn; }
315
- set onclose(fn) { this._handlers.close = fn; }
316
- set onerror(fn) { this._handlers.error = fn; }
317
- _trigger(event, data) { if (this._handlers[event]) this._handlers[event](data); }
318
- _emit(payload) { this._trigger('message', { data: JSON.stringify(payload) }); }
319
- send(raw) {
320
- if (!this._useMock) { this._ws.send(raw); return; }
321
- const cmd = JSON.parse(raw);
322
- if (cmd.command === 'subscribe') this._subscriptions.add(cmd.signal);
323
- if (cmd.command === 'trigger_gesture') {
324
- this._emit({ type: 'gesture', data: { type: cmd.data.type, confidence: 0.99, timestamp: Date.now() }, timestamp: Date.now() });
325
- }
326
- }
327
- _startMock() {
328
- this._useMock = true;
329
- setTimeout(() => {
330
- this._trigger('open', {});
331
- this._emit({ type: 'connection_status', data: { status: 'connected', message: 'Mudra Companion ready (simulated)' }, timestamp: Date.now() });
332
- }, 100);
333
- // Gesture: every 4s (slowed down so it's not distracting)
334
- this._timers.push(setInterval(() => {
335
- if (!this._subscriptions.has('gesture')) return;
336
- const types = ['tap', 'double_tap', 'twist', 'double_twist'];
337
- const type = types[Math.floor(Math.random() * types.length)];
338
- this._emit({ type: 'gesture', data: { type, confidence: 0.95, timestamp: Date.now() }, timestamp: Date.now() });
339
- }, 4000));
340
- // Pressure: sine wave at 20 Hz
341
- let t = 0;
342
- this._timers.push(setInterval(() => {
343
- if (!this._subscriptions.has('pressure')) return;
344
- t += 0.05;
345
- const norm = (Math.sin(t) + 1) / 2;
346
- this._emit({ type: 'pressure', data: { value: Math.round(norm * 100), normalized: norm, timestamp: Date.now() }, timestamp: Date.now() });
347
- }, 50));
348
- // nav_direction: every 2.5s
349
- this._timers.push(setInterval(() => {
350
- if (!this._subscriptions.has('nav_direction')) return;
351
- const dirs = ['Right', 'Left', 'Up', 'Down'];
352
- const direction = dirs[Math.floor(Math.random() * dirs.length)];
353
- this._emit({ type: 'nav_direction', data: { direction, timestamp: Date.now() }, timestamp: Date.now() });
354
- }, 2500));
355
- }
356
- close() {
357
- this._timers.forEach(t => clearInterval(t));
358
- if (!this._useMock && this._ws) this._ws.close();
359
- }
360
- }
361
-
362
- // ── Pad Definitions ────────────────────────────────────────────────────
363
- const PAD_DEFS = [
364
- { name: 'Kick 1', color: '#ff3d3d', sound: 'kick1' },
365
- { name: 'Kick 2', color: '#ff6b3d', sound: 'kick2' },
366
- { name: 'Snare', color: '#4d9fff', sound: 'snare' },
367
- { name: 'Rim', color: '#74b5ff', sound: 'rim' },
368
- { name: 'Clap', color: '#00e676', sound: 'clap' },
369
- { name: 'Snap', color: '#69f0ae', sound: 'snap' },
370
- { name: 'HH Clos', color: '#ffd60a', sound: 'hhc' },
371
- { name: 'HH Open', color: '#ffab00', sound: 'hho' },
372
- { name: 'Tom Hi', color: '#ea80fc', sound: 'tomhi' },
373
- { name: 'Tom Lo', color: '#ce93d8', sound: 'tomlo' },
374
- { name: 'Shaker', color: '#80cbc4', sound: 'shaker' },
375
- { name: 'Cowbell', color: '#ff80ab', sound: 'cowbell' },
376
- { name: 'Crash', color: '#40c4ff', sound: 'crash' },
377
- { name: 'Ride', color: '#80deea', sound: 'ride' },
378
- { name: 'Bass Syn',color: '#ffab40', sound: 'basssyn' },
379
- { name: 'Zap', color: '#ea80fc', sound: 'zap' },
380
- ];
381
- const PADS = 16;
382
- const STEPS = 16;
383
-
384
- // pattern[pad][step] = velocity (0 = empty)
385
- const pattern = Array.from({ length: PADS }, () => new Float32Array(STEPS));
386
- let selectedPad = 0;
387
- let currentStep = 0;
388
- let playing = false;
389
- let recording = false;
390
- let bpm = 120;
391
- let velocity = 0.7;
392
- let stepTimer = null;
393
- let audioCtx = null;
394
-
395
- // ── Web Audio Synthesis ────────────────────────────────────────────────
396
- function getCtx() {
397
- if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
398
- if (audioCtx.state === 'suspended') audioCtx.resume();
399
- return audioCtx;
400
- }
401
-
402
- function makeNoiseBuf(ctx, dur) {
403
- const buf = ctx.createBuffer(1, Math.floor(ctx.sampleRate * dur), ctx.sampleRate);
404
- const d = buf.getChannelData(0);
405
- for (let i = 0; i < d.length; i++) d[i] = Math.random() * 2 - 1;
406
- return buf;
407
- }
408
-
409
- function playSound(key, vel) {
410
- const ctx = getCtx();
411
- const now = ctx.currentTime;
412
- const v = Math.max(0.02, Math.min(1, vel));
413
-
414
- const out = ctx.createGain();
415
- out.connect(ctx.destination);
416
-
417
- switch (key) {
418
- case 'kick1': {
419
- const o = ctx.createOscillator(); o.type = 'sine';
420
- o.frequency.setValueAtTime(160, now);
421
- o.frequency.exponentialRampToValueAtTime(28, now + 0.22);
422
- out.gain.setValueAtTime(v, now);
423
- out.gain.exponentialRampToValueAtTime(0.001, now + 0.32);
424
- o.connect(out); o.start(now); o.stop(now + 0.32); break;
425
- }
426
- case 'kick2': {
427
- const o = ctx.createOscillator(); o.type = 'triangle';
428
- o.frequency.setValueAtTime(210, now);
429
- o.frequency.exponentialRampToValueAtTime(44, now + 0.18);
430
- out.gain.setValueAtTime(v * 0.9, now);
431
- out.gain.exponentialRampToValueAtTime(0.001, now + 0.22);
432
- o.connect(out); o.start(now); o.stop(now + 0.22); break;
433
- }
434
- case 'snare': {
435
- // tonal body
436
- const o = ctx.createOscillator(); o.type = 'triangle'; o.frequency.value = 190;
437
- const og = ctx.createGain();
438
- og.gain.setValueAtTime(v * 0.3, now); og.gain.exponentialRampToValueAtTime(0.001, now + 0.1);
439
- o.connect(og); og.connect(ctx.destination); o.start(now); o.stop(now + 0.1);
440
- // noise
441
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.22);
442
- const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 3500; bp.Q.value = 1;
443
- out.gain.setValueAtTime(v * 0.65, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
444
- src.connect(bp); bp.connect(out); src.start(now); src.stop(now + 0.22); break;
445
- }
446
- case 'rim': {
447
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.06);
448
- const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 1800; bp.Q.value = 4;
449
- out.gain.setValueAtTime(v * 0.45, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.06);
450
- src.connect(bp); bp.connect(out); src.start(now); src.stop(now + 0.06); break;
451
- }
452
- case 'clap': {
453
- for (let i = 0; i < 3; i++) {
454
- const t0 = now + i * 0.011;
455
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.08);
456
- const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 2200; bp.Q.value = 0.9;
457
- const g2 = ctx.createGain();
458
- g2.gain.setValueAtTime(v * 0.38, t0); g2.gain.exponentialRampToValueAtTime(0.001, t0 + 0.08);
459
- src.connect(bp); bp.connect(g2); g2.connect(ctx.destination);
460
- src.start(t0); src.stop(t0 + 0.09);
461
- }
462
- break;
463
- }
464
- case 'snap': {
465
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.04);
466
- const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 5500;
467
- out.gain.setValueAtTime(v * 0.55, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.04);
468
- src.connect(hp); hp.connect(out); src.start(now); src.stop(now + 0.04); break;
469
- }
470
- case 'hhc': {
471
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.055);
472
- const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 9000;
473
- out.gain.setValueAtTime(v * 0.35, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.05);
474
- src.connect(hp); hp.connect(out); src.start(now); src.stop(now + 0.055); break;
475
- }
476
- case 'hho': {
477
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.28);
478
- const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 7500;
479
- out.gain.setValueAtTime(v * 0.3, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.28);
480
- src.connect(hp); hp.connect(out); src.start(now); src.stop(now + 0.28); break;
481
- }
482
- case 'tomhi': {
483
- const o = ctx.createOscillator(); o.type = 'sine';
484
- o.frequency.setValueAtTime(260, now); o.frequency.exponentialRampToValueAtTime(110, now + 0.22);
485
- out.gain.setValueAtTime(v * 0.8, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.28);
486
- o.connect(out); o.start(now); o.stop(now + 0.28); break;
487
- }
488
- case 'tomlo': {
489
- const o = ctx.createOscillator(); o.type = 'sine';
490
- o.frequency.setValueAtTime(110, now); o.frequency.exponentialRampToValueAtTime(48, now + 0.34);
491
- out.gain.setValueAtTime(v * 0.85, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.38);
492
- o.connect(out); o.start(now); o.stop(now + 0.38); break;
493
- }
494
- case 'shaker': {
495
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.065);
496
- const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 6500; bp.Q.value = 2;
497
- out.gain.setValueAtTime(v * 0.28, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.065);
498
- src.connect(bp); bp.connect(out); src.start(now); src.stop(now + 0.065); break;
499
- }
500
- case 'cowbell': {
501
- [562, 845].forEach(f => {
502
- const o = ctx.createOscillator(); o.type = 'square'; o.frequency.value = f;
503
- const g2 = ctx.createGain();
504
- g2.gain.setValueAtTime(v * 0.14, now); g2.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
505
- o.connect(g2); g2.connect(ctx.destination); o.start(now); o.stop(now + 0.45);
506
- }); break;
507
- }
508
- case 'crash': {
509
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.9);
510
- const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 4500;
511
- out.gain.setValueAtTime(v * 0.45, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.9);
512
- src.connect(hp); hp.connect(out); src.start(now); src.stop(now + 0.9); break;
513
- }
514
- case 'ride': {
515
- const src = ctx.createBufferSource(); src.buffer = makeNoiseBuf(ctx, 0.5);
516
- const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 9000; bp.Q.value = 3;
517
- out.gain.setValueAtTime(v * 0.3, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.5);
518
- src.connect(bp); bp.connect(out); src.start(now); src.stop(now + 0.5); break;
519
- }
520
- case 'basssyn': {
521
- const o = ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = 80;
522
- const f = ctx.createBiquadFilter(); f.type = 'lowpass';
523
- f.frequency.setValueAtTime(900, now); f.frequency.exponentialRampToValueAtTime(100, now + 0.28);
524
- out.gain.setValueAtTime(v * 0.6, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.3);
525
- o.connect(f); f.connect(out); o.start(now); o.stop(now + 0.3); break;
526
- }
527
- case 'zap': {
528
- const o = ctx.createOscillator(); o.type = 'sawtooth';
529
- o.frequency.setValueAtTime(1400, now); o.frequency.exponentialRampToValueAtTime(80, now + 0.15);
530
- out.gain.setValueAtTime(v * 0.5, now); out.gain.exponentialRampToValueAtTime(0.001, now + 0.15);
531
- o.connect(out); o.start(now); o.stop(now + 0.15); break;
532
- }
533
- }
534
- }
535
-
536
- // ── UI Build ───────────────────────────────────────────────────────────
537
- function buildPads() {
538
- const grid = document.getElementById('padGrid');
539
- grid.innerHTML = '';
540
- PAD_DEFS.forEach((def, i) => {
541
- const pad = document.createElement('div');
542
- pad.className = 'pad' + (i === selectedPad ? ' selected' : '');
543
- pad.style.setProperty('--pad-color', def.color);
544
- pad.dataset.index = i;
545
- pad.innerHTML = `
546
- <div class="pad-num">${i + 1}</div>
547
- <div class="pad-name">${def.name}</div>
548
- <div class="sel-dot"></div>
549
- <div class="has-steps"></div>
550
- `;
551
- pad.addEventListener('mousedown', (e) => { e.preventDefault(); selectPad(i); hitPad(i); });
552
- grid.appendChild(pad);
553
- });
554
- }
555
-
556
- function buildSteps() {
557
- const bar = document.getElementById('stepsBar');
558
- bar.innerHTML = '<span class="steps-lbl">Loop &rarr;</span>';
559
- for (let s = 0; s < STEPS; s++) {
560
- const dot = document.createElement('div');
561
- dot.className = 'step-dot';
562
- dot.dataset.step = s;
563
- dot.title = 'Step ' + (s + 1);
564
- dot.addEventListener('click', () => {
565
- if (pattern[selectedPad][s] > 0) {
566
- pattern[selectedPad][s] = 0;
567
- } else {
568
- pattern[selectedPad][s] = velocity;
569
- }
570
- refreshSteps();
571
- refreshPadPatternDots();
572
- });
573
- bar.appendChild(dot);
574
- }
575
- }
576
-
577
- function refreshPads() {
578
- document.querySelectorAll('.pad').forEach((el, i) => {
579
- let cls = 'pad';
580
- if (i === selectedPad) cls += ' selected';
581
- if (pattern[i].some(v => v > 0)) cls += ' has-pattern';
582
- el.className = cls;
583
- el.style.setProperty('--pad-color', PAD_DEFS[i].color);
584
- });
585
- }
586
-
587
- function refreshPadPatternDots() {
588
- document.querySelectorAll('.pad').forEach((el, i) => {
589
- if (pattern[i].some(v => v > 0)) el.classList.add('has-pattern');
590
- else el.classList.remove('has-pattern');
591
- });
592
- }
593
-
594
- function refreshSteps() {
595
- const dots = document.querySelectorAll('.step-dot');
596
- dots.forEach((dot, s) => {
597
- let cls = 'step-dot';
598
- if (pattern[selectedPad][s] > 0) cls += ' on';
599
- if (s === currentStep && playing) cls += ' head';
600
- dot.className = cls;
601
- });
602
- }
603
-
604
- function selectPad(i) {
605
- selectedPad = Math.max(0, Math.min(PADS - 1, i));
606
- refreshPads();
607
- refreshSteps();
608
- document.getElementById('hudPad').textContent = (selectedPad + 1) + ' · ' + PAD_DEFS[selectedPad].name;
609
- }
610
-
611
- function hitPad(i, vel) {
612
- const v = vel ?? velocity;
613
- playSound(PAD_DEFS[i].sound, v);
614
- if (recording) {
615
- pattern[i][currentStep] = v;
616
- refreshSteps();
617
- refreshPadPatternDots();
618
- }
619
- const el = document.querySelector('.pad[data-index="' + i + '"]');
620
- if (el) {
621
- el.classList.add('hit');
622
- setTimeout(() => el.classList.remove('hit'), 110);
623
- }
624
- }
625
-
626
- // ── Sequencer ──────────────────────────────────────────────────────────
627
- function tick() {
628
- if (!playing) return;
629
- for (let p = 0; p < PADS; p++) {
630
- if (pattern[p][currentStep] > 0) hitPad(p, pattern[p][currentStep]);
631
- }
632
- document.getElementById('hudStep').textContent = currentStep + 1;
633
- refreshSteps();
634
- currentStep = (currentStep + 1) % STEPS;
635
- stepTimer = setTimeout(tick, (60 / bpm / 4) * 1000);
636
- }
637
-
638
- function togglePlay() {
639
- playing = !playing;
640
- const btn = document.getElementById('playBtn');
641
- if (playing) {
642
- getCtx();
643
- currentStep = 0;
644
- btn.classList.add('playing');
645
- btn.innerHTML = '&#9646;&#9646;';
646
- tick();
647
- } else {
648
- btn.classList.remove('playing');
649
- btn.innerHTML = '&#9654;';
650
- clearTimeout(stepTimer);
651
- refreshSteps();
652
- document.getElementById('hudStep').textContent = '—';
653
- }
654
- }
655
-
656
- function toggleRecord() {
657
- recording = !recording;
658
- document.getElementById('recBtn').classList.toggle('recording', recording);
659
- }
660
-
661
- function setBpm(val) {
662
- bpm = Math.max(40, Math.min(300, val));
663
- document.getElementById('bpmVal').textContent = bpm;
664
- }
665
-
666
- function setVelocity(v) {
667
- velocity = Math.max(0, Math.min(1, v));
668
- document.getElementById('velFill').style.width = Math.round(velocity * 100) + '%';
669
- document.getElementById('velPct').textContent = Math.round(velocity * 100) + '%';
670
- document.getElementById('hudPres').textContent = Math.round(velocity * 100) + '%';
671
- }
672
-
673
- // ── Direction navigation ───────────────────────────────────────────────
674
- function handleDirection(dir) {
675
- const row = Math.floor(selectedPad / 4);
676
- const col = selectedPad % 4;
677
- let r = row, c = col;
678
- if (dir === 'Right' || dir === 'Roll Right') c = Math.min(3, c + 1);
679
- if (dir === 'Left' || dir === 'Roll Left') c = Math.max(0, c - 1);
680
- if (dir === 'Down') r = Math.min(3, r + 1);
681
- if (dir === 'Up') r = Math.max(0, r - 1);
682
- selectPad(r * 4 + c);
683
- }
684
-
685
- // ── Mudra Connection ───────────────────────────────────────────────────
686
- const ws = new MudraWebSocket('ws://127.0.0.1:8766');
687
-
688
- ws.onopen = () => {
689
- ws.send(JSON.stringify({ command: 'subscribe', signal: 'gesture' }));
690
- ws.send(JSON.stringify({ command: 'subscribe', signal: 'nav_direction' }));
691
- ws.send(JSON.stringify({ command: 'subscribe', signal: 'pressure' }));
692
- };
693
-
694
- ws.onmessage = (e) => {
695
- let msg; try { msg = JSON.parse(e.data); } catch { return; }
696
-
697
- if (msg.type === 'connection_status') {
698
- const ok = msg.data?.status === 'connected';
699
- document.getElementById('connDot').className = 'conn-dot' + (ok ? ' live' : '');
700
- document.getElementById('connLabel').textContent = ok ? 'Band Connected' : 'Waiting for Band…';
701
- return;
702
- }
703
-
704
- const d = msg.data || {};
705
- if (msg.type === 'gesture') {
706
- document.getElementById('hudGesture').textContent = d.type || '—';
707
- if (d.type === 'tap') hitPad(selectedPad);
708
- if (d.type === 'double_tap') togglePlay();
709
- if (d.type === 'twist') {
710
- pattern[selectedPad].fill(0);
711
- refreshSteps(); refreshPadPatternDots();
712
- }
713
- if (d.type === 'double_twist') {
714
- for (let p = 0; p < PADS; p++) pattern[p].fill(0);
715
- refreshSteps(); refreshPadPatternDots();
716
- }
717
- }
718
- if (msg.type === 'nav_direction') {
719
- document.getElementById('hudDir').textContent = d.direction || '—';
720
- handleDirection(d.direction);
721
- }
722
- if (msg.type === 'pressure') {
723
- setVelocity(d.normalized ?? d.value / 100);
724
- }
725
- };
726
-
727
- ws.onclose = () => {
728
- document.getElementById('connDot').className = 'conn-dot';
729
- document.getElementById('connLabel').textContent = 'Simulated';
730
- };
731
- ws.onerror = () => {
732
- document.getElementById('connDot').className = 'conn-dot';
733
- document.getElementById('connLabel').textContent = 'Simulated';
734
- };
735
-
736
- // ── Keyboard Fallback ──────────────────────────────────────────────────
737
- let kbVel = 0.7;
738
- document.addEventListener('keydown', (e) => {
739
- if (e.target.tagName === 'INPUT') return;
740
- if (e.code === 'Space') { e.preventDefault(); hitPad(selectedPad); }
741
- if (e.code === 'Enter') { e.preventDefault(); togglePlay(); }
742
- if (e.code === 'KeyR') { e.preventDefault(); toggleRecord(); }
743
- if (e.code === 'KeyC') { pattern[selectedPad].fill(0); refreshSteps(); refreshPadPatternDots(); }
744
- if (e.code === 'ArrowRight') { e.preventDefault(); handleDirection('Right'); }
745
- if (e.code === 'ArrowLeft') { e.preventDefault(); handleDirection('Left'); }
746
- if (e.code === 'ArrowDown') { e.preventDefault(); handleDirection('Down'); }
747
- if (e.code === 'ArrowUp') { e.preventDefault(); handleDirection('Up'); }
748
- if (e.key === ']') { kbVel = Math.min(1, kbVel + 0.05); setVelocity(kbVel); }
749
- if (e.key === '[') { kbVel = Math.max(0, kbVel - 0.05); setVelocity(kbVel); }
750
- const n = parseInt(e.key);
751
- if (!isNaN(n)) selectPad(n === 0 ? 9 : n - 1);
752
- });
753
-
754
- // ── Button wiring ──────────────────────────────────────────────────────
755
- document.getElementById('playBtn').addEventListener('click', togglePlay);
756
- document.getElementById('recBtn').addEventListener('click', toggleRecord);
757
- document.getElementById('bpmDown').addEventListener('click', () => setBpm(bpm - 5));
758
- document.getElementById('bpmUp').addEventListener('click', () => setBpm(bpm + 5));
759
- document.getElementById('clearBtn').addEventListener('click', () => {
760
- for (let p = 0; p < PADS; p++) pattern[p].fill(0);
761
- refreshSteps(); refreshPadPatternDots();
762
- });
763
- document.getElementById('simTapBtn').addEventListener('click', () => {
764
- ws.send(JSON.stringify({ command: 'trigger_gesture', data: { type: 'tap' } }));
765
- });
766
- document.getElementById('simDirBtn').addEventListener('click', () => {
767
- const dirs = ['Right', 'Left', 'Up', 'Down'];
768
- const d = dirs[Math.floor(Math.random() * dirs.length)];
769
- handleDirection(d);
770
- document.getElementById('hudDir').textContent = d;
771
- });
772
-
773
- // ── Pre-fill a starter groove ──────────────────────────────────────────
774
- pattern[0][0] = 0.85; pattern[0][4] = 0.85; pattern[0][8] = 0.85; pattern[0][12] = 0.85; // Kick 1
775
- pattern[2][4] = 0.75; pattern[2][12] = 0.75; // Snare
776
- pattern[6][0] = 0.45; pattern[6][2] = 0.45; pattern[6][4] = 0.45; pattern[6][6] = 0.45; // HH Closed
777
- pattern[6][8] = 0.45; pattern[6][10] = 0.45; pattern[6][12] = 0.45; pattern[6][14] = 0.45;
778
- pattern[7][6] = 0.5; pattern[7][14] = 0.5; // HH Open
779
-
780
- // ── Init ───────────────────────────────────────────────────────────────
781
- buildPads();
782
- buildSteps();
783
- selectPad(0);
784
- refreshPadPatternDots();
785
- setVelocity(0.7);
786
- </script>
787
- </body>
788
- </html>