let-them-talk 4.2.0 → 4.3.0

package/office/builder.js

@@ -0,0 +1,355 @@
+// builder.js — Real-time World Builder for the 3D Hub
+// Press B to toggle builder mode. Click to place assets. R to rotate. Right-click to delete.
+import * as THREE from 'three';
+import { S } from './state.js';
+import { ASSETS, ASSET_CATEGORIES, getAsset, getAssetsByCategory, createGhost } from './assets.js';
+import { addPlacement, removePlacement, loadWorld, getPlacements } from './world-save.js';
+import { isPlayerMode } from './player.js';
+
+var _active = false;          // builder mode on/off
+var _panel = null;             // UI panel element
+var _selectedAsset = null;     // currently selected asset ID
+var _ghostMesh = null;         // preview mesh following cursor
+var _rotation = 0;             // current placement rotation (0, PI/2, PI, 3PI/2)
+var _placedMeshes = {};        // id → THREE.Group map for deletion
+var _gridHelper = null;        // grid overlay
+var _raycaster = new THREE.Raycaster();
+var _mouse = new THREE.Vector2();
+var _floorPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // Y=0 plane
+var GRID_SIZE = 0.5;           // snap grid in world units
+var _undoStack = [];           // for undo (Ctrl+Z)
+
+// ===================== PUBLIC API =====================
+
+export function isBuilderActive() { return _active; }
+
+export function toggleBuilder() {
+  if (_active) exitBuilder();
+  else enterBuilder();
+}
+
+export function enterBuilder() {
+  if (_active) return;
+  _active = true;
+  showPanel();
+  showGrid();
+  addListeners();
+}
+
+export function exitBuilder() {
+  if (!_active) return;
+  _active = false;
+  hidePanel();
+  hideGrid();
+  removeGhost();
+  removeListeners();
+  _selectedAsset = null;
+}
+
+// Load saved placements and render them in the scene
+export function loadSavedWorld() {
+  loadWorld().then(function(placements) {
+    if (!placements || !Array.isArray(placements)) return;
+    for (var i = 0; i < placements.length; i++) {
+      renderPlacement(placements[i]);
+    }
+  });
+}
+
+// ===================== GRID =====================
+
+function showGrid() {
+  if (_gridHelper) return;
+  _gridHelper = new THREE.GridHelper(50, 100, 0x444466, 0x333355); // 50 units, 0.5 unit cells
+  _gridHelper.position.y = 0.005;
+  _gridHelper.material.transparent = true;
+  _gridHelper.material.opacity = 0.3;
+  S.scene.add(_gridHelper);
+}
+
+function hideGrid() {
+  if (_gridHelper) {
+    S.scene.remove(_gridHelper);
+    _gridHelper.geometry.dispose();
+    _gridHelper.material.dispose();
+    _gridHelper = null;
+  }
+}
+
+// ===================== GHOST PREVIEW =====================
+
+function setGhost(assetId) {
+  removeGhost();
+  if (!assetId) return;
+  _ghostMesh = createGhost(assetId);
+  if (_ghostMesh) {
+    S.scene.add(_ghostMesh);
+  }
+}
+
+function removeGhost() {
+  if (_ghostMesh) {
+    S.scene.remove(_ghostMesh);
+    _ghostMesh.traverse(function(c) {
+      if (c.geometry) c.geometry.dispose();
+      if (c.material) c.material.dispose();
+    });
+    _ghostMesh = null;
+  }
+}
+
+function updateGhostPosition(event) {
+  if (!_ghostMesh || !S.renderer || !S.camera) return;
+  var rect = S.renderer.domElement.getBoundingClientRect();
+  _mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+  _mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+  _raycaster.setFromCamera(_mouse, S.camera);
+
+  var intersect = new THREE.Vector3();
+  _raycaster.ray.intersectPlane(_floorPlane, intersect);
+  if (intersect) {
+    // Snap to grid
+    intersect.x = Math.round(intersect.x / GRID_SIZE) * GRID_SIZE;
+    intersect.z = Math.round(intersect.z / GRID_SIZE) * GRID_SIZE;
+    intersect.y = 0;
+    _ghostMesh.position.copy(intersect);
+    _ghostMesh.rotation.y = _rotation;
+  }
+}
+
+// ===================== PLACEMENT =====================
+
+function placeAsset(event) {
+  if (!_selectedAsset || !_ghostMesh) return;
+
+  var pos = _ghostMesh.position.clone();
+  var entry = addPlacement(_selectedAsset, pos.x, pos.y, pos.z, _rotation, 'user');
+  renderPlacement(entry);
+  _undoStack.push(entry.id);
+}
+
+function renderPlacement(entry) {
+  var asset = getAsset(entry.type);
+  if (!asset) return;
+  var group = asset.factory();
+  group.position.set(entry.x, entry.y || 0, entry.z);
+  group.rotation.y = entry.rotY || 0;
+  group.userData.placementId = entry.id;
+  group.userData.isPlaced = true;
+  S.scene.add(group);
+  _placedMeshes[entry.id] = group;
+}
+
+function deleteNearestPlacement(event) {
+  if (!S.renderer || !S.camera) return;
+  var rect = S.renderer.domElement.getBoundingClientRect();
+  _mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+  _mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+  _raycaster.setFromCamera(_mouse, S.camera);
+
+  // Collect all placed meshes
+  var meshes = [];
+  for (var id in _placedMeshes) {
+    _placedMeshes[id].traverse(function(c) {
+      if (c.isMesh) { c.userData._placementId = id; meshes.push(c); }
+    });
+  }
+
+  var hits = _raycaster.intersectObjects(meshes, false);
+  if (hits.length > 0) {
+    var hitId = hits[0].object.userData._placementId;
+    if (hitId && _placedMeshes[hitId]) {
+      // Remove from scene
+      var group = _placedMeshes[hitId];
+      S.scene.remove(group);
+      group.traverse(function(c) {
+        if (c.geometry) c.geometry.dispose();
+        if (c.material && !c.material._shared) c.material.dispose();
+      });
+      delete _placedMeshes[hitId];
+      // Remove from save data
+      removePlacement(hitId);
+    }
+  }
+}
+
+function undoLast() {
+  if (_undoStack.length === 0) return;
+  var lastId = _undoStack.pop();
+  if (_placedMeshes[lastId]) {
+    var group = _placedMeshes[lastId];
+    S.scene.remove(group);
+    group.traverse(function(c) {
+      if (c.geometry) c.geometry.dispose();
+      if (c.material) c.material.dispose();
+    });
+    delete _placedMeshes[lastId];
+    removePlacement(lastId);
+  }
+}
+
+// ===================== UI PANEL =====================
+
+function showPanel() {
+  if (_panel) return;
+  _panel = document.createElement('div');
+  _panel.id = 'builder-panel';
+  _panel.style.cssText = 'position:fixed;right:12px;top:80px;z-index:999999;width:180px;max-height:70vh;overflow-y:auto;background:rgba(22,27,34,0.95);border:1px solid #30363d;border-radius:10px;padding:0 8px 8px;font-family:system-ui;color:#e6edf3;backdrop-filter:blur(8px);';
+
+  // Drag handle header
+  var header = document.createElement('div');
+  header.style.cssText = 'text-align:center;font-size:13px;font-weight:bold;color:#58a6ff;padding:8px 0;border-bottom:1px solid #30363d;margin-bottom:8px;cursor:grab;user-select:none;';
+  header.textContent = '\u2630 World Builder';
+  header.title = 'Drag to move';
+  _panel.appendChild(header);
+
+  // Drag logic — store refs for cleanup in hidePanel()
+  var dragOffX = 0, dragOffY = 0, dragging = false;
+  header.addEventListener('mousedown', function(e) {
+    dragging = true;
+    dragOffX = e.clientX - _panel.getBoundingClientRect().left;
+    dragOffY = e.clientY - _panel.getBoundingClientRect().top;
+    header.style.cursor = 'grabbing';
+    e.preventDefault();
+  });
+  _panel._dragMove = function(e) {
+    if (!dragging || !_panel) return;
+    _panel.style.left = (e.clientX - dragOffX) + 'px';
+    _panel.style.top = (e.clientY - dragOffY) + 'px';
+    _panel.style.right = 'auto';
+    _panel.style.transform = 'none';
+  };
+  _panel._dragUp = function() {
+    if (dragging) { dragging = false; if (header) header.style.cursor = 'grab'; }
+  };
+  document.addEventListener('mousemove', _panel._dragMove);
+  document.addEventListener('mouseup', _panel._dragUp);
+
+  // Hint
+  var hint = document.createElement('div');
+  hint.style.cssText = 'font-size:9px;color:#8b949e;text-align:center;margin-bottom:8px;';
+  hint.textContent = 'Click=Place | R=Rotate | Right-click=Delete | Ctrl+Z=Undo | B=Close';
+  _panel.appendChild(hint);
+
+  // Categories + assets
+  for (var ci = 0; ci < ASSET_CATEGORIES.length; ci++) {
+    var cat = ASSET_CATEGORIES[ci];
+    var catAssets = getAssetsByCategory(cat.id);
+    if (catAssets.length === 0) continue;
+
+    var catLabel = document.createElement('div');
+    catLabel.style.cssText = 'font-size:10px;color:#8b949e;padding:4px 0 2px;text-transform:uppercase;letter-spacing:1px;';
+    catLabel.textContent = cat.icon + ' ' + cat.label;
+    _panel.appendChild(catLabel);
+
+    for (var ai = 0; ai < catAssets.length; ai++) {
+      var asset = catAssets[ai];
+      var btn = document.createElement('button');
+      btn.style.cssText = 'display:block;width:100%;padding:6px 8px;margin:2px 0;background:rgba(48,54,61,0.6);border:1px solid transparent;border-radius:6px;color:#c9d1d9;font-size:11px;cursor:pointer;text-align:left;transition:all 0.15s;';
+      btn.textContent = asset.icon + ' ' + asset.name;
+      btn.dataset.assetId = asset.id;
+      btn.addEventListener('mouseenter', function() { this.style.background = 'rgba(88,166,255,0.2)'; this.style.borderColor = '#58a6ff'; });
+      btn.addEventListener('mouseleave', function() {
+        if (this.dataset.assetId !== _selectedAsset) {
+          this.style.background = 'rgba(48,54,61,0.6)'; this.style.borderColor = 'transparent';
+        }
+      });
+      btn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        var id = this.dataset.assetId;
+        _selectedAsset = id;
+        _rotation = 0;
+        setGhost(id);
+        // Highlight selected
+        var btns = _panel.querySelectorAll('button');
+        for (var b = 0; b < btns.length; b++) {
+          btns[b].style.background = 'rgba(48,54,61,0.6)'; btns[b].style.borderColor = 'transparent';
+        }
+        this.style.background = 'rgba(88,166,255,0.3)'; this.style.borderColor = '#58a6ff';
+      });
+      _panel.appendChild(btn);
+    }
+  }
+
+  // Append to fullscreen element if active, otherwise document.body
+  // This ensures the builder panel is visible when the 3D container is fullscreened
+  var target = document.fullscreenElement || document.body;
+  target.appendChild(_panel);
+}
+
+function hidePanel() {
+  if (_panel) {
+    // Remove drag listeners to prevent leaks
+    if (_panel._dragMove) document.removeEventListener('mousemove', _panel._dragMove);
+    if (_panel._dragUp) document.removeEventListener('mouseup', _panel._dragUp);
+    if (_panel.parentElement) _panel.remove();
+  }
+  _panel = null;
+}
+
+// ===================== EVENT LISTENERS =====================
+
+var _onMouseMove = null;
+var _onMouseDown = null;
+var _onContextMenu = null;
+var _onKeyDown = null;
+
+function addListeners() {
+  _onMouseMove = function(e) { updateGhostPosition(e); };
+  _onMouseDown = function(e) {
+    if (!_active) return;
+    if (e.button === 0 && _selectedAsset) { // left click
+      // Don't place if clicking the panel
+      if (_panel && _panel.contains(e.target)) return;
+      placeAsset(e);
+    }
+  };
+  _onContextMenu = function(e) {
+    if (!_active) return;
+    e.preventDefault();
+    deleteNearestPlacement(e);
+  };
+  _onKeyDown = function(e) {
+    if (!_active) return;
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+    if (e.code === 'KeyR') {
+      // Rotate 90 degrees
+      _rotation = (_rotation + Math.PI / 2) % (Math.PI * 2);
+      if (_ghostMesh) _ghostMesh.rotation.y = _rotation;
+    }
+    if (e.code === 'KeyZ' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      undoLast();
+    }
+  };
+
+  window.addEventListener('mousemove', _onMouseMove);
+  window.addEventListener('mousedown', _onMouseDown);
+  window.addEventListener('contextmenu', _onContextMenu);
+  window.addEventListener('keydown', _onKeyDown);
+}
+
+function removeListeners() {
+  if (_onMouseMove) window.removeEventListener('mousemove', _onMouseMove);
+  if (_onMouseDown) window.removeEventListener('mousedown', _onMouseDown);
+  if (_onContextMenu) window.removeEventListener('contextmenu', _onContextMenu);
+  if (_onKeyDown) window.removeEventListener('keydown', _onKeyDown);
+  _onMouseMove = _onMouseDown = _onContextMenu = _onKeyDown = null;
+}
+
+// ===================== CLEANUP =====================
+
+export function cleanupBuilder() {
+  exitBuilder();
+  // Remove all placed meshes from scene
+  for (var id in _placedMeshes) {
+    var group = _placedMeshes[id];
+    S.scene.remove(group);
+    group.traverse(function(c) {
+      if (c.geometry) c.geometry.dispose();
+      if (c.material) c.material.dispose();
+    });
+  }
+  _placedMeshes = {};
+  _undoStack = [];
+}

package/office/campus-env.js

@@ -86,6 +86,7 @@ export function buildCampusEnvironment() {
 
   // ========== BAR & CAFÉ (back left) ==========
   buildBar(-14, -12, walnutMat, chromeMat, neonBlueMat, neonPurpleMat);
+  buildJukebox(-10, -13.5); // Right side of bar area, against the back wall
 
   // ========== RECREATION CENTER (back center) ==========
   buildRecCenter(0, -12, walnutMat, chromeMat, carpetMat);
@@ -595,13 +596,13 @@ function buildGamingDesk(x, z, index) {
   screen.position.set(0, 1.15, -0.234);
   group.add(screen);
 
-  // Monitor stand (V-shaped, chrome)
+  // Monitor stand (V-shaped, chrome — positioned BEHIND the screen to avoid clipping)
   var standMat = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.15, metalness: 0.7 });
   var standArm = new THREE.Mesh(new THREE.BoxGeometry(0.04, 0.25, 0.04), standMat);
-  standArm.position.set(0, 0.92, -0.25);
+  standArm.position.set(0, 0.92, -0.27);
   group.add(standArm);
   var standBase = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.02, 0.15), standMat);
-  standBase.position.set(0, 0.78, -0.25);
+  standBase.position.set(0, 0.78, -0.27);
   group.add(standBase);
 
   // PC tower under desk (with RGB glow)
@@ -898,26 +899,25 @@ function buildManagerOffice(x, z, glassMat, frameMat, walnutMat, leatherMat, chr
   cablePanel.position.set(0, 0.5, 0.9);
   group.add(cablePanel);
 
-  // --- Dual ultrawide monitors ---
+  // --- Single 47" ultrawide monitor (replaces dual setup per owner request) ---
   var monMat = new THREE.MeshStandardMaterial({ color: 0x0a0a0a, roughness: 0.2 });
-  [-0.45, 0.45].forEach(function(mx) {
-    var mon = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.35, 0.025), monMat);
-    mon.position.set(mx, 1.15, 1.05); mon.castShadow = true;
-    group.add(mon);
-    // Screen
-    var scrMat = new THREE.MeshStandardMaterial({ color: 0x1a2a4a, emissive: 0x58a6ff, emissiveIntensity: 0.3, roughness: 0.1 });
-    var scr = new THREE.Mesh(new THREE.PlaneGeometry(0.55, 0.3), scrMat);
-    scr.position.set(mx, 1.15, 1.037);
-    group.add(scr);
-    // Stand
-    var stand = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 0.22, 6), chromeMat);
-    stand.position.set(mx, 0.95, 1.05);
-    group.add(stand);
-  });
-  // Monitor arm (chrome, connecting both)
-  var monArm = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.03, 0.03), chromeMat);
-  monArm.position.set(0, 1.0, 1.05);
-  group.add(monArm);
+  // 47" = ~1.2m wide x 0.67m tall in world units (16:9 aspect ratio, scaled to desk)
+  var bigMon = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.67, 0.025), monMat);
+  bigMon.position.set(0, 1.2, 1.05); bigMon.castShadow = true;
+  group.add(bigMon);
+  // Screen (in FRONT of bezel — z offset +0.013 so stand doesn't clip through)
+  var scrMat = new THREE.MeshStandardMaterial({ color: 0x1a2a4a, emissive: 0x58a6ff, emissiveIntensity: 0.3, roughness: 0.1 });
+  var bigScr = new THREE.Mesh(new THREE.PlaneGeometry(1.14, 0.61), scrMat);
+  bigScr.position.set(0, 1.2, 1.063);
+  group.add(bigScr);
+  // Center stand (BEHIND screen — z offset -0.02 so it doesn't poke through)
+  var stand = new THREE.Mesh(new THREE.CylinderGeometry(0.04, 0.04, 0.28, 8), chromeMat);
+  stand.position.set(0, 0.92, 1.07);
+  group.add(stand);
+  // Stand base (BEHIND screen)
+  var standBase = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.02, 0.2), chromeMat);
+  standBase.position.set(0, 0.78, 1.07);
+  group.add(standBase);
 
   // --- Keyboard + mouse ---
   var kbMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 0.5 });
@@ -1082,9 +1082,10 @@ function buildManagerOffice(x, z, glassMat, frameMat, walnutMat, leatherMat, chr
   S._managerOfficePos = { x: x, z: z };
 
   // Register manager desk in deskMeshes so monitor screen system works
+  // bigScr is the 47" monitor screen — used for click detection + iframe overlay
   var mgrDeskIdx = CAMPUS_DESKS.length - 1;
   var mgrScreenMat = new THREE.MeshStandardMaterial({ color: 0x333333, emissive: 0x333333, emissiveIntensity: 0.1, roughness: 0.2 });
-  S.deskMeshes[mgrDeskIdx] = { group: group, screen: null, screenMat: mgrScreenMat, index: mgrDeskIdx, x: x, z: z + 1.7 };
+  S.deskMeshes[mgrDeskIdx] = { group: group, screen: bigScr, screenMat: mgrScreenMat, index: mgrDeskIdx, x: x, z: z + 1.7 };
 }
 
 // ==================== DESIGNER STUDIO ====================
@@ -1199,6 +1200,101 @@ function buildBar(x, z, walnutMat, chromeMat, neonBlueMat, neonPurpleMat) {
   S.furnitureGroup.add(sign);
 }
 
+// ==================== JUKEBOX (Wurlitzer 1015 style) ====================
+function buildJukebox(x, z) {
+  var group = new THREE.Group();
+  group.position.set(x, 0, z);
+
+  // Main body — rounded wooden cabinet
+  var bodyMat = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.5, metalness: 0.05 });
+  var body = new THREE.Mesh(new THREE.BoxGeometry(0.9, 1.5, 0.5), bodyMat);
+  body.position.y = 0.75; body.castShadow = true;
+  group.add(body);
+
+  // Chrome trim top arch
+  var chromeMat = new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.1, metalness: 0.8 });
+  var topArch = new THREE.Mesh(new THREE.CylinderGeometry(0.45, 0.45, 0.06, 16, 1, false, 0, Math.PI), chromeMat);
+  topArch.position.set(0, 1.53, 0);
+  topArch.rotation.z = Math.PI;
+  topArch.rotation.y = Math.PI / 2;
+  group.add(topArch);
+
+  // Glass viewing panel (curved top section)
+  var glassMat = new THREE.MeshStandardMaterial({ color: 0xaaddff, transparent: true, opacity: 0.4, roughness: 0.05 });
+  var glassPanel = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.4, 0.08), glassMat);
+  glassPanel.position.set(0, 1.35, 0.22);
+  group.add(glassPanel);
+
+  // Neon glow strips (sides) — animated via S._jukeboxNeon
+  var neonColors = [0xff4488, 0xff8844, 0xffdd44, 0x44ff88, 0x4488ff, 0xaa44ff];
+  var neonMat = new THREE.MeshStandardMaterial({ color: 0xff4488, emissive: 0xff4488, emissiveIntensity: 0.8, roughness: 0.2 });
+  // Left neon strip
+  var neonL = new THREE.Mesh(new THREE.BoxGeometry(0.04, 1.2, 0.04), neonMat);
+  neonL.position.set(-0.42, 0.75, 0.23);
+  group.add(neonL);
+  // Right neon strip
+  var neonR = new THREE.Mesh(new THREE.BoxGeometry(0.04, 1.2, 0.04), neonMat);
+  neonR.position.set(0.42, 0.75, 0.23);
+  group.add(neonR);
+  // Top neon arc
+  var neonTop = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.04, 0.04), neonMat);
+  neonTop.position.set(0, 1.5, 0.23);
+  group.add(neonTop);
+
+  // Bubble tube columns (sides)
+  var bubbleMat = new THREE.MeshStandardMaterial({ color: 0x66ccff, transparent: true, opacity: 0.5, emissive: 0x66ccff, emissiveIntensity: 0.3 });
+  var bubbleL = new THREE.Mesh(new THREE.CylinderGeometry(0.04, 0.04, 1.3, 8), bubbleMat);
+  bubbleL.position.set(-0.38, 0.75, 0.18);
+  group.add(bubbleL);
+  var bubbleR = new THREE.Mesh(new THREE.CylinderGeometry(0.04, 0.04, 1.3, 8), bubbleMat);
+  bubbleR.position.set(0.38, 0.75, 0.18);
+  group.add(bubbleR);
+
+  // Chrome base
+  var baseMat = chromeMat;
+  var base = new THREE.Mesh(new THREE.BoxGeometry(1, 0.08, 0.55), baseMat);
+  base.position.y = 0.04;
+  group.add(base);
+
+  // Chrome grille (speaker area — lower section)
+  for (var gi = 0; gi < 6; gi++) {
+    var grille = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.01, 0.01), chromeMat);
+    grille.position.set(0, 0.15 + gi * 0.06, 0.26);
+    group.add(grille);
+  }
+
+  // Record selector buttons (front panel)
+  var buttonMat = new THREE.MeshStandardMaterial({ color: 0xdddddd, roughness: 0.3, metalness: 0.5 });
+  for (var bi = 0; bi < 3; bi++) {
+    var btn = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.02, 8), buttonMat);
+    btn.position.set(-0.15 + bi * 0.15, 0.85, 0.26);
+    btn.rotation.x = Math.PI / 2;
+    group.add(btn);
+  }
+
+  // "NOW PLAYING" CSS2D label (hidden by default, shown when music plays)
+  var labelDiv = document.createElement('div');
+  labelDiv.className = 'jukebox-label';
+  labelDiv.style.cssText = 'color:#ff4488;font-size:8px;font-weight:bold;font-family:monospace;text-shadow:0 0 6px #ff4488;text-align:center;pointer-events:none;opacity:0.9;';
+  labelDiv.innerHTML = '<div style="color:#ffdd44;font-size:10px">JUKEBOX</div><div style="font-size:7px;color:#aaa">Press E to play</div>';
+  var label = new CSS2DObject(labelDiv);
+  label.position.set(0, 1.8, 0);
+  group.add(label);
+
+  // Store references for interaction + animation
+  S._jukebox = {
+    group: group,
+    neonMat: neonMat,
+    neonColors: neonColors,
+    neonIndex: 0,
+    label: labelDiv,
+    pos: { x: x, z: z },
+    playing: false
+  };
+
+  S.furnitureGroup.add(group);
+}
+
 // ==================== RECREATION CENTER ====================
 function buildRecCenter(x, z, walnutMat, chromeMat, carpetMat) {
   // Carpet area

package/office/face.js

@@ -254,5 +254,70 @@ export function buildFaceSprite(eyeStyle, mouthStyle, sleeping) {
   var faceMesh = new THREE.Mesh(new THREE.PlaneGeometry(0.38, 0.38), faceMat);
   faceMesh.userData.canvas = canvas;
   faceMesh.userData.texture = tex;
+  faceMesh.userData.eyeStyle = eyeStyle;
+  faceMesh.userData.mouthStyle = mouthStyle;
   return faceMesh;
 }
+
+// Emotion presets: map emotion name to eye + mouth style
+var EMOTION_MAP = {
+  neutral:    { eyes: 'dots',      mouth: 'neutral' },
+  happy:      { eyes: 'happy',     mouth: 'grin' },
+  excited:    { eyes: 'surprised', mouth: 'grin' },
+  thinking:   { eyes: 'confident', mouth: 'neutral' },
+  frustrated: { eyes: 'angry',     mouth: 'frown' },
+  surprised:  { eyes: 'surprised', mouth: 'open' },
+  tired:      { eyes: 'tired',     mouth: 'neutral' },
+  sleepy:     { eyes: 'sleepy',    mouth: 'neutral' },
+  playful:    { eyes: 'wink',      mouth: 'tongue' },
+  confident:  { eyes: 'confident', mouth: 'smirk' },
+  focused:    { eyes: 'confident', mouth: 'neutral' },
+};
+
+// Set a temporary emotion on an agent — rebuilds face sprite, reverts after duration
+export function setEmotion(agent, emotion, duration) {
+  var preset = EMOTION_MAP[emotion];
+  if (!preset) return;
+  duration = duration || 4;
+
+  var face = agent.parts.faceSprite;
+  if (!face) return;
+
+  // Don't rebuild if already showing this emotion
+  if (face.userData._currentEmotion === emotion) return;
+
+  // Save original styles for revert
+  if (!face.userData._baseEyes) {
+    face.userData._baseEyes = face.userData.eyeStyle;
+    face.userData._baseMouth = face.userData.mouthStyle;
+  }
+
+  // Rebuild face with emotion preset
+  var newFace = buildFaceSprite(preset.eyes, preset.mouth, false);
+  newFace.position.copy(face.position);
+  newFace.userData._baseEyes = face.userData._baseEyes;
+  newFace.userData._baseMouth = face.userData._baseMouth;
+  newFace.userData._currentEmotion = emotion;
+
+  agent.parts.head.remove(face);
+  if (face.material.map) face.material.map.dispose();
+  face.material.dispose();
+  agent.parts.head.add(newFace);
+  agent.parts.faceSprite = newFace;
+
+  // Schedule revert to original expression
+  clearTimeout(agent._emotionRevertTimer);
+  agent._emotionRevertTimer = setTimeout(function() {
+    var cur = agent.parts.faceSprite;
+    if (!cur || cur.userData._currentEmotion !== emotion) return;
+    var revert = buildFaceSprite(cur.userData._baseEyes, cur.userData._baseMouth, agent.state === 'sleeping');
+    revert.position.copy(cur.position);
+    revert.userData.eyeStyle = cur.userData._baseEyes;
+    revert.userData.mouthStyle = cur.userData._baseMouth;
+    agent.parts.head.remove(cur);
+    if (cur.material.map) cur.material.map.dispose();
+    cur.material.dispose();
+    agent.parts.head.add(revert);
+    agent.parts.faceSprite = revert;
+  }, duration * 1000);
+}