Fix adjustments

.babelrc

@@ -10,5 +10,5 @@
     ],
     "next/babel"
   ],
-  "plugins": ["emotion"]
+  "plugins": ["@emotion/babel-plugin"]
 }

.eslintrc.js

@@ -27,7 +27,7 @@ module.exports = {
     "@typescript-eslint/no-inferrable-types": "error",
     "@typescript-eslint/no-namespace": "error",
     "@typescript-eslint/no-unnecessary-type-assertion": "error",
-    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-unused-vars": warnOnLocal,
     "@typescript-eslint/no-useless-constructor": "error",
     "@typescript-eslint/prefer-function-type": "error",
     "@typescript-eslint/restrict-plus-operands": "error",
@@ -72,7 +72,6 @@ module.exports = {
     "no-sequences": "error",
     "no-shadow": "error",
     "no-unused-expressions": warnOnLocal,
-    "no-unused-vars": warnOnLocal,
     "padding-line-between-statements": [
       warnOnLocal,
       {

components/AdjustmentBar.tsx

@@ -20,10 +20,10 @@ const tileValue = (tile: Tile | undefined, adjustment: Adjustment) => {
   return tile.adjustments[adjustment.slug];
 };
 
-export const AdjustmentBar: React.FunctionComponent<Props> = ({ tile }) => {
+export const AdjustmentBar = ({ tile }: Props) => {
   const commandMap = selectCommandMap();
   const adjustmentMap = selectAdjustmentMap();
-  // we implicitly know this is non-null based on it being rendered
+  // we implicitly know this is non-null based on it being rendered.
   // not great, would be nice to store this with the object?
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const name = commandMap[tile.item!].name;
@@ -34,8 +34,8 @@ export const AdjustmentBar: React.FunctionComponent<Props> = ({ tile }) => {
     });
   }, shallowEqual);
   return (
-    <Box>
-      <Box data-test="adjustment-bar-item-name">{name}</Box>
+    <Box data-test="adjustment-bar">
+      <Box mb={2}>{name}</Box>
       {adjustments &&
         adjustments.map(adjustment => {
           const value = tileValue(tile, adjustment);
@@ -69,11 +69,7 @@ interface ResizeInputProps {
   value: number | undefined;
   tile: Tile;
 }
-const ResizeInput: React.FunctionComponent<ResizeInputProps> = ({
-  adjustment,
-  value,
-  tile,
-}) => {
+const ResizeInput = ({ adjustment, value, tile }: ResizeInputProps) => {
   const dispatch = useDispatch();
   return (
     <React.Fragment key={adjustment.slug}>
@@ -91,16 +87,13 @@ const ResizeInput: React.FunctionComponent<ResizeInputProps> = ({
               }),
             );
           }}
-          data-test="adjustment-bar-check"
-          data-test-item={adjustment.slug}
         />{" "}
         {adjustment.name}
       </Label>
       {value && (
         <Box>
           <Button
-            data-test="adjustment-bar-decrement"
-            data-test-item={adjustment.slug}
+            aria-label={`Decrement ${adjustment.name} Size`}
             onClick={() => {
               dispatch(
                 tilesActions.setAdjustment({
@@ -113,10 +106,9 @@ const ResizeInput: React.FunctionComponent<ResizeInputProps> = ({
           >
             -
           </Button>{" "}
-          {value}{" "}
+          <span title={`${adjustment.name} Size`}>{value} </span>
           <Button
-            data-test="adjustment-bar-increment"
-            data-test-item={adjustment.slug}
+            aria-label={`Increment ${adjustment.name} Size`}
             onClick={() => {
               dispatch(
                 tilesActions.setAdjustment({
@@ -140,11 +132,7 @@ interface SelectInputProps {
   value: string | undefined;
   tile: Tile;
 }
-const SelectInput: React.FunctionComponent<SelectInputProps> = ({
-  adjustment,
-  value,
-  tile,
-}) => {
+const SelectInput = ({ adjustment, value, tile }: SelectInputProps) => {
   const dispatch = useDispatch();
   return (
     <Label key={adjustment.slug} display="block">
@@ -160,8 +148,6 @@ const SelectInput: React.FunctionComponent<SelectInputProps> = ({
             }),
           );
         }}
-        data-test="adjustment-bar-check"
-        data-test-item={adjustment.slug}
       >
         <option value="1">1</option>
         <option value="2">2</option>

components/Artboard/Artboard.tsx

@@ -1,13 +1,14 @@
 import { Container, Sprite, Stage } from "@inlet/react-pixi";
 import { settings, utils, SCALE_MODES, Texture } from "pixi.js";
-import React, { memo, useState } from "react";
+import React, { memo, useState, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import * as coordinates from "../../lib/coordinates";
 import { useHotKey } from "../../lib/useHotKey";
 import { tilesActions } from "../../store/actions";
 import {
   selectSelection,
   selectSelectionOffset,
+  selectCurrentCommand,
 } from "../../store/reducers/toolReducer";
 import { selectChunks } from "../../store/selectors";
 import { Chunk, Coords, SelectedCoords, TileSprite } from "../../store/types";
@@ -19,22 +20,10 @@ utils.skipHello();
 
 const LEFT_MOUSE_BUTTON = 1;
 
-const webGlSupported = () => {
-  try {
-    var canvas = document.createElement("canvas");
-    return !!(
-      window.WebGLRenderingContext &&
-      (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
-    );
-  } catch (e) {
-    return false;
-  }
-};
-
 interface ArtboardProps {
   chunks: Chunk[];
 }
-const Artboard: React.FC<ArtboardProps> = ({ chunks }) => {
+const Artboard = ({ chunks }: ArtboardProps) => {
   const selection = useSelector(selectSelection);
   const selectionOffset = useSelector(selectSelectionOffset);
   const dispatch = useDispatch();
@@ -44,14 +33,32 @@ const Artboard: React.FC<ArtboardProps> = ({ chunks }) => {
     endX: 0,
     endY: 0,
   });
+  const cursorSize = useSelector(state => {
+    const command = selectCurrentCommand(state);
+    if ("width" in command && "height" in command) {
+      return { width: command.width, height: command.height };
+    }
+    return { width: 1, height: 1 };
+  });
   const keysPressed = useHotKey();
+  const webGlSupported = useMemo(() => {
+    try {
+      var canvas = document.createElement("canvas");
+      return !!(
+        window.WebGLRenderingContext &&
+        (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+      );
+    } catch (e) {
+      return false;
+    }
+  }, []);
 
   return (
     <Stage
       width={2048}
       height={2048}
       data-test="stage"
-      options={{ forceCanvas: !webGlSupported() }}
+      options={{ forceCanvas: !webGlSupported }}
     >
       <Container>
         <Sprite
@@ -82,7 +89,13 @@ const Artboard: React.FC<ArtboardProps> = ({ chunks }) => {
           const key = `${chunk.startX},${chunk.endY}`;
           return <ChunkTiles key={key} tiles={chunk.tiles} />;
         })}
-        <Cursor {...cursorPosition} />
+        <Cursor
+          startX={cursorPosition.startX}
+          startY={cursorPosition.startY}
+          endX={cursorPosition.startX + (cursorSize.width - 1)}
+          endY={cursorPosition.startY + (cursorSize.height - 1)}
+          {...cursorSize}
+        />
         {selection && (
           <Cursor {...coordinates.offset(selection, selectionOffset)} />
         )}
@@ -94,7 +107,7 @@ const Artboard: React.FC<ArtboardProps> = ({ chunks }) => {
 interface ChunkProps {
   tiles: TileSprite[];
 }
-const ChunkTiles: React.FunctionComponent<ChunkProps> = memo(({ tiles }) => {
+const ChunkTiles = memo(({ tiles }: ChunkProps) => {
   return (
     <>
       {tiles.map(tile => {
@@ -124,7 +137,7 @@ const tilePosition = ({ x, y }: Coords) => {
 };
 
 // separated to avoid per-frame recalculations
-const ArtboardTiles: React.FC = () => {
+const ArtboardTiles = () => {
   const chunks = useSelector(selectChunks);
   return <Artboard chunks={chunks} />;
 };

components/Button.tsx

@@ -1,12 +1,7 @@
-/** @jsx jsx */
-import { css, jsx } from "@emotion/core";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { MouseEventHandler } from "react";
 import { space, SpaceProps } from "styled-system";
-import { Locators } from "../cypress/locators";
-
-// eslint-disable-next-line no-unused-expressions
-jsx; // tslint:disable-line
 
 interface Props {
   active?: boolean;
@@ -15,17 +10,15 @@ interface Props {
   className?: string;
   color?: "primary" | "secondary";
   disabled?: boolean;
-
-  "data-test": Locators;
 }
 
 export const Button = styled.button<Props & SpaceProps>`
   padding: 7px 14px;
   ${props =>
     props.color === "primary" &&
     css`
-      background-color: red;
-      border: 2px solid red;
+      background-color: ${props.theme.colors.primary};
+      border: 2px solid ${props.theme.colors.primary};
       color: white;
     `}
   ${props =>
@@ -38,8 +31,8 @@ export const Button = styled.button<Props & SpaceProps>`
     props.color === "secondary" &&
     props.active &&
     css`
-      background-color: dodgerblue;
-      border: 2px solid dodgerblue;
+      background-color: ${props.theme.colors.secondary};
+      border: 2px solid ${props.theme.colors.secondary};
       color: white;
     `}
   display: ${props => (props.block ? "block" : "inline-block")};

components/CommandBar.tsx

@@ -9,7 +9,7 @@ import {
 import { Box } from "./Box";
 import { Flex } from "./Flex";
 
-export const CommandBar: React.FunctionComponent = () => {
+export const CommandBar = () => {
   const phase = useSelector(state => state.tool.phase);
   const command = useSelector(selectCurrentCommand);
   const commands = useSelector(state => {
@@ -25,8 +25,6 @@ export const CommandBar: React.FunctionComponent = () => {
             dispatch(toolActions.setCurrentPhase({ phaseSlug: "dig" }))
           }
           active={phase === "dig"}
-          data-test="phase"
-          data-test-item="dig"
           mb={1}
         >
           Dig
@@ -37,8 +35,6 @@ export const CommandBar: React.FunctionComponent = () => {
             dispatch(toolActions.setCurrentPhase({ phaseSlug: "build" }))
           }
           active={phase === "build"}
-          data-test="phase"
-          data-test-item="build"
           mb={1}
         >
           Build
@@ -49,8 +45,6 @@ export const CommandBar: React.FunctionComponent = () => {
             dispatch(toolActions.setCurrentPhase({ phaseSlug: "place" }))
           }
           active={phase === "place"}
-          data-test="phase"
-          data-test-item="place"
         >
           Place Stockpiles
         </Button>
@@ -64,8 +58,6 @@ export const CommandBar: React.FunctionComponent = () => {
               dispatch(toolActions.setCommand({ commandSlug: comm.slug }))
             }
             active={command.slug === comm.slug}
-            data-test="command"
-            data-test-item={comm.slug}
             mb={1}
           >
             {comm.name}

components/Cursor.tsx

@@ -5,17 +5,12 @@ import React from "react";
 const TILE_SIZE = 16;
 
 interface CursorProps {
-  endX?: number;
-  endY?: number;
+  endX: number | undefined;
+  endY: number | undefined;
   startX: number;
   startY: number;
 }
-export const Cursor: React.FunctionComponent<CursorProps> = ({
-  startX,
-  startY,
-  endX,
-  endY,
-}) => {
+export const Cursor = ({ startX, startY, endX, endY }: CursorProps) => {
   return (
     <Sprite
       alpha={0.5}

components/EraseBar.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const EraseBar = () => {
+  return <div />;
+};