Remove debug log from useWallClassification and update dependencies in WallCreator effect

app/src/modules/builder/wall/Instances/instance/helpers/useWallClassification.ts

@@ -120,7 +120,6 @@ export function useWallClassification(walls: Walls) {
             }
         });
 
-        console.log('rooms: ', rooms);
         return rooms;
     };
 

app/src/modules/builder/wall/Instances/wallInstances.tsx

@@ -1,15 +1,22 @@
 import React, { useEffect, useMemo } from 'react';
+import { DoubleSide, RepeatWrapping, Shape, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from 'three';
+import { Geometry } from '@react-three/csg';
+import { Html, Extrude } from '@react-three/drei';
 import { useWallStore } from '../../../../store/builder/useWallStore'
-import WallInstance from './instance/wallInstance';
+import { useWallClassification } from './instance/helpers/useWallClassification';
+import { useToggleView } from '../../../../store/builder/store';
 import Line from '../../line/line';
 import Point from '../../point/point';
-import { useToggleView } from '../../../../store/builder/store';
-import { Geometry } from '@react-three/csg';
-import { Vector3 } from 'three';
-import { Html } from '@react-three/drei';
+import WallInstance from './instance/wallInstance';
+import * as Constants from '../../../../types/world/worldConstants';
+
+import texturePath from "../../../../assets/textures/floor/white.png";
+import texturePathDark from "../../../../assets/textures/floor/black.png";
+import { useLoader } from '@react-three/fiber';
 
 function WallInstances() {
     const { walls } = useWallStore();
+    const { rooms } = useWallClassification(walls)
     const { toggleView } = useToggleView();
 
     useEffect(() => {
@@ -34,8 +41,8 @@ function WallInstances() {
 
     return (
         <>
-
             {!toggleView && (
+                <>
                     <mesh name='Walls-Group'>
                         <Geometry useGroups>
                             {walls.map((wall) => (
@@ -43,6 +50,13 @@ function WallInstances() {
                             ))}
                         </Geometry>
                     </mesh>
+
+                    <group name='Wall-Floors-Group'>
+                        {rooms.map((room, index) => (
+                            <Floor key={index} room={room} />
+                        ))}
+                    </group>
+                </>
             )}
 
             {toggleView && (
@@ -97,4 +111,36 @@ function WallInstances() {
     )
 }
 
-export default WallInstances
+export default WallInstances;
+
+function Floor({ room }: { room: Point[] }) {
+    const savedTheme: string | null = localStorage.getItem('theme');
+    const textureScale = Constants.floorConfig.textureScale;
+    const floorTexture = useLoader(TextureLoader, savedTheme === "dark" ? texturePathDark : texturePath);
+    floorTexture.wrapS = floorTexture.wrapT = RepeatWrapping;
+    floorTexture.repeat.set(textureScale, textureScale);
+    floorTexture.colorSpace = SRGBColorSpace;
+
+    const shape = useMemo(() => {
+        const shape = new Shape();
+        const points = room.map(p => new Vector2(p.position[0], p.position[2]));
+        if (points.length < 3) return null;
+        shape.moveTo(points[0].x, points[0].y);
+        points.forEach((pt) => { shape.lineTo(pt.x, pt.y); });
+        return shape;
+    }, [room]);
+
+    if (!shape) return null;
+
+    return (
+        <group name="Wall-Floor" rotation={[Math.PI / 2, 0, 0]}>
+            <Extrude
+                args={[shape, { depth: Constants.floorConfig.height, bevelEnabled: false }]}
+                position={[0, 0, 0]}
+                receiveShadow
+            >
+                <meshStandardMaterial color={Constants.floorConfig.defaultColor} map={floorTexture} side={DoubleSide} />
+            </Extrude>
+        </group>
+    );
+}

app/src/modules/builder/wall/wallCreator/wallCreator.tsx

@@ -243,7 +243,7 @@ function WallCreator() {
             canvasElement.removeEventListener("click", onMouseClick);
             canvasElement.removeEventListener("contextmenu", onContext);
         };
-    }, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addWall, getWallPointById, snappedPosition, snappedPoint]);
+    }, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addWall, getWallPointById, wallThickness, wallHeight, insideMaterial, outsideMaterial, snappedPosition, snappedPoint]);
 
     return (
         <>