add clickable arrow

src/components/Arrow2.js

@@ -0,0 +1,41 @@
+export class CLickableArrow {
+    static images = {};
+  
+    static preload() {
+      Arrow.images.up = loadImage('/assets/up.png');
+      Arrow.images.down = loadImage('/assets/down.png');
+      Arrow.images.left = loadImage('/assets/left.png');
+      Arrow.images.right = loadImage('/assets/right.png');
+      Arrow.images.empty = loadImage('/assets/empty.png');
+    }
+  
+    constructor(direction, clickable=false) {
+      this.direction = direction;
+      this.image = Arrow.images[direction];
+      this.clickable = clickable;
+      // this.onClick = onClick;
+      this.x = 0;
+      this.y = 0;
+      this.width = 40;
+      this.height = 40;
+    }
+  
+    draw(x, y) {
+      this.x = x;
+      this.y = y;
+      image(this.image, x, y, this.width, this.height);
+    }
+
+    handleClick(mouseX, mouseY) {
+      if (this.isMouseOver(mouseX, mouseY) && this.onClick) {
+        this._onClick();
+      }
+    }
+
+    //helpers
+    _onClick(){
+      console.log('clicked!');
+    }
+
+  }
+  

src/components/ControlPanel.js

@@ -16,6 +16,11 @@ export class ControlPanel {
         this.gap = this.fontSize;
     }
 
+    setContents(contents){
+        this.contents = contents;
+        console.log(this.contents);
+    }
+
     updateBox(index, content) {
         if (index >= 0 && index < this.numBoxes) {
             this.contents[index] = content;
@@ -41,14 +46,8 @@ export class ControlPanel {
 
         // Boxes
         for (let i = 0; i < this.numBoxes; i++) {
-            const bx = this.x + 12 + i * (this.boxWidth + this.boxSpacing);
+            const bx = this.x + 10 + i * (this.boxWidth + this.boxSpacing);
             const by = this.y + 24 + this.gap + (this.boxSpacing * 1) / 2;
-            
-            // Draw box
-            // fill(255);
-            // stroke(0);
-            // strokeWeight(1.5);
-            // rect(bx, by, this.boxWidth, this.boxHeight, 4);
 
             // Draw content if it exists
             if (this.contents[i]) {

src/scenes/gameScene.js

@@ -3,6 +3,7 @@ import { Cat } from '../cat.js';
 import { buttonS } from '../utils/theme.js';
 import { MyButton } from '../utils/components.js';
 import { Arrow } from '../components/Arrow.js';
+import { CLickableArrow } from '../components/Arrow2.js';
 import { ControlPanel } from '../components/controlPanel.js';
 
 
@@ -12,12 +13,22 @@ export default function GameScene() {
   let blocks;
   let steps;
   let loops;
+  let clickArrow;
+
+  const slots = {
+    blocks: 2,
+    steps: 6,
+    loop: 3,
+  }
 
   this.name = "GameScene";
 
   this.setup = () => {
     cat = new Cat(width / 6, height - 167.5, 150);
 
+    // test
+    clickArrow = new CLickableArrow('up', true);
+
     runButton = new MyButton({
       x: width / 32 * 28.5,
       y: height / 32,
@@ -30,25 +41,30 @@ export default function GameScene() {
     });
 
     blocks = new ControlPanel({
-      name: 'building blocks',
+      name: 'blocks',
       x: width / 32 * 7,
       y: height / 32,
-      numBoxes: 3
+      numBoxes: 2
     });
 
     steps = new ControlPanel({
       name: 'steps',
-      x: width / 32 * 7 + 48 * 4,
+      x: width / 32 * 7 + 48 * (slots.blocks + 1),
       y: height / 32,
       numBoxes: 6
     });
 
     loops = new ControlPanel({
       name: 'loop',
-      x: width / 32 * 7 + 48 * 11.5,
+      x: width / 32 * 7 + 48 * (slots.blocks + slots.steps + 2.75),
       y: height / 32,
       numBoxes: 4
-    })
+    });
+
+    blocks.setContents([
+      new Arrow('right'),
+      new Arrow('up')
+    ]);
 
   };
 
@@ -93,6 +109,5 @@ export default function GameScene() {
     } else {
       cat.changeAni(_key);
     }
-    
   }
 }