Merge pull request #6 from sytraore/version2

Version2 fixed CI/CD pipeline errors and test

Author: sytraore

apps/backend/src/db.js

@@ -10,8 +10,8 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 //const mongoUrl = `mongodb+srv://${uname}:${pw}@cluster0.oypxwnq.mongodb.net/?retryWrites=true&w=majority`;
-//const mongoUrl = "mongodb://127.0.0.1:27017/counting";
-const mongoUrl = process.env.MONGODB_URL;
+const mongoUrl = "mongodb://127.0.0.1:27017/counting";
+//const mongoUrl = process.env.MONGODB_URL;
 
 async function connectToDb(){
     try {

apps/frontend/jest.config.ts

@@ -6,5 +6,6 @@ export default {
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }]
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: 'test-output/jest/coverage'
+  coverageDirectory: 'test-output/jest/coverage',
+  passWithNoTests: true // added this line to pass the CI test run
 };

apps/frontend/src/components/animationNoCircleDraw.jsx

@@ -4,7 +4,7 @@ import '../styles/animation.css';
 // AnimationNoCircle component to handle animation logic without circleDraw function
 function AnimationNoCircle({ onAnimationFinish }) {
   const [percent, setPercent] = useState(0); // track progress
-  const [animationFinished, setAnimationFinished] = useState(false); // track if animation finished
+  //const [animationFinished, setAnimationFinished] = useState(false); // track if animation finished
 
   // useEffect hook to handle animation progress
   useEffect(() => {

apps/frontend/src/components/circleDraw.jsx

@@ -43,21 +43,45 @@ function Canvas({ onAnimationFinish }) {
 
 
     const isCircle = () => {
-      if (circlePath.length < 10) {
+      if (circlePath.length < 20) {
         console.log('Too few points to form a circle');
         return false; // Not enough points to form a circle
       }
 
-      const start = circlePath[0];
+      //const start = circlePath[0];
       const end = circlePath[circlePath.length - 1];
-    
-      // Check if the start and end points are close enough
-      const distance = Math.sqrt((start.x - end.x) ** 2 + (start.y - end.y) ** 2);
-      console.log('Start-End Distance:', distance);
-      if (distance > 20) { // Adjust the threshold as needed
-        console.log('Start and end points are too far apart');
-        return false;
+      let isClosed = false;
+
+      // Define how many of the initial points to check against.
+      // Let's check against the first 25% of the path, up to a max of 30 points.
+      const checkZoneLength = Math.min(40, Math.floor(circlePath.length * 0.5));
+
+      // Check if the path closes on itself
+      // Loop through the first few points of the path and see if the
+      // endpoint is close to any of them.
+      for (let i = 0; i < checkZoneLength; i++) {
+          const pointNearStart = circlePath[i];
+          const distance = Math.sqrt((pointNearStart.x - end.x) ** 2 + (pointNearStart.y - end.y) ** 2);
+
+          if (distance < 25) { // Threshold for considering the loop "closed"
+              isClosed = true;
+              console.log('Path is considered closed.');
+              break; // Exit the loop once we find a close point
+          }
+      }
+
+      if (!isClosed) {
+          console.log('Start and end points are too far apart');
+          return false;
       }
+      
+      // // Check if the start and end points are close enough
+      // const distance = Math.sqrt((start.x - end.x) ** 2 + (start.y - end.y) ** 2);
+      // console.log('Start-End Distance:', distance);
+      // if (distance > 20) { // Adjust the threshold as needed
+      //   console.log('Start and end points are too far apart');
+      //   return false;
+      // }
 
       // Calculate the center of the path
       const centerX = (Math.min(...circlePath.map((p) => p.x)) + Math.max(...circlePath.map((p) => p.x))) / 2;

apps/frontend/src/components/profile.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import '../styles/profile.css';
 import profileicon from '../assests/profileicon.png';
 

apps/frontend/src/data/practiceData.js

@@ -327,7 +327,7 @@ animals: [
     top: "70%",
     left: "5%",
     height: "150px"
-  },,
+  },
   {
     id: 8,
     name:"horse8",
@@ -402,7 +402,7 @@ animals: [
     top: "60%",
     left: "35%",
     height: "150px"
-  },,
+  },
   {
     id: 8,
     name:"hippo8",
@@ -469,7 +469,7 @@ animals: [
     top: "60%",
     left: "70%",
     height: "250px"
-  },,
+  },
   {
     id: 8,
     name:"octopus8",

apps/frontend/src/helpers/SaveAnswers.js

@@ -3,7 +3,10 @@ export async function saveAnswers(pageType) {
 
   try {
     let answersKey;
-    let answersData;
+    const answersData = {
+      answers: [],
+      pageType: ''
+    };
 
     switch (pageType) {
       case 'baselineTraining':
@@ -44,10 +47,12 @@ export async function saveAnswers(pageType) {
       return;
     }
 
-    answersData = {
-       answers : answers,
-       pageType: answersKey
-    };
+    // answersData = {
+    //    answers : answers,
+    //    pageType: answersKey
+    // };
+    answersData.answers = answers;
+    answersData.pageType = answersKey;
 
     console.log("answerData:", answersData)
 

apps/frontend/src/helpers/trayGenerators.js

@@ -84,7 +84,8 @@ const cookiePositions = {
 
     for (let i = 0; i < numCookies; i++) {
       let newCookie;
-      let tries = 0, maxTries = 100;
+      let tries = 0;
+      const maxTries = 100;
 
       while (tries < maxTries) {
         newCookie = {

apps/frontend/src/pages/TouchTrainingPage.jsx

@@ -93,7 +93,7 @@ const TouchTrainingPage = () => {
       speakUtterance();
       spokenRef.current = true;
     }
-  }, [currentPage]);
+  }, [currentPage, speakUtterance]);
 
   useEffect(() => {
     if(!once.current){
@@ -183,6 +183,10 @@ const TouchTrainingPage = () => {
               allCookies.forEach(cookie => {
                 cookie.style.pointerEvents = 'auto';
               });
+              const instruction = `Great job! Now draw a circle with your finger by following the yellow line.`;
+              setTimeout(() => {
+                textToSpeech(instruction);
+              }, 3000);
             }
           } else {
             console.error("SpeechSynthesis API is not supported in this browser.");
@@ -242,6 +246,22 @@ const TouchTrainingPage = () => {
 
   const handleTrayClick = (trayType) => {
     setSelectedTray(trayType);
+    // if the correct tray has been clicked
+    if (trayType === "greenTray" && sectionTrainData.pages[currentPage].greenTray[0].biscuits.length === sectionTrainData.pages[currentPage].cookies.length) {
+      textToSpeech("Green is correct, Good job!");
+    }
+    else if (trayType === "purpleTray" && sectionTrainData.pages[currentPage].purpleTray[0].biscuits.length === sectionTrainData.pages[currentPage].cookies.length){
+      textToSpeech("Purple is correct, Well done!");
+    }
+    // if the wrong tray has been clicked
+    else if (trayType === "greenTray" && sectionTrainData.pages[currentPage].greenTray[0].biscuits.length !== sectionTrainData.pages[currentPage].cookies.length) {
+      const explanation = `No, ${trayType} has ${sectionTrainData.pages[currentPage].greenTray[0].biscuits.length} cookies. Try again!`;
+      textToSpeech(explanation);
+    }
+    else{
+      const explanation = `Wrong answer, ${trayType} has ${sectionTrainData.pages[currentPage].purpleTray[0].biscuits.length} cookies. Try again!`;
+      textToSpeech(explanation);
+    }
     storeAnswer(currentPage, trayType);
   };
 
@@ -300,6 +320,7 @@ const TouchTrainingPage = () => {
                   src={biscuit.img}
                   id={biscuit.id}
                   className="biscuits"
+                  alt=""
                   style={{
                     position: "absolute",
                     top: biscuit.top,
@@ -331,6 +352,7 @@ const TouchTrainingPage = () => {
                   src={biscuit.img}
                   id={biscuit.id}
                   className="biscuits"
+                  alt=""
                   style={{
                     position: "absolute",
                     top: biscuit.top,

apps/frontend/src/pages/animationTrainingPage.jsx

@@ -245,6 +245,7 @@ const AnimationTrainingPage = () => {
                     src={biscuit.img}
                     id={biscuit.id}
                     className="biscuits"
+                    alt=""
                     style={{
                       position: "absolute",
                       top: biscuit.top,
@@ -275,6 +276,7 @@ const AnimationTrainingPage = () => {
                     src={biscuit.img}
                     id={biscuit.id}
                     className="biscuits"
+                    alt=""
                     style={{
                       position: "absolute",
                       top: biscuit.top,