circle1 refactor screen that show operation

src/js/games/circleOne.js

@@ -95,6 +95,7 @@ const circleOne = {
       checkAnswer: false, // Check kid inside ballon's basket
       isCorrect: false, // Informs answer is correct
       showEndInfo: false,
+      endSignX: undefined,
       // mode 'b' exclusive
       endIndex: undefined,
       fractionIndex: -1, // Index of clicked circle (game (b))
@@ -191,7 +192,7 @@ const circleOne = {
             undefined,
             0,
             colors.white,
-            0.5
+            0.8
           )
           .anchor(0, 0.25);
         game.add.text(
@@ -391,7 +392,6 @@ const circleOne = {
           }
           curCircleInfo.fraction.nominator = curCircleInfo.direc;
           curCircleInfo.fraction.denominator = curDivisor;
-          console.log(curCircleInfo.fraction.nominator);
         }
 
         curCircle.rotate = 90;
@@ -551,9 +551,7 @@ const circleOne = {
         )
       );
 
-      self.utils.renderFractionCalculationUI();
-
-      // continue button
+      // Modal
       self.continue.modal = game.add.geom.rect(
         0,
         0,
@@ -564,6 +562,11 @@ const circleOne = {
         colors.white,
         0
       );
+
+      // Fraction operation
+      self.utils.renderFractionCalculationUI();
+
+      // continue button
       self.continue.button = game.add.geom.rect(
         context.canvas.width / 2,
         context.canvas.height / 2 + 200,
@@ -584,11 +587,8 @@ const circleOne = {
       self.continue.text.alpha = 0;
     },
     renderFractionCalculationUI: function () {
-      const font = {
-        font: '62px monospace',
-        align: 'left',
-        fill: colors.green,
-      };
+      const font = textStyles.fraction;
+      font.fill = colors.green;
 
       const nominators = [];
       const denominators = [];
@@ -617,6 +617,7 @@ const circleOne = {
         colors.blueLight,
         0.5
       );
+      card.id = 'card';
       card.anchor(0, 0.5);
       renderList.push(card);
 
@@ -732,10 +733,15 @@ const circleOne = {
       const cardWidth = nextX - x0 + resultWidth + padding * 2;
       card.width = cardWidth;
 
+      self.control.endSignX =
+        (context.canvas.width - cardWidth) / 2 + cardWidth;
+
       // Center Card
       moveList(renderList, (context.canvas.width - cardWidth) / 2, 0);
 
-      renderList.forEach((item) => (item.alpha = 0));
+      renderList.forEach((item) => {
+        item.alpha = 0;
+      });
 
       self.fractionOperationUI = renderList;
     },
@@ -816,7 +822,11 @@ const circleOne = {
 
       game.animation.stop(self.kid.animation[0]);
 
-      self.fractionOperationUI.forEach((item) => (item.alpha = 1));
+      self.fractionOperationUI.forEach((item) => {
+        item.alpha = item.id === 'card' ? 0.5 : 1;
+      });
+
+      self.continue.modal.alpha = 0.3;
 
       if (game.math.isOverlap(self.basket, self.kid)) {
         self.control.isCorrect = true;
@@ -824,11 +834,12 @@ const circleOne = {
         if (audioStatus) game.audio.okSound.play();
         game.add
           .image(
-            context.canvas.width / 2,
+            self.control.endSignX + 50, //context.canvas.width / 2,
             context.canvas.height / 2,
             'answer_correct'
           )
           .anchor(0.5, 0.5);
+        self.continue.text.name = game.lang.continue;
         completedLevels++;
         if (isDebugMode) console.log('Completed Levels: ' + completedLevels);
       } else {
@@ -836,11 +847,12 @@ const circleOne = {
         if (audioStatus) game.audio.errorSound.play();
         game.add
           .image(
-            context.canvas.width / 2,
+            self.control.endSignX, //context.canvas.width / 2,
             context.canvas.height / 2,
             'answer_wrong'
           )
           .anchor(0.5, 0.5);
+        self.continue.text.name = game.lang.retry;
       }
 
       self.fetch.postScore();
@@ -896,7 +908,6 @@ const circleOne = {
         color = colors.red;
         //text = game.lang.retry;
       }
-      self.continue.modal.alpha = 0.25;
       // self.continue.text.name = text;
       self.continue.text.alpha = 1;
       self.continue.button.fillColor = color;

src/js/games/squareOne.js

@@ -373,7 +373,7 @@ const squareOne = {
           curX,
           self.default.y0 - lineSize, // + self.default.height - lineSize,
           blockWidth - lineSize,
-          self.default.height - lineSize,
+          self.default.height - lineSize - 20,
           lineColor,
           lineSize,
           colors.blueBgInsideLevel,
@@ -402,7 +402,7 @@ const squareOne = {
         const x = self.default.x0 + (i + 1) * self.default.width * direc;
         const y = self.default.y0 + self.default.height + 45;
         game.add.geom
-          .circle(x, y, 60, undefined, 0, colors.white, 0.6)
+          .circle(x, y, 60, undefined, 0, colors.white, 0.8)
           .anchor(0, 0.25);
         game.add.text(
           gameOperation === 'minus' ? x - 2 : x,

src/js/globals/globals_debug.js

@@ -5,12 +5,12 @@ const debugState = {
   name: { status: true, name: 'Username' },
   menu: { status: true, id: 1 },
   customMenu: {
-    status: false,
+    status: true,
     getData: () => {
-      return { mode: 'b', operation: 'minus', difficulty: 5, label: true };
+      return { mode: 'b', operation: 'plus', difficulty: 5, label: true };
     },
   },
-  map: { status: false },
+  map: { status: true },
   end: { status: false, stop: false },
 };
 

src/js/globals/globals_tokens.js

@@ -9,7 +9,7 @@ const colors = {
   // Blues
   blueDark: '#02277d', // Line color that indicates right and fraction numbers
   blue: '#003cb3', // Subtitle
-  blueLight: '#7997d2',
+  blueLight: '#92b3e8', //'#a4c6fc',
 
   blueBg: '#cce5ff', // Background color
   blueBgInsideLevel: '#a8c0e6', // Background color in squareOne (used for floor gap)
@@ -35,8 +35,19 @@ const colors = {
 };
 
 const font = {
-  sizes: { h1: '48px', h2: '42px', h3: '38px', h4: '36px', p: '30px' },
-  families: { default: 'Arial, sans-serif', btn: "'Bangers', serif" },
+  sizes: {
+    h1: '48px',
+    h2: '42px',
+    h3: '38px',
+    h4: '36px',
+    p: '30px',
+    display: '62px',
+  },
+  families: {
+    default: 'Arial, sans-serif',
+    btn: "'Bangers', serif",
+    fraction: 'monospace',
+  },
 };
 
 /**
@@ -82,6 +93,11 @@ const textStyles = {
     fill: colors.white,
     increaseLetterSpacing: true,
   },
+  fraction: {
+    font: `${font.sizes.display} ${font.families.fraction}`,
+    align: 'left',
+    fill: colors.blue,
+  },
 };
 
 /**