fix: refactor games result text structure

js/gameMechanics.js

@@ -688,6 +688,22 @@ const game = {
             get y1WithAnchor() {
               return this.y1 - this.width * this.y1Anchor;
             },
+            get x() {
+              return this.x0;
+            },
+            get y() {
+              return this.y0;
+            },
+            set x(x0) {
+              const distance = this.x1 - this.x0;
+              this.x0 = x0;
+              this.x1 = x0 + distance;
+            },
+            set y(y0) {
+              const distance = this.y1 - this.y0;
+              this.y0 = y0;
+              this.y1 = y0 + distance;
+            },
           };
           const width =
             (med.x1 - x0) * (med.x1 - x0) + (med.y1 - y0) * (med.y1 - y0);

js/games/circleOne.js

@@ -333,16 +333,12 @@ const circleOne = {
               y: curCircleY + 10,
               text: '1',
             },
-            {
-              x: fractionX,
-              y: curCircleY - 2,
-              text: '',
-            },
             {
               x: fractionX - 25,
               y: curCircleY + 10,
               text: curDirection === 'left' ? '-' : '',
             },
+            null,
           ];
         } else {
           curAngleDegree = 360 / curDivisor;
@@ -368,30 +364,49 @@ const circleOne = {
               y: curCircleY - 2,
               text: `1\n${curDivisor}`,
             },
-            {
-              x: fractionX,
-              y: curCircleY - 2,
-              text: '__',
-            },
             {
               x: fractionX - 35,
               y: curCircleY + 15,
               text: curDirection === 'left' ? '-' : '',
             },
+            {
+              x0: fractionX,
+              y0: curCircleY + 2,
+              x1: fractionX + 25,
+              y1: curCircleY + 2,
+              lineWidth: 2,
+              color: curLineColor,
+            },
           ];
         }
 
         if (showFractions) {
-          for (let cur in curFractionItems) {
-            const fraction = game.add.text(
-              curFractionItems[cur].x,
-              curFractionItems[cur].y,
-              curFractionItems[cur].text,
+          for (let i = 0; i < 2; i++) {
+            const item = game.add.text(
+              curFractionItems[i].x,
+              curFractionItems[i].y,
+              curFractionItems[i].text,
               font
             );
-            fraction.lineHeight = 37;
-            curCircleInfo.fraction.labels.push(fraction);
+            item.lineHeight = 37;
+            curCircleInfo.fraction.labels.push(item);
+          }
+
+          if (curFractionItems[2]) {
+            const line = game.add.geom.line(
+              curFractionItems[2].x0,
+              curFractionItems[2].y0,
+              curFractionItems[2].x1,
+              curFractionItems[2].y1,
+              curFractionItems[2].lineWidth,
+              curFractionItems[2].color
+            );
+            line.anchor(0.5, 0);
+            curCircleInfo.fraction.labels.push(line);
+          } else {
+            curCircleInfo.fraction.labels.push(null);
           }
+
           curCircleInfo.fraction.nominator = curCircleInfo.direc;
           curCircleInfo.fraction.denominator = curDivisor;
         }
@@ -591,7 +606,7 @@ const circleOne = {
         const curFraction = validCircles[i].info.fraction;
         const curFractionString = curFraction.labels[0].name;
         let curFractionSign = i !== '0' ? '+' : '';
-        if (curFraction.labels[2].name === '-') {
+        if (curFraction.labels[1].name === '-') {
           curFractionSign = '-';
           font.fill = colors.red;
         }
@@ -680,14 +695,17 @@ const circleOne = {
       );
       fractionResult.lineHeight = 70;
       renderList.push(fractionResult);
-      renderList.push(
-        game.add.text(
-          nextX,
-          y0,
-          mmc === 1 || resultNominatorUnsigned === 0 ? '' : '___',
-          font
-        )
+      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);
@@ -705,7 +723,17 @@ const circleOne = {
           game.add.text(nextX, y0, resultNominatorUnsigned / mdc, font)
         );
         renderList.push(game.add.text(nextX, y0 + 70, mmc / mdc, font));
-        renderList.push(game.add.text(nextX, y0, '__', 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);
       }
 
       // Decimal result
@@ -716,7 +744,7 @@ const circleOne = {
       // renderList.push(game.add.text(nextX, y0 + 35, result, font));
 
       //let resultWidth = ('' + result).length * widthOfChar;
-      let resultWidth = '__'.length * widthOfChar;
+      let resultWidth = '_'.length * widthOfChar;
       const cardWidth = nextX - x0 + resultWidth + padding * 2;
       card.width = cardWidth;
 
@@ -937,7 +965,7 @@ const circleOne = {
         if (showFractions) {
           self.circles.list.forEach((circle) => {
             circle.info.fraction.labels.forEach((labelPart) => {
-              labelPart.alpha = 0;
+              if (labelPart) labelPart.alpha = 0;
             });
           });
         }
@@ -971,7 +999,7 @@ const circleOne = {
           const alpha = i <= cur.index ? 1 : 0.4;
           self.circles.list[i].alpha = alpha;
           self.circles.list[i].info.fraction.labels.forEach((lbl) => {
-            lbl.alpha = alpha;
+            if (lbl) lbl.alpha = alpha;
           });
         }
       }
@@ -986,7 +1014,7 @@ const circleOne = {
         self.circles.list.forEach((circle) => {
           circle.alpha = alpha;
           circle.info.fraction.labels.forEach((lbl) => {
-            lbl.alpha = alpha;
+            if (lbl) lbl.alpha = alpha;
           });
         });
       }

js/games/squareOne.js

@@ -239,16 +239,12 @@ const squareOne = {
                 y: self.default.y0 - i * y - 20,
                 text: '1',
               },
-              {
-                x: x,
-                y: self.default.y0 - i * y - 37,
-                text: '',
-              },
               {
                 x: x - 25,
                 y: self.default.y0 - i * y - 27,
                 text: gameOperation === 'minus' ? '-' : '',
               },
+              null,
             ];
           } else {
             font = textStyles.p_;
@@ -258,30 +254,47 @@ const squareOne = {
                 y: self.default.y0 - i * y - 40,
                 text: '1\n' + curDivisor,
               },
-              {
-                x: x,
-                y: self.default.y0 - i * y - 37,
-                text: '__',
-              },
               {
                 x: x - 25,
                 y: self.default.y0 - i * y - 27,
                 text: gameOperation === 'minus' ? '-' : '',
               },
+              {
+                x0: x,
+                y: self.default.y0 - i * y - 35,
+                x1: x + 25,
+                lineWidth: 2,
+                color: lineColor,
+              },
             ];
           }
           font = { ...font, font: 'bold ' + font.font, fill: lineColor };
 
           const fractionPartsList = [];
-          for (let cur in curFractionItems) {
-            const fraction = game.add.text(
-              curFractionItems[cur].x,
-              curFractionItems[cur].y,
-              curFractionItems[cur].text,
+          for (let i = 0; i < 2; i++) {
+            const item = game.add.text(
+              curFractionItems[i].x,
+              curFractionItems[i].y,
+              curFractionItems[i].text,
               font
             );
-            fraction.lineHeight = 30;
-            fractionPartsList.push(fraction);
+            item.lineHeight = 30;
+            fractionPartsList.push(item);
+          }
+
+          if (curFractionItems[2]) {
+            const line = game.add.geom.line(
+              curFractionItems[2].x0,
+              curFractionItems[2].y,
+              curFractionItems[2].x1,
+              curFractionItems[2].y,
+              curFractionItems[2].lineWidth,
+              curFractionItems[2].color
+            );
+            line.anchor(0.5, 0);
+            fractionPartsList.push(line);
+          } else {
+            fractionPartsList.push(null);
           }
 
           curBlock.fraction = {
@@ -532,7 +545,7 @@ const squareOne = {
         const curFraction = validBlocks[i].fraction;
         const curFractionString = curFraction.labels[0].name;
         let curFractionSign = i !== '0' ? '+' : '';
-        if (curFraction.labels[2].name === '-') {
+        if (curFraction.labels[1].name === '-') {
           curFractionSign = '-';
           font.fill = colors.red;
         }
@@ -622,14 +635,17 @@ const squareOne = {
       );
       fractionResult.lineHeight = 70;
       renderList.push(fractionResult);
-      renderList.push(
-        game.add.text(
-          nextX,
-          y0,
-          mmc === 1 || resultNominatorUnsigned === 0 ? '' : '___',
-          font
-        )
+      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);
@@ -646,7 +662,16 @@ const squareOne = {
           game.add.text(nextX, y0, resultNominatorUnsigned / mdc, font)
         );
         renderList.push(game.add.text(nextX, y0 + 70, mmc / mdc, font));
-        renderList.push(game.add.text(nextX, y0, '__', 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);
       }
 
       // Decimal result
@@ -657,7 +682,7 @@ const squareOne = {
       // renderList.push(game.add.text(nextX, y0 + 35, result, font));
 
       //let resultWidth = ('' + result).length * widthOfChar;
-      let resultWidth = '__'.length * widthOfChar;
+      let resultWidth = '_'.length * widthOfChar;
       const cardWidth = nextX - x0 + resultWidth + padding * 2;
       card.width = cardWidth;
 
@@ -848,7 +873,7 @@ const squareOne = {
         if (showFractions) {
           self.stack.list.forEach((block) => {
             block.fraction.labels.forEach((lbl) => {
-              lbl.alpha = 0;
+              if (lbl) lbl.alpha = 0;
             });
           });
         }
@@ -896,7 +921,7 @@ const squareOne = {
 
             self.stack.list[i].alpha = alpha;
             self.stack.list[i].fraction.labels.forEach((lbl) => {
-              lbl.alpha = alpha;
+              if (lbl) lbl.alpha = alpha;
             });
           }
           self.stack.selectedIndex = cur.blockIndex;
@@ -919,7 +944,7 @@ const squareOne = {
           for (let i in self.stack.list) {
             self.stack.list[i].alpha = 1;
             self.stack.list[i].fraction.labels.forEach((lbl) => {
-              lbl.alpha = 1;
+              if (lbl) lbl.alpha = 1;
             });
           }
           self.stack.selectedIndex = undefined;

js/games/squareTwo.js

@@ -263,7 +263,15 @@ const squareTwo = {
       yLabel = y0 + self.control.blockHeight + 40;
 
       blocks.fractions[0] = game.add.text(xLabel, yLabel, '', font);
-      blocks.fractions[1] = game.add.text(xLabel, yLabel + 10, '___', font);
+      blocks.fractions[1] = game.add.geom.line(
+        xLabel,
+        yLabel + 10,
+        xLabel + 50,
+        yLabel + 10,
+        2,
+        lineColor
+      );
+      blocks.fractions[1].anchor(0.5, 0);
       blocks.fractions[0].alpha = 0;
       blocks.fractions[1].alpha = 0;
 

js/globals/globals_debug.js

@@ -3,11 +3,11 @@ const isDebugMode = false;
 const debugState = {
   lang: { skip: true, lang: 'pt_BR' },
   name: { skip: true, name: 'Username' },
-  menu: { skip: true, id: 1, audioStatus: false },
+  menu: { skip: true, id: 0, audioStatus: false },
   customMenu: {
     skip: true,
     getData: () => {
-      return { mode: 'a', operation: 'mixed', difficulty: 5, label: true };
+      return { mode: 'a', operation: 'plus', difficulty: 3, label: true };
     },
   },
   map: { skip: true },