refactor: change feedback at the end of the game S1

js/games/squareOne.js

@@ -47,6 +47,8 @@ const squareOne = {
   stack: undefined,
   floor: undefined,
 
+  operation: undefined,
+
   /**
    * Main code
    */
@@ -63,6 +65,7 @@ const squareOne = {
       fillColor = colors.greenLight;
     }
 
+    this.operation = [];
     this.ui = {
       arrow: undefined,
       help: undefined,
@@ -114,6 +117,7 @@ const squareOne = {
     }
 
     this.stack = {
+      backupList: [],
       list: [],
       selectedIndex: undefined,
       correctIndex: undefined, // (gameMode 'b') index of the CORRECT 'stacked' block
@@ -130,6 +134,8 @@ const squareOne = {
       curIndex: -1, // (needs to be -1)
 
       correctX: undefined, // 'x' coordinate of CORRECT 'floor' block
+
+      subdivision: divisor,
     };
 
     let [restart, correctXA] = this.utils.renderStackedBlocks(
@@ -225,6 +231,19 @@ const squareOne = {
 
         self.stack.list.push(curBlock);
 
+        const backupBlock = game.add.geom.rect(
+          curBlock.x,
+          curBlock.y,
+          curBlock.width,
+          curBlock.height,
+          fillColor,
+          0,
+          lineColor,
+          lineWidth
+        );
+        backupBlock.anchor(gameOperation === 'minus' ? 1 : 0, 1);
+        self.stack.backupList.push(backupBlock);
+
         // If 'show fractions' is turned on, create labels that display the fractions on the side of each block
         const x = self.default.x0 + (curBlockWidth + 40) * direc;
         const y = self.default.height + 1;
@@ -280,7 +299,6 @@ const squareOne = {
           item.lineHeight = 30;
           fractionPartsList.push(item);
         }
-
         if (curFractionItems[2]) {
           const line = game.add.geom.line(
             curFractionItems[2].x0,
@@ -503,224 +521,210 @@ const squareOne = {
       );
     },
     renderOperationUI: () => {
-      let validBlocks = [];
-      const lastValidIndex =
-        gameMode === 'a' ? self.stack.curIndex : self.stack.selectedIndex;
-      for (let i = 0; i <= lastValidIndex; i++) {
-        validBlocks.push(self.stack.list[i]);
-      }
-
-      const font = textStyles.fraction;
-      font.fill = colors.green;
+      const y0 = 500;
+      const color = self.control.isCorrect ? colors.green : colors.red;
+      const font = { ...textStyles.fraction, fill: color };
+      const offsetX = 50;
+
+      // Display stacked blocks operation
+      const displayMainOperation = self.operation.length ? true : false;
+      if (displayMainOperation) {
+        let signs = [];
+        let nominators = [];
+        let denominators = [];
+        const x0 = self.operation[self.operation.length - 1].x;
+        let curX = x0 + offsetX;
+
+        // Setup 1
+        for (let i = 0; i < self.operation.length; i += 2) {
+          const sign = self.operation[i].name;
+
+          let fraction = self.operation[i + 1].name;
+          fraction = fraction.split('\n');
+
+          const nominator = fraction[0];
+          const denominator = fraction[1] || '1';
+
+          signs.push(sign);
+          nominators.push(nominator);
+          denominators.push(denominator);
+        }
 
-      const nominators = [];
-      const denominators = [];
-      const renderList = [];
+        // Setup 2
+        const updatedNominators = [];
+        const mmc = game.math.mmcArray(denominators);
+        let resultNominator = 0;
+        for (let i in nominators) {
+          const temp = nominators[i] * (mmc / denominators[i]);
+          updatedNominators.push(temp);
+          resultNominator += temp;
+        }
+        const resultNominatorUnsigned =
+          resultNominator < 0 ? -resultNominator : resultNominator;
 
-      const padding = 100;
-      const offsetX = 100;
-      const widthOfChar = 35;
+        // Fraction result
+        font.fill = colors.black;
+        game.add.text(curX, y0, '=', font);
+        font.fill = color;
+        if (gameOperation === 'minus') {
+          curX += offsetX;
+          game.add.text(curX, y0, '-', font);
+        }
+        curX += offsetX;
+        const fraction =
+          mmc == 1 || resultNominatorUnsigned === 0
+            ? resultNominatorUnsigned + ''
+            : resultNominatorUnsigned + '\n' + mmc;
+        const result = game.add.text(curX, y0, fraction, font);
+        result.lineHeight = 70;
+        if (fraction.includes('\n')) {
+          const nom = fraction.split('\n')[0];
+          const lineWidth = nom - 9 > 0 ? 80 : 40;
+          game.add.geom.line(
+            curX,
+            y0 + 13,
+            curX + lineWidth,
+            y0 + 15,
+            4,
+            color,
+            mmc === 1 || resultNominatorUnsigned === 0 ? 0 : 1
+          );
+        }
 
-      const x0 = padding;
-      const y0 = context.canvas.height / 3;
-      let nextX = x0;
+        // Setup 3
+        const mdcAux = game.math.mdc(resultNominator, mmc);
+        const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
+        if (mdc != 1 && resultNominatorUnsigned !== 0) {
+          if (resultNominatorUnsigned - 9 > 0 || mmc - 9 > 0) {
+            curX += offsetX;
+          }
+          curX += offsetX;
+          font.fill = colors.black;
+          game.add.text(curX, y0, '=', font);
+          font.fill = color;
+          if (gameOperation === 'minus') {
+            curX += offsetX;
+            game.add.text(curX, y0, '-', font);
+          }
 
-      const cardHeight = 400;
-      const cardX = x0 - padding;
-      const cardY = y0; // + cardHeight / 4;
+          const nom = resultNominatorUnsigned / mdc;
+          const den = mmc / mdc;
+          const frac = den === 1 ? '' + nom : nom + '\n' + den;
 
-      // Card
-      const card = game.add.geom.rect(
-        cardX,
-        cardY,
-        0,
-        cardHeight,
-        colors.blueLight,
-        0.5,
-        colors.blueDark,
-        8
-      );
-      card.id = 'card';
-      card.anchor(0, 0.5);
-      renderList.push(card);
-
-      // Fraction list
-      for (let i in validBlocks) {
-        const curFraction = validBlocks[i].fraction;
-        const curFractionString = curFraction.labels[0].name;
-        let curFractionSign = i !== '0' ? '+' : '';
-        if (curFraction.labels[1].name === '-') {
-          curFractionSign = '-';
-          font.fill = colors.red;
+          curX += offsetX;
+          const result = game.add.text(curX, y0, frac, font);
+          result.lineHeight = 70;
         }
+      }
 
-        const fraction = game.add.text(
-          x0 + i * offsetX + offsetX / 2,
-          curFractionString === '1' ? y0 + 40 : y0,
-          curFractionString,
-          font,
-          60
-        );
-        fraction.lineHeight = 70;
-
-        renderList.push(
-          game.add.text(x0 + i * offsetX, y0 + 35, curFractionSign, font)
-        );
-        renderList.push(fraction);
-        renderList.push(
-          game.add.text(
-            x0 + offsetX / 2 + i * offsetX,
-            y0,
-            curFractionString === '1' ? '' : '_',
-            font
-          )
+      const correctFloorIndex =
+        gameMode === 'a' ? self.floor.correctIndex : self.floor.selectedIndex;
+      console.log(correctFloorIndex);
+
+      // Display flag
+      const displayFlag = true;
+      if (displayFlag) {
+        const floorFlag = game.add.image(
+          self.floor.list[correctFloorIndex].x +
+            self.floor.list[0].width * self.control.direc -
+            15,
+          self.tractor.y + 10,
+          'flag_red',
+          0.7
         );
+        floorFlag.anchor(0, 1);
 
-        nominators.push(curFraction.nominator);
-        denominators.push(curFraction.denominator);
+        if (self.control.isCorrect) {
+          floorFlag.name = 'flag_green';
+        } else {
+          // this (maybe) takes in consideration if its mode a or b
+          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;
+          // }
+        }
       }
 
-      // Setup for fraction operation with least common multiple
-      font.fill = colors.black;
-      const updatedNominators = [];
-      const mmc = game.math.mmcArray(denominators);
-      let resultNominator = 0;
-      for (let i in nominators) {
-        const temp = nominators[i] * (mmc / denominators[i]);
-        updatedNominators.push(temp);
-        resultNominator += temp;
-      }
-      const resultNominatorUnsigned =
-        resultNominator < 0 ? -resultNominator : resultNominator;
-      const resultAux = resultNominator / mmc;
-      const result =
-        ('' + resultAux).length > 4 ? resultAux.toFixed(2) : resultAux;
+      // Display floor blocks operation
+      const displayFloorOperation = true;
+      if (displayFloorOperation) {
+        font.fill = colors.black;
 
-      // Fraction operation with least common multiple
-      nextX = x0 + validBlocks.length * offsetX + 20;
+        const y = self.tractor.y - 135;
+        let x =
+          self.floor.list[correctFloorIndex].x +
+          self.floor.list[0].width * self.control.direc -
+          15;
 
-      // Fraction result
-      renderList.push(game.add.text(nextX, y0 + 35, '=', font));
+        const subdivision = self.floor.subdivision;
+        console.log(subdivision);
 
-      font.align = 'center';
-      nextX += offsetX;
+        const decimalResult = (correctFloorIndex + 1) / subdivision;
+        console.log(decimalResult);
 
-      if (result < 0) {
-        nextX += 60;
+        const floorDecimalResult = Math.floor(decimalResult);
+        console.log(floorDecimalResult);
 
-        renderList.push(game.add.text(nextX - 80, y0 + 35, '-', font));
+        const nominator =
+          correctFloorIndex + 1 - floorDecimalResult * subdivision;
+        const sign = gameOperation === 'plus' ? '+' : '-';
 
-        nextX -= 30;
-      }
+        if (gameOperation === 'minus' && floorDecimalResult != 0) {
+          game.add.text(x, y, sign, font);
+          x += offsetX;
+        }
 
-      const fractionResult = game.add.text(
-        nextX,
-        mmc === 1 || resultNominatorUnsigned === 0 ? y0 + 40 : y0,
-        mmc === 1 || resultNominatorUnsigned === 0
-          ? resultNominatorUnsigned
-          : resultNominatorUnsigned + '\n' + mmc,
-        font
-      );
-      fractionResult.lineHeight = 70;
-      renderList.push(fractionResult);
-      const fractionLine = game.add.geom.line(
-        nextX,
-        y0 + 15,
-        nextX + 60,
-        y0 + 15,
-        4,
-        colors.black,
-        mmc === 1 || resultNominatorUnsigned === 0 ? 0 : 1
-      );
-      fractionLine.anchor(0.5, 0);
-      renderList.push(fractionLine);
-
-      // Fraction result simplified setup
-      const mdcAux = game.math.mdc(resultNominator, mmc);
-      const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
-      if (mdc !== 1 && resultNominatorUnsigned !== 0) {
-        nextX += offsetX;
-        renderList.push(game.add.text(nextX, y0 + 35, '=', font));
-
-        nextX += offsetX;
-        renderList.push(
-          game.add.text(nextX - 50, y0 + 35, result > 0 ? '' : '-', font)
-        );
-        renderList.push(
-          game.add.text(nextX, y0, resultNominatorUnsigned / mdc, font)
-        );
-        renderList.push(game.add.text(nextX, y0 + 70, mmc / mdc, font));
-        const fractionLine = game.add.geom.line(
-          nextX,
-          y0 + 15,
-          nextX + 60,
-          y0 + 15,
-          4,
-          colors.black
-        );
-        fractionLine.anchor(0.5, 0);
-        renderList.push(fractionLine);
-      }
+        game.add.text(x, y, floorDecimalResult, font);
 
-      // Decimal result
-      let resultWidth = '_'.length * widthOfChar;
-      const cardWidth = nextX - x0 + resultWidth + padding * 2;
-      card.width = cardWidth;
+        if (decimalResult > floorDecimalResult) {
+          x += offsetX;
+          game.add.text(x, y, sign, font);
 
-      // Center Card
-      moveList(renderList, (context.canvas.width - cardWidth) / 2, 0);
-      self.fractionOperationUI = renderList;
+          x += offsetX;
+          game.add.text(x, y, nominator + '\n' + subdivision, font);
 
-      // 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);
-          if (gameOperation === 'minus')
-            floorFlag.x -= self.floor.list[0].width;
-        } 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;
+          x += offsetX;
+          game.add.text(x, y, '=', font);
+
+          let newNom = floorDecimalResult * subdivision + nominator;
+          let newDen = subdivision;
+
+          if (gameOperation === 'minus') {
+            x += offsetX;
+            game.add.text(x, y, sign, font);
           }
-        }
-      } 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);
-          if (gameOperation === 'minus')
-            floorFlag.x -= self.floor.list[0].width;
-        } else {
-          let max = self.floor.selectedIndex,
-            min = 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;
+
+          x += offsetX;
+          game.add.text(x, y, newNom + '\n' + newDen, font);
+
+          const mdcAux = game.math.mdc(newNom, newDen);
+          const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
+          if (mdc !== 1) {
+            newNom /= mdc;
+            newDen /= mdc;
+
+            x += 80;
+            game.add.text(x, y, '=', font);
+
+            if (gameOperation === 'minus') {
+              x += offsetX;
+              game.add.text(x, y, sign, font);
             }
+
+            x += 60;
+            game.add.text(x, y, newNom + '\n' + newDen, font);
           }
         }
       }
 
-      const endSignX = (context.canvas.width - cardWidth) / 2 + cardWidth;
+      const endSignX = context.canvas.width / 2;
       return endSignX;
     },
     renderEndUI: () => {
@@ -753,7 +757,15 @@ const squareOne = {
     animateTractorHandler: () => {
       // Move
       self.tractor.x += self.animation.speed;
-      self.stack.list.forEach((block) => (block.x += self.animation.speed));
+      self.stack.list.forEach((block) => {
+        block.x += self.animation.speed;
+        if (showFractions) {
+          block.fraction.labels[0].x += self.animation.speed;
+          block.fraction.labels[1].x += self.animation.speed;
+          if (block.fraction.labels[2])
+            block.fraction.labels[2].x += self.animation.speed;
+        }
+      });
 
       // If the current block is 1/n (not 1/1) we need to consider the
       // extra space the truck needs to pass after the blocks falls but
@@ -779,6 +791,9 @@ const squareOne = {
     lowerBlocksHandler: () => {
       self.floor.curIndex += self.stack.list[self.stack.curIndex].blockValue;
 
+      const font = textStyles.fraction;
+      font.fill = colors.black;
+
       const tooManyStackBlocks = self.floor.curIndex > self.floor.selectedIndex;
       if (tooManyStackBlocks) return false;
 
@@ -789,9 +804,70 @@ const squareOne = {
       // lower blocks
       self.stack.list.forEach((block) => {
         block.y += self.default.height;
+        if (showFractions) {
+          block.fraction.labels[0].y += self.default.height;
+          block.fraction.labels[1].y += self.default.height;
+          if (block.fraction.labels[2])
+            block.fraction.labels[2].y += self.default.height;
+        }
       });
       // hide current block
-      self.stack.list[self.stack.curIndex].alpha = 0;
+      const currentBlock = self.stack.list[self.stack.curIndex];
+      currentBlock.alpha = 0;
+      if (showFractions) {
+        currentBlock.fraction.labels[0].alpha = 0;
+        currentBlock.fraction.labels[1].alpha = 0;
+        if (currentBlock.fraction.labels[2])
+          currentBlock.fraction.labels[2].alpha = 0;
+      }
+
+      const curSignString = currentBlock.fraction.labels[1].name;
+      const curSign = game.add.text(
+        100 + self.stack.curIndex * 100 - 50,
+        500,
+        curSignString == '-' ? '-' : '+',
+        font
+      );
+      curSign.alpha = self.stack.curIndex == 0 && curSignString == '' ? 0 : 1;
+      self.operation.push(curSign);
+
+      // if (self.stack.curIndex > 0) {
+      //   self.operation.push(
+      //     game.add.text(
+      //       100 + self.stack.curIndex * 100 - 50,
+      //       500,
+      //       currentBlock.fraction.labels[1].name === '-' ? '-' : '+',
+      //       font
+      //     )
+      //   );
+      // } else {
+      //   const sign = game.add.text(
+      //     100 + self.stack.curIndex * 100 - 50,
+      //     500,
+      //     currentBlock.fraction.labels[1].name === '-' ? '-' : '+',
+      //     font
+      //   );
+      //   sign.alpha = 0;
+      //   self.operation.push(sign);
+      // }
+      const fractionResult = game.add.text(
+        100 + self.stack.curIndex * 100,
+        500,
+        currentBlock.fraction.labels[0].name,
+        font
+      );
+      fractionResult.lineHeight = 70;
+      self.operation.push(fractionResult);
+
+      game.add.geom.line(
+        100 + self.stack.curIndex * 100,
+        500 + 13,
+        100 + self.stack.curIndex * 100 + 40,
+        500 + 13,
+        4,
+        colors.black,
+        currentBlock.fraction.labels[0].name.split('\n').length === 1 ? 0 : 1
+      );
 
       const isLastFloorBlock = self.floor.curIndex === self.floor.selectedIndex;
       const notEnoughStackBlocks =
@@ -897,19 +973,18 @@ const squareOne = {
         navigation.disableIcon(navigation.showAnswerIcon);
         // Hide intro message
         self.ui.message[0].alpha = 0;
-        // Hide labels
-        if (showFractions) {
-          self.stack.list.forEach((block) => {
-            block.fraction.labels.forEach((lbl) => {
-              if (lbl) lbl.alpha = 0;
-            });
-          });
-        }
+
         // Hide solution pointer
         if (self.ui.help != undefined) self.ui.help.alpha = 0;
         // Hide unselected blocks
         for (let i = curSet.list.length - 1; i > clickedIndex; i--) {
           curSet.list[i].alpha = 0;
+          if (gameMode === 'b') {
+            // Hide unselected blocks fractions
+            curSet.list[i].fraction.labels.forEach((lbl) => {
+              if (lbl) lbl.alpha = 0;
+            });
+          }
         }
 
         // Save selected index

js/globals/globals_debug.js

@@ -7,7 +7,7 @@ const debugState = {
   customMenu: {
     skip: true,
     getData: () => {
-      return { mode: 'b', operation: 'minus', difficulty: 1, label: true };
+      return { mode: 'a', operation: 'plus', difficulty: 2, label: true };
     },
   },
   map: { skip: true },