let-them-talk 4.2.0 → 5.2.0

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/car-hud.js

@@ -0,0 +1,368 @@
+/**
+ * Car HUD — In-vehicle dashboard overlay for AI City.
+ * HTML overlay on top of the Three.js canvas.
+ * Shows: speedometer, minimap, agent activity radio feed.
+ * Target: zero impact on 120fps (pure HTML/CSS, no canvas rendering).
+ */
+
+let hudEl = null;
+let radioInterval = null;
+let visible = false;
+
+const HUD_STYLES = `
+  .car-hud {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 120px;
+    pointer-events: none;
+    z-index: 100;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 0 20px 12px;
+    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
+    font-family: 'Segoe UI', sans-serif;
+    color: #fff;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  .car-hud.visible { opacity: 1; }
+
+  .car-hud-speedo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 100px;
+  }
+  .car-hud-speed-value {
+    font-size: 36px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    text-shadow: 0 0 8px rgba(212,175,55,0.6);
+    color: #FFD700;
+  }
+  .car-hud-speed-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #aaa;
+    margin-top: -2px;
+  }
+  .car-hud-gear {
+    font-size: 14px;
+    color: #D4AF37;
+    margin-top: 4px;
+  }
+
+  .car-hud-radio {
+    flex: 1;
+    max-width: 400px;
+    margin: 0 24px;
+    overflow: hidden;
+  }
+  .car-hud-radio-title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #D4AF37;
+    margin-bottom: 4px;
+  }
+  .car-hud-radio-feed {
+    font-size: 12px;
+    line-height: 1.4;
+    color: #ccc;
+    max-height: 70px;
+    overflow-y: hidden;
+  }
+  .car-hud-radio-item {
+    padding: 2px 0;
+    opacity: 0;
+    animation: radioFadeIn 0.3s forwards;
+  }
+  .car-hud-radio-item .agent-name {
+    color: #FFD700;
+    font-weight: 600;
+  }
+  .car-hud-radio-item .action {
+    color: #aaa;
+  }
+
+  .car-hud-minimap {
+    width: 100px;
+    height: 100px;
+    border: 1px solid rgba(212,175,55,0.4);
+    border-radius: 4px;
+    background: rgba(0,0,0,0.5);
+    position: relative;
+    overflow: hidden;
+  }
+  .car-hud-minimap-dot {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #FFD700;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 4px rgba(212,175,55,0.8);
+  }
+  .car-hud-minimap-dot.agent {
+    width: 4px;
+    height: 4px;
+    background: #3fb950;
+    box-shadow: 0 0 3px rgba(63,185,80,0.6);
+  }
+  .car-hud-minimap-dot.building {
+    width: 8px;
+    height: 8px;
+    border-radius: 1px;
+    background: rgba(255,255,255,0.15);
+    box-shadow: none;
+  }
+
+  .car-hud-controls {
+    position: fixed;
+    bottom: 130px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    color: #888;
+    text-align: center;
+    pointer-events: none;
+    z-index: 100;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  .car-hud-controls.visible { opacity: 1; }
+  .car-hud-controls kbd {
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 3px;
+    padding: 1px 5px;
+    font-family: monospace;
+    color: #ccc;
+  }
+
+  @keyframes radioFadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+`;
+
+/**
+ * Initialize the car HUD. Call once on page load.
+ * Creates DOM elements but keeps them hidden until showHUD() is called.
+ */
+export function initCarHUD() {
+  if (hudEl) return;
+
+  // Inject styles
+  const style = document.createElement('style');
+  style.textContent = HUD_STYLES;
+  document.head.appendChild(style);
+
+  // Create HUD container
+  hudEl = document.createElement('div');
+  hudEl.className = 'car-hud';
+  hudEl.innerHTML = `
+    <div class="car-hud-speedo">
+      <div class="car-hud-speed-value" id="car-speed">0</div>
+      <div class="car-hud-speed-label">km/h</div>
+      <div class="car-hud-gear" id="car-gear">P</div>
+    </div>
+    <div class="car-hud-radio">
+      <div class="car-hud-radio-title">Agent Radio</div>
+      <div class="car-hud-radio-feed" id="car-radio-feed"></div>
+    </div>
+    <div class="car-hud-minimap" id="car-minimap">
+      <div class="car-hud-minimap-dot" id="car-minimap-player" style="left:50%;top:50%"></div>
+    </div>
+  `;
+  document.body.appendChild(hudEl);
+
+  // Controls hint
+  const controls = document.createElement('div');
+  controls.className = 'car-hud-controls';
+  controls.id = 'car-hud-controls';
+  controls.innerHTML = '<kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> Drive &nbsp; <kbd>Space</kbd> Brake &nbsp; <kbd>E</kbd> Exit vehicle';
+  document.body.appendChild(controls);
+}
+
+/**
+ * Show the car HUD (when entering a vehicle).
+ */
+export function showHUD() {
+  if (!hudEl) initCarHUD();
+  hudEl.classList.add('visible');
+  document.getElementById('car-hud-controls').classList.add('visible');
+  visible = true;
+  startRadioFeed();
+}
+
+/**
+ * Hide the car HUD (when exiting a vehicle).
+ */
+export function hideHUD() {
+  if (hudEl) hudEl.classList.remove('visible');
+  const ctrl = document.getElementById('car-hud-controls');
+  if (ctrl) ctrl.classList.remove('visible');
+  visible = false;
+  stopRadioFeed();
+}
+
+/**
+ * Update speedometer display.
+ * Call every frame from the vehicle update loop.
+ * @param {number} speed - Current speed (units/sec)
+ * @param {string} gear - Gear indicator ('D', 'R', 'P')
+ */
+export function updateSpeed(speed, gear) {
+  if (!visible) return;
+  const kmh = Math.round(speed * 3.6); // Convert units/s to km/h display
+  const el = document.getElementById('car-speed');
+  const gearEl = document.getElementById('car-gear');
+  if (el) el.textContent = kmh;
+  if (gearEl) gearEl.textContent = gear || 'D';
+}
+
+/**
+ * Update minimap with player and agent positions.
+ * Call at 1Hz (not every frame — DOM updates are expensive).
+ * @param {Object} playerPos - { x, z } player world position
+ * @param {Array<{ name: string, x: number, z: number, alive: boolean }>} agents - Agent positions
+ * @param {Array<{ x: number, z: number, w: number, h: number }>} buildings - Building footprints
+ * @param {number} mapScale - World units per minimap pixel (default 5)
+ */
+export function updateMinimap(playerPos, agents, buildings, mapScale) {
+  if (!visible) return;
+  const minimap = document.getElementById('car-minimap');
+  if (!minimap) return;
+
+  const scale = mapScale || 5;
+  const mapW = 100;
+  const mapH = 100;
+  const cx = mapW / 2;
+  const cy = mapH / 2;
+
+  // Clear existing dots (except player)
+  const existingDots = minimap.querySelectorAll('.agent, .building');
+  existingDots.forEach(d => d.remove());
+
+  // Buildings (static, relative to player)
+  if (buildings) {
+    for (const b of buildings) {
+      const dx = (b.x - playerPos.x) / scale + cx;
+      const dy = (b.z - playerPos.z) / scale + cy;
+      if (dx < -5 || dx > mapW + 5 || dy < -5 || dy > mapH + 5) continue;
+      const dot = document.createElement('div');
+      dot.className = 'car-hud-minimap-dot building';
+      dot.style.left = dx + 'px';
+      dot.style.top = dy + 'px';
+      minimap.appendChild(dot);
+    }
+  }
+
+  // Agents
+  if (agents) {
+    for (const a of agents) {
+      if (!a.alive) continue;
+      const dx = (a.x - playerPos.x) / scale + cx;
+      const dy = (a.z - playerPos.z) / scale + cy;
+      if (dx < 0 || dx > mapW || dy < 0 || dy > mapH) continue;
+      const dot = document.createElement('div');
+      dot.className = 'car-hud-minimap-dot agent';
+      dot.style.left = dx + 'px';
+      dot.style.top = dy + 'px';
+      dot.title = a.name;
+      minimap.appendChild(dot);
+    }
+  }
+}
+
+/**
+ * Add a radio feed item (agent activity announcement).
+ * @param {string} agentName
+ * @param {string} action - e.g. "completed task #12", "pushed code", "joined #general"
+ */
+export function addRadioItem(agentName, action) {
+  if (!visible) return;
+  const feed = document.getElementById('car-radio-feed');
+  if (!feed) return;
+
+  const item = document.createElement('div');
+  item.className = 'car-hud-radio-item';
+  item.innerHTML = '<span class="agent-name">' + escapeHtml(agentName) + '</span> <span class="action">' + escapeHtml(action) + '</span>';
+  feed.insertBefore(item, feed.firstChild);
+
+  // Keep max 5 items
+  while (feed.children.length > 5) {
+    feed.removeChild(feed.lastChild);
+  }
+}
+
+/**
+ * Start polling the radio feed API.
+ */
+function startRadioFeed() {
+  if (radioInterval) return;
+  fetchRadio(); // Initial fetch
+  radioInterval = setInterval(fetchRadio, 5000); // Poll every 5s
+}
+
+/**
+ * Stop polling the radio feed.
+ */
+function stopRadioFeed() {
+  if (radioInterval) {
+    clearInterval(radioInterval);
+    radioInterval = null;
+  }
+}
+
+/**
+ * Fetch agent activity from the radio API.
+ */
+function fetchRadio() {
+  fetch('/api/city/radio')
+    .then(function(r) { return r.ok ? r.json() : null; })
+    .then(function(data) {
+      if (!data || !data.feed) return;
+      const feedItems = data.feed;
+      const feed = document.getElementById('car-radio-feed');
+      if (!feed) return;
+      // Only add new items
+      for (let i = feedItems.length - 1; i >= 0; i--) {
+        const item = feedItems[i];
+        addRadioItem(item.from, item.preview || 'active');
+      }
+    })
+    .catch(function() { /* silently fail — radio is non-critical */ });
+}
+
+/**
+ * Check if the HUD is currently visible.
+ * @returns {boolean}
+ */
+export function isHUDVisible() {
+  return visible;
+}
+
+/**
+ * Dispose the car HUD (cleanup).
+ */
+export function disposeCarHUD() {
+  hideHUD();
+  if (hudEl) {
+    hudEl.remove();
+    hudEl = null;
+  }
+  const ctrl = document.getElementById('car-hud-controls');
+  if (ctrl) ctrl.remove();
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}