the-nexus/app.js

import * as THREE from 'three';

// === COLOR PALETTE ===
const NEXUS = {
  colors: {
    bg: 0x000008,
    starCore: 0xffffff,
    starDim: 0x8899cc,
    constellationLine: 0x334488,
    constellationFade: 0x112244,
    accent: 0x4488ff,
  }
};

// === SCENE SETUP ===
const scene = new THREE.Scene();
scene.background = new THREE.Color(NEXUS.colors.bg);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// === STAR FIELD ===
const STAR_COUNT = 800;
const STAR_SPREAD = 400;
const CONSTELLATION_DISTANCE = 30; // max distance to draw a line between stars

const starPositions = [];
const starGeo = new THREE.BufferGeometry();
const posArray = new Float32Array(STAR_COUNT * 3);
const sizeArray = new Float32Array(STAR_COUNT);

for (let i = 0; i < STAR_COUNT; i++) {
  const x = (Math.random() - 0.5) * STAR_SPREAD;
  const y = (Math.random() - 0.5) * STAR_SPREAD;
  const z = (Math.random() - 0.5) * STAR_SPREAD;
  posArray[i * 3] = x;
  posArray[i * 3 + 1] = y;
  posArray[i * 3 + 2] = z;
  sizeArray[i] = Math.random() * 2.5 + 0.5;
  starPositions.push(new THREE.Vector3(x, y, z));
}

starGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
starGeo.setAttribute('size', new THREE.BufferAttribute(sizeArray, 1));

const starMaterial = new THREE.PointsMaterial({
  color: NEXUS.colors.starCore,
  size: 0.6,
  sizeAttenuation: true,
  transparent: true,
  opacity: 0.9,
});

const stars = new THREE.Points(starGeo, starMaterial);
scene.add(stars);

// === CONSTELLATION LINES ===
// Connect nearby stars with faint lines, limited to avoid clutter
function buildConstellationLines() {
  const linePositions = [];
  const MAX_CONNECTIONS_PER_STAR = 3;
  const connectionCount = new Array(STAR_COUNT).fill(0);

  for (let i = 0; i < STAR_COUNT; i++) {
    if (connectionCount[i] >= MAX_CONNECTIONS_PER_STAR) continue;

    // Find nearest neighbors
    const neighbors = [];
    for (let j = i + 1; j < STAR_COUNT; j++) {
      if (connectionCount[j] >= MAX_CONNECTIONS_PER_STAR) continue;
      const dist = starPositions[i].distanceTo(starPositions[j]);
      if (dist < CONSTELLATION_DISTANCE) {
        neighbors.push({ j, dist });
      }
    }

    // Sort by distance and connect closest ones
    neighbors.sort((a, b) => a.dist - b.dist);
    const toConnect = neighbors.slice(0, MAX_CONNECTIONS_PER_STAR - connectionCount[i]);

    for (const { j } of toConnect) {
      linePositions.push(
        starPositions[i].x, starPositions[i].y, starPositions[i].z,
        starPositions[j].x, starPositions[j].y, starPositions[j].z
      );
      connectionCount[i]++;
      connectionCount[j]++;
    }
  }

  const lineGeo = new THREE.BufferGeometry();
  lineGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(linePositions), 3));

  const lineMat = new THREE.LineBasicMaterial({
    color: NEXUS.colors.constellationLine,
    transparent: true,
    opacity: 0.18,
  });

  return new THREE.LineSegments(lineGeo, lineMat);
}

const constellationLines = buildConstellationLines();
scene.add(constellationLines);

// === MOUSE-DRIVEN ROTATION ===
let mouseX = 0;
let mouseY = 0;
let targetRotX = 0;
let targetRotY = 0;

document.addEventListener('mousemove', (e) => {
  mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
  mouseY = (e.clientY / window.innerHeight - 0.5) * 2;
});

// === RESIZE HANDLER ===
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// === ANIMATION LOOP ===
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const elapsed = clock.getElapsedTime();

  // Slow auto-rotation
  targetRotX += (mouseY * 0.3 - targetRotX) * 0.02;
  targetRotY += (mouseX * 0.3 - targetRotY) * 0.02;

  stars.rotation.x = targetRotX + elapsed * 0.01;
  stars.rotation.y = targetRotY + elapsed * 0.015;

  constellationLines.rotation.x = stars.rotation.x;
  constellationLines.rotation.y = stars.rotation.y;

  // Subtle pulse on constellation opacity
  constellationLines.material.opacity = 0.12 + Math.sin(elapsed * 0.5) * 0.06;

  // Animate beacons
  for (const beacon of beacons) {
    const age = elapsed - beacon.userData.createdAt;
    const pulse = 0.5 + Math.sin(age * 2.5) * 0.5; // 0..1
    const glow = beacon.children[1];
    if (glow) {
      glow.material.opacity = 0.05 + pulse * 0.18;
      glow.scale.setScalar(1 + pulse * 0.4);
    }
    const ring = beacon.children[2];
    if (ring) {
      ring.rotation.y += 0.025;
      ring.material.opacity = 0.25 + pulse * 0.45;
    }
  }

  renderer.render(scene, camera);
}

animate();

// === BEACON SYSTEM ===
const beacons = [];
const BEACON_COLOR = 0x00ffcc;
const MAX_BEACONS = 10;

function createBeacon(position) {
  const group = new THREE.Group();

  // Core sphere
  const coreGeo = new THREE.SphereGeometry(0.12, 8, 8);
  const coreMat = new THREE.MeshBasicMaterial({ color: BEACON_COLOR });
  const core = new THREE.Mesh(coreGeo, coreMat);
  group.add(core); // index 0

  // Outer glow sphere
  const glowGeo = new THREE.SphereGeometry(0.35, 8, 8);
  const glowMat = new THREE.MeshBasicMaterial({
    color: BEACON_COLOR,
    transparent: true,
    opacity: 0.15,
  });
  const glow = new THREE.Mesh(glowGeo, glowMat);
  group.add(glow); // index 1

  // Orbiting ring
  const ringGeo = new THREE.RingGeometry(0.22, 0.28, 20);
  const ringMat = new THREE.MeshBasicMaterial({
    color: BEACON_COLOR,
    transparent: true,
    opacity: 0.6,
    side: THREE.DoubleSide,
  });
  const ring = new THREE.Mesh(ringGeo, ringMat);
  ring.rotation.x = Math.PI / 2;
  group.add(ring); // index 2

  // Point light for environment glow
  const light = new THREE.PointLight(BEACON_COLOR, 2.0, 6);
  group.add(light);

  group.position.copy(position);
  group.userData.createdAt = clock.getElapsedTime();

  scene.add(group);
  beacons.push(group);

  // Remove oldest beacon when over limit
  if (beacons.length > MAX_BEACONS) {
    const oldest = beacons.shift();
    scene.remove(oldest);
  }

  updateBeaconHUD();
}

function updateBeaconHUD() {
  const el = document.getElementById('beacon-count');
  if (el) el.textContent = beacons.length > 0 ? `⬡ ${beacons.length}` : '';
}

// Click to place beacon
renderer.domElement.addEventListener('click', (e) => {
  const ndc = new THREE.Vector3(
    (e.clientX / window.innerWidth) * 2 - 1,
    -(e.clientY / window.innerHeight) * 2 + 1,
    0.5
  );
  ndc.unproject(camera);
  const dir = ndc.sub(camera.position).normalize();
  const pos = camera.position.clone().add(dir.multiplyScalar(15));
  createBeacon(pos);
});

// Right-click to clear all beacons
renderer.domElement.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  beacons.forEach(b => scene.remove(b));
  beacons.length = 0;
  updateBeaconHUD();
});

// === DEBUG MODE ===
let debugMode = false;

document.getElementById('debug-toggle').addEventListener('click', () => {
  debugMode = !debugMode;
  document.getElementById('debug-toggle').style.backgroundColor = debugMode
    ? 'var(--color-text-muted)'
    : 'var(--color-secondary)';
  console.log(`Debug mode ${debugMode ? 'enabled' : 'disabled'}`);

  if (debugMode) {
    // Example: Visualize all collision boxes and light sources
    // Replace with actual logic when available
    document.querySelectorAll('.collision-box').forEach(el => el.style.outline = '2px solid red');
    document.querySelectorAll('.light-source').forEach(el => el.style.outline = '2px dashed yellow');
  } else {
    document.querySelectorAll('.collision-box, .light-source').forEach(el => {
      el.style.outline = 'none';
    });
  }
});

// === WEBSOCKET CLIENT ===
import { wsClient } from './ws-client.js';

wsClient.connect();

window.addEventListener('player-joined', (event) => {
  console.log('Player joined:', event.detail);
});

window.addEventListener('player-left', (event) => {
  console.log('Player left:', event.detail);
});

window.addEventListener('chat-message', (event) => {
  console.log('Chat message:', event.detail);
});

window.addEventListener('beforeunload', () => {
  wsClient.disconnect();
});