Feature: musicians dancing and jumping from stage to floor

Feature: medieval musicians
Feature: pews
2025-11-21 21:35:10 +01:00 · 2025-11-21 20:38:37 +01:00 · 2025-11-21 20:04:43 +01:00 · 2025-11-21 20:00:24 +01:00 · 2025-11-21 19:39:37 +01:00 · 2025-11-21 19:32:22 +01:00
39 changed files with 2982 additions and 3 deletions
--- a/magic-mirror/src/scene/fireplace.js
+++ b/magic-mirror/src/scene/fireplace.js
@ -69,7 +69,7 @@ export function createFireplace(x, z, rotY) {
    // Lintel (Top Frame)
    const lintelWidth = openingWidth + 2 * frameThickness;
-    const lintelGeo = new THREE.BoxGeometry(lintelWidth, frameThickness, frameDepth);
+    const lintelGeo = new THREE.BoxGeometry(lintelWidth, frameThickness, frameDepth+0.1);
    const lintel = new THREE.Mesh(lintelGeo, stoneMaterial);
    lintel.position.set(0, hearthHeight + openingHeight + frameThickness / 2, bodyDepth / 2 + frameDepth / 2);
    lintel.castShadow = true;
--- a/magic-mirror/src/scene/rat.js
+++ b/magic-mirror/src/scene/rat.js
@ -58,10 +58,10 @@ export class Rat {
 export function createRats(x, y, z, rotY) {
    // --- 9.5 Rat Hole ---
-    const holeGeo = new THREE.CircleGeometry(0.15, 16);
+    const holeGeo = new THREE.CircleGeometry(0.05, 16);
    const holeMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
    const ratHole = new THREE.Mesh(holeGeo, holeMat);
-    ratHole.position.set(x, y + 0.1, z);
+    ratHole.position.set(x, y + 0.02, z);
    ratHole.rotation.y = rotY;
    state.scene.add(ratHole);
--- a/party-cathedral/.gitignore
+++ b/party-cathedral/.gitignore
@ -0,0 +1,2 @@
 node_modules
 dist
--- a/party-cathedral/index.html
+++ b/party-cathedral/index.html
@ -0,0 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Party Cathedral</title>
    <style>
        /* Cheerful medieval aesthetic */
        body {
            background-color: #f5eeda; /* A light parchment color */
            margin: 0;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
        }
        canvas {
            display: block;
        }
    </style>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" src="/src/main.js"></script>
 </head>
 <body>
    <!-- Hidden Video Element --><video id="video" playsinline muted class="hidden"></video>
    <!-- Controls for loading video --><div id="controls" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 flex flex-col items-center space-y-2">
        <!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple> 
        <div class="flex space-x-4">
            <!-- Load Tapes Button --><button id="loadTapeButton" class="px-8 py-3 bg-[#cc3333] text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150 active:translate-y-px">
                BEHOLD THE SPECTACLE
            </button>
        </div>
    </div>
    <!-- 3D Canvas will be injected here by Three.js -->
 </body>
 </html>
 <!-- textures sourced from https://animalia-life.club/ -->
--- a/party-cathedral/package-lock.json
+++ b/party-cathedral/package-lock.json
--- a/party-cathedral/package.json
+++ b/party-cathedral/package.json
@ -0,0 +1,17 @@
 {
  "name": "tv-player",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^7.2.2"
  },
  "dependencies": {
    "three": "^0.181.1"
  }
 }
--- a/party-cathedral/preview.sh
+++ b/party-cathedral/preview.sh
@ -0,0 +1,3 @@
 #!/usr/bin/env bash
 nix-shell -p nodejs --run "npx vite build && npx vite preview"
--- a/party-cathedral/serve.sh
+++ b/party-cathedral/serve.sh
@ -0,0 +1,3 @@
 #!/usr/bin/env bash
 nix-shell -p nodejs --run "npx vite"
--- a/party-cathedral/src/core/animate.js
+++ b/party-cathedral/src/core/animate.js
@ -0,0 +1,100 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { updateScreenEffect } from '../scene/magic-mirror.js'
 import sceneFeatureManager from '../scene/SceneFeatureManager.js';
 function updateCamera() {
    const globalTime = Date.now() * 0.0001;
    const lookAtTime = Date.now() * 0.0002;
    const camAmplitude = 1.0;
    const lookAmplitude = 8.0;
    // Base Camera Position in front of the TV
    const baseX = 0;
    const baseY = 1.6;
    const baseZ = -10.0;
    // Base LookAt target (Center of the screen)
    const baseTargetX = 0;
    const baseTargetY = 1.6;
    const baseTargetZ = -30.0;
    // Camera Position Offsets (Drift)
    const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
    const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.1;
    const camOffsetZ = Math.cos(globalTime * 3.2) * camAmplitude;
    state.camera.position.x = baseX + camOffsetX;
    state.camera.position.y = baseY + camOffsetY;
    state.camera.position.z = baseZ + camOffsetZ;
    // LookAt Target Offsets (Subtle Gaze Shift)
    const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
    const lookOffsetZ = Math.cos(lookAtTime * 2.5) * lookAmplitude;
    const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude * 0.5;
    // Apply lookAt to the subtly shifted target
    state.camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ + lookOffsetZ);
 }
 function updateScreenLight() {
    if (state.isVideoLoaded && state.screenLight.intensity > 0) {
        const pulseTarget = state.originalScreenIntensity + (Math.random() - 0.5) * state.screenIntensityPulse;
        state.screenLight.intensity = THREE.MathUtils.lerp(state.screenLight.intensity, pulseTarget, 0.1);
        const lightTime = Date.now() * 0.0001;
        const radius = 0.01;
        const centerX = 0;
        const centerY = 1.5;
        state.screenLight.position.x = centerX + Math.cos(lightTime) * radius;
        state.screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5; // Slightly different freq for Y
    }
 }
 function updateShaderTime() {
    if (state.tvScreen && state.tvScreen.material.uniforms && state.tvScreen.material.uniforms.u_time) {
        state.tvScreen.material.uniforms.u_time.value = state.clock.getElapsedTime();
    }
 }
 function updateVideo() {
    if (state.videoTexture) {
        state.videoTexture.needsUpdate = true;
    }
 }
 // --- Animation Loop ---
 let lastTime = -1;
 export function animate() {
    requestAnimationFrame(animate);
    let deltaTime = 0;
    if (lastTime !== -1) {
        const newTime = state.clock.getElapsedTime();
        deltaTime = newTime - lastTime;
        lastTime = newTime;
    } else {
        lastTime = state.clock.getElapsedTime();
    }
    sceneFeatureManager.update(deltaTime);
    state.effectsManager.update();
    updateCamera();
    updateScreenLight();
    updateVideo();
    updateShaderTime();
    updateScreenEffect();
    // RENDER!
    state.renderer.render(state.scene, state.camera);
 }
 // --- Window Resize Handler ---
 export function onWindowResize() {
    state.camera.aspect = window.innerWidth / window.innerHeight;
    state.camera.updateProjectionMatrix();
    state.renderer.setSize(window.innerWidth, window.innerHeight);
 }
--- a/party-cathedral/src/core/init.js
+++ b/party-cathedral/src/core/init.js
@ -0,0 +1,62 @@
 import * as THREE from 'three';
 import { state, initState } from '../state.js';
 import { EffectsManager } from '../effects/EffectsManager.js';
 import { createSceneObjects } from '../scene/root.js';
 import { animate, onWindowResize } from './animate.js';
 import { loadVideoFile, playNextVideo } from './video-player.js';
 // --- Initialization ---
 export function init() {
    initState();
    // 1. Scene Setup (Dark, Ambient)
    state.scene = new THREE.Scene();
    state.scene.background = new THREE.Color(0x000000); 
    // 2. Camera Setup
    const FOV = 95;
    state.camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 1000);
    state.camera.position.set(0, 1.5, 4);
    // 3. Renderer Setup
    state.renderer = new THREE.WebGLRenderer({ antialias: true });
    state.renderer.setSize(window.innerWidth, window.innerHeight);
    state.renderer.setPixelRatio(window.devicePixelRatio);
    // Enable shadows on the renderer
    state.renderer.shadowMap.enabled = true;
    state.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
    state.container.appendChild(state.renderer.domElement);
    // 5. Build the entire scene with TV and surrounding objects
    createSceneObjects();
    // 6. Initialize all visual effects via the manager
    state.effectsManager = new EffectsManager(state.scene);
    // --- 8. Debug Visualization Helpers ---
    // Visual aids for the light source positions
    if (state.debugLight && THREE.PointLightHelper) {
        const screenHelper = new THREE.PointLightHelper(state.screenLight, 0.1, 0xff0000); // Red for screen
        state.scene.add(screenHelper);
        // Lamp Helper will now work since lampLight is added to the scene
        const lampHelperPoint = new THREE.PointLightHelper(state.lampLightPoint, 0.1, 0x00ff00); // Green for lamp
        state.scene.add(lampHelperPoint);
    }
    // 9. Event Listeners
    window.addEventListener('resize', onWindowResize, false);
    state.fileInput.addEventListener('change', loadVideoFile); 
    // Button logic
    state.loadTapeButton.addEventListener('click', () => {
        state.fileInput.click(); 
    });
    // Auto-advance to the next video when the current one finishes.
    state.videoElement.addEventListener('ended', playNextVideo);
    // Start the animation loop
    animate();
 }
--- a/party-cathedral/src/core/video-player.js
+++ b/party-cathedral/src/core/video-player.js
@ -0,0 +1,107 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { turnTvScreenOff, turnTvScreenOn } from '../scene/magic-mirror.js';
 // --- Play video by index ---
 export function playVideoByIndex(index) {
    state.currentVideoIndex = index;
    const url = state.videoUrls[index];
    // Dispose of previous texture to free resources
    if (state.videoTexture) {
        state.videoTexture.dispose();
        state.videoTexture = null;
    }
    if (index < 0 || index >= state.videoUrls.length) {
        console.info('End of playlist reached. Reload tapes to start again.');
        turnTvScreenOff();
        state.isVideoLoaded = false;
        state.lastUpdateTime = -1; // force VCR to redraw
        return;
    }
    state.videoElement.src = url;
    state.videoElement.muted = true;
    state.videoElement.load();
    // Set loop property: only loop if it's the only video loaded
    state.videoElement.loop = false; //state.videoUrls.length === 1;
    state.videoElement.onloadeddata = () => {
        // 1. Create the Three.js texture
        state.videoTexture = new THREE.VideoTexture(state.videoElement);
        state.videoTexture.minFilter = THREE.LinearFilter;
        state.videoTexture.magFilter = THREE.LinearFilter;
        state.videoTexture.format = THREE.RGBAFormat; 
        state.videoTexture.needsUpdate = true;
        // 2. Apply the video texture to the screen mesh
        turnTvScreenOn();
        // 3. Start playback and trigger the warm-up effect simultaneously
        state.videoElement.play().then(() => {
            state.isVideoLoaded = true;
            // Use the defined base intensity for screen glow
            state.screenLight.intensity = state.originalScreenIntensity; 
            // Initial status message with tape count
            console.info(`Playing tape ${state.currentVideoIndex + 1} of ${state.videoUrls.length}.`);
        }).catch(error => {
            state.screenLight.intensity = state.originalScreenIntensity * 0.5; // Dim the light if playback fails
            console.error(`Playback blocked for tape ${state.currentVideoIndex + 1}. Click Next Tape to try again.`);
            console.error('Playback Error: Could not start video playback.', error);
        });
    };
    state.videoElement.onerror = (e) => {
        state.screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
        console.error(`Error loading tape ${state.currentVideoIndex + 1}.`);
        console.error('Video Load Error:', e);
    };
 }
 // --- Cycle to the next video ---
 export function playNextVideo() {
    // Determine the next index, cycling back to 0 if we reach the end
    let nextIndex = state.currentVideoIndex + 1;
    if (nextIndex < state.videoUrls.length) {
        state.baseTime += state.videoElement.duration;
    }
    playVideoByIndex(nextIndex);
 }
 // --- Video Loading Logic (handles multiple files) ---
 export function loadVideoFile(event) {
    const files = event.target.files;
    if (files.length === 0) {
        console.info('File selection cancelled.');
        return;
    }
    // 1. Clear previous URLs and revoke object URLs to prevent memory leaks
    state.videoUrls.forEach(url => URL.revokeObjectURL(url));
    state.videoUrls = [];
    // 2. Populate the new videoUrls array
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (file.type.startsWith('video/')) {
            state.videoUrls.push(URL.createObjectURL(file));
        }
    }
    if (state.videoUrls.length === 0) {
        console.info('No valid video files selected.');
        return;
    }
    // 3. Start playback of the first video
    console.info(`Loaded ${state.videoUrls.length} tapes. Starting playback...`);
    state.loadTapeButton.classList.add("hidden");
    const startDelay = 5;
    console.info(`Video will start in ${startDelay} seconds.`);
    setTimeout(() => { playVideoByIndex(0); }, startDelay * 1000);
 }
--- a/party-cathedral/src/effects/EffectsManager.js
+++ b/party-cathedral/src/effects/EffectsManager.js
@ -0,0 +1,22 @@
 import { DustEffect } from './dust.js';
 export class EffectsManager {
    constructor(scene) {
        this.effects = [];
        this._initializeEffects(scene);
    }
    _initializeEffects(scene) {
        // Add all desired effects here.
        // This is now the single place to manage which effects are active.
        this.addEffect(new DustEffect(scene));
    }
    addEffect(effect) {
        this.effects.push(effect);
    }
    update() {
        this.effects.forEach(effect => effect.update());
    }
 }
--- a/party-cathedral/src/effects/dust.js
+++ b/party-cathedral/src/effects/dust.js
@ -0,0 +1,47 @@
 import * as THREE from 'three';
 export class DustEffect {
    constructor(scene) {
        this.dust = null;
        this._create(scene);
    }
    _create(scene) {
        const particleCount = 2000;
        const particlesGeometry = new THREE.BufferGeometry();
        const positions = [];
        for (let i = 0; i < particleCount; i++) {
            positions.push(
                (Math.random() - 0.5) * 15,
                Math.random() * 10,
                (Math.random() - 0.5) * 15
            );
        }
        particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
        const particleMaterial = new THREE.PointsMaterial({
            color: 0xffffff,
            size: 0.015,
            transparent: true,
            opacity: 0.08,
            blending: THREE.AdditiveBlending
        });
        this.dust = new THREE.Points(particlesGeometry, particleMaterial);
        scene.add(this.dust);
    }
    update() {
        if (this.dust) {
            const positions = this.dust.geometry.attributes.position.array;
            for (let i = 1; i < positions.length; i += 3) {
                positions[i] -= 0.001;
                if (positions[i] < -2) {
                    positions[i] = 8;
                }
            }
            this.dust.geometry.attributes.position.needsUpdate = true;
        }
    }
 }
--- a/party-cathedral/src/global-variables.js
+++ b/party-cathedral/src/global-variables.js
@ -0,0 +1,39 @@
 // --- Global Variables ---
 let scene, camera, renderer, tvScreen, videoTexture, screenLight, lampLightPoint, lampLightSpot, effectsManager;
 // VCR Display related variables
 let simulatedPlaybackTime = 0;
 let lastUpdateTime = -1;
 let baseTime = 0;
 let isVideoLoaded = false;
 let videoUrls = []; // Array to hold all video URLs
 let currentVideoIndex = -1; // Index of the currently playing video
 const originalLampIntensity = 0.8; // Base intensity for the flickering lamp
 const originalScreenIntensity = 0.2; // Base intensity for the screen glow
 const screenIntensityPulse = 0.2;
 const roomSize = 5;
 const roomHeight = 3;
 const container = document.body;
 const videoElement = document.getElementById('video');
 const fileInput = document.getElementById('fileInput');
 const loadTapeButton = document.getElementById('loadTapeButton');
 const loader = new THREE.TextureLoader();
 const debugLight = false;
 let landingSurfaces = []; // Array to hold floor and table for fly landings
 const raycaster = new THREE.Raycaster();
 // --- Configuration ---
 const ROOM_SIZE = roomSize;
 const FLIGHT_HEIGHT_MIN = 0.5; // Min height for flying
 const FLIGHT_HEIGHT_MAX = roomHeight * 0.9; // Max height for flying
 const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
 const DAMPING_FACTOR = 0.05;
 const FLY_WAIT_BASE = 1000;
 const FLY_LAND_CHANCE = 0.3;
 // --- Seedable Random Number Generator (Mulberry32) ---
 let seed = 12345; // Default seed, will be overridden per shelf
--- a/party-cathedral/src/main.js
+++ b/party-cathedral/src/main.js
@ -0,0 +1,6 @@
 import * as THREE from 'three';
 import { init } from './core/init.js';
 import { StainedGlass } from './scene/stained-glass-window.js';
 // Start everything
 init();
--- a/party-cathedral/src/scene/PictureFrame.js
+++ b/party-cathedral/src/scene/PictureFrame.js
@ -0,0 +1,116 @@
 import * as THREE from 'three';
 const FRAME_DEPTH = 0.05;
 const TRANSITION_DURATION = 5000;
 const IMAGE_CHANGE_CHANCE = 0.0001;
 export class PictureFrame {
    constructor(scene, { position, width, height, imageUrls, rotationY = 0 }) {
        if (!imageUrls || imageUrls.length === 0) {
            throw new Error('PictureFrame requires at least one image URL in the imageUrls array.');
        }
        this.scene = scene;
        this.mesh = this._createPictureFrame(width, height, imageUrls, 0.05);
        this.mesh.position.copy(position);
        this.mesh.rotation.y = rotationY;
        this.isTransitioning = false;
        this.transitionStartTime = 0;
        this.scene.add(this.mesh);
    }
    _createPictureFrame(width, height, imageUrls, frameThickness) {
        const paintingGroup = new THREE.Group();
        // 1. Create the wooden frame
        const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // SaddleBrown
        const topFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
        topFrame.position.y = height / 2 + frameThickness / 2;
        topFrame.castShadow = true;
        topFrame.receiveShadow = true;
        paintingGroup.add(topFrame);
        const bottomFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
        bottomFrame.position.y = -height / 2 - frameThickness / 2;
        bottomFrame.castShadow = true;
        bottomFrame.receiveShadow = true;
        paintingGroup.add(bottomFrame);
        const leftFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
        leftFrame.position.x = -width / 2 - frameThickness / 2;
        leftFrame.castShadow = true;
        leftFrame.receiveShadow = true;
        paintingGroup.add(leftFrame);
        const rightFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
        rightFrame.position.x = width / 2 + frameThickness / 2;
        rightFrame.castShadow = true;
        rightFrame.receiveShadow = true;
        paintingGroup.add(rightFrame);
        // 2. Create the picture canvases with textures
        const textureLoader = new THREE.TextureLoader();
        this.textures = imageUrls.map(url => textureLoader.load(url));
        this.currentTextureIndex = 0;
        const pictureGeometry = new THREE.PlaneGeometry(width, height);
        // Create two picture planes for cross-fading
        this.pictureBack = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex] }));
        this.pictureBack.position.z = 0.001;
        this.pictureBack.receiveShadow = true;
        paintingGroup.add(this.pictureBack);
        this.pictureFront = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex], transparent: true, opacity: 0 }));
        this.pictureFront.position.z = 0.003; // Place slightly in front to avoid z-fighting
        this.pictureFront.receiveShadow = true;
        paintingGroup.add(this.pictureFront);
        return paintingGroup;
    }
    setPicture(index) {
        if (this.isTransitioning || index === this.currentTextureIndex || index < 0 || index >= this.textures.length) {
            return;
        }
        this.isTransitioning = true;
        this.transitionStartTime = Date.now();
        // Front plane fades in with the new texture
        this.pictureFront.material.map = this.textures[index];
        this.pictureFront.material.opacity = 0;
        this.nextTextureIndex = index;
    }
    nextPicture() {
        this.setPicture((this.currentTextureIndex + 1) % this.textures.length);
    }
    update() {
        if (!this.isTransitioning) {
            if (Math.random() > 1.0 - IMAGE_CHANGE_CHANCE) {
                this.nextPicture();
            }
            return;
        }
        const elapsedTime = Date.now() - this.transitionStartTime;
        const progress = Math.min(elapsedTime / TRANSITION_DURATION, 1.0);
        this.pictureFront.material.opacity = progress;
        if (progress >= 1.0) {
            this.isTransitioning = false;
            this.currentTextureIndex = this.nextTextureIndex;
            // Reset for next transition
            this.pictureBack.material.map = this.textures[this.currentTextureIndex];
            this.pictureFront.material.opacity = 0;
        }
    }
 }
--- a/party-cathedral/src/scene/SceneFeature.js
+++ b/party-cathedral/src/scene/SceneFeature.js
@ -0,0 +1,6 @@
 // SceneFeature.js
 export class SceneFeature {
    init() {}
    update(deltaTime) {}
 }
--- a/party-cathedral/src/scene/SceneFeatureManager.js
+++ b/party-cathedral/src/scene/SceneFeatureManager.js
@ -0,0 +1,31 @@
 // SceneFeatureManager.js
 class SceneFeatureManager {
    constructor() {
        if (SceneFeatureManager.instance) {
            return SceneFeatureManager.instance;
        }
        this.features = [];
        SceneFeatureManager.instance = this;
    }
    register(feature) {
        this.features.push(feature);
    }
    init() {
        for (const feature of this.features) {
            feature.init();
        }
    }
    update(deltaTime) {
        for (const feature of this.features) {
            feature.update(deltaTime);
        }
    }
 }
 const sceneFeatureManager = new SceneFeatureManager();
 export default sceneFeatureManager;
--- a/party-cathedral/src/scene/light-ball.js
+++ b/party-cathedral/src/scene/light-ball.js
@ -0,0 +1,61 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
 export class LightBall extends SceneFeature {
    constructor() {
        super();
        this.ball = null;
        this.light = null;
        sceneFeatureManager.register(this);
    }
    init() {
        // --- Dimensions from room-walls.js for positioning ---
        const naveWidth = 12;
        const naveHeight = 15;
        const length = 40;
        // --- Ball Properties ---
        const ballRadius = 1.0;
        const ballColor = 0xffffff; // White light
        const lightIntensity = 6.0;
        // --- Create the Ball ---
        const ballGeometry = new THREE.SphereGeometry(ballRadius, 32, 32);
        const ballMaterial = new THREE.MeshBasicMaterial({ color: ballColor, emissive: ballColor, emissiveIntensity: 1.0 });
        this.ball = new THREE.Mesh(ballGeometry, ballMaterial);
        this.ball.castShadow = false;
        this.ball.receiveShadow = false;
        // --- Create the Light ---
        this.light = new THREE.PointLight(ballColor, lightIntensity, length / 2); // Adjust range to cathedral size
        this.light.castShadow = true;
        this.light.shadow.mapSize.width = 512;
        this.light.shadow.mapSize.height = 512;
        this.light.shadow.camera.near = 0.1;
        this.light.shadow.camera.far = length / 2;
        // --- Initial Position ---
        this.ball.position.set(0, naveHeight * 0.7, 0); // Near the ceiling
        this.light.position.copy(this.ball.position);
        state.scene.add(this.ball);
        state.scene.add(this.light);
    }
    update(deltaTime) {
        // --- Animate the Ball ---
        const time = state.clock.getElapsedTime();
        const driftSpeed = 0.5;
        const driftAmplitude = 10.0;
        this.ball.position.x = Math.sin(time * driftSpeed) * driftAmplitude;
        this.ball.position.y = 10 + Math.cos(time * driftSpeed * 1.3) * driftAmplitude * 0.5; // bobbing
        this.ball.position.z = Math.cos(time * driftSpeed * 0.7) * driftAmplitude;
        this.light.position.copy(this.ball.position);
    }
 }
 new LightBall();
--- a/party-cathedral/src/scene/magic-mirror.js
+++ b/party-cathedral/src/scene/magic-mirror.js
@ -0,0 +1,163 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
 export function createMagicMirror(x, z, rotY) {
    // --- Materials ---
    const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513, shininess: 40, specular: 0x333333 });
    const metalMaterial = new THREE.MeshPhongMaterial({ color: 0xd4af37, shininess: 100, specular: 0xeeeeff }); // Gold-like
    const mirrorGroup = new THREE.Group();
    // --- 1. Mirror Stand Base ---
    const baseWidth = 1.5;
    const baseHeight = 0.2;
    const baseDepth = 0.6;
    const baseGeo = new THREE.BoxGeometry(baseWidth, baseHeight, baseDepth);
    const base = new THREE.Mesh(baseGeo, frameMaterial);
    base.position.y = baseHeight / 2;
    base.castShadow = true;
    base.receiveShadow = true;
    mirrorGroup.add(base);
    // --- 2. Stand Uprights ---
    const uprightHeight = 2.4;
    const uprightWidth = 0.15;
    const uprightGeo = new THREE.BoxGeometry(uprightWidth, uprightHeight, uprightWidth);
    const createUpright = (posX) => {
        const upright = new THREE.Mesh(uprightGeo, frameMaterial);
        upright.position.set(posX, uprightHeight / 2, 0);
        upright.castShadow = true;
        upright.receiveShadow = true;
        return upright;
    };
    const uprightOffset = baseWidth / 2 - 0.3;
    mirrorGroup.add(createUpright(-uprightOffset));
    mirrorGroup.add(createUpright(uprightOffset));
    // --- 3. The Elliptical Mirror Surface (The "Screen") ---
    const mirrorRadius = 0.8; // Adjusted radius for scaling
    const mirrorGeo = new THREE.CircleGeometry(mirrorRadius, 64);
    // --- 3a. The permanent reflective mirror surface ---
    const mirrorBackMaterial = new THREE.MeshPhongMaterial({
        color: 0x051020, // Dark blue tint
        shininess: 100,
        specular: 0xcccccc,
        envMap: state.scene.background, // Reflect the room
        reflectivity: 0.9 // Increased reflectivity
    });
    const mirrorBack = new THREE.Mesh(mirrorGeo, mirrorBackMaterial);
    mirrorBack.position.y = 1.4; // Center height
    mirrorBack.position.z = 0.1; // Slightly forward in the frame
    mirrorBack.scale.set(1, 1.5, 1); // Scale Y to make it a tall ellipse
    mirrorGroup.add(mirrorBack);
    // --- 3b. The video surface that appears when playing ---
    // This is what state.tvScreen will now refer to
    state.tvScreen = new THREE.Mesh(mirrorGeo, new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 }));
    state.tvScreen.position.copy(mirrorBack.position);
    state.tvScreen.position.z += 0.01; // Place it just in front of the reflective surface
    state.tvScreen.scale.copy(mirrorBack.scale);
    state.tvScreen.visible = false; // Start invisible
    mirrorGroup.add(state.tvScreen);
    // --- 4. Ornate Elliptical Mirror Frame (Torus) ---
    const frameRadius = mirrorRadius;
    const frameTubeRadius = 0.04; // Made the rim thinner
    const frameRingGeo = new THREE.TorusGeometry(frameRadius, frameTubeRadius, 16, 100);
    const frameRing = new THREE.Mesh(frameRingGeo, metalMaterial);
    frameRing.position.copy(state.tvScreen.position);
    frameRing.scale.copy(state.tvScreen.scale); // Apply the same scale to the frame
    frameRing.castShadow = true;
    mirrorGroup.add(frameRing);
    // --- 5. Light from the Mirror ---
    state.screenLight = new THREE.PointLight(0xffffff, 0, 10);
    state.screenLight.position.copy(state.tvScreen.position);
    state.screenLight.position.z += 0.3; // Position light in front of the mirror
    state.screenLight.castShadow = true;
    state.screenLight.shadow.mapSize.width = 1024;
    state.screenLight.shadow.mapSize.height = 1024;
    state.screenLight.shadow.camera.near = 0.2;
    state.screenLight.shadow.camera.far = 5;
    //mirrorGroup.add(state.screenLight);
    // Position and rotate the entire group
    mirrorGroup.position.set(x, 0, z);
    mirrorGroup.rotation.y = rotY;
    state.scene.add(mirrorGroup);
 }
 export function turnTvScreenOff() {
    if (state.tvScreenPowered) {
        state.tvScreenPowered = false;
        setScreenEffect(2, () => {
            state.tvScreen.visible = false; // Hide the video surface on completion
            state.screenLight.intensity = 0.0;
        }); // Trigger power down effect
    }
 }
 export function turnTvScreenOn() {
    if (state.tvScreen.material) {
        state.tvScreen.material.dispose();
    }
    state.tvScreen.visible = true; // Make the video surface visible
    // Use the shader material for video playback
    state.tvScreen.material = new THREE.ShaderMaterial({
        uniforms: {
            videoTexture: { value: state.videoTexture },
            u_effect_type: { value: 0.0 },
            u_effect_strength: { value: 0.0 },
            u_time: { value: 0.0 },
        },
        vertexShader: screenVertexShader,
        fragmentShader: screenFragmentShader,
        transparent: true,
    });
    state.tvScreen.material.needsUpdate = true;
    if (!state.tvScreenPowered) {
        state.tvScreenPowered = true;
        setScreenEffect(1); // Trigger power on effect
    }
 }
 export function setScreenEffect(effectType, onComplete) {
    const material = state.tvScreen.material;
    if (!material.uniforms) return;
    state.screenEffect.active = true;
    state.screenEffect.type = effectType;
    state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
    state.screenEffect.onComplete = onComplete;
 }
 export function updateScreenEffect() {
    if (!state.screenEffect.active) return;
    const material = state.tvScreen.material;
    if (!material.uniforms) return;
    const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
    const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
    const easedProgress = state.screenEffect.easing(progress);
    material.uniforms.u_effect_type.value = state.screenEffect.type;
    material.uniforms.u_effect_strength.value = easedProgress;
    if (progress >= 1.0) {
        state.screenEffect.active = false;
        material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0;
        if (state.screenEffect.onComplete) {
            state.screenEffect.onComplete();
        }
        material.uniforms.u_effect_type.value = 0.0;
    }
 }
--- a/party-cathedral/src/scene/medieval-musicians.js
+++ b/party-cathedral/src/scene/medieval-musicians.js
@ -0,0 +1,220 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
 import musiciansTextureUrl from '/textures/musician1.png';
 // --- Stage dimensions for positioning ---
        const stageHeight = 1.5;
        const stageDepth = 5;
        const length = 40;
        // --- Billboard Properties ---
        const musicianHeight = 2.5;
        const musicianWidth = 2.5;
 export class MedievalMusicians extends SceneFeature {
    constructor() {
        super();
        this.musicians = [];
        sceneFeatureManager.register(this);
    }
    init() {
        // Load the texture and create the material inside the callback
        state.loader.load(musiciansTextureUrl, (texture) => {
            // 1. Draw texture to canvas to process it
            const image = texture.image;
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext('2d');
            context.drawImage(image, 0, 0);
            // 2. Get the key color from the top-left pixel
            const keyPixelData = context.getImageData(0, 0, 1, 1).data;
            const keyColor = { r: keyPixelData[0], g: keyPixelData[1], b: keyPixelData[2] };
            // 3. Process the entire canvas to make background transparent
            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            const threshold = 20; // Adjust this for more/less color tolerance
            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];
                const distance = Math.sqrt(Math.pow(r - keyColor.r, 2) + Math.pow(g - keyColor.g, 2) + Math.pow(b - keyColor.b, 2));
                if (distance < threshold) {
                    data[i + 3] = 0; // Set alpha to 0 (transparent)
                }
            }
            context.putImageData(imageData, 0, 0);
            // 4. Create a new texture from the modified canvas
            const processedTexture = new THREE.CanvasTexture(canvas);
            // 5. Create a standard material with the new texture
            const material = new THREE.MeshStandardMaterial({
                map: processedTexture,
                side: THREE.DoubleSide,
                alphaTest: 0.5, // Treat pixels with alpha < 0.5 as fully transparent
                roughness: 0.7,
                metalness: 0.1,
            });
            // 6. Create and position the musicians
            const geometry = new THREE.PlaneGeometry(musicianWidth, musicianHeight);
            const musicianPositions = [
                new THREE.Vector3(-2, stageHeight + musicianHeight / 2, -length / 2 + stageDepth / 2 - 1),
                new THREE.Vector3(0, stageHeight + musicianHeight / 2, -length / 2 + stageDepth / 2 - 1.5),
                new THREE.Vector3(2.5, stageHeight + musicianHeight / 2, -length / 2 + stageDepth / 2 - 1.2),
            ];
            musicianPositions.forEach(pos => {
                const musician = new THREE.Mesh(geometry, material);
                musician.position.copy(pos);
                state.scene.add(musician);
                // Store musician object with state for animation
                this.musicians.push({
                    mesh: musician,
                    // --- State for complex movement ---
                    currentPlane: 'stage', // 'stage' or 'floor'
                    state: 'WAITING',
                    targetPosition: pos.clone(),
                    waitStartTime: 0,
                    waitTime: 1 + Math.random() * 2, // Wait 1-3 seconds
                    jumpStartPos: null,
                    jumpEndPos: null,
                    jumpProgress: 0,
                    // --- State for jumping in place ---
                    isJumping: false,
                    jumpStartTime: 0,
                });
            });
        });
    }
    update(deltaTime) {
        // Billboard effect: make each musician face the camera
        if (this.musicians.length > 0) {
            const cameraPosition = new THREE.Vector3();
            state.camera.getWorldPosition(cameraPosition);
            const time = state.clock.getElapsedTime();
            const moveSpeed = 2.0;
            const stageArea = { x: 10, z: 4, y: stageHeight, centerZ: -length / 2 + stageDepth / 2 };
            const floorArea = { x: 10, z: 4, y: 0, centerZ: -length / 2 + stageDepth + 2 };
            const planeEdgeZ = -length / 2 + stageDepth;
            const planeJumpChance = 0.1;
            const jumpChance = 0.005;
            const jumpDuration = 0.5;
            const jumpHeight = 2.0;
            this.musicians.forEach(musicianObj => {
                const { mesh } = musicianObj;
                // We only want to rotate on the Y axis to keep them upright
                mesh.lookAt(cameraPosition.x, mesh.position.y, cameraPosition.z);
                // --- Main State Machine ---
                const area = musicianObj.currentPlane === 'stage' ? stageArea : floorArea;
                const otherArea = musicianObj.currentPlane === 'stage' ? floorArea : stageArea;                        
                if (musicianObj.state === 'WAITING') {
                    if (time > musicianObj.waitStartTime + musicianObj.waitTime) {
                        if (Math.random() < planeJumpChance) {
                            // --- Decide to jump to the other plane ---
                            musicianObj.state = 'PREPARING_JUMP';
                            const targetX = (Math.random() - 0.5) * area.x;
                            musicianObj.targetPosition = new THREE.Vector3(targetX, mesh.position.y, planeEdgeZ);
                        } else {
                            // --- Decide to move to a new spot on the current plane ---
                            const newTarget = new THREE.Vector3(
                                (Math.random() - 0.5) * area.x,
                                area.y + musicianHeight/2,
                                area.centerZ + (Math.random() - 0.5) * area.z
                            );
                            musicianObj.targetPosition = newTarget;
                            musicianObj.state = 'MOVING';
                        }
                    }
                } else if (musicianObj.state === 'MOVING') {
                    const distance = mesh.position.distanceTo(musicianObj.targetPosition);
                    if (distance > 0.1) {
                        const direction = musicianObj.targetPosition.clone().sub(mesh.position).normalize();
                        mesh.position.add(direction.multiplyScalar(moveSpeed * deltaTime));
                    } else {
                        musicianObj.state = 'WAITING';
                        musicianObj.waitStartTime = time;
                        musicianObj.waitTime = 1 + Math.random() * 2;
                    }
                } else if (musicianObj.state === 'PREPARING_JUMP') {
                    const distance = mesh.position.distanceTo(musicianObj.targetPosition);
                    if (distance > 0.1) {
                        const direction = musicianObj.targetPosition.clone().sub(mesh.position).normalize();
                        mesh.position.add(direction.multiplyScalar(moveSpeed * deltaTime));
                    } else {
                        // --- Arrived at edge, start the plane jump ---
                        musicianObj.state = 'JUMPING_PLANE';
                        musicianObj.jumpStartPos = mesh.position.clone();
                        const targetPlane = musicianObj.currentPlane === 'stage' ? 'floor' : 'stage';
                        const targetArea = targetPlane === 'stage' ? stageArea : floorArea;
                        musicianObj.jumpEndPos = new THREE.Vector3(
                            mesh.position.x,
                            targetArea.y + musicianHeight/2,
                            planeEdgeZ + (targetPlane === 'stage' ? -1 : 1)
                        );
                        musicianObj.targetPosition = musicianObj.jumpEndPos.clone();
                        musicianObj.currentPlane = targetPlane;
                        musicianObj.jumpProgress = 0;
                    }
                } else if (musicianObj.state === 'JUMPING_PLANE') {
                    musicianObj.jumpProgress += deltaTime / jumpDuration;
                    if (musicianObj.jumpProgress < 1) {
                        // Determine base height based on which half of the jump we're in
                        const baseHeight = musicianObj.jumpProgress < 0.5 ? musicianObj.jumpStartPos.y : musicianObj.jumpEndPos.y;
                        const arcHeight = Math.sin(musicianObj.jumpProgress * Math.PI) * jumpHeight;
                        // Interpolate horizontal position
                        const horizontalProgress = musicianObj.jumpProgress;
                        mesh.position.x = THREE.MathUtils.lerp(musicianObj.jumpStartPos.x, musicianObj.jumpEndPos.x, horizontalProgress);
                        mesh.position.z = THREE.MathUtils.lerp(musicianObj.jumpStartPos.z, musicianObj.jumpEndPos.z, horizontalProgress);
                        // Apply vertical arc
                        mesh.position.y = baseHeight + arcHeight;
                    } else {
                        // Landed
                        mesh.position.copy(musicianObj.jumpEndPos);
                        musicianObj.state = 'WAITING';
                        musicianObj.waitStartTime = time;
                        musicianObj.waitTime = 1 + Math.random() * 2;
                    }
                }
                // --- Jumping in place (can happen in any state except during a plane jump) ---
                if (musicianObj.isJumping) {
                    const jumpProgress = (time - musicianObj.jumpStartTime) / jumpDuration;
                    if (jumpProgress < 1) {
                        const baseHeight = area.y + musicianHeight/2;
                        mesh.position.y = baseHeight + Math.sin(jumpProgress * Math.PI) * jumpHeight;
                    } else {
                        musicianObj.isJumping = false;
                        mesh.position.y = area.y + musicianHeight / 2;
                    }
                } else {
                    if (Math.random() < jumpChance && musicianObj.state !== 'JUMPING_PLANE' && musicianObj.state !== 'PREPARING_JUMP') {
                        musicianObj.isJumping = true;
                        musicianObj.jumpStartTime = time;
                    }
                }
            });
        }
    }
 }
 new MedievalMusicians();
--- a/party-cathedral/src/scene/pews.js
+++ b/party-cathedral/src/scene/pews.js
@ -0,0 +1,91 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
 import woodTextureUrl from '/textures/wood.png';
 export class Pews extends SceneFeature {
    constructor() {
        super();
        sceneFeatureManager.register(this);
    }
    init() {
        // --- Dimensions from room-walls.js for positioning ---
        const length = 40;
        const naveWidth = 12;
        const aisleWidth = 6;
        // --- Pew Properties ---
        const pewLength = aisleWidth - 2.5; // A bit shorter than the aisle is wide
        const seatDepth = 0.5;
        const seatHeight = 0.5;
        const backHeight = 1.0;
        const numPewsPerSide = 15;
        const pewSpacing = (length - 10) / numPewsPerSide; // Leave space at the front and back
        // --- Material ---
        const woodTexture = state.loader.load(woodTextureUrl);
        const woodMaterial = new THREE.MeshStandardMaterial({
            map: woodTexture,
            roughness: 0.8,
            metalness: 0.1,
        });
        // --- Reusable Pew Model ---
        const createPew = () => {
            const pewGroup = new THREE.Group();
            // Seat
            const seatGeo = new THREE.BoxGeometry(pewLength, seatDepth, 0.1);
            const seat = new THREE.Mesh(seatGeo, woodMaterial);
            seat.rotation.x = Math.PI / 2;
            seat.position.set(0, seatHeight, 0);
            pewGroup.add(seat);
            // Backrest
            const backGeo = new THREE.BoxGeometry(pewLength, backHeight, 0.1);
            const backrest = new THREE.Mesh(backGeo, woodMaterial);
            backrest.position.set(0, seatHeight + backHeight / 2, -seatDepth / 2);
            pewGroup.add(backrest);
            // Side Supports
            const supportHeight = seatHeight + backHeight;
            const supportDepth = seatDepth + 0.1;
            const supportGeo = new THREE.BoxGeometry(0.1, supportHeight, supportDepth);
            const leftSupport = new THREE.Mesh(supportGeo, woodMaterial);
            leftSupport.position.set(-pewLength / 2, supportHeight / 2, -supportDepth / 2 + 0.1);
            const rightSupport = new THREE.Mesh(supportGeo, woodMaterial);
            rightSupport.position.set(pewLength / 2, supportHeight / 2, -supportDepth / 2 + 0.1);
            pewGroup.add(leftSupport, rightSupport);
            pewGroup.traverse(child => {
                if (child.isMesh) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            });
            return pewGroup;
        };
        // --- Place Pews in Aisles ---
        for (let i = 0; i < numPewsPerSide; i++) {
            const z = -length / 2 + 8 + (i * pewSpacing);
            // Left Aisle
            const pewLeft = createPew();
            pewLeft.position.set(-naveWidth / 2 - aisleWidth / 2, 0, z);
            pewLeft.rotation.y = Math.PI; // Turn around 180 degrees
            state.scene.add(pewLeft);
            // Right Aisle
            const pewRight = createPew();
            pewRight.position.set(naveWidth / 2 + aisleWidth / 2, 0, z);
            pewRight.rotation.y = Math.PI; // Turn around 180 degrees
            state.scene.add(pewRight);
        }
    }
 }
 new Pews();
--- a/party-cathedral/src/scene/room-walls.js
+++ b/party-cathedral/src/scene/room-walls.js
@ -0,0 +1,156 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import wallTextureUrl from '/textures/stone_wall.png';
 import sceneFeatureManager from './SceneFeatureManager.js';
 import { SceneFeature } from './SceneFeature.js';
 const length = 40;
 export class RoomWalls extends SceneFeature {
    constructor() {
        super();
        sceneFeatureManager.register(this);
    }
    init() {
    const naveWidth = 12;
    const aisleWidth = 6;
    const totalWidth = naveWidth + 2 * aisleWidth;
    const aisleHeight = 8;
    const naveHeight = 15;
    const roofPeakHeight = 6; // Additional height for the nave's vaulted roof peak
    // --- Pillar and Arch Dimensions ---
    const pillarSize = 1.0;
    const pillarHeight = aisleHeight;
    const numPillars = 5; // Number of pillars along each side
    const pillarSpacing = length / (numPillars + 1);
    // --- Materials and Textures ---
    const wallTexture = state.loader.load(wallTextureUrl);
    wallTexture.wrapS = THREE.RepeatWrapping;
    wallTexture.wrapT = THREE.RepeatWrapping;
    const wallMaterial = new THREE.MeshStandardMaterial({
        map: wallTexture,
        side: THREE.DoubleSide,
        shininess: 5,
        roughness: 0.2,
        metalness: 0.1,
        specular: 0x111111
    });
    // --- Geometry Definitions ---
    const pillarGeo = new THREE.BoxGeometry(pillarSize, pillarHeight, pillarSize);
    // --- Object Creation Functions ---
    const createMesh = (geometry, material, position, rotation = new THREE.Euler()) => {
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.copy(position);
        mesh.rotation.copy(rotation);
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        state.scene.add(mesh);
        return mesh;
    };
    // --- Build the Cathedral ---
    // 1. Back Wall
    const backWallGeo = new THREE.PlaneGeometry(totalWidth, aisleHeight);
    const backWallMat = wallMaterial.clone();
    backWallMat.map = wallTexture.clone();
    backWallMat.map.repeat.set(totalWidth / 4, aisleHeight / 4);
    createMesh(backWallGeo, backWallMat, new THREE.Vector3(0, aisleHeight / 2, -length / 2));
    // 2. Outer Aisle Walls
    const outerWallGeo = new THREE.PlaneGeometry(length, aisleHeight);
    const outerWallMat = wallMaterial.clone();
    outerWallMat.map = wallTexture.clone();
    outerWallMat.map.repeat.set(length / 4, aisleHeight / 4);
    createMesh(outerWallGeo, outerWallMat, new THREE.Vector3(-totalWidth / 2, aisleHeight / 2, 0), new THREE.Euler(0, Math.PI / 2, 0));
    createMesh(outerWallGeo, outerWallMat, new THREE.Vector3(totalWidth / 2, aisleHeight / 2, 0), new THREE.Euler(0, -Math.PI / 2, 0));
    // 3. Aisle Roofs (Flat)
    const aisleRoofGeo = new THREE.PlaneGeometry(aisleWidth, length);
    const aisleRoofMat = wallMaterial.clone();
    aisleRoofMat.map = wallTexture.clone();
    aisleRoofMat.map.repeat.set(aisleWidth / 4, length / 4);
    createMesh(aisleRoofGeo, aisleRoofMat, new THREE.Vector3(-naveWidth / 2 - aisleWidth / 2, aisleHeight, 0), new THREE.Euler(-Math.PI / 2, 0, 0));
    createMesh(aisleRoofGeo, aisleRoofMat, new THREE.Vector3(naveWidth / 2 + aisleWidth / 2, aisleHeight, 0), new THREE.Euler(-Math.PI / 2, 0, 0));
    // 4. Pillars and Arcades
    const arcadeWallHeight = aisleHeight - pillarHeight;
    const arcadeWallGeo = new THREE.PlaneGeometry(pillarSpacing - pillarSize, arcadeWallHeight);
    const arcadeWallMat = wallMaterial.clone();
    arcadeWallMat.map = wallTexture.clone();
    arcadeWallMat.map.repeat.set((pillarSpacing - pillarSize) / 4, arcadeWallHeight / 4);
    for (let i = 0; i <= numPillars; i++) {
        const z = -length / 2 + pillarSpacing * (i + 0.5);
        // Add wall sections between pillars
        if (i <= numPillars) {
            createMesh(arcadeWallGeo, arcadeWallMat, new THREE.Vector3(-naveWidth / 2, pillarHeight + arcadeWallHeight / 2, z));
            createMesh(arcadeWallGeo, arcadeWallMat, new THREE.Vector3(naveWidth / 2, pillarHeight + arcadeWallHeight / 2, z));
        }
        const pillarZ = -length / 2 + pillarSpacing * (i + 1) - pillarSize / 2;
        // Left side pillars
        createMesh(pillarGeo, wallMaterial, new THREE.Vector3(-naveWidth / 2 - pillarSize, pillarHeight / 2, pillarZ));
            // Right side pillars
        createMesh(pillarGeo, wallMaterial, new THREE.Vector3(naveWidth / 2 + pillarSize, pillarHeight / 2, pillarZ));
        }
    // 5. Clerestory (Upper Nave Walls)
    const clerestoryHeight = naveHeight - aisleHeight;
    const clerestoryGeo = new THREE.PlaneGeometry(length, clerestoryHeight);
    const clerestoryMat = wallMaterial.clone();
    clerestoryMat.map = wallTexture.clone();
    clerestoryMat.map.repeat.set(length / 4, clerestoryHeight / 4);
        // Left and Right Clerestory walls
    createMesh(clerestoryGeo, clerestoryMat, new THREE.Vector3(-naveWidth / 2, aisleHeight + clerestoryHeight / 2, 0), new THREE.Euler(0, - Math.PI / 2, 0));
    createMesh(clerestoryGeo, clerestoryMat, new THREE.Vector3(naveWidth / 2, aisleHeight + clerestoryHeight / 2, 0), new THREE.Euler(0, Math.PI/2, 0));
    // Upper part of the back wall (for the nave)
    const backClerestoryGeo = new THREE.PlaneGeometry(naveWidth, clerestoryHeight);
    const backClerestoryMat = wallMaterial.clone();
    backClerestoryMat.map = wallTexture.clone();
    backClerestoryMat.map.repeat.set(naveWidth / 4, clerestoryHeight / 4);
    createMesh(backClerestoryGeo, backClerestoryMat, new THREE.Vector3(0, aisleHeight + clerestoryHeight / 2, -length / 2));
    // 6. Nave's Vaulted Roof
    const roofPanelWidth = Math.sqrt(Math.pow(naveWidth / 2, 2) + Math.pow(roofPeakHeight, 2));
    const roofAngle = Math.atan2(roofPeakHeight, naveWidth / 2);
    const roofGeo = new THREE.PlaneGeometry(roofPanelWidth, length); // Swapped width and length
    const roofMat = wallMaterial.clone();
    roofMat.map = wallTexture.clone();
    roofMat.map.repeat.set(roofPanelWidth / 4, length / 4);
    // Left and Right roof panels
    createMesh(roofGeo, roofMat,
        new THREE.Vector3(-naveWidth / 4, naveHeight + roofPeakHeight / 2, 0),
        new THREE.Euler(Math.PI / 2, roofAngle, 0) // Flipped the roof right side up
    );
    createMesh(roofGeo, roofMat,
        new THREE.Vector3(naveWidth / 4, naveHeight + roofPeakHeight / 2, 0),
        new THREE.Euler(Math.PI / 2, -roofAngle, 0) // Flipped the roof right side up
    );
    // 7. Back gable wall (triangle part)
    const gableShape = new THREE.Shape();
    gableShape.moveTo(-naveWidth / 2, naveHeight);
    gableShape.lineTo(naveWidth / 2, naveHeight);
    gableShape.lineTo(0, naveHeight + roofPeakHeight);
    const gableGeo = new THREE.ShapeGeometry(gableShape);
    const gableMat = wallMaterial.clone();
    gableMat.map = wallTexture.clone();
    gableMat.map.repeat.set(naveWidth / 8, roofPeakHeight / 8);
    createMesh(gableGeo, gableMat, new THREE.Vector3(0, 0, -length / 2));
        // Note: crawlSurfaces and landingSurfaces might need to be updated if spiders/rats are used.
    }
    update(deltaTime) {
    // Add any per-frame update logic here, if needed
    }
 }
 new RoomWalls();
--- a/party-cathedral/src/scene/root.js
+++ b/party-cathedral/src/scene/root.js
@ -0,0 +1,42 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import floorTextureUrl from '/textures/stone_floor.png';
 import sceneFeatureManager from './SceneFeatureManager.js';
 // Scene Features registered here:
 import { RoomWalls } from './room-walls.js';
 import { LightBall } from './light-ball.js';
 import { Pews } from './pews.js';
 import { Stage } from './stage.js';
 import { MedievalMusicians } from './medieval-musicians.js';
 // Scene Features ^^^
 // --- Scene Modeling Function ---
 export function createSceneObjects() {
    sceneFeatureManager.init();
    // --- Materials (MeshPhongMaterial) ---
    // --- 1. Floor --- (Resized to match the new cathedral dimensions)
    const floorWidth = 24;
    const floorLength = 40;
    const floorGeometry = new THREE.PlaneGeometry(floorWidth, floorLength);
    const floorTexture = state.loader.load(floorTextureUrl);
    floorTexture.wrapS = THREE.RepeatWrapping;
    floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(floorWidth / 2, floorLength / 2); // Adjust texture repeat for new size
    const floorMaterial = new THREE.MeshPhongMaterial({ map: floorTexture, color: 0xaaaaaa, shininess: 5 }); 
    const floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.rotation.x = -Math.PI / 2;
    floor.position.y = 0;
    floor.receiveShadow = true; 
    state.scene.add(floor);
    // 3. Lighting (Minimal and focused)
    const ambientLight = new THREE.AmbientLight(0x606060, 0.1); // Increased ambient light for a larger space
    state.scene.add(ambientLight);
    // Add a HemisphereLight for more natural, general illumination in a large space.
    const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.2);
    state.scene.add(hemisphereLight);
 }
--- a/party-cathedral/src/scene/stage.js
+++ b/party-cathedral/src/scene/stage.js
@ -0,0 +1,44 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
 import woodTextureUrl from '/textures/wood.png';
 export class Stage extends SceneFeature {
    constructor() {
        super();
        sceneFeatureManager.register(this);
    }
    init() {
        // --- Dimensions from room-walls.js for positioning ---
        const length = 40;
        const naveWidth = 12;
        // --- Stage Properties ---
        const stageWidth = naveWidth - 1; // Slightly narrower than the nave
        const stageHeight = 1.5;
        const stageDepth = 5;
        // --- Material ---
        const woodTexture = state.loader.load(woodTextureUrl);
        woodTexture.wrapS = THREE.RepeatWrapping;
        woodTexture.wrapT = THREE.RepeatWrapping;
        woodTexture.repeat.set(stageWidth / 2, stageDepth / 2);
        const woodMaterial = new THREE.MeshStandardMaterial({
            map: woodTexture,
            roughness: 0.8,
            metalness: 0.1,
        });
        // --- Create Stage Mesh ---
        const stageGeo = new THREE.BoxGeometry(stageWidth, stageHeight, stageDepth);
        const stageMesh = new THREE.Mesh(stageGeo, woodMaterial);
        stageMesh.castShadow = true;
        stageMesh.receiveShadow = true;
        stageMesh.position.set(0, stageHeight / 2, -length / 2 + stageDepth / 2);
        state.scene.add(stageMesh);
    }
 }
 new Stage();
--- a/party-cathedral/src/scene/stained-glass-window.js
+++ b/party-cathedral/src/scene/stained-glass-window.js
@ -0,0 +1,147 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
 export class StainedGlass extends SceneFeature {
    constructor() {
        super();
        this.windows = [];
        sceneFeatureManager.register(this);
    }
    init() {
        // --- Dimensions from room-walls.js for positioning ---
        const length = 40;
        const naveWidth = 12;
        const aisleWidth = 6;
        const totalWidth = naveWidth + 2 * aisleWidth;
        const aisleHeight = 8;
        // --- Window Properties ---
        const windowWidth = 3;
        const windowBaseHeight = 5;
        const windowArchHeight = 1.5;
        const numWindowsPerSide = 4;
        const windowSpacing = length / numWindowsPerSide;
        // --- Procedural Material ---
        const material = new THREE.MeshStandardMaterial({
            vertexColors: true, // Use colors assigned to vertices
            side: THREE.DoubleSide,
            metalness: 0.1, // Glass is not very metallic
            roughness: 0.3, // Glass is smooth
            clearcoat: 1.0,
            emissive: 0x000000, // We will control emissiveness via update
        });
        // --- Procedural Geometry Generation ---
        const createProceduralWindowGeometry = () => {
            const segmentsX = 8;
            const segmentsY = 12;
            const vertices = [];
            const colors = [];
            const normals = [];
            const colorPalette = [
                new THREE.Color(0x6A0DAD), // Purple
                new THREE.Color(0x00008B), // Dark Blue
                new THREE.Color(0xB22222), // Firebrick Red
                new THREE.Color(0xFFD700), // Gold
                new THREE.Color(0x006400), // Dark Green
                new THREE.Color(0x8B0000), // Dark Red
                new THREE.Color(0x4B0082), // Indigo
            ];
            const randomnessFactor = 0.4; // How much to vary the normals
            const addTriangle = (v1, v2, v3) => {
                const color = colorPalette[Math.floor(Math.random() * colorPalette.length)];
                vertices.push(v1.x, v1.y, v1.z, v2.x, v2.y, v2.z, v3.x, v3.y, v3.z);
                colors.push(color.r, color.g, color.b, color.r, color.g, color.b, color.r, color.g, color.b);
                // Calculate the base normal for the flat triangle face
                const edge1 = new THREE.Vector3().subVectors(v2, v1);
                const edge2 = new THREE.Vector3().subVectors(v3, v1);
                const faceNormal = new THREE.Vector3().crossVectors(edge1, edge2).normalize();
                // Introduce a random vector to alter the normal
                const randomVec = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
                faceNormal.add(randomVec.multiplyScalar(randomnessFactor)).normalize();
                // Apply the same randomized normal to all 3 vertices for a faceted look
                normals.push(faceNormal.x, faceNormal.y, faceNormal.z, faceNormal.x, faceNormal.y, faceNormal.z, faceNormal.x, faceNormal.y, faceNormal.z);
            };
            // Create rectangular part
            for (let i = 0; i < segmentsX; i++) {
                for (let j = 0; j < segmentsY; j++) {
                    const x = -windowWidth / 2 + (i * windowWidth) / segmentsX;
                    const y = (j * windowBaseHeight) / segmentsY;
                    const x2 = x + windowWidth / segmentsX;
                    const y2 = y + windowBaseHeight / segmentsY;
                    const v1 = new THREE.Vector3(x, y, 0);
                    const v2 = new THREE.Vector3(x2, y, 0);
                    const v3 = new THREE.Vector3(x, y2, 0);
                    const v4 = new THREE.Vector3(x2, y2, 0);
                    addTriangle(v1, v2, v3);
                    addTriangle(v2, v4, v3);
                }
            }
            // Create arch part
            const archCenter = new THREE.Vector3(0, windowBaseHeight, 0);
            for (let i = 0; i < segmentsX * 2; i++) {
                const angle1 = (i / (segmentsX * 2)) * Math.PI;
                const angle2 = ((i + 1) / (segmentsX * 2)) * Math.PI;
                const v1 = archCenter;
                const v2 = new THREE.Vector3(Math.cos(angle1) * -windowWidth / 2, Math.sin(angle1) * windowArchHeight + windowBaseHeight, 0);
                const v3 = new THREE.Vector3(Math.cos(angle2) * -windowWidth / 2, Math.sin(angle2) * windowArchHeight + windowBaseHeight, 0);
                addTriangle(v1, v2, v3);
            }
            const geometry = new THREE.BufferGeometry();
            geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
            geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
            geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
            return geometry;
        };
        // --- Create and Place Windows ---
        const createAndPlaceWindow = (position, rotationY) => {
            const geometry = createProceduralWindowGeometry(); // Generate unique geometry for each window
            const windowMesh = new THREE.Mesh(geometry, material);
            windowMesh.position.copy(position);
            windowMesh.rotation.y = rotationY;
            state.scene.add(windowMesh);
            this.windows.push(windowMesh);
        };
        for (let i = 0; i < numWindowsPerSide; i++) {
            const z = -length / 2 + windowSpacing * (i + 0.5);
            const y = 0; // Place them starting from the floor
            // Left side
            createAndPlaceWindow(new THREE.Vector3(-totalWidth / 2 + 0.01, y, z), Math.PI / 2);
            // Right side
            createAndPlaceWindow(new THREE.Vector3(totalWidth / 2 - 0.01, y, z), -Math.PI / 2);
        }
    }
    update(deltaTime) {
        // Add a subtle pulsing glow to the windows
        const pulseSpeed = 0.5;
        const minIntensity = 0.5;
        const maxIntensity = 0.9;
        const intensity = minIntensity + (maxIntensity - minIntensity) * (0.5 * (1 + Math.sin(state.clock.getElapsedTime() * pulseSpeed)));
        // To make the glow match the vertex colors, we set the emissive color to white
        // and modulate its intensity. The final glow color will be vertexColor * emissive * emissiveIntensity.
        this.windows.forEach(w => {
            w.material.emissiveIntensity = intensity;
        });
    }
 }
 new StainedGlass();
--- a/party-cathedral/src/scene/table.js
+++ b/party-cathedral/src/scene/table.js
@ -0,0 +1,47 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import tableTextureUrl from '/textures/wood.png';
 export function createTable(x, y, z, rotY) {
    const woodMaterial = new THREE.MeshPhongMaterial({
        map: state.loader.load(tableTextureUrl),
        shininess: 10,
        specular: 0x222222
    });
    const tableTopGeo = new THREE.BoxGeometry(1.5, 0.1, 0.8);
    const tableTop = new THREE.Mesh(tableTopGeo, woodMaterial);
    tableTop.position.y = 0.5;
    tableTop.castShadow = true;
    tableTop.receiveShadow = true;
    // Table Legs
    const legThickness = 0.1;
    const legHeight = 0.5; // Same height as tableTop.position.y
    const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
    const legOffset = (1.5 / 2) - (legThickness * 1.5); // Half table width - some margin
    const depthOffset = (0.8 / 2) - (legThickness * 1.5); // Half table depth - some margin
    const createLeg = (lx, lz) => {
        const leg = new THREE.Mesh(legGeometry, woodMaterial);
        leg.position.set(lx, legHeight / 2, lz);
        leg.castShadow = true;
        leg.receiveShadow = true;
        return leg;
    };
    const table = new THREE.Group();
    table.add(tableTop);
    // Add the four legs
    table.add(createLeg(-legOffset, depthOffset));
    table.add(createLeg(legOffset, depthOffset));
    table.add(createLeg(-legOffset, -depthOffset));
    table.add(createLeg(legOffset, -depthOffset));
    table.position.set(x, y, z);
    table.rotation.y = rotY;
    state.scene.add(table);
    return table;
 }
--- a/party-cathedral/src/shaders/fire-shaders.js
+++ b/party-cathedral/src/shaders/fire-shaders.js
@ -0,0 +1,63 @@
 export const fireVertexShader = `
 varying vec2 vUv;
 void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }
 `;
 export const fireFragmentShader = `
 varying vec2 vUv;
 uniform float u_time;
 // 2D Random function
 float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
 }
 // 2D Noise function
 float noise (in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));
    vec2 u = f*f*(3.0-2.0*f);
    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
 }
 // Fractional Brownian Motion to create more complex noise
 float fbm(in vec2 st) {
    float value = 0.0;
    float amplitude = 0.5;
    float frequency = 0.0;
    for (int i = 0; i < 4; i++) {
        value += amplitude * noise(st);
        st *= 2.0;
        amplitude *= 0.5;
    }
    return value;
 }
 void main() {
    vec2 uv = vUv;
    float q = fbm(uv * 2.0 - vec2(0.0, u_time * 1.2));
    float r = fbm(uv * 2.0 + q + vec2(1.7, 9.2) + vec2(0.0, u_time * -0.3));
    float fireAmount = fbm(uv * 2.0 + r + vec2(0.0, u_time * 0.15));
    // Shape the fire to rise from the bottom
    fireAmount *= (1.0 - uv.y);
    vec3 fireColor = mix(vec3(0.9, 0.3, 0.1), vec3(1.0, 0.9, 0.3), fireAmount);
    gl_FragColor = vec4(fireColor, fireAmount * 2.0);
 }
 `;
--- a/party-cathedral/src/shaders/screen-shaders.js
+++ b/party-cathedral/src/shaders/screen-shaders.js
@ -0,0 +1,94 @@
 export const screenVertexShader = `
 varying vec2 vUv;
 void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }
 `;
 export const screenFragmentShader = `
 varying vec2 vUv;
 uniform sampler2D videoTexture;
 uniform float u_effect_type;     // 0: none, 1: warmup, 2: powerdown
 uniform float u_effect_strength; // 0.0 to 1.0
 uniform float u_time;
 // 2D Random function
 float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
 }
 // 2D Noise function
 float noise (vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));
    vec2 u = f*f*(3.0-2.0*f);
    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
 } 
 void main() {
    vec4 finalColor;
    // Shimmering edge effect - ALWAYS ON
    vec4 videoColor = texture2D(videoTexture, vUv);
    // Shimmering edge effect
    float dist = distance(vUv, vec2(0.5));
    float shimmer = noise(vUv * 20.0 + vec2(u_time * 2.0, 0.0));
    float edgeFactor = smoothstep(0.3, 0.5, dist);
    vec3 shimmerColor = vec3(0.7, 0.8, 1.0) * shimmer * edgeFactor * 0.5;
    vec4 baseColor = vec4(videoColor.rgb + shimmerColor, videoColor.a);
    if (u_effect_type < 0.9) {
        //  normal video
        finalColor = baseColor;
    } else if (u_effect_type < 1.9) { // "Summon Vision" (Warm-up) effect
        // This is now a multi-stage effect controlled by u_effect_strength (0.0 -> 1.0)
        float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * -125.0));
        vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
        vec4 videoColor = texture2D(videoTexture, vUv);
        // Stage 1: Fade in the mist (u_effect_strength: 0.0 -> 0.5)
        // The overall opacity of the surface fades from 0 to 1.
        float fadeInOpacity = smoothstep(0.0, 0.5, u_effect_strength);
        // Stage 2: Fade out the mist to reveal the video (u_effect_strength: 0.5 -> 1.0)
        // The mix factor between mist and video goes from 0 (all mist) to 1 (all video).
        float revealMix = smoothstep(0.5, 1.0, u_effect_strength);
        vec3 mixedColor = mix(mistColor, baseColor.rgb, revealMix);
        finalColor = vec4(mixedColor, fadeInOpacity);
    } else { // "Vision Fades" (Power-down) effect
        // Multi-stage effect: Last frame -> fade to mist -> fade to transparent
        float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * 123.0));
        vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
        vec4 videoColor = texture2D(videoTexture, vUv);
        // Stage 1: Fade in the mist over the last frame (u_effect_strength: 0.0 -> 0.5)
        float mistMix = smoothstep(0.0, 0.5, u_effect_strength);
        vec3 mixedColor = mix(baseColor.rgb, mistColor, mistMix);
        // Stage 2: Fade out the entire surface to transparent (u_effect_strength: 0.5 -> 1.0)
        float fadeOutOpacity = smoothstep(1.0, 0.5, u_effect_strength);
        finalColor = vec4(mixedColor, fadeOutOpacity);
    }
    gl_FragColor = finalColor;
 }
 `;
--- a/party-cathedral/src/state.js
+++ b/party-cathedral/src/state.js
@ -0,0 +1,54 @@
 import * as THREE from 'three';
 export let state = undefined;
 export function initState() {
    state = {
    // Core Three.js components
    scene: null,
    camera: null,
    renderer: null,
    clock: new THREE.Clock(),
    tvScreen: null,
    tvScreenPowered: false,
    videoTexture: null,
    screenLight: null, // Light from the crystal ball
    candleLight: null, // Light from the candle
    effectsManager: null,
    screenEffect: {
        active: false,
        type: 0,
        startTime: 0,
        duration: 1000, // in ms
        onComplete: null,
        easing: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t, // easeInOutQuad
    },
    // Video Playback
    isVideoLoaded: false,
    videoUrls: [],
    currentVideoIndex: -1,
    // Scene constants
    originalLampIntensity: 0.3,
    originalScreenIntensity: 0.2,
    screenIntensityPulse: 0.2,
    roomSize: 5,
    roomHeight: 3,
    debugLight: false,
    // DOM Elements
    container: document.body,
    videoElement: document.getElementById('video'),
    fileInput: document.getElementById('fileInput'),
    loadTapeButton: document.getElementById('loadTapeButton'),
    // Utilities
    loader: new THREE.TextureLoader(),
    pictureFrames: [],
    raycaster: new THREE.Raycaster(),
    seed: 12345,
    };
 }
--- a/party-cathedral/src/utils.js
+++ b/party-cathedral/src/utils.js
@ -0,0 +1,37 @@
 import * as THREE from 'three';
 import { state } from './state.js';
 // --- Utility: Random Color (seeded) ---
 export function getRandomColor() {
    const hue = seededRandom();
    const saturation = 0.6 + seededRandom() * 0.4; 
    const lightness = 0.3 + seededRandom() * 0.4; 
    return new THREE.Color().setHSL(hue, saturation, lightness).getHex();
 }
 /**
 * Converts degrees to radians.
 * @param {number} degrees
 * @returns {number}
 */
 export function degToRad(degrees) {
    return degrees * (Math.PI / 180);
 }
 // --- Seedable Random Number Generator (Mulberry32) ---
 export function seededRandom() {
    let t = state.seed += 0x6D2B79F5;
    t = Math.imul(t ^ t >>> 15, t | 1);
    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
 }
 // --- Helper function to format seconds into MM:SS ---
 export function formatTime(seconds) {
    if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '--:--';
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = Math.floor(seconds % 60);
    const paddedMinutes = String(minutes).padStart(2, '0');
    const paddedSeconds = String(remainingSeconds).padStart(2, '0');
    return `${paddedMinutes}:${paddedSeconds}`;
 }
--- a/party-cathedral/textures/floor.jpg
+++ b/party-cathedral/textures/floor.jpg
--- a/party-cathedral/textures/musician1.png
+++ b/party-cathedral/textures/musician1.png
--- a/party-cathedral/textures/stone_floor.png
+++ b/party-cathedral/textures/stone_floor.png
--- a/party-cathedral/textures/stone_wall.png
+++ b/party-cathedral/textures/stone_wall.png
--- a/party-cathedral/textures/wall.jpg
+++ b/party-cathedral/textures/wall.jpg
--- a/party-cathedral/textures/wood.png
+++ b/party-cathedral/textures/wood.png
--- a/party-cathedral/vendor/tailwind-3.4.17.js
+++ b/party-cathedral/vendor/tailwind-3.4.17.js
--- a/party-cathedral/vendor/three.min.js
+++ b/party-cathedral/vendor/three.min.js
Author	SHA1	Message	Date
Dejvino	4726b419f4	Feature: musicians dancing and jumping from stage to floor	2025-11-21 21:35:10 +01:00
Dejvino	47e11a497c	Feature: medieval musicians	2025-11-21 20:38:37 +01:00
Dejvino	a5548d8044	Feature: pews	2025-11-21 20:04:43 +01:00
Dejvino	3b97978a50	Feature: glass windows	2025-11-21 20:00:24 +01:00
Dejvino	bc961119b6	Refactor: SceneFeature+Manager	2025-11-21 19:39:37 +01:00
Dejvino	1d4e428bf9	New project: Party cathedral	2025-11-21 19:32:22 +01:00
Dejvino	c962f74067	Tweak: fireplace mantel and rat hole size	2025-11-20 22:32:01 +01:00
		`@ -0,0 +1,3 @@`
							`#!/usr/bin/env bash`

							`nix-shell -p nodejs --run "npx vite build && npx vite preview"`
		`@ -0,0 +1,3 @@`
							`#!/usr/bin/env bash`

							`nix-shell -p nodejs --run "npx vite"`