From e05226ae789cb215e03628a87933128901937482 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Wed, 5 Feb 2025 13:18:57 -0800
Subject: [PATCH] people fixes and cleanup

---
 frontend/three_d_garden/greenhouse.tsx      | 14 ++----
 frontend/three_d_garden/greenhouse_wall.tsx |  6 +--
 frontend/three_d_garden/lab.tsx             | 14 ++----
 frontend/three_d_garden/people.tsx          | 54 +++++++++++----------
 frontend/three_d_garden/starter_tray.tsx    |  2 +-
 5 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/frontend/three_d_garden/greenhouse.tsx b/frontend/three_d_garden/greenhouse.tsx
index 0e83c63ae..d7fdf7c33 100644
--- a/frontend/three_d_garden/greenhouse.tsx
+++ b/frontend/three_d_garden/greenhouse.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, useTexture } from "@react-three/drei";
-import { DoubleSide, RepeatWrapping, Vector3 } from "three";
+import { DoubleSide, RepeatWrapping } from "three";
 import { ASSETS } from "./constants";
 import { threeSpace } from "./helpers";
 import { Config } from "./config";
@@ -82,19 +82,11 @@ export const Greenhouse = (props: GreenhouseProps) => {
       people={[
         {
           url: ASSETS.people.person3,
-          offset: new Vector3(
-            -400,
-            -400,
-            0,
-          )
+          offset: [-400, -400],
         },
         {
           url: ASSETS.people.person4Flipped,
-          offset: new Vector3(
-            0,
-            config.bedWidthOuter + 900,
-            0,
-          )
+          offset: [0, config.bedWidthOuter + 900],
         },
       ]} />
 
diff --git a/frontend/three_d_garden/greenhouse_wall.tsx b/frontend/three_d_garden/greenhouse_wall.tsx
index aeea9e67e..6c55e31c5 100644
--- a/frontend/three_d_garden/greenhouse_wall.tsx
+++ b/frontend/three_d_garden/greenhouse_wall.tsx
@@ -30,7 +30,7 @@ export const GreenhouseWall = () => {
           panel.row === row &&
           panel.col === col,
         );
-        return <Box
+        return <Box key={`${row}-${col}`}
           castShadow={true}
           receiveShadow={true}
           renderOrder={1}
@@ -51,7 +51,7 @@ export const GreenhouseWall = () => {
       }),
     )}
     {range(numWallCols + 1).map(col => (
-      <Box
+      <Box key={col}
         castShadow={true}
         receiveShadow={true}
         args={[wallGap, glassThickness, wallHeight]}
@@ -67,7 +67,7 @@ export const GreenhouseWall = () => {
       </Box>
     ))}
     {range(numWallRows + 1).map(row => (
-      <Box
+      <Box key={row}
         castShadow={true}
         receiveShadow={true}
         args={[wallLength, glassThickness, wallGap]}
diff --git a/frontend/three_d_garden/lab.tsx b/frontend/three_d_garden/lab.tsx
index 1d98e1fd6..3059f2a2e 100644
--- a/frontend/three_d_garden/lab.tsx
+++ b/frontend/three_d_garden/lab.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Extrude, useTexture } from "@react-three/drei";
-import { DoubleSide, Shape, RepeatWrapping, Vector3 } from "three";
+import { DoubleSide, Shape, RepeatWrapping } from "three";
 import { ASSETS } from "./constants";
 import { threeSpace } from "./helpers";
 import { Config } from "./config";
@@ -87,19 +87,11 @@ export const Lab = (props: LabProps) => {
       people={[
         {
           url: ASSETS.people.person1Flipped,
-          offset: new Vector3(
-            -300,
-            -300,
-            0,
-          )
+          offset: [-300, -300],
         },
         {
           url: ASSETS.people.person2Flipped,
-          offset: new Vector3(
-            config.bedLengthOuter / 2,
-            config.bedWidthOuter + 500,
-            0,
-          )
+          offset: [config.bedLengthOuter / 2, config.bedWidthOuter + 500],
         },
       ]} />
   </Group>;
diff --git a/frontend/three_d_garden/people.tsx b/frontend/three_d_garden/people.tsx
index 247aec390..89e8178da 100644
--- a/frontend/three_d_garden/people.tsx
+++ b/frontend/three_d_garden/people.tsx
@@ -4,12 +4,12 @@ import { Group } from "./components";
 import { Config } from "./config";
 import { threeSpace } from "./helpers";
 import { Vector3 } from "three";
-
+import { ASSETS } from "./constants";
 
 export interface PeopleProps {
   config: Config;
   activeFocus: string;
-  people: { url: string, offset: Vector3 }[];
+  people: { url: string, offset: number[] }[];
 }
 
 export const People = (props: PeopleProps) => {
@@ -17,35 +17,39 @@ export const People = (props: PeopleProps) => {
   const groundZ = -config.bedZOffset - config.bedHeight;
   return <Group name={"people"}
     visible={config.people && props.activeFocus == ""}>
-    {people[0] &&
-      <Billboard
-        position={[
-          threeSpace(people[0].offset.x, config.bedLengthOuter),
-          threeSpace(people[0].offset.y, config.bedWidthOuter),
-          groundZ,
-        ]}>
-        <Image
-          url={people[0].url}
-          position={[0, 900, 0]}
-          scale={[900, 1800]}
-          transparent={true}
-          opacity={0.4}
-          renderOrder={1} />
-      </Billboard>}
-    {people[1] &&
-      <Billboard
+    {people.map((person, i) => {
+      const scalingData = SCALING_DATA[person.url];
+      const offset = new Vector3(...person.offset);
+      return <Billboard key={i}
         position={[
-          threeSpace(people[1].offset.x, config.bedLengthOuter),
-          threeSpace(people[1].offset.y, config.bedWidthOuter),
+          threeSpace(offset.x, config.bedLengthOuter),
+          threeSpace(offset.y, config.bedWidthOuter),
           groundZ,
         ]}>
         <Image
-          url={people[1].url}
-          position={[0, 850, 0]}
-          scale={[700, 1700]}
+          url={person.url}
+          position={new Vector3(...scalingData.position)}
+          scale={scalingData.scale}
           transparent={true}
           opacity={0.4}
           renderOrder={1} />
-      </Billboard>}
+      </Billboard>;
+    })}
   </Group>;
 };
+
+interface DataRecord {
+  scale: [number, number];
+  position: number[];
+}
+
+const SCALING_DATA: Record<string, DataRecord> = {
+  [ASSETS.people.person1]: { scale: [900, 1800], position: [0, 900, 0] },
+  [ASSETS.people.person1Flipped]: { scale: [900, 1800], position: [0, 900, 0] },
+  [ASSETS.people.person2]: { scale: [700, 1700], position: [0, 850, 0] },
+  [ASSETS.people.person2Flipped]: { scale: [700, 1700], position: [0, 850, 0] },
+  [ASSETS.people.person3]: { scale: [875, 1800], position: [0, 900, 0] },
+  [ASSETS.people.person3Flipped]: { scale: [875, 1800], position: [0, 900, 0] },
+  [ASSETS.people.person4]: { scale: [580, 1700], position: [0, 850, 0] },
+  [ASSETS.people.person4Flipped]: { scale: [580, 1700], position: [0, 850, 0] },
+};
diff --git a/frontend/three_d_garden/starter_tray.tsx b/frontend/three_d_garden/starter_tray.tsx
index 1b421a1d2..5a12cd509 100644
--- a/frontend/three_d_garden/starter_tray.tsx
+++ b/frontend/three_d_garden/starter_tray.tsx
@@ -25,7 +25,7 @@ export const StarterTray = () => {
       range(14).map(col => {
         const x = -width / 2 + cellSize / 2 + col * cellSize;
         const y = -length / 2 + cellSize / 2 + row * cellSize;
-        return <Billboard
+        return <Billboard key={`${row}-${col}`}
           follow={true}
           position={[x, y, height + seedlingSize / 2]}>
           <Image