refactor Answer component to have a single responsiblity

src/components/Answer/Answer.css

@@ -11,17 +11,10 @@
     padding: 0.25rem 0.5rem;
 }
 
-.answer-wrapper button {
-    background-color: var(--text-bg);
+.answer-wrapper .submit {
+    background-color: #008000;
     border: 1px solid var(--text-fg);
     color: var(--color-secondary);
     padding: 0.25rem 1rem;
-}
-
-.answer-wrapper .submit {
-    background-color: #008000;
-}
-
-.answer-wrapper .reset {
-    background-color: #ff0000;
+    width: 10rem;
 }

src/components/Answer/Answer.tsx

@@ -3,27 +3,17 @@ import { useRef } from 'react';
 import './Answer.css';
 
 type Props = {
-  disabled: boolean;
   onSubmit: (input: string) => void;
-  onGameOver: () => void;
 };
 
 const INPUT_NAME = 'answer';
-const BUTTON_RESET_LABEL = 'Try again';
-const BUTTON_SUBMIT_LABEL = 'Check answer';
 
-function Answer({ disabled, onSubmit, onGameOver }: Props) {
+function Answer({ onSubmit }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   function handleSubmit(event: React.FormEvent<HTMLFormElement>): void {
     event.preventDefault();
-
-    if (disabled) {
-      onGameOver();
-      return;
-    } else {
-      inputRef.current?.focus();
-    }
+    inputRef.current?.focus();
 
     const formEl = event.currentTarget;
     const data = new FormData(formEl);
@@ -37,23 +27,13 @@ function Answer({ disabled, onSubmit, onGameOver }: Props) {
     formEl.reset();
   }
 
-  const buttonLabel = disabled ? BUTTON_RESET_LABEL : BUTTON_SUBMIT_LABEL;
-  const buttonClassName = disabled ? 'reset' : 'submit';
-
   return (
     <section className="answer-wrapper">
       <form onSubmit={handleSubmit} autoComplete="off">
         <label htmlFor={INPUT_NAME}>
-          <input
-            name={INPUT_NAME}
-            id={INPUT_NAME}
-            disabled={disabled}
-            ref={inputRef}
-            autoFocus
-            placeholder="Type your answer here"
-          />
+          <input name={INPUT_NAME} id={INPUT_NAME} ref={inputRef} autoFocus placeholder="Type your answer here" />
         </label>
-        <button className={buttonClassName}>{buttonLabel}</button>
+        <button className="submit">Check answer</button>
       </form>
     </section>
   );

src/components/Challenge/Challenge.tsx

@@ -50,12 +50,24 @@ function Challenge({ disabled, onHit, onMiss, onGameOver, score }: Props) {
     );
   }
 
-  return (
-    <main className="challenge-wrapper">
-      {!disabled && challenge ? <Question question={challenge.question} /> : <GameOver score={score} />}
-      <Answer onSubmit={handleAnswer} onGameOver={onGameOver} disabled={disabled} />
-    </main>
-  );
+  if (disabled) {
+    return (
+      <main className="challenge-wrapper">
+        <GameOver onGameOver={onGameOver} score={score} />
+      </main>
+    );
+  }
+
+  if (challenge) {
+    return (
+      <main className="challenge-wrapper">
+        <Question question={challenge.question} />
+        <Answer onSubmit={handleAnswer} />
+      </main>
+    );
+  }
+
+  return null;
 }
 
 export default Challenge;

src/components/GameOver/GameOver.css

@@ -0,0 +1,7 @@
+.game-over-wrapper .reset {
+    background-color: #ff0000;
+    border: 1px solid var(--text-fg);
+    color: var(--color-secondary);
+    padding: 0.25rem 1rem;
+    width: 10rem;
+}

src/components/GameOver/GameOver.tsx

@@ -1,17 +1,23 @@
+import './GameOver.css';
+
 type Props = {
+  onGameOver: () => void;
   score: number;
 };
 
-function GameOver({ score }: Props) {
+function GameOver({ onGameOver, score }: Props) {
   const compliment = score > 0 ? 'Congratulations' : 'Pity';
   const needsPlural = score === 0 || score > 1;
 
   return (
-    <section>
+    <section className="game-over-wrapper">
       <h1>Game over.</h1>
       <p>
         {compliment}, you made {score} point{needsPlural ? 's' : ''}!
       </p>
+      <button className="reset" onClick={onGameOver} autoFocus>
+        Try again
+      </button>
     </section>
   );
 }