fix clickable arrow

src/components/Arrow2.js

@@ -1,41 +0,0 @@
-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/ClickableArrow.js

@@ -0,0 +1,47 @@
+export class ClickableArrow {
+    static images = {};
+  
+    static preload() {
+      ClickableArrow.images.up = loadImage('/assets/up.png');
+      ClickableArrow.images.down = loadImage('/assets/down.png');
+      ClickableArrow.images.left = loadImage('/assets/left.png');
+      ClickableArrow.images.right = loadImage('/assets/right.png');
+      ClickableArrow.images.empty = loadImage('/assets/empty.png');
+    }
+  
+    constructor(direction, clickable=false) {
+      this.direction = direction;
+      this.image = ClickableArrow.images[direction];
+      this.clickable = clickable;
+      // this.onClick = onClick | null;
+      this.x = 0;
+      this.y = 0;
+      this.width = 40;
+      this.height = 40;
+    }
+  
+    draw(x, y) {
+      this.x = x;
+      this.y = y;
+      stroke(255);
+      image(this.image, x, y, 40, 40);
+    }
+
+    handleClick(mouseX, mouseY) {
+      if (this._isMouseOver(mouseX, mouseY) && this._onClick) {
+        this._onClick();
+      }
+    }
+
+    //helpers
+    _onClick(){
+      console.log('clicked!');
+    }
+
+    _isMouseOver(mouseX, mouseY) {
+      return mouseX > this.x && mouseX < this.x + this.width &&
+             mouseY > this.y && mouseY < this.y + this.height;
+    }
+
+  }
+  

src/components/ControlPanel.js

@@ -1,4 +1,5 @@
 import { Arrow } from "./Arrow";
+import { ClickableArrow } from "./ClickableArrow";
 import { colors } from "../utils/theme";
 
 export class ControlPanel {
@@ -53,6 +54,10 @@ export class ControlPanel {
             if (this.contents[i]) {
                 if (this.contents[i] instanceof Arrow) {
                     this.contents[i].draw(bx + this.boxWidth/2 - 20, by + this.boxHeight/2 - 20);
+                } else if (this.contents[i] instanceof ClickableArrow) {
+                    this.contents[i].draw(bx + this.boxWidth/2 - 20, by + this.boxHeight/2 - 20);
+                } else {
+                    console.error('Invalid content type:', this.contents[i]);
                 }
             } else {
                 this.empty.draw(bx + this.boxWidth / 2 - 20, by + this.boxHeight / 2 - 20);

src/main.js

@@ -2,6 +2,7 @@ import { colors } from './utils/theme.js';
 import { Arrow } from './components/Arrow.js';
 import StartScene from './scenes/startScene.js';
 import GameScene from './scenes/gameScene.js';
+import { ClickableArrow } from './components/ClickableArrow.js';
 
 let mgr;
 
@@ -30,17 +31,18 @@ function windowResized() {
 
 function mousePressed(){
     mgr.handleEvent('mousePressed');
+    gameScene.handleClick(mouseX, mouseY);
 };
 
 function preload(){
     Arrow.preload();
+    ClickableArrow.preload();
 }
 
 function keyPressed(){
     mgr.handleEvent('keyPressed');
 }
 
-
 window.setup = setup;
 window.draw = draw;
 // window.windowResized = windowResized;

src/scenes/gameScene.js

@@ -3,7 +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 { ClickableArrow } from '../components/ClickableArrow.js';
 import { ControlPanel } from '../components/controlPanel.js';
 
 
@@ -27,7 +27,7 @@ export default function GameScene() {
     cat = new Cat(width / 6, height - 167.5, 150);
 
     // test
-    clickArrow = new CLickableArrow('up', true);
+    clickArrow = new ClickableArrow('up', true);
 
     runButton = new MyButton({
       x: width / 32 * 28.5,
@@ -63,9 +63,11 @@ export default function GameScene() {
 
     blocks.setContents([
       new Arrow('right'),
-      new Arrow('up')
+      // new Arrow('up')
+      new ClickableArrow('up', true),
     ]);
 
+
   };
 
   this.draw = () => {
@@ -110,4 +112,12 @@ export default function GameScene() {
       cat.changeAni(_key);
     }
   }
+
+  this.handleClick = function(mx, my) {
+    this.arrows.forEach(arrow => {
+      if (arrow.clickable) {
+        arrow.handleClick(mx, my);
+      }
+    });
+  }
 }