@julioventura/opensquad 0.1.17

package/dashboard/src/office/PhaserGame.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from 'react';
+import Phaser from 'phaser';
+import { OfficeScene } from './OfficeScene';
+import { useSquadStore } from '@/store/useSquadStore';
+
+export function PhaserGame() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const gameRef = useRef<Phaser.Game | null>(null);
+
+  // Create Phaser game on mount
+  useEffect(() => {
+    if (!containerRef.current || gameRef.current) return;
+
+    const container = containerRef.current;
+    const w = container.clientWidth || 800;
+    const h = container.clientHeight || 600;
+
+    const game = new Phaser.Game({
+      type: Phaser.AUTO,
+      parent: container,
+      width: w,
+      height: h,
+      pixelArt: false,          // disabled globally so text renders smooth
+      antialias: false,          // keep pixel art look for sprites
+      roundPixels: true,         // snap sprites to whole pixels
+      backgroundColor: '#1a1420',
+      scene: [OfficeScene],
+      scale: {
+        mode: Phaser.Scale.NONE,
+      },
+    });
+
+    gameRef.current = game;
+
+    // Resize canvas when container resizes
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          game.scale.resize(width, height);
+        }
+      }
+    });
+    ro.observe(container);
+
+    return () => {
+      ro.disconnect();
+      game.destroy(true);
+      gameRef.current = null;
+    };
+  }, []);
+
+  // Bridge React state → Phaser scene
+  useEffect(() => {
+    return useSquadStore.subscribe((state) => {
+      const game = gameRef.current;
+      if (!game) return;
+      const scene = game.scene.getScene('OfficeScene') as OfficeScene | null;
+      if (!scene || !scene.scene.isActive()) return;
+
+      const selectedSquad = state.selectedSquad;
+      const squadState = selectedSquad
+        ? state.activeStates.get(selectedSquad) ?? null
+        : null;
+
+      scene.events.emit('stateUpdate', squadState);
+    });
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        flex: 1,
+        overflow: 'hidden',
+        imageRendering: 'auto',
+      }}
+    />
+  );
+}

package/dashboard/src/office/RoomBuilder.ts

@@ -0,0 +1,190 @@
+import Phaser from 'phaser';
+import { COLORS, TILE, MARGIN, WALL_H } from './palette';
+import { FURNITURE_KEYS } from './assetKeys';
+
+export class RoomBuilder {
+  private scene: Phaser.Scene;
+
+  constructor(scene: Phaser.Scene) {
+    this.scene = scene;
+  }
+
+  build(roomW: number, roomH: number): void {
+    this.drawFloor(roomW, roomH);
+    this.drawWalls(roomW);
+    this.drawRoomBorder(roomW, roomH);
+    this.placeFurniture(roomW, roomH);
+  }
+
+  private drawFloor(roomW: number, roomH: number): void {
+    const g = this.scene.add.graphics();
+    // Main floor fill
+    g.fillStyle(COLORS.floor, 1);
+    g.fillRect(0, WALL_H, roomW, roomH - WALL_H);
+    // Checkerboard texture
+    g.fillStyle(COLORS.floorAlt, 0.25);
+    for (let y = WALL_H; y < roomH; y += TILE) {
+      for (let x = 0; x < roomW; x += TILE) {
+        if ((x / TILE + y / TILE) % 2 === 0) {
+          g.fillRect(x, y, TILE, TILE);
+        }
+      }
+    }
+    // Shadow along the wall base for depth
+    g.fillStyle(0x000000, 0.1);
+    g.fillRect(0, WALL_H, roomW, 10);
+    g.fillStyle(0x000000, 0.05);
+    g.fillRect(0, WALL_H + 10, roomW, 6);
+    // Subtle shadow along left and right walls
+    g.fillStyle(0x000000, 0.04);
+    g.fillRect(0, WALL_H, 6, roomH - WALL_H);
+    g.fillRect(roomW - 6, WALL_H, 6, roomH - WALL_H);
+    // Subtle warm highlight on bottom edge
+    g.fillStyle(0xddc89e, 0.15);
+    g.fillRect(0, roomH - 4, roomW, 4);
+    g.setDepth(-2);
+  }
+
+  private drawWalls(roomW: number): void {
+    const g = this.scene.add.graphics();
+    // Wall background — slight gradient effect with two tones
+    g.fillStyle(COLORS.wall, 1);
+    g.fillRect(0, 0, roomW, WALL_H);
+    // Lighter upper band for depth
+    g.fillStyle(0xede2d6, 1);
+    g.fillRect(0, 0, roomW, WALL_H / 3);
+    // Baseboard trim
+    g.fillStyle(COLORS.wallTrim, 1);
+    g.fillRect(0, WALL_H - 5, roomW, 5);
+    // Thin highlight line above baseboard
+    g.fillStyle(0xc8b8a8, 1);
+    g.fillRect(0, WALL_H - 6, roomW, 1);
+    g.setDepth(-1);
+  }
+
+  private drawRoomBorder(roomW: number, roomH: number): void {
+    const g = this.scene.add.graphics();
+    const bg = 0x1a1420;
+    const pad = 200; // generous padding to cover any viewport overflow
+
+    // Dark overlay strips outside the room on all 4 sides
+    g.fillStyle(bg, 1);
+    g.fillRect(-pad, -pad, roomW + pad * 2, pad);         // top
+    g.fillRect(-pad, roomH, roomW + pad * 2, pad);        // bottom
+    g.fillRect(-pad, -pad, pad, roomH + pad * 2);         // left
+    g.fillRect(roomW, -pad, pad, roomH + pad * 2);        // right
+
+    // Clean 2px border around room edge
+    g.lineStyle(2, 0x2a2030, 0.8);
+    g.strokeRect(0, 0, roomW, roomH);
+    g.setDepth(1000);
+  }
+
+  placeFurniture(roomW: number, roomH: number): void {
+    const s = this.scene;
+    const centerX = roomW / 2;
+    const deskAreaBottom = roomH - MARGIN;
+    const loungeY = deskAreaBottom - TILE * 0.5;
+
+    // ================================================================
+    // WALL DECORATIONS — 5 evenly-spaced sections for breathing room
+    // ================================================================
+    const wallSections = 5;
+    const section = roomW / wallSections;
+
+    // Section 1: Window — far left
+    s.add.image(section * 0.6, WALL_H + 5, FURNITURE_KEYS.blindsLargeWhite)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(0);
+
+    // Section 2: Bookshelf purple tall — left
+    s.add.image(section * 1.8, WALL_H + 40, FURNITURE_KEYS.bookshelfPurpleTall)
+      .setOrigin(0.5, 1).setScale(2).setDepth(0);
+
+    // Section 4: Whiteboard stand with graph — right of center
+    s.add.image(section * 3.2, WALL_H + 40, FURNITURE_KEYS.whiteboardStandGraph)
+      .setOrigin(0.5, 1).setScale(2.0).setDepth(0);
+
+    // Section 5: Window — far right
+    s.add.image(section * 4.4, WALL_H + 5, FURNITURE_KEYS.blindsLargeWhite)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(0);
+
+    // ================================================================
+    // CORNER PLANTS — one plant anchored to each room corner
+    // ================================================================
+    // Top-left corner
+    s.add.image(MARGIN / 2 + 8, WALL_H + TILE * 2, FURNITURE_KEYS.monstera)
+      .setOrigin(0.5, 1).setScale(1.3).setDepth(WALL_H + TILE * 2);
+
+    // Top-right corner — water cooler against the right wall
+    s.add.image(roomW - MARGIN / 4, WALL_H + TILE * 2, FURNITURE_KEYS.waterCooler)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(WALL_H + TILE * 2 + 1);
+
+    // Bottom-left corner
+    s.add.image(MARGIN / 2, roomH - TILE * 0.5, FURNITURE_KEYS.plant3)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(roomH - TILE * 0.5);
+
+    // Bottom-right corner
+    s.add.image(roomW - MARGIN / 2.5, roomH - TILE * 0.5, FURNITURE_KEYS.plantPoof)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(roomH - TILE * 0.5);
+
+    // Bottom-right corner — treasure chest
+    s.add.image(roomW - MARGIN / 4, roomH - TILE * 2, FURNITURE_KEYS.treasurechestGold)
+      .setOrigin(0.5, 1).setScale(1.4).setDepth(1);
+
+
+
+      
+    // Middle-left and middle-right (vertical center)
+    const midY = WALL_H + (roomH - WALL_H) / 2;
+    s.add.image(MARGIN / 2, midY, FURNITURE_KEYS.monsteraSmall)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(midY);
+    s.add.image(roomW - MARGIN / 2, midY, FURNITURE_KEYS.plant1)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(midY);
+
+    // ================================================================
+    // DESK-AREA ACCENTS — flowers near wall, anchored to desk tops
+    // ================================================================
+
+
+    // ================================================================
+    // LOUNGE ZONE — cozy social area at bottom
+    // ================================================================
+    // Rug — wide rectangular, covers full lounge seating group (448x256 sprite)
+    s.add.image(centerX, loungeY + TILE * 0.9, FURNITURE_KEYS.fancyRugWide)
+      .setOrigin(0.5, 0.5).setScale(0.7).setDepth(-0.5);
+
+    // Couch — centered, bigger
+    const couchY = loungeY + TILE * 0.3;
+    s.add.image(centerX, couchY, FURNITURE_KEYS.couchTanDown)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(couchY);
+
+    // Cushions — sitting on the couch seat (slightly above couch bottom)
+    s.add.image(centerX - 26, couchY - 28, FURNITURE_KEYS.cushionBlue)
+      .setOrigin(0.5, 0.5).setScale(1.5).setDepth(couchY + 1);
+    s.add.image(centerX + 26, couchY - 28, FURNITURE_KEYS.cushionTan)
+      .setOrigin(0.5, 0.5).setScale(1.5).setDepth(couchY + 1);
+
+    // Armchairs — flanking the couch, same scale
+    s.add.image(centerX - 95, loungeY + TILE * 0.8, FURNITURE_KEYS.armchairTanDown)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(loungeY + TILE * 0.8);
+    s.add.image(centerX + 95, loungeY + TILE * 0.8, FURNITURE_KEYS.armchairTanDown)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(loungeY + TILE * 0.8);
+
+    // Coffee table — in front of couch
+    s.add.image(centerX, loungeY + TILE * 1.5, FURNITURE_KEYS.coffeeTable)
+      .setOrigin(0.5, 1).setScale(1.4).setDepth(loungeY + TILE * 1.5);
+
+    // Coffee mug on table
+    s.add.image(centerX + 12, loungeY + TILE * 1.3, FURNITURE_KEYS.coffeeMugBlue)
+      .setOrigin(0.5, 1).setDepth(loungeY + TILE * 1.5 + 1);
+
+    // Coffee station — right side of lounge
+    const stationX = centerX + TILE * 6;
+    const stationY = loungeY + TILE * 1.9;
+    s.add.image(stationX, stationY, FURNITURE_KEYS.coffeetableBlackH)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(stationY);
+    s.add.image(stationX, stationY + 5, FURNITURE_KEYS.coffeepotRight)
+      .setOrigin(0.5, 1).setScale(1.2).setDepth(stationY + 1);
+
+  }
+}

package/dashboard/src/office/assetKeys.ts

@@ -0,0 +1,150 @@
+// Asset key constants for Phaser loader
+// All paths relative to /assets/ in public/
+
+// --- Characters ---
+export const MALE_CHARACTERS   = ['Male1', 'Male2', 'Male3', 'Male4'] as const;
+export const FEMALE_CHARACTERS = ['Female1', 'Female2', 'Female3', 'Female4', 'Female5', 'Female6'] as const;
+
+export type CharacterName =
+  | typeof MALE_CHARACTERS[number]
+  | typeof FEMALE_CHARACTERS[number];
+
+// Combined array for preloading all sprites
+export const CHARACTER_NAMES = [...MALE_CHARACTERS, ...FEMALE_CHARACTERS] as const;
+
+// Characters with only a single wave frame (no _1wave/_2wave variants)
+const SINGLE_WAVE = new Set<CharacterName>(['Male3', 'Male4', 'Female3', 'Female4', 'Female5', 'Female6']);
+
+// Returns the asset keys for a character's animation frames
+export function avatarKeys(name: CharacterName) {
+  return {
+    blink: `avatar_${name}_blink`,
+    talk: `avatar_${name}_talk`,
+    wave1: `avatar_${name}_wave1`,
+    wave2: `avatar_${name}_wave2`,
+  };
+}
+
+export function avatarPath(name: CharacterName, pose: string): string {
+  if (pose === 'wave1') return SINGLE_WAVE.has(name) ? `assets/avatars/${name}_wave.png` : `assets/avatars/${name}_1wave.png`;
+  if (pose === 'wave2') return SINGLE_WAVE.has(name) ? `assets/avatars/${name}_wave.png` : `assets/avatars/${name}_2wave.png`;
+  return `assets/avatars/${name}_${pose}.png`;
+}
+
+// --- Desks ---
+export const DESK_KEYS = {
+  blackIdle: 'desk_black_idle',
+  blackCoding: 'desk_black_coding',
+  blackCodingAlt: 'desk_black_coding_alt',
+  whiteIdle: 'desk_white_idle',
+  whiteCoding: 'desk_white_coding',
+  whiteCodingAlt: 'desk_white_coding_alt',
+  blackUp: 'desk_black_up',
+  whiteUp: 'desk_white_up',
+} as const;
+
+export const DESK_PATHS: Record<string, string> = {
+  [DESK_KEYS.blackIdle]: 'assets/desks/desktop_set_black_down.png',
+  [DESK_KEYS.blackCoding]: 'assets/desks/desktop_set_black_down_coding.png',
+  [DESK_KEYS.blackCodingAlt]: 'assets/desks/desktop_set_black_down_coding-1.png',
+  [DESK_KEYS.whiteIdle]: 'assets/desks/desktop_set_white_down.png',
+  [DESK_KEYS.whiteCoding]: 'assets/desks/desktop_set_white_down_coding.png',
+  [DESK_KEYS.whiteCodingAlt]: 'assets/desks/desktop_set_white_down_coding-1.png',
+  [DESK_KEYS.blackUp]: 'assets/desks/desktop_set_black_up.png',
+  [DESK_KEYS.whiteUp]: 'assets/desks/desktop_set_white_up.png',
+};
+
+// --- Furniture ---
+export const FURNITURE_KEYS = {
+  bookshelf: 'furniture_bookshelf',
+  whiteboard: 'furniture_whiteboard',
+  clock: 'furniture_clock',
+  plant1: 'furniture_plant1',
+  plant2: 'furniture_plant2',
+  plant3: 'furniture_plant3',
+  flowers1: 'furniture_flowers1',
+  flowers2: 'furniture_flowers2',
+  couch: 'furniture_couch',
+  rug: 'furniture_rug',
+  coffeeMug: 'furniture_coffee_mug',
+  blinds: 'furniture_blinds',
+  coffeeTable: 'furniture_coffee_table',
+  // New assets
+  lampTan: 'furniture_lamp_tan',
+  monstera: 'furniture_monstera',
+  monsteraSmall: 'furniture_monstera_small',
+  succulentGreen: 'furniture_succulent_green',
+  succulentBlue: 'furniture_succulent_blue',
+  posterBlue: 'furniture_poster_blue',
+  bulletinBoard: 'furniture_bulletin_board',
+  fancyRug: 'furniture_fancy_rug',
+  cushionBlue: 'furniture_cushion_blue',
+  cushionTan: 'furniture_cushion_tan',
+  armchairTan: 'furniture_armchair_tan',
+  backpackBlue: 'furniture_backpack_blue',
+  backpackRed: 'furniture_backpack_red',
+  plantPoof: 'furniture_plant_poof',
+  plantSpindly: 'furniture_plant_spindly',
+  coffeeMugBlue: 'furniture_coffee_mug_blue',
+  pictureFrame: 'furniture_picture_frame',
+  lantern: 'furniture_lantern',
+  windowBlindsOpen: 'furniture_window_blinds_open',
+  couchTanDown: 'furniture_couch_tan_down',
+  armchairTanDown: 'furniture_armchair_tan_down',
+  deskWood: 'furniture_desk_wood',
+  fancyRugWide: 'furniture_fancy_rug_wide',
+  waterCooler: 'furniture_water_cooler',
+  whiteboardStandGraph: 'furniture_whiteboard_stand_graph',
+  bookshelfPurpleTall: 'furniture_bookshelf_purple_tall',
+  coffeetableBlackH: 'furniture_coffeetable_black_h',
+  coffeepotRight: 'furniture_coffeepot_right',
+  blindsLargeWhite: 'furniture_blinds_large_white',
+  treasurechestGold: 'furniture_treasurechest_gold',
+} as const;
+
+export const FURNITURE_PATHS: Record<string, string> = {
+  [FURNITURE_KEYS.bookshelf]: 'assets/furniture/bookshelf.png',
+  [FURNITURE_KEYS.whiteboard]: 'assets/furniture/whiteboard.png',
+  [FURNITURE_KEYS.clock]: 'assets/furniture/clock.png',
+  [FURNITURE_KEYS.plant1]: 'assets/furniture/plant1.png',
+  [FURNITURE_KEYS.plant2]: 'assets/furniture/plant2.png',
+  [FURNITURE_KEYS.plant3]: 'assets/furniture/plant3.png',
+  [FURNITURE_KEYS.flowers1]: 'assets/furniture/flowers1.png',
+  [FURNITURE_KEYS.flowers2]: 'assets/furniture/flowers2.png',
+  [FURNITURE_KEYS.couch]: 'assets/furniture/couch.png',
+  [FURNITURE_KEYS.rug]: 'assets/furniture/rug.png',
+  [FURNITURE_KEYS.coffeeMug]: 'assets/furniture/coffee_mug.png',
+  [FURNITURE_KEYS.blinds]: 'assets/furniture/blinds.png',
+  [FURNITURE_KEYS.coffeeTable]: 'assets/furniture/coffee_table.png',
+  // New assets
+  [FURNITURE_KEYS.lampTan]: 'assets/furniture/lamp_tan.png',
+  [FURNITURE_KEYS.monstera]: 'assets/furniture/monstera.png',
+  [FURNITURE_KEYS.monsteraSmall]: 'assets/furniture/monstera_small.png',
+  [FURNITURE_KEYS.succulentGreen]: 'assets/furniture/succulent_green.png',
+  [FURNITURE_KEYS.succulentBlue]: 'assets/furniture/succulent_blue.png',
+  [FURNITURE_KEYS.posterBlue]: 'assets/furniture/poster_blue.png',
+  [FURNITURE_KEYS.bulletinBoard]: 'assets/furniture/bulletin_board.png',
+  [FURNITURE_KEYS.fancyRug]: 'assets/furniture/fancy_rug.png',
+  [FURNITURE_KEYS.cushionBlue]: 'assets/furniture/cushion_blue.png',
+  [FURNITURE_KEYS.cushionTan]: 'assets/furniture/cushion_tan.png',
+  [FURNITURE_KEYS.armchairTan]: 'assets/furniture/armchair_tan.png',
+  [FURNITURE_KEYS.backpackBlue]: 'assets/furniture/backpack_blue.png',
+  [FURNITURE_KEYS.backpackRed]: 'assets/furniture/backpack_red.png',
+  [FURNITURE_KEYS.plantPoof]: 'assets/furniture/plant_poof.png',
+  [FURNITURE_KEYS.plantSpindly]: 'assets/furniture/plant_spindly.png',
+  [FURNITURE_KEYS.coffeeMugBlue]: 'assets/furniture/coffee_mug_blue.png',
+  [FURNITURE_KEYS.pictureFrame]: 'assets/furniture/picture_frame.png',
+  [FURNITURE_KEYS.lantern]: 'assets/furniture/lantern.png',
+  [FURNITURE_KEYS.windowBlindsOpen]: 'assets/furniture/window_blinds_open.png',
+  [FURNITURE_KEYS.couchTanDown]: 'assets/furniture/couch_tan_down.png',
+  [FURNITURE_KEYS.armchairTanDown]: 'assets/furniture/armchair_tan_down.png',
+  [FURNITURE_KEYS.deskWood]: 'assets/furniture/desk_wood.png',
+  [FURNITURE_KEYS.fancyRugWide]: 'assets/furniture/fancy_rug_wide.png',
+  [FURNITURE_KEYS.waterCooler]: 'assets/furniture/water_cooler_better.png',
+  [FURNITURE_KEYS.whiteboardStandGraph]: 'assets/furniture/whiteboard_stand_graph.png',
+  [FURNITURE_KEYS.bookshelfPurpleTall]: 'assets/furniture/bookshelf_purple_tall.png',
+  [FURNITURE_KEYS.coffeetableBlackH]: 'assets/furniture/coffeetable_black_horizontal.png',
+  [FURNITURE_KEYS.coffeepotRight]: 'assets/furniture/coffeepot_right.png',
+  [FURNITURE_KEYS.blindsLargeWhite]: 'assets/furniture/blinds_large_closed_white.png',
+  [FURNITURE_KEYS.treasurechestGold]: 'assets/furniture/treasurechest_closed_gold.png',
+};

package/dashboard/src/office/palette.ts

@@ -0,0 +1,32 @@
+// Slimmed palette — only badge colors and layout constants
+// All visual rendering now uses sprite assets, not procedural colors
+
+export const COLORS = {
+  // Status badge dots
+  statusIdle: 0xbbbbdd,
+  statusWorking: 0x60b0ff,
+  statusDone: 0x70ff90,
+  statusCheckpoint: 0xffcc33,
+
+  // Name badge
+  nameCardBg: 0x14141c,
+  nameCardText: 0xffffff,
+
+  // Background
+  background: 0x1a1420,
+
+  // Floor fill (warm wood)
+  floor: 0xc8ac86,
+  floorAlt: 0xbca07a,
+
+  // Wall fill
+  wall: 0xe6dace,
+  wallTrim: 0xa89888,
+} as const;
+
+// Layout constants
+export const TILE = 32;           // Base tile size in pixels
+export const CELL_W = 3 * TILE;   // 96px — desk cell width (tighter grid)
+export const CELL_H = 3 * TILE;   // 96px — desk cell height
+export const MARGIN = 3 * TILE;   // 96px — room edge margin (more breathing room)
+export const WALL_H = 3 * TILE;   // 96px — wall strip height (taller for decorations)