From fd6c679be68cabfe65a5d7ee2c0037533a4d27db Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Tue, 31 Mar 2026 04:26:39 +0200
Subject: [PATCH] Refactor event handling and improve runtime message display
 in App.tsx

---
 src/app/App.tsx | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 722131e2..bb8f8436 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -433,7 +433,10 @@ export function App({ store, initialStatusMessage }: AppProps) {
         return;
       }
 
-      if (event.code !== "NumpadComma" && !(event.key === "," && event.location === event.DOM_KEY_LOCATION_NUMPAD)) {
+      if (
+        event.code !== "NumpadComma" &&
+        !(event.key === "," && event.location === globalThis.KeyboardEvent.DOM_KEY_LOCATION_NUMPAD)
+      ) {
         return;
       }
 
@@ -973,17 +976,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                 </div>
               </div>
 
-              {runtimeMessage === null ? null : (
-                <ul className="placeholder-list">
-                  <li>{runtimeMessage}</li>
-                </ul>
-              )}
-
-              <ul className="placeholder-list">
-                <li>First-person uses `WASD` plus mouse-look after pointer lock is captured.</li>
-                <li>Orbit Visitor is the browser-safe fallback when pointer lock is unavailable or undesirable.</li>
-                <li>Collision is axis-aligned box collision only in this slice.</li>
-              </ul>
+              {runtimeMessage === null ? null : <div className="info-banner">{runtimeMessage}</div>}
             </Panel>
           </aside>
         </div>