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