reasonable checkpoint i think

Author: sojs-coder

Parts/AreaTrigger.ts

@@ -0,0 +1,54 @@
+import { Part } from "./Part";
+import { Collider } from "./Children/Collider";
+
+export class AreaTrigger extends Part {
+    onEnter?: (other: Collider) => void;
+    onExit?: (other: Collider) => void;
+    private activeCollisions: Set<string> = new Set();
+
+    constructor({ name, onEnter, onExit }: { name?: string, onEnter?: (other: Collider) => void, onExit?: (other: Collider) => void }) {
+        super({ name: name || 'AreaTrigger' });
+        this.onEnter = onEnter;
+        this.onExit = onExit;
+        this.debugEmoji = "🧲";
+    }
+
+    act() {
+        super.act();
+        const collider = this.sibling<Collider>("Collider");
+        if (!collider) {
+            console.warn(`AreaTrigger <${this.name}> requires a Collider sibling.`);
+            return;
+        }
+
+        const currentCollisions = new Set<string>();
+        if (collider.colliding) {
+            for (const other of collider.collidingWith) {
+                currentCollisions.add(other.id);
+                if (!this.activeCollisions.has(other.id)) {
+                    // New collision - onEnter
+                    if (this.onEnter) {
+                        this.onEnter(other);
+                    }
+                }
+            }
+        }
+
+        // Check for exited collisions - onExit
+        for (const activeId of this.activeCollisions) {
+            if (!currentCollisions.has(activeId)) {
+                const exitedCollider = collider.collidingWith.find(c => c.id === activeId); // This might be tricky as collidingWith is reset
+                // A more robust way would be to store references to the actual collider objects
+                // For simplicity, we'll just call onExit without the specific collider for now
+                if (this.onExit) {
+                    // We can't easily get the 'other' collider object here after it's no longer colliding
+                    // A more advanced solution would involve tracking the actual collider objects.
+                    this.onExit(exitedCollider || ({} as Collider)); // Placeholder
+                }
+            }
+        }
+
+        this.activeCollisions = currentCollisions;
+        this.hoverbug = `Active: ${this.activeCollisions.size}`;
+    }
+}

Parts/CameraShake.ts

@@ -0,0 +1,60 @@
+import { Part } from "./Part";
+import { Camera } from "./Camera";
+import { Transform } from "./Children/Transform";
+import { Vector } from "../Math/Vector";
+
+export class CameraShake extends Part {
+    intensity: number;
+    duration: number;
+    private shakeTimer: number = 0;
+    private originalCameraPosition: Vector | null = null;
+
+    constructor({ name, intensity = 5, duration = 60 }: { name?: string, intensity?: number, duration?: number }) {
+        super({ name: name || 'CameraShake' });
+        this.intensity = intensity;
+        this.duration = duration;
+        this.debugEmoji = " tremors";
+    }
+
+    onMount(parent: Part) {
+        super.onMount(parent);
+        // Find the camera in the scene and store its original position
+        const camera = this.top?.currentScene?.activeCamera;
+        if (camera) {
+            const cameraTransform = camera.sibling<Transform>("Transform");
+            if (cameraTransform) {
+                this.originalCameraPosition = cameraTransform.position.clone();
+            }
+        }
+    }
+
+    shake() {
+        this.shakeTimer = this.duration;
+    }
+
+    act() {
+        super.act();
+        if (this.shakeTimer > 0) {
+            const camera = this.top?.currentScene?.activeCamera;
+            if (camera) {
+                const cameraTransform = camera.sibling<Transform>("Transform");
+                if (cameraTransform) {
+                    const offsetX = (Math.random() - 0.5) * this.intensity;
+                    const offsetY = (Math.random() - 0.5) * this.intensity;
+                    cameraTransform.position = this.originalCameraPosition!.add(new Vector(offsetX, offsetY));
+                }
+            }
+            this.shakeTimer--;
+        } else if (this.originalCameraPosition) {
+            // Reset camera position after shake
+            const camera = this.top?.currentScene?.activeCamera;
+            if (camera) {
+                const cameraTransform = camera.sibling<Transform>("Transform");
+                if (cameraTransform) {
+                    cameraTransform.position = this.originalCameraPosition;
+                }
+            }
+        }
+        this.hoverbug = `Shaking: ${this.shakeTimer > 0 ? "✅" : "❌"}`;
+    }
+}

Parts/CharacterMovement.ts

@@ -0,0 +1,58 @@
+import { Part } from "./Part";
+import { Transform } from "./Children/Transform";
+import { Input } from "./Input";
+
+export class CharacterMovement extends Part {
+    speed: number;
+    movementType: 'WASD' | 'ArrowKeys';
+    input: Input | undefined;
+
+    constructor({ name, speed = 5, movementType = 'WASD', input }: { name?: string, speed?: number, movementType?: 'WASD' | 'ArrowKeys', input?: Input }) {
+        super({ name: name || 'CharacterMovement' });
+        this.speed = speed;
+        this.movementType = movementType;
+        this.input = input
+    }
+
+
+    act(): void {
+        if (!this.input) {
+            return;
+        }
+
+        const transform = this.sibling<Transform>("Transform");
+        if (!transform) {
+            return;
+        }
+
+        const keys = this.input.downkeys;
+
+        if (this.movementType === 'WASD') {
+            if (keys.has('w')) {
+                transform.position.y -= this.speed;
+            }
+            if (keys.has('s')) {
+                transform.position.y += this.speed;
+            }
+            if (keys.has('a')) {
+                transform.position.x -= this.speed;
+            }
+            if (keys.has('d')) {
+                transform.position.x += this.speed;
+            }
+        } else if (this.movementType === 'ArrowKeys') {
+            if (keys.has('ArrowUp')) {
+                transform.position.y -= this.speed;
+            }
+            if (keys.has('ArrowDown')) {
+                transform.position.y += this.speed;
+            }
+            if (keys.has('ArrowLeft')) {
+                transform.position.x -= this.speed;
+            }
+            if (keys.has('ArrowRight')) {
+                transform.position.x += this.speed;
+            }
+        }
+    }
+}

Parts/Children/AnimatedSprite.ts

@@ -17,7 +17,7 @@ export class AnimatedSprite extends Renderer {
     currentAnimation: string = "default"; // Current animation name
     disableAntiAliasing: boolean = false; // Option to disable anti-aliasing
     onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void; // Callback for when an animation completes
-    constructor({ spritesheet, width, height, startingAnimation, disableAntiAliasing = false, onAnimationComplete }: { spritesheet: string, width: number, height: number, startingAnimation?: string, disableAntiAliasing?: boolean, onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void }) {
+    constructor({ spritesheet, spritesheetImage, width, height, startingAnimation, disableAntiAliasing = false, onAnimationComplete }: { spritesheet: string, spritesheetImage?: string, width: number, height: number, startingAnimation?: string, disableAntiAliasing?: boolean, onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void }) {
         super({ width, height }); // Call the parent constructor with empty imageSource
         this.name = "AnimatedSprite";
         this.debugEmoji = "🎞️"; // Default emoji for debugging the animated sprite
@@ -36,42 +36,53 @@ export class AnimatedSprite extends Renderer {
         parent.setSuperficialDimensions(this.width, this.height); // Set dimensions for the parent part
         console.log(this.width, this.height);
         console.log(this.parent)
-        const response = await fetch(this.spritesheet);
-        if (!response.ok) {
-            throw new Error(`Failed to load spritesheet: ${response.statusText}`);
+        let spritesheetData: SpriteSheetData;
+        if (this.spritesheet.startsWith("data:application/json")) {
+            spritesheetData = JSON.parse(atob(this.spritesheet.split(',')[1]));
+        } else {
+            const response = await fetch(this.spritesheet);
+            if (!response.ok) {
+                throw new Error(`Failed to load spritesheet: ${response.statusText}`);
+            }
+            spritesheetData = await response.json() as SpriteSheetData; // Assuming the spritesheet is a JSON file
         }
-        const data = await response.json() as SpriteSheetData; // Assuming the spritesheet is a JSON file
+
         // Validate the data structure
-        if (!data.frames || !Array.isArray(data.frames)) {
+        if (!spritesheetData.frames || !Array.isArray(spritesheetData.frames)) {
             throw new Error("Invalid spritesheet format: 'frames' array is missing or not an array.");
         }
-        if (!data.meta || !data.meta.image) {
+        if (!spritesheetData.meta || !spritesheetData.meta.image) {
             throw new Error("Invalid spritesheet format: 'meta.image' is missing.");
         }
-        if (!data.meta.size || typeof data.meta.size.w !== "number" || typeof data.meta.size.h !== "number") {
+        if (!spritesheetData.meta.size || typeof spritesheetData.meta.size.w !== "number" || typeof spritesheetData.meta.size.h !== "number") {
             throw new Error("Invalid spritesheet format: 'meta.size' is missing or invalid.");
         }
-        if (!data.meta.animations || typeof data.meta.animations !== "object") {
+        if (!spritesheetData.meta.animations || typeof spritesheetData.meta.animations !== "object") {
             throw new Error("Invalid spritesheet format: 'meta.animations' is missing or not an object.");
         }
 
         const image = new Image();
-        const relativeToSpritesheet = this.spritesheet.split("/").slice(0, -1).join("/");
-        const path = data.meta.image.startsWith("http") ? data.meta.image : new URL(relativeToSpritesheet + "/" + data.meta.image, window.location.href).href;  // Handle relative paths
-        image.src = path; // Set the image source to the spritesheet image path
+        if (spritesheetImage) {
+            image.src = spritesheetImage;
+        } else {
+            const relativeToSpritesheet = this.spritesheet.startsWith("data:") ? "" : this.spritesheet.split("/").slice(0, -1).join("/");
+            const path = spritesheetData.meta.image.startsWith("http") ? spritesheetData.meta.image : new URL(relativeToSpritesheet + "/" + spritesheetData.meta.image, window.location.href).href;  // Handle relative paths
+            image.src = path; // Set the image source to the spritesheet image path
+        }
+
         image.onerror = (err) => {
-            console.error(`Failed to load spritesheet image <${data.meta.image}>:`, err);
+            console.error(`Failed to load spritesheet image <${spritesheetData.meta.image}>:`, err);
             this.ready = false;
         };
-        this.spritesheetData = data; // Store the parsed spritesheet data
-        this.frames = Object.fromEntries(Object.keys(data.meta.animations).map(animationName => [animationName, Array(data.meta.animations[animationName].frames.length).fill(null)])); // Initialize frames for each animation
+        this.spritesheetData = spritesheetData; // Store the parsed spritesheet data
+        this.frames = Object.fromEntries(Object.keys(spritesheetData.meta.animations).map(animationName => [animationName, Array(spritesheetData.meta.animations[animationName].frames.length).fill(null)])); // Initialize frames for each animation
         await new Promise<void>((resolve, reject) => {
             image.onload = () => {
                 this.loadedSheet = image;
                 resolve();
             };
             image.onerror = (err) => {
-                console.error(`Failed to load spritesheet image <${data.meta.image}>:`, err);
+                console.error(`Failed to load spritesheet image <${spritesheetData.meta.image}>:`, err);
                 this.ready = false;
                 reject(err);
             };

Parts/Children/Button.ts

@@ -4,29 +4,42 @@ import { Part } from "../Part";
 import { Input } from "../Input";
 import { Scene } from "../Scene";
 import { Renderer } from "./Renderer";
+import { Sound } from "../Sound";
 
 export class Button extends Renderer {
     styles?: ButtonStyles;
     private isHovered: boolean = false;
     private isActive: boolean = false;
     private onClickHandler: () => void;
+    clickSound?: Sound;
+    hoverSound?: Sound;
+    activeSound?: Sound;
 
-    constructor({ label, onClick, styles }: { label: string; onClick: () => void; styles?: ButtonStyles }) {
+    constructor({ label, onClick, styles, clickSound, hoverSound, activeSound }: { label: string; onClick: () => void; styles?: ButtonStyles, clickSound?: Sound, hoverSound?: Sound, activeSound?: Sound }) {
         super({ width: styles?.default?.width ?? 100, height: styles?.default?.height ?? 50, disableAntiAliasing: true });
         this.name = label;
         this.onClickHandler = onClick;
         this.styles = styles;
+        this.clickSound = clickSound;
+        this.hoverSound = hoverSound;
+        this.activeSound = activeSound;
 
         this.onclick = (event: MouseEvent, input: any) => {
             if (this.onClickHandler) {
                 this.onClickHandler();
             }
+            if (this.clickSound) {
+                this.clickSound.play({ clone: true });
+            }
             event.stopPropagation(); // Prevent further propagation of the click event
             event.preventDefault(); // Prevent default action of the click event
         };
 
         this.onhover = () => {
             this.isHovered = true;
+            if (this.hoverSound) {
+                this.hoverSound.play({ clone: true });
+            }
             console.log(`Button ${this.name} hovered`);
         };
 
@@ -39,6 +52,9 @@ export class Button extends Renderer {
         this.onmousedown = (event: MouseEvent) => {
             if (event.button === 0) { // Left mouse button
                 this.isActive = true;
+                if (this.activeSound) {
+                    this.activeSound.play({ clone: true });
+                }
             }
         };
 

Parts/Clickable.ts

@@ -0,0 +1,50 @@
+import { Part } from "./Part";
+import { Input } from "./Input";
+
+export class Clickable extends Part {
+    onClick?: (event: MouseEvent, clicked: Part) => void;
+    onHover?: () => void;
+    onUnhover?: () => void;
+
+    constructor({ name, onClick, onHover, onUnhover }: { name?: string, onClick?: (event: MouseEvent, clicked: Part) => void, onHover?: () => void, onUnhover?: () => void }) {
+        super({ name: name || 'Clickable' });
+        this.onClick = onClick;
+        this.onHover = onHover;
+        this.onUnhover = onUnhover;
+        this.debugEmoji = "👆";
+    }
+
+    onMount(parent: Part) {
+        super.onMount(parent);
+        // Ensure an Input instance is attached to the scene
+        if (this.top && this.top.currentScene && !this.top.currentScene.sibling("Input")) {
+            this.top.currentScene.addChild(new Input({
+                key: () => {},
+                keyup: () => {},
+                mousemove: () => {},
+                click: () => {},
+            }));
+        }
+    }
+
+    onclick(event: MouseEvent, clicked: Part) {
+        if (this.onClick) {
+            this.onClick(event, clicked);
+        }
+        super.onclick(event, clicked);
+    }
+
+    onhover() {
+        if (this.onHover) {
+            this.onHover();
+        }
+        super.onhover();
+    }
+
+    onunhover() {
+        if (this.onUnhover) {
+            this.onUnhover();
+        }
+        super.onunhover();
+    }
+}