add control panels (blocks, steps, loop)

src/components/ControlPanel.js

@@ -28,16 +28,16 @@ export class ControlPanel {
         // Label
         fill(colors.tertiary);
         noStroke();
-        rect(this.x, this.y, this.getPanelWidth(), this.getTextBoxHeight(), 5);
+        rect(this.x, this.y, this._getPanelWidth(), this._getTextBoxHeight(), 5);
         fill(colors.secondary);
         textAlign(CENTER, CENTER);
         textSize(this.fontSize);
-        text(this.name, this.x + this.getPanelWidth() / 2, this.y + this.getTextBoxHeight() /2);
+        text(this.name, this.x + this._getPanelWidth() / 2, this.y + this._getTextBoxHeight() /2);
 
         // White panel
         fill(255);
         noStroke();
-        rect(this.x, this.y + 24 + this.gap, this.getPanelWidth(), this.boxHeight + this.boxSpacing, 6);
+        rect(this.x, this.y + 24 + this.gap, this._getPanelWidth(), this.boxHeight + this.boxSpacing, 6);
 
         // Boxes
         for (let i = 0; i < this.numBoxes; i++) {
@@ -58,17 +58,21 @@ export class ControlPanel {
             } else {
                 this.empty.draw(bx + this.boxWidth / 2 - 20, by + this.boxHeight / 2 - 20);
             }
-        }
-        
-
-        
+        }        
     }
 
-    getPanelWidth() {
+    setPosition(x, y){
+        blocks.x = x;
+        blocks.y = y;
+    }
+
+
+    //helper functions
+    _getPanelWidth() {
         return this.numBoxes * (this.boxWidth + this.boxSpacing) + 12;
     }
 
-    getTextBoxHeight(){
+    _getTextBoxHeight(){
         return this.fontSize + 16;
     }
 }

src/scenes/gameScene.js

@@ -10,6 +10,8 @@ export default function GameScene() {
   let cat;
   let runButton;
   let blocks;
+  let steps;
+  let loops;
 
   this.name = "GameScene";
 
@@ -17,10 +19,10 @@ export default function GameScene() {
     cat = new Cat(width / 6, height - 167.5, 150);
 
     runButton = new MyButton({
-      x: width / 16 * 15,
-      y: height / 16,
+      x: width / 32 * 28.5,
+      y: height / 32,
       text: "run >>",
-      mode: "CENTER",
+      mode: "CORNER",
       style: buttonS,
       onPress: () => {
         console.log("Run button pressed");
@@ -28,26 +30,40 @@ export default function GameScene() {
     });
 
     blocks = new ControlPanel({
-      name: 'blocks',
-      x: width / 32,
+      name: 'building blocks',
+      x: width / 32 * 7,
+      y: height / 32,
+      numBoxes: 3
+    });
+
+    steps = new ControlPanel({
+      name: 'steps',
+      x: width / 32 * 12,
+      y: height / 32,
+      numBoxes: 6
+    });
+
+    loops = new ControlPanel({
+      name: 'loop',
+      x: width / 32 * 21,
       y: height / 32,
       numBoxes: 4
-    });
+    })
 
   };
 
   this.draw = () => {
     background(colors.primary);
-    rectMode(CENTER);
 
     fill(colors.tertiary);
     textSize(128);
     stroke(colors.secondary);
     strokeWeight(7);
-    
-    text('dan yap', width / 2, height / 2 - 100);
+    textAlign(LEFT, TOP);
+    text('lvl.3', width / 32, height /32 - 4);
 
     // Ground
+    rectMode(CENTER);
     fill(colors.secondary);
     rect(width / 2, height - 100 / 2, width, 80);
 
@@ -55,13 +71,15 @@ export default function GameScene() {
     cat.draw();
     runButton.draw();
     blocks.draw();
+    steps.draw();
+    loops.draw();
 
   };
 
   this.onResize = () => {
     cat.setPosition(width / 2, height - 177.5);
     runButton.setPosition((width / 16) * 15, height / 16);
-    blocks.x = width / 16 - 40;
-    blocks.y = height / 16 + 8;
+    blocks.setPosition(width / 32, height / 32);
+    steps.setPosition((width / 32) * 4, height / 32);
   }
 }