consolidate bugs

webpack/css/farm_designer/farm_designer.scss

@@ -433,6 +433,10 @@
     button {
       margin-right: 1rem;
     }
+    p {
+      text-align: center;
+      padding-top: 2rem;
+    }
   }
   .menu-pullout {
     color: $white;

webpack/farm_designer/map/__tests__/garden_map_legend_test.tsx

@@ -11,7 +11,6 @@ import * as React from "react";
 import { shallow } from "enzyme";
 import { GardenMapLegend } from "../garden_map_legend";
 import { GardenMapLegendProps } from "../interfaces";
-import { setEggStatus, EggKeys } from "../easter_eggs/status";
 
 describe("<GardenMapLegend />", () => {
   function fakeProps(): GardenMapLegendProps {
@@ -51,13 +50,4 @@ describe("<GardenMapLegend />", () => {
   it("zoom in button disabled", () => {
     checkZoomButtons(true, false, 1);
   });
-
-  it("lays eggs", () => {
-    setEggStatus(EggKeys.BRING_ON_THE_BUGS, "");
-    const noEggs = shallow(<GardenMapLegend {...fakeProps()} />);
-    expect(noEggs.find(".more-bugs").length).toEqual(0);
-    setEggStatus(EggKeys.BRING_ON_THE_BUGS, "true");
-    const eggs = shallow(<GardenMapLegend {...fakeProps()} />);
-    expect(eggs.find(".more-bugs").length).toEqual(1);
-  });
 });

webpack/farm_designer/map/easter_eggs/__tests__/bugs_test.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { shallow, mount } from "enzyme";
-import { Bugs, BugsProps, showBugResetButton, showBugs, resetBugs } from "../bugs";
+import {
+  Bugs, BugsProps, showBugResetButton, showBugs, resetBugs, bugsControls
+} from "../bugs";
 import { EggKeys, setEggStatus, getEggStatus } from "../status";
 import { range } from "lodash";
 import { fakeMapTransformProps } from "../../../../__test_support__/map_transform_props";
@@ -85,3 +87,17 @@ describe("resetBugs()", () => {
     expectAlive("true");
   });
 });
+
+describe("bugsControls", () => {
+  it("lays eggs", () => {
+    setEggStatus(EggKeys.BRING_ON_THE_BUGS, "");
+    const noEggs = shallow(bugsControls());
+    expect(noEggs.find(".more-bugs").length).toEqual(0);
+    setEggStatus(EggKeys.BRING_ON_THE_BUGS, "true");
+    const stillNoEggs = shallow(bugsControls());
+    expect(stillNoEggs.find(".more-bugs").length).toEqual(0);
+    setEggStatus(EggKeys.BUGS_ARE_STILL_ALIVE, "false");
+    const eggs = shallow(bugsControls());
+    expect(eggs.find(".more-bugs").length).toEqual(1);
+  });
+});

webpack/farm_designer/map/easter_eggs/bugs.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { t } from "i18next";
 import { transformXY } from "../util";
 import { MapTransformProps, BotSize } from "../interfaces";
 import { random, range, some, clamp } from "lodash";
@@ -20,10 +21,12 @@ type Bug = {
 
 interface BugsState {
   bugs: Bug[];
+  startTime: number;
 }
 
 export function showBugResetButton() {
-  return getEggStatus(EggKeys.BRING_ON_THE_BUGS) === "true";
+  return getEggStatus(EggKeys.BRING_ON_THE_BUGS) === "true" &&
+    getEggStatus(EggKeys.BUGS_ARE_STILL_ALIVE) === "false";
 }
 
 export function showBugs() {
@@ -35,10 +38,14 @@ export function resetBugs() {
   setEggStatus(EggKeys.BUGS_ARE_STILL_ALIVE, "true");
 }
 
+export function getBugTime() {
+  return getEggStatus(EggKeys.LAST_BUG_TIME);
+}
+
 const BUG_ICON = "/app-resources/img/generic-plant.svg";
 
 export class Bugs extends React.Component<BugsProps, BugsState> {
-  state: BugsState = { bugs: [] };
+  state: BugsState = { bugs: [], startTime: NaN };
 
   componentDidMount() {
     this.setState({
@@ -49,10 +56,14 @@ export class Bugs extends React.Component<BugsProps, BugsState> {
         r: random(25, 100),
         hp: 100,
         alive: true
-      }))
+      })),
+      startTime: this.seconds
     });
   }
 
+  get seconds() { return Math.floor(new Date().getTime() / 1000); }
+  get elapsedTime() { return this.seconds - this.state.startTime; }
+
   onClick = (id: number) => {
     const bugs = this.state.bugs;
     if (bugs[id].r > 100 && bugs[id].hp > 50) {
@@ -70,6 +81,7 @@ export class Bugs extends React.Component<BugsProps, BugsState> {
     });
     if (!some(bugs, "alive")) {
       setEggStatus(EggKeys.BUGS_ARE_STILL_ALIVE, "false");
+      setEggStatus(EggKeys.LAST_BUG_TIME, "" + this.elapsedTime);
     }
     this.forceUpdate();
   };
@@ -81,6 +93,9 @@ export class Bugs extends React.Component<BugsProps, BugsState> {
     const toQ = (ox: number, oy: number) =>
       transformXY(ox, oy, this.props.mapTransformProps);
     return <g id="bugs">
+      <filter id="grayscale">
+        <feColorMatrix type="saturate" values="0" />
+      </filter>
       {this.state.bugs.map(bug => {
         const { qx, qy } = toQ(bug.x, bug.y);
         return <image
@@ -98,3 +113,19 @@ export class Bugs extends React.Component<BugsProps, BugsState> {
     </g>;
   }
 }
+
+export const bugsControls = () => {
+  return showBugResetButton()
+    ? <div className="more-bugs">
+      <button
+        className="fb-button green"
+        onClick={resetBugs}>
+        {t("more bugs!")}
+      </button>
+      {getBugTime() &&
+        <p>
+          {t("{{seconds}} seconds!", { seconds: getBugTime() })}
+        </p>}
+    </div>
+    : <div />;
+};

webpack/farm_designer/map/easter_eggs/status.ts

@@ -1,6 +1,7 @@
 export enum EggKeys {
   BRING_ON_THE_BUGS = "BRING_ON_THE_BUGS",
   BUGS_ARE_STILL_ALIVE = "BUGS_ARE_STILL_ALIVE",
+  LAST_BUG_TIME = "LAST_BUG_TIME",
 }
 
 export function getEggStatus(key: EggKeys): string {

webpack/farm_designer/map/garden_map_legend.tsx

@@ -5,7 +5,7 @@ import { GardenMapLegendProps } from "./interfaces";
 import { history } from "../../history";
 import { atMaxZoom, atMinZoom } from "./zoom";
 import { ImageFilterMenu } from "./image_filter_menu";
-import { showBugResetButton, resetBugs } from "./easter_eggs/bugs";
+import { bugsControls } from "./easter_eggs/bugs";
 // import { snapshotGarden } from "../../saved_gardens/snapshot";
 
 export function GardenMapLegend(props: GardenMapLegendProps) {
@@ -114,15 +114,7 @@ export function GardenMapLegend(props: GardenMapLegendProps) {
         {t("Snapshot")}
         </button>
       */}
-      {showBugResetButton() &&
-        <div className="more-bugs">
-          <button
-            className="fb-button green"
-            onClick={resetBugs}>
-            {t("more bugs!")}
-          </button>
-        </div>
-      }
+      {bugsControls()}
     </div>
   </div>;
 }