changing assets

README.md

@@ -43,3 +43,4 @@ iFractions is one of the iLM (Interactive Learning Modules) provided by the iAss
   * analyze the student's progress on the activities
 
   * get the automatic evaluation for the activities
+

src/js/games/circleOne.js

@@ -57,7 +57,7 @@ const circleOne = {
 
     let hasBaseDifficulty = false; // Will validate that level isnt too easy (has at least one '1/difficulty' fraction)
 
-    const startY = context.canvas.height - 75;
+    const startY = context.canvas.height - 75 * 1.6;
     const startX = gameOperation == 'Minus' ? 66 + 5 * 156 : 66; // Initial 'x' coordinate for the kid and the baloon
     this.correctX = startX; // Ending position, accumulative
 
@@ -66,18 +66,18 @@ const circleOne = {
     renderBackground();
 
     // Road
-    this.road = game.add.image(47, startY - 11, 'road', 1.01, 0.94);
+    this.road = game.add.image(47, startY - 11, 'road', 1.515, 0.94);
 
     // Road points
-    const distanceBetweenPoints = 156; // Distance between road points
+    const distanceBetweenPoints = 156 * 1.5; // Distance between road points
 
     for (let i = 0; i <= 5; i++) {
       game.add
-        .image(66 + i * distanceBetweenPoints, startY, 'place_off', 0.3)
+        .image(startX + i * distanceBetweenPoints, startY, 'place_off', 0.45)
         .anchor(0.5, 0.5);
       game.add.text(
-        66 + i * distanceBetweenPoints,
-        startY + 34,
+        startX + i * distanceBetweenPoints,
+        startY + 34 * 1.5,
         i,
         textStyles.h2_blueDark
       );
@@ -318,7 +318,7 @@ const circleOne = {
       startY - 31 - this.circles.all.length * this.circles.diameter,
       'kid_walk',
       0,
-      0.8
+      1.2
     );
     this.kid.anchor(0.5, 0.8);
     if (gameOperation == 'Minus') {
@@ -333,7 +333,7 @@ const circleOne = {
       this.balloonPlace,
       startY - 176,
       'balloon',
-      1,
+      1.5,
       0.5
     );
     this.balloon.alpha = 0.5;
@@ -342,7 +342,8 @@ const circleOne = {
     this.basket = game.add.image(
       this.balloonPlace,
       startY - 54,
-      'balloon_basket'
+      'balloon_basket',
+      1.5
     );
     this.basket.anchor(0.5, 0.5);
 

src/js/games/squareOne.js

@@ -151,7 +151,7 @@ const squareOne = {
     }
 
     // Help pointer
-    this.help = game.add.image(0, 0, 'help_pointer', 0.75);
+    this.help = game.add.image(0, 0, 'help_pointer', 1.7);
     this.help.anchor(0.5, 0);
     this.help.alpha = 0;
 

src/js/games/squareTwo.js

@@ -95,16 +95,16 @@ const squareTwo = {
     // Add kid
     this.kidAnimation = game.add.sprite(
       100,
-      context.canvas.height - 128,
+      context.canvas.height - 128 * 1.5,
       'kid_standing',
       5,
-      0.8
+      1.2
     );
     this.kidAnimation.anchor(0.5, 0.7);
 
     // Width and Height of A and B
-    this.figureWidth = 400;
-    const figureHeight = 50;
+    this.figureWidth = 400 * 1.5;
+    const figureHeight = 50 * 1.5;
 
     // Coordinates for A and B
     let xA, xB, yA, yB;

src/js/globals/globals_functions.js

@@ -35,7 +35,7 @@ const navigationIcons = {
     this.left_text = game.add.text(xLeft, 110, '', textStyles.p_brown);
     this.left_text.align = 'left';
 
-    this.right_text = game.add.text(xRight + 50, 110, '', textStyles.p_brown);
+    this.right_text = game.add.text(xRight + 60, 110, '', textStyles.p_brown);
     this.right_text.align = 'right';
 
     // Left icons
@@ -48,7 +48,7 @@ const navigationIcons = {
         );
       } else {
         this.state = state;
-        this.iconsList.push(game.add.image(xLeft, 10, 'back', 1.5));
+        this.iconsList.push(game.add.image(xLeft - 5, 10, 'back', 1.5));
         xLeft += iconSize;
       }
     }
@@ -76,8 +76,9 @@ const navigationIcons = {
 
     if (rightIcon0) {
       // Turns game audio on/off
-      this.audioIcon = game.add.sprite(xRight, 10, 'audio', 1, 1.5);
+      this.audioIcon = game.add.sprite(xRight, 10, 'audio', 1, 1.6);
       this.audioIcon.curFrame = audioStatus ? 0 : 1;
+      this.audioIcon.anchor(0.3, 0);
       this.iconsList.push(this.audioIcon);
       xRight -= iconSize;
     }
@@ -85,6 +86,7 @@ const navigationIcons = {
     if (rightIcon1) {
       // Return to select language screen
       this.iconsList.push(game.add.image(xRight, 10, 'language', 1.5));
+      this.audioIcon.anchor(0, 0);
       xRight -= iconSize;
     }
   },

src/js/globals/globals_tokens.js

@@ -337,7 +337,9 @@ const url = {
       // Navigation icons on the top of the page
       ['audio', medSrc + 'navig_icon/audio.png', 2],
       // Interactive icons
-      ['select', medSrc + 'interac_icon/selectionBox.png', 2],
+      ['select', medSrc + 'interac_icon/selection_box.png', 2],
+      ['button', medSrc + 'interac_icon/button.png', 2],
+      ['btn_square', medSrc + 'interac_icon/button_square.png', 2],
       // Menu icons - Game modes
       ['mode0', medSrc + 'levels/squareOne_1.png', 2], // Square I : A
       ['mode1', medSrc + 'levels/squareOne_2.png', 2], // Square I : B

src/js/menus/menu_custom.js

@@ -74,11 +74,10 @@ const customMenuState = {
       console.log('DEBUG');
       //gameFrame().rect();
       //gameFrame().point(offsetW, offsetH);
-      //const s1 = 11;
-      //const c1 = 14;
-      //const s2 = 12;
+      const s1 = 11;
+      const c1 = 14;
+      const s2 = 12;
       //self.load(this.menuIcons[s1]);
-      //console.log(this.menuIcons);
     }
   },
 
@@ -163,11 +162,11 @@ const customMenuState = {
             // If its the clicked icon
             if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation')
               cur.curFrame = 1;
-            else if (cur.iconType == 'difficulty') cur.fillColor = colors.blue;
+            else if (cur.iconType == 'difficulty') cur.curFrame = 0;
           } else {
             if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation')
               cur.curFrame = 0;
-            else if (cur.iconType == 'difficulty') cur.fillColor = colors.gray;
+            else if (cur.iconType == 'difficulty') cur.curFrame = 1;
           }
         }
       });
@@ -305,7 +304,7 @@ const customMenuState = {
       y + offsetH + 90,
       'select',
       frame,
-      0.18
+      1.4
     );
     selectionBox.anchor(0.5, 0.5);
     selectionBox.iconType = 'selectionBox';
@@ -373,23 +372,24 @@ const customMenuState = {
       const curX = x + (50 + 10) * i;
 
       // Difficulty menuIcons
-      const icon = game.add.geom.rect(
-        curX,
-        y - 5,
-        50,
-        50,
-        undefined,
-        0,
-        colors.gray,
-        1
-      );
+      // const icon = game.add.geom.rect(
+      //   curX,
+      //   y - 5,
+      //   50,
+      //   50,
+      //   undefined,
+      //   0,
+      //   colors.gray,
+      //   1
+      // );
+      const icon = game.add.sprite(curX, y - 5, 'btn_square', 1, 0.8);
       icon.anchor(0.5, 0.5);
       icon.difficulty = i + 1;
       icon.iconType = 'difficulty';
 
       if (i == 0) {
         gameDifficulty = icon.difficulty;
-        icon.fillColor = colors.blue;
+        icon.curFrame = 0;
       }
       self.menuIcons.push(icon);
 

src/js/menus/menu_main.js

@@ -79,9 +79,9 @@ const menuState = {
         // "more information" button
         infoIcon = game.add.image(
           x + 110,
-          context.canvas.height / 2 - 100 - 80,
+          context.canvas.height / 2 - 100 - 80 - 10,
           'info',
-          1.2,
+          1,
           1
         );
         infoIcon.anchor(0.5, 0.5);

src/js/menus/preMenu_name.js

@@ -28,17 +28,14 @@ const nameState = {
       textStyles.h4_brown
     );
 
-    // Set 'ok' button that gets player's information
-    this.okBtn = game.add.geom.rect(
-      context.canvas.width / 2 - 124,
-      context.canvas.height / 2 + 93, //62,
-      248, //168,
-      82, //60,
-      undefined,
+    this.okBtn = game.add.sprite(
+      context.canvas.width / 2,
+      context.canvas.height / 2 + 93 + 44,
+      'button',
       0,
-      colors.gray,
-      0.6
+      1.5
     );
+    this.okBtn.anchor(0.5, 0.5);
 
     // Set button Text
     game.add.text(
@@ -134,10 +131,10 @@ const nameState = {
 
     if (game.math.isOverIcon(x, y, cur)) {
       document.body.style.cursor = 'pointer';
-      cur.alpha = 0.4;
+      cur.alpha = 0.8;
     } else {
       document.body.style.cursor = 'auto';
-      cur.alpha = 0.6;
+      cur.alpha = 1;
     }
 
     game.render.all();