Merge pull request #8 from hykilpikonna/page-improvements

Page improvements

frontend/src/components/LessonComplete.tsx

@@ -0,0 +1,26 @@
+import DuoSplash from "../assets/img/duo-splash.png";
+import { useNavigate } from "react-router-dom";
+
+interface LessonCompleteProps {
+    home: string;
+  }
+
+export default function LessonComplete({ home } : LessonCompleteProps)
+{
+  const navigate = useNavigate();
+
+  return <div className="flex flex-col justify-center">
+    <div className="flex flex-col p-5 gap-5 items-center">
+      <img src={DuoSplash} alt="Duolingo Logo"></img>
+
+      <h1>Well done!</h1>
+
+      <p className="white">
+        Experience Gained: +100XP
+      </p>
+      <button className="green" onClick={() => navigate(home)}>
+        Continue
+      </button>
+    </div>
+  </div>
+}

frontend/src/components/WrittenVocabularyExercise.tsx

@@ -20,6 +20,7 @@ export default function WrittenQuestionExercise({q, onSubmit}: WrittenVocabulary
 
     return (
         <div className='v-layout space-y-8 items-center w-full'>
+            <h1>Vocabulary: Do you know this word?</h1>
             <div className='round box h-min no-shadow relative min-h-[60px] flex items-center justify-center mx-5'>
                 {q.question}
             </div>

frontend/src/pages/Lesson.tsx

@@ -5,6 +5,7 @@ import WrittenVocabularyExercise from "../components/WrittenVocabularyExercise"
 import VerbalQuestionsExercise from "../components/VerbalQuestionsExercise"
 import Progress from '../components/Progress';
 import VerbalPronunciationExercise from '../components/VerbalPronunciationExercise';
+import LessonComplete from '../components/LessonComplete';
 import {_Question, chapters_jp, Question} from "../logic/CourseData";
 import VideoExercise from "../components/VideoExercise";
 
@@ -24,27 +25,28 @@ export default function Lesson()
 
   const onSubmit = () =>
   {
-    if (currQuestion < questions.length - 1)
-      setCurrQuestion(currQuestion + 1);
-    else navigate(home);
+    setCurrQuestion(currQuestion + 1);
   }
 
   const renderQuestion = (currIndex: number) =>
   {
+    if (currIndex >= questions.length) {
+      return <LessonComplete home={home}/>;
+    }
     const chapter = 'Ordering food';
     const question: Question = questions[currQuestion];
     switch (question.type)
     {
       case 'written-question':
-        return <WrittenQuestionExercise q={question} chapter={chapter} onSubmit={onSubmit}/>;
+        return <WrittenQuestionExercise key={currQuestion} q={question} chapter={chapter} onSubmit={onSubmit}/>;
       case 'written-vocabulary':
-        return <WrittenVocabularyExercise q={question} onSubmit={onSubmit}/>;
+        return <WrittenVocabularyExercise key={currQuestion} q={question} onSubmit={onSubmit}/>;
       case 'verbal-question':
-        return <VerbalQuestionsExercise q={question} chapter={chapter} onSubmit={onSubmit}/>;
+        return <VerbalQuestionsExercise key={currQuestion} q={question} chapter={chapter} onSubmit={onSubmit}/>;
       case 'verbal-pronunciation':
-        return <VerbalPronunciationExercise q={question} chapter={chapter} onSubmit={onSubmit}/>;
+        return <VerbalPronunciationExercise key={currQuestion} q={question} chapter={chapter} onSubmit={onSubmit}/>;
       case 'video':
-        return <VideoExercise q={question} chapter={chapter} onSubmit={onSubmit}/>;
+        return <VideoExercise key={currQuestion} q={question} chapter={chapter} onSubmit={onSubmit}/>;
       default:
         return null;
     }