Auto fucus and blur on type mode

Author: Fruehwirth

src/App.tsx

@@ -21,6 +21,7 @@ export const App: React.FC = observer(() => {
   });
   const [isGameContainerVisible, setIsGameContainerVisible] = React.useState(true);
   const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight);
+  const [shouldFocusInput, setShouldFocusInput] = React.useState(false);
 
   React.useEffect(() => {
     const handleResize = () => {
@@ -50,6 +51,9 @@ export const App: React.FC = observer(() => {
 
   const handleGameStart = () => {
     setShowStartScreen(false);
+    if (settingsStore.gameMode === 'type') {
+      setShouldFocusInput(true);
+    }
   };
 
   const handleRestart = () => {
@@ -98,7 +102,12 @@ export const App: React.FC = observer(() => {
         <main className="game-container">
           {settingsStore.gameMode !== 'picker' && <FlagDisplay />}
           {settingsStore.gameMode === 'quiz' && <QuizMode />}
-          {settingsStore.gameMode === 'type' && <TypeMode />}
+          {settingsStore.gameMode === 'type' && (
+            <TypeMode 
+              key={gameStore.isGameOver ? 'game-over' : 'playing'} 
+              shouldFocus={shouldFocusInput}
+            />
+          )}
           {settingsStore.gameMode === 'picker' && <PickerMode />}
         </main>
         {gameStore.isGameOver && (

src/components/Game/TypeMode.tsx

@@ -7,7 +7,9 @@ import './TypeMode.css';
 import { useTranslation } from '../../hooks/useTranslation';
 import { CORRECT_ANSWER_DELAY, INCORRECT_ANSWER_DELAY } from '../../constants/timing';
 
-export const TypeMode: React.FC = observer(() => {
+export const TypeMode: React.FC<{
+  shouldFocus?: boolean;
+}> = observer(({ shouldFocus }) => {
   const { gameStore, settingsStore } = useStores();
   const [answer, setAnswer] = React.useState('');
   const [suggestion, setSuggestion] = React.useState('');
@@ -29,6 +31,18 @@ export const TypeMode: React.FC = observer(() => {
     }
   }, [gameStore.currentFlag]);
 
+  React.useEffect(() => {
+    if (gameStore.isGameOver && inputRef.current) {
+      inputRef.current.blur();
+    }
+  }, [gameStore.isGameOver]);
+
+  React.useEffect(() => {
+    if (shouldFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [shouldFocus]);
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => {
     if (e.type === 'keydown') {
       const keyEvent = e as React.KeyboardEvent;