From 3fe479f9477b3c5ae56b9765a9a868a393173d3a Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Sat, 11 Apr 2026 18:41:03 +0200
Subject: [PATCH] Add locomotion actions and update labels in App.tsx

---
 src/app/App.tsx | 73 ++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 66 insertions(+), 7 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 13813aef..9ece0e00 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -10293,7 +10293,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                           >
                             <label className="form-field">
                               <span className="label">
-                                {getPlayerStartMovementActionLabel(action)} Key
+                                {getPlayerStartInputActionLabel(action)} Key
                               </span>
                               <button
                                 type="button"
@@ -10302,7 +10302,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                                 onClick={() => {
                                   setPlayerStartKeyboardCaptureAction(action);
                                   setStatusMessage(
-                                    `Press any key for ${getPlayerStartMovementActionLabel(action)}. Press Escape to cancel.`
+                                    `Press any key for ${getPlayerStartInputActionLabel(action)}. Press Escape to cancel.`
                                   );
                                 }}
                               >
@@ -10317,14 +10317,14 @@ export function App({ store, initialStatusMessage }: AppProps) {
                             </label>
                             <label className="form-field">
                               <span className="label">
-                                {getPlayerStartMovementActionLabel(action)} Pad
+                                {getPlayerStartInputActionLabel(action)} Pad
                               </span>
                               <select
                                 data-testid={`player-start-gamepad-binding-${action}`}
                                 className="select-input"
                                 value={playerStartInputBindingsDraft.gamepad[action]}
                                 onChange={(event) =>
-                                  handlePlayerStartGamepadBindingChange(
+                                  handlePlayerStartMovementGamepadBindingChange(
                                     action,
                                     event.currentTarget
                                       .value as PlayerStartGamepadBinding
@@ -10341,6 +10341,65 @@ export function App({ store, initialStatusMessage }: AppProps) {
                           </div>
                         ))}
 
+                        {PLAYER_START_LOCOMOTION_ACTIONS.map((action) => (
+                          <div
+                            key={action}
+                            className="vector-inputs vector-inputs--two"
+                          >
+                            <label className="form-field">
+                              <span className="label">
+                                {getPlayerStartInputActionLabel(action)} Key
+                              </span>
+                              <button
+                                type="button"
+                                data-testid={`player-start-keyboard-binding-${action}`}
+                                className="toolbar__button"
+                                onClick={() => {
+                                  setPlayerStartKeyboardCaptureAction(action);
+                                  setStatusMessage(
+                                    `Press any key for ${getPlayerStartInputActionLabel(action)}. Press Escape to cancel.`
+                                  );
+                                }}
+                              >
+                                {playerStartKeyboardCaptureAction === action
+                                  ? "Press Any Key..."
+                                  : formatPlayerStartKeyboardBindingLabel(
+                                      playerStartInputBindingsDraft.keyboard[
+                                        action
+                                      ]
+                                    )}
+                              </button>
+                            </label>
+                            <label className="form-field">
+                              <span className="label">
+                                {getPlayerStartInputActionLabel(action)} Pad
+                              </span>
+                              <select
+                                data-testid={`player-start-gamepad-binding-${action}`}
+                                className="select-input"
+                                value={playerStartInputBindingsDraft.gamepad[action]}
+                                onChange={(event) =>
+                                  handlePlayerStartGamepadActionBindingChange(
+                                    action,
+                                    event.currentTarget
+                                      .value as PlayerStartGamepadActionBinding
+                                  )
+                                }
+                              >
+                                {PLAYER_START_GAMEPAD_ACTION_BINDINGS.map(
+                                  (binding) => (
+                                    <option key={binding} value={binding}>
+                                      {formatPlayerStartGamepadActionBindingLabel(
+                                        binding
+                                      )}
+                                    </option>
+                                  )
+                                )}
+                              </select>
+                            </label>
+                          </div>
+                        ))}
+
                         <label className="form-field">
                           <span className="label">Camera Pad</span>
                           <select
@@ -10367,9 +10426,9 @@ export function App({ store, initialStatusMessage }: AppProps) {
                         </label>
 
                         <div className="material-summary">
-                          These bindings feed the same typed movement and camera
-                          actions in First Person and Third Person. Mouse look
-                          stays available as before.
+                          These bindings feed the same typed movement,
+                          locomotion, and camera actions in First Person and
+                          Third Person. Mouse look stays available as before.
                         </div>
                       </div>
                     </>