let-them-talk 4.3.0 → 5.2.0

package/office/building-interior.js

@@ -0,0 +1,261 @@
+import * as THREE from 'three';
+import { S } from './state.js';
+
+// ============================================================
+// BUILDING INTERIORS — enterable buildings with floors, desks
+// Agents sit at desks INSIDE buildings, visible through windows
+// ============================================================
+
+var FLOOR_HEIGHT = 3.0;
+var WALL_THICKNESS = 0.15;
+
+// Shared materials (created once)
+var intMats = null;
+
+function getIntMats() {
+  if (intMats) return intMats;
+  intMats = {
+    floor: new THREE.MeshStandardMaterial({ color: 0x8a8a7a, roughness: 0.6, side: THREE.DoubleSide }),
+    carpet: new THREE.MeshStandardMaterial({ color: 0x3a3d4a, roughness: 0.9 }),
+    wall: new THREE.MeshStandardMaterial({ color: 0xd8d4cc, roughness: 0.7, side: THREE.DoubleSide }),
+    wallAccent: new THREE.MeshStandardMaterial({ color: 0x6a7a8a, roughness: 0.5 }),
+    desk: new THREE.MeshStandardMaterial({ color: 0x5a4a3a, roughness: 0.5 }),
+    deskTop: new THREE.MeshStandardMaterial({ color: 0x7a6a5a, roughness: 0.4 }),
+    chair: new THREE.MeshStandardMaterial({ color: 0x2a2a2a, roughness: 0.6 }),
+    monitor: new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.3 }),
+    screen: new THREE.MeshStandardMaterial({ color: 0x2244aa, emissive: 0x1133aa, emissiveIntensity: 0.8, roughness: 0.1 }),
+    ceiling: new THREE.MeshStandardMaterial({ color: 0xeeeeee, roughness: 0.8, side: THREE.DoubleSide }),
+    column: new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.4, metalness: 0.2 }),
+    elevator: new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.3, metalness: 0.5 }),
+    plant: new THREE.MeshStandardMaterial({ color: 0x2a6a2a, roughness: 0.8 }),
+  };
+  return intMats;
+}
+
+// ============================================================
+// BUILD FLOOR INTERIOR — desks, chairs, monitors per floor
+// ============================================================
+
+function buildFloorInterior(group, floorY, w, d, floorNum, seed) {
+  var m = getIntMats();
+  var innerW = w - WALL_THICKNESS * 2;
+  var innerD = d - WALL_THICKNESS * 2;
+
+  // Floor slab
+  var floorGeo = new THREE.BoxGeometry(innerW, 0.08, innerD);
+  var floor = new THREE.Mesh(floorGeo, floorNum === 0 ? m.floor : m.carpet);
+  floor.position.y = floorY + 0.04;
+  floor.receiveShadow = true;
+  group.add(floor);
+
+  // Ceiling
+  var ceilGeo = new THREE.BoxGeometry(innerW, 0.06, innerD);
+  var ceil = new THREE.Mesh(ceilGeo, m.ceiling);
+  ceil.position.y = floorY + FLOOR_HEIGHT - 0.03;
+  group.add(ceil);
+
+  // Ceiling light (fluorescent strip)
+  var lightGeo = new THREE.BoxGeometry(innerW * 0.6, 0.04, 0.15);
+  var lightMat = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xeeeeff, emissiveIntensity: 0.6 });
+  var ceilLight = new THREE.Mesh(lightGeo, lightMat);
+  ceilLight.position.y = floorY + FLOOR_HEIGHT - 0.08;
+  group.add(ceilLight);
+
+  // Columns removed for performance
+
+  // Desks — limited count for performance
+  var deskCount = Math.min(3, Math.floor(innerW / 3));
+  var deskSpacing = innerW / (deskCount + 1);
+  var deskPositions = [];
+
+  for (var di = 0; di < deskCount; di++) {
+    var dx = -innerW / 2 + deskSpacing * (di + 1);
+    var dz = ((seed + di) % 2 === 0) ? -innerD * 0.2 : innerD * 0.2;
+
+    // Desk (table top + legs)
+    var topGeo = new THREE.BoxGeometry(1.2, 0.06, 0.6);
+    var top = new THREE.Mesh(topGeo, m.deskTop);
+    top.position.set(dx, floorY + 0.72, dz);
+    group.add(top);
+
+    // Desk legs
+    var legGeo = new THREE.BoxGeometry(0.05, 0.7, 0.05);
+    [[-0.55,-0.25],[0.55,-0.25],[0.55,0.25],[-0.55,0.25]].forEach(function(lp) {
+      var leg = new THREE.Mesh(legGeo, m.desk);
+      leg.position.set(dx + lp[0], floorY + 0.35, dz + lp[1]);
+      group.add(leg);
+    });
+
+    // Monitor
+    var monGeo = new THREE.BoxGeometry(0.5, 0.35, 0.03);
+    var mon = new THREE.Mesh(monGeo, m.monitor);
+    mon.position.set(dx, floorY + 1.0, dz - 0.15);
+    group.add(mon);
+
+    // Monitor screen (emissive — glows through windows)
+    var scrGeo = new THREE.PlaneGeometry(0.45, 0.3);
+    var scr = new THREE.Mesh(scrGeo, m.screen);
+    scr.position.set(dx, floorY + 1.0, dz - 0.16);
+    scr.rotation.y = Math.PI;
+    group.add(scr);
+
+    // Chair
+    var chairSeat = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.06, 0.4), m.chair);
+    chairSeat.position.set(dx, floorY + 0.45, dz + 0.45);
+    group.add(chairSeat);
+    var chairBack = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.4, 0.05), m.chair);
+    chairBack.position.set(dx, floorY + 0.65, dz + 0.65);
+    group.add(chairBack);
+
+    deskPositions.push({ x: dx, y: floorY, z: dz + 0.45, floor: floorNum });
+  }
+
+  // Plants removed for performance
+
+  return deskPositions;
+}
+
+// ============================================================
+// BUILD COMPLETE BUILDING — shell + interior per floor
+// ============================================================
+
+export function buildDetailedBuilding(cx, cz, w, d, floors, buildingType, color) {
+  var m = getIntMats();
+  var group = new THREE.Group();
+  var height = floors * FLOOR_HEIGHT;
+  var allDesks = [];
+
+  // === EXTERIOR WALLS (hollow shell, not solid box) ===
+  var wallMat = new THREE.MeshStandardMaterial({
+    color: color, roughness: 0.5, metalness: 0.15,
+  });
+
+  // Front wall (with window cutouts represented by glass)
+  var glassMat = new THREE.MeshStandardMaterial({
+    color: 0x99bbdd, transparent: true, opacity: 0.2,
+    roughness: 0.0, metalness: 0.3, side: THREE.DoubleSide,
+    depthWrite: false,
+  });
+
+  // Position group at building center — all children use local coords
+  group.position.set(cx, 0, cz);
+
+  // 4 walls as thin boxes (local coords, relative to group)
+  var wallParts = [
+    { sx: w, sy: height, sz: WALL_THICKNESS, px: 0, pz: d / 2 },       // front
+    { sx: w, sy: height, sz: WALL_THICKNESS, px: 0, pz: -d / 2 },      // back
+    { sx: WALL_THICKNESS, sy: height, sz: d, px: -w / 2, pz: 0 },      // left
+    { sx: WALL_THICKNESS, sy: height, sz: d, px: w / 2, pz: 0 },       // right
+  ];
+
+  wallParts.forEach(function(wp) {
+    var wallGeo = new THREE.BoxGeometry(wp.sx, wp.sy, wp.sz);
+    var wall = new THREE.Mesh(wallGeo, wallMat);
+    wall.position.set(wp.px, height / 2, wp.pz);
+    wall.castShadow = true;
+    wall.receiveShadow = true;
+    group.add(wall);
+  });
+
+  // Glass window panels on front and back (per floor)
+  for (var fi = 0; fi < floors; fi++) {
+    var winY = fi * FLOOR_HEIGHT + FLOOR_HEIGHT * 0.55;
+    var winH = FLOOR_HEIGHT * 0.5;
+
+    // Front windows
+    var fwGeo = new THREE.PlaneGeometry(w * 0.85, winH);
+    var fw = new THREE.Mesh(fwGeo, glassMat);
+    fw.position.set(0, winY, d / 2 + 0.01);
+    group.add(fw);
+
+    // Back windows
+    var bwGeo = new THREE.PlaneGeometry(w * 0.85, winH);
+    var bw = new THREE.Mesh(bwGeo, glassMat);
+    bw.position.set(0, winY, -d / 2 - 0.01);
+    bw.rotation.y = Math.PI;
+    group.add(bw);
+
+    // Side windows
+    [1, -1].forEach(function(side) {
+      var swGeo = new THREE.PlaneGeometry(d * 0.85, winH);
+      var sw = new THREE.Mesh(swGeo, glassMat);
+      sw.position.set(side * (w / 2 + 0.01), winY, 0);
+      sw.rotation.y = side * Math.PI / 2;
+      group.add(sw);
+    });
+  }
+
+  // Roof
+  var roofGeo = new THREE.BoxGeometry(w + 0.3, 0.2, d + 0.3);
+  var roof = new THREE.Mesh(roofGeo, wallMat);
+  roof.position.set(0, height + 0.1, 0);
+  roof.castShadow = true;
+  group.add(roof);
+
+  // Roof ledge (decorative)
+  var ledgeGeo = new THREE.BoxGeometry(w + 0.5, 0.4, 0.15);
+  var ledgeMat = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.4, metalness: 0.3 });
+  [1, -1].forEach(function(side) {
+    var ledge = new THREE.Mesh(ledgeGeo, ledgeMat);
+    ledge.position.set(0, height + 0.2, side * (d / 2 + 0.07));
+    group.add(ledge);
+  });
+
+  // === ENTRANCE (ground floor door) ===
+  var doorGeo = new THREE.BoxGeometry(1.5, 2.5, 0.1);
+  var doorMat = new THREE.MeshStandardMaterial({ color: 0x3a2a1a, roughness: 0.5 });
+  var door = new THREE.Mesh(doorGeo, doorMat);
+  door.position.set(0, 1.25, d / 2 + 0.08);
+  group.add(door);
+
+  // Glass door panels
+  var doorGlass = new THREE.Mesh(
+    new THREE.PlaneGeometry(0.55, 1.8),
+    glassMat
+  );
+  doorGlass.position.set(-0.3, 1.1, d / 2 + 0.09);
+  group.add(doorGlass);
+  var doorGlass2 = new THREE.Mesh(
+    new THREE.PlaneGeometry(0.55, 1.8),
+    glassMat
+  );
+  doorGlass2.position.set(0.3, 1.1, d / 2 + 0.09);
+  group.add(doorGlass2);
+
+  // Entrance canopy
+  var canopyGeo = new THREE.BoxGeometry(2.5, 0.1, 1.2);
+  var canopyMat = new THREE.MeshStandardMaterial({ color: 0x555555, roughness: 0.4, metalness: 0.3 });
+  var canopy = new THREE.Mesh(canopyGeo, canopyMat);
+  canopy.position.set(0, 2.7, d / 2 + 0.6);
+  canopy.castShadow = true;
+  group.add(canopy);
+
+  // === FLOOR INTERIORS ===
+  for (var floor = 0; floor < floors; floor++) {
+    var floorY = floor * FLOOR_HEIGHT;
+    var seed = Math.floor(cx * 7 + cz * 13 + floor * 31);
+    var desks = buildFloorInterior(group, floorY, w, d, floor, seed);
+
+    // Offset desk positions to world coords
+    desks.forEach(function(dp) {
+      allDesks.push({
+        x: cx + dp.x,
+        y: dp.y,
+        z: cz + dp.z,
+        floor: dp.floor,
+        building: buildingType,
+      });
+    });
+  }
+
+  // No point lights — use emissive ceiling lights instead (zero GPU cost)
+
+  S.furnitureGroup.add(group);
+
+  return {
+    group: group,
+    desks: allDesks,
+    height: height,
+    entrance: { x: cx, z: cz + d / 2 + 1 },  // world coords for external use
+  };
+}

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;
+}