add 3D garden config and bed

frontend/farm_designer/__tests__/three_d_garden_map_test.tsx

@@ -1,9 +1,14 @@
 import React from "react";
 import { mount } from "enzyme";
 import { ThreeDGardenMapProps, ThreeDGardenMap } from "../three_d_garden_map";
+import { fakeMapTransformProps } from "../../__test_support__/map_transform_props";
+import { fakeBotSize } from "../../__test_support__/fake_bot_data";
 
 describe("<ThreeDGardenMap />", () => {
   const fakeProps = (): ThreeDGardenMapProps => ({
+    mapTransformProps: fakeMapTransformProps(),
+    botSize: fakeBotSize(),
+    gridOffset: { x: 10, y: 10 },
   });
 
   it("renders", () => {

frontend/farm_designer/index.tsx

@@ -194,7 +194,10 @@ export class RawFarmDesigner
       </div>
 
       {this.props.getConfigValue(BooleanSetting.three_d_garden)
-        ? <ThreeDGardenMap />
+        ? <ThreeDGardenMap
+          gridOffset={gridOffset}
+          mapTransformProps={this.mapTransformProps}
+          botSize={this.props.botSize} />
         : <div
           className={`farm-designer-map ${this.mapPanelClassName}`}
           style={{

frontend/farm_designer/three_d_garden_map.tsx

@@ -1,10 +1,22 @@
 import React from "react";
 import { ThreeDGarden } from "../three_d_garden";
+import { INITIAL } from "../three_d_garden/config";
+import { BotSize, MapTransformProps, AxisNumberProperty } from "./map/interfaces";
+import { clone } from "lodash";
 
 export interface ThreeDGardenMapProps {
+  botSize: BotSize;
+  mapTransformProps: MapTransformProps;
+  gridOffset: AxisNumberProperty;
 }
 
 export const ThreeDGardenMap = (props: ThreeDGardenMapProps) => {
-  props;
-  return <ThreeDGarden />;
+  const config = clone(INITIAL);
+  const { gridSize } = props.mapTransformProps;
+  config.botSizeX = gridSize.x;
+  config.botSizeY = gridSize.y;
+  config.bedWidthOuter = gridSize.y + 160;
+  config.bedLengthOuter = gridSize.x + 160;
+
+  return <ThreeDGarden config={config} />;
 };

frontend/promo/__tests__/promo_test.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { mount } from "enzyme";
 import { Promo } from "../promo";
 
 describe("<Promo />", () => {
   it("renders", () => {
     console.error = jest.fn();
-    const wrapper = shallow(<Promo />);
+    const wrapper = mount(<Promo />);
     expect(wrapper.html()).toContain("three-d-garden");
   });
 });

frontend/promo/promo.tsx

@@ -1,5 +1,17 @@
 import React from "react";
 import { ThreeDGarden } from "../three_d_garden";
+import {
+  Config, INITIAL, modifyConfigsFromUrlParams,
 
-export const Promo = () =>
-  <ThreeDGarden />;
+} from "../three_d_garden/config";
+
+export const Promo = () => {
+  const [config, setConfig] = React.useState<Config>(INITIAL);
+
+  React.useEffect(() => {
+    setConfig(modifyConfigsFromUrlParams(config));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // intentionally empty dependency array
+
+  return <ThreeDGarden config={config} />;
+};

frontend/three_d_garden/__tests__/bed_test.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { mount } from "enzyme";
+import { INITIAL } from "../config";
+import { Bed, BedProps } from "../bed";
+import { clone } from "lodash";
+
+describe("<Bed />", () => {
+  const fakeProps = (): BedProps => ({
+    config: clone(INITIAL),
+  });
+
+  it("renders bed", () => {
+    const p = fakeProps();
+    p.config.extraLegsX = 0;
+    const wrapper = mount(<Bed {...p} />);
+    expect(wrapper.html()).toContain("args=\"1500,50,50\"");
+  });
+
+  it("renders bed with extra legs", () => {
+    const p = fakeProps();
+    p.config.extraLegsX = 2;
+    p.config.extraLegsY = 2;
+    p.config.legsFlush = false;
+    const wrapper = mount(<Bed {...p} />);
+    expect(wrapper.html()).toContain("args=\"1500,50,50\"");
+  });
+});

frontend/three_d_garden/__tests__/components_test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { mount } from "enzyme";
+import { AmbientLight, Mesh, PointLight } from "../components";
+import { AmbientLightProps, MeshProps, PointLightProps } from "@react-three/fiber";
+
+describe("<AmbientLight />", () => {
+  const fakeProps = (): AmbientLightProps => ({
+    intensity: 0.5,
+  });
+
+  it("adds props", () => {
+    const wrapper = mount(<AmbientLight {...fakeProps()} />);
+    expect(wrapper.props().intensity).toEqual(0.5);
+  });
+});
+
+describe("<PointLight />", () => {
+  const fakeProps = (): PointLightProps => ({
+    intensity: 0.5,
+  });
+
+  it("adds props", () => {
+    const wrapper = mount(<PointLight {...fakeProps()} />);
+    expect(wrapper.props().intensity).toEqual(0.5);
+  });
+});
+
+describe("<Mesh />", () => {
+  const fakeProps = (): MeshProps => ({
+    name: "mesh",
+  });
+
+  it("adds props", () => {
+    const wrapper = mount(<Mesh {...fakeProps()} />);
+    expect(wrapper.props().name).toEqual("mesh");
+  });
+});

frontend/three_d_garden/__tests__/config_test.ts

@@ -0,0 +1,76 @@
+import { clone } from "lodash";
+import { INITIAL, modifyConfig, modifyConfigsFromUrlParams } from "../config";
+
+describe("modifyConfig()", () => {
+  it("modifies config: lab", () => {
+    const initial = clone(INITIAL);
+    const result = modifyConfig(initial, { scene: "Lab" });
+    expect(initial.lab).toEqual(false);
+    expect(result.lab).toEqual(true);
+    expect(initial.clouds).toEqual(true);
+    expect(result.clouds).toEqual(false);
+    expect(initial.bedType).toEqual("Standard");
+    expect(result.bedType).toEqual("Mobile");
+  });
+
+  it("modifies config: lab XL", () => {
+    const initial = clone(INITIAL);
+    const result = modifyConfig(initial, {
+      scene: "Lab",
+      sizePreset: "Genesis XL",
+    });
+    expect(initial.bedType).toEqual("Standard");
+    expect(result.bedType).toEqual("Standard");
+  });
+
+  it("modifies config: Jr", () => {
+    const initial = clone(INITIAL);
+    const result = modifyConfig(initial, { sizePreset: "Jr" });
+    expect(initial.x).toEqual(300);
+    expect(result.x).toEqual(100);
+  });
+
+  it("modifies config: bedType", () => {
+    const initial = clone(INITIAL);
+    initial.bedZOffset = 100;
+    initial.bedType = "Mobile";
+    const result = modifyConfig(initial, { bedType: "Standard" });
+    expect(result.bedZOffset).toEqual(0);
+  });
+
+  it("resets config", () => {
+    const initial = clone(INITIAL);
+    initial.bedLengthOuter = 1;
+    const result = modifyConfig(initial, { otherPreset: "Reset all" });
+    expect(result.bedLengthOuter).toEqual(3000);
+  });
+
+  it("modifies config: preset", () => {
+    const initial = clone(INITIAL);
+    initial.bedHeight = 1;
+    const result = modifyConfig(initial, { otherPreset: "Initial" });
+    expect(result.bedHeight).toEqual(300);
+  });
+});
+
+describe("modifyConfigsFromUrlParams()", () => {
+  it("sets config scene", () => {
+    window.location.search = "?scene=Lab";
+    const initial = clone(INITIAL);
+    initial.lab = false;
+    const result = modifyConfigsFromUrlParams(initial);
+    expect(result.lab).toEqual(true);
+  });
+
+  it("sets other config", () => {
+    window.location.search = "?kit=JR&x=1&ground=true";
+    const initial = clone(INITIAL);
+    initial.sizePreset = "Genesis XL";
+    initial.x = 100;
+    initial.ground = false;
+    const result = modifyConfigsFromUrlParams(initial);
+    expect(result.sizePreset).toEqual("Jr");
+    expect(result.x).toEqual(1);
+    expect(result.ground).toEqual(true);
+  });
+});

frontend/three_d_garden/__tests__/index_test.tsx

@@ -19,9 +19,12 @@ import {
 
 } from "..";
 import React from "react";
+import { INITIAL } from "../config";
+import { clone } from "lodash";
 
 describe("<ThreeDGarden />", () => {
   const fakeProps = (): ThreeDGardenProps => ({
+    config: clone(INITIAL),
   });
 
   it("renders", () => {
@@ -32,6 +35,7 @@ describe("<ThreeDGarden />", () => {
 
 describe("<ThreeDGardenModel />", () => {
   const fakeProps = (): ThreeDGardenModelProps => ({
+    config: clone(INITIAL),
   });
 
   it("renders model", () => {