瀏覽代碼

finished converting tab to spaces
changes main menu icons
changed back to previous indentation style
changed name of global function postScore to sendToDB to differentiate from local postScore
updated readme from /php

laira 4 年之前
父節點
當前提交
e736b6227e
共有 14 個文件被更改,包括 2102 次插入2121 次删除
  1. 二進制
      assets/img/levels/circleOne.png
  2. 二進制
      assets/img/levels/squareOne.png
  3. 二進制
      assets/img/levels/squareTwo.png
  4. 90 91
      index.html
  5. 64 63
      js/circleOne.js
  6. 1027 1027
      js/gameMechanics.js
  7. 50 51
      js/globals.js
  8. 272 272
      js/map.js
  9. 421 421
      js/menu.js
  10. 37 39
      js/preMenu.js
  11. 77 88
      js/squareOne.js
  12. 41 45
      js/squareTwo.js
  13. 16 16
      php/README.md
  14. 7 8
      php/save.php

二進制
assets/img/levels/circleOne.png


二進制
assets/img/levels/squareOne.png


二進制
assets/img/levels/squareTwo.png


+ 90 - 91
index.html

@@ -8,107 +8,106 @@ www.usp.br/line
 
 
 <head>
 <head>
 
 
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="description" content="Educational game for teaching fractions" />
+  <meta name="description" content="Educational game for teaching fractions" />
- <meta name="keywords" content="ifractions, fraction, game, private data" />
+  <meta name="keywords" content="ifractions, fraction, game, private data" />
- <link rel="shortcut icon" href="assets/img/scene/flag.png">
+  <link rel="shortcut icon" href="assets/img/scene/flag.png">
- <title> iFractions by LInE-IME-USP</title>
+  <title> iFractions by LInE-IME-USP</title>
- <link rel="stylesheet" href="css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
-
+
- <style>
+  <style>
-  #iFractions-canvas {
+    #iFractions-canvas {
-   padding: 0 auto 0 auto;
+      padding: 0 auto 0 auto;
-   margin-left: auto;
+      margin-left: auto;
-   margin-right: auto;
+      margin-right: auto;
-   display: block;
+      display: block;
-  }
+    }
-
+    #textbox {
-  #textbox {
+      position: absolute;
-   position: absolute;
+      margin-left: auto;
-   margin-left: auto;
+      margin-right: auto;
-   margin-right: auto;
+      top: 300px;
-   top: 300px;
+      left: 0;
-   left: 0;
+      right: 0;
-   right: 0;
+      text-align: center;
-   text-align: center;
+      visibility: hidden;
-   visibility: hidden;
+    }
-  }
+    input[type=text] {
-  input[type=text] {
+      background-color: #fff;
-   background-color: #fff;
+      padding: 15px 40px;
-   padding: 15px 40px;
+      box-sizing: border-box;
-   box-sizing: border-box;
+      border: 3px solid #ccc;
-   border: 3px solid #ccc;
+      font-size: 44px;
-   font-size: 44px;
+      font-family: Arial;
-   font-family: Arial;
+      color: #000;
-   color: #000;
+      text-align: center;
-   text-align: center;
+    }
-  }
+    input:focus {
-  input:focus {
+      outline: 3px solid #85accc;
-   outline: 3px solid #85accc;
+    }
-  }
+  </style>
- </style>
 
 
 </head>
 </head>
 
 
 <body>
 <body>
 
 
- <div class="container">
+  <div class="container">
 
 
-  <div class="clearfix"></div>
+    <div class="clearfix"></div>
 
 
-  <div class="panel panel-primary">
+    <div class="panel panel-primary">
-  <div class="panel-heading">iFractions game :: by LInE</div>
+      <div class="panel-heading">iFractions game :: by LInE</div>
-   <div class="panel-body">
+      <div class="panel-body">
-    <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
+        <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
-    <div id="textbox" onsubmit="return false"> <!-- Textbox to get player name -->
+        <div id="textbox" onsubmit="return false"> <!-- Textbox to get player name -->
-     <input type="text" id="textbox-content" value="" size="13" maxlength="36">
+          <input type="text" id="textbox-content" value="" size="13" maxlength="36">
+        </div>
+      </div>
     </div>
     </div>
-   </div>
+
+    <div id="display-fps"><!-- Display fps in debugmode --></div>
+
   </div>
   </div>
 
 
-  <div id="display-fps"><!-- Display fps in debugmode --></div>
+  <!-- Load all js files -->
-
+  <script src="js/preMenu.js"></script>
- </div>
+  <script src="js/menu.js"></script>
-
+  <script src="js/map.js"></script>
- <!-- Load all js files -->
+  <script src="js/circleOne.js"></script>
- <script src="js/preMenu.js"></script>
+  <script src="js/squareOne.js"></script>
- <script src="js/menu.js"></script>
+  <script src="js/squareTwo.js"></script>
- <script src="js/map.js"></script>
+  <script src="js/gameMechanics.js"></script>
- <script src="js/circleOne.js"></script>
+  <script src="js/globals.js"></script>
- <script src="js/squareOne.js"></script>
+  <script>
- <script src="js/squareTwo.js"></script>
+    const displayFps = document.getElementById("display-fps");
- <script src="js/gameMechanics.js"></script>
+
- <script src="js/globals.js"></script>
+    const canvas = document.getElementById("iFractions-canvas");
- <script>  
+    canvas.width = defaultWidth;
-  const displayFps = document.getElementById("display-fps");
+    canvas.height = defaultHeight;
-
+
-  const canvas = document.getElementById("iFractions-canvas");
+    const context = canvas.getContext("2d");
-  canvas.width = defaultWidth; 
+
-  canvas.height = defaultHeight;
+    info.start();
-
+
-  const context = canvas.getContext("2d");
+    // CREATING GAME STATES
-  
+    game.state.add('boot', bootState);
-  info.start();
+    game.state.add('lang', langState);
-
+    game.state.add('loadLang', loadLangState);
-  // CREATING GAME STATES
+    game.state.add('name', nameState);
-  game.state.add('boot', bootState);
+
-  game.state.add('lang', langState);
+    game.state.add('menu', menuState);
-  game.state.add('loadLang', loadLangState);
+    game.state.add('customMenu', customMenuState);
-  game.state.add('name', nameState);
+
-
+    game.state.add('map', mapState);
-  game.state.add('menu', menuState);
+    game.state.add('end', endState);
-  game.state.add('customMenu', customMenuState);
+
-
+    game.state.add('squareOne', squareOne);
-  game.state.add('map', mapState);
+    game.state.add('circleOne', circleOne);
-  game.state.add('end', endState);
+    game.state.add('squareTwo', squareTwo);
-
+
-  game.state.add('squareOne', squareOne);
+    // CALLING FIRST GAME STATE
-  game.state.add('circleOne', circleOne);
+    game.state.start('boot');
-  game.state.add('squareTwo', squareTwo);
+  </script>
-
-  // CALLING FIRST GAME STATE
-  game.state.start('boot');
- </script>
 
 
 </body>
 </body>
 
 

+ 64 - 63
js/circleOne.js

@@ -77,7 +77,7 @@ const circleOne = {
     for (let i = 0; i <= 5; i++) {
     for (let i = 0; i <= 5; i++) {
       game.add.image(66 + i * distanceBetweenPoints, 526, 'place_off', 0.3).anchor(0.5, 0.5);
       game.add.image(66 + i * distanceBetweenPoints, 526, 'place_off', 0.3).anchor(0.5, 0.5);
       game.add.text(66 + i * distanceBetweenPoints, 560, i, textStyles.h2_blue);
       game.add.text(66 + i * distanceBetweenPoints, 560, i, textStyles.h2_blue);
-      }
+    }
 
 
     this.trace = game.add.graphic.rect(startX - 1, 526, 1, 1, undefined, 1);
     this.trace = game.add.graphic.rect(startX - 1, 526, 1, 1, undefined, 1);
     this.trace.alpha = 0;
     this.trace.alpha = 0;
@@ -87,7 +87,7 @@ const circleOne = {
       true, true, true, // Left buttons
       true, true, true, // Left buttons
       true, false,      // Right buttons
       true, false,      // Right buttons
       'customMenu', this.func_viewHelp
       'customMenu', this.func_viewHelp
-      );
+    );
 
 
     // CIRCLES AND FRACTIONS
     // CIRCLES AND FRACTIONS
     this.circles = {
     this.circles = {
@@ -102,7 +102,7 @@ const circleOne = {
       lineColor: [], // Circle line colors (also used for tracing on floor)
       lineColor: [], // Circle line colors (also used for tracing on floor)
 
 
       direc: [],     // Can be : 1 or -1 : will be multiplied to values to easily change object direction when needed
       direc: [],     // Can be : 1 or -1 : will be multiplied to values to easily change object direction when needed
-      };
+    };
 
 
     this.balloonPlace = defaultWidth / 2; // Balloon place
     this.balloonPlace = defaultWidth / 2; // Balloon place
 
 
@@ -137,7 +137,7 @@ const circleOne = {
           if (i < this.numberOfPlusFractions) direction = 'Right';
           if (i < this.numberOfPlusFractions) direction = 'Right';
           else direction = 'Left';
           else direction = 'Left';
           break;
           break;
-        }
+      }
       this.circles.direction[i] = direction;
       this.circles.direction[i] = direction;
 
 
       // Set each circle color
       // Set each circle color
@@ -147,11 +147,11 @@ const circleOne = {
         lineColor = colors.darkBlue;
         lineColor = colors.darkBlue;
         this.circles.direc[i] = 1;
         this.circles.direc[i] = 1;
         anticlockwise = true;
         anticlockwise = true;
-        } else {
+      } else {
         lineColor = colors.red;
         lineColor = colors.red;
         this.circles.direc[i] = -1;
         this.circles.direc[i] = -1;
         anticlockwise = false;
         anticlockwise = false;
-        }
+      }
       this.circles.lineColor[i] = lineColor;
       this.circles.lineColor[i] = lineColor;
 
 
       // Draw circles 
       // Draw circles 
@@ -168,9 +168,8 @@ const circleOne = {
         if (fractionLabel) {
         if (fractionLabel) {
           label[0] = game.add.text(x, 490 - i * this.circles.diameter, divisor, textStyles.h2_blue);
           label[0] = game.add.text(x, 490 - i * this.circles.diameter, divisor, textStyles.h2_blue);
           this.circles.label.push(label);
           this.circles.label.push(label);
-          }
         }
         }
-      else {
+      } else {
         let degree = 360 / divisor;
         let degree = 360 / divisor;
 
 
         if (direction == 'Right') degree = 360 - degree; // Anticlockwise equivalent
         if (direction == 'Right') degree = 360 - degree; // Anticlockwise equivalent
@@ -186,8 +185,8 @@ const circleOne = {
           label[1] = game.add.text(x, 488 - i * this.circles.diameter, '1', textStyles.h4_blue);
           label[1] = game.add.text(x, 488 - i * this.circles.diameter, '1', textStyles.h4_blue);
           label[2] = game.add.text(x, 488 - i * this.circles.diameter, '___', textStyles.h4_blue);
           label[2] = game.add.text(x, 488 - i * this.circles.diameter, '___', textStyles.h4_blue);
           this.circles.label.push(label);
           this.circles.label.push(label);
-          }
         }
         }
+      }
 
 
       circle.rotate = 90;
       circle.rotate = 90;
 
 
@@ -195,12 +194,12 @@ const circleOne = {
       if (levelType == 'B') {
       if (levelType == 'B') {
         circle.alpha = 0.5;
         circle.alpha = 0.5;
         circle.index = i;
         circle.index = i;
-        }
+      }
       this.circles.distance.push(Math.floor(distanceBetweenPoints / divisor));
       this.circles.distance.push(Math.floor(distanceBetweenPoints / divisor));
       this.circles.all.push(circle);
       this.circles.all.push(circle);
 
 
       this.correctX += Math.floor(distanceBetweenPoints / divisor) * this.circles.direc[i];
       this.correctX += Math.floor(distanceBetweenPoints / divisor) * this.circles.direc[i];
-      }
+    }
 
 
     // Calculate next circle
     // Calculate next circle
     this.nextX = startX + this.circles.distance[0] * this.circles.direc[0];
     this.nextX = startX + this.circles.distance[0] * this.circles.direc[0];
@@ -211,7 +210,7 @@ const circleOne = {
     // If top circle position is out of bounds (when on the ground) or game doesnt have base difficulty, restart
     // If top circle position is out of bounds (when on the ground) or game doesnt have base difficulty, restart
     if (this.correctX < 66 || this.correctX > 66 + 3 * 260 || !hasBaseDifficulty) {
     if (this.correctX < 66 || this.correctX > 66 + 3 * 260 || !hasBaseDifficulty) {
       this.restart = true;
       this.restart = true;
-      }
+    }
 
 
     // If game is type B, selectiong a random balloon place
     // If game is type B, selectiong a random balloon place
     if (levelType == 'B') {
     if (levelType == 'B') {
@@ -220,13 +219,13 @@ const circleOne = {
 
 
       for (let i = 0; i < this.endIndex; i++) {
       for (let i = 0; i < this.endIndex; i++) {
         this.balloonPlace += this.circles.distance[i] * this.circles.direc[i];
         this.balloonPlace += this.circles.distance[i] * this.circles.direc[i];
-        }
+      }
 
 
       // If balloon position is out of bounds, restart
       // If balloon position is out of bounds, restart
       if (this.balloonPlace < 66 || this.balloonPlace > 66 + 5 * distanceBetweenPoints) {
       if (this.balloonPlace < 66 || this.balloonPlace > 66 + 5 * distanceBetweenPoints) {
         this.restart = true;
         this.restart = true;
-        }
       }
       }
+    }
 
 
     // KID 
     // KID 
     this.availableAnimations['Right'] = ['Right', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 4];
     this.availableAnimations['Right'] = ['Right', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 4];
@@ -237,9 +236,9 @@ const circleOne = {
     if (sublevelType == 'Minus') {
     if (sublevelType == 'Minus') {
       this.kid.animation = this.availableAnimations['Left'];
       this.kid.animation = this.availableAnimations['Left'];
       this.kid.curFrame = 23;
       this.kid.curFrame = 23;
-      } else {
+    } else {
       this.kid.animation = this.availableAnimations['Right'];
       this.kid.animation = this.availableAnimations['Right'];
-      }
+    }
 
 
     // BALLOON
     // BALLOON
     this.balloon = game.add.image(this.balloonPlace, 350, 'balloon', 1, 0.5);
     this.balloon = game.add.image(this.balloonPlace, 350, 'balloon', 1, 0.5);
@@ -258,8 +257,8 @@ const circleOne = {
       game.timer.start(); // Set a timer for the current level (used in postScore())
       game.timer.start(); // Set a timer for the current level (used in postScore())
       game.event.add('click', this.func_onInputDown);
       game.event.add('click', this.func_onInputDown);
       game.event.add('mousemove', this.func_onInputOver);
       game.event.add('mousemove', this.func_onInputOver);
-      }
+    }
-    },
+  },
 
 
   /**
   /**
    * Game loop
    * Game loop
@@ -279,7 +278,7 @@ const circleOne = {
         // Move circles
         // Move circles
         for (let i in self.circles.all) {
         for (let i in self.circles.all) {
           self.circles.all[i].x += 2 * DIREC;
           self.circles.all[i].x += 2 * DIREC;
-          }
+        }
 
 
         // Manage line on the floor
         // Manage line on the floor
         self.trace.width += 2 * DIREC;
         self.trace.width += 2 * DIREC;
@@ -293,7 +292,7 @@ const circleOne = {
         let lowerCircles;
         let lowerCircles;
         if (self.circles.direction[cur] == 'Right') {
         if (self.circles.direction[cur] == 'Right') {
           lowerCircles = self.circles.all[cur].x >= self.nextX;
           lowerCircles = self.circles.all[cur].x >= self.nextX;
-          }
+        }
         else if (self.circles.direction[cur] == 'Left') {
         else if (self.circles.direction[cur] == 'Left') {
 
 
           lowerCircles = self.circles.all[cur].x <= self.nextX;
           lowerCircles = self.circles.all[cur].x <= self.nextX;
@@ -301,8 +300,8 @@ const circleOne = {
           // If just changed from 'right' to 'left' inform to change direction of kid animation
           // If just changed from 'right' to 'left' inform to change direction of kid animation
           if (self.changeAnimationFrames == undefined && cur > 0 && self.circles.direction[cur - 1] == 'Right') {
           if (self.changeAnimationFrames == undefined && cur > 0 && self.circles.direction[cur - 1] == 'Right') {
             self.changeAnimationFrames = true;
             self.changeAnimationFrames = true;
-            }
           }
           }
+        }
 
 
         // Change direction of kid animation
         // Change direction of kid animation
         if (self.changeAnimationFrames) {
         if (self.changeAnimationFrames) {
@@ -314,13 +313,13 @@ const circleOne = {
           self.kid.curFrame = 23;
           self.kid.curFrame = 23;
 
 
           game.animation.play(self.kid.animation[0]);
           game.animation.play(self.kid.animation[0]);
-          }
+        }
 
 
         if (lowerCircles) {
         if (lowerCircles) {
           self.circles.all[cur].alpha = 0; // Cicle disappear
           self.circles.all[cur].alpha = 0; // Cicle disappear
           self.circles.all.forEach(cur => {
           self.circles.all.forEach(cur => {
             cur.y += self.circles.diameter; // Lower circles             
             cur.y += self.circles.diameter; // Lower circles             
-            });
+          });
           self.kid.y += self.circles.diameter; // Lower kid
           self.kid.y += self.circles.diameter; // Lower kid
 
 
           self.circles.cur++; // Update current circle
           self.circles.cur++; // Update current circle
@@ -329,15 +328,15 @@ const circleOne = {
           DIREC = self.circles.direc[cur];
           DIREC = self.circles.direc[cur];
 
 
           self.nextX += self.circles.distance[cur] * DIREC; // Update next position
           self.nextX += self.circles.distance[cur] * DIREC; // Update next position
-          }
+        }
 
 
         // When finish all circles (final position)
         // When finish all circles (final position)
         if (cur == self.circles.all.length || self.circles.all[cur].alpha == 0) {
         if (cur == self.circles.all.length || self.circles.all[cur].alpha == 0) {
           self.animate = false;
           self.animate = false;
           self.checkAnswer = true;
           self.checkAnswer = true;
-          }
         }
         }
       }
       }
+    }
 
 
     // Check if kid is inside the basket
     // Check if kid is inside the basket
     if (self.checkAnswer) {
     if (self.checkAnswer) {
@@ -352,11 +351,11 @@ const circleOne = {
         game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5);
         game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5);
         completedLevels++;
         completedLevels++;
         if (debugMode) console.log('completedLevels = ' + completedLevels);
         if (debugMode) console.log('completedLevels = ' + completedLevels);
-        } else {
+      } else {
         self.result = false; // Answer is incorrect
         self.result = false; // Answer is incorrect
         if (audioStatus) game.audio.errorSound.play();
         if (audioStatus) game.audio.errorSound.play();
         game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
         game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
-        }
+      }
 
 
       self.postScore();
       self.postScore();
 
 
@@ -364,7 +363,7 @@ const circleOne = {
       self.checkAnswer = false;
       self.checkAnswer = false;
 
 
       self.count = 0;
       self.count = 0;
-      }
+    }
 
 
     // Balloon flying animation
     // Balloon flying animation
     if (self.animateEnding) {
     if (self.animateEnding) {
@@ -378,11 +377,11 @@ const circleOne = {
         else mapMove = false;
         else mapMove = false;
 
 
         game.state.start('map');
         game.state.start('map');
-        }
       }
       }
+    }
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
   /* EVENT HANDLER */
   /* EVENT HANDLER */
@@ -402,20 +401,20 @@ const circleOne = {
 
 
       const valid = y > 60 && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
       const valid = y > 60 && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
       if (valid) self.func_clicked(x);
       if (valid) self.func_clicked(x);
-      }
+    }
 
 
     // LEVEL B : click circle
     // LEVEL B : click circle
     if (levelType == 'B') {
     if (levelType == 'B') {
       self.circles.all.forEach(cur => {
       self.circles.all.forEach(cur => {
         const valid = game.math.distanceToPointer(x, cur.xWithAnchor, y, cur.yWithAnchor) <= (cur.diameter / 2) * cur.scale;
         const valid = game.math.distanceToPointer(x, cur.xWithAnchor, y, cur.yWithAnchor) <= (cur.diameter / 2) * cur.scale;
         if (valid) self.func_clicked(cur);
         if (valid) self.func_clicked(cur);
-        });
+      });
-      }
+    }
 
 
     navigationIcons.func_onInputDown(x, y);
     navigationIcons.func_onInputDown(x, y);
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
   /**
   /**
    * Called by mouse move event
    * Called by mouse move event
@@ -432,10 +431,10 @@ const circleOne = {
       if (game.math.distanceToPointer(x, self.balloon.x, y, self.balloon.y) > 8) {
       if (game.math.distanceToPointer(x, self.balloon.x, y, self.balloon.y) > 8) {
         self.balloon.x = x;
         self.balloon.x = x;
         self.basket.x = x;
         self.basket.x = x;
-        }
+      }
 
 
       document.body.style.cursor = 'auto';
       document.body.style.cursor = 'auto';
-      }
+    }
 
 
     // LEVEL B : hover circle
     // LEVEL B : hover circle
     if (levelType == 'B' && !self.hasClicked) {
     if (levelType == 'B' && !self.hasClicked) {
@@ -444,15 +443,15 @@ const circleOne = {
         if (valid) {
         if (valid) {
           self.func_overCircle(cur);
           self.func_overCircle(cur);
           flag = true;
           flag = true;
-          }
+        }
-        });
+      });
       if (!flag) self.func_outCircle();
       if (!flag) self.func_outCircle();
-      }
+    }
 
 
     navigationIcons.func_onInputOver(x, y);
     navigationIcons.func_onInputOver(x, y);
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
   /* CALLED BY EVENT HANDLER */
   /* CALLED BY EVENT HANDLER */
 
 
@@ -468,9 +467,9 @@ const circleOne = {
       document.body.style.cursor = 'pointer';
       document.body.style.cursor = 'pointer';
       for (let i in self.circles.all) {
       for (let i in self.circles.all) {
         self.circles.all[i].alpha = (i <= cur.index) ? 1 : 0.5;
         self.circles.all[i].alpha = (i <= cur.index) ? 1 : 0.5;
-        }
       }
       }
-    },
+    }
+  },
 
 
   /**
   /**
    * (in levelType 'B')
    * (in levelType 'B')
@@ -482,9 +481,9 @@ const circleOne = {
       document.body.style.cursor = 'auto';
       document.body.style.cursor = 'auto';
       self.circles.all.forEach(cur => {
       self.circles.all.forEach(cur => {
         cur.alpha = 0.5;
         cur.alpha = 0.5;
-        });
+      });
-      }
+    }
-    },
+  },
 
 
   /**
   /**
    * (in levelType 'B')
    * (in levelType 'B')
@@ -501,7 +500,7 @@ const circleOne = {
         self.balloon.x = cur;
         self.balloon.x = cur;
         self.basket.x = cur;
         self.basket.x = cur;
         // On levelType B
         // On levelType B
-        }
+      }
       else if (levelType == 'B') {
       else if (levelType == 'B') {
 
 
         document.body.style.cursor = 'auto';
         document.body.style.cursor = 'auto';
@@ -510,12 +509,12 @@ const circleOne = {
           if (i <= cur.index) {
           if (i <= cur.index) {
             self.circles.all[i].alpha = 1; // Keep selected circle
             self.circles.all[i].alpha = 1; // Keep selected circle
             self.fractionIndex = cur.index;
             self.fractionIndex = cur.index;
-            } else {
+          } else {
             self.circles.all[i].alpha = 0;   // Hide unselected circle
             self.circles.all[i].alpha = 0;   // Hide unselected circle
             self.kid.y += self.circles.diameter;  // Lower kid to selected circle
             self.kid.y += self.circles.diameter;  // Lower kid to selected circle
-            }
           }
           }
         }
         }
+      }
 
 
       if (audioStatus) game.audio.beepSound.play();
       if (audioStatus) game.audio.beepSound.play();
 
 
@@ -523,8 +522,8 @@ const circleOne = {
       if (fractionLabel) {
       if (fractionLabel) {
         self.circles.label.forEach(cur => {
         self.circles.label.forEach(cur => {
           cur.forEach(cur => { cur.alpha = 0; });
           cur.forEach(cur => { cur.alpha = 0; });
-          });
+        });
-        }
+      }
 
 
       // Hide solution pointer
       // Hide solution pointer
       if (self.help != undefined) self.help.alpha = 0;
       if (self.help != undefined) self.help.alpha = 0;
@@ -536,8 +535,8 @@ const circleOne = {
       self.animate = true;
       self.animate = true;
 
 
       game.animation.play(this.kid.animation[0]);
       game.animation.play(this.kid.animation[0]);
-      }
+    }
-    },
+  },
 
 
   /* GAME FUNCTIONS */
   /* GAME FUNCTIONS */
 
 
@@ -555,7 +554,7 @@ const circleOne = {
     // Consider it comming from both sides
     // Consider it comming from both sides
     if (Math.abs(xA - xB) > 14) return false;
     if (Math.abs(xA - xB) > 14) return false;
     else return true;
     else return true;
-    },
+  },
 
 
   /**
   /**
    * Display correct answer
    * Display correct answer
@@ -567,22 +566,24 @@ const circleOne = {
         self.help.x = self.correctX;
         self.help.x = self.correctX;
         self.help.y = 490;
         self.help.y = 490;
         // On levelType B
         // On levelType B
-        }
+      } else {
-      else {
         self.help.x = self.circles.all[self.endIndex - 1].x;
         self.help.x = self.circles.all[self.endIndex - 1].x;
         self.help.y = self.circles.all[self.endIndex - 1].y - self.circles.diameter / 2;
         self.help.y = self.circles.all[self.endIndex - 1].y - self.circles.diameter / 2;
-        }
-      self.help.alpha = 0.7;
       }
       }
-    },
+      self.help.alpha = 0.7;
+    }
+  },
 
 
   /* METADATA FOR GAME */
   /* METADATA FOR GAME */
 
 
   /**
   /**
-   * Saves players data after level
+   * Saves players data after level ends - to be sent to database
+   * 
+   * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
+   * @see /php/squareOne.js
    */
    */
   postScore: function () {
   postScore: function () {
-    // Saves player data to send to the database
+    // Creates string that is going to be sent to db
     const data = '&line_game=' + gameShape
     const data = '&line_game=' + gameShape
       + '&line_mode=' + levelType
       + '&line_mode=' + levelType
       + '&line_oper=' + sublevelType
       + '&line_oper=' + sublevelType
@@ -595,6 +596,6 @@ const circleOne = {
       + ', valCircles: ' + self.divisorsList
       + ', valCircles: ' + self.divisorsList
       + ' balloonX: ' + self.basket.x
       + ' balloonX: ' + self.basket.x
       + ', selIndex: ' + self.fractionIndex;
       + ', selIndex: ' + self.fractionIndex;
-    postScore(data);
+    sendToDB(data);
-    }
+  }
-  };
+};

文件差異過大導致無法顯示
+ 1027 - 1027
js/gameMechanics.js


+ 50 - 51
js/globals.js

@@ -7,12 +7,12 @@ LInE - Free Education, Private Data
 ........One..........Two.............One............ }
 ........One..........Two.............One............ }
 ......./...\..........|............./...\........... 
 ......./...\..........|............./...\........... 
 ......A.....B.........C............A.....B.......... } level (levelType)
 ......A.....B.........C............A.....B.......... } level (levelType)
-.(floor)..(stack)..(equal).....(floor).(circle)..... } 
+.(floor)..(stack)..(equal).....(floor).(stack)...... } 
 .......\./............|..............\./............ 
 .......\./............|..............\./............ 
 ........|.............|...............|............. 
 ........|.............|...............|............. 
-......./.\........../.|.\.........../.|.\........... 
+......./.\.........../.\............/.|.\........... 
-...Plus...Minus....A..B..C.....Plus.Minus.Mixed..... } sublevel (sublevelType)
+...Plus...Minus.....B...C.......Plus.Minus.Mixed.... } sublevel (sublevelType)
-.......\./..........\.|./...........\.|./........... 
+.......\./...........\./............\.|./........... 
 ........|.............|...............|............. 
 ........|.............|...............|............. 
 ......1,2,3.......1,2,3,4,5.......1,2,3,4,5......... } difficulty (gameDifficulty)
 ......1,2,3.......1,2,3,4,5.......1,2,3,4,5......... } difficulty (gameDifficulty)
 .................................................... 
 .................................................... 
@@ -62,7 +62,7 @@ const info = {
     levelTypeUrl: ['level0', 'level1'],
     levelTypeUrl: ['level0', 'level1'],
     sublevelType: ['Plus', 'Minus'],
     sublevelType: ['Plus', 'Minus'],
     gameDifficulty: 3
     gameDifficulty: 3
-    },
+  },
 
 
   circleOne: {
   circleOne: {
     gameShape: 'circle',
     gameShape: 'circle',
@@ -72,7 +72,7 @@ const info = {
     levelTypeUrl: ['level2', 'level3'],
     levelTypeUrl: ['level2', 'level3'],
     sublevelType: ['Plus', 'Minus', 'Mixed'],
     sublevelType: ['Plus', 'Minus', 'Mixed'],
     gameDifficulty: 5
     gameDifficulty: 5
-    },
+  },
 
 
   squareTwo: {
   squareTwo: {
     gameShape: 'square',
     gameShape: 'square',
@@ -82,7 +82,7 @@ const info = {
     levelTypeUrl: [],
     levelTypeUrl: [],
     sublevelType: [/*'A',*/ 'B', 'C'],
     sublevelType: [/*'A',*/ 'B', 'C'],
     gameDifficulty: 5
     gameDifficulty: 5
-    },
+  },
 
 
   gameShape: [],
   gameShape: [],
   gameType: [],
   gameType: [],
@@ -101,19 +101,19 @@ const info = {
       info.squareOne.gameShape,
       info.squareOne.gameShape,
       info.circleOne.gameShape,
       info.circleOne.gameShape,
       info.squareTwo.gameShape
       info.squareTwo.gameShape
-      ];
+    ];
 
 
     info.gameType = [
     info.gameType = [
       info.squareOne.gameType,
       info.squareOne.gameType,
       info.circleOne.gameType,
       info.circleOne.gameType,
       info.squareTwo.gameType
       info.squareTwo.gameType
-      ];
+    ];
 
 
     info.gameTypeUrl = [
     info.gameTypeUrl = [
       info.squareOne.gameTypeUrl,
       info.squareOne.gameTypeUrl,
       info.circleOne.gameTypeUrl,
       info.circleOne.gameTypeUrl,
       info.squareTwo.gameTypeUrl
       info.squareTwo.gameTypeUrl
-      ];
+    ];
 
 
     info.levelType = info.squareOne.levelType.concat(info.circleOne.levelType, info.squareTwo.levelType);
     info.levelType = info.squareOne.levelType.concat(info.circleOne.levelType, info.squareTwo.levelType);
 
 
@@ -125,9 +125,9 @@ const info = {
       info.squareOne.gameDifficulty,
       info.squareOne.gameDifficulty,
       info.circleOne.gameDifficulty,
       info.circleOne.gameDifficulty,
       info.squareTwo.gameDifficulty
       info.squareTwo.gameDifficulty
-      ];
+    ];
-    }
+  }
-  };
+};
 
 
 // Colors
 // Colors
 const colors = {
 const colors = {
@@ -155,7 +155,7 @@ const colors = {
   gray: '#708090',
   gray: '#708090',
   black: '#000',
   black: '#000',
   yellow: '#ffef1f'
   yellow: '#ffef1f'
-  };
+};
 
 
 // Text styles
 // Text styles
 const textStyles = {
 const textStyles = {
@@ -175,7 +175,7 @@ const textStyles = {
   h2_blue: { font: '26px Arial,sans-serif', fill: colors.darkBlue, align: 'center' }, // Fractions
   h2_blue: { font: '26px Arial,sans-serif', fill: colors.darkBlue, align: 'center' }, // Fractions
   h4_blue: { font: '20px Arial,sans-serif', fill: colors.darkBlue, align: 'center' }, // Fractions
   h4_blue: { font: '20px Arial,sans-serif', fill: colors.darkBlue, align: 'center' }, // Fractions
   p_blue: { font: '14px Arial,sans-serif', fill: colors.darkBlue, align: 'center' } // Fractions
   p_blue: { font: '14px Arial,sans-serif', fill: colors.darkBlue, align: 'center' } // Fractions
-  };
+};
 
 
 // List of media URL
 // List of media URL
 const url = {
 const url = {
@@ -218,7 +218,7 @@ const url = {
       ['arrow_left', medSrc + 'non_interac_icon/left_arrow.png'],
       ['arrow_left', medSrc + 'non_interac_icon/left_arrow.png'],
       ['arrow_right', medSrc + 'non_interac_icon/right_arrow.png'],
       ['arrow_right', medSrc + 'non_interac_icon/right_arrow.png'],
       ['equal', medSrc + 'non_interac_icon/equal.png']
       ['equal', medSrc + 'non_interac_icon/equal.png']
-      ],
+    ],
     sprite: [
     sprite: [
       // Game Sprites
       // Game Sprites
       ['kid_walk', medSrc + 'character/kid/walk.png', 26],
       ['kid_walk', medSrc + 'character/kid/walk.png', 26],
@@ -226,14 +226,14 @@ const url = {
       ['audio', medSrc + 'navig_icon/audio.png', 2],
       ['audio', medSrc + 'navig_icon/audio.png', 2],
       // Interactive icons
       // Interactive icons
       ['select', medSrc + 'interac_icon/selectionBox.png', 2]
       ['select', medSrc + 'interac_icon/selectionBox.png', 2]
-      ],
+    ],
     audio: [
     audio: [
       // Sound effects
       // Sound effects
       ['beepSound', ['assets/audio/beep.ogg', 'assets/audio/beep.mp3']],
       ['beepSound', ['assets/audio/beep.ogg', 'assets/audio/beep.mp3']],
       ['okSound', ['assets/audio/ok.ogg', 'assets/audio/ok.mp3']],
       ['okSound', ['assets/audio/ok.ogg', 'assets/audio/ok.mp3']],
       ['errorSound', ['assets/audio/error.ogg', 'assets/audio/error.mp3']]
       ['errorSound', ['assets/audio/error.ogg', 'assets/audio/error.mp3']]
-      ]
+    ]
-    },
+  },
   menu: {
   menu: {
     image: [
     image: [
       // Game
       // Game
@@ -252,33 +252,33 @@ const url = {
       ['sublevel_mixed', medSrc + 'levels/sublevel_mixed.png'], // Circle I : mixed
       ['sublevel_mixed', medSrc + 'levels/sublevel_mixed.png'], // Circle I : mixed
       ['sublevel_top', medSrc + 'levels/sublevel_top.png'], // Square II : top
       ['sublevel_top', medSrc + 'levels/sublevel_top.png'], // Square II : top
       ['sublevel_bottom', medSrc + 'levels/sublevel_bottom.png']  // Square II : bottom
       ['sublevel_bottom', medSrc + 'levels/sublevel_bottom.png']  // Square II : bottom
-      ],
+    ],
     sprite: [],
     sprite: [],
     audio: []
     audio: []
-    },
+  },
   squareOne: {
   squareOne: {
     image: [
     image: [
       // Scene
       // Scene
       ['farm', medSrc + 'scene/farm.png'],
       ['farm', medSrc + 'scene/farm.png'],
       ['garage', medSrc + 'scene/garage.png']
       ['garage', medSrc + 'scene/garage.png']
-      ],
+    ],
     sprite: [
     sprite: [
       // Game sprites
       // Game sprites
       ['tractor', medSrc + 'character/tractor/tractor.png', 15]
       ['tractor', medSrc + 'character/tractor/tractor.png', 15]
-      ],
+    ],
     audio: []
     audio: []
-    },
+  },
   squareTwo: {
   squareTwo: {
     image: [
     image: [
       // Scene
       // Scene
       ['house', medSrc + 'scene/house.png'],
       ['house', medSrc + 'scene/house.png'],
       ['school', medSrc + 'scene/school.png']
       ['school', medSrc + 'scene/school.png']
-      ],
+    ],
     sprite: [
     sprite: [
       // Game sprites
       // Game sprites
       ['kid_standing', medSrc + 'character/kid/lost.png', 6],
       ['kid_standing', medSrc + 'character/kid/lost.png', 6],
       ['kid_run', medSrc + 'character/kid/run.png', 12]
       ['kid_run', medSrc + 'character/kid/run.png', 12]
-      ],
+    ],
     audio: []
     audio: []
   },
   },
   circleOne: {
   circleOne: {
@@ -289,14 +289,14 @@ const url = {
       // Game images
       // Game images
       ['balloon', medSrc + 'character/balloon/airballoon_upper.png'],
       ['balloon', medSrc + 'character/balloon/airballoon_upper.png'],
       ['balloon_basket', medSrc + 'character/balloon/airballoon_base.png']
       ['balloon_basket', medSrc + 'character/balloon/airballoon_base.png']
-      ],
+    ],
     sprite: [
     sprite: [
       // Game sprites
       // Game sprites
       ['kid_run', medSrc + 'character/kid/run.png', 12]
       ['kid_run', medSrc + 'character/kid/run.png', 12]
-      ],
+    ],
     audio: []
     audio: []
-    },
+  },
-  };
+};
 
 
 // Navigation icons on the top of the screen
 // Navigation icons on the top of the screen
 const navigationIcons = {
 const navigationIcons = {
@@ -332,19 +332,19 @@ const navigationIcons = {
       const icon_back = game.add.image(left_x, 10, 'back');
       const icon_back = game.add.image(left_x, 10, 'back');
       this.iconsList.push(icon_back);
       this.iconsList.push(icon_back);
       left_x += 50; // Offsets value of x for next icon
       left_x += 50; // Offsets value of x for next icon
-      }
+    }
 
 
     if (leftIcon1) { // Return to main menu screen
     if (leftIcon1) { // Return to main menu screen
       const icon_list = game.add.image(left_x, 10, 'menu');
       const icon_list = game.add.image(left_x, 10, 'menu');
       this.iconsList.push(icon_list);
       this.iconsList.push(icon_list);
       left_x += 50; // Offsets value of x for next icon
       left_x += 50; // Offsets value of x for next icon
-      }
+    }
 
 
     if (leftIcon2) { // In some levels, shows solution to the game
     if (leftIcon2) { // In some levels, shows solution to the game
       const icon_help = game.add.image(left_x, 10, 'help');
       const icon_help = game.add.image(left_x, 10, 'help');
       this.iconsList.push(icon_help);
       this.iconsList.push(icon_help);
       left_x += 50; // Offsets value of x for next icon
       left_x += 50; // Offsets value of x for next icon
-      }
+    }
 
 
     // 'Icons' on the RIGHT side of the page
     // 'Icons' on the RIGHT side of the page
 
 
@@ -353,14 +353,14 @@ const navigationIcons = {
       audioStatus ? this.icon_audio.curFrame = 0 : this.icon_audio.curFrame = 1;
       audioStatus ? this.icon_audio.curFrame = 0 : this.icon_audio.curFrame = 1;
       this.iconsList.push(this.icon_audio);
       this.iconsList.push(this.icon_audio);
       right_x -= 50; // Offsets value of x for next icon
       right_x -= 50; // Offsets value of x for next icon
-      }
+    }
 
 
     if (rightIcon1) { // Return to select language screen
     if (rightIcon1) { // Return to select language screen
       icon_world = game.add.image(right_x, 10, 'language');
       icon_world = game.add.image(right_x, 10, 'language');
       this.iconsList.push(icon_world);
       this.iconsList.push(icon_world);
       right_x -= 50; // Offsets value of x for next icon
       right_x -= 50; // Offsets value of x for next icon
-      }
+    }
-    },
+  },
 
 
   /**
   /**
    * When back icon is clicked go this state
    * When back icon is clicked go this state
@@ -372,7 +372,7 @@ const navigationIcons = {
 
 
     game.event.clear(self);
     game.event.clear(self);
     game.state.start(state);
     game.state.start(state);
-    },
+  },
 
 
   /**
   /**
    * Called by mouse click event 
    * Called by mouse click event 
@@ -398,14 +398,14 @@ const navigationIcons = {
               audioStatus = true;
               audioStatus = true;
               if (audioStatus) game.audio.beepSound.play();
               if (audioStatus) game.audio.beepSound.play();
               navigationIcons.icon_audio.curFrame = 0;
               navigationIcons.icon_audio.curFrame = 0;
-              }
+            }
             game.render.all();
             game.render.all();
             break;
             break;
           default: console.log('Game error: error in navigation icon');
           default: console.log('Game error: error in navigation icon');
-          }
         }
         }
-      });
+      }
-    },
+    });
+  },
 
 
   /**
   /**
    * Called by mouse move event
    * Called by mouse move event
@@ -427,25 +427,24 @@ const navigationIcons = {
 
 
         else if (cur.name == 'language') navigationIcons.right_text.name = game.lang.menu_world;
         else if (cur.name == 'language') navigationIcons.right_text.name = game.lang.menu_world;
         else if (cur.name == 'audio') navigationIcons.right_text.name = game.lang.audio;
         else if (cur.name == 'audio') navigationIcons.right_text.name = game.lang.audio;
-        }
+      }
-      });
+    });
 
 
     if (!flag) {
     if (!flag) {
       navigationIcons.left_text.name = '';
       navigationIcons.left_text.name = '';
       navigationIcons.right_text.name = '';
       navigationIcons.right_text.name = '';
-      }
+    } else {
-    else {
       document.body.style.cursor = 'pointer';
       document.body.style.cursor = 'pointer';
-      }
     }
     }
-  };
+  }
+};
 
 
 /**
 /**
  * Sends game information to database
  * Sends game information to database
  *  
  *  
  * @param {string} extraData player information for the current game
  * @param {string} extraData player information for the current game
  */
  */
-const postScore = function (extraData) {
+const sendToDB = function (extraData) {
 
 
   // Create some variables we need to send to our PHP file
   // Create some variables we need to send to our PHP file
   // Attention: this names must be compactible to data table (MySQL server)
   // Attention: this names must be compactible to data table (MySQL server)
@@ -467,14 +466,14 @@ const postScore = function (extraData) {
     if (debugMode) console.log(hr);
     if (debugMode) console.log(hr);
     if (hr.readyState == 4 && hr.status == 200) {
     if (hr.readyState == 4 && hr.status == 200) {
       if (debugMode) console.log(hr.responseText);
       if (debugMode) console.log(hr.responseText);
-      }
     }
     }
+  }
 
 
   hr.send(data); // Actually execute the request
   hr.send(data); // Actually execute the request
 
 
   if (debugMode) {
   if (debugMode) {
     console.log('processing...');
     console.log('processing...');
     console.log(data);
     console.log(data);
-    }
+  }
 
 
-  };
+};

+ 272 - 272
js/map.js

@@ -5,201 +5,201 @@
  */
  */
 const mapState = {
 const mapState = {
 
 
-    /**
+  /**
-     * Main code
+   * Main code
-     */
+   */
-    create: function () {
+  create: function () {
-
+
-        // Background color
+    // Background color
-        game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
+    game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
-
+
-        // Map
+    // Map
-        game.add.image(0, 40, 'bgmap');
+    game.add.image(0, 40, 'bgmap');
-
+
-        // Calls function that loads navigation icons
+    // Calls function that loads navigation icons
-        navigationIcons.func_addIcons(true, true, false, // Left icons
+    navigationIcons.func_addIcons(true, true, false, // Left icons
-            false, false, // Right icons
+      false, false, // Right icons
-            'customMenu', false);
+      'customMenu', false);
-
+
-        // Progress bar
+    // Progress bar
-        const percentText = 4 * 25;
+    const percentText = 4 * 25;
-
+
-        if (completedLevels == 4) game.add.graphic.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5);
+    if (completedLevels == 4) game.add.graphic.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5);
-        else game.add.graphic.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.yellow, 0.9);
+    else game.add.graphic.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.yellow, 0.9);
-
+
-        game.add.graphic.rect(661, 11, 149, 34, colors.blue, 3, undefined, 1);
+    game.add.graphic.rect(661, 11, 149, 34, colors.blue, 3, undefined, 1);
-        game.add.text(820, 38, percentText + '%', textStyles.h2_blue, 'left');
+    game.add.text(820, 38, percentText + '%', textStyles.h2_blue, 'left');
-        game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue, 'right');
+    game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue, 'right');
-
+
-        // Map positions
+    // Map positions
-        this.points = {
+    this.points = {
-            x: [90, 204, 318, 432, 546, 660],
+      x: [90, 204, 318, 432, 546, 660],
-            y: [486, 422, 358, 294, 230, 166]
+      y: [486, 422, 358, 294, 230, 166]
-        };
+    };
-
+
-        if (gameTypeString == 'squareOne') {
+    if (gameTypeString == 'squareOne') {
-            // Garage
+      // Garage
-            game.add.image(this.points.x[0], this.points.y[0], 'garage', 0.4).anchor(0.5, 1);
+      game.add.image(this.points.x[0], this.points.y[0], 'garage', 0.4).anchor(0.5, 1);
-            // Farm
+      // Farm
-            game.add.image(this.points.x[5], this.points.y[5], 'farm', 0.6).anchor(0.1, 0.7);
+      game.add.image(this.points.x[5], this.points.y[5], 'farm', 0.6).anchor(0.1, 0.7);
-        } else {
+    } else {
-            // House
+      // House
-            game.add.image(this.points.x[0], this.points.y[0], 'house', 0.7).anchor(0.7, 0.8);
+      game.add.image(this.points.x[0], this.points.y[0], 'house', 0.7).anchor(0.7, 0.8);
-            // School
+      // School
-            game.add.image(this.points.x[5], this.points.y[5], 'school', 0.35).anchor(0.2, 0.7);
+      game.add.image(this.points.x[5], this.points.y[5], 'school', 0.35).anchor(0.2, 0.7);
-        }
+    }
-
+
-        // Rocks and bushes
+    // Rocks and bushes
-        const rocks = {
+    const rocks = {
-            x: [156, 275, 276, 441, 452, 590, 712],
+      x: [156, 275, 276, 441, 452, 590, 712],
-            y: [309, 543, 259, 156, 419, 136, 316],
+      y: [309, 543, 259, 156, 419, 136, 316],
-            type: [1, 1, 2, 1, 2, 2, 2]
+      type: [1, 1, 2, 1, 2, 2, 2]
-        };
+    };
-
+
-        for (let i in rocks.type) {
+    for (let i in rocks.type) {
-            if (rocks.type[i] == 1) {
+      if (rocks.type[i] == 1) {
-                game.add.image(rocks.x[i], rocks.y[i], 'rock', 0.32).anchor(0.5, 0.95);
+        game.add.image(rocks.x[i], rocks.y[i], 'rock', 0.32).anchor(0.5, 0.95);
-            } else {
+      } else {
-                game.add.image(rocks.x[i], rocks.y[i], 'bush', 0.4).anchor(0.5, 0.95);
+        game.add.image(rocks.x[i], rocks.y[i], 'bush', 0.4).anchor(0.5, 0.95);
-            }
+      }
+    }
+
+    // Trees
+    const trees = {
+      x: [105, 214, 354, 364, 570, 600, 740, 779],
+      y: [341, 219, 180, 520, 550, 392, 488, 286],
+      type: [2, 4, 3, 4, 1, 2, 4, 4]
+    };
+
+    for (let i in trees.type) {
+      game.add.image(trees.x[i], trees.y[i], 'tree' + trees.type[i], 0.6).anchor(0.5, 0.95);
+    }
+
+    // Map positions
+    for (let i = 1; i < this.points.x.length - 1; i++) {
+
+      const aux = (i < mapPosition || (mapMove && i == mapPosition)) ? 'place_on' : 'place_off';
+
+      // Map road positions
+      game.add.image(this.points.x[i], this.points.y[i], aux, 0.3).anchor(0.5, 0.5);
+
+      // Level signs
+      game.add.image(this.points.x[i] - 20, this.points.y[i] - 60, 'sign', 0.4).anchor(0.5, 1);
+      game.add.text(this.points.x[i] - 20, this.points.y[i] - 79, i, textStyles.h2_white);
+
+    }
+
+    // Game Character 
+    if (gameTypeString == 'squareOne') {
+
+      if (sublevelType == 'Plus') {
+        this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'tractor', 0, 0.5);
+        this.character.animation = ['green_tractor', [0, 1, 2, 3, 4], 3];
+      } else {
+        this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'tractor', 10, 0.5);
+        this.character.animation = ['red_tractor', [10, 11, 12, 13, 14], 3];
+      }
+
+      this.character.rotate = -30; // 25 anticlock
+
+    } else {
+
+      this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'kid_run', 0, 0.4);
+      this.character.animation = ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
+
+    }
+
+    this.character.anchor(0.5, 1);
+    game.animation.play(this.character.animation[0]);
+
+    this.count = 0;
+
+    const speed = 60;
+    const xA = this.points.x[mapPosition];
+    const yA = this.points.y[mapPosition];
+    const xB = this.points.x[mapPosition + 1];
+    const yB = this.points.y[mapPosition + 1];
+    self.speedX = (xB - xA) / speed;
+    self.speedY = (yA - yB) / speed;
+
+    game.event.add('click', this.func_onInputDown);
+    game.event.add('mousemove', this.func_onInputOver);
+
+  },
+
+  /**
+   * Game loop
+   */
+  update: function () {
+
+    let endUpdate = false;
+
+    self.count++;
+
+    if (self.count > 60) { // Wait 1 second before moving or staring a game
+
+      if (mapMove) { // Move character on screen for 1 second
+        self.character.x += self.speedX;
+        self.character.y -= self.speedY;
+        if (Math.ceil(self.character.x) >= self.points.x[mapPosition + 1]) { // Reached next map position
+          mapMove = false;
+          mapPosition++; // Set new next position
         }
         }
+      }
 
 
-        // Trees
+      if (!mapMove) {
-        const trees = {
+        endUpdate = true;
-            x: [105, 214, 354, 364, 570, 600, 740, 779],
+      }
-            y: [341, 219, 180, 520, 550, 392, 488, 286],
-            type: [2, 4, 3, 4, 1, 2, 4, 4]
-        };
 
 
-        for (let i in trees.type) {
-            game.add.image(trees.x[i], trees.y[i], 'tree' + trees.type[i], 0.6).anchor(0.5, 0.95);
-        }
-
-        // Map positions
-        for (let i = 1; i < this.points.x.length - 1; i++) {
 
 
-            const aux = (i < mapPosition || (mapMove && i == mapPosition)) ? 'place_on' : 'place_off';
+    }
 
 
-            // Map road positions
+    game.render.all();
-            game.add.image(this.points.x[i], this.points.y[i], aux, 0.3).anchor(0.5, 0.5);
 
 
-            // Level signs
+    if (endUpdate) {
-            game.add.image(this.points.x[i] - 20, this.points.y[i] - 60, 'sign', 0.4).anchor(0.5, 1);
+      game.animation.stop(self.character.animation[0]);
-            game.add.text(this.points.x[i] - 20, this.points.y[i] - 79, i, textStyles.h2_white);
+      self.func_loadGame();
+    }
 
 
-        }
+  },
 
 
-        // Game Character 
-        if (gameTypeString == 'squareOne') {
 
 
-            if (sublevelType == 'Plus') {
-                this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'tractor', 0, 0.5);
-                this.character.animation = ['green_tractor', [0, 1, 2, 3, 4], 3];
-            } else {
-                this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'tractor', 10, 0.5);
-                this.character.animation = ['red_tractor', [10, 11, 12, 13, 14], 3];
-            }
 
 
-            this.character.rotate = -30; // 25 anticlock
+  /* EVENT HANDLER */
-
-        } else {
-
-            this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'kid_run', 0, 0.4);
-            this.character.animation = ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
-
-        }
 
 
-        this.character.anchor(0.5, 1);
+  /**
-        game.animation.play(this.character.animation[0]);
+   * Called by mouse click event
+   * 
+   * @param {object} mouseEvent contains the mouse click coordinates
+   */
+  func_onInputDown: function (mouseEvent) {
+    navigationIcons.func_onInputDown(mouseEvent.offsetX, mouseEvent.offsetY);
+  },
 
 
-        this.count = 0;
+  /**
+   * Called by mouse move event
+   * 
+   * @param {object} mouseEvent contains the mouse move coordinates
+   */
+  func_onInputOver: function (mouseEvent) {
+    navigationIcons.func_onInputOver(mouseEvent.offsetX, mouseEvent.offsetY);
+  },
 
 
-        const speed = 60;
-        const xA = this.points.x[mapPosition];
-        const yA = this.points.y[mapPosition];
-        const xB = this.points.x[mapPosition + 1];
-        const yB = this.points.y[mapPosition + 1];
-        self.speedX = (xB - xA) / speed;
-        self.speedY = (yA - yB) / speed;
 
 
-        game.event.add('click', this.func_onInputDown);
-        game.event.add('mousemove', this.func_onInputOver);
 
 
-    },
+  /* GAME FUNCTIONS */
 
 
-    /**
+  /**
-     * Game loop
+   * Calls game state
-     */
+   */
-    update: function () {
+  func_loadGame: function () {
 
 
-        let endUpdate = false;
+    if (audioStatus) game.audio.beepSound.play();
-
-        self.count++;
-
-        if (self.count > 60) { // Wait 1 second before moving or staring a game
-
-            if (mapMove) { // Move character on screen for 1 second
-                self.character.x += self.speedX;
-                self.character.y -= self.speedY;
-                if (Math.ceil(self.character.x) >= self.points.x[mapPosition + 1]) { // Reached next map position
-                    mapMove = false;
-                    mapPosition++; // Set new next position
-                }
-            }
-
-            if (!mapMove) {
-                endUpdate = true;
-            }
-
-
-        }
-
-        game.render.all();
-
-        if (endUpdate) {
-            game.animation.stop(self.character.animation[0]);
-            self.func_loadGame();
-        }
 
 
-    },
+    if (mapPosition <= 4) game.state.start('' + gameTypeString + '');
+    else game.state.start('end');
 
 
-
+  },
-
-    /* EVENT HANDLER */
-
-    /**
-     * Called by mouse click event
-     * 
-     * @param {object} mouseEvent contains the mouse click coordinates
-     */
-    func_onInputDown: function (mouseEvent) {
-        navigationIcons.func_onInputDown(mouseEvent.offsetX, mouseEvent.offsetY);
-    },
-
-    /**
-     * Called by mouse move event
-     * 
-     * @param {object} mouseEvent contains the mouse move coordinates
-     */
-    func_onInputOver: function (mouseEvent) {
-        navigationIcons.func_onInputOver(mouseEvent.offsetX, mouseEvent.offsetY);
-    },
-
-
-
-    /* GAME FUNCTIONS */
-
-    /**
-     * Calls game state
-     */
-    func_loadGame: function () {
-
-        if (audioStatus) game.audio.beepSound.play();
-
-        if (mapPosition <= 4) game.state.start('' + gameTypeString + '');
-        else game.state.start('end');
-
-    },
 
 
 };
 };
 
 
@@ -210,146 +210,146 @@ const mapState = {
  */
  */
 const endState = {
 const endState = {
 
 
-    /**
+  /**
-     * Main code
+   * Main code
-     */
+   */
-    create: function () {
+  create: function () {
 
 
-        self.preAnimate = false;
+    self.preAnimate = false;
-        self.animate = true;
+    self.animate = true;
 
 
-        // Background color
+    // Background color
-        game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
+    game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
 
 
-        // Background
+    // Background
-        game.add.image(0, 0, 'bgimage');
+    game.add.image(0, 0, 'bgimage');
 
 
-        // Clouds
+    // Clouds
-        game.add.image(300, 100, 'cloud');
+    game.add.image(300, 100, 'cloud');
-        game.add.image(660, 80, 'cloud');
+    game.add.image(660, 80, 'cloud');
-        game.add.image(110, 85, 'cloud', 0.8);
+    game.add.image(110, 85, 'cloud', 0.8);
 
 
-        // Floor
+    // Floor
-        for (let i = 0; i < 9; i++) { game.add.image(i * 100, 501, 'floor'); }
+    for (let i = 0; i < 9; i++) { game.add.image(i * 100, 501, 'floor'); }
 
 
-        // Progress bar
+    // Progress bar
-        game.add.graphic.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5); // Progress
+    game.add.graphic.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5); // Progress
-        game.add.graphic.rect(661, 11, 149, 34, colors.blue, 3, undefined, 1); // Box
+    game.add.graphic.rect(661, 11, 149, 34, colors.blue, 3, undefined, 1); // Box
-        game.add.text(820, 38, '100%', textStyles.h2_blue, 'left');
+    game.add.text(820, 38, '100%', textStyles.h2_blue, 'left');
-        game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue, 'right');
+    game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue, 'right');
 
 
-        game.add.image(360, 545, 'tree4', 0.7).anchor(0, 1);
+    game.add.image(360, 545, 'tree4', 0.7).anchor(0, 1);
 
 
-        // Level character
+    // Level character
-        switch (gameTypeString) {
+    switch (gameTypeString) {
 
 
-            case 'circleOne':
+      case 'circleOne':
 
 
-                this.preAnimate = true;
+        this.preAnimate = true;
-                this.animate = false;
+        this.animate = false;
 
 
-                // School
+        // School
-                game.add.image(600, 222, 'school', 0.7);
+        game.add.image(600, 222, 'school', 0.7);
 
 
-                // Kid
+        // Kid
-                this.character = game.add.sprite(0, -152, 'kid_run', 0, 0.7);
+        this.character = game.add.sprite(0, -152, 'kid_run', 0, 0.7);
-                this.character.anchor(0.5, 0.5);
+        this.character.anchor(0.5, 0.5);
-                this.character.animation = ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3];
+        this.character.animation = ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3];
 
 
-                // Balloon
+        // Balloon
-                this.balloon = game.add.image(0, -260, 'balloon');
+        this.balloon = game.add.image(0, -260, 'balloon');
-                this.balloon.anchor(0.5, 0.5);
+        this.balloon.anchor(0.5, 0.5);
 
 
-                this.basket = game.add.image(0, -150, 'balloon_basket');
+        this.basket = game.add.image(0, -150, 'balloon_basket');
-                this.basket.anchor(0.5, 0.5);
+        this.basket.anchor(0.5, 0.5);
 
 
-                break;
+        break;
 
 
-            case 'squareTwo':
+      case 'squareTwo':
 
 
-                // School
+        // School
-                game.add.image(600, 222, 'school', 0.7);
+        game.add.image(600, 222, 'school', 0.7);
 
 
-                // Kid
+        // Kid
-                this.character = game.add.sprite(0, 460, 'kid_run', 6, 0.7);
+        this.character = game.add.sprite(0, 460, 'kid_run', 6, 0.7);
-                this.character.anchor(0.5, 0.5);
+        this.character.anchor(0.5, 0.5);
-                this.character.animation = ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3];
+        this.character.animation = ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3];
 
 
-                break;
+        break;
 
 
-            case 'squareOne':
+      case 'squareOne':
 
 
-                // Farm
+        // Farm
-                game.add.image(650, 260, 'farm', 1.1);
+        game.add.image(650, 260, 'farm', 1.1);
 
 
-                // Tractor
+        // Tractor
-                this.character = game.add.sprite(0, 490, 'tractor', 0, 0.7);
+        this.character = game.add.sprite(0, 490, 'tractor', 0, 0.7);
-                this.character.anchor(0.5, 0.5);
+        this.character.anchor(0.5, 0.5);
-                if (sublevelType == 'Plus') {
+        if (sublevelType == 'Plus') {
-                    this.character.animation = ['move', [0, 1, 2, 3, 4], 4];
+          this.character.animation = ['move', [0, 1, 2, 3, 4], 4];
-                } else {
+        } else {
-                    this.character.curFrame = 10;
+          this.character.curFrame = 10;
-                    this.character.animation = ['move', [10, 11, 12, 13, 14], 4];
+          this.character.animation = ['move', [10, 11, 12, 13, 14], 4];
-                }
+        }
 
 
-                break;
+        break;
 
 
-        }
+    }
 
 
-        if (this.animate) game.animation.play(this.character.animation[0]);
+    if (this.animate) game.animation.play(this.character.animation[0]);
 
 
-        game.add.image(30, 585, 'tree4', 0.85).anchor(0, 1);
+    game.add.image(30, 585, 'tree4', 0.85).anchor(0, 1);
 
 
-    },
+  },
 
 
-    /**
+  /**
-     * Game loop
+   * Game loop
-     */
+   */
-    update: function () {
+  update: function () {
 
 
-        // Balloon falling
+    // Balloon falling
-        if (self.preAnimate) {
+    if (self.preAnimate) {
 
 
-            if (self.character.y < 460) {
+      if (self.character.y < 460) {
 
 
-                self.balloon.y += 2;
+        self.balloon.y += 2;
-                self.basket.y += 2;
+        self.basket.y += 2;
-                self.character.y += 2;
+        self.character.y += 2;
 
 
-                self.balloon.x++;
+        self.balloon.x++;
-                self.basket.x++;
+        self.basket.x++;
-                self.character.x++;
+        self.character.x++;
 
 
-            } else {
+      } else {
 
 
-                self.preAnimate = false;
+        self.preAnimate = false;
-                self.animate = true;
+        self.animate = true;
-                game.animation.play(self.character.animation[0]);
+        game.animation.play(self.character.animation[0]);
 
 
-            }
+      }
 
 
-        }
+    }
 
 
-        // Character running
+    // Character running
-        if (self.animate) {
+    if (self.animate) {
 
 
-            if (self.character.x <= 700) {
+      if (self.character.x <= 700) {
 
 
-                self.character.x += 2;
+        self.character.x += 2;
 
 
-            } else {
+      } else {
 
 
-                animate = false;
+        animate = false;
-                completedLevels = 0;
+        completedLevels = 0;
-                game.animation.stop(self.character.animation[0]);
+        game.animation.stop(self.character.animation[0]);
-                game.state.start('menu');
+        game.state.start('menu');
 
 
-            }
+      }
 
 
-        }
+    }
 
 
-        game.render.all();
+    game.render.all();
 
 
-    },
+  },
 
 
 };
 };

+ 421 - 421
js/menu.js

@@ -5,190 +5,190 @@
  */
  */
 const menuState = {
 const menuState = {
 
 
-    /**
+  /**
-     * Preloads media for current state
+   * Preloads media for current state
-     */
+   */
-    preload: function () {
+  preload: function () {
 
 
-        // LOADING MEDIA
+    // LOADING MEDIA
-        game.load.image(url.menu.image);
+    game.load.image(url.menu.image);
 
 
-    },
+  },
 
 
-    /**
+  /**
-     * Main code
+   * Main code
-     */
+   */
-    create: function () {
+  create: function () {
 
 
-        // BACKGROUND
+    // BACKGROUND
 
 
-        game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
+    game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
 
 
-        for (let i = 0; i < defaultWidth / 100; i++) {
+    for (let i = 0; i < defaultWidth / 100; i++) {
-            game.add.image(i * 100, 501, 'floor');
+      game.add.image(i * 100, 501, 'floor');
-        }
+    }
 
 
-        // LABELS
+    // LABELS
 
 
-        // Overtitle: Welcome, <player name>!
+    // Overtitle: Welcome, <player name>!
-        game.add.text(defaultWidth / 2, 40, game.lang.welcome + ', ' + playerName + '!', textStyles.h4_brown);
+    game.add.text(defaultWidth / 2, 40, game.lang.welcome + ', ' + playerName + '!', textStyles.h4_brown);
 
 
-        // Title : Select a game
+    // Title : Select a game
-        game.add.text(defaultWidth / 2, 80, game.lang.menu_title, textStyles.h1_green);
+    game.add.text(defaultWidth / 2, 80, game.lang.menu_title, textStyles.h1_green);
 
 
-        // Subtitle : <game mode> 
+    // Subtitle : <game mode> 
-        this.lbl_game = game.add.text(defaultWidth / 2, 110, '', textStyles.h2_blue_2);
+    this.lbl_game = game.add.text(defaultWidth / 2, 110, '', textStyles.h2_blue_2);
 
 
-        // NAVIGATION ICONS
+    // NAVIGATION ICONS
 
 
-        // Loads navigation icons
+    // Loads navigation icons
-        navigationIcons.func_addIcons(
+    navigationIcons.func_addIcons(
-            false, false, false,
+      false, false, false,
-            true, true,
+      true, true,
-            false, false);
+      false, false);
 
 
-        // -------------------- GAME ICONS 
+    // -------------------- GAME ICONS 
-        this.menuIcons = [];
+    this.menuIcons = [];
 
 
-        const offset = defaultWidth / (info.gameType.length + 1);
+    const offset = defaultWidth / (info.gameType.length + 1);
 
 
-        for (let i = 0, x = offset; i < info.gameType.length; i++, x += offset) {
+    for (let i = 0, x = offset; i < info.gameType.length; i++, x += offset) {
 
 
-            const icon = game.add.image(x, defaultHeight / 2 - 70, info.gameTypeUrl[i], 1);
+      const icon = game.add.image(x, defaultHeight / 2 - 70, info.gameTypeUrl[i], 1);
-            icon.anchor(0.5, 0.5);
+      icon.anchor(0.5, 0.5);
 
 
-            icon.gameShape = info.gameShape[i];
+      icon.gameShape = info.gameShape[i];
-            icon.gameType = info.gameType[i];
+      icon.gameType = info.gameType[i];
 
 
-            this.menuIcons.push(icon);
+      this.menuIcons.push(icon);
 
 
-        }
+    }
 
 
-        // EVENTS
+    // EVENTS
 
 
-        game.event.add('click', this.func_onInputDown);
+    game.event.add('click', this.func_onInputDown);
-        game.event.add('mousemove', this.func_onInputOver);
+    game.event.add('mousemove', this.func_onInputOver);
 
 
-    },
+  },
 
 
 
 
 
 
-    /* EVENTS */
+  /* EVENTS */
 
 
-    /**
+  /**
-     * Called by mouse click event
+   * Called by mouse click event
-     * 
+   * 
-     * @param {object} mouseEvent contains the mouse click coordinates
+   * @param {object} mouseEvent contains the mouse click coordinates
-     */
+   */
-    func_onInputDown: function (mouseEvent) {
+  func_onInputDown: function (mouseEvent) {
-        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
 
 
-        // Check menu icons
+    // Check menu icons
-        for (let i in self.menuIcons) {
+    for (let i in self.menuIcons) {
-            // If mouse is within the bounds of an icon
+      // If mouse is within the bounds of an icon
-            if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
+      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
-                // Click first valid icon
+        // Click first valid icon
-                self.func_load(self.menuIcons[i]);
+        self.func_load(self.menuIcons[i]);
-                break;
+        break;
-            }
+      }
-        }
+    }
 
 
-        // Check navigation icons
+    // Check navigation icons
-        navigationIcons.func_onInputDown(x, y);
+    navigationIcons.func_onInputDown(x, y);
-    },
+  },
-
-    /**
-     * Called by mouse move event
-     * 
-     * @param {object} mouseEvent contains the mouse move coordinates
-     */
-    func_onInputOver: function (mouseEvent) {
-        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
-        let flag = false;
-
-        // Check menu icons
-        self.menuIcons.forEach(cur => {
-            if (game.math.isOverIcon(x, y, cur)) {
-                cur.scale = 1.08;
-                self.func_showTitle(cur);
-                flag = true;
-            } else {
-                cur.scale = 1;
-            }
-        });
-
-        if (flag) {
-            document.body.style.cursor = 'pointer';
-        } else {
-            self.func_clearTitle();
-            document.body.style.cursor = 'auto';
-        }
 
 
-        // Check navigation icons
+  /**
-        navigationIcons.func_onInputOver(x, y);
+   * Called by mouse move event
+   * 
+   * @param {object} mouseEvent contains the mouse move coordinates
+   */
+  func_onInputOver: function (mouseEvent) {
+    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+    let flag = false;
 
 
-        game.render.all();
+    // Check menu icons
-    },
+    self.menuIcons.forEach(cur => {
+      if (game.math.isOverIcon(x, y, cur)) {
+        cur.scale = 1.08;
+        self.func_showTitle(cur);
+        flag = true;
+      } else {
+        cur.scale = 1;
+      }
+    });
 
 
+    if (flag) {
+      document.body.style.cursor = 'pointer';
+    } else {
+      self.func_clearTitle();
+      document.body.style.cursor = 'auto';
+    }
 
 
+    // Check navigation icons
+    navigationIcons.func_onInputOver(x, y);
 
 
-    /* GAME FUNCTIONS */
+    game.render.all();
+  },
 
 
-    /**
-     * Saves info from selected game and goes to next state
-     * 
-     * @param {object} icon clicked icon
-     */
-    func_load: function (icon) {
 
 
-        if (audioStatus) game.audio.beepSound.play();
 
 
-        gameShape = icon.gameShape;
+  /* GAME FUNCTIONS */
-        gameTypeString = icon.gameType;
-        switch (gameTypeString) {
-            case 'squareOne': gameType = squareOne; break;
-            case 'squareTwo': gameType = squareTwo; break;
-            case 'circleOne': gameType = circleOne; break;
-            default: console.error('Game error: the name of the game is not valid');
-        }
 
 
-        self.menuIcons = self.lbl_game.name;
+  /**
+   * Saves info from selected game and goes to next state
+   * 
+   * @param {object} icon clicked icon
+   */
+  func_load: function (icon) {
 
 
-        game.state.start('customMenu');
+    if (audioStatus) game.audio.beepSound.play();
 
 
-    },
+    gameShape = icon.gameShape;
+    gameTypeString = icon.gameType;
+    switch (gameTypeString) {
+      case 'squareOne': gameType = squareOne; break;
+      case 'squareTwo': gameType = squareTwo; break;
+      case 'circleOne': gameType = circleOne; break;
+      default: console.error('Game error: the name of the game is not valid');
+    }
 
 
-    /**
+    self.menuIcons = self.lbl_game.name;
-     * Display the name of the game on screen
-     * 
-     * @param {object} icon icon for the game
-     */
-    func_showTitle: function (icon) {
 
 
-        let title;
+    game.state.start('customMenu');
 
 
-        switch (icon.gameShape) {
+  },
-            case 'circle': title = game.lang.circle_name; break;
-            case 'square': title = game.lang.square_name; break;
-        }
 
 
-        const type = icon.gameType.substring(icon.gameType.length - 3);
+  /**
+   * Display the name of the game on screen
+   * 
+   * @param {object} icon icon for the game
+   */
+  func_showTitle: function (icon) {
 
 
-        switch (type) {
+    let title;
-            case 'One': title += ' I'; break;
+
-            case 'Two': title += ' II'; break;
+    switch (icon.gameShape) {
-        }
+      case 'circle': title = game.lang.circle_name; break;
-
+      case 'square': title = game.lang.square_name; break;
-        self.lbl_game.name = title;
+    }
-
+
-    },
+    const type = icon.gameType.substring(icon.gameType.length - 3);
-
+
-    /**
+    switch (type) {
-     * Remove the name of the game from screen
+      case 'One': title += ' I'; break;
-     */
+      case 'Two': title += ' II'; break;
-    func_clearTitle: function () {
+    }
-        self.lbl_game.name = '';
+
-    },
+    self.lbl_game.name = title;
+
+  },
+
+  /**
+   * Remove the name of the game from screen
+   */
+  func_clearTitle: function () {
+    self.lbl_game.name = '';
+  },
 
 
 };
 };
 
 
@@ -199,344 +199,344 @@ const menuState = {
  */
  */
 const customMenuState = {
 const customMenuState = {
 
 
-    /**
+  /**
-     * Preloads media for current state
+   * Preloads media for current state
-     */
+   */
-    preload: function () {
+  preload: function () {
 
 
-        // LOADING MEDIA
+    // LOADING MEDIA
-        game.load.sprite(url[gameTypeString].sprite);
+    game.load.sprite(url[gameTypeString].sprite);
-        game.load.image(url[gameTypeString].image);
+    game.load.image(url[gameTypeString].image);
 
 
-    },
+  },
 
 
-    /**
+  /**
-     * Main code
+   * Main code
-     */
+   */
-    create: function () {
+  create: function () {
 
 
-        let x, y, width, height, offsetH, offsetW;
+    let x, y, width, height, offsetH, offsetW;
-        const iconScale = 0.5;
+    const iconScale = 0.5;
 
 
-        // Background color
+    // Background color
-        game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
+    game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
 
 
-        // Floor
+    // Floor
-        for (let i = 0; i < defaultWidth / 100; i++) { game.add.image(i * 100, 501, 'floor'); }
+    for (let i = 0; i < defaultWidth / 100; i++) { game.add.image(i * 100, 501, 'floor'); }
 
 
-        // LABELS
+    // LABELS
 
 
-        // Add Title : Select a game
+    // Add Title : Select a game
-        game.add.text(defaultWidth / 2, 80, game.lang.custom_game, textStyles.h1_green);
+    game.add.text(defaultWidth / 2, 80, game.lang.custom_game, textStyles.h1_green);
 
 
-        // Selected game
+    // Selected game
-        game.add.text(defaultWidth / 2, 40, menuState.menuIcons, textStyles.h4_brown);
+    game.add.text(defaultWidth / 2, 40, menuState.menuIcons, textStyles.h4_brown);
 
 
-        // Loads animation icons
+    // Loads animation icons
-        navigationIcons.func_addIcons(
+    navigationIcons.func_addIcons(
-            true, false, false,
+      true, false, false,
-            true, true,
+      true, true,
-            'menu', false);
+      'menu', false);
 
 
 
 
-        this.menuIcons = [];
+    this.menuIcons = [];
 
 
-        offsetW = 600 / 6;
+    offsetW = 600 / 6;
-        x = 150;
+    x = 150;
-        y = 200;
+    y = 200;
-        height = 280;
+    height = 280;
-        width = 5;
+    width = 5;
 
 
-        // Label 'Level'
+    // Label 'Level'
-        game.add.text(x + offsetW, y, game.lang.level, textStyles.h2_blue_2);
+    game.add.text(x + offsetW, y, game.lang.level, textStyles.h2_blue_2);
-        // Label 'Sublevel'
+    // Label 'Sublevel'
-        const sublevelLabel = game.add.text(x + 3 * offsetW, y, game.lang.sublevel, textStyles.h2_blue_2);
+    const sublevelLabel = game.add.text(x + 3 * offsetW, y, game.lang.sublevel, textStyles.h2_blue_2);
-        // Label 'Difficulty'
+    // Label 'Difficulty'
-        game.add.text(x + 5 * offsetW, y, game.lang.difficulty, textStyles.h2_blue_2);
+    game.add.text(x + 5 * offsetW, y, game.lang.difficulty, textStyles.h2_blue_2);
 
 
-        // Horizontal line
+    // Horizontal line
-        game.add.graphic.rect(x, y + 10, 600, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
+    game.add.graphic.rect(x, y + 10, 600, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
 
 
-        // Vertical line
+    // Vertical line
-        game.add.graphic.rect(x + 2 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
+    game.add.graphic.rect(x + 2 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
-        game.add.graphic.rect(x + 4 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
+    game.add.graphic.rect(x + 4 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
 
 
-        // --------------------------- TURN ON/OFF FRACTION LABELS
+    // --------------------------- TURN ON/OFF FRACTION LABELS
 
 
-        if (gameTypeString == 'squareTwo') {
+    if (gameTypeString == 'squareTwo') {
 
 
-            sublevelLabel.alpha = 0.3;
+      sublevelLabel.alpha = 0.3;
 
 
-        } else {
+    } else {
 
 
-            // Horizontal line
+      // Horizontal line
-            game.add.graphic.rect(x + 4 * offsetW, y + 136, 200, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
+      game.add.graphic.rect(x + 4 * offsetW, y + 136, 200, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
 
 
-            // Label 'Show Fractions'
+      // Label 'Show Fractions'
-            game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
+      game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
-            game.add.text(x + 5 * offsetW, y + 102 + 24, game.lang.title, textStyles.h2_blue_2);
+      game.add.text(x + 5 * offsetW, y + 102 + 24, game.lang.title, textStyles.h2_blue_2);
 
 
-            const frame = (fractionLabel) ? 1 : 0;
+      const frame = (fractionLabel) ? 1 : 0;
 
 
-            // Selection box
+      // Selection box
-            y += 40;
+      y += 40;
-            const selectionBox = game.add.sprite(x + 5 * offsetW, y + 102 + 24 - 2, 'select', frame, 0.1);
+      const selectionBox = game.add.sprite(x + 5 * offsetW, y + 102 + 24 - 2, 'select', frame, 0.1);
-            selectionBox.anchor(0.5, 0.5);
+      selectionBox.anchor(0.5, 0.5);
-            selectionBox.iconType = 'selectionBox';
+      selectionBox.iconType = 'selectionBox';
-            selectionBox.originalScale = 0.1;
+      selectionBox.originalScale = 0.1;
-            this.menuIcons.push(selectionBox);
+      this.menuIcons.push(selectionBox);
-        }
+    }
 
 
-        // ---------------------------- LEVEL ICONS
+    // ---------------------------- LEVEL ICONS
 
 
-        offsetH = this.func_getOffset(height, info[gameTypeString].levelType.length);
+    offsetH = this.func_getOffset(height, info[gameTypeString].levelType.length);
 
 
-        x = 150 + offsetW;
+    x = 150 + offsetW;
-        y = 270;
+    y = 270;
 
 
-        for (let i = 0; i < info[gameTypeString].levelTypeUrl.length; i++, y += offsetH) {
+    for (let i = 0; i < info[gameTypeString].levelTypeUrl.length; i++, y += offsetH) {
 
 
-            const icon = game.add.image(x, y, info[gameTypeString].levelTypeUrl[i], iconScale, 1);
+      const icon = game.add.image(x, y, info[gameTypeString].levelTypeUrl[i], iconScale, 1);
-            icon.anchor(0.5, 0.5);
+      icon.anchor(0.5, 0.5);
 
 
-            icon.levelType = info[gameTypeString].levelType[i];
+      icon.levelType = info[gameTypeString].levelType[i];
-            icon.iconType = 'level';
+      icon.iconType = 'level';
-            icon.originalScale = iconScale;
+      icon.originalScale = iconScale;
-            if (i == 0) {
+      if (i == 0) {
-                levelType = icon.levelType;
+        levelType = icon.levelType;
-                icon.shadow = true;
+        icon.shadow = true;
-            }
+      }
 
 
-            this.menuIcons.push(icon);
+      this.menuIcons.push(icon);
 
 
-        }
+    }
 
 
-        // ---------------------------- SUBLEVEL ICONS
+    // ---------------------------- SUBLEVEL ICONS
-
-        offsetH = this.func_getOffset(height, info[gameTypeString].sublevelType.length);
-
-        if (gameTypeString != 'squareTwo') x += 2 * offsetW;
-        y = 270;
-
-        let icon;
-        let aux = [];
-        aux['squareOne'] = [
-            ['sublevel_right', 'Plus'],
-            ['sublevel_left', 'Minus']
-        ];
-        aux['circleOne'] = [
-            ['sublevel_right', 'Plus'],
-            ['sublevel_left', 'Minus'],
-            ['sublevel_mixed', 'Mixed']
-        ];
-        aux['squareTwo'] = [
-            // ['sublevel_top', 'A'],
-            ['sublevel_bottom', 'B'],
-            ['sublevel_top', 'C'],
-        ];
-        // Placing sublevel icons
-        for (let i = 0; i < aux[gameTypeString].length; i++, y += offsetH) {
-
-            icon = game.add.image(x, y, aux[gameTypeString][i][0], iconScale);
-            icon.anchor(0.5, 0.5);
-            icon.alpha = 1;
-
-            icon.sublevelType = aux[gameTypeString][i][1];
-            icon.iconType = 'sublevel';
-            icon.originalScale = iconScale;
-
-            if (i == 0) {
-                sublevelType = icon.sublevelType;
-                icon.shadow = true;
-            }
-
-            this.menuIcons.push(icon);
 
 
-        }
+    offsetH = this.func_getOffset(height, info[gameTypeString].sublevelType.length);
 
 
-        // --------------------------- DIFFICULTY ICONS
+    if (gameTypeString != 'squareTwo') x += 2 * offsetW;
+    y = 270;
 
 
-        x = (gameTypeString == 'squareOne') ? 600 : 570;
+    let icon;
-        y = 235;
+    let aux = [];
+    aux['squareOne'] = [
+      ['sublevel_right', 'Plus'],
+      ['sublevel_left', 'Minus']
+    ];
+    aux['circleOne'] = [
+      ['sublevel_right', 'Plus'],
+      ['sublevel_left', 'Minus'],
+      ['sublevel_mixed', 'Mixed']
+    ];
+    aux['squareTwo'] = [
+      // ['sublevel_top', 'A'],
+      ['sublevel_bottom', 'B'],
+      ['sublevel_top', 'C'],
+    ];
+    // Placing sublevel icons
+    for (let i = 0; i < aux[gameTypeString].length; i++, y += offsetH) {
 
 
-        for (let i = 0; i < info[gameTypeString].gameDifficulty; i++) {
+      icon = game.add.image(x, y, aux[gameTypeString][i][0], iconScale);
+      icon.anchor(0.5, 0.5);
+      icon.alpha = 1;
 
 
-            // Parameters
+      icon.sublevelType = aux[gameTypeString][i][1];
-            const curX = x + (30 + 10) * i;
+      icon.iconType = 'sublevel';
+      icon.originalScale = iconScale;
 
 
-            // Difficulty menuIcons
+      if (i == 0) {
-            const icon = game.add.graphic.rect(curX, y, 30, 30, undefined, 0, colors.green, 1);
+        sublevelType = icon.sublevelType;
-            icon.anchor(0.5, 0.5);
+        icon.shadow = true;
-            icon.difficulty = i + 1;
+      }
-            icon.iconType = 'difficulty';
-            icon.originalScale = 1;
 
 
-            if (i == 0) {
+      this.menuIcons.push(icon);
-                gameDifficulty = icon.difficulty;
-                icon.shadow = true;
-            }
-            this.menuIcons.push(icon);
 
 
-            // Difficulty numbers
+    }
-            game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
 
 
-        }
+    // --------------------------- DIFFICULTY ICONS
 
 
-        // -------------- ENTER ICON
+    x = (gameTypeString == 'squareOne') ? 600 : 570;
-
+    y = 235;
-        x = defaultWidth - 100;
-        y = defaultHeight - 110;
-
-        const enterIcon = game.add.image(x, y, 'bush');
-        enterIcon.anchor(0.5, 0.5);
-        enterIcon.iconType = 'enter';
-        enterIcon.originalScale = 0.9;
-
-        this.menuIcons.push(enterIcon);
-
-        game.add.text(x, y, game.lang.continue.toUpperCase(), textStyles.p_white);
-
-        // EVENTS
-
-        game.event.add('click', this.func_onInputDown);
-        game.event.add('mousemove', this.func_onInputOver);
-
-    },
-
-    /* GAME FUNCTIONS */
-
-    /**
-     * Saves information selected by the player 
-     * 
-     * @param {object} icon selected icon
-     */
-    func_load: function (icon) {
-
-        if (audioStatus) game.audio.beepSound.play();
-
-        const type = icon.iconType;
-        switch (type) {
-            case 'level': levelType = icon.levelType; break;
-            case 'sublevel': sublevelType = icon.sublevelType; break;
-            case 'difficulty': gameDifficulty = icon.difficulty; break;
-            case 'selectionBox':
-                if (icon.curFrame == 0) {
-                    icon.curFrame = 1;
-                    fractionLabel = true;
-                } else {
-                    icon.curFrame = 0;
-                    fractionLabel = false;
-                }
-                game.render.all();
-                break;
-            case 'enter':
-                if (debugMode) console.log('Game State: ' + gameTypeString + ', ' + levelType);
-                mapPosition = 0;      // Map position
-                mapMove = true;       // Move no next point
-                completedLevels = 0;  // Reset the game progress when entering a new level
-                game.state.start('map');
-                break;
-        }
 
 
-    },
+    for (let i = 0; i < info[gameTypeString].gameDifficulty; i++) {
-
-    /**
-     * Calculate spacing for icons on the menu screen
-     * 
-     * @param {number} width width of the available part of the screen
-     * @param {number} numberOfIcons number or icons to be put on the screen
-     * @returns {number}
-     */
-    func_getOffset: function (width, numberOfIcons) {
-        return width / (numberOfIcons + 1);
-    },
-
-    /* EVENTS */
-
-    /**
-     * Called by mouse click event
-     * 
-     * @param {object} mouseEvent contains the mouse click coordinates
-     */
-    func_onInputDown: function (mouseEvent) {
-        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
-        let overIcon;
-
-        // Check if clicked on an icon
-        for (let i in self.menuIcons) {
-            if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
-                overIcon = i;
-                break;
-            }
-        }
 
 
-        // Update gui
+      // Parameters
-        if (overIcon) {
+      const curX = x + (30 + 10) * i;
 
 
-            document.body.style.cursor = 'pointer';
+      // Difficulty menuIcons
+      const icon = game.add.graphic.rect(curX, y, 30, 30, undefined, 0, colors.green, 1);
+      icon.anchor(0.5, 0.5);
+      icon.difficulty = i + 1;
+      icon.iconType = 'difficulty';
+      icon.originalScale = 1;
 
 
-            self.menuIcons.forEach(cur => {
+      if (i == 0) {
-                if (cur.iconType == self.menuIcons[overIcon].iconType) {
+        gameDifficulty = icon.difficulty;
-                    if (cur == self.menuIcons[overIcon]) {
+        icon.shadow = true;
-                        cur.shadow = true;
+      }
-                    } else {
+      this.menuIcons.push(icon);
-                        cur.shadow = false;
-                    }
-                }
-            });
 
 
-            self.func_load(self.menuIcons[overIcon]);
+      // Difficulty numbers
+      game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
 
 
-        } else document.body.style.cursor = 'auto';
+    }
 
 
-        navigationIcons.func_onInputDown(x, y);
+    // -------------- ENTER ICON
 
 
-        game.render.all();
+    x = defaultWidth - 100;
+    y = defaultHeight - 110;
 
 
-    },
+    const enterIcon = game.add.image(x, y, 'bush');
-
+    enterIcon.anchor(0.5, 0.5);
-    /**
+    enterIcon.iconType = 'enter';
-     * Called by mouse move event
+    enterIcon.originalScale = 0.9;
-     * 
+
-     * @param {object} mouseEvent contains the mouse move coordinates
+    this.menuIcons.push(enterIcon);
-     */
+
-    func_onInputOver: function (mouseEvent) {
+    game.add.text(x, y, game.lang.continue.toUpperCase(), textStyles.p_white);
-        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+
-        let overIcon;
+    // EVENTS
-
+
-        // Check if pointer is over an icon
+    game.event.add('click', this.func_onInputDown);
-        for (let i in self.menuIcons) {
+    game.event.add('mousemove', this.func_onInputOver);
-            if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
-                overIcon = i;
-                break;
-            }
-        }
 
 
-        // Update gui
+  },
-        if (overIcon) {
+
-            document.body.style.cursor = 'pointer';
+  /* GAME FUNCTIONS */
-
+
-            self.menuIcons.forEach(cur => {
+  /**
-                if (cur.iconType == self.menuIcons[overIcon].iconType) {
+   * Saves information selected by the player 
-                    if (cur == self.menuIcons[overIcon]) {
+   * 
-                        cur.scale = cur.originalScale * 1.1;
+   * @param {object} icon selected icon
-                    } else {
+   */
-                        cur.scale = cur.originalScale;
+  func_load: function (icon) {
-                    }
+
-                }
+    if (audioStatus) game.audio.beepSound.play();
-            });
+
+    const type = icon.iconType;
+    switch (type) {
+      case 'level': levelType = icon.levelType; break;
+      case 'sublevel': sublevelType = icon.sublevelType; break;
+      case 'difficulty': gameDifficulty = icon.difficulty; break;
+      case 'selectionBox':
+        if (icon.curFrame == 0) {
+          icon.curFrame = 1;
+          fractionLabel = true;
         } else {
         } else {
-            self.menuIcons.forEach(cur => {
+          icon.curFrame = 0;
-                cur.scale = cur.originalScale;
+          fractionLabel = false;
-            });
-            document.body.style.cursor = 'auto';
         }
         }
+        game.render.all();
+        break;
+      case 'enter':
+        if (debugMode) console.log('Game State: ' + gameTypeString + ', ' + levelType);
+        mapPosition = 0;      // Map position
+        mapMove = true;       // Move no next point
+        completedLevels = 0;  // Reset the game progress when entering a new level
+        game.state.start('map');
+        break;
+    }
+
+  },
+
+  /**
+   * Calculate spacing for icons on the menu screen
+   * 
+   * @param {number} width width of the available part of the screen
+   * @param {number} numberOfIcons number or icons to be put on the screen
+   * @returns {number}
+   */
+  func_getOffset: function (width, numberOfIcons) {
+    return width / (numberOfIcons + 1);
+  },
+
+  /* EVENTS */
+
+  /**
+   * Called by mouse click event
+   * 
+   * @param {object} mouseEvent contains the mouse click coordinates
+   */
+  func_onInputDown: function (mouseEvent) {
+    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+    let overIcon;
+
+    // Check if clicked on an icon
+    for (let i in self.menuIcons) {
+      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
+        overIcon = i;
+        break;
+      }
+    }
+
+    // Update gui
+    if (overIcon) {
+
+      document.body.style.cursor = 'pointer';
+
+      self.menuIcons.forEach(cur => {
+        if (cur.iconType == self.menuIcons[overIcon].iconType) {
+          if (cur == self.menuIcons[overIcon]) {
+            cur.shadow = true;
+          } else {
+            cur.shadow = false;
+          }
+        }
+      });
+
+      self.func_load(self.menuIcons[overIcon]);
+
+    } else document.body.style.cursor = 'auto';
+
+    navigationIcons.func_onInputDown(x, y);
+
+    game.render.all();
+
+  },
+
+  /**
+   * Called by mouse move event
+   * 
+   * @param {object} mouseEvent contains the mouse move coordinates
+   */
+  func_onInputOver: function (mouseEvent) {
+    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+    let overIcon;
+
+    // Check if pointer is over an icon
+    for (let i in self.menuIcons) {
+      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
+        overIcon = i;
+        break;
+      }
+    }
+
+    // Update gui
+    if (overIcon) {
+      document.body.style.cursor = 'pointer';
+
+      self.menuIcons.forEach(cur => {
+        if (cur.iconType == self.menuIcons[overIcon].iconType) {
+          if (cur == self.menuIcons[overIcon]) {
+            cur.scale = cur.originalScale * 1.1;
+          } else {
+            cur.scale = cur.originalScale;
+          }
+        }
+      });
+    } else {
+      self.menuIcons.forEach(cur => {
+        cur.scale = cur.originalScale;
+      });
+      document.body.style.cursor = 'auto';
+    }
 
 
-        // Check navigation icons
+    // Check navigation icons
-        navigationIcons.func_onInputOver(x, y);
+    navigationIcons.func_onInputOver(x, y);
 
 
-        game.render.all();
+    game.render.all();
 
 
-    },
+  },
 
 
 }
 }

+ 37 - 39
js/preMenu.js

@@ -16,7 +16,7 @@ const bootState = {
     game.load.audio(url.boot.audio);
     game.load.audio(url.boot.audio);
     game.load.image(url.boot.image);
     game.load.image(url.boot.image);
     game.load.sprite(url.boot.sprite);
     game.load.sprite(url.boot.sprite);
-    },
+  },
 
 
   /**
   /**
    * Main code
    * Main code
@@ -24,8 +24,8 @@ const bootState = {
   create: function () {
   create: function () {
     // Calls first screen seen by the player
     // Calls first screen seen by the player
     game.state.start('lang');
     game.state.start('lang');
-    }
+  }
-  };
+};
 
 
 
 
 /**
 /**
@@ -51,7 +51,7 @@ const langState = {
       lang: ['pt_BR', 'it_IT', 'en_US', 'es_PE', 'fr_FR'], // Parameters sent for language object
       lang: ['pt_BR', 'it_IT', 'en_US', 'es_PE', 'fr_FR'], // Parameters sent for language object
       x: [-220, -220, -220, 200, 200],
       x: [-220, -220, -220, 200, 200],
       y: [-180, 0, 180, -100, 100]
       y: [-180, 0, 180, -100, 100]
-      };
+    };
 
 
     // Create elements on screen  
     // Create elements on screen  
     for (let i in this.langs.flag) {
     for (let i in this.langs.flag) {
@@ -63,11 +63,11 @@ const langState = {
       flag.anchor(0.5, 0.5);
       flag.anchor(0.5, 0.5);
 
 
       this.listOfFlags.push(flag);
       this.listOfFlags.push(flag);
-      }
+    }
 
 
     game.event.add('click', this.func_onInputDown);
     game.event.add('click', this.func_onInputDown);
     game.event.add('mousemove', this.func_onInputOver);
     game.event.add('mousemove', this.func_onInputOver);
-    },
+  },
 
 
 
 
   /* EVENT HANDLER*/
   /* EVENT HANDLER*/
@@ -83,15 +83,15 @@ const langState = {
 
 
     self.listOfFlags.forEach(cur => {
     self.listOfFlags.forEach(cur => {
       if (game.math.isOverIcon(x, y, cur)) {
       if (game.math.isOverIcon(x, y, cur)) {
-       for (let i in self.langs.flag) {
+        for (let i in self.langs.flag) {
-         if (self.langs.flag[i] == cur.name) {
+          if (self.langs.flag[i] == cur.name) {
-           self.func_setLang(self.langs.lang[i]);
+            self.func_setLang(self.langs.lang[i]);
-           break;
+            break;
-           }
+          }
-         }
+        }
-       }
+      }
-      });
+    });
-    },
+  },
 
 
   /**
   /**
    * Called by mouse move event
    * Called by mouse move event
@@ -107,17 +107,16 @@ const langState = {
       if (game.math.isOverIcon(x, y, cur)) {
       if (game.math.isOverIcon(x, y, cur)) {
         flag = true;
         flag = true;
         cur.scale = cur.scale = 1.05;
         cur.scale = cur.scale = 1.05;
-        }
+      } else {
-      else {
+        cur.scale = cur.scale = 1;
-          cur.scale = cur.scale = 1;
+      }
-        }
+    });
-      });
 
 
     if (flag) document.body.style.cursor = 'pointer';
     if (flag) document.body.style.cursor = 'pointer';
     else document.body.style.cursor = 'auto';
     else document.body.style.cursor = 'auto';
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
 
 
@@ -133,8 +132,8 @@ const langState = {
     langString = selectedLang;
     langString = selectedLang;
     // Calls loading screen
     // Calls loading screen
     game.state.start('loadLang');
     game.state.start('loadLang');
-    }
+  }
-  };
+};
 
 
 
 
 /**
 /**
@@ -150,7 +149,7 @@ const loadLangState = {
   preload: function () {
   preload: function () {
     // LOADING MEDIA : selected language
     // LOADING MEDIA : selected language
     game.load.lang('assets/lang/' + langString);
     game.load.lang('assets/lang/' + langString);
-    },
+  },
 
 
   /**
   /**
    * Main code
    * Main code
@@ -164,9 +163,9 @@ const loadLangState = {
       game.state.start('name'); // First time opening ifractions ('language' >> 'name' >> 'menu')
       game.state.start('name'); // First time opening ifractions ('language' >> 'name' >> 'menu')
     } else {
     } else {
       game.state.start('menu'); // If changing language during the game ('language' >> >> 'menu')         
       game.state.start('menu'); // If changing language during the game ('language' >> >> 'menu')         
-      }
     }
     }
-  };
+  }
+};
 
 
 
 
 
 
@@ -206,13 +205,13 @@ const nameState = {
       if (keycode == 'Enter') {
       if (keycode == 'Enter') {
         if (self.func_checkEmptyName()) self.func_saveName();
         if (self.func_checkEmptyName()) self.func_saveName();
         game.render.all(); // Can show empty name
         game.render.all(); // Can show empty name
-        }
+      }
-      });
+    });
 
 
     game.event.add('click', this.func_onInputDown);
     game.event.add('click', this.func_onInputDown);
     game.event.add('mousemove', this.func_onInputOver);
     game.event.add('mousemove', this.func_onInputOver);
 
 
-    },
+  },
 
 
 
 
   /* EVENT HANDLER*/
   /* EVENT HANDLER*/
@@ -230,10 +229,10 @@ const nameState = {
     if (game.math.isOverIcon(x, y, cur)) {
     if (game.math.isOverIcon(x, y, cur)) {
       if (self.func_checkEmptyName()) {
       if (self.func_checkEmptyName()) {
         self.func_saveName();
         self.func_saveName();
-        }
       }
       }
+    }
     game.render.all();
     game.render.all();
-    },
+  },
 
 
   /**
   /**
    * Called by mouse move event
    * Called by mouse move event
@@ -248,14 +247,13 @@ const nameState = {
     if (game.math.isOverIcon(x, y, cur)) {
     if (game.math.isOverIcon(x, y, cur)) {
       document.body.style.cursor = 'pointer';
       document.body.style.cursor = 'pointer';
       cur.alpha = 0.4;
       cur.alpha = 0.4;
-      }
+    } else {
-    else {
       document.body.style.cursor = 'auto';
       document.body.style.cursor = 'auto';
       cur.alpha = 0.6;
       cur.alpha = 0.6;
-      }
+    }
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
   /* GAME FUNCTIONS */
   /* GAME FUNCTIONS */
@@ -270,9 +268,9 @@ const nameState = {
     if (document.getElementById('textbox-content').value == '') {
     if (document.getElementById('textbox-content').value == '') {
       self.warningEmptyName.name = game.lang.empty_name;
       self.warningEmptyName.name = game.lang.empty_name;
       return false;
       return false;
-      }
+    }
     return true;
     return true;
-    },
+  },
 
 
   /**
   /**
    * Saves player name and calls next state
    * Saves player name and calls next state
@@ -290,6 +288,6 @@ const nameState = {
 
 
     // Calls 'menu' state
     // Calls 'menu' state
     game.state.start('menu');
     game.state.start('menu');
-    }
+  }
 
 
-  };
+};

+ 77 - 88
js/squareOne.js

@@ -80,12 +80,11 @@ const squareOne = {
     if (sublevelType == 'Plus') {
     if (sublevelType == 'Plus') {
       this.tractor.anchor(1, 0.5);
       this.tractor.anchor(1, 0.5);
       this.tractor.animation = ['move', [0, 1, 2, 3, 4], 4];
       this.tractor.animation = ['move', [0, 1, 2, 3, 4], 4];
-      }
+    } else {
-    else {
       this.tractor.anchor(0, 0.5);
       this.tractor.anchor(0, 0.5);
       this.tractor.animation = ['move', [5, 6, 7, 8, 9], 4];
       this.tractor.animation = ['move', [5, 6, 7, 8, 9], 4];
       this.tractor.curFrame = 5;
       this.tractor.curFrame = 5;
-      }
+    }
 
 
     // STACKED BLOCKS variables
     // STACKED BLOCKS variables
     this.stck = {
     this.stck = {
@@ -100,7 +99,7 @@ const squareOne = {
 
 
       // Correct values
       // Correct values
       correctIndex: undefined, // (levelType 'B') index of the CORRECT 'stacked' block
       correctIndex: undefined, // (levelType 'B') index of the CORRECT 'stacked' block
-      };
+    };
 
 
     // FLOOR BLOCKS variables
     // FLOOR BLOCKS variables
     this.floor = {
     this.floor = {
@@ -115,7 +114,7 @@ const squareOne = {
       correctX: undefined,  // 'x' coordinate of CORRECT 'floor' block
       correctX: undefined,  // 'x' coordinate of CORRECT 'floor' block
       correctXA: undefined, // Temporary variable 
       correctXA: undefined, // Temporary variable 
       correctXB: undefined, // Temporary variable
       correctXB: undefined, // Temporary variable
-      };
+    };
 
 
     // CREATING STACKED BLOCKS
     // CREATING STACKED BLOCKS
     this.restart = this.func_createStckBlocks();
     this.restart = this.func_createStckBlocks();
@@ -129,7 +128,7 @@ const squareOne = {
       this.arrow = game.add.image(this.startX + this.defaultBlockWidth * this.DIREC_LEVEL, 480, 'arrow_down');
       this.arrow = game.add.image(this.startX + this.defaultBlockWidth * this.DIREC_LEVEL, 480, 'arrow_down');
       this.arrow.anchor(0.5, 0.5);
       this.arrow.anchor(0.5, 0.5);
       this.arrow.alpha = 0.5;
       this.arrow.alpha = 0.5;
-      }
+    }
 
 
     // Help pointer
     // Help pointer
     this.help = game.add.image(0, 0, 'help_pointer', 0.5);
     this.help = game.add.image(0, 0, 'help_pointer', 0.5);
@@ -140,8 +139,8 @@ const squareOne = {
       game.timer.start(); // Set a timer for the current level (used in postScore())
       game.timer.start(); // Set a timer for the current level (used in postScore())
       game.event.add('click', this.func_onInputDown);
       game.event.add('click', this.func_onInputDown);
       game.event.add('mousemove', this.func_onInputOver);
       game.event.add('mousemove', this.func_onInputOver);
-      }
+    }
-    },
+  },
 
 
   /**
   /**
    * Game loop
    * Game loop
@@ -162,7 +161,7 @@ const squareOne = {
       // Move 'stacked blocks'
       // Move 'stacked blocks'
       for (let i in stck.blocks) {
       for (let i in stck.blocks) {
         stck.blocks[i].x += self.animationSpeed;
         stck.blocks[i].x += self.animationSpeed;
-        }
+      }
 
 
       // MANAGE BLOCKS AND FLOOR GAPS
       // MANAGE BLOCKS AND FLOOR GAPS
       // If block is 1/n (not 1/1) there's an extra block space to go through before the start of next block
       // If block is 1/n (not 1/1) there's an extra block space to go through before the start of next block
@@ -187,12 +186,11 @@ const squareOne = {
           // (B) selected stacked index doesnt fit last floor gap (fixed) AKA TOO MANY STACKED BLOCKS (DOESNT CHECK NOT ENOUGH)
           // (B) selected stacked index doesnt fit last floor gap (fixed) AKA TOO MANY STACKED BLOCKS (DOESNT CHECK NOT ENOUGH)
           if ((sublevelType == 'Plus' && curEnd > selectedEnd) || (sublevelType == 'Minus' && curEnd < selectedEnd)) {
           if ((sublevelType == 'Plus' && curEnd > selectedEnd) || (sublevelType == 'Minus' && curEnd < selectedEnd)) {
             lowerBlock = false;
             lowerBlock = false;
-            }
           }
           }
-        else {
+        } else {
           // Update to next block end
           // Update to next block end
           stck.curBlockEnd += stck.blocks[stck.curIndex + 1].width * self.DIREC_LEVEL;
           stck.curBlockEnd += stck.blocks[stck.curIndex + 1].width * self.DIREC_LEVEL;
-          }
+        }
 
 
         // Fill floor gap
         // Fill floor gap
         if (lowerBlock) {
         if (lowerBlock) {
@@ -203,23 +201,23 @@ const squareOne = {
             if ((sublevelType == 'Plus' && floor.blocks[i].x < curEnd) || (sublevelType == 'Minus' && floor.blocks[i].x > curEnd)) {
             if ((sublevelType == 'Plus' && floor.blocks[i].x < curEnd) || (sublevelType == 'Minus' && floor.blocks[i].x > curEnd)) {
               floor.blocks[i].alpha = 0.2;
               floor.blocks[i].alpha = 0.2;
               floor.curIndex = i;
               floor.curIndex = i;
-              }
             }
             }
+          }
 
 
           // Lower
           // Lower
           stck.blocks[stck.curIndex].alpha = 0;
           stck.blocks[stck.curIndex].alpha = 0;
           stck.blocks.forEach(cur => { cur.y += self.defaultBlockHeight - 2; }); // Lower stacked blocks
           stck.blocks.forEach(cur => { cur.y += self.defaultBlockHeight - 2; }); // Lower stacked blocks
-          }
+        }
 
 
         stck.curIndex++;
         stck.curIndex++;
-        }
+      }
 
 
       // WHEN REACHED END POSITION
       // WHEN REACHED END POSITION
       if (stck.curIndex > stck.index || floor.curIndex == floor.index) {
       if (stck.curIndex > stck.index || floor.curIndex == floor.index) {
         self.animate = false;
         self.animate = false;
         self.checkAnswer = true;
         self.checkAnswer = true;
-        }
       }
       }
+    }
 
 
     // When animation ends check answer
     // When animation ends check answer
     if (self.checkAnswer) {
     if (self.checkAnswer) {
@@ -229,10 +227,9 @@ const squareOne = {
 
 
       if (levelType == 'A') {
       if (levelType == 'A') {
         self.result = self.floor.index == self.floor.correctIndex;
         self.result = self.floor.index == self.floor.correctIndex;
-        }
+      } else {
-      else {
         self.result = self.stck.index == self.stck.correctIndex;
         self.result = self.stck.index == self.stck.correctIndex;
-        }
+      }
 
 
       // Give feedback to player and turns on sprite animation
       // Give feedback to player and turns on sprite animation
       if (self.result) { // Correct answer
       if (self.result) { // Correct answer
@@ -244,19 +241,18 @@ const squareOne = {
 
 
         completedLevels++; // Increases number os passed levels
         completedLevels++; // Increases number os passed levels
         if (debugMode) console.log('completedLevels = ' + completedLevels);
         if (debugMode) console.log('completedLevels = ' + completedLevels);
-        }
+      } else { // Incorrect answer
-      else { // Incorrect answer
         // Displays feedback image and sound
         // Displays feedback image and sound
         game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
         game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
         if (audioStatus) game.audio.errorSound.play();
         if (audioStatus) game.audio.errorSound.play();
-        }
+      }
 
 
       self.postScore();
       self.postScore();
 
 
       // AFTER CHECK ANSWER
       // AFTER CHECK ANSWER
       self.checkAnswer = false;
       self.checkAnswer = false;
       self.animateEnding = true;
       self.animateEnding = true;
-      }
+    }
 
 
     // Starts 'ending' tractor moving animation
     // Starts 'ending' tractor moving animation
     if (self.animateEnding) {
     if (self.animateEnding) {
@@ -274,10 +270,10 @@ const squareOne = {
         else mapMove = false;
         else mapMove = false;
 
 
         game.state.start('map');
         game.state.start('map');
-        }
       }
       }
+    }
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
   /* EVENT HANDLER */
   /* EVENT HANDLER */
@@ -294,18 +290,17 @@ const squareOne = {
     if (levelType == 'A') {
     if (levelType == 'A') {
       self.floor.blocks.forEach(cur => {
       self.floor.blocks.forEach(cur => {
         if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
         if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
-        });
+      });
-      }
+    } else {
-    else {
       self.stck.blocks.forEach(cur => {
       self.stck.blocks.forEach(cur => {
         if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
         if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
-        });
+      });
-      }
+    }
 
 
     navigationIcons.func_onInputDown(x, y);
     navigationIcons.func_onInputDown(x, y);
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
   /**
   /**
    * Called by mouse move event
    * Called by mouse move event
@@ -323,34 +318,34 @@ const squareOne = {
       if (!self.hasClicked && !self.animateEnding) {
       if (!self.hasClicked && !self.animateEnding) {
         if (game.math.distanceToPointer(self.arrow.x, x, self.arrow.y, y) > 8) {
         if (game.math.distanceToPointer(self.arrow.x, x, self.arrow.y, y) > 8) {
           self.arrow.x = (x < 250) ? 250 : x; // Limits the arrow left position to 250
           self.arrow.x = (x < 250) ? 250 : x; // Limits the arrow left position to 250
-          }
         }
         }
+      }
 
 
       self.floor.blocks.forEach(cur => {
       self.floor.blocks.forEach(cur => {
         if (game.math.isOverIcon(x, y, cur)) {
         if (game.math.isOverIcon(x, y, cur)) {
           flagA = true;
           flagA = true;
           self.func_overSquare(cur);
           self.func_overSquare(cur);
-          }
+        }
-        });
+      });
 
 
       if (!flagA) self.func_outSquare('A');
       if (!flagA) self.func_outSquare('A');
-      }
+    }
 
 
     if (levelType == 'B') {
     if (levelType == 'B') {
       self.stck.blocks.forEach(cur => {
       self.stck.blocks.forEach(cur => {
         if (game.math.isOverIcon(x, y, cur)) {
         if (game.math.isOverIcon(x, y, cur)) {
           flagB = true;
           flagB = true;
           self.func_overSquare(cur);
           self.func_overSquare(cur);
-          }
+        }
-        });
+      });
 
 
       if (!flagB) self.func_outSquare('B');
       if (!flagB) self.func_outSquare('B');
-      }
+    }
 
 
     navigationIcons.func_onInputOver(x, y);
     navigationIcons.func_onInputOver(x, y);
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
   /* CALLED BY EVENT HANDLER */
   /* CALLED BY EVENT HANDLER */
@@ -368,23 +363,22 @@ const squareOne = {
       if (levelType == 'A') {
       if (levelType == 'A') {
         for (let i in self.floor.blocks) {
         for (let i in self.floor.blocks) {
           self.floor.blocks[i].alpha = (i <= cur.index) ? 1 : 0.5;
           self.floor.blocks[i].alpha = (i <= cur.index) ? 1 : 0.5;
-          }
+        }
 
 
         // Saves the index of the selected 'floor' block
         // Saves the index of the selected 'floor' block
         self.floor.index = cur.index;
         self.floor.index = cur.index;
 
 
         // On leveltype B
         // On leveltype B
-        }
+      } else {
-      else {
         for (let i in self.stck.blocks) {
         for (let i in self.stck.blocks) {
           self.stck.blocks[i].alpha = (i <= cur.index) ? 0.5 : 0.2;
           self.stck.blocks[i].alpha = (i <= cur.index) ? 0.5 : 0.2;
-          }
+        }
 
 
         // Saves the index of the selected 'stack' block
         // Saves the index of the selected 'stack' block
         self.stck.index = cur.index;
         self.stck.index = cur.index;
-        }
       }
       }
-    },
+    }
+  },
 
 
   /**
   /**
    * Function called when cursos is out of a valid rectangle
    * Function called when cursos is out of a valid rectangle
@@ -397,20 +391,19 @@ const squareOne = {
       if (levelType == 'A') {
       if (levelType == 'A') {
         for (let i in self.floor.blocks) {
         for (let i in self.floor.blocks) {
           self.floor.blocks[i].alpha = 0.5; // Back to normal
           self.floor.blocks[i].alpha = 0.5; // Back to normal
-          }
+        }
 
 
         self.floor.index = -1;
         self.floor.index = -1;
         // On level type B
         // On level type B
-        }
+      } else {
-      else {
         for (let i in self.stck.blocks) {
         for (let i in self.stck.blocks) {
           self.stck.blocks[i].alpha = 0.5; // Back to normal
           self.stck.blocks[i].alpha = 0.5; // Back to normal
-          }
+        }
 
 
         self.stck.index = -1;
         self.stck.index = -1;
-        }
       }
       }
-    },
+    }
+  },
 
 
   /**
   /**
    * Function called when player clicks on a valid rectangle
    * Function called when player clicks on a valid rectangle
@@ -428,24 +421,23 @@ const squareOne = {
         for (let i in self.floor.blocks) {
         for (let i in self.floor.blocks) {
           // (SELECTION : self.FLOOR.index)
           // (SELECTION : self.FLOOR.index)
           if (i > self.floor.index) self.floor.blocks[i].alpha = 0; // Make unselected 'floor' blocks invisible
           if (i > self.floor.index) self.floor.blocks[i].alpha = 0; // Make unselected 'floor' blocks invisible
-          }
+        }
 
 
         // (FIXED : self.STCK.index) save the 'stacked' blocks index
         // (FIXED : self.STCK.index) save the 'stacked' blocks index
         self.stck.index = self.stck.blocks.length - 1;
         self.stck.index = self.stck.blocks.length - 1;
         // On leveltype B
         // On leveltype B
-        }
+      } else {
-      else {
         for (let i in self.stck.blocks) {
         for (let i in self.stck.blocks) {
           // (FIXED : self.STCK.index)
           // (FIXED : self.STCK.index)
           if (i > self.stck.index) self.stck.blocks[i].alpha = 0; // Make unselected 'stacked' blocks invisible
           if (i > self.stck.index) self.stck.blocks[i].alpha = 0; // Make unselected 'stacked' blocks invisible
-          }
+        }
 
 
         // (SELECTION : self.FLOOR.index) save the 'floor' blocks index to compare to the stacked index in update
         // (SELECTION : self.FLOOR.index) save the 'floor' blocks index to compare to the stacked index in update
         self.floor.index = self.floor.blocks.length - 1;
         self.floor.index = self.floor.blocks.length - 1;
 
 
         // Save the updated total stacked blocks to compare in update
         // Save the updated total stacked blocks to compare in update
         self.stck.blocks.length = self.stck.index + 1;
         self.stck.blocks.length = self.stck.index + 1;
-        }
+      }
 
 
       // Play beep sound
       // Play beep sound
       if (audioStatus) game.audio.beepSound.play();
       if (audioStatus) game.audio.beepSound.play();
@@ -454,8 +446,8 @@ const squareOne = {
       if (fractionLabel) {
       if (fractionLabel) {
         self.stck.labels.forEach(cur => {
         self.stck.labels.forEach(cur => {
           cur.forEach(cur => { cur.alpha = 0; });
           cur.forEach(cur => { cur.alpha = 0; });
-          });
+        });
-        }
+      }
       // Hide solution pointer
       // Hide solution pointer
       if (self.help != undefined) self.help.alpha = 0;
       if (self.help != undefined) self.help.alpha = 0;
 
 
@@ -464,8 +456,8 @@ const squareOne = {
 
 
       self.hasClicked = true;
       self.hasClicked = true;
       self.animate = true;
       self.animate = true;
-      }
+    }
-    },
+  },
 
 
 
 
   /* GAME FUNCTIONS */
   /* GAME FUNCTIONS */
@@ -511,7 +503,7 @@ const squareOne = {
       if (levelType == 'B') {
       if (levelType == 'B') {
         block.alpha = 0.5;
         block.alpha = 0.5;
         block.index = i;
         block.index = i;
-        }
+      }
 
 
       self.stck.blocks.push(block);
       self.stck.blocks.push(block);
 
 
@@ -524,16 +516,15 @@ const squareOne = {
 
 
         if (divisor == 1) {
         if (divisor == 1) {
           label[0] = game.add.text(x, 488 - i * y, divisor, textStyles.h2_blue);
           label[0] = game.add.text(x, 488 - i * y, divisor, textStyles.h2_blue);
-          }
+        } else {
-        else {
           label[0] = game.add.text(x, 479 - i * y + 16, divisor, textStyles.p_blue);
           label[0] = game.add.text(x, 479 - i * y + 16, divisor, textStyles.p_blue);
           label[1] = game.add.text(x, 479 - i * y, '1', textStyles.p_blue);
           label[1] = game.add.text(x, 479 - i * y, '1', textStyles.p_blue);
           label[2] = game.add.text(x, 479 - i * y, '_', textStyles.p_blue);
           label[2] = game.add.text(x, 479 - i * y, '_', textStyles.p_blue);
-          }
+        }
         // Add current label to group of labels
         // Add current label to group of labels
         self.stck.labels.push(label);
         self.stck.labels.push(label);
-        }
       }
       }
+    }
 
 
     // Will be used as a counter in update, adding in the width of each stacked block to check if the end matches the floor selected position
     // Will be used as a counter in update, adding in the width of each stacked block to check if the end matches the floor selected position
     self.stck.curBlockEnd = self.startX + self.stck.blocks[0].width * self.DIREC_LEVEL;
     self.stck.curBlockEnd = self.startX + self.stck.blocks[0].width * self.DIREC_LEVEL;
@@ -548,12 +539,12 @@ const squareOne = {
         self.floor.correctXA > (self.startX - self.defaultBlockWidth)))
         self.floor.correctXA > (self.startX - self.defaultBlockWidth)))
     ) {
     ) {
       restart = true; // If any error is found restart the level
       restart = true; // If any error is found restart the level
-      }
+    }
 
 
     if (debugMode) console.log('Stacked blocks: ' + total + ' (min: ' + (mapPosition + 2) + ', max: ' + max + ')');
     if (debugMode) console.log('Stacked blocks: ' + total + ' (min: ' + (mapPosition + 2) + ', max: ' + max + ')');
 
 
     return restart;
     return restart;
-    },
+  },
 
 
   /**
   /**
    * Create floor blocks for the level (called in create())
    * Create floor blocks for the level (called in create())
@@ -573,8 +564,8 @@ const squareOne = {
 
 
       for (let i = 0; i <= self.stck.correctIndex; i++) {
       for (let i = 0; i <= self.stck.correctIndex; i++) {
         self.floor.correctXB += self.stck.blocks[i].width * self.DIREC_LEVEL; // Equivalent x position on the floor
         self.floor.correctXB += self.stck.blocks[i].width * self.DIREC_LEVEL; // Equivalent x position on the floor
-        }
       }
       }
+    }
 
 
     let flag = true;
     let flag = true;
 
 
@@ -583,18 +574,18 @@ const squareOne = {
       const x = self.startX + (self.defaultBlockWidth + i * blockWidth) * self.DIREC_LEVEL;
       const x = self.startX + (self.defaultBlockWidth + i * blockWidth) * self.DIREC_LEVEL;
 
 
       if (flag && levelType == 'A') {
       if (flag && levelType == 'A') {
-        if ( (sublevelType == 'Plus' && x >= self.floor.correctXA) || (sublevelType == 'Minus' && x <= self.floor.correctXA) ) {
+        if ((sublevelType == 'Plus' && x >= self.floor.correctXA) || (sublevelType == 'Minus' && x <= self.floor.correctXA)) {
           self.floor.correctIndex = i - 1; // Set index of correct floor block
           self.floor.correctIndex = i - 1; // Set index of correct floor block
           flag = false;
           flag = false;
-          }
         }
         }
+      }
 
 
       if (levelType == 'B') {
       if (levelType == 'B') {
-        if ( (sublevelType == 'Plus' && x >= self.floor.correctXB) || (sublevelType == 'Minus' && x <= self.floor.correctXB) ) {
+        if ((sublevelType == 'Plus' && x >= self.floor.correctXB) || (sublevelType == 'Minus' && x <= self.floor.correctXB)) {
           total = i;
           total = i;
           break;
           break;
-          }
         }
         }
+      }
 
 
       // Create floor block
       // Create floor block
       const lineSize = 0.9;
       const lineSize = 0.9;
@@ -614,11 +605,11 @@ const squareOne = {
       if (levelType == 'A') {
       if (levelType == 'A') {
         block.alpha = 0.5;
         block.alpha = 0.5;
         block.index = i;
         block.index = i;
-        }
+      }
 
 
       // Add current label to group of labels
       // Add current label to group of labels
       self.floor.blocks.push(block);
       self.floor.blocks.push(block);
-      }
+    }
 
 
     if (levelType == 'A') self.floor.correctX = self.floor.correctXA;
     if (levelType == 'A') self.floor.correctX = self.floor.correctXA;
     else if (levelType == 'B') self.floor.correctX = self.floor.correctXB;
     else if (levelType == 'B') self.floor.correctX = self.floor.correctXB;
@@ -627,8 +618,8 @@ const squareOne = {
     for (let i = 1; i < 10; i++) {
     for (let i = 1; i < 10; i++) {
       const x = self.startX + (i * self.defaultBlockWidth * self.DIREC_LEVEL);
       const x = self.startX + (i * self.defaultBlockWidth * self.DIREC_LEVEL);
       game.add.text(x, 462 + self.defaultBlockHeight + 58, i - 1, textStyles.h2_blue);
       game.add.text(x, 462 + self.defaultBlockHeight + 58, i - 1, textStyles.h2_blue);
-      }
+    }
-    },
+  },
 
 
   /**
   /**
    * Display correct answer
    * Display correct answer
@@ -641,29 +632,28 @@ const squareOne = {
         self.help.x = self.floor.correctX - aux.width / 2 * self.DIREC_LEVEL;
         self.help.x = self.floor.correctX - aux.width / 2 * self.DIREC_LEVEL;
         self.help.y = 501;
         self.help.y = 501;
         // On levelType B
         // On levelType B
-        }
+      } else {
-      else {
         const aux = self.stck.blocks[self.stck.correctIndex];
         const aux = self.stck.blocks[self.stck.correctIndex];
         self.help.x = aux.x + aux.width / 2 * self.DIREC_LEVEL;
         self.help.x = aux.x + aux.width / 2 * self.DIREC_LEVEL;
         self.help.y = aux.y;
         self.help.y = aux.y;
-        }
+      }
 
 
       self.help.alpha = 0.7;
       self.help.alpha = 0.7;
-      }
+    }
-    },
+  },
 
 
 
 
 
 
   /* METADATA FOR GAME */
   /* METADATA FOR GAME */
 
 
   /**
   /**
-   * Saves players data after level
+   * Saves players data after level ends - to be sent to database
    *
    *
    * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
    * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
-   * @see ./php/save.php
+   * @see /php/save.php
    */
    */
   postScore: function () {
   postScore: function () {
-    // Saves player data to send to the database
+    // Creates string that is going to be sent to db
     const data = '&line_game=' + gameShape
     const data = '&line_game=' + gameShape
       + '&line_mode=' + levelType
       + '&line_mode=' + levelType
       + '&line_oper=' + sublevelType
       + '&line_oper=' + sublevelType
@@ -676,8 +666,7 @@ const squareOne = {
       + ', valBlocks: ' + self.divisorsList // Ends in ','
       + ', valBlocks: ' + self.divisorsList // Ends in ','
       + ' blockIndex: ' + self.stck.index
       + ' blockIndex: ' + self.stck.index
       + ', floorIndex: ' + self.floor.index;
       + ', floorIndex: ' + self.floor.index;
+    sendToDB(data);
+  },
 
 
-    postScore(data);
+};
-    },
-
-  };

+ 41 - 45
js/squareTwo.js

@@ -49,7 +49,7 @@ const squareTwo = {
       animate: false,     // Animate blocks from A
       animate: false,     // Animate blocks from A
       warningText: undefined,
       warningText: undefined,
       label: undefined,
       label: undefined,
-      };
+    };
 
 
     this.B = {
     this.B = {
       blocks: [],
       blocks: [],
@@ -60,7 +60,7 @@ const squareTwo = {
       animate: false,
       animate: false,
       warningText: undefined,
       warningText: undefined,
       label: undefined,
       label: undefined,
-      };
+    };
 
 
     // BACKGROUND AND KID
     // BACKGROUND AND KID
     // Add background image
     // Add background image
@@ -94,13 +94,12 @@ const squareTwo = {
       yA = 90;
       yA = 90;
       xB = xA;
       xB = xA;
       yB = yA + 3 * figureHeight + 30;
       yB = yA + 3 * figureHeight + 30;
-      }
+    } else { // More subdivisions on A
-    else { // More subdivisions on A
       xB = 230;
       xB = 230;
       yB = 90;
       yB = 90;
       xA = xB;
       xA = xB;
       yA = yB + 3 * figureHeight + 30;
       yA = yB + 3 * figureHeight + 30;
-      }
+    }
 
 
     // Possible points for A
     // Possible points for A
     const points = [2, 4, 6, 8, 9, 10, 12, 14, 15, 16, 18, 20];
     const points = [2, 4, 6, 8, 9, 10, 12, 14, 15, 16, 18, 20];
@@ -117,7 +116,7 @@ const squareTwo = {
       console.log('Difficulty ' + gameDifficulty + ', ini ' + ((gameDifficulty - 1) * 2 + 1) + ', end ' + ((gameDifficulty - 1) * 2 + 3));
       console.log('Difficulty ' + gameDifficulty + ', ini ' + ((gameDifficulty - 1) * 2 + 1) + ', end ' + ((gameDifficulty - 1) * 2 + 3));
       console.log('Rpoint ' + randomIndex + ', val ' + totalBlocksA);
       console.log('Rpoint ' + randomIndex + ', val ' + totalBlocksA);
       console.log('total blocks A ' + totalBlocksA + ', total blocks B ');
       console.log('total blocks A ' + totalBlocksA + ', total blocks B ');
-      }
+    }
 
 
     // CREATING TOP FIGURE (A)
     // CREATING TOP FIGURE (A)
     let blockWidth = this.figureWidth / totalBlocksA; // Width of each block in A
     let blockWidth = this.figureWidth / totalBlocksA; // Width of each block in A
@@ -140,7 +139,7 @@ const squareTwo = {
       const yAux = yA + figureHeight + 10; // On the bottom of A
       const yAux = yA + figureHeight + 10; // On the bottom of A
       const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
       const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
       this.A.auxBlocks.push(auxBlock);
       this.A.auxBlocks.push(auxBlock);
-      }
+    }
 
 
     // 'total blocks' label for A : on the side of A
     // 'total blocks' label for A : on the side of A
     let xLabel = xA + this.figureWidth + 30;
     let xLabel = xA + this.figureWidth + 30;
@@ -179,7 +178,7 @@ const squareTwo = {
       const yAux = yB + figureHeight + 10; // On the bottom of B
       const yAux = yB + figureHeight + 10; // On the bottom of B
       const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
       const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
       this.B.auxBlocks.push(auxBlock);
       this.B.auxBlocks.push(auxBlock);
-      }
+    }
 
 
     // Label block B
     // Label block B
     xLabel = xB + this.figureWidth + 30;
     xLabel = xB + this.figureWidth + 30;
@@ -205,7 +204,7 @@ const squareTwo = {
 
 
     game.event.add('click', this.func_onInputDown);
     game.event.add('click', this.func_onInputDown);
     game.event.add('mousemove', this.func_onInputOver);
     game.event.add('mousemove', this.func_onInputOver);
-    },
+  },
 
 
   /**
   /**
    * Game loop
    * Game loop
@@ -218,16 +217,16 @@ const squareTwo = {
           // Lower selected blocks
           // Lower selected blocks
           for (let i = 0; i < self[cur].selected; i++) {
           for (let i = 0; i < self[cur].selected; i++) {
             self[cur].blocks[i].y += 2;
             self[cur].blocks[i].y += 2;
-            }
+          }
 
 
           // After fully lowering blocks, set fraction value
           // After fully lowering blocks, set fraction value
           if (self[cur].blocks[0].y >= self[cur].auxBlocks[0].y) {
           if (self[cur].blocks[0].y >= self[cur].auxBlocks[0].y) {
             self[cur].fractions[0].name = self[cur].selected;
             self[cur].fractions[0].name = self[cur].selected;
             self[cur].animate = false;
             self[cur].animate = false;
-            }
           }
           }
-        });
+        }
-      }
+      });
+    }
 
 
     // If A and B are already clicked
     // If A and B are already clicked
     if (self.A.hasClicked && self.B.hasClicked && !self.endLevel) {
     if (self.A.hasClicked && self.B.hasClicked && !self.endLevel) {
@@ -249,20 +248,19 @@ const squareTwo = {
           if (debugMode) console.log('completedLevels = ' + completedLevels);
           if (debugMode) console.log('completedLevels = ' + completedLevels);
 
 
           // Fractions are not equivalent : INCORRECT
           // Fractions are not equivalent : INCORRECT
-          }
+        } else {
-        else {
           if (audioStatus) game.audio.errorSound.play();
           if (audioStatus) game.audio.errorSound.play();
           game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
           game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
           mapMove = false; // Doesnt allow character to move to next level in map state
           mapMove = false; // Doesnt allow character to move to next level in map state
-          }
+        }
 
 
         self.postScore();
         self.postScore();
         self.endLevel = true;
         self.endLevel = true;
 
 
         // Reset delay values for next delay
         // Reset delay values for next delay
         self.delay = 0;
         self.delay = 0;
-        }
       }
       }
+    }
 
 
     // Wait a bit and go to map state
     // Wait a bit and go to map state
     if (self.endLevel) {
     if (self.endLevel) {
@@ -270,11 +268,11 @@ const squareTwo = {
 
 
       if (self.delay >= 80) {
       if (self.delay >= 80) {
         game.state.start('map');
         game.state.start('map');
-        }
       }
       }
+    }
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
   /* EVENT HANDLER */
   /* EVENT HANDLER */
@@ -291,18 +289,18 @@ const squareTwo = {
     // Click block in A
     // Click block in A
     self.A.blocks.forEach(cur => {
     self.A.blocks.forEach(cur => {
       if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
       if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
-      });
+    });
 
 
     // Click block in B
     // Click block in B
     self.B.blocks.forEach(cur => {
     self.B.blocks.forEach(cur => {
       if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
       if (game.math.isOverIcon(x, y, cur)) self.func_clickSquare(cur);
-      });
+    });
 
 
     // Click navigation icons
     // Click navigation icons
     navigationIcons.func_onInputDown(x, y);
     navigationIcons.func_onInputDown(x, y);
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
   /**
   /**
    * Called by mouse move event
    * Called by mouse move event
@@ -320,8 +318,8 @@ const squareTwo = {
       if (game.math.isOverIcon(x, y, cur)) {
       if (game.math.isOverIcon(x, y, cur)) {
         flagA = true;
         flagA = true;
         self.func_overSquare(cur);
         self.func_overSquare(cur);
-        }
+      }
-      });
+    });
     if (!flagA) self.func_outSquare('A');
     if (!flagA) self.func_outSquare('A');
 
 
     // Mouse over B : show fraction
     // Mouse over B : show fraction
@@ -329,8 +327,8 @@ const squareTwo = {
       if (game.math.isOverIcon(x, y, cur)) {
       if (game.math.isOverIcon(x, y, cur)) {
         flagB = true;
         flagB = true;
         self.func_overSquare(cur);
         self.func_overSquare(cur);
-        }
+      }
-      });
+    });
     if (!flagB) self.func_outSquare('B');
     if (!flagB) self.func_outSquare('B');
 
 
     if (!flagA && !flagB) document.body.style.cursor = 'auto';
     if (!flagA && !flagB) document.body.style.cursor = 'auto';
@@ -339,7 +337,7 @@ const squareTwo = {
     navigationIcons.func_onInputOver(x, y);
     navigationIcons.func_onInputOver(x, y);
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
   /* CALLED BY EVENT HANDLER */
   /* CALLED BY EVENT HANDLER */
@@ -361,8 +359,7 @@ const squareTwo = {
         self[otherSet].warningText.name = '';
         self[otherSet].warningText.name = '';
 
 
         self.func_outSquare(curSet);
         self.func_outSquare(curSet);
-        }
+      } else {
-      else {
         document.body.style.cursor = 'pointer';
         document.body.style.cursor = 'pointer';
 
 
         self.A.warningText.name = '';
         self.A.warningText.name = '';
@@ -371,7 +368,7 @@ const squareTwo = {
         // Selected blocks become fully visible
         // Selected blocks become fully visible
         for (let i in self[curSet].blocks) {
         for (let i in self[curSet].blocks) {
           self[curSet].blocks[i].alpha = (i <= curBlock.index) ? 1 : 0.5;
           self[curSet].blocks[i].alpha = (i <= curBlock.index) ? 1 : 0.5;
-          }
+        }
 
 
         self[curSet].fractions[0].name = curBlock.index + 1; // Nominator : selected blocks
         self[curSet].fractions[0].name = curBlock.index + 1; // Nominator : selected blocks
         self[curSet].fractions[1].name = self[curSet].blocks.length; // Denominator : total blocks
         self[curSet].fractions[1].name = self[curSet].blocks.length; // Denominator : total blocks
@@ -382,9 +379,9 @@ const squareTwo = {
         self[curSet].fractions[2].x = newX;
         self[curSet].fractions[2].x = newX;
 
 
         self[curSet].fractions[0].alpha = 1;
         self[curSet].fractions[0].alpha = 1;
-        }
       }
       }
-    },
+    }
+  },
 
 
   /**
   /**
    * Function called when cursor is out of a valid rectangle
    * Function called when cursor is out of a valid rectangle
@@ -399,9 +396,9 @@ const squareTwo = {
 
 
       self[curSet].blocks.forEach(cur => {
       self[curSet].blocks.forEach(cur => {
         cur.alpha = 0.5;
         cur.alpha = 0.5;
-        });
+      });
-      }
+    }
-    },
+  },
 
 
   /**
   /**
    * Function called when player clicked a valid rectangle
    * Function called when player clicked a valid rectangle
@@ -417,7 +414,7 @@ const squareTwo = {
       // Turn auxiliar blocks invisible
       // Turn auxiliar blocks invisible
       for (let i in self[curSet].blocks) {
       for (let i in self[curSet].blocks) {
         if (i > curBlock.index) self[curSet].auxBlocks[i].alpha = 0;
         if (i > curBlock.index) self[curSet].auxBlocks[i].alpha = 0;
-        }
+      }
 
 
       // Turn value label invisible
       // Turn value label invisible
       self[curSet].label.alpha = 0;
       self[curSet].label.alpha = 0;
@@ -438,22 +435,22 @@ const squareTwo = {
 
 
       self[curSet].hasClicked = true; // Inform player have clicked in current block set
       self[curSet].hasClicked = true; // Inform player have clicked in current block set
       self[curSet].animate = true; // Let it initiate animation
       self[curSet].animate = true; // Let it initiate animation
-      }
+    }
 
 
     game.render.all();
     game.render.all();
-    },
+  },
 
 
 
 
   /* METADATA FOR GAME */
   /* METADATA FOR GAME */
 
 
   /**
   /**
-   * Saves players data after level
+   * Saves players data after level ends - to be sent to database
    *
    *
    * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
    * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
-   * @see ./php/save.php
+   * @see /php/save.php
    */
    */
   postScore: function () {
   postScore: function () {
-    // Saves player data to send to the database
+    // Creates string that is going to be sent to db
     const data = '&line_game=' + gameShape
     const data = '&line_game=' + gameShape
       + '&line_mode=' + levelType
       + '&line_mode=' + levelType
       + '&line_oper=Equal'
       + '&line_oper=Equal'
@@ -466,8 +463,7 @@ const squareTwo = {
       + ', valueA: ' + self.A.selected
       + ', valueA: ' + self.A.selected
       + ', numBlocksB: ' + self.B.blocks.length
       + ', numBlocksB: ' + self.B.blocks.length
       + ', valueB: ' + self.B.selected;
       + ', valueB: ' + self.B.selected;
+    sendToDB(data);
+  }
 
 
-    postScore(data);
+};
-    }
-
-  };

+ 16 - 16
php/README.md

@@ -1,18 +1,18 @@
 #  save.php
 #  save.php
 
 
-iFractions is developed to run mainly on the client side. However, it communicates with a database using MySQL to save the player information after each level. The file **save.php** manages the connection between the game and the database.
+iFractions is developed to run mainly on the client side. However, it communicates with a MySQL database to save info about the player's progress after each level. There's a PHP file called **save.php** that manages the connection between the game and the database. Also, the asynchronous communication is stablished using **XMLHTTPRequest**.
 
 
 # How to set up the database connection correctly
 # How to set up the database connection correctly
 
 
-In order for iFractions to successfully establish a connection to the database you must:
+First you'll need a MySQL database installed on the server (more info in https://www.mysql.com).
 
 
-1. set up a MySQL database.
+Now, in order for iFractions to successfully establish a connection to the database you must:
+
+1. create and set up the database for the game.
 2. update /php/save.php 
 2. update /php/save.php 
 3. update /js/globals.js
 3. update /js/globals.js
 
 
-## 1) Creating the MySQL database for iFractions
+## 1) Creating the database for iFractions
-
-You must have MySQL installed on the server. 
 
 
 Considering the database name to be **db_ifractins** and the table to be **ifractions**, you can setup the MySQL database as follows:
 Considering the database name to be **db_ifractins** and the table to be **ifractions**, you can setup the MySQL database as follows:
 
 
@@ -37,11 +37,13 @@ Considering the database name to be **db_ifractins** and the table to be **ifrac
 		PRIMARY KEY (line_id)
 		PRIMARY KEY (line_id)
 	) ENGINE = InnoDB AUTO_INCREMENT = 1 DEFAULT CHARSET = latin1;
 	) ENGINE = InnoDB AUTO_INCREMENT = 1 DEFAULT CHARSET = latin1;
 
 
+Note that each column has the prefix **line_**.
+
 ## 2) /php/save.php
 ## 2) /php/save.php
 
 
 You have to set values for the following variables in **/php/save.php** to match the database's:
 You have to set values for the following variables in **/php/save.php** to match the database's:
 
 
-	$servername = "localhost"; 	// INSERT MYSQL server name
+	$servername = "localhost"; 	// INSERT MySQL server
 	$username = "put_username";	// INSERT MySQL user name
 	$username = "put_username";	// INSERT MySQL user name
 	$password = "put_password";	// INSERT MySQL password
 	$password = "put_password";	// INSERT MySQL password
 	$dbname = "db_ifractions";	// INSERT database name (default=db_ifractions) 
 	$dbname = "db_ifractions";	// INSERT database name (default=db_ifractions) 
@@ -49,7 +51,7 @@ You have to set values for the following variables in **/php/save.php** to match
 
 
 ## 3) /js/globals.js
 ## 3) /js/globals.js
 
 
-There is a global function **postScore()** inside /js/globals.js. When the information is collected on the current game file, it is sent as a parameter to this function. Here is where all the information collecting is completed, the data is sent to /php/save.php and the connection to the database done.
+Inside **/js/globals.js** there's a global function called **sendToDB()**. When the player's information is collected after each game, the game file sends it as a parameter to **sendToDB()**. It makes an asynchronous call to **/php/save.php**, that executes the connection to the database.
 
 
 	const data = 'line_ip='// INSERT the IP of the machine where the MySQL was set up
 	const data = 'line_ip='// INSERT the IP of the machine where the MySQL was set up
 		+ '&line_name=' + //player's name
 		+ '&line_name=' + //player's name
@@ -59,12 +61,12 @@ There is a global function **postScore()** inside /js/globals.js. When the infor
 
 
 # Where do we use the database in the code?
 # Where do we use the database in the code?
 
 
-There is also a function **postScore()** in every game file:
+There is a function **postScore()** in every game file:
-* /js/gameSquareOne.js
+* /js/squareOne.js
-* /js/gameSquareTwo.js
+* /js/squareTwo.js
-* /js/gameCircleOne.js
+* /js/circleOne.js
 
 
-After each level is completed, information about the player's progress is sent do the database through the function **postScore()**. The data collected in the game is structured as a string that is going to be sent to the database (as can be seen below).
+After each level is completed (with the player's answer being correct or not), before going back to the level map, the function **postScore()**, is called. It joins all the player's progress information into a string (as can be seen below), that is sent as a parameter to **sendToDB()**, from **/js/globals.js**, that sends it to the database.
 
 
 	const data = '&line_game=' + // collect game shape
 	const data = '&line_game=' + // collect game shape
 	+ '&line_mode=' + // collect level type
 	+ '&line_mode=' + // collect level type
@@ -73,6 +75,4 @@ After each level is completed, information about the player's progress is sent d
 	+ '&line_posi=' + // collect the players position on the map
 	+ '&line_posi=' + // collect the players position on the map
 	+ '&line_resu=' + // collect status for players answer (correct or incorrect)
 	+ '&line_resu=' + // collect status for players answer (correct or incorrect)
 	+ '&line_time=' + // collect time spent finishing the game
 	+ '&line_time=' + // collect time spent finishing the game
-	+ '&line_deta=' + // collect extra details specific to current game
+	+ '&line_deta=' + // collect extra details specific to current game
-
-The variable **data** is then sent as a parameter to the global function **postScore()** in **/js/globals.js**, that completes the string and sends the information to the database using /php/save.php.

+ 7 - 8
php/save.php

@@ -11,7 +11,7 @@
 // @see js/squareTwo.js
 // @see js/squareTwo.js
 
 
 // Change these values according to your database settings
 // Change these values according to your database settings
-$servername = "localhost";  // INSERT MySQL name (e.g "line.ime.usp.br")
+$servername = "localhost";  // INSERT MySQL server (e.g "line.ime.usp.br")
 $username = "put_username"; // INSERT MySQL user name
 $username = "put_username"; // INSERT MySQL user name
 $password = "put_password"; // INSERT MySQL password
 $password = "put_password"; // INSERT MySQL password
 $dbname = "db_ifractions";  // INSERT database name (default="db_ifractions")
 $dbname = "db_ifractions";  // INSERT database name (default="db_ifractions")
@@ -21,7 +21,7 @@ $tablename = "ifractions";  // INSERT table name (default="ifractions")
 function remove_accents ($stripAccents) {
 function remove_accents ($stripAccents) {
   // $stripAccents = preg_replace('/[^\x20-\x7E]/','', $stripAccents); // remove all special characters - if necessary, uncomment it
   // $stripAccents = preg_replace('/[^\x20-\x7E]/','', $stripAccents); // remove all special characters - if necessary, uncomment it
   return $stripAccents;
   return $stripAccents;
-  }
+}
 
 
 // Get some information about the client IP
 // Get some information about the client IP
 function clientIP () {
 function clientIP () {
@@ -35,9 +35,9 @@ function clientIP () {
   $resp = gethostbyaddr($ip);
   $resp = gethostbyaddr($ip);
   if (isset($resp) && strlen($resp)>0) {
   if (isset($resp) && strlen($resp)>0) {
     $strIP .= "; " . $resp;
     $strIP .= "; " . $resp;
-    }
-  return $strIP;
   }
   }
+  return $strIP;
+}
 
 
 // Create connection
 // Create connection
 $conn = new mysqli($servername, $username, $password, $dbname);
 $conn = new mysqli($servername, $username, $password, $dbname);
@@ -45,7 +45,7 @@ $conn = new mysqli($servername, $username, $password, $dbname);
 // Check connection
 // Check connection
 if ($conn->connect_error) {
 if ($conn->connect_error) {
   die("Connection failed: " . $conn->connect_error);
   die("Connection failed: " . $conn->connect_error);
-  }
+}
 
 
 $ip = clientIP();
 $ip = clientIP();
 
 
@@ -80,11 +80,10 @@ VALUES
 if ($conn->query($sql) === TRUE) {
 if ($conn->query($sql) === TRUE) {
   print "Saved.";
   print "Saved.";
   $result = "OK";
   $result = "OK";
-  }
+  } else {
-else {
   print "Error: " . $sql . "<br>" . $conn->error;
   print "Error: " . $sql . "<br>" . $conn->error;
   $result = "Error: " . $conn->error;
   $result = "Error: " . $conn->error;
-  }
+}
 
 
 // DEBUG
 // DEBUG
 $date = date('Y_m_d_H_i_s');
 $date = date('Y_m_d_H_i_s');