lint

Author: roryaronson

frontend/three_d_garden/garden.tsx

@@ -111,6 +111,23 @@ export const GardenModel = (props: GardenModelProps) => {
   const gridZ = zero.z - config.soilHeight + 5;
   const extents = extentsFunc(config);
 
+  let groundTexture;
+  let groundColor;
+  let lowDetailGroundColor;
+  if (config.scene === "Greenhouse") {
+    groundTexture = brickTexture;
+    groundColor = "#999";
+    lowDetailGroundColor = "firebrick";
+  } else if (config.scene === "Lab") {
+    groundTexture = labFloorTexture;
+    groundColor = "#aaa";
+    lowDetailGroundColor = "gray";
+  } else {
+    groundTexture = grassTexture;
+    groundColor = "#ddd";
+    lowDetailGroundColor = "darkgreen";
+  }
+
   // eslint-disable-next-line no-null/no-null
   return <Group dispose={null}
     onPointerMove={config.eventDebug
@@ -150,25 +167,13 @@ export const GardenModel = (props: GardenModelProps) => {
     <Detailed distances={detailLevels(config)}>
       <Ground>
         <MeshPhongMaterial
-          map={
-            config.scene === "Greenhouse" 
-              ? brickTexture
-              : config.scene === "Lab" 
-              ? labFloorTexture 
-              : grassTexture
-          }          
-          color={
-            config.scene === "Greenhouse" 
-              ? "#999"
-              : config.scene === "Lab" 
-              ? "#aaa" 
-              : "#ddd"
-          }
+          map={groundTexture}
+          color={groundColor}
           shininess={0} />
       </Ground>
       <Ground>
         <MeshPhongMaterial
-          color={config.scene == "Outdoor" ? "darkgreen" : "gray"}
+          color={lowDetailGroundColor}
           shininess={0} />
       </Ground>
     </Detailed>

frontend/three_d_garden/greenhouse.tsx

@@ -6,7 +6,7 @@ import { threeSpace } from "./helpers";
 import { Config } from "./config";
 import { Group, MeshPhongMaterial } from "./components";
 import { StarterTray } from "./starter_tray";
-import PottedPlant from "./potted_plant";
+import { PottedPlant } from "./potted_plant";
 import { GreenhouseWall } from "./greenhouse_wall";
 
 export interface GreenhouseProps {
@@ -116,7 +116,7 @@ export const Greenhouse = (props: GreenhouseProps) => {
         position={[
           threeSpace(-1750, config.bedLengthOuter),
           threeSpace(850, -config.bedWidthOuter),
-          groundZ
+          groundZ,
         ]}>
         <PottedPlant />
       </Group>

frontend/three_d_garden/greenhouse_wall.tsx

@@ -27,7 +27,7 @@ export const GreenhouseWall = () => {
       {Array.from({ length: numWallRows }).map((_, row) =>
         Array.from({ length: numWallCols }).map((_, col) => {
           const isOpen = openPanels.some(
-            (panel) => panel.row === row && panel.col === col
+            (panel) => panel.row === row && panel.col === col,
           );
           return (
             <Box
@@ -38,13 +38,18 @@ export const GreenhouseWall = () => {
               position={[
                 wallGap + paneWidth / 2 + col * (paneWidth + wallGap),
                 0,
-                wallGap + paneHeight / 2 + row * (paneHeight + wallGap)
+                wallGap + paneHeight / 2 + row * (paneHeight + wallGap),
               ]}
               rotation={isOpen ? [-Math.PI / 3, 0, 0] : [0, 0, 0]}>
-              <MeshPhongMaterial color={"#ccffff"} side={DoubleSide} transparent={true} opacity={0.25} />
+              <MeshPhongMaterial
+                color={"#ccffff"}
+                side={DoubleSide}
+                transparent={true}
+                opacity={0.25}
+              />
             </Box>
           );
-        })
+        }),
       )}
       {Array.from({ length: numWallCols + 1 }).map((_, col) => (
         <Box
@@ -54,7 +59,7 @@ export const GreenhouseWall = () => {
           position={[
             col * (paneWidth + wallGap) + wallGap / 2,
             0,
-            wallHeight / 2
+            wallHeight / 2,
           ]}>
           <MeshPhongMaterial
             color={"#999"}

frontend/three_d_garden/potted_plant.tsx

@@ -1,25 +1,25 @@
-import React, { useMemo } from 'react'
-import { Billboard, Circle, Image } from '@react-three/drei'
-import * as THREE from 'three'
-import { Group, MeshPhongMaterial, Mesh } from './components'
+import React, { useMemo } from "react";
+import { Billboard, Circle, Image } from "@react-three/drei";
+import * as THREE from "three";
+import { Group, MeshPhongMaterial, Mesh } from "./components";
 
-const potHeight = 400
-const plantHeight = 500
+const potHeight = 400;
+const plantHeight = 500;
 
-const PottedPlant = () => {
+export const PottedPlant = () => {
   const points = useMemo(() => [
-    new THREE.Vector2(0, 0),      // Bottom center
-    new THREE.Vector2(0.3, 0),    // Base width
-    new THREE.Vector2(0.35, 0.1), // Slight flare at the bottom
-    new THREE.Vector2(0.25, 0.6), // Narrowing midsection
-    new THREE.Vector2(0.3, 0.8),  // Widening towards the top
-    new THREE.Vector2(0.4, 1),    // Outer lip
-    new THREE.Vector2(0.35, 1),   // Inner lip
-    new THREE.Vector2(0.2, 0.6),  // Depth
-    new THREE.Vector2(0, 0.6)     // Close the profile
-  ], [])
+    new THREE.Vector2(0, 0),
+    new THREE.Vector2(0.3, 0),
+    new THREE.Vector2(0.35, 0.1),
+    new THREE.Vector2(0.25, 0.6),
+    new THREE.Vector2(0.3, 0.8),
+    new THREE.Vector2(0.4, 1),
+    new THREE.Vector2(0.35, 1),
+    new THREE.Vector2(0.2, 0.6),
+    new THREE.Vector2(0, 0.6),
+  ], []);
 
-  const geometry = useMemo(() => new THREE.LatheGeometry(points, 32, 0, Math.PI * 2), [points])
+  const geometry = useMemo(() => new THREE.LatheGeometry(points, 32, 0, Math.PI * 2), [points]);
 
   return (
     <Group name="pot-with-plant">
@@ -43,7 +43,5 @@ const PottedPlant = () => {
         />
       </Billboard>
     </Group>
-  )
-}
-
-export default PottedPlant
+  );
+};

frontend/three_d_garden/starter_tray.tsx

@@ -35,7 +35,7 @@ export const StarterTray = () => {
                 transparent={true} />
             </Billboard>
           );
-        })
+        }),
       )}
     </Group>
   );