feat(ux): autofocus name inputs on new game steps\n\nFocus Player 1/2/3 inputs on mount and place caret at end for faster entry.\n\nNo behavior changes beyond focus; adheres to accessibility with native focus.\n\nRefs #26

src/components/NewGame.tsx

@@ -56,6 +56,17 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
   const [isModalOpen, setIsModalOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      const end = el.value.length;
+      try {
+        el.setSelectionRange(end, end);
+      } catch {}
+    }
+  }, []);
+
   useEffect(() => {
     if (!player1) {
       setFilteredNames(playerNameHistory);
@@ -296,6 +307,17 @@ const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
   const [filteredNames, setFilteredNames] = useState(playerNameHistory);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      const end = el.value.length;
+      try {
+        el.setSelectionRange(end, end);
+      } catch {}
+    }
+  }, []);
+
   useEffect(() => {
     if (!player2) {
       setFilteredNames(playerNameHistory);
@@ -430,6 +452,17 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
   const [filteredNames, setFilteredNames] = useState(playerNameHistory);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      const end = el.value.length;
+      try {
+        el.setSelectionRange(end, end);
+      } catch {}
+    }
+  }, []);
+
   useEffect(() => {
     if (!player3) {
       setFilteredNames(playerNameHistory);