people fixes and cleanup

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],
         },
       ]} />
 

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]}

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>;

frontend/three_d_garden/people.tsx

@@ -4,48 +4,52 @@ 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) => {
   const { people, config } = props;
   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] },
+};

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