Added Tom's wall models

next add them in Playerchain demo

src/App.css

@@ -236,6 +236,22 @@ canvas {
   background-color: #c82333;
 }
 
+.row .flip-button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.row .flip-button:hover {
+  background-color: #0056b3;
+}
+
 .overlay {
   position: absolute;
   top: 10px;

src/App.tsx

@@ -11,6 +11,7 @@ import ExportLevel from "./ExportLevel";
 import ImportExportLines from "./ImportExportLines";
 import SpawnRadius from "./SpawnRadius";
 import hamburger from "./assets/hamburger.mp3";
+import CalcWallModels from "./CalcWallModels";
 import * as THREE from "three";
 
 function App() {
@@ -61,6 +62,12 @@ function App() {
     setLines((prevLines) => prevLines.filter((_, i) => i !== index));
   };
 
+  const flipLine = (index: number) => {
+    setLines((prevLines) =>
+      prevLines.map((line, i) => (i === index ? line.slice().reverse() : line))
+    );
+  };
+
   const undoLastPoint = useCallback(() => {
     if (isDrawingLine && currentLine.length > 0) {
       setCurrentLine((prev) => prev.slice(0, -1));
@@ -134,12 +141,12 @@ function App() {
     const mirroredLines: THREE.Vector3[][] = [];
 
     lines.forEach((line) => {
-      const mirroredLineX = line.map(
-        (point) => new THREE.Vector3(-point.x, point.y, point.z)
-      );
-      const mirroredLineY = line.map(
-        (point) => new THREE.Vector3(point.x, -point.y, point.z)
-      );
+      const mirroredLineX = line
+        .map((point) => new THREE.Vector3(-point.x, point.y, point.z))
+        .reverse();
+      const mirroredLineY = line
+        .map((point) => new THREE.Vector3(point.x, -point.y, point.z))
+        .reverse();
       const mirroredLineXY = line.map(
         (point) => new THREE.Vector3(-point.x, -point.y, point.z)
       );
@@ -173,6 +180,9 @@ function App() {
               onMouseLeave={() => setHoveredLineIndex(null)}
             >
               <span>Line {index + 1}</span>
+              <button className="flip-button" onClick={() => flipLine(index)}>
+                Flip
+              </button>
               <button
                 className="delete-button"
                 onClick={() => deleteLine(index)}
@@ -268,6 +278,7 @@ function App() {
               key={index}
               points={linePoints}
               color={hoveredLineIndex === index ? "yellow" : "white"}
+              width={hoveredLineIndex === index ? 20 : 5}
             />
           ))}
           {mirrorAllQuadrants &&
@@ -284,16 +295,21 @@ function App() {
                     ? "green"
                     : "blue"
                 }
+                width={hoveredLineIndex === index && index % 4 === 0 ? 10 : 5}
               />
             ))}
           {isDrawingLine && currentLine.length > 0 && (
             <LineRenderer
               points={[...currentLine, new THREE.Vector3(...mouseWorldPos)]}
               color="grey"
+              width={5}
             />
           )}
           <ReferenceShip />
           <SpawnRadius radius={radius} />
+          <CalcWallModels
+            lines={mirrorAllQuadrants ? getMirroredLinesAllQuadrants() : lines}
+          />
         </Canvas>
         <Overlay
           mouseWorldPos={mouseWorldPos}

src/CalcWallModels.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { useGLTF } from "@react-three/drei";
+import wall_mediumGLTF from "./assets/walls/wall_medium2.glb?url";
+import wall_largeGLTF from "./assets/walls/wall_large2.glb?url";
+import wall_cornerMediumGLTF from "./assets/walls/wall_cornerMedium2.glb?url";
+
+interface CalcWallModelsProps {
+  lines: THREE.Vector3[][];
+}
+
+const CalcWallModels: React.FC<CalcWallModelsProps> = ({ lines }) => {
+  const { scene: wallMedium } = useGLTF(wall_mediumGLTF);
+  const { scene: wallLarge } = useGLTF(wall_largeGLTF);
+  const { scene: wallCornerMedium } = useGLTF(wall_cornerMediumGLTF);
+  const groupRef = useRef<THREE.Group>(null);
+
+  useEffect(() => {
+    calculateWalls();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lines]);
+
+  const calculateWalls = () => {
+    // Clear previous walls
+    if (groupRef.current) {
+      groupRef.current.clear();
+    }
+
+    lines.forEach((line) => {
+      for (let i = 0; i < line.length - 1; i++) {
+        const start = new THREE.Vector3(...line[i]);
+        const end = new THREE.Vector3(...line[i + 1]);
+
+        const distance = start.distanceTo(end);
+        const rotation = Math.atan2(end.y - start.y, end.x - start.x);
+        const isDiagonal =
+          Math.abs(end.x - start.x) === Math.abs(end.y - start.y);
+
+        if (isDiagonal) {
+          // Place a corner wall
+          placeWall(wallCornerMedium, start, rotation + Math.PI / 4); // Adjust for corner wall orientation
+        } else {
+          let remainingDistance = distance;
+          const currentPosition = start.clone();
+
+          while (remainingDistance > 0) {
+            if (remainingDistance >= 20) {
+              // Place a large wall
+              placeWall(wallLarge, currentPosition, rotation + Math.PI / 2);
+              currentPosition.add(
+                new THREE.Vector3(
+                  20 * Math.cos(rotation),
+                  20 * Math.sin(rotation),
+                  0
+                )
+              );
+              remainingDistance -= 20;
+            } else if (remainingDistance >= 10) {
+              // Place a medium wall
+              placeWall(wallMedium, currentPosition, rotation + Math.PI / 2);
+              currentPosition.add(
+                new THREE.Vector3(
+                  10 * Math.cos(rotation),
+                  10 * Math.sin(rotation),
+                  0
+                )
+              );
+              remainingDistance -= 10;
+            }
+          }
+        }
+      }
+    });
+  };
+
+  const placeWall = (
+    wall: THREE.Object3D,
+    position: THREE.Vector3,
+    rotation: number
+  ) => {
+    const wallClone = wall.clone();
+    wallClone.position.copy(position);
+    wallClone.rotation.z = rotation;
+    wallClone.scale.set(10, 10, 10); // 10x scale
+    if (groupRef.current) {
+      groupRef.current.add(wallClone);
+    }
+  };
+
+  return <group ref={groupRef} />;
+};
+
+export default CalcWallModels;

src/LineRenderer.tsx

@@ -5,15 +5,17 @@ import * as THREE from "three";
 export function LineRenderer({
   points,
   color,
+  width,
 }: {
   points: THREE.Vector3[];
   color: string;
+  width: number;
 }) {
   return (
     <Line
       points={points}
       color={color}
-      lineWidth={5}
+      lineWidth={width}
       position={[0, 0, 0]}
       opacity={0.75}
       transparent={true}

src/ReferenceShip.tsx

@@ -2,10 +2,12 @@ import { useState } from "react";
 import { useThree, useFrame } from "@react-three/fiber";
 import { useGLTF } from "@react-three/drei";
 import shipGLTF from "./assets/ship.glb?url";
+//import shipGLTF from "./assets/walls/wall_medium.glb?url";
 import * as THREE from "three";
 
 export const ReferenceShip = () => {
   const gltf = useGLTF(shipGLTF);
+  //gltf.scene.scale.set(10, 10, 10);
   const { camera } = useThree();
   const [shipPosition, setShipPosition] = useState(new THREE.Vector3(0, 0, 0));
   const [shipRotation, setShipRotation] = useState(new THREE.Quaternion());