show fractions operation when the level ends

src/assets/lang/en_US

@@ -1,12 +1,12 @@
 audio=AUDIO
 aux_rectangle=Auxiliar Rectangles
 circle=Circles
-circleOne_intro1=Where should the balloon be placed so the boy
-circleOne_intro2=can get to it?
-squareOne_intro1=...
-squareOne_intro2=...
-squareTwo_intro1=...
-squareTwo_intro2=...
+circleOne_intro_a=Where should the balloon be placed so the boy\ncan get to it?
+circleOne_intro_b=...\n...
+squareOne_intro_a=...\n...
+squareOne_intro_b=...\n...
+squareTwo_intro_a=...\n...
+squareTwo_intro_b=...\n...
 continue=Continue
 custom_game=CUSTOMIZE THE CURRENT GAME
 difficulties=Difficulties

src/assets/lang/es_PE

@@ -2,12 +2,12 @@ audio=AUDIO
 aux_rectangle=Rectángulos Auxiliares
 circle=Circulos
 continue=Continúa
-circleOne_intro1=¿Dónde debe estar el globo para que el niño
-circleOne_intro2= pueda alcanzarlo?
-squareOne_intro1=...
-squareOne_intro2=...
-squareTwo_intro1=...
-squareTwo_intro2=...
+circleOne_intro_a=¿Dónde debe estar el globo para que el niño\npueda alcanzarlo?
+circleOne_intro_b=...\n...
+squareOne_intro_a=...\n...
+squareOne_intro_b=...\n...
+squareTwo_intro_a=...\n...
+squareTwo_intro_b=...\n...
 custom_game=PERSONALIZAR EL JUEGO ACTUAL
 difficulties=Dificultades
 difficulty=Dificultade

src/assets/lang/fr_FR

@@ -2,12 +2,12 @@ audio=AUDIO
 aux_rectangle=Rectangles Auxiliaires
 circle=Cercles
 continue=Continuez
-circleOne_intro1=Où doit être le ballon pour que le garçon
-circleOne_intro2=puisse l'atteindre ?
-squareOne_intro1=...
-squareOne_intro2=...
-squareTwo_intro1=...
-squareTwo_intro2=...
+circleOne_intro_a=Où doit être le ballon pour que le garçon\npuisse l'atteindre ?
+circleOne_intro_b=...\n...
+squareOne_intro_a=...\n...
+squareOne_intro_b=...\n...
+squareTwo_intro_a=...\n...
+squareTwo_intro_b=...\n...
 custom_game=PERSONNALISER LE JEU ACTUEL
 difficulties=Difficultés
 difficulty=Difficulté

src/assets/lang/it_IT

@@ -2,12 +2,12 @@ audio=AUDIO
 aux_rectangle=Rettangoli Ausiliari
 circle=Cerchi
 continue=Continua
-circleOne_intro1=Dove dovrebbe essere il pallone in modo che il
-circleOne_intro2=ragazzo possa raggiungerlo?
-squareOne_intro1=...
-squareOne_intro2=...
-squareTwo_intro1=...
-squareTwo_intro2=...
+circleOne_intro_a=Dove dovrebbe essere il pallone in modo che il\nragazzo possa raggiungerlo?
+circleOne_intro_b=...\n...
+squareOne_intro_a=...\n...
+squareOne_intro_b=...\n...
+squareTwo_intro_a=...\n...
+squareTwo_intro_b=...\n...
 custom_game=PERSONALIZZA IL GIOCO ATTUALE
 difficulties=Difficoltà
 difficulty=Difficoltà

src/assets/lang/pt_BR

@@ -1,12 +1,12 @@
 audio=ÁUDIO
 aux_rectangle=Retângulos Auxiliares
 circle=Círculos
-circleOne_intro1=Onde o balão deve ficar para que o menino
-circleOne_intro2=consiga chegar até ele?
-squareOne_intro1=...
-squareOne_intro2=...
-squareTwo_intro1=...
-squareTwo_intro2=...
+circleOne_intro_a=Onde o balão deve ficar para que o menino\nconsiga chegar até ele?
+circleOne_intro_b=...\n...
+squareOne_intro_a=...\n...
+squareOne_intro_b=Quantos blocos o trator deve empurrar para conseguir\ntapar o buraco no chão?
+squareTwo_intro_a=...\n...
+squareTwo_intro_b=...\n...
 continue=Continue
 custom_game=PERSONALIZE O JOGO ATUAL
 difficulties=Dificuldades

src/js/gameMechanics.js

@@ -1121,6 +1121,52 @@ const game = {
       const b = Math.max(yMouse, yIcon) - Math.min(yMouse, yIcon);
       return Math.sqrt(a * a + b * b);
     },
+    mdc: function (num1, num2) {
+      if (num2 === 0) return num1;
+      return game.math.mdc(num2, num1 % num2);
+    },
+    mmcArray: (input) => {
+      if (toString.call(input) !== '[object Array]') return false;
+      var len, a, b;
+      len = input.length;
+      if (!len) {
+        return null;
+      }
+      a = input[0];
+      for (var i = 1; i < len; i++) {
+        b = input[i];
+        a = game.math.mmcTwoNumbers(a, b);
+      }
+      return a;
+    },
+    mmcTwoNumbers: (num1, num2) => {
+      var resto, x, y;
+      x = num1;
+      y = num2;
+      while (resto != 0) {
+        resto = x % y;
+        x = y;
+        y = resto;
+      }
+      return (num1 * num2) / x;
+    },
+    getFractionFromDecimal: function (fraction) {
+      const len = fraction.toString().length - 2;
+
+      let denominator = Math.pow(10, len);
+      let numerator = fraction * denominator;
+
+      const divisor = game.math.greatestCommonDivisor(numerator, denominator);
+
+      numerator /= divisor;
+      denominator /= divisor;
+
+      return {
+        string: Math.floor(numerator) + '/' + Math.floor(denominator),
+        numerator: Math.floor(numerator),
+        denominator: Math.floor(denominator),
+      };
+    },
     /**
      * Checks if pointer/mouse is over (rectangular) icon.
      *

src/js/games/circleOne.js

@@ -135,7 +135,7 @@ const circleOne = {
     this.restart = restart;
 
     this.utils.renderCharacters(validPath, balloonX);
-    this.utils.renderAuxiliarUI();
+    this.utils.renderUI();
 
     if (!this.restart) {
       game.timer.start(); // Set a timer for the current level (used in postScore())
@@ -255,7 +255,11 @@ const circleOne = {
           direc: undefined,
           distance: undefined,
           angle: undefined,
-          label: [],
+          fraction: {
+            labels: [],
+            nominator: undefined,
+            denominator: undefined,
+          },
         };
         const curDivisor = game.math.randomInRange(1, gameDifficulty); // Set fraction 'divisor' (depends on difficulty)
 
@@ -314,7 +318,22 @@ const circleOne = {
             {
               x: fractionX,
               y: curCircleY + 10,
-              text: curDirection === 'left' ? '-1' : '1',
+              text: '1',
+            },
+            {
+              x: fractionX,
+              y: curCircleY - 2,
+              text: '',
+            },
+            {
+              x: fractionX,
+              y: curCircleY - 2,
+              text: '',
+            },
+            {
+              x: fractionX - 25,
+              y: curCircleY + 10,
+              text: curDirection === 'left' ? '-' : '',
             },
           ];
         } else {
@@ -361,7 +380,7 @@ const circleOne = {
 
         if (showFractions) {
           for (let cur in curFractionItems) {
-            curCircleInfo.label.push(
+            curCircleInfo.fraction.labels.push(
               game.add.text(
                 curFractionItems[cur].x,
                 curFractionItems[cur].y,
@@ -370,6 +389,9 @@ const circleOne = {
               )
             );
           }
+          curCircleInfo.fraction.nominator = curCircleInfo.direc;
+          curCircleInfo.fraction.denominator = curDivisor;
+          console.log(curCircleInfo.fraction.nominator);
         }
 
         curCircle.rotate = 90;
@@ -501,17 +523,22 @@ const circleOne = {
       );
       self.basket.anchor(0.5, 0.5);
     },
-    renderAuxiliarUI: function () {
+    renderUI: function () {
       // Help pointer
       self.help = game.add.image(0, 0, 'pointer', 2, 0);
 
       // Intro text
+      const correctMessage =
+        gameMode === 'a'
+          ? game.lang.circleOne_intro_a
+          : game.lang.circleOne_intro_b;
+      const treatedMessage = correctMessage.split('\\n');
       self.message = [];
       self.message.push(
         game.add.text(
           context.canvas.width / 2,
           170,
-          game.lang.circleOne_intro1,
+          treatedMessage[0],
           textStyles.h1_
         )
       );
@@ -519,11 +546,13 @@ const circleOne = {
         game.add.text(
           context.canvas.width / 2,
           220,
-          game.lang.circleOne_intro2,
+          treatedMessage[1],
           textStyles.h1_
         )
       );
 
+      self.utils.renderFractionCalculationUI();
+
       // continue button
       self.continue.modal = game.add.geom.rect(
         0,
@@ -554,6 +583,162 @@ const circleOne = {
       );
       self.continue.text.alpha = 0;
     },
+    renderFractionCalculationUI: function () {
+      const font = {
+        font: '62px monospace',
+        align: 'left',
+        fill: colors.green,
+      };
+
+      const nominators = [];
+      const denominators = [];
+      const renderList = [];
+
+      const padding = 100;
+      const offsetX = 100;
+      const widthOfChar = 35;
+
+      const x0 = padding;
+      const y0 = context.canvas.height / 2;
+      let nextX = x0;
+
+      const cardHeight = 400;
+      const cardX = x0 - padding;
+      const cardY = y0; // + cardHeight / 4;
+
+      // Card
+      const card = game.add.geom.rect(
+        cardX,
+        cardY,
+        0,
+        cardHeight,
+        colors.blueDark,
+        8,
+        colors.blueLight,
+        0.5
+      );
+      card.anchor(0, 0.5);
+      renderList.push(card);
+
+      // Fraction list
+      for (let i in self.circles.list) {
+        const curFraction = self.circles.list[i].info.fraction;
+        let curFractionSign = '+';
+        if (curFraction.labels[3].name === '-') {
+          curFractionSign = '-';
+          font.fill = colors.red;
+        }
+
+        renderList.push(
+          game.add.text(x0 + i * offsetX, y0 + 35, curFractionSign, font)
+        );
+        renderList.push(
+          game.add.text(x0 + i * offsetX + offsetX / 2, y0, '1', font)
+        );
+        renderList.push(
+          game.add.text(x0 + offsetX / 2 + i * offsetX, y0, '_', font)
+        );
+        renderList.push(
+          game.add.text(
+            x0 + i * offsetX + offsetX / 2,
+            y0 + 70,
+            curFraction.labels[0].name,
+            font
+          )
+        );
+
+        nominators.push(curFraction.nominator);
+        denominators.push(curFraction.denominator);
+      }
+
+      // 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;
+
+      // let fracLine = '';
+      // const updatedNominatorsString = updatedNominators
+      //   .map((n) => {
+      //     const len = ('' + n).length;
+      //     for (let i = 0; i < len; i++) fracLine += '_';
+      //     fracLine = n < 0 ? fracLine : fracLine + '_';
+      //     return n >= 0 ? '+' + n : n;
+      //   })
+      //   .join('');
+      // const fractionMiddleX = widthOfChar * (fracLine.length / 2);
+
+      // Fraction operation with least common multiple
+      nextX = x0 + self.circles.list.length * offsetX + 20;
+      // renderList.push(game.add.text(nextX, y0 + 35, '=', font));
+
+      // nextX += offsetX / 2;
+      // renderList.push(game.add.text(nextX, y0, updatedNominatorsString, font));
+      // renderList.push(
+      //   game.add.text(nextX + fractionMiddleX, y0 + 70, mmc, font)
+      // );
+      // renderList.push(game.add.text(nextX, y0, fracLine, font));
+
+      // Fraction result
+      //nextX += fractionMiddleX * 2 + 50;
+      renderList.push(game.add.text(nextX, y0 + 35, '=', font));
+
+      font.align = 'center';
+      nextX += offsetX + 40;
+      renderList.push(
+        game.add.text(nextX - 80, y0 + 35, result > 0 ? '' : '-', font)
+      );
+      renderList.push(game.add.text(nextX, y0, resultNominatorUnsigned, font));
+      renderList.push(game.add.text(nextX, y0 + 70, mmc, font));
+      renderList.push(game.add.text(nextX, y0, '___', font));
+
+      // Fraction result simplified setup
+      const mdcAux = game.math.mdc(resultNominator, mmc);
+      const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
+      if (mdc !== 1) {
+        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));
+        renderList.push(game.add.text(nextX, y0, '__', font));
+      }
+
+      // Decimal result
+      // nextX += offsetX;
+      // renderList.push(game.add.text(nextX, y0 + 35, '=', font));
+
+      // nextX += offsetX / 2;
+      // renderList.push(game.add.text(nextX, y0 + 35, result, font));
+
+      //let resultWidth = ('' + result).length * widthOfChar;
+      let resultWidth = '__'.length * widthOfChar;
+      const cardWidth = nextX - x0 + resultWidth + padding * 2;
+      card.width = cardWidth;
+
+      // Center Card
+      moveList(renderList, (context.canvas.width - cardWidth) / 2, 0);
+
+      renderList.forEach((item) => (item.alpha = 0));
+
+      self.fractionOperationUI = renderList;
+    },
 
     // UPDATE
     animateKid: function () {
@@ -631,6 +816,8 @@ const circleOne = {
 
       game.animation.stop(self.kid.animation[0]);
 
+      self.fractionOperationUI.forEach((item) => (item.alpha = 1));
+
       if (game.math.isOverlap(self.basket, self.kid)) {
         self.control.isCorrect = true;
         self.kid.curFrame = self.kid.curFrame < 12 ? 24 : 25;
@@ -750,7 +937,7 @@ const circleOne = {
         // Hide fractions
         if (showFractions) {
           self.circles.list.forEach((circle) => {
-            circle.info.label.forEach((labelPart) => {
+            circle.info.fraction.labels.forEach((labelPart) => {
               labelPart.alpha = 0;
             });
           });

src/js/games/squareOne.js

@@ -140,7 +140,7 @@ const squareOne = {
     );
     this.utils.renderFloorBlocks(this.control.direc, lineColor);
     this.utils.renderCharacters();
-    this.utils.renderAuxiliarUI(this.control.direc);
+    this.utils.renderUI(this.control.direc);
 
     if (!this.restart) {
       game.timer.start(); // Set a timer for the current level (used in postScore())
@@ -434,7 +434,7 @@ const squareOne = {
         self.tractor.curFrame = 5;
       }
     },
-    renderAuxiliarUI: function (direc) {
+    renderUI: function (direc) {
       // Help pointer
       self.help = game.add.image(0, 0, 'pointer', 1.7, 0);
       //self.help.anchor(0.5, 0);
@@ -452,12 +452,17 @@ const squareOne = {
       }
 
       // Intro text
+      const correctMessage =
+        gameMode === 'a'
+          ? game.lang.squareOne_intro_a
+          : game.lang.squareOne_intro_b;
+      const treatedMessage = correctMessage.split('\\n');
       self.message = [];
       self.message.push(
         game.add.text(
           context.canvas.width / 2,
           170,
-          game.lang.squareOne_intro1,
+          treatedMessage[0],
           textStyles.h1_
         )
       );
@@ -465,7 +470,7 @@ const squareOne = {
         game.add.text(
           context.canvas.width / 2,
           220,
-          game.lang.squareOne_intro2,
+          treatedMessage[1],
           textStyles.h1_
         )
       );

src/js/games/squareTwo.js

@@ -92,7 +92,7 @@ const squareTwo = {
     // Add kid
     this.utils.renderCharacters();
     this.utils.renderBlockSetup();
-    this.utils.renderAuxiliarUI();
+    this.utils.renderUI();
 
     game.timer.start(); // Set a timer for the current level (used in postScore)
     game.event.add('click', this.events.onInputDown);
@@ -177,8 +177,8 @@ const squareTwo = {
         'top',
         totalBlocksA,
         blockWidthA,
-        colors.redDark,
-        colors.redLight,
+        colors.blueDark,
+        colors.blueLight,
         xA,
         yA
       );
@@ -265,7 +265,7 @@ const squareTwo = {
         context.canvas.width / 2,
         y0 - 20,
         game.lang.s2_error_msg,
-        font
+        { ...font, font: textStyles.h4_.font }
       );
       blocks.warningText.alpha = 0;
     },
@@ -279,14 +279,19 @@ const squareTwo = {
       );
       self.kidAnimation.anchor(0.5, 0.7);
     },
-    renderAuxiliarUI: function () {
+    renderUI: function () {
       // Intro text
+      const correctMessage =
+        gameMode === 'a'
+          ? game.lang.squareTwo_intro_a
+          : game.lang.squareTwo_intro_b;
+      const treatedMessage = correctMessage.split('\\n');
       self.message = [];
       self.message.push(
         game.add.text(
           context.canvas.width / 2,
           170,
-          game.lang.squareTwo_intro1,
+          treatedMessage[0],
           textStyles.h1_
         )
       );
@@ -294,7 +299,7 @@ const squareTwo = {
         game.add.text(
           context.canvas.width / 2,
           220,
-          game.lang.squareTwo_intro2,
+          treatedMessage[1],
           textStyles.h1_
         )
       );

src/js/globals/globals_debug.js

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

src/js/globals/globals_tokens.js

@@ -7,8 +7,9 @@ const fallbackImgUrl = 'src/assets/img/fallback.png';
  */
 const colors = {
   // Blues
+  blueDark: '#02277d', // Line color that indicates right and fraction numbers
   blue: '#003cb3', // Subtitle
-  blueDark: '#183780', // Line color that indicates right and fraction numbers
+  blueLight: '#7997d2',
 
   blueBg: '#cce5ff', // Background color
   blueBgInsideLevel: '#a8c0e6', // Background color in squareOne (used for floor gap)
@@ -16,14 +17,16 @@ const colors = {
   blueMenuLine: '#b7cdf4',
 
   // Reds
-  red: '#b30000', // Linecolor that indicates left
   redLight: '#d27979', // squareTwo figures
-  redDark: '#330000', // squareTwo figures and some titles
+  red: '#b30000', // Linecolor that indicates left
+  redDark: '#730101', // squareTwo figures and some titles
+
+  maroon: '#330000', // squareTwo figures and some titles
 
   // Greens
+  greenLight: '#79d2a1', // squareTwo figures
   green: '#00804d', // Title
-  greenLight: '#83afaf', // squareTwo figures
-  greenDark: '#1e2f2f', // squareTwo figures
+  greenDark: '#005231', // squareTwo figures
 
   // Basics
   white: '#fff',
@@ -65,7 +68,7 @@ const textStyles = {
   p_: {
     font: `${font.sizes.p} ${font.families.default}`,
     align: 'center',
-    fill: colors.redDark,
+    fill: colors.maroon,
   },
   btn: {
     font: `${font.sizes.h2} ${font.families.btn}`,

src/js/menus/menu_custom.js

@@ -32,7 +32,7 @@ const customMenuState = {
         context.canvas.width / 2,
         60,
         game.lang.game.toUpperCase() + ': ' + menuState.menuIcons,
-        { ...textStyles.h3_, fill: colors.redDark }
+        { ...textStyles.h3_, fill: colors.maroon }
       );
       // Title : Customize the selected game
       game.add.text(context.canvas.width / 2, 120, game.lang.custom_game, {

src/js/menus/menu_main.js

@@ -29,7 +29,7 @@ const menuState = {
         context.canvas.width / 2,
         60,
         game.lang.welcome + ', ' + playerName + '!',
-        { ...textStyles.h3_, fill: colors.redDark }
+        { ...textStyles.h3_, fill: colors.maroon }
       );
       // Title : Select a game
       game.add.text(context.canvas.width / 2, 120, game.lang.menu_title, {