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

reports/pr-backlog-20260414.md

@@ -1,24 +0,0 @@
-# PR Backlog Report — Timmy_Foundation/timmy-config
-
-Generated: 2026-04-14 23:23:33
-
-## Summary
-
-- **Total Open PRs**: 50
-- **Stale (>30 days)**: 0
-- **Recent (<7 days)**: 50
-
-## Recommendations
-
-### Immediate Actions
-1. **Review stale PRs**: 0 PRs are >30 days old
-2. **Close duplicates**: Check for duplicate PRs on same issues
-3. **Assign reviewers**: Ensure each PR has a reviewer
-
-### Process Improvements
-1. **Set SLAs**: Review within 48 hours, merge within 7 days
-2. **Weekly cleanup**: Run this analyzer weekly
-3. **Automate**: Add CI checks to prevent backlog
-
-## Stale PRs (>30 days)
-

scripts/pr-backlog-analyzer.py

@@ -1,123 +0,0 @@
-#!/usr/bin/env python3
-"""
-PR Backlog Analyzer for timmy-config
-
-Analyzes open PRs and provides recommendations for cleanup.
-Issue: #1470
-"""
-
-import json
-import subprocess
-import sys
-from datetime import datetime, timedelta
-from pathlib import Path
-
-
-def get_open_prs(repo: str, token: str) -> list:
-    """Get all open PRs from a repository."""
-    result = subprocess.run([
-        "curl", "-s", "-H", f"Authorization: token {token}",
-        f"https://forge.alexanderwhitestone.com/api/v1/repos/{repo}/pulls?state=open&limit=100"
-    ], capture_output=True, text=True)
-    
-    if result.returncode != 0:
-        print(f"Error fetching PRs: {result.stderr}")
-        return []
-    
-    return json.loads(result.stdout)
-
-
-def analyze_pr(pr: dict) -> dict:
-    """Analyze a single PR."""
-    created = datetime.fromisoformat(pr['created_at'].replace('Z', '+00:00'))
-    age_days = (datetime.now(created.tzinfo) - created).days
-    
-    labels = [l['name'] for l in pr.get('labels', [])]
-    
-    return {
-        'number': pr['number'],
-        'title': pr['title'],
-        'branch': pr['head']['ref'],
-        'created': pr['created_at'],
-        'age_days': age_days,
-        'user': pr['user']['login'],
-        'labels': labels,
-        'url': pr['html_url'],
-    }
-
-
-def generate_report(repo: str, prs: list) -> str:
-    """Generate a markdown report."""
-    stale = [p for p in prs if p['age_days'] > 30]
-    recent = [p for p in prs if p['age_days'] <= 7]
-    
-    report = f"""# PR Backlog Report — {repo}
-
-Generated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}
-
-## Summary
-
-- **Total Open PRs**: {len(prs)}
-- **Stale (>30 days)**: {len(stale)}
-- **Recent (<7 days)**: {len(recent)}
-
-## Recommendations
-
-### Immediate Actions
-1. **Review stale PRs**: {len(stale)} PRs are >30 days old
-2. **Close duplicates**: Check for duplicate PRs on same issues
-3. **Assign reviewers**: Ensure each PR has a reviewer
-
-### Process Improvements
-1. **Set SLAs**: Review within 48 hours, merge within 7 days
-2. **Weekly cleanup**: Run this analyzer weekly
-3. **Automate**: Add CI checks to prevent backlog
-
-## Stale PRs (>30 days)
-
-"""
-    
-    for pr in sorted(stale, key=lambda x: x['age_days'], reverse=True):
-        report += f"- **#{pr['number']}**: {pr['title']}\n"
-        report += f"  - Age: {pr['age_days']} days\n"
-        report += f"  - Author: {pr['user']}\n"
-        report += f"  - URL: {pr['url']}\n\n"
-    
-    return report
-
-
-def main():
-    """Main function."""
-    token_path = Path.home() / '.config' / 'gitea' / 'token'
-    if not token_path.exists():
-        print("Error: Gitea token not found")
-        sys.exit(1)
-    
-    token = token_path.read_text().strip()
-    repo = "Timmy_Foundation/timmy-config"
-    
-    print(f"Fetching PRs for {repo}...")
-    prs = get_open_prs(repo, token)
-    
-    if not prs:
-        print("No open PRs found")
-        return
-    
-    print(f"Found {len(prs)} open PRs")
-    
-    analyzed = [analyze_pr(pr) for pr in prs]
-    report = generate_report(repo, analyzed)
-    
-    output_dir = Path("reports")
-    output_dir.mkdir(exist_ok=True)
-    
-    report_file = output_dir / f"pr-backlog-{datetime.now().strftime('%Y%m%d')}.md"
-    report_file.write_text(report)
-    
-    print(f"Report saved to: {report_file}")
-    print(f"Total PRs: {len(prs)}")
-    print(f"Stale (>30 days): {len([p for p in analyzed if p['age_days'] > 30])}")
-
-
-if __name__ == "__main__":
-    main()