Merge pull request #95 from Gpresent/readings

src/grading/Feedback.tsx

@@ -69,7 +69,7 @@ const Feedback: React.FC<feedbackProps> = (props) => {
   useEffect(() => {
     let nextIndex = 0;
     for (let i = 0; i < childIndex; i++) {
-      while (kanji_grade.grades[nextIndex] > passing || kanji_grade.grades[nextIndex] === -1) nextIndex++;
+      while (kanji_grade.grades[nextIndex] > passing || kanji_grade.grades[nextIndex] <= -1) nextIndex++;
       nextIndex++;
     }
     nextIndex--;
@@ -164,7 +164,7 @@ const Feedback: React.FC<feedbackProps> = (props) => {
     kanji_grade.grades.forEach((grade, index) => {
       if (
         grade >= passing ||
-        grade === -1 ||
+        grade <= -1 ||
         kanji_grade.feedback.length <= index
       )
         return;
@@ -285,7 +285,7 @@ const Feedback: React.FC<feedbackProps> = (props) => {
         {haveGradeInfo && (kanji_grade.overallFeedback || kanji_grade.grades.filter((value) => value < passing).length > 0) && (
           <>
             {kanji_grade.grades.map((grade, index) => {
-              const extras = kanji_grade.grades.filter((value, eIndex) => value === -1 && eIndex < index).length
+              const extras = kanji_grade.grades.filter((value, eIndex) => value <= -1 && eIndex < index).length
               index -= extras
               if (
                 grade >= passing ||

src/grading/color_input.tsx

@@ -10,7 +10,7 @@ export default function color_input(grades: number[], passing: number = 0.6) {
       }
       for (var i = 0; i < paths.length; i++) {
         var color;
-        if (grades[i] === -2) color = "rgba(138, 200, 219, 0.8)";
+        if (grades[i] === -2) color = "rgba(79, 57, 170, 0.7)";
         else if (grades[i] > passing) {
           const yellow = grades[i] - passing;
           color = "rgba(" + Math.floor(255 * (1 - yellow / (1 - passing))) + ", 255, 0, 0.7)";

src/grading/grade_controller.tsx

@@ -85,6 +85,10 @@ function choose_strokes(iCoords: number[][][], tCoords: number[][][]): [number[]
     const iCenters = center_points(iCoords);
     const tCenters = center_points(tCoords);
     if (iCoords.length > tCoords.length) {
+        if (iCoords.length > Math.floor(tCoords.length * 1.25)) {
+            kanji_grade.overallFeedback += "Too many extra strokes! Review the model and try again.\n";
+            return [[],[],[],"",0];
+        }
         let assigned = Array.from({ length: iCoords.length }, () => -1);
         for (let i = 0; i < tCoords.length; i++) {
             let minDiff = Number.MAX_VALUE;
@@ -140,6 +144,10 @@ function choose_strokes(iCoords: number[][][], tCoords: number[][][]): [number[]
         return [gradeColors, strokeInfo, feedback, aspectString, failing];
 
     } else {
+        if (iCoords.length < Math.ceil(tCoords.length * 0.75)) {
+            kanji_grade.overallFeedback += "Too many missing strokes! Review the model and try again.\n";
+            return [[],[],[],"",0];
+        }
         let assigned = Array.from({ length: tCoords.length }, () => -1);
         for (let i = 0; i < iCoords.length; i++) {
             let minDiff = Number.MAX_VALUE;

src/pages/DrawReview.tsx

@@ -50,6 +50,10 @@ const DrawReview: React.FC<DrawReviewProps> = ({ char, handleComplete, handleAdv
       {character && (
         <>
           <div className="character-prompt">{character.one_word_meaning}</div>
+          <div className="reading-prompt">
+            {character.on.length ? <div className="reading">{"on: " + character.on[0]}</div>: null}
+            {character.kun.length ? <div className="reading">{"kun: " + character.kun[0]}</div> : null}
+          </div>
           <Draw recall={recall} learn={learn} handleAdvance={handleAdvance} handleComplete={handleComplete} character={character} allowDisplay={!(recall && learn)} />
         </>
       )}

src/styles/review.css

@@ -5,6 +5,16 @@
 
 .character-prompt {
     font-size: 24px;
+    margin-bottom: 10px;
+    align-self: center;
+}
+
+.reading-prompt {
+    font-size: 20px;
     margin-bottom: 20px;
     align-self: center;
+    width: 80%;
+    align-items: center;
+    display: flex;
+    justify-content: space-evenly;
 }

src/styles/styles.css

@@ -7,6 +7,12 @@ body {
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+body::-webkit-scrollbar {
+    display: none;
 }
 
 .save-kanji {