Added grid image functionality for backdrop of levels.

src/js/Oldlevel1.js

@@ -0,0 +1,264 @@
+import Candy, {Colors, Shapes, Patterns } from './candy.js';
+export default class Level1 extends Phaser.Scene {
+
+    graphics;
+    path1;
+    path2;
+    path3;
+    follower;
+    isMoving = false;
+
+    preload() {
+        // Load the background image
+        //TO-DO: Add Texture manager: https://docs.phaser.io/phaser/concepts/textures
+        //Example candy implementation 
+        const blueStripedCircle = new Candy(Colors.BLUE, Shapes.CIRCLE, Patterns.STRIPED, '../assets/candy_photos/blue_circle_striped.png');
+        //console.log(blueStripedCircle.imagePath === '../assets/blue_circle_striped.png');
+       // this.load.image('background', 'assets/background.png');
+        this.load.image('follower', blueStripedCircle.imagePath); // Load the candy image
+        //this.load.image('follower', 'assets/follower.png'); // Optional: Load a follower sprite
+
+
+        this.load.image('Connector', 'assets/conveyer_photos/Connector.png');
+        this.load.image('ConveyerDown', 'assets/conveyer_photos/ConveyerDown.png');
+        this.load.image('ConveyerAll', 'assets/conveyer_photos/ConnectorAll.png');
+        this.load.image('ConveyerLeft', 'assets/conveyer_photos/Left_Belt.png');
+        this.load.image('ConveyerRight', 'assets/conveyer_photos/Right_belt.png');
+        this.load.image('tester', 'assets/candy_photos/blue-square-dotted.png');
+        this.load.image('tester2', 'assets/candy_photos/red-triangle-dotted.png');
+    }
+
+    ConveyerMap = {
+        0: "",  // Empty space
+        1: "ConveyerDown",
+        2: "ConveyerLeft",
+        3: "ConveyerRight",
+        4: "Connector",
+        5: "ConveyerAll"
+    };
+
+    levelData = [
+        [0, 1, 0],
+        [0, 1, 0],
+        [0, 1, 0],
+        [0, 1, 0],
+        [0, 1, 0],
+        [2, 4, 3],
+        [1, 0, 1],
+        [1, 0, 1],
+        [1, 0, 1]
+    ];
+
+    create() {
+        // Initialize the editor window
+        C4C.Editor.Window.init(this);   // Scene is passed in to this init function!
+        C4C.Editor.Window.open();
+        console.log("Text editor initialized.");
+
+        // Define interpreter commands
+        C4C.Interpreter.define("moveleft", () => {
+            //console.log("moveleft in text editor");
+            this.moveLeft();
+        });
+
+        C4C.Interpreter.define("moveright", () => {
+            this.moveRight();
+        });
+
+        document.getElementById("enableCommands").addEventListener("click", (event) => {
+            let programText = C4C.Editor.getText();
+            console.log("Program text: ", programText);
+            C4C.Interpreter.run(programText);
+            runner.setProgram(programText);
+        });
+
+        // Add the background image
+        //this.add.image(400, 300, 'background'); 
+        // Center the background
+
+        this.graphics = this.add.graphics();
+        this.initializePaths();
+        this.initializeFollower();
+
+        // Add event listener to the button
+        document.getElementById("enableCommands").addEventListener("click", this.startTween);
+
+        const tileSize = 64; // assuming each tile is 64x64 pixels
+        const offsetX = 305;
+        const offsetY = 0;
+
+
+        for (var row = 0; row < this.levelData.length; row++) {
+            for (var col = 0; col < this.levelData[row].length; col++) {
+                var tileType = this.levelData[row][col];
+                var textureKey = this.ConveyerMap[tileType];
+                if (textureKey === "") continue; // Skip empty spaces
+                var image = this.add.image(offsetX + col * tileSize, offsetY + row * tileSize, textureKey).setOrigin(0);
+                image.setScale(2); 
+                image.setDepth(-1);
+            }
+        }
+
+        this.tester = this.add.image(700, 100, 'tester');
+        this.tester.setScale(2);
+
+        this.tester2 = this.add.image(700, 200, 'tester2');
+        this.tester2.setScale(2);
+
+        //await delay(1000);
+        this.moveToCenter(this.tester);
+        //await delay(2000);
+        this.moveUpSpot(this.tester2);
+
+    }
+
+    moveToCenter = (gameObject) => {
+    this.tweens.add({
+        targets: gameObject,
+        x: 400,
+        y: 100,
+        ease: 'Power2',
+        duration: 2000
+    });
+};
+
+    moveUpSpot = (gameObject) => {
+    this.tweens.add({
+        targets: gameObject,
+        x: 700,
+        y: gameObject.y - 100,
+        ease: 'Power2',
+        duration: 2000
+    });
+};
+
+
+
+    initializePaths() {
+        // Create the path using 3 separate lines
+        const startline = new Phaser.Curves.Line([400, 0, 400, 300]);
+        const leftline = new Phaser.Curves.Line([400, 300, 300, 500]);
+        const rightline = new Phaser.Curves.Line([400, 300, 500, 500]);
+
+        this.path1 = this.add.path();
+        this.path1.add(startline);
+
+        this.path2 = this.add.path();
+        this.path2.add(leftline);
+
+        this.path3 = this.add.path();
+        this.path3.add(rightline);
+    }
+
+    initializeFollower() {
+        this.follower = { t: 0, vec: new Phaser.Math.Vector2() };
+        this.followerSprite = this.add.image(400, 0, 'follower'); // use the candy texture
+        this.followerSprite.setScale(2); // scale up if needed
+    }
+
+
+    startTween = () => {
+        this.follower.t = 0;
+        this.isMoving = true;
+        console.log("isMoving: ", this.isMoving);
+        this.tweens.add({
+            targets: this.follower,
+            t: 1,
+            ease: 'Linear',
+            duration: 1000,
+            onUpdate: () => {
+                this.path1.getPoint(this.follower.t, this.follower.vec);
+            },
+            onComplete: () => {
+                console.log("Start Path complete!");
+                this.handlePathCompletion();
+            }
+        });
+    };
+
+    handlePathCompletion() {
+        // //Logic to determine the next move based on user input or pseudo code
+        // const nextMove = this.getNextMove(); // Implement this function to determine the next move
+        // if (nextMove === "left") {
+        //     this.moveLeft();
+        // } else if (nextMove === "right") {
+        //     this.moveRight();
+        // } else {
+        //     this.isMoving = false;
+        // }
+    }
+
+    // getNextMove() {
+    // }
+
+    moveLeft = () => {
+        console.log("Move left function called");
+        this.follower.t = 1;
+        this.tweens.add({
+            targets: this.follower,
+            t: 2,
+            ease: 'Linear',
+            duration: 1000,
+            onUpdate: () => {
+                this.path2.getPoint(this.follower.t - 1, this.follower.vec);
+            },
+            onComplete: () => {
+                console.log("Left Path complete!");
+                this.handlePathCompletion();
+            }
+        });
+    };
+
+    moveRight = () => {
+        console.log("Move right function called");
+        this.follower.t = 2.001;
+        this.tweens.add({
+            targets: this.follower,
+            t: 3,
+            ease: 'Linear',
+            duration: 1000,
+            onUpdate: () => {
+                this.path3.getPoint(this.follower.t - 2, this.follower.vec);
+            },
+            onComplete: () => {
+                console.log("Right Path complete!");
+                this.handlePathCompletion();
+            }
+        });
+    };
+
+    update() {
+    // Clear debug graphics
+    this.graphics.clear();
+    this.graphics.lineStyle(2, 0xffffff, 1);
+
+    // Draw paths (optional, for debugging)
+    this.path1.draw(this.graphics);
+    this.path2.draw(this.graphics);
+    this.path3.draw(this.graphics);
+
+    // Update follower position
+    if (this.isMoving) {
+        if (this.follower.t <= 1) {
+            this.path1.getPoint(this.follower.t, this.follower.vec);
+        } else if (this.follower.t > 1 && this.follower.t <= 2) {
+            this.path2.getPoint(this.follower.t - 1, this.follower.vec);
+        } else if (this.follower.t > 2 && this.follower.t <= 3) {
+            this.path3.getPoint(this.follower.t - 2, this.follower.vec);
+        }
+
+        // Move the candy sprite instead of drawing a square
+        this.followerSprite.setPosition(this.follower.vec.x, this.follower.vec.y);
+    }
+    }
+
+
+    /*delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+    }*/
+
+}
+
+//For debugging for casey later...
+// const canvas = document.getElementById('my-custom-canvas');
+// if (canvas) {console.log("Found?");} else { console.log("Not found?"); } 

src/js/SceneClasses/AnimationExecutor.js

@@ -178,22 +178,65 @@ export default class AnimationExecutor {
     }
   }
 
-  drawFollower(graphics) {
+  createFollowerSprite(candyType) {
+    if (this.follower) return;
+
+    this.follower = this.scene.add.image(
+        this.followerPosition.x,
+        this.followerPosition.y,
+        candyType
+    );
+
+    this.follower.setDisplaySize(64, 64); // normalize size
+    console.log("CREATING FOLLOWER SPRITE");
+
+}
+
+
+drawFollower(graphics) {
     const currentCandy = this.pathManager.getCurrentCandy();
-    const candyType = currentCandy ? currentCandy.type : "default";
+    if (!currentCandy) return;
+
+    const candyType = currentCandy.path;
 
-    let color = 0xff0000; // Default red
-    if (candyType.includes("blue")) color = 0x0000ff;
-    else if (candyType.includes("green")) color = 0x00ff00;
-    else if (candyType.includes("red")) color = 0xff0000;
+    // Create follower sprite once
+    if (!this.follower) {
+        this.createFollowerSprite(candyType);
+        return;
+    }
+
+    // Update texture if candy changed
+    if (this.follower.texture.key !== candyType) {
+        this.follower.setTexture(candyType);
+    }
+
+    // Update follower position each frame
+    this.follower.x = this.followerPosition.x;
+    this.follower.y = this.followerPosition.y;
+    console.log(
+  "Rendered size:",
+  this.follower.displayWidth,
+  this.follower.displayHeight,
+  "Scale:",
+  this.follower.scaleX,
+  this.follower.scaleY
+);
 
-    graphics.fillStyle(color);
-    graphics.fillCircle(this.followerPosition.x, this.followerPosition.y, 20);
   }
 
+
+
   reset() {
     this.commandQueue = [];
     this.isAnimating = false;
+    // This fixes sizing issues when resetting between candies, 
+    // but may cause a brief flash if the follower is visible during reset. 
+    // A more complex solution would be to hide the follower during reset
+    // and show it again after repositioning.
+    if (this.follower) {
+        this.follower.destroy();
+        this.follower = null;
+    }
     const pos = this.pathManager.getCurrentPosition();
     this.followerPosition = { x: pos.x, y: pos.y };
     console.log(

src/js/SceneClasses/PathManager.js

@@ -126,7 +126,7 @@ export default class PathManager {
       this.currentCandy = this.candyQueue.shift();
       this.resetPosition();
       console.log(
-        `[PathManager] Starting next candy: ${this.currentCandy.type}. Remaining in queue: ${this.candyQueue.length}`,
+        `[PathManager] Starting next candy: ${this.currentCandy.path}. Remaining in queue: ${this.candyQueue.length}`,
       ); // MODIFIED/ADDED
       return true;
     } else {
@@ -151,12 +151,12 @@ export default class PathManager {
       return false;
     }
 
-    const goalPosition = this.goalPositions.get(this.currentCandy.type);
+    const goalPosition = this.goalPositions.get(this.currentCandy.path);
     // console.log(`[Path Manager] Goal Position for Candy ${this.currentCandy}`); // Original log removed/consolidated
 
     if (!goalPosition) {
       console.warn(
-        `[PathManager] No goal position defined for candy type: ${this.currentCandy.type}`,
+        `[PathManager] No goal position defined for candy type: ${this.currentCandy.path}`,
       );
       return false;
     }
@@ -168,7 +168,7 @@ export default class PathManager {
     const isAtGoal = distanceX <= tolerance && distanceY <= tolerance;
 
     console.log(
-      `[PathManager] Checking goal for ${this.currentCandy.type} (Tolerance: ${tolerance}). Current: (${this.currentPosition.x}, ${this.currentPosition.y}) | Goal: (${goalPosition.x}, ${goalPosition.y}). Match: ${isAtGoal}`,
+      `[PathManager] Checking goal for ${this.currentCandy.path} (Tolerance: ${tolerance}). Current: (${this.currentPosition.x}, ${this.currentPosition.y}) | Goal: (${goalPosition.x}, ${goalPosition.y}). Match: ${isAtGoal}`,
     ); // MODIFIED/ADDED
 
     return isAtGoal;
@@ -181,13 +181,13 @@ export default class PathManager {
     }
 
     console.log(
-      `[PathManager] Attempting to dump candy: ${this.currentCandy.type}`,
+      `[PathManager] Attempting to dump candy: ${this.currentCandy.path}`,
     );
     const isAtGoal = this.checkCandyAtGoal();
 
     if (isAtGoal) {
       console.log(
-        `[PathManager] Dump SUCCESS! Candy ${this.currentCandy.type} successfully delivered.`,
+        `[PathManager] Dump SUCCESS! Candy ${this.currentCandy.path} successfully delivered.`,
       );
 
       //Callback for successful delivery
@@ -201,7 +201,7 @@ export default class PathManager {
       return { success: true, hasMoreCandies };
     } else {
       console.log(
-        `[PathManager] Dump FAILED! Candy ${this.currentCandy.type} is not at goal position.`,
+        `[PathManager] Dump FAILED! Candy ${this.currentCandy.path} is not at goal position.`,
       );
       //Callback for failed delivery
       if (this.onCandyFailed) {