feat: replaced the J/K navigation with good old HTML buttons

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
 

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 @@
     <div id="toolbar">
         <label for="examples">Example:&nbsp;</label>
         <select id="examples"><option>loading…</option></select>
+        <button id="previousExample" type="button">Prev</button>
+        <button id="nextExample" type="button">Next</button>
         <label for="scaleMode">&nbsp;Scale:&nbsp;</label>
         <select id="scaleMode">
             <option value="integer">Integer</option>
             <option value="native">Native (1x)</option>
             <option value="fit">Fit</option>
         </select>
-        <span id="hint"><kbd>J</kbd>/<kbd>K</kbd> next/previous example</span>
     </div>
     <div id="error" hidden>This example crashed — see the browser console for details. Select another example to continue.</div>
     <div id="viewport">

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