refactor: update interface and remove ending operation (temporary)

js/games/squareOne.js

@@ -48,6 +48,7 @@ const squareOne = {
   floor: undefined,
 
   operation: undefined,
+  floorDirt: undefined,
 
   /**
    * Main code
@@ -66,6 +67,7 @@ const squareOne = {
     }
 
     this.operation = [];
+    this.floorDirt = [];
     this.ui = {
       arrow: undefined,
       help: undefined,
@@ -211,15 +213,10 @@ const squareOne = {
         self.control.divisorsList += curDivisor + ','; // List of divisors (for postScore())
         correctXA += curBlockWidth * direc;
 
-        const curBlock = game.add.geom.rect(
+        const curBlock = game.add.image(
           self.default.x0,
           self.default.y0 - i * self.default.height - lineWidth,
-          curBlockWidth,
-          self.default.height,
-          fillColor,
-          1,
-          lineColor,
-          lineWidth
+          'floor_grass_part_' + curDivisor
         );
         curBlock.anchor(gameOperation === 'minus' ? 1 : 0, 1);
         curBlock.blockValue = divisor / curDivisor;
@@ -410,6 +407,18 @@ const squareOne = {
           }
         }
 
+        const anchor = gameOperation == 'minus' ? 1 : 0;
+
+        // Dirt floor pieces
+        const dirtFloor = game.add.image(
+          curX,
+          context.canvas.height - self.default.height * 2 - 10,
+          'floor_dirt_' + divisor,
+          1
+        );
+        dirtFloor.anchor(anchor, 0);
+        self.floorDirt.push(dirtFloor);
+
         // Create floor block
         const curBlock = game.add.geom.rect(
           curX,
@@ -418,10 +427,9 @@ const squareOne = {
           self.default.height + 10,
           colors.blueBgInsideLevel,
           1,
-          colors.gray,
+          colors.brown,
           lineWidth
         );
-        const anchor = gameOperation == 'minus' ? 1 : 0;
         curBlock.anchor(anchor, 0);
         curBlock.blockValue = 1;
 
@@ -522,20 +530,25 @@ const squareOne = {
     },
     renderOperationUI: () => {
       const y0 = 500;
-      const color = self.control.isCorrect ? colors.green : colors.red;
-      const font = { ...textStyles.fraction, fill: color };
+      // const color = self.control.isCorrect ? colors.green : colors.red;
+      const font = textStyles.fraction;
       const offsetX = 50;
+      let curX = 0;
 
       // Display stacked blocks operation
       const displayMainOperation = self.operation.length ? true : false;
-      if (displayMainOperation) {
+      if (displayMainOperation && false) {
         let signs = [];
         let nominators = [];
         let denominators = [];
         const x0 = self.operation[self.operation.length - 1].x;
-        let curX = x0 + offsetX;
+        curX = x0 + offsetX;
 
         // Setup 1
+        const notEnoughBlocks =
+          self.stack.curIndex === self.stack.list.length - 1 &&
+          !self.control.isCorrect;
+
         for (let i = 0; i < self.operation.length; i += 2) {
           const sign = self.operation[i].name;
 
@@ -563,9 +576,9 @@ const squareOne = {
           resultNominator < 0 ? -resultNominator : resultNominator;
 
         // Fraction result
-        font.fill = colors.black;
+        //font.fill = colors.black;
         game.add.text(curX, y0, '=', font);
-        font.fill = color;
+        //font.fill = notEnoughBlocks ? colors.black : color;
         if (gameOperation === 'minus') {
           curX += offsetX;
           game.add.text(curX, y0, '-', font);
@@ -586,7 +599,7 @@ const squareOne = {
             curX + lineWidth,
             y0 + 15,
             4,
-            color,
+            colors.black, //notEnoughBlocks ? colors.black : color,
             mmc === 1 || resultNominatorUnsigned === 0 ? 0 : 1
           );
         }
@@ -599,9 +612,9 @@ const squareOne = {
             curX += offsetX;
           }
           curX += offsetX;
-          font.fill = colors.black;
+          //font.fill = colors.black;
           game.add.text(curX, y0, '=', font);
-          font.fill = color;
+          //font.fill = notEnoughBlocks ? colors.black : color;
           if (gameOperation === 'minus') {
             curX += offsetX;
             game.add.text(curX, y0, '-', font);
@@ -619,11 +632,9 @@ const squareOne = {
 
       const correctFloorIndex =
         gameMode === 'a' ? self.floor.correctIndex : self.floor.selectedIndex;
-      console.log(correctFloorIndex);
 
       // Display flag
-      const displayFlag = true;
-      if (displayFlag) {
+      if (false) {
         const floorFlag = game.add.image(
           self.floor.list[correctFloorIndex].x +
             self.floor.list[0].width * self.control.direc -
@@ -653,9 +664,8 @@ const squareOne = {
       }
 
       // Display floor blocks operation
-      const displayFloorOperation = true;
-      if (displayFloorOperation) {
-        font.fill = colors.black;
+      if (false) {
+        //font.fill = colors.black;
 
         const y = self.tractor.y - 135;
         let x =
@@ -664,13 +674,10 @@ const squareOne = {
           15;
 
         const subdivision = self.floor.subdivision;
-        console.log(subdivision);
 
         const decimalResult = (correctFloorIndex + 1) / subdivision;
-        console.log(decimalResult);
 
         const floorDecimalResult = Math.floor(decimalResult);
-        console.log(floorDecimalResult);
 
         const nominator =
           correctFloorIndex + 1 - floorDecimalResult * subdivision;
@@ -681,6 +688,27 @@ const squareOne = {
           x += offsetX;
         }
 
+        // const pointerX0 = x + 15;
+        // const pointerY0 = y + 152;
+        // const pointerYe = 500 - 20;
+
+        // game.add.geom.line(
+        //   pointerX0,
+        //   pointerY0,
+        //   pointerX0,
+        //   pointerYe,
+        //   6,
+        //   colors.white
+        // );
+        // game.add.geom.line(
+        //   pointerX0,
+        //   pointerYe,
+        //   curX + 100,
+        //   pointerYe,
+        //   6,
+        //   colors.white
+        // );
+
         game.add.text(x, y, floorDecimalResult, font);
 
         if (decimalResult > floorDecimalResult) {
@@ -696,13 +724,14 @@ const squareOne = {
           let newNom = floorDecimalResult * subdivision + nominator;
           let newDen = subdivision;
 
+          // font.fill = color;
           if (gameOperation === 'minus') {
             x += offsetX;
             game.add.text(x, y, sign, font);
           }
-
           x += offsetX;
           game.add.text(x, y, newNom + '\n' + newDen, font);
+          // font.fill = colors.black;
 
           const mdcAux = game.math.mdc(newNom, newDen);
           const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
@@ -710,16 +739,17 @@ const squareOne = {
             newNom /= mdc;
             newDen /= mdc;
 
-            x += 80;
+            x += offsetX;
             game.add.text(x, y, '=', font);
 
+            // font.fill = color;
             if (gameOperation === 'minus') {
               x += offsetX;
               game.add.text(x, y, sign, font);
             }
-
-            x += 60;
+            x += offsetX;
             game.add.text(x, y, newNom + '\n' + newDen, font);
+            // font.fill = colors.black;
           }
         }
       }
@@ -800,6 +830,7 @@ const squareOne = {
       // fill floor
       for (let i = 0; i <= self.floor.curIndex; i++) {
         self.floor.list[i].fillColor = 'transparent';
+        self.floorDirt[i].name = 'floor_grass_' + self.floor.subdivision;
       }
       // lower blocks
       self.stack.list.forEach((block) => {
@@ -821,54 +852,39 @@ const squareOne = {
           currentBlock.fraction.labels[2].alpha = 0;
       }
 
-      const curSignString = currentBlock.fraction.labels[1].name;
-      const curSign = game.add.text(
-        100 + self.stack.curIndex * 100 - 50,
-        500,
-        curSignString == '-' ? '-' : '+',
-        font
-      );
-      curSign.alpha = self.stack.curIndex == 0 && curSignString == '' ? 0 : 1;
-      self.operation.push(curSign);
-
-      // if (self.stack.curIndex > 0) {
-      //   self.operation.push(
-      //     game.add.text(
-      //       100 + self.stack.curIndex * 100 - 50,
-      //       500,
-      //       currentBlock.fraction.labels[1].name === '-' ? '-' : '+',
-      //       font
-      //     )
-      //   );
-      // } else {
-      //   const sign = game.add.text(
-      //     100 + self.stack.curIndex * 100 - 50,
-      //     500,
-      //     currentBlock.fraction.labels[1].name === '-' ? '-' : '+',
-      //     font
-      //   );
-      //   sign.alpha = 0;
-      //   self.operation.push(sign);
-      // }
-      const fractionResult = game.add.text(
-        100 + self.stack.curIndex * 100,
-        500,
-        currentBlock.fraction.labels[0].name,
-        font
-      );
-      fractionResult.lineHeight = 70;
-      self.operation.push(fractionResult);
-
-      game.add.geom.line(
-        100 + self.stack.curIndex * 100,
-        500 + 13,
-        100 + self.stack.curIndex * 100 + 40,
-        500 + 13,
-        4,
-        colors.black,
-        currentBlock.fraction.labels[0].name.split('\n').length === 1 ? 0 : 1
-      );
+      if (false) {
+        // Display operation for the current lowered block
+        const curSignString = currentBlock.fraction.labels[1].name;
+        const curSign = game.add.text(
+          100 + self.stack.curIndex * 100 - 50,
+          500,
+          curSignString == '-' ? '-' : '+',
+          font
+        );
+        curSign.alpha = self.stack.curIndex == 0 && curSignString == '' ? 0 : 1;
+        self.operation.push(curSign);
 
+        const fractionResult = game.add.text(
+          100 + self.stack.curIndex * 100,
+          500,
+          currentBlock.fraction.labels[0].name,
+          font
+        );
+        fractionResult.lineHeight = 70;
+        self.operation.push(fractionResult);
+
+        game.add.geom.line(
+          100 + self.stack.curIndex * 100,
+          500 + 13,
+          100 + self.stack.curIndex * 100 + 40,
+          500 + 13,
+          4,
+          colors.black,
+          currentBlock.fraction.labels[0].name.split('\n').length === 1 ? 0 : 1
+        );
+      }
+
+      // Checks
       const isLastFloorBlock = self.floor.curIndex === self.floor.selectedIndex;
       const notEnoughStackBlocks =
         self.stack.curIndex === self.stack.list.length - 1;
@@ -976,10 +992,11 @@ const squareOne = {
 
         // Hide solution pointer
         if (self.ui.help != undefined) self.ui.help.alpha = 0;
-        // Hide unselected blocks
-        for (let i = curSet.list.length - 1; i > clickedIndex; i--) {
-          curSet.list[i].alpha = 0;
-          if (gameMode === 'b') {
+
+        //Hide unselected blocks
+        if (gameMode === 'b') {
+          for (let i = curSet.list.length - 1; i > clickedIndex; i--) {
+            curSet.list[i].alpha = 0;
             // Hide unselected blocks fractions
             curSet.list[i].fraction.labels.forEach((lbl) => {
               if (lbl) lbl.alpha = 0;

js/globals/globals_debug.js

@@ -7,7 +7,7 @@ const debugState = {
   customMenu: {
     skip: true,
     getData: () => {
-      return { mode: 'a', operation: 'plus', difficulty: 2, label: true };
+      return { mode: 'b', operation: 'plus', difficulty: 3, label: true };
     },
   },
   map: { skip: true },

js/globals/globals_functions.js

@@ -331,6 +331,7 @@ const renderBackground = (type) => {
       150,
       '#48d813'
     );
+    return;
   }
 };
 

js/globals/globals_tokens.js

@@ -32,6 +32,7 @@ const colors = {
   white: '#fff',
   gray: '#1f1f1f',
   black: '#000',
+  brown: '#5a3e0d',
 };
 
 const font = {
@@ -137,6 +138,16 @@ const url = {
       ['flag_red', baseUrl + 'scene/flag_red.png'],
       ['flag_green', baseUrl + 'scene/flag_green.png'],
       ['floor_grass', baseUrl + 'scene/floor_grass.png'],
+      ['floor_grass_1', baseUrl + 'scene/floor_grass_1.png'],
+      ['floor_grass_2', baseUrl + 'scene/floor_grass_2.png'],
+      ['floor_grass_4', baseUrl + 'scene/floor_grass_3.png'],
+      ['floor_grass_part_1', baseUrl + 'scene/floor_grass_part_1.png'],
+      ['floor_grass_part_2', baseUrl + 'scene/floor_grass_part_2.png'],
+      ['floor_grass_part_4', baseUrl + 'scene/floor_grass_part_3.png'],
+      ['floor_dirt', baseUrl + 'scene/floor_dirt.png'],
+      ['floor_dirt_1', baseUrl + 'scene/floor_dirt_1.png'],
+      ['floor_dirt_2', baseUrl + 'scene/floor_dirt_2.png'],
+      ['floor_dirt_4', baseUrl + 'scene/floor_dirt_3.png'],
       ['floor_road', baseUrl + 'scene/floor_road.png'],
       ['rock', baseUrl + 'scene/rock.png'],
       ['progress_bar_tile', baseUrl + 'scene/progress_bar_tile.png'],