diff --git a/app.js b/app.js
index 051fe82..ddfbbd7 100644
--- a/app.js
+++ b/app.js
@@ -1,12 +1,282 @@
-// ... existing code ...
-
-// === WEBSOCKET CLIENT ===
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { wsClient } from './ws-client.js';
-// Initialize WebSocket client
+// === COLOR PALETTE ===
+const NEXUS = {
+ colors: {
+ primary: 0x00ffcc,
+ secondary: 0x8800ff,
+ accent: 0xff8800,
+ bg: 0x000408,
+ nebula1: 0x0a0025,
+ nebula2: 0x00050f,
+ rayGold: 0xffaa44,
+ rayBlue: 0x88aaff,
+ rayCyan: 0x44ddff,
+ star: 0xffffff,
+ }
+};
+
+// === RENDERER ===
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 0.9;
+document.body.appendChild(renderer.domElement);
+
+// === SCENE ===
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(NEXUS.colors.bg);
+scene.fog = new THREE.FogExp2(NEXUS.colors.bg, 0.006);
+
+// === CAMERA ===
+const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 800);
+camera.position.set(0, 8, 28);
+
+// === CONTROLS ===
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.05;
+controls.target.set(0, 4, 0);
+controls.maxDistance = 120;
+controls.minDistance = 2;
+
+// === LIGHTING ===
+const ambient = new THREE.AmbientLight(0x112233, 0.6);
+scene.add(ambient);
+
+const coreLight = new THREE.PointLight(NEXUS.colors.primary, 3, 60);
+coreLight.position.set(0, 8, 0);
+scene.add(coreLight);
+
+// === STAR FIELD ===
+function createStarField() {
+ const count = 4000;
+ const positions = new Float32Array(count * 3);
+ const sizes = new Float32Array(count);
+ for (let i = 0; i < count; i++) {
+ const theta = Math.random() * Math.PI * 2;
+ const phi = Math.acos(2 * Math.random() - 1);
+ const r = 200 + Math.random() * 200;
+ positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+ positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+ positions[i * 3 + 2] = r * Math.cos(phi);
+ sizes[i] = 0.3 + Math.random() * 0.7;
+ }
+ const geo = new THREE.BufferGeometry();
+ geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+ geo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+ const mat = new THREE.PointsMaterial({
+ color: NEXUS.colors.star,
+ size: 0.4,
+ sizeAttenuation: true,
+ transparent: true,
+ opacity: 0.85,
+ });
+ return new THREE.Points(geo, mat);
+}
+scene.add(createStarField());
+
+// === VOLUMETRIC LIGHT RAYS ===
+// Cone-shaped shafts with additive blending simulating god rays from the skybox
+
+const LIGHT_RAY_VERT = /* glsl */`
+ varying vec2 vUv;
+ varying float vLocalY;
+
+ void main() {
+ vUv = uv;
+ // Normalize local Y: 0.0 = bottom (wide base), 1.0 = top (tip/source)
+ vLocalY = clamp((position.y + 15.0) / 30.0, 0.0, 1.0);
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+ }
+`;
+
+const LIGHT_RAY_FRAG = /* glsl */`
+ uniform float time;
+ uniform vec3 rayColor;
+ uniform float rayOpacity;
+ uniform float rayPhase;
+
+ varying vec2 vUv;
+ varying float vLocalY;
+
+ void main() {
+ // Soft radial fade using U coordinate around the circumference
+ // sin() creates a smooth bright-center / dark-edge per face
+ float radialFade = sin(vUv.x * 3.14159);
+ radialFade = pow(max(radialFade, 0.0), 0.6);
+
+ // Length fade: bright at source (top/tip, vLocalY=1), fades at base
+ float lengthFade = pow(vLocalY, 0.35) * (1.0 - pow(vLocalY, 6.0) * 0.05);
+
+ // Animated shimmer β ripples travel down the ray
+ float shimmer = 0.72 + 0.28 * sin(time * 1.6 + vLocalY * 7.0 + rayPhase);
+
+ float alpha = radialFade * lengthFade * shimmer * rayOpacity;
+
+ // Brighten core color slightly with shimmer
+ vec3 finalColor = rayColor * (1.0 + shimmer * 0.4);
+
+ gl_FragColor = vec4(finalColor, alpha);
+ }
+`;
+
+const lightRays = [];
+
+function createLightRay(pos, rotX, rotZ, color, opacity, phase) {
+ // Cone: tip (radiusTopβ0) at top (y=+15), base (radiusBottom=2.8) at bottom (y=-15)
+ const geo = new THREE.CylinderGeometry(0.05, 2.8, 30, 32, 8, true);
+ const mat = new THREE.ShaderMaterial({
+ uniforms: {
+ time: { value: 0.0 },
+ rayColor: { value: new THREE.Color(color) },
+ rayOpacity: { value: opacity },
+ rayPhase: { value: phase },
+ },
+ vertexShader: LIGHT_RAY_VERT,
+ fragmentShader: LIGHT_RAY_FRAG,
+ transparent: true,
+ blending: THREE.AdditiveBlending,
+ depthWrite: false,
+ side: THREE.DoubleSide,
+ });
+
+ const mesh = new THREE.Mesh(geo, mat);
+ mesh.position.copy(pos);
+ mesh.rotation.x = rotX;
+ mesh.rotation.z = rotZ;
+ scene.add(mesh);
+ lightRays.push({ mesh, mat });
+}
+
+// Rays emanating from the upper skybox at varied angles and colors
+const rayDefs = [
+ // pos (x, y, z), rotX, rotZ, color, opacity, phase
+ { p: [-10, 26, -4], rx: 0.18, rz: 0.10, c: NEXUS.colors.rayGold, o: 0.20, ph: 0.0 },
+ { p: [ 4, 30, -9], rx: -0.08, rz: -0.22, c: NEXUS.colors.rayGold, o: 0.16, ph: 1.1 },
+ { p: [ 14, 24, 2], rx: 0.22, rz: 0.14, c: NEXUS.colors.rayBlue, o: 0.17, ph: 2.3 },
+ { p: [-18, 28, 5], rx: -0.06, rz: 0.28, c: NEXUS.colors.rayGold, o: 0.13, ph: 0.7 },
+ { p: [ 1, 32, -14], rx: 0.10, rz: -0.08, c: NEXUS.colors.rayCyan, o: 0.18, ph: 1.8 },
+ { p: [ -6, 25, 12], rx: -0.20, rz: -0.10, c: NEXUS.colors.rayBlue, o: 0.15, ph: 3.1 },
+ { p: [ 20, 29, -7], rx: 0.14, rz: 0.24, c: NEXUS.colors.rayGold, o: 0.12, ph: 0.4 },
+ { p: [-12, 27, -9], rx: 0.05, rz: -0.16, c: NEXUS.colors.rayCyan, o: 0.14, ph: 2.6 },
+ { p: [ 8, 23, 9], rx: -0.12, rz: 0.06, c: NEXUS.colors.rayGold, o: 0.11, ph: 1.5 },
+];
+
+rayDefs.forEach(({ p, rx, rz, c, o, ph }) => {
+ createLightRay(new THREE.Vector3(...p), rx, rz, c, o, ph);
+});
+
+// === NEXUS CORE (floating icosahedron) ===
+const coreGeo = new THREE.IcosahedronGeometry(2.2, 1);
+const coreMat = new THREE.MeshPhongMaterial({
+ color: NEXUS.colors.primary,
+ emissive: NEXUS.colors.primary,
+ emissiveIntensity: 0.6,
+ wireframe: true,
+ transparent: true,
+ opacity: 0.85,
+});
+const core = new THREE.Mesh(coreGeo, coreMat);
+core.position.set(0, 5, 0);
+scene.add(core);
+
+// Glow halo around core
+const haloGeo = new THREE.SphereGeometry(3.2, 16, 16);
+const haloMat = new THREE.MeshBasicMaterial({
+ color: NEXUS.colors.primary,
+ transparent: true,
+ opacity: 0.04,
+ side: THREE.BackSide,
+ blending: THREE.AdditiveBlending,
+ depthWrite: false,
+});
+scene.add(new THREE.Mesh(haloGeo, haloMat)).position.set(0, 5, 0);
+
+// === GROUND PLANE ===
+const groundGeo = new THREE.CircleGeometry(40, 64);
+const groundMat = new THREE.MeshPhongMaterial({
+ color: 0x060618,
+ emissive: 0x010110,
+ shininess: 10,
+});
+const ground = new THREE.Mesh(groundGeo, groundMat);
+ground.rotation.x = -Math.PI / 2;
+scene.add(ground);
+
+// === POST-PROCESSING (Unreal Bloom) ===
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+const bloom = new UnrealBloomPass(
+ new THREE.Vector2(window.innerWidth, window.innerHeight),
+ 0.9, // strength
+ 0.5, // radius
+ 0.82 // threshold
+);
+composer.addPass(bloom);
+
+// === RESIZE HANDLER ===
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ composer.setSize(window.innerWidth, window.innerHeight);
+ bloom.setSize(window.innerWidth, window.innerHeight);
+});
+
+// === LOADING SCREEN ===
+const loadingScreen = document.getElementById('loading-screen');
+const loadingProgress = document.getElementById('loading-progress');
+
+function simulateLoad() {
+ let pct = 0;
+ const interval = setInterval(() => {
+ pct += Math.random() * 18;
+ if (pct >= 100) {
+ pct = 100;
+ clearInterval(interval);
+ setTimeout(() => loadingScreen.classList.add('hidden'), 300);
+ }
+ loadingProgress.style.width = pct + '%';
+ }, 80);
+}
+simulateLoad();
+
+// === ANIMATION LOOP ===
+const clock = new THREE.Clock();
+
+function animate() {
+ requestAnimationFrame(animate);
+
+ const t = clock.getElapsedTime();
+
+ // Update volumetric ray shaders
+ lightRays.forEach(({ mat }) => {
+ mat.uniforms.time.value = t;
+ });
+
+ // Rotate Nexus Core
+ core.rotation.y = t * 0.28;
+ core.rotation.x = t * 0.11;
+
+ // Pulse the core point light
+ coreLight.intensity = 2.5 + 0.8 * Math.sin(t * 1.8);
+
+ controls.update();
+ composer.render();
+}
+
+animate();
+
+// === WEBSOCKET INTEGRATION ===
wsClient.connect();
-// Handle WebSocket events
window.addEventListener('player-joined', (event) => {
console.log('Player joined:', event.detail);
});
@@ -19,9 +289,23 @@ window.addEventListener('chat-message', (event) => {
console.log('Chat message:', event.detail);
});
-// Clean up on page unload
window.addEventListener('beforeunload', () => {
wsClient.disconnect();
});
-// ... existing code ...
+// === AUDIO TOGGLE ===
+const audioToggle = document.getElementById('audio-toggle');
+const ambientSound = document.getElementById('ambient-sound');
+if (audioToggle && ambientSound) {
+ audioToggle.addEventListener('click', () => {
+ if (ambientSound.paused) {
+ ambientSound.play().catch(() => {});
+ audioToggle.textContent = 'π';
+ audioToggle.classList.remove('muted');
+ } else {
+ ambientSound.pause();
+ audioToggle.textContent = 'π';
+ audioToggle.classList.add('muted');
+ }
+ });
+}
diff --git a/index.html b/index.html
index 34af931..6d1e80f 100644
--- a/index.html
+++ b/index.html
@@ -14,18 +14,44 @@
+
+
-
+
+
+
β THE NEXUS
+
Timmy's Sovereign Space
+
-
+
-
+
+
+
+
+
+
β INITIALIZING NEXUS
+
+
+
+