add option to disable plant animations

This commit is contained in:
gabrielburnworth 2017-10-04 22:02:38 -07:00
parent d8b8242616
commit c0a7d70c68
14 changed files with 189 additions and 91 deletions

View file

@ -0,0 +1,41 @@
const mockStorj: Dictionary<boolean> = {};
jest.mock("../session", () => {
return {
Session: {
getBool: (k: string) => {
mockStorj[k] = !!mockStorj[k];
return mockStorj[k];
}
}
};
});
import { Dictionary } from "farmbot";
import * as React from "react";
import { LoadingPlant } from "../loading_plant";
import { shallow } from "enzyme";
import { BooleanSetting } from "../session_keys";
describe("<LoadingPlant/>", () => {
it("renders loading text", () => {
const wrapper = shallow(<LoadingPlant />);
expect(wrapper.find(".loading-plant").length).toEqual(0);
expect(wrapper.find(".loading-plant-text").props().y).toEqual(150);
expect(wrapper.text()).toContain("Loading");
expect(wrapper.find(".animate").length).toEqual(0);
});
it("renders loading animation", () => {
mockStorj[BooleanSetting.plantAnimations] = true;
const wrapper = shallow(<LoadingPlant />);
expect(wrapper.find(".loading-plant")).toBeTruthy();
const circleProps = wrapper.find(".loading-plant-circle").props();
expect(circleProps.r).toEqual(110);
expect(circleProps.cx).toEqual(150);
expect(circleProps.cy).toEqual(250);
expect(wrapper.find(".loading-plant-text").props().y).toEqual(435);
expect(wrapper.text()).toContain("Loading");
expect(wrapper.find(".animate").length).toEqual(1);
});
});

View file

@ -82,7 +82,7 @@ describe("maybeToggleFeature()", () => {
describe("fetchLabFeatures", () => {
it("basically just initializes stuff", () => {
const val = fetchLabFeatures();
expect(val.length).toBe(3);
expect(val.length).toBe(6);
expect(val[0].value).toBeFalsy();
});
});

View file

@ -48,6 +48,12 @@ export const fetchLabFeatures = (): LabsFeature[] => ([
for a map with four times the area.`)),
storageKey: BooleanSetting.mapXL,
value: false
},
{
name: t("Display plant animations"),
description: trim(t(`Turn on plant animations in the Farm Designer.`)),
storageKey: BooleanSetting.plantAnimations,
value: true
}
].map(fetchRealValue));

View file

@ -6,7 +6,7 @@ import { init, error } from "farmbot-toastr";
import { NavBar } from "./nav";
import { Everything, Log } from "./interfaces";
import { LoadingPlant } from "./loading-plant";
import { LoadingPlant } from "./loading_plant";
import { BotState } from "./devices/interfaces";
import { ResourceName, TaggedUser } from "./resources/tagged_resources";
import { selectAllLogs, maybeFetchUser } from "./resources/selectors";

View file

@ -215,8 +215,10 @@
}
.plant-image {
animation: plant-growth 0.25s cubic-bezier(0, 0, 0, 1.4);
transform-origin: bottom;
&.animate {
animation: plant-growth 0.25s cubic-bezier(0, 0, 0, 1.4);
}
}
.soil-cloud {
@ -225,9 +227,11 @@
}
.spread {
animation: spread-pop 0.2s cubic-bezier(0, 0, 0, 1);
transform-origin: center;
pointer-events: none;
&.animate {
animation: spread-pop 0.2s cubic-bezier(0, 0, 0, 1);
}
}
.garden-map-legend {

View file

@ -107,7 +107,9 @@ $duration: 2;
.loading-plant-text {
opacity: 1;
animation: loading-plant-text-fade-in $duration*0.4s linear 1;
&.animate {
animation: loading-plant-text-fade-in $duration*0.4s linear 1;
}
}
@keyframes loading-plant-text-fade-in {

View file

@ -1,8 +1,23 @@
const mockStorj: Dictionary<boolean> = {};
jest.mock("../../../session", () => {
return {
Session: {
getBool: (k: string) => {
mockStorj[k] = !!mockStorj[k];
return mockStorj[k];
}
}
};
});
import { Dictionary } from "farmbot";
import * as React from "react";
import { GardenPlant } from "../garden_plant";
import { shallow } from "enzyme";
import { GardenPlantProps } from "../interfaces";
import { fakePlant } from "../../../__test_support__/fake_state/resources";
import { BooleanSetting } from "../../../session_keys";
describe("<GardenPlant/>", () => {
function fakeProps(): GardenPlantProps {
@ -27,6 +42,13 @@ describe("<GardenPlant/>", () => {
expect(wrapper.find("text").length).toEqual(0);
expect(wrapper.find("rect").length).toBeLessThanOrEqual(1);
expect(wrapper.find("use").length).toEqual(0);
expect(wrapper.find(".soil-cloud").length).toEqual(0);
});
it("renders plant animations", () => {
mockStorj[BooleanSetting.plantAnimations] = true;
const wrapper = shallow(<GardenPlant {...fakeProps() } />);
expect(wrapper.find(".soil-cloud").length).toEqual(1);
expect(wrapper.find(".animate").length).toEqual(1);
});
});

View file

@ -3,6 +3,8 @@ import { GardenPlantProps, GardenPlantState } from "./interfaces";
import { cachedCrop, DEFAULT_ICON, svgToUrl } from "../../open_farm/index";
import { round, getXYFromQuadrant } from "./util";
import { DragHelpers } from "./drag_helpers";
import { Session } from "../../session";
import { BooleanSetting } from "../../session_keys";
export class GardenPlant extends
React.Component<GardenPlantProps, Partial<GardenPlantState>> {
@ -35,21 +37,23 @@ export class GardenPlant extends
const { qx, qy } = getXYFromQuadrant(round(x), round(y), quadrant, gridSize);
const alpha = dragging ? 0.4 : 1.0;
const animate = Session.getBool(BooleanSetting.plantAnimations);
return <g id={"plant-" + id}>
<circle
className="soil-cloud"
cx={qx}
cy={qy}
r={radius}
fill="#90612f"
fillOpacity="0" />
{animate &&
<circle
className="soil-cloud"
cx={qx}
cy={qy}
r={radius}
fill="#90612f"
fillOpacity="0" />}
<g id="plant-icon">
<image
visibility={dragging ? "hidden" : "visible"}
className={"plant-image is-chosen-" + selected}
className={`plant-image is-chosen-${selected} ${animate ? "animate" : ""}`}
opacity={alpha}
xlinkHref={icon}
onClick={this.click}

View file

@ -1,3 +1,11 @@
jest.mock("../../../../session", () => {
return {
Session: {
getBool: () => { return true; }
}
};
});
import * as React from "react";
import { PlantLayer } from "../plant_layer";
import { shallow } from "enzyme";

View file

@ -6,6 +6,8 @@ import { MapTransformProps } from "../interfaces";
import { SpreadCircle } from "./spread_layer";
import { Circle } from "../circle";
import * as _ from "lodash";
import { Session } from "../../../session";
import { BooleanSetting } from "../../../session_keys";
/**
* For showing the map plant hovered in the plant panel.
@ -45,6 +47,7 @@ export class HoveredPlantLayer extends
const hovered = !!this.props.designer.hoveredPlant.icon;
const scaledRadius = currentPlant ? radius : radius * 1.2;
const alpha = dragging ? 0.4 : 1.0;
const animate = Session.getBool(BooleanSetting.plantAnimations);
return <g id="hovered-plant-layer">
{this.props.visible && hovered &&
@ -58,7 +61,7 @@ export class HoveredPlantLayer extends
selected={false} />
<Circle
className="plant-indicator"
className={animate ? "plant-indicator" : ""}
x={qx}
y={qy}
r={radius}

View file

@ -6,6 +6,8 @@ import { cachedCrop } from "../../../open_farm/index";
import { MapTransformProps } from "../interfaces";
import { SpreadOverlapHelper } from "../spread_overlap_helper";
import { BotPosition } from "../../../devices/interfaces";
import { Session } from "../../../session";
import { BooleanSetting } from "../../../session_keys";
export interface SpreadLayerProps {
visible: boolean;
@ -81,11 +83,12 @@ export class SpreadCircle extends
const { selected, mapTransformProps } = this.props;
const { quadrant, gridSize } = mapTransformProps;
const { qx, qy } = getXYFromQuadrant(round(x), round(y), quadrant, gridSize);
const animate = Session.getBool(BooleanSetting.plantAnimations);
return <g id={"spread-" + id}>
{!selected &&
<circle
className="spread"
className={"spread " + (animate ? "animate" : "")}
id={"spread-" + id}
cx={qx}
cy={qy}

View file

@ -1,76 +0,0 @@
import * as React from "react";
export function LoadingPlant() {
return <div className="loading-plant-div-container">
<svg width="300px" height="500px">
<circle
className="loading-plant-circle"
cx="150"
cy="250"
r="110"
stroke="rgba(256,256,256,0.7)"
strokeWidth="6"
strokeDasharray="16"
fill="rgba(256,256,256,0.25)"/>
<g className="loading-plant-svg-container">
<g className="loading-plant">
<path
className="loading-plant-background"
strokeWidth="0px"
stroke="#316131"
fill="#316131"
d="M424,125.9c-3.7-4.8-8.8-8.3-14.4-10c1.1-31.5-5.3-56-10.9-71c-6-16.1-16.7-36.5-33.5-42.1 c-2.5-0.8-5.1-1.4-7.9-1.6l0,0l0,0c-17-1.3-36.9,9.9-47.2,16.7c-12.8,8.4-31.5,23.5-48.7,47.8c-2.5-0.9-5.1-1.5-7.7-1.7 c-11.8-0.9-22.8,5.3-28.2,15.7c-4.2,8.2-7.9,16.9-10.8,25.7c-9.4,27.8-11.9,54.2-7.5,80.5c-3.1,0-6.2,0.4-9.1,1.4 c-24.6-23.9-51.2-33.8-67.1-35.1c-7.4-0.6-14,0.6-19.5,3.4c-11,5.8-18.7,18.8-22.8,38.7c-2.3,11.2-4.2,28.8-0.7,50.3 c-2.9,2.2-5.4,4.9-7.3,8.1c-4.2,7.1-5.1,15.6-2.4,23.4c2.3,6.7,5.2,13.3,8.5,19.6c12.8,24.4,30,42.1,52.7,54.1 c14.9,7.9,30.3,12.2,44.6,15.1c12.3,34.5,17.8,63.8,17.5,93.7l0.1,0c0,0.4-0.1,0.8-0.1,1.2c-1.6,20,13.9,37.6,34.5,39.2 c21.7,1.7,38.8-13.1,40.5-35.1l0-0.2c0.6-8,6.3-78.3,27.2-176c49-16,95.6-42.7,118.9-111.8c3-8.8,5.3-17.8,6.9-26.8 C431.1,140.7,429,132.4,424,125.9z"/>
<path
className="loading-plant-leaf"
fill="#57A357"
d="M204.4,211.4l-6.6,6.7c-1.5,1.5-4,1.4-5.3-0.3c-2.8-3.6-5.7-6.9-8.7-10c-25-25.9-54.3-34.1-61.1-30.5 c-6.9,3.6-16.8,32.3-9.8,67.6c0.8,4.1,1.9,8.4,3.2,12.7c0.6,2-0.7,4.1-2.8,4.5l-9.3,1.5c-2,0.3-3.3,2.4-2.6,4.4 c1.9,5.4,4.2,10.8,7,16.2C133,331.2,173.2,339,210,344.2c19-35.1,33.3-70.6,8.8-117.5c-2.8-5.4-5.9-10.3-9.3-14.9 C208.3,210,205.8,209.9,204.4,211.4z"/>
<path
className="loading-plant-leaf"
fill="#57A357"
d="M401,139.1l-12.9-0.1c-2.9,0-5.1-2.6-4.7-5.5c0.9-6.2,1.4-12.2,1.7-18c1.9-49.4-17.6-86.1-27.7-89.5 c-10.1-3.4-47.9,13.9-76.3,54.4c-3.3,4.7-6.5,9.8-9.5,15.2c-1.4,2.5-4.7,3.3-7.1,1.5l-10.3-7.7c-2.3-1.7-5.5-1-6.8,1.6 c-3.6,7-6.8,14.4-9.4,22.3c-23.2,68.8,7.1,116,36.8,157.3c52.7-14.5,101.5-33.9,124.7-102.7c2.7-7.9,4.6-15.7,6-23.3 C405.9,141.6,403.8,139.1,401,139.1z"/>
<path
className="loading-plant-accent"
fill="#DBE8DB"
fillOpacity="1"
d="M127.8,225.6c-1.9-0.2-3.5-1.7-3.6-3.7c-0.5-8.8,0.2-15.7,0.9-19.9c0.3-2.2,2.4-3.6,4.5-3.3 c2.2,0.3,3.6,2.4,3.3,4.5c-0.6,3.9-1.3,10.2-0.8,18.2c0.1,2.2-1.5,4.1-3.7,4.2C128.2,225.6,128,225.6,127.8,225.6z"/>
<path
className="loading-plant-accent"
fill="#DBE5DB"
fillOpacity="1"
d="M301.8,86.4c-0.9-0.1-1.7-0.4-2.4-1c-2-1.5-2.3-4.4-0.8-6.4C311.2,63,324,53.3,330.5,49 c2.1-1.4,4.9-0.8,6.3,1.3c1.4,2.1,0.8,4.9-1.3,6.3c-6.1,4-18,13.1-29.9,28.2C304.7,85.9,303.2,86.5,301.8,86.4z"/>
<path
fill="#9BE085"
className="loading-plant-vein"
d="M239.7,379l-13.1,59.9c0,7.5,0.1,15-0.6,22.7c-0.5,6.1,4.6,12.2,11.9,12.8c8.6,0.7,13.5-4.6,14.1-12.6 c0.2-2.1,8.8-121.9,50.4-272.6c0.6-2.3,2-4.3,3.8-5.8c5.5-4.4,15.2-10.7,28.7-13c23.3-4,38.1-19.8,38.7-20.4 c1.6-1.8,1.5-4.5-0.2-6.1c-1.8-1.6-4.5-1.5-6.1,0.2c-0.1,0.1-13.3,14.3-33.8,17.8c-8.4,1.4-15.5,4.2-21.3,7.3 c-1.8,0.9-3.8-0.7-3.2-2.6c7.9-26.5,16.8-52.2,26.8-76.2c0,0,1.9-4.5-2.5-6c-4.7-1.6-5.9,3.7-5.9,3.7 c-10.1,24.3-19.5,49.6-28.1,75.3c-0.6,1.9-3.2,2.1-4.1,0.3c-2.9-5.8-7.1-12.1-13.1-18.1c-1.8-1.8-4.6-1.7-6.3,0.2 c-1.5,1.7-1.3,4.4,0.3,6.1c9.8,9.9,14.1,21,15.9,27.7c0.6,2.1,0.5,4.3-0.1,6.4C291.8,185.8,255.6,297.8,239.7,379z"/>
<ellipse
className="loading-plant-accent"
transform="matrix(4.779642e-02 -0.9989 0.9989 4.779642e-02 120.0343 385.4608)"
fill="#9BE085"
fillOpacity="1"
cx="262.2" cy="129.8" rx="4.3" ry="4.3"/>
<path
className="loading-plant-vein"
fill="#74B56F"
d="M238.6,384.4c-14-30.7-31.3-69.2-47.1-98.2c-1.1-2.1-1.6-4.5-1.3-6.8c0.9-7,3.6-17.5,10.9-27.9 c1.3-1.9,1.1-4.6-0.7-6c-2-1.6-4.8-1.2-6.3,0.9c-4.8,6.8-7.9,13.6-9.8,19.7c-0.6,1.8-3.1,2.1-4.1,0.5 c-10.6-17.7-18.3-28.2-19.3-29.6c0,0-2.5-4.3-6.6-1.6c-3.5,2.3-0.9,6-0.9,6c0.2,0.4,7.4,11.2,17.1,30.3c0.9,1.8-0.8,3.8-2.7,3.2 c-6.2-1.9-13.5-3.3-21.9-3.2c-2,0-3.9,1.4-4.3,3.4c-0.6,2.8,1.6,5.3,4.3,5.3c12.7-0.2,23,3.7,29.3,6.9c2.3,1.2,4.2,3.1,5.2,5.5 c21,47.2,46.1,100.9,45.6,166C231.9,410.8,236,397.9,238.6,384.4z"/>
<ellipse
className="loading-plant-accent"
transform="matrix(7.841469e-02 -0.9969 0.9969 7.841469e-02 -120.2107 351.1246)"
fill="#DBE8DB"
fillOpacity="1"
cx="129.8" cy="240.6" rx="4.5" ry="4.5"/>
</g>
</g>
<text
className="loading-plant-text"
y="435"
x="150"
fontSize={35}
textAnchor="middle"
fill={"#434343"}>
Loading...
</text>
</svg>
</div>;
}

80
webpack/loading_plant.tsx Normal file
View file

@ -0,0 +1,80 @@
import * as React from "react";
import { Session } from "./session";
import { BooleanSetting } from "./session_keys";
export function LoadingPlant() {
const animations = Session.getBool(BooleanSetting.plantAnimations);
return <div className="loading-plant-div-container">
<svg width="300px" height="500px">
{animations &&
<g>
<circle
className="loading-plant-circle"
cx={150}
cy={250}
r={110}
stroke="rgba(256,256,256,0.7)"
strokeWidth={6}
strokeDasharray={16}
fill="rgba(256,256,256,0.25)" />
<g className="loading-plant-svg-container">
<g className="loading-plant">
<path
className="loading-plant-background"
strokeWidth="0px"
stroke="#316131"
fill="#316131"
d="M424,125.9c-3.7-4.8-8.8-8.3-14.4-10c1.1-31.5-5.3-56-10.9-71c-6-16.1-16.7-36.5-33.5-42.1 c-2.5-0.8-5.1-1.4-7.9-1.6l0,0l0,0c-17-1.3-36.9,9.9-47.2,16.7c-12.8,8.4-31.5,23.5-48.7,47.8c-2.5-0.9-5.1-1.5-7.7-1.7 c-11.8-0.9-22.8,5.3-28.2,15.7c-4.2,8.2-7.9,16.9-10.8,25.7c-9.4,27.8-11.9,54.2-7.5,80.5c-3.1,0-6.2,0.4-9.1,1.4 c-24.6-23.9-51.2-33.8-67.1-35.1c-7.4-0.6-14,0.6-19.5,3.4c-11,5.8-18.7,18.8-22.8,38.7c-2.3,11.2-4.2,28.8-0.7,50.3 c-2.9,2.2-5.4,4.9-7.3,8.1c-4.2,7.1-5.1,15.6-2.4,23.4c2.3,6.7,5.2,13.3,8.5,19.6c12.8,24.4,30,42.1,52.7,54.1 c14.9,7.9,30.3,12.2,44.6,15.1c12.3,34.5,17.8,63.8,17.5,93.7l0.1,0c0,0.4-0.1,0.8-0.1,1.2c-1.6,20,13.9,37.6,34.5,39.2 c21.7,1.7,38.8-13.1,40.5-35.1l0-0.2c0.6-8,6.3-78.3,27.2-176c49-16,95.6-42.7,118.9-111.8c3-8.8,5.3-17.8,6.9-26.8 C431.1,140.7,429,132.4,424,125.9z" />
<path
className="loading-plant-leaf"
fill="#57A357"
d="M204.4,211.4l-6.6,6.7c-1.5,1.5-4,1.4-5.3-0.3c-2.8-3.6-5.7-6.9-8.7-10c-25-25.9-54.3-34.1-61.1-30.5 c-6.9,3.6-16.8,32.3-9.8,67.6c0.8,4.1,1.9,8.4,3.2,12.7c0.6,2-0.7,4.1-2.8,4.5l-9.3,1.5c-2,0.3-3.3,2.4-2.6,4.4 c1.9,5.4,4.2,10.8,7,16.2C133,331.2,173.2,339,210,344.2c19-35.1,33.3-70.6,8.8-117.5c-2.8-5.4-5.9-10.3-9.3-14.9 C208.3,210,205.8,209.9,204.4,211.4z" />
<path
className="loading-plant-leaf"
fill="#57A357"
d="M401,139.1l-12.9-0.1c-2.9,0-5.1-2.6-4.7-5.5c0.9-6.2,1.4-12.2,1.7-18c1.9-49.4-17.6-86.1-27.7-89.5 c-10.1-3.4-47.9,13.9-76.3,54.4c-3.3,4.7-6.5,9.8-9.5,15.2c-1.4,2.5-4.7,3.3-7.1,1.5l-10.3-7.7c-2.3-1.7-5.5-1-6.8,1.6 c-3.6,7-6.8,14.4-9.4,22.3c-23.2,68.8,7.1,116,36.8,157.3c52.7-14.5,101.5-33.9,124.7-102.7c2.7-7.9,4.6-15.7,6-23.3 C405.9,141.6,403.8,139.1,401,139.1z" />
<path
className="loading-plant-accent"
fill="#DBE8DB"
fillOpacity={1}
d="M127.8,225.6c-1.9-0.2-3.5-1.7-3.6-3.7c-0.5-8.8,0.2-15.7,0.9-19.9c0.3-2.2,2.4-3.6,4.5-3.3 c2.2,0.3,3.6,2.4,3.3,4.5c-0.6,3.9-1.3,10.2-0.8,18.2c0.1,2.2-1.5,4.1-3.7,4.2C128.2,225.6,128,225.6,127.8,225.6z" />
<path
className="loading-plant-accent"
fill="#DBE5DB"
fillOpacity={1}
d="M301.8,86.4c-0.9-0.1-1.7-0.4-2.4-1c-2-1.5-2.3-4.4-0.8-6.4C311.2,63,324,53.3,330.5,49 c2.1-1.4,4.9-0.8,6.3,1.3c1.4,2.1,0.8,4.9-1.3,6.3c-6.1,4-18,13.1-29.9,28.2C304.7,85.9,303.2,86.5,301.8,86.4z" />
<path
fill="#9BE085"
className="loading-plant-vein"
d="M239.7,379l-13.1,59.9c0,7.5,0.1,15-0.6,22.7c-0.5,6.1,4.6,12.2,11.9,12.8c8.6,0.7,13.5-4.6,14.1-12.6 c0.2-2.1,8.8-121.9,50.4-272.6c0.6-2.3,2-4.3,3.8-5.8c5.5-4.4,15.2-10.7,28.7-13c23.3-4,38.1-19.8,38.7-20.4 c1.6-1.8,1.5-4.5-0.2-6.1c-1.8-1.6-4.5-1.5-6.1,0.2c-0.1,0.1-13.3,14.3-33.8,17.8c-8.4,1.4-15.5,4.2-21.3,7.3 c-1.8,0.9-3.8-0.7-3.2-2.6c7.9-26.5,16.8-52.2,26.8-76.2c0,0,1.9-4.5-2.5-6c-4.7-1.6-5.9,3.7-5.9,3.7 c-10.1,24.3-19.5,49.6-28.1,75.3c-0.6,1.9-3.2,2.1-4.1,0.3c-2.9-5.8-7.1-12.1-13.1-18.1c-1.8-1.8-4.6-1.7-6.3,0.2 c-1.5,1.7-1.3,4.4,0.3,6.1c9.8,9.9,14.1,21,15.9,27.7c0.6,2.1,0.5,4.3-0.1,6.4C291.8,185.8,255.6,297.8,239.7,379z" />
<ellipse
className="loading-plant-accent"
transform="matrix(4.779642e-02 -0.9989 0.9989 4.779642e-02 120.0343 385.4608)"
fill="#9BE085"
fillOpacity={1}
cx={262.2} cy={129.8} rx={4.3} ry={4.3} />
<path
className="loading-plant-vein"
fill="#74B56F"
d="M238.6,384.4c-14-30.7-31.3-69.2-47.1-98.2c-1.1-2.1-1.6-4.5-1.3-6.8c0.9-7,3.6-17.5,10.9-27.9 c1.3-1.9,1.1-4.6-0.7-6c-2-1.6-4.8-1.2-6.3,0.9c-4.8,6.8-7.9,13.6-9.8,19.7c-0.6,1.8-3.1,2.1-4.1,0.5 c-10.6-17.7-18.3-28.2-19.3-29.6c0,0-2.5-4.3-6.6-1.6c-3.5,2.3-0.9,6-0.9,6c0.2,0.4,7.4,11.2,17.1,30.3c0.9,1.8-0.8,3.8-2.7,3.2 c-6.2-1.9-13.5-3.3-21.9-3.2c-2,0-3.9,1.4-4.3,3.4c-0.6,2.8,1.6,5.3,4.3,5.3c12.7-0.2,23,3.7,29.3,6.9c2.3,1.2,4.2,3.1,5.2,5.5 c21,47.2,46.1,100.9,45.6,166C231.9,410.8,236,397.9,238.6,384.4z" />
<ellipse
className="loading-plant-accent"
transform="matrix(7.841469e-02 -0.9969 0.9969 7.841469e-02 -120.2107 351.1246)"
fill="#DBE8DB"
fillOpacity={1}
cx={129.8} cy={240.6} rx={4.5} ry={4.5} />
</g>
</g>
</g>}
<text
className={"loading-plant-text" + (animations ? " animate" : "")}
y={animations ? 435 : 150}
x={150}
fontSize={35}
textAnchor="middle"
fill="#434343">
Loading...
</text>
</svg>
</div>;
}

View file

@ -17,6 +17,7 @@ export enum BooleanSetting {
hideWebcamWidget = "hideWebcamWidget",
dynamicMap = "dynamicMap",
mapXL = "mapXL",
plantAnimations = "plantAnimations",
}
export enum NumericSetting {