include achieved score in GameOver message

src/components/Challenge/Challenge.tsx

@@ -11,9 +11,10 @@ type Props = {
   onHit: () => void;
   onMiss: () => void;
   onGameOver: () => void;
+  score: number;
 };
 
-function Challenge({ disabled, onHit, onMiss, onGameOver }: Props) {
+function Challenge({ disabled, onHit, onMiss, onGameOver, score }: Props) {
   const { loading, error, value: challenge } = useChallenge();
 
   async function handleAnswer(answer: string): Promise<void> {
@@ -43,15 +44,15 @@ function Challenge({ disabled, onHit, onMiss, onGameOver }: Props) {
   if (error) {
     return (
       <main className="challenge-wrapper">
-        <h2>An error has ocurred:</h2>
+        <h1>An error has ocurred:</h1>
         <blockquote>{error}</blockquote>
       </main>
     );
   }
 
   return (
     <main className="challenge-wrapper">
-      {!disabled && challenge ? <Question question={challenge.question} /> : <GameOver />}
+      {!disabled && challenge ? <Question question={challenge.question} /> : <GameOver score={score} />}
       <Answer onSubmit={handleAnswer} onGameOver={onGameOver} disabled={disabled} />
     </main>
   );

src/components/GameOver/GameOver.tsx

@@ -1,6 +1,18 @@
-function GameOver() {
+type Props = {
+  score: number;
+};
+
+function GameOver({ score }: Props) {
+  const compliment = score > 0 ? 'Congratulations' : 'Pity';
+  const needsPlural = score === 0 || score > 1;
+
   return (
-    <h1>Game over.</h1>
+    <section>
+      <h1>Game over.</h1>
+      <p>
+        {compliment}, you made {score} point{needsPlural ? 's' : ''}!
+      </p>
+    </section>
   );
 }
 

src/components/Status/Status.tsx

@@ -4,13 +4,13 @@ import './Status.css';
 
 type Props = {
   chancesLeft: number;
-  points: number;
+  score: number;
 };
 
-function Status({ chancesLeft, points }: Props) {
+function Status({ chancesLeft, score }: Props) {
   return (
     <aside className="status-wrapper">
-      <Score amount={points} />
+      <Score amount={score} />
       <hr />
       <ChancesLeft amount={chancesLeft} />
     </aside>

src/views/App/App.tsx

@@ -5,27 +5,27 @@ import Status from '../../components/Status';
 import ThemeToggler from '../../components/ThemeToggler';
 import './App.css';
 
-const INITIAL_POINTS = 0;
+const INITIAL_SCORE = 0;
 const INITIAL_CHANCES_LEFT = 3;
 
 function App() {
-  const [points, setPoints] = useState(INITIAL_POINTS);
+  const [score, setScore] = useState(INITIAL_SCORE);
   const [chancesLeft, setChancesLeft] = useState(INITIAL_CHANCES_LEFT);
 
   function handleHit(): void {
-    setPoints((pointsCur) => pointsCur + 1);
+    setScore((prev) => prev + 1);
   }
 
   function handleMiss(): void {
     if (chancesLeft === 0) {
       return;
     }
 
-    setChancesLeft((chancesLeftCur) => chancesLeftCur - 1);
+    setChancesLeft((prev) => prev - 1);
   }
 
   function handleGameOver(): void {
-    setPoints(INITIAL_POINTS);
+    setScore(INITIAL_SCORE);
     setChancesLeft(INITIAL_CHANCES_LEFT);
   }
 
@@ -39,8 +39,14 @@ function App() {
   return (
     <div className="app-wrapper">
       <ThemeToggler onToggle={handleThemeToggle} />
-      <Challenge onHit={handleHit} onMiss={handleMiss} onGameOver={handleGameOver} disabled={disabled} />
-      <Status chancesLeft={chancesLeft} points={points} />
+      <Challenge
+        disabled={disabled}
+        onGameOver={handleGameOver}
+        onHit={handleHit}
+        onMiss={handleMiss}
+        score={score}
+      />
+      <Status chancesLeft={chancesLeft} score={score} />
     </div>
   );
 }