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
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