@clawlabz/clawskin 1.0.0

package/public/js/character/CharacterSprite.js

@@ -0,0 +1,98 @@
+/**
+ * CharacterSprite.js — Manages character rendering in a scene
+ * Composites sprite frames from SpriteGenerator and handles positioning
+ */
+class CharacterSprite {
+  constructor(config, x, y, scale = 3) {
+    this.config = config || CharacterSprite.defaultConfig();
+    this.x = x;
+    this.y = y;
+    this.scale = scale;
+    this.spriteSheet = null;
+    this.animManager = new AnimationManager();
+    this.bubbleManager = new BubbleManager();
+    this.generator = new SpriteGenerator();
+    this.petCanvas = null;
+    this.petFrame = 0;
+    this.petTimer = 0;
+    this.regenerate();
+  }
+
+  static defaultConfig() {
+    return {
+      skinColor: SpriteGenerator.SKIN_TONES[0],
+      hairType: 0,
+      hairColor: SpriteGenerator.HAIR_COLORS[0],
+      outfitType: 'hoodie',
+      outfitColorIdx: 0,
+      accessory: null,
+      pet: null
+    };
+  }
+
+  static randomConfig() {
+    const outfitTypes = Object.keys(SpriteGenerator.OUTFIT_COLORS);
+    const accessories = [null, 'glasses', 'hat', 'headphones', 'cap'];
+    const pets = [null, 'cat', 'dog', 'robot'];
+    return {
+      skinColor: SpriteGenerator.SKIN_TONES[Math.floor(Math.random() * 5)],
+      hairType: Math.floor(Math.random() * 5),
+      hairColor: SpriteGenerator.HAIR_COLORS[Math.floor(Math.random() * 7)],
+      outfitType: outfitTypes[Math.floor(Math.random() * outfitTypes.length)],
+      outfitColorIdx: Math.floor(Math.random() * 5),
+      accessory: accessories[Math.floor(Math.random() * accessories.length)],
+      pet: pets[Math.floor(Math.random() * pets.length)]
+    };
+  }
+
+  regenerate() {
+    this.generator.cache.clear();
+    this.spriteSheet = this.generator.generateCharacter(this.config);
+  }
+
+  updateConfig(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    this.regenerate();
+  }
+
+  setState(state) {
+    this.animManager.setState(state);
+  }
+
+  showBubble(text, type, duration) {
+    this.bubbleManager.show(text, type, duration);
+  }
+
+  update(dt) {
+    this.animManager.update(dt);
+    this.bubbleManager.update(dt);
+  }
+
+  render(ctx) {
+    if (!this.spriteSheet) return;
+
+    const frame = this.animManager.getCurrentFrame();
+    const sx = frame * 32;
+
+    ctx.save();
+    ctx.imageSmoothingEnabled = false;
+
+    // Draw character only — pets are now independent entities managed by PetManager
+    ctx.drawImage(
+      this.spriteSheet,
+      sx, 0, 32, 32,
+      this.x, this.y, 32 * this.scale, 32 * this.scale
+    );
+
+    ctx.restore();
+
+    // Draw bubble (not pixel-scaled)
+    this.bubbleManager.render(
+      ctx,
+      this.x + (32 * this.scale) / 2,
+      this.y
+    );
+  }
+}
+
+if (typeof window !== 'undefined') window.CharacterSprite = CharacterSprite;

package/public/js/game.js

@@ -0,0 +1,116 @@
+/**
+ * game.js — ClawSkin main entry point
+ * Initializes the pixel engine, scenes, character, and UI
+ */
+class ClawSkinGame {
+  constructor(canvasId, options = {}) {
+    this.canvas = document.getElementById(canvasId);
+    this.ctx = this.canvas.getContext('2d');
+    this.width = options.width || 480;
+    this.height = options.height || 320;
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+
+    this.spriteGen = new SpriteGenerator();
+    this.scenes = [];
+    this.currentScene = null;
+    this.character = null;
+    this.stateSync = null;
+    this.lastTime = 0;
+    this.running = false;
+
+    // Status display
+    this.statusEl = options.statusEl ? document.getElementById(options.statusEl) : null;
+  }
+
+  init(characterConfig = null) {
+    // Load saved config or use provided/default
+    const savedConfig = CharacterEditor.loadSaved();
+    const cfg = characterConfig || savedConfig || CharacterSprite.defaultConfig();
+
+    // Create scenes
+    this.scenes = [
+      new OfficeScene(this.canvas, this.ctx, this.spriteGen),
+      new HackerScene(this.canvas, this.ctx, this.spriteGen),
+      new CafeScene(this.canvas, this.ctx, this.spriteGen),
+    ];
+
+    // Init all scenes
+    this.scenes.forEach(s => s.init());
+
+    // Set initial scene
+    this.currentScene = this.scenes[0];
+
+    // Create character
+    const pos = this.currentScene.getCharacterPosition();
+    this.character = new CharacterSprite(cfg, pos.x, pos.y);
+
+    // State sync (demo mode by default)
+    this.stateSync = new AgentStateSync(this.character, {
+      gatewayUrl: null, // Will use demo mode
+      onStateChange: (state) => {
+        if (this.statusEl) {
+          this.statusEl.textContent = this.character.animManager.getLabel();
+        }
+      }
+    });
+    this.stateSync.connect();
+
+    return this;
+  }
+
+  setScene(index) {
+    if (index < 0 || index >= this.scenes.length) return;
+    this.currentScene = this.scenes[index];
+    this.currentScene.init();
+    const pos = this.currentScene.getCharacterPosition();
+    this.character.x = pos.x;
+    this.character.y = pos.y;
+  }
+
+  start() {
+    this.running = true;
+    this.lastTime = performance.now();
+    this._loop();
+  }
+
+  stop() {
+    this.running = false;
+  }
+
+  _loop() {
+    if (!this.running) return;
+    const now = performance.now();
+    const dt = now - this.lastTime;
+    this.lastTime = now;
+
+    this._update(dt);
+    this._render();
+
+    requestAnimationFrame(() => this._loop());
+  }
+
+  _update(dt) {
+    if (this.currentScene) this.currentScene.update(dt);
+    if (this.character) this.character.update(dt);
+    if (this.stateSync) this.stateSync.update(dt);
+
+    // Update status display
+    if (this.statusEl && this.character) {
+      this.statusEl.textContent = this.character.animManager.getLabel();
+    }
+  }
+
+  _render() {
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.ctx.imageSmoothingEnabled = false;
+
+    // Render scene background + furniture
+    if (this.currentScene) this.currentScene.render(this.ctx);
+
+    // Render character on top
+    if (this.character) this.character.render(this.ctx);
+  }
+}
+
+if (typeof window !== 'undefined') window.ClawSkinGame = ClawSkinGame;

package/public/js/pets/Pet.js

@@ -0,0 +1,303 @@
+/**
+ * Pet.js — Independent pet entity with autonomous AI behavior
+ * Pets move freely around the office, interact with agents and other pets
+ */
+class Pet {
+  constructor(config) {
+    this.id = config.id || Math.random().toString(36).slice(2, 8);
+    this.type = config.type || 'cat';         // 'cat' | 'dog' | 'robot' | 'bird' | 'hamster'
+    this.moveType = config.moveType || 'walk'; // 'walk' | 'fly' | 'crawl'
+    this.color = config.color || null;         // body color (null = random)
+    this.x = config.x || 100;
+    this.y = config.y || 200;
+    this.scale = config.scale || 2.5;
+    this.speed = config.speed || 0.04;
+    this.facingLeft = false;
+
+    // Pick random color if none given
+    if (!this.color) {
+      const palette = Pet.COLORS[this.type] || Pet.COLORS.cat;
+      this.color = palette[Math.floor(Math.random() * palette.length)];
+    }
+
+    // Animation
+    this.frame = 0;
+    this.frameTimer = 0;
+    this.frameInterval = 600; // ms per frame
+
+    // AI behavior
+    this.state = 'idle';   // 'idle' | 'moving' | 'sleeping' | 'interacting'
+    this.target = null;    // { x, y }
+    this.actionTimer = 0;
+    this.nextActionTime = 3000 + Math.random() * 5000;
+    this.interactLabel = null; // what we're interacting with
+
+    // Flying pets: sine wave bob
+    this._flyTime = Math.random() * 10000;
+    this._flyBaseY = this.y;
+    this._stuckTimer = 0;
+
+    // Sprite generator (shared)
+    this.generator = config.generator || new SpriteGenerator();
+  }
+
+  /** Pet type metadata */
+  static TYPES = {
+    cat:     { moveType: 'walk', speed: 0.04, scale: 2.5, sleepChance: 0.20 },
+    dog:     { moveType: 'walk', speed: 0.05, scale: 2.5, sleepChance: 0.10 },
+    robot:   { moveType: 'walk', speed: 0.03, scale: 2.5, sleepChance: 0.05 },
+    bird:    { moveType: 'fly',  speed: 0.06, scale: 2.0, sleepChance: 0.10 },
+    hamster: { moveType: 'crawl',speed: 0.02, scale: 2.0, sleepChance: 0.30 },
+  };
+
+  /** Color palettes per type */
+  static COLORS = {
+    cat:     ['#FF9900','#333333','#FFFFFF','#C0C0C0','#D2691E','#FFD700','#8B4513'],
+    dog:     ['#D2956A','#8B4513','#F5DEB3','#FFD700','#333333','#FFFFFF','#A0522D'],
+    robot:   ['#95A5A6','#3498DB','#E74C3C','#2ECC71','#F39C12','#9B59B6','#1ABC9C'],
+    bird:    ['#4FC3F7','#E74C3C','#FFD700','#2ECC71','#FF9800','#9C27B0','#F48FB1'],
+    hamster: ['#F5DEB3','#D2B48C','#FFFFFF','#FFD700','#C0C0C0','#DEB887','#FFDAB9'],
+  };
+
+  static create(type, generator, sceneBounds, color) {
+    const meta = Pet.TYPES[type] || Pet.TYPES.cat;
+    return new Pet({
+      type,
+      moveType: meta.moveType,
+      speed: meta.speed,
+      scale: meta.scale,
+      color: color || null, // null → random in constructor
+      x: 50 + Math.random() * ((sceneBounds?.w || 600) - 100),
+      y: (sceneBounds?.floorY || 160) + 10 + Math.random() * ((sceneBounds?.h || 400) - (sceneBounds?.floorY || 160) - 40),
+      generator,
+    });
+  }
+
+  update(dt, agents, otherPets, sceneBounds, obstacles) {
+    // Animation frame cycling
+    this.frameTimer += dt;
+    if (this.frameTimer > this.frameInterval) {
+      this.frameTimer = 0;
+      this.frame = (this.frame + 1) % 2;
+    }
+
+    // Flying bob
+    if (this.moveType === 'fly') {
+      this._flyTime += dt;
+    }
+
+    // AI decision timer
+    this.actionTimer += dt;
+    if (this.actionTimer > this.nextActionTime) {
+      this._decideAction(agents, otherPets, sceneBounds);
+      this.actionTimer = 0;
+      this.nextActionTime = 3000 + Math.random() * 8000;
+    }
+
+    // Movement
+    if (this.state === 'moving' && this.target) {
+      this._updateMovement(dt, sceneBounds, obstacles);
+    }
+  }
+
+  _decideAction(agents, otherPets, bounds) {
+    const roll = Math.random();
+    const sleepChance = (Pet.TYPES[this.type] || {}).sleepChance || 0.15;
+
+    if (roll < 0.25 && agents && agents.length > 0) {
+      // Go to an agent — rub against their legs
+      const agent = agents[Math.floor(Math.random() * agents.length)];
+      const charW = 32 * (agent.character?.scale || 2.5);
+      this.target = {
+        x: agent.character.x + charW * 0.3 + Math.random() * 20,
+        y: agent.character.y + 32 * (agent.character?.scale || 2.5) - 10,
+      };
+      this.state = 'moving';
+      this.interactLabel = 'agent';
+    } else if (roll < 0.40 && otherPets && otherPets.length > 0) {
+      // Go to another pet
+      const candidates = otherPets.filter(p => p !== this);
+      if (candidates.length > 0) {
+        const other = candidates[Math.floor(Math.random() * candidates.length)];
+        this.target = { x: other.x + 15, y: other.y };
+        this.state = 'moving';
+        this.interactLabel = 'pet';
+      } else {
+        this._randomWalk(bounds);
+      }
+    } else if (roll < 0.60) {
+      // Random walk
+      this._randomWalk(bounds);
+    } else if (roll < 0.60 + sleepChance) {
+      // Sleep
+      this.state = 'sleeping';
+      this.target = null;
+    } else {
+      // Idle — stay put
+      this.state = 'idle';
+      this.target = null;
+    }
+  }
+
+  _randomWalk(bounds) {
+    const w = bounds?.w || 640;
+    const h = bounds?.h || 400;
+    const floorY = bounds?.floorY || 160;
+    const floorH = h - floorY;
+    this.target = {
+      x: 30 + Math.random() * (w - 60),
+      y: floorY + 5 + Math.random() * (floorH - 30),  // roam entire floor area
+    };
+    this.state = 'moving';
+    this.interactLabel = null;
+  }
+
+  _updateMovement(dt, bounds, obstacles) {
+    if (!this.target) { this.state = 'idle'; return; }
+
+    const dx = this.target.x - this.x;
+    const dy = this.target.y - this.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+
+    if (dist <= 3) {
+      this.x = this.target.x;
+      this.y = this.target.y;
+      this.state = 'idle';
+      this.target = null;
+      return;
+    }
+
+    // Hamster: occasional speed burst
+    let speed = this.speed;
+    if (this.type === 'hamster' && Math.random() < 0.01) {
+      speed = 0.08; // sprint!
+    }
+
+    // Update facing direction
+    if (dx < -1) this.facingLeft = true;
+    else if (dx > 1) this.facingLeft = false;
+
+    let newX = this.x + (dx / dist) * speed * dt;
+    let newY = this.y + (dy / dist) * speed * dt;
+    const prevX = this.x;
+    const prevY = this.y;
+
+    // ── Collision detection against obstacles ──
+    if (obstacles && obstacles.length > 0) {
+      const petW = 16 * this.scale;
+      const petH = 16 * this.scale;
+      // Pet hitbox — small rect at pet center-bottom
+      const hw = 10, hh = 8;
+      const getHitbox = (px, py) => ({
+        x: px + petW / 2 - hw / 2,
+        y: py + petH - hh,
+        w: hw,
+        h: hh,
+      });
+
+      for (const obs of obstacles) {
+        const hb = getHitbox(newX, newY);
+        const hit = hb.x < obs.x + obs.w && hb.x + hb.w > obs.x
+                 && hb.y < obs.y + obs.h && hb.y + hb.h > obs.y;
+
+        if (hit) {
+          // Try sliding: X-only or Y-only
+          const hbX = getHitbox(newX, this.y);
+          const xHit = hbX.x < obs.x + obs.w && hbX.x + hbX.w > obs.x
+                    && hbX.y < obs.y + obs.h && hbX.y + hbX.h > obs.y;
+          const hbY = getHitbox(this.x, newY);
+          const yHit = hbY.x < obs.x + obs.w && hbY.x + hbY.w > obs.x
+                    && hbY.y < obs.y + obs.h && hbY.y + hbY.h > obs.y;
+
+          if (xHit && yHit) {
+            newX = this.x; newY = this.y;
+          } else if (xHit) {
+            newX = this.x;
+          } else if (yHit) {
+            newY = this.y;
+          }
+        }
+      }
+    }
+
+    this.x = newX;
+    this.y = newY;
+
+    // Clamp within scene bounds — roam entire floor area
+    const w = bounds?.w || 640;
+    const bh = bounds?.h || 400;
+    const floorY = bounds?.floorY || Math.round(bh * 0.40);
+    this.x = Math.max(10, Math.min(w - 30, this.x));
+    this.y = Math.max(floorY + 5, Math.min(bh - 20, this.y));
+
+    // Anti-stuck: if barely moved, give up and pick a new target
+    const moved = Math.abs(this.x - prevX) + Math.abs(this.y - prevY);
+    if (moved < 0.05) {
+      this._stuckTimer += dt;
+      if (this._stuckTimer > 1200) {
+        this._stuckTimer = 0;
+        this.state = 'idle';
+        this.target = null;
+      }
+    } else {
+      this._stuckTimer = 0;
+    }
+  }
+
+  render(ctx) {
+    const petCanvas = this.generator.generatePet(this.type, this.frame, this.color);
+    if (!petCanvas) return;
+
+    const drawW = 16 * this.scale;
+    const drawH = 16 * this.scale;
+
+    // Flying pets bob up and down
+    let drawY = this.y;
+    if (this.moveType === 'fly') {
+      drawY = this.y - 20 + Math.sin(this._flyTime * 0.003) * 8;
+    }
+
+    ctx.save();
+    ctx.imageSmoothingEnabled = false;
+
+    // Flip horizontally if facing right (default sprite faces left)
+    if (!this.facingLeft) {
+      ctx.translate(this.x + drawW, drawY);
+      ctx.scale(-1, 1);
+      ctx.drawImage(petCanvas, 0, 0, drawW, drawH);
+    } else {
+      ctx.drawImage(petCanvas, this.x, drawY, drawW, drawH);
+    }
+
+    // Shadow on ground
+    ctx.globalAlpha = 0.15;
+    ctx.fillStyle = '#000';
+    const shadowY = this.y + drawH - 2;
+    const shadowW = drawW * 0.7;
+    ctx.beginPath();
+    ctx.ellipse(
+      this.facingLeft ? this.x + drawW * 0.35 : this.x + drawW * 0.35,
+      shadowY,
+      shadowW / 2, 3, 0, 0, Math.PI * 2
+    );
+    ctx.fill();
+    ctx.globalAlpha = 1;
+
+    // Sleeping ZZZ
+    if (this.state === 'sleeping') {
+      ctx.font = '6px monospace';
+      ctx.fillStyle = '#87CEEB';
+      ctx.fillText('z', this.x + drawW, drawY - 2);
+      ctx.fillText('Z', this.x + drawW + 4, drawY - 8);
+    }
+
+    ctx.restore();
+  }
+
+  /** Y value for depth sorting */
+  get sortY() {
+    return this.y;
+  }
+}
+
+if (typeof window !== 'undefined') window.Pet = Pet;

package/public/js/pets/PetManager.js

@@ -0,0 +1,102 @@
+/**
+ * PetManager.js — Manages all independent pets in the scene
+ * Handles creation, update loop, rendering, and configuration persistence
+ */
+class PetManager {
+  constructor(generator) {
+    this.pets = [];
+    this.generator = generator;
+    this._sceneBounds = { w: 640, h: 400, floorY: 160 };
+  }
+
+  /** Set scene dimensions for pet movement boundaries */
+  setSceneBounds(w, h) {
+    this._sceneBounds = { w, h, floorY: Math.round(h * 0.40) };
+  }
+
+  /** Add a pet by type, optionally with a specific color */
+  addPet(type, color) {
+    const pet = Pet.create(type, this.generator, this._sceneBounds, color || null);
+    this.pets.push(pet);
+    this._saveConfig();
+    return pet;
+  }
+
+  /** Change a pet's color */
+  setPetColor(id, color) {
+    const pet = this.pets.find(p => p.id === id);
+    if (pet) {
+      pet.color = color;
+      this._saveConfig();
+    }
+  }
+
+  /** Remove a pet by id */
+  removePet(id) {
+    this.pets = this.pets.filter(p => p.id !== id);
+    this._saveConfig();
+  }
+
+  /** Remove all pets */
+  clearPets() {
+    this.pets = [];
+    this._saveConfig();
+  }
+
+  /** Update all pets */
+  update(dt, agents, obstacles) {
+    for (const pet of this.pets) {
+      const otherPets = this.pets.filter(p => p !== pet);
+      pet.update(dt, agents, otherPets, this._sceneBounds, obstacles);
+    }
+  }
+
+  /** Render all pets (caller should handle depth sorting if needed) */
+  render(ctx) {
+    // Sort pets by Y for back-to-front rendering
+    const sorted = [...this.pets].sort((a, b) => a.sortY - b.sortY);
+    for (const pet of sorted) {
+      pet.render(ctx);
+    }
+  }
+
+  /** Load pet configuration from localStorage */
+  loadConfig() {
+    try {
+      const data = JSON.parse(localStorage.getItem('clawskin_pets') || '[]');
+      if (Array.isArray(data) && data.length > 0) {
+        this.pets = [];
+        for (const petData of data) {
+          if (petData.type && Pet.TYPES[petData.type]) {
+            this.addPet(petData.type, petData.color || null);
+          }
+        }
+      }
+    } catch {}
+  }
+
+  /** Save pet configuration to localStorage */
+  _saveConfig() {
+    try {
+      const data = this.pets.map(p => ({ type: p.type, color: p.color }));
+      localStorage.setItem('clawskin_pets', JSON.stringify(data));
+    } catch {}
+  }
+
+  /** Initialize with some default pets if no saved config */
+  initDefaults() {
+    this.loadConfig();
+    if (this.pets.length === 0) {
+      // Start with a cat and a dog by default
+      this.addPet('cat');
+      this.addPet('dog');
+    }
+  }
+
+  /** Get all available pet types */
+  static getAvailableTypes() {
+    return Object.keys(Pet.TYPES);
+  }
+}
+
+if (typeof window !== 'undefined') window.PetManager = PetManager;