refactor game circle1 for resize and ihc feedback

src/js/gameMechanics.js

@@ -86,7 +86,8 @@ const game = {
           40,
           undefined,
           0,
-          colors.blueBgOff
+          colors.blue,
+          0.4
         );
         game.state.progressBar.anchor(0.5, 0.5);
 
@@ -114,7 +115,7 @@ const game = {
       } else {
         self.create(); // Calls create()
         game.render.all(); // After create() ends, renders media on canvas
-        if (self.restart && self.restart == true) {
+        if (self?.restart) {
           // If needed, restart state
           game.state.start(game.state.name);
         } else {
@@ -308,7 +309,9 @@ const game = {
             game.loadHandler.cachedOneFile('image');
           };
           img.onerror = () => {
-            console.error('Game error: image not found');
+            console.error(
+              'Game error: image "' + url[0] + '" not found in sourse files.'
+            );
             game.image[url[0]] = img;
             img.src = fallbackImgUrl;
             game.loadHandler.cachedOneFile('image');
@@ -416,7 +419,7 @@ const game = {
             return this.y - this.height * this.scale * this.yAnchor;
           },
         };
-        med.originalScale = med.scale;
+        med.initialScale = med.scale;
         game.render.queue.push(med);
         return med;
       }
@@ -473,7 +476,7 @@ const game = {
             return this.y - this.height * this.scale * this.yAnchor;
           },
         };
-        med.originalScale = med.scale;
+        med.initialScale = med.scale;
         game.render.queue.push(med);
         return med;
       }
@@ -605,7 +608,7 @@ const game = {
               return this.y - this.height * this.scale * this.yAnchor;
             },
           };
-          med.originalScale = med.scale;
+          med.initialScale = med.scale;
           if (width != 0) {
             med.width = width || game.add.default.width;
           }
@@ -685,7 +688,7 @@ const game = {
               return this.y - this.height * this.scale * this.yAnchor;
             },
           };
-          med.originalScale = med.scale;
+          med.initialScale = med.scale;
           if (diameter != 0) {
             med.diameter = diameter || game.add.default.diameter;
             med.width = med.height = med.diameter;
@@ -775,7 +778,7 @@ const game = {
               return this.y - this.height * this.scale * this.yAnchor;
             },
           };
-          med.originalScale = med.scale;
+          med.initialScale = med.scale;
           if (diameter != 0) {
             med.diameter = diameter || game.add.default.diameter;
             med.width = med.height = med.diameter;

src/js/games/scaleOne.js

@@ -68,7 +68,7 @@
 //         true,
 //         false, // Right icons
 //         'customMenu',
-//         this.viewHelp
+//         this.showAnswer
 //       );
 //     }
 
@@ -325,7 +325,7 @@
 //   /**
 //    * Display correct answer
 //    */
-//   viewHelp: function () {},
+//   showAnswer: function () {},
 
 //   /**
 //    * Saves players data after level ends - to be sent to database <br>

src/js/games/squareOne.js

@@ -85,7 +85,7 @@ const squareOne = {
         true,
         false, // Right icons
         'customMenu',
-        this.viewHelp
+        this.showAnswer
       );
     }
 
@@ -444,6 +444,7 @@ const squareOne = {
    * @returns {boolean}
    */
   createStckBlocks: function () {
+    let restart = false;
     let hasBaseDifficulty = false; // Will be true after next for loop if level has at least one '1/difficulty' fraction (if false, restart)
     const max = gameMode == 'b' ? 10 : curMapPosition + 4; // Maximum number of stacked blocks for the level
 
@@ -530,8 +531,6 @@ const squareOne = {
     self.stck.curBlockEnd =
       self.startX + self.stck.blocks[0].width * self.direc_level;
 
-    let restart = false;
-
     // Check for errors (level too easy for its difficulty or end position out of bounds)
     if (
       !hasBaseDifficulty ||
@@ -657,7 +656,7 @@ const squareOne = {
   /**
    * Display correct answer
    */
-  viewHelp: function () {
+  showAnswer: function () {
     if (!self.hasClicked) {
       // On gameMode (a)
       if (gameMode == 'a') {

src/js/globals/globals_debug.js

@@ -3,14 +3,14 @@ const isDebugMode = true;
 const debugState = {
   lang: { status: true, lang: 'pt_BR' },
   name: { status: true, name: 'Username' },
-  menu: { status: true, id: 2 },
+  menu: { status: true, id: 1 },
   customMenu: {
     status: true,
     getData: () => {
-      return { mode: 'a', operation: 'plus', difficulty: 1, label: true };
+      return { mode: 'a', operation: 'mixed', difficulty: 1, label: true };
     },
   },
-  map: { status: false },
+  map: { status: true },
   end: { status: false, stop: false },
 };
 

src/js/globals/globals_functions.js

@@ -339,8 +339,33 @@ const renderBackground = (type) => {
   game.add.image(300, 85, 'cloud', 1.2);
 
   // Add floor
-  for (let i = 0; i < context.canvas.width / 150; i++) {
-    game.add.image(i * 150, context.canvas.height - 150, 'floor', 1.5);
+  const floorSize = 150;
+
+  if (type === 'farmRoad') {
+    game.add.image(0, context.canvas.height - floorSize, 'floor_grass', 1.5);
+    for (let i = 1; i < context.canvas.width / floorSize; i++) {
+      game.add.image(
+        i * floorSize,
+        context.canvas.height - floorSize,
+        'floor_road'
+      );
+    }
+    game.add.image(
+      context.canvas.width - floorSize,
+      context.canvas.height - floorSize,
+      'floor_grass',
+      1.5
+    );
+    return;
+  }
+
+  for (let i = 0; i < context.canvas.width / floorSize; i++) {
+    game.add.image(
+      i * floorSize,
+      context.canvas.height - floorSize,
+      'floor_grass',
+      1.5
+    );
   }
 };
 

src/js/globals/globals_tokens.js

@@ -11,7 +11,6 @@ const colors = {
   blueDark: '#183780', // Line color that indicates right and fraction numbers
 
   blueBg: '#cce5ff', // Background color
-  blueBgOff: '#adc8e6',
   blueBgInsideLevel: '#a8c0e6', // Background color in squareOne (used for floor gap)
 
   blueMenuLine: '#b7cdf4',
@@ -116,9 +115,9 @@ const url = {
       ['bg_map', baseUrl + 'scene/bg_map.png'],
       ['bush', baseUrl + 'scene/bush.png'],
       ['cloud', baseUrl + 'scene/cloud.png'],
-      ['floor', baseUrl + 'scene/floor.png'],
+      ['floor_grass', baseUrl + 'scene/floor_grass.png'],
+      ['floor_road', baseUrl + 'scene/floor_road.png'],
       ['rock', baseUrl + 'scene/rock.png'],
-      ['road', baseUrl + 'scene/road.png'],
       ['progress_bar_tile', baseUrl + 'scene/progress_bar_tile.png'],
       ['sign', baseUrl + 'scene/sign.png'],
       ['sign_broken', baseUrl + 'scene/sign_broken.png'],

src/js/menus/menu_custom.js

@@ -219,9 +219,9 @@ const customMenuState = {
             // If its the icon the pointer is over
             if (cur.iconType == 'enter')
               self.enterText.style = textStyles.btnLg;
-            cur.scale = cur.originalScale * 1.1;
+            cur.scale = cur.initialScale * 1.1;
           } else {
-            cur.scale = cur.originalScale;
+            cur.scale = cur.initialScale;
           }
         }
       });
@@ -229,7 +229,7 @@ const customMenuState = {
       // If pointer is not over icon
       if (self.enterText) self.enterText.style = textStyles.btn;
       self.menuIcons.forEach((cur) => {
-        cur.scale = cur.originalScale;
+        cur.scale = cur.initialScale;
       });
       document.body.style.cursor = 'auto';
     }

src/js/menus/menu_main.js

@@ -239,9 +239,9 @@ const menuState = {
           // If its in the same icon category
           if (cur == self.menuIcons[overIcon]) {
             // If its the icon the pointer is over
-            cur.scale = cur.originalScale * 1.1;
+            cur.scale = cur.initialScale * 1.1;
           } else {
-            cur.scale = cur.originalScale;
+            cur.scale = cur.initialScale;
           }
         }
       });
@@ -249,7 +249,7 @@ const menuState = {
       // If pointer is not over icon
       self.clearTitle();
       self.menuIcons.forEach((cur) => {
-        cur.scale = cur.originalScale;
+        cur.scale = cur.initialScale;
       });
       document.body.style.cursor = 'auto';
     }

src/js/screens/end.js

@@ -204,11 +204,11 @@ const endState = {
     if (overIcon) {
       // If pointer is over icon
       document.body.style.cursor = 'pointer';
-      self.continueButton.scale = self.continueButton.originalScale * 1.1;
+      self.continueButton.scale = self.continueButton.initialScale * 1.1;
       self.continueText.style = textStyles.btnLg;
     } else {
       // If pointer is not over icon
-      self.continueButton.scale = self.continueButton.originalScale * 1;
+      self.continueButton.scale = self.continueButton.initialScale * 1;
       document.body.style.cursor = 'auto';
       self.continueText.style = textStyles.btn;
     }

src/js/screens/map.js

@@ -292,11 +292,11 @@ const mapState = {
     if (overIcon) {
       // If pointer is over icon
       document.body.style.cursor = 'pointer';
-      self.continueButton.scale = self.continueButton.originalScale * 1.1;
+      self.continueButton.scale = self.continueButton.initialScale * 1.1;
       self.continueText.style = textStyles.btnLg;
     } else {
       // If pointer is not over icon
-      self.continueButton.scale = self.continueButton.originalScale * 1;
+      self.continueButton.scale = self.continueButton.initialScale * 1;
       self.continueText.style = textStyles.btn;
       document.body.style.cursor = 'auto';
     }