diff --git a/Examples/Web/index.html b/Examples/Web/index.html
index 3609b22..da85128 100644
--- a/Examples/Web/index.html
+++ b/Examples/Web/index.html
@@ -46,6 +46,14 @@
background: #000;
}
#status { color: #888; font-size: .85rem; margin: 0; }
+ #hint { color: #888; font-size: .8rem; margin-left: .5rem; }
+ #hint kbd {
+ font-family: inherit;
+ background: #2c2c2c;
+ border: 1px solid #444;
+ border-radius: 3px;
+ padding: 0 .3rem;
+ }
#error {
color: #ff6b6b;
background: #3a1d1d;
@@ -67,6 +75,7 @@
+ J/K next/previous example
This example crashed — see the browser console for details. Select another example to continue.
diff --git a/Examples/Web/main.js b/Examples/Web/main.js
index fe5d157..23e9b67 100644
--- a/Examples/Web/main.js
+++ b/Examples/Web/main.js
@@ -151,9 +151,37 @@ for (const name of Host.GetExampleNames().split('\n').filter(n => n.length > 0))
opt.textContent = name;
select.appendChild(opt);
}
-select.addEventListener('change', () => selectExample(select.value));
+select.addEventListener('change', () => {
+ selectExample(select.value);
+ canvas.focus();
+});
selectExample(select.value);
+// J/K step through examples instead of arrow keys on the focused dropdown,
+// which would otherwise fight with examples that read the arrow keys.
+function stepExample(delta) {
+ const count = select.options.length;
+ if (count === 0) {
+ return;
+ }
+
+ select.selectedIndex = (select.selectedIndex + delta + count) % count;
+ selectExample(select.value);
+ canvas.focus();
+}
+
+document.addEventListener('keydown', (event) => {
+ if (event.repeat || event.target instanceof HTMLSelectElement) {
+ return;
+ }
+
+ if (event.code === 'KeyJ') {
+ stepExample(1);
+ } else if (event.code === 'KeyK') {
+ stepExample(-1);
+ }
+});
+
setScaleMode(scaleMode, false);
// Drive raylib one frame per animation tick, paced to the example's target FPS here rather