refactor: additional feedback on the floor while displaying if players is right or wrong (S1)

js/games/squareOne.js

@@ -667,13 +667,56 @@ const squareOne = {
       const cardWidth = nextX - x0 + resultWidth + padding * 2;
       card.width = cardWidth;
 
-      const endSignX = (context.canvas.width - cardWidth) / 2 + cardWidth;
-
       // Center Card
       moveList(renderList, (context.canvas.width - cardWidth) / 2, 0);
-
       self.fractionOperationUI = renderList;
 
+      // Feedback on the floor
+      if (gameMode === 'a') {
+        if (self.control.isCorrect) {
+          const floorFlag = game.add.image(
+            self.floor.list[self.floor.correctIndex].x,
+            self.tractor.y + 10,
+            'flag_green',
+            0.7
+          );
+          floorFlag.anchor(0, 1);
+        } else {
+          let min = self.floor.selectedIndex,
+            max = self.floor.correctIndex;
+          if (min > max) {
+            let aux = min;
+            min = max;
+            max = aux;
+          }
+          for (let i = min + 1; i <= max; i++) {
+            self.floor.list[i].fillColor = colors.red;
+            self.floor.list[i].alpha = 1;
+          }
+        }
+      } else {
+        if (self.control.isCorrect) {
+          console.log(self.floor);
+          const floorFlag = game.add.image(
+            self.floor.list[self.floor.curIndex].x,
+            self.tractor.y + 10,
+            'flag_green',
+            0.7
+          );
+          floorFlag.anchor(0, 1);
+        } else {
+          let min = self.floor.selectedIndex,
+            max = self.floor.curIndex;
+          if (min < max) {
+            for (let i = min + 1; i <= max; i++) {
+              self.floor.list[i].fillColor = colors.red;
+              self.floor.list[i].alpha = 1;
+            }
+          }
+        }
+      }
+
+      const endSignX = (context.canvas.width - cardWidth) / 2 + cardWidth;
       return endSignX;
     },
     renderEndUI: () => {
@@ -818,20 +861,20 @@ const squareOne = {
      * Display correct answer
      */
     showAnswer: () => {
-      if (!self.control.hasClicked) {
-        // On gameMode (a)
-        if (gameMode == 'a') {
-          const aux = self.floor.list[0];
-          self.ui.help.x =
-            self.floor.correctX - (aux.width / 2) * self.control.direc;
-          self.ui.help.y = self.default.y0;
-          // On gameMode (b)
-        } else {
-          const aux = self.stack.list[self.stack.correctIndex];
-          self.ui.help.x = aux.x + (aux.width / 2) * self.control.direc;
-          self.ui.help.y = aux.y;
-        }
+      // On gameMode (a)
+      if (gameMode == 'a') {
+        const aux = self.floor.list[0];
+        self.ui.help.x =
+          self.floor.correctX - (aux.width / 2) * self.control.direc;
+        self.ui.help.y = self.default.y0;
+        // On gameMode (b)
+      } else {
+        const aux = self.stack.list[self.stack.correctIndex];
+        self.ui.help.x = aux.x + (aux.width / 2) * self.control.direc;
+        self.ui.help.y = aux.y;
+      }
 
+      if (!self.control.hasClicked) {
         self.ui.help.alpha = 0.7;
       }
     },