diff --git a/Examples/Web/README.md b/Examples/Web/README.md index 8d5b821..7b8b9d6 100644 --- a/Examples/Web/README.md +++ b/Examples/Web/README.md @@ -1,6 +1,7 @@ # Examples/Web — raylib-cs in the browser (WebAssembly) -Runs the raylib examples in the browser via WebAssembly, with a dropdown to switch between them. +Runs the raylib examples in the browser via WebAssembly, with a dropdown and Prev/Next buttons +to switch between them. It proves the `Raylib-cs` NuGet package's `browser-wasm` support end-to-end: the package's `buildTransitive` targets link the shipped `raylib.a` into the .NET wasm runtime. @@ -37,7 +38,7 @@ dotnet serve -d Examples/bin/Release/net10.0/browser-wasm/AppBundle # dotnet # or: npx http-server Examples/bin/Release/net10.0/browser-wasm/AppBundle ``` -Open the printed URL and use the **Example** dropdown to switch examples. +Open the printed URL and use the **Example** dropdown or **Prev**/**Next** buttons to switch examples. ## Canvas scaling modes diff --git a/Examples/Web/index.html b/Examples/Web/index.html index da85128..290f781 100644 --- a/Examples/Web/index.html +++ b/Examples/Web/index.html @@ -23,6 +23,7 @@ h1 { font-size: 1.1rem; font-weight: 600; } #toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; } #examples { font-size: 1rem; padding: .3rem .5rem; } + #previousExample, #nextExample { font-size: .9rem; padding: .3rem .6rem; } #scaleMode { font-size: 0.95rem; padding: .2rem .4rem; } #viewport { flex: 1; @@ -46,14 +47,6 @@ 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; @@ -69,13 +62,14 @@
+ + - J/K next/previous example
diff --git a/Examples/Web/main.js b/Examples/Web/main.js index 23e9b67..fd0f851 100644 --- a/Examples/Web/main.js +++ b/Examples/Web/main.js @@ -9,6 +9,8 @@ import { const status = document.getElementById('status'); const errorBanner = document.getElementById('error'); const select = document.getElementById('examples'); +const previousExampleButton = document.getElementById('previousExample'); +const nextExampleButton = document.getElementById('nextExample'); const canvas = document.getElementById('canvas'); const viewport = document.getElementById('viewport'); const scaleModeSelect = document.getElementById('scaleMode'); @@ -142,6 +144,7 @@ function selectExample(name) { const ok = Host.SetExample(name); targetFps = Host.GetCurrentTargetFps(); errorBanner.hidden = ok; + canvas.focus(); } select.innerHTML = ''; @@ -153,12 +156,9 @@ for (const name of Host.GetExampleNames().split('\n').filter(n => n.length > 0)) } 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) { @@ -167,20 +167,10 @@ function stepExample(delta) { 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); - } -}); +previousExampleButton.addEventListener('click', () => stepExample(-1)); +nextExampleButton.addEventListener('click', () => stepExample(1)); setScaleMode(scaleMode, false);