From 4feeab53de3095389685570f7bf1e5f4d5162564 Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Tue, 30 Dec 2025 22:22:00 +0000
Subject: [PATCH] Feature: repro wall surrounding the stage

---
 party-stage/src/scene/repro-wall.js | 72 +++++++++++++++--------------
 party-stage/src/scene/root.js       |  2 +-
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/party-stage/src/scene/repro-wall.js b/party-stage/src/scene/repro-wall.js
index 9d501fd..467fcc8 100644
--- a/party-stage/src/scene/repro-wall.js
+++ b/party-stage/src/scene/repro-wall.js
@@ -11,63 +11,67 @@ export class ReproWall extends SceneFeature {
     }
 
     init() {
-        const boxSize = 1.2;
-        const geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
+        const boxSize = 2.6;
+        const boxStacks = 3;
+        const startZ = -20;
+        const endZ = -18;
+        const leftX = -8;
+        const rightX = 8;
+
+        const cabinetGeometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
         
         const cabinetMaterial = new THREE.MeshStandardMaterial({
             color: 0x333333,
             roughness: 0.6,
             metalness: 0.2,
         });
-
-        const meshMaterial = new THREE.MeshStandardMaterial({
-            color: 0x050505,
+ 
+        const grilleSize = boxSize * 0.85;
+        const grilleGeometry = new THREE.PlaneGeometry(grilleSize, grilleSize);
+        const grilleMaterial = new THREE.MeshStandardMaterial({
+            color: 0x1a1a1a, // Not completely dark so the mesh is visible
             roughness: 0.9,
             metalness: 0.1,
         });
 
-        const materials = [
-            cabinetMaterial, cabinetMaterial, cabinetMaterial, 
-            cabinetMaterial, meshMaterial, cabinetMaterial
-        ];
-
         // Helper to create a stack of boxes
-        const createStack = (baseX, baseZ) => {
-            const stackHeight = 3 + Math.floor(Math.random() * 4); // 3 to 6 boxes high
+        const createStack = (baseX, baseZ, rotY) => {
+            const stackHeight = 4// + Math.floor(Math.random() * 2);
             for (let i = 0; i < stackHeight; i++) {
-                const box = new THREE.Mesh(geometry, materials);
+                const speakerGroup = new THREE.Group();
+
+                const cabinet = new THREE.Mesh(cabinetGeometry, cabinetMaterial);
+                cabinet.castShadow = true;
+                cabinet.receiveShadow = true;
+                speakerGroup.add(cabinet);
+
+                const grille = new THREE.Mesh(grilleGeometry, grilleMaterial);
+                grille.position.z = (boxSize / 2) + 0.01; // Place on front face, slightly forward
+                grille.receiveShadow = true;
+                speakerGroup.add(grille);
+
                 // Slight random offset for realism
                 const x = baseX + (Math.random() * 0.1 - 0.05);
-                const z = baseZ + (Math.random() * 0.1 - 0.05);
+                const z = baseZ + (Math.random() * 0.4 - 0.05);
                 const y = (i * boxSize) + (boxSize / 2);
                 
-                box.position.set(x, y, z);
+                speakerGroup.position.set(x, y, z);
                 
                 // Slight random rotation
-                box.rotation.y = (Math.random() * 0.1 - 0.05);
-                
-                box.castShadow = true;
-                box.receiveShadow = true;
+                speakerGroup.rotation.y = rotY + (Math.random() * 0.1 - 0.05);
 
-                state.scene.add(box);
-                this.boxes.push({ mesh: box, originalScale: new THREE.Vector3(1, 1, 1) });
+                state.scene.add(speakerGroup);
+                this.boxes.push({ mesh: speakerGroup, originalScale: new THREE.Vector3(1, 1, 1) });
             }
         };
 
         // Create walls on both sides of the stage
-        const startZ = -20;
-        const endZ = -18;
-        const leftX = -8;
-        const rightX = 8;
-
-        for (let z = startZ; z <= endZ; z += boxSize) {
-            // Left side wall (2 layers deep)
-            createStack(leftX, z);
-            createStack(leftX - boxSize, z);
-
-            // Right side wall (2 layers deep)
-            createStack(rightX, z);
-            createStack(rightX + boxSize, z);
+        const z = startZ;
+        for (let x = 0; x <= boxStacks * boxSize; x += boxSize) {
+            // left side
+            createStack(leftX - x, z + x / 2, 0.3);
+            // right side
+            createStack(rightX + x, z + x / 2, -0.3);
         }
     }
 
diff --git a/party-stage/src/scene/root.js b/party-stage/src/scene/root.js
index 30bbc83..a0f93a0 100644
--- a/party-stage/src/scene/root.js
+++ b/party-stage/src/scene/root.js
@@ -42,7 +42,7 @@ export function createSceneObjects() {
     state.scene.add(floor);
 
     // 3. Lighting (Minimal and focused)
-    const ambientLight = new THREE.AmbientLight(0x606060, 0.2); // Increased ambient light for a larger space
+    const ambientLight = new THREE.AmbientLight(0x606060, 1.0); // Increased ambient light for a larger space
     state.scene.add(ambientLight);
 
     // Add a HemisphereLight for more natural, general illumination in a large space.