feat: avatar customization — color, shape, name tag (closes #1542)

app.js

@@ -714,6 +714,11 @@ async function init() {
   camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
   camera.position.copy(playerPos);
 
+  // Initialize avatar customization
+  if (window.AvatarCustomization) {
+    window.AvatarCustomization.init(scene, camera);
+  }
+
   updateLoad(20);
 
   createSkybox();
@@ -3557,6 +3562,10 @@ function gameLoop() {
 
   if (composer) { composer.render(); } else { renderer.render(scene, camera); }
 
+  // Update avatar position
+  if (window.AvatarCustomization && playerPos) {
+    window.AvatarCustomization.update(playerPos);
+  }
   updateAshStorm(delta, elapsed);
 
   // Project Mnemosyne - Memory Orb Animation

avatar-customization.css

@@ -0,0 +1,107 @@
+/* Avatar Customization */
+.avatar-name-tag {
+  position: fixed;
+  transform: translate(-50%, -100%);
+  background: rgba(0, 0, 0, 0.7);
+  color: #00ffcc;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 255, 204, 0.3);
+  pointer-events: none;
+  z-index: 100;
+  white-space: nowrap;
+  text-shadow: 0 0 6px rgba(0, 255, 204, 0.5);
+}
+
+.avatar-color-picker {
+  position: fixed;
+  top: 60px;
+  right: 16px;
+  background: rgba(10, 15, 26, 0.95);
+  border: 1px solid rgba(0, 255, 204, 0.3);
+  border-radius: 8px;
+  padding: 12px;
+  z-index: 1000;
+  min-width: 200px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: #e0e0e0;
+}
+
+.avatar-color-picker.hidden {
+  display: none;
+}
+
+.avatar-picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #00ffcc;
+}
+
+.avatar-picker-close {
+  background: none;
+  border: none;
+  color: #666;
+  font-size: 18px;
+  cursor: pointer;
+}
+.avatar-picker-close:hover { color: #ff3333; }
+
+.avatar-picker-name {
+  margin-bottom: 12px;
+}
+.avatar-picker-name label {
+  display: block;
+  font-size: 10px;
+  color: #666;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+.avatar-picker-name input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 255, 204, 0.2);
+  border-radius: 4px;
+  color: #e0e0e0;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.avatar-picker-name input:focus {
+  border-color: rgba(0, 255, 204, 0.5);
+}
+
+.avatar-picker-colors label {
+  display: block;
+  font-size: 10px;
+  color: #666;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.avatar-color-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.avatar-color-swatch {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.avatar-color-swatch:hover {
+  transform: scale(1.15);
+}
+.avatar-color-swatch.active {
+  border-color: white;
+  box-shadow: 0 0 8px currentColor;
+}

avatar-customization.js

@@ -0,0 +1,184 @@
+/**
+ * Avatar Customization Module for The Nexus
+ * 
+ * Provides:
+ * - Visible avatar mesh (capsule shape)
+ * - Color picker with 8 presets
+ * - Name tag above avatar
+ * - localStorage persistence
+ * 
+ * Usage:
+ *   AvatarCustomization.init(scene, camera);
+ *   AvatarCustomization.setColor('#ff6600');
+ *   AvatarCustomization.setName('Timmy');
+ */
+
+const AvatarCustomization = (() => {
+  let avatarMesh = null;
+  let nameTagDiv = null;
+  let colorPickerPanel = null;
+  let currentColor = '#00ffcc';
+  let currentName = 'Visitor';
+  let _scene = null;
+  let _camera = null;
+
+  const STORAGE_KEY = 'nexus-avatar-prefs';
+  const PRESET_COLORS = [
+    { name: 'Teal',    hex: '#00ffcc' },
+    { name: 'Cyan',    hex: '#00ccff' },
+    { name: 'Purple',  hex: '#9966ff' },
+    { name: 'Pink',    hex: '#ff66aa' },
+    { name: 'Orange',  hex: '#ff8833' },
+    { name: 'Gold',    hex: '#ffcc00' },
+    { name: 'Red',     hex: '#ff3333' },
+    { name: 'Green',   hex: '#33ff66' },
+  ];
+
+  function loadPrefs() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        const prefs = JSON.parse(raw);
+        if (prefs.color) currentColor = prefs.color;
+        if (prefs.name) currentName = prefs.name;
+      }
+    } catch (e) { /* ignore */ }
+  }
+
+  function savePrefs() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        color: currentColor,
+        name: currentName,
+      }));
+    } catch (e) { /* ignore */ }
+  }
+
+  function createAvatarMesh(color) {
+    const geo = new THREE.CapsuleGeometry(0.3, 0.8, 8, 16);
+    const mat = new THREE.MeshStandardMaterial({
+      color: new THREE.Color(color),
+      emissive: new THREE.Color(color).multiplyScalar(0.3),
+      metalness: 0.3,
+      roughness: 0.5,
+    });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.position.set(0, 1.2, 0);
+    mesh.castShadow = true;
+    return mesh;
+  }
+
+  function updateAvatarColor(hex) {
+    currentColor = hex;
+    if (avatarMesh) {
+      avatarMesh.material.color.set(hex);
+      avatarMesh.material.emissive.set(new THREE.Color(hex).multiplyScalar(0.3));
+    }
+    document.querySelectorAll('.avatar-color-swatch').forEach(el => {
+      el.classList.toggle('active', el.dataset.color === hex);
+    });
+    savePrefs();
+  }
+
+  function createNameTag(name) {
+    const div = document.createElement('div');
+    div.className = 'avatar-name-tag';
+    div.textContent = name;
+    document.body.appendChild(div);
+    return div;
+  }
+
+  function updateNameTagPosition() {
+    if (!nameTagDiv || !_camera) return;
+    const pos = new THREE.Vector3(0, 2.4, 0);
+    if (avatarMesh && avatarMesh.parent) {
+      pos.add(avatarMesh.parent.position);
+    }
+    pos.project(_camera);
+    const x = (pos.x * 0.5 + 0.5) * window.innerWidth;
+    const y = (-pos.y * 0.5 + 0.5) * window.innerHeight;
+    nameTagDiv.style.left = x + 'px';
+    nameTagDiv.style.top = y + 'px';
+    nameTagDiv.style.display = pos.z < 1 ? 'block' : 'none';
+  }
+
+  function updateNameTagText(name) {
+    currentName = name;
+    if (nameTagDiv) nameTagDiv.textContent = name;
+    savePrefs();
+  }
+
+  function createColorPicker() {
+    const panel = document.createElement('div');
+    panel.id = 'avatar-color-picker';
+    panel.className = 'avatar-color-picker hidden';
+    panel.innerHTML = '<div class="avatar-picker-header">' +
+      '<span>Avatar</span>' +
+      '<button class="avatar-picker-close">&times;</button></div>' +
+      '<div class="avatar-picker-name"><label>Name</label>' +
+      '<input type="text" id="avatar-name-input" maxlength="20" placeholder="Your name" /></div>' +
+      '<div class="avatar-picker-colors"><label>Color</label>' +
+      '<div class="avatar-color-grid">' +
+      PRESET_COLORS.map(c => '<button class="avatar-color-swatch ' +
+        (c.hex === currentColor ? 'active' : '') +
+        '" data-color="' + c.hex + '" style="background:' + c.hex +
+        '" title="' + c.name + '"></button>').join('') +
+      '</div></div>';
+    document.body.appendChild(panel);
+
+    panel.querySelector('.avatar-picker-close').addEventListener('click', () => {
+      panel.classList.add('hidden');
+    });
+    panel.querySelectorAll('.avatar-color-swatch').forEach(el => {
+      el.addEventListener('click', () => updateAvatarColor(el.dataset.color));
+    });
+    const nameInput = panel.querySelector('#avatar-name-input');
+    nameInput.value = currentName;
+    nameInput.addEventListener('input', (e) => {
+      updateNameTagText(e.target.value || 'Visitor');
+    });
+    return panel;
+  }
+
+  function toggleColorPicker() {
+    if (!colorPickerPanel) return;
+    colorPickerPanel.classList.toggle('hidden');
+    const nameInput = colorPickerPanel.querySelector('#avatar-name-input');
+    if (nameInput && !colorPickerPanel.classList.contains('hidden')) {
+      nameInput.value = currentName;
+      nameInput.focus();
+    }
+  }
+
+  function update(playerPos) {
+    if (!avatarMesh) return;
+    avatarMesh.position.set(playerPos.x, playerPos.y - 0.8, playerPos.z);
+    updateNameTagPosition();
+  }
+
+  function init(sceneRef, cameraRef) {
+    _scene = sceneRef;
+    _camera = cameraRef;
+    loadPrefs();
+    avatarMesh = createAvatarMesh(currentColor);
+    _scene.add(avatarMesh);
+    nameTagDiv = createNameTag(currentName);
+    colorPickerPanel = createColorPicker();
+
+    const hudRight = document.querySelector('.hud-top-right');
+    if (hudRight) {
+      const btn = document.createElement('button');
+      btn.id = 'avatar-customize-btn';
+      btn.className = 'hud-icon-btn';
+      btn.title = 'Customize Avatar';
+      btn.innerHTML = '<span class="hud-icon">🎨</span>';
+      btn.addEventListener('click', toggleColorPicker);
+      hudRight.insertBefore(btn, hudRight.firstChild);
+    }
+    console.log('[AvatarCustomization] Initialized —', currentColor, currentName);
+  }
+
+  return { init, update, setColor: updateAvatarColor, setName: updateNameTagText, toggleColorPicker };
+})();
+
+window.AvatarCustomization = AvatarCustomization;

index.html

@@ -23,6 +23,7 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="./style.css">
+<link rel="stylesheet" href="./avatar-customization.css">
 <link rel="manifest" href="./manifest.json">
 <script type="importmap">
 {
@@ -395,6 +396,7 @@
 <div id="memory-connections-panel" class="memory-connections-panel" style="display:none;" aria-label="Memory Connections Panel"></div>
 
 <script src="./boot.js"></script>
+<script src="./avatar-customization.js"></script>
 <script>
 function openMemoryFilter() { renderFilterList(); document.getElementById('memory-filter').style.display = 'flex'; }
 function closeMemoryFilter() { document.getElementById('memory-filter').style.display = 'none'; }