ref func that add rectangle to set fill by default

src/js/gameMechanics.js

@@ -75,8 +75,6 @@ const game = {
           0,
           context.canvas.width,
           context.canvas.height,
-          colors.white,
-          0,
           colors.blueBg,
           1
         );
@@ -85,8 +83,6 @@ const game = {
           context.canvas.height / 2,
           40,
           40,
-          undefined,
-          0,
           colors.blue,
           0.4
         );
@@ -566,10 +562,10 @@ const game = {
         y,
         width,
         height,
-        lineColor,
-        lineWidth,
         fillColor,
-        alpha
+        alpha,
+        lineColor,
+        lineWidth
       ) {
         if (x == undefined || y == undefined || width == undefined)
           console.error('Game error: missing parameters.');
@@ -818,8 +814,8 @@ const game = {
       width: 50,
       height: 50,
       lineColor: '#000',
-      lineWidth: 1,
-      fillColor: 0, // No fill
+      lineWidth: 0, // No line
+      fillColor: '#fff', // white fill
       // Used in: circle.
       diameter: 50,
       counterclockwise: false,
@@ -959,7 +955,7 @@ const game = {
         context.shadowBlur = cur.shadow ? cur.shadowBlur : 0;
         context.shadowColor = cur.shadowColor;
         // Fill
-        if (cur.fillColor != 0) {
+        if (cur.fillColor !== 'transparent') {
           context.fillStyle = cur.fillColor;
           context.fillRect(x, y, cur.width * cur.scale, cur.height * cur.scale);
         }

src/js/games/circleOne.js

@@ -220,7 +220,7 @@ const circleOne = {
       );
     },
     renderWalkedPath: function (x, y, color) {
-      const path = game.add.geom.rect(x, y, 1, 1, color, 4);
+      const path = game.add.geom.rect(x, y, 1, 1, 'transparent', 1, color, 4);
       self.walkedPath.push(path);
       return path;
     },
@@ -562,18 +562,6 @@ const circleOne = {
       );
     },
     renderOperationUI: function () {
-      // Modal
-      // self.ui.continue.modal = game.add.geom.rect(
-      //   0,
-      //   0,
-      //   context.canvas.width,
-      //   context.canvas.height,
-      //   undefined,
-      //   0,
-      //   colors.black,
-      //   0.2
-      // );
-
       let validCircles = self.circles.list;
       if (gameMode === 'b') {
         validCircles = [];
@@ -607,10 +595,10 @@ const circleOne = {
         cardY,
         0,
         cardHeight,
-        colors.blueDark,
-        8,
         colors.blueLight,
-        0.5
+        0.5,
+        colors.blueDark,
+        8
       );
       card.id = 'card';
       card.anchor(0, 0.5);
@@ -752,8 +740,6 @@ const circleOne = {
         context.canvas.height / 2 + 100,
         350,
         100,
-        undefined,
-        0,
         btnColor
       );
       self.ui.continue.button.anchor(0.5, 0.5);

src/js/games/squareOne.js

@@ -210,10 +210,10 @@ const squareOne = {
           self.default.y0 - i * self.default.height - lineWidth,
           curBlockWidth,
           self.default.height,
-          lineColor,
-          lineWidth,
           fillColor,
-          1
+          1,
+          lineColor,
+          lineWidth
         );
         curBlock.anchor(gameOperation === 'minus' ? 1 : 0, 1);
         curBlock.blockValue = divisor / curDivisor;
@@ -391,10 +391,10 @@ const squareOne = {
           self.default.y0,
           blockWidth,
           self.default.height + 10,
-          colors.gray,
-          lineWidth,
           colors.blueBgInsideLevel,
-          1
+          1,
+          colors.gray,
+          lineWidth
         );
         const anchor = gameOperation == 'minus' ? 1 : 0;
         curBlock.anchor(anchor, 0);
@@ -402,7 +402,7 @@ const squareOne = {
 
         // If game is type (a), adding events to floor blocks
         if (gameMode == 'a') {
-          curBlock.fillColor = '';
+          curBlock.fillColor = 'transparent';
           curBlock.blockIndex = i;
         }
 
@@ -494,18 +494,6 @@ const squareOne = {
       );
     },
     renderOperationUI: () => {
-      // Modal
-      // self.ui.continue.modal = game.add.geom.rect(
-      //   0,
-      //   0,
-      //   context.canvas.width,
-      //   context.canvas.height,
-      //   undefined,
-      //   0,
-      //   colors.black,
-      //   0.2
-      // );
-
       let validBlocks = [];
       const lastValidIndex =
         gameMode === 'a' ? self.stack.curIndex : self.stack.selectedIndex;
@@ -538,10 +526,10 @@ const squareOne = {
         cardY,
         0,
         cardHeight,
-        colors.blueDark,
-        8,
         colors.blueLight,
-        0.5
+        0.5,
+        colors.blueDark,
+        8
       );
       card.id = 'card';
       card.anchor(0, 0.5);
@@ -683,8 +671,6 @@ const squareOne = {
         context.canvas.height / 2 + 100,
         350,
         100,
-        undefined,
-        0,
         btnColor
       );
       self.ui.continue.button.anchor(0.5, 0.5);
@@ -731,7 +717,7 @@ const squareOne = {
 
       // fill floor
       for (let i = 0; i <= self.floor.curIndex; i++) {
-        self.floor.list[i].fillColor = '';
+        self.floor.list[i].fillColor = 'transparent';
       }
       // lower blocks
       self.stack.list.forEach((block) => {
@@ -888,7 +874,7 @@ const squareOne = {
         if (gameMode === 'a') {
           for (let i in self.floor.list) {
             self.floor.list[i].fillColor =
-              i <= cur.blockIndex ? colors.blueBgInsideLevel : '';
+              i <= cur.blockIndex ? colors.blueBgInsideLevel : 'transparent';
           }
           self.floor.selectedIndex = cur.blockIndex;
         } else {
@@ -913,7 +899,7 @@ const squareOne = {
 
         if (gameMode === 'a') {
           for (let i in self.floor.list) {
-            self.floor.list[i].fillColor = '';
+            self.floor.list[i].fillColor = 'transparent';
           }
           self.floor.selectedIndex = undefined;
         } else {

src/js/games/squareTwo.js

@@ -232,10 +232,10 @@ const squareTwo = {
           y0,
           blockWidth,
           self.control.blockHeight,
-          lineColor,
-          4,
           fillColor,
-          0.5
+          0.5,
+          lineColor,
+          4
         );
         curBlock.position = blockType;
         curBlock.index = i;
@@ -250,10 +250,10 @@ const squareTwo = {
           curYAux,
           blockWidth,
           self.control.blockHeight,
-          lineColor,
-          1,
           fillColor,
-          alpha
+          alpha,
+          lineColor,
+          1
         );
         blocks.auxBlocks.push(curAuxBlock);
       }
@@ -352,10 +352,10 @@ const squareTwo = {
         cardY,
         0,
         cardHeight,
-        colors.blueDark,
-        8,
         colors.blueLight,
-        0.5
+        0.5,
+        colors.blueDark,
+        8
       );
       card.id = 'card';
       card.anchor(0, 0.5);
@@ -406,8 +406,6 @@ const squareTwo = {
         context.canvas.height / 2 + 280,
         350,
         100,
-        undefined,
-        0,
         btnColor
       );
       self.ui.continue.button.anchor(0.5, 0.5);

src/js/globals/globals_debug.js

@@ -3,15 +3,15 @@ const isDebugMode = true;
 const debugState = {
   lang: { skip: true, lang: 'en_US' },
   name: { skip: true, name: 'Username' },
-  menu: { skip: true, id: 2 },
+  menu: { skip: true, id: 1 },
   customMenu: {
     skip: true,
     getData: () => {
-      return { mode: 'a', operation: 'minus', difficulty: 5, label: true };
+      return { mode: 'a', operation: 'mixed', difficulty: 1, label: true };
     },
   },
   map: { skip: true },
-  end: { skip: false, stop: false },
+  end: { skip: true, stop: false },
 };
 
 const debugFunctions = {
@@ -20,23 +20,13 @@ const debugFunctions = {
     const h = 1920 / (grid + 0.5);
     const v = 1080 / (grid + 0.5);
     for (let i = 0; i < grid; i++) {
-      game.add.geom.rect(
-        h / 2 + i * h,
-        0,
-        h / 2,
-        1080,
-        '',
-        0,
-        colors.blue,
-        0.3
-      );
+      game.add.geom.rect(h / 2 + i * h, 0, h / 2, 1080, colors.blue, 0.3);
       game.add.geom.rect(
         0,
         v / 2 + i * v,
         1920,
         v / 2,
-        '',
-        0,
+
         colors.blue,
         0.3
       );

src/js/globals/globals_functions.js

@@ -236,10 +236,7 @@ const renderBackground = (type) => {
       0,
       context.canvas.width,
       context.canvas.height,
-      colors.white,
-      0,
-      colors.blueBg,
-      1
+      colors.blueBg
     );
     return;
   }
@@ -332,10 +329,7 @@ const renderBackground = (type) => {
       context.canvas.height - floorSize * 2 + 15,
       150 * (context.canvas.width / floorSize),
       150,
-      undefined,
-      0,
-      '#48d813',
-      1
+      '#48d813'
     );
   }
 };
@@ -347,23 +341,14 @@ const getFrameInfo = function () {
   let height = context.canvas.height - 2 * y0;
 
   let rect = function () {
-    game.add.geom.rect(x0, y0, width, height, colors.red, 2);
+    game.add.geom.rect(x0, y0, width, height, 'transparent', 1, colors.red, 2);
   };
 
   let point = function (offsetW, offsetH) {
     for (let i = 0, y1 = y; i < 4; i++) {
       x1 = x0;
       for (let j = 0; j < 7; j++) {
-        let sqr = game.add.geom.rect(
-          x1,
-          y1,
-          20,
-          20,
-          undefined,
-          0,
-          colors.red,
-          1
-        );
+        let sqr = game.add.geom.rect(x1, y1, 20, 20, colors.red);
         sqr.anchor(0.5, 0.5);
         x1 += offsetW;
       }

src/js/menus/menu_custom.js

@@ -371,17 +371,6 @@ const customMenuState = {
       // Parameters
       const curX = x + (50 + 10) * i;
 
-      // Difficulty menuIcons
-      // const icon = game.add.geom.rect(
-      //   curX,
-      //   y - 5,
-      //   50,
-      //   50,
-      //   undefined,
-      //   0,
-      //   colors.gray,
-      //   1
-      // );
       const icon = game.add.sprite(curX, y - 5, 'btn_square', 1, 0.8);
       icon.anchor(0.5, 0.5);
       icon.difficulty = i + 1;

src/js/menus/preMenu_name.js

@@ -33,10 +33,7 @@ const nameState = {
       context.canvas.height / 2 + 93 + 44,
       300,
       100,
-      undefined,
-      0,
-      colors.green,
-      1
+      colors.green
     );
     this.okBtn.anchor(0.5, 0.5);
 

src/js/moodle/studentReport.js

@@ -94,15 +94,7 @@ const studentReport = {
           textStyles.h2_
         );
 
-        game.add.geom.rect(
-          x - 55,
-          y - 40,
-          5,
-          135,
-          undefined,
-          0,
-          colors.blueMenuLine
-        );
+        game.add.geom.rect(x - 55, y - 40, 5, 135, colors.blueMenuLine);
         game.add.text(
           x - 40,
           y - 25,

src/js/screens/end.js

@@ -143,10 +143,10 @@ const endState = {
         y0 + 1,
         149, //150, //149,
         34, //35, //34,
+        'transparent',
+        1,
         colors.blue,
-        3,
-        undefined,
-        1
+        3
       );
 
       // percentage label
@@ -195,10 +195,7 @@ const endState = {
         btnY,
         600,
         100,
-        undefined,
-        0,
-        colors.green,
-        1
+        colors.green
       );
       self.ui.continue.button.anchor(0.5, 0.5);
 
@@ -251,23 +248,19 @@ const endState = {
 
       if (self.control.waitUserAction) {
         if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
-          overIcon = true;
+          // If pointer is over icon
+          document.body.style.cursor = 'pointer';
+          self.ui.continue.button.scale =
+            self.ui.continue.button.initialScale * 1.1;
+          self.ui.continue.text.style = textStyles.btnLg;
+        } else {
+          // If pointer is not over icon
+          self.ui.continue.button.scale =
+            self.ui.continue.button.initialScale * 1;
+          document.body.style.cursor = 'auto';
+          self.ui.continue.text.style = textStyles.btn;
         }
       }
-      // Update gui
-      if (overIcon) {
-        // If pointer is over icon
-        document.body.style.cursor = 'pointer';
-        self.ui.continue.button.scale =
-          self.ui.continue.button.initialScale * 1.1;
-        self.ui.continue.text.style = textStyles.btnLg;
-      } else {
-        // If pointer is not over icon
-        self.ui.continue.button.scale =
-          self.ui.continue.button.initialScale * 1;
-        document.body.style.cursor = 'auto';
-        self.ui.continue.text.style = textStyles.btn;
-      }
     },
   },
 };

src/js/screens/map.js

@@ -150,9 +150,7 @@ const mapState = {
       0,
       context.canvas.width,
       context.canvas.height,
-      undefined,
-      0,
-      colors.white,
+      colors.black,
       0
     );
 
@@ -161,8 +159,6 @@ const mapState = {
       context.canvas.height / 2,
       300,
       100,
-      undefined,
-      0,
       colors.green,
       0
     );
@@ -307,10 +303,10 @@ const mapState = {
       y0 + 1,
       150, //149,
       35, //34,
+      'transparent',
+      1,
       colors.blue,
-      3,
-      undefined,
-      1
+      3
     );
 
     // percentage label