Closes #98 add zone widget

src/components/Board/Items/Item/Item.js

@@ -12,6 +12,7 @@ import Image from "./Image";
 import Counter from "./Counter";
 import Dice from "./Dice";
 import Note from "./Note";
+import Zone from "./Zone";
 
 const getComponent = (type) => {
   switch (type) {
@@ -23,6 +24,8 @@ const getComponent = (type) => {
       return Image;
     case "counter":
       return Counter;
+    case "zone":
+      return Zone;
     case "dice":
       return Dice;
     case "note":

src/components/Board/Items/Item/Zone.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { memo } from "react";
+import styled, { css } from "styled-components";
+
+const ZoneWrapper = styled.div`
+  ${({ width = 200, height = 200 }) => css`
+    width: ${width}px;
+    height: ${height}px;
+    border: 0.8em dashed #222;
+    opacity: 0.3;
+    border-radius: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    & > div {
+      font-size: 3em;
+      user-select: none;
+    }
+  `}
+`;
+
+const Zone = ({ width, height, label }) => {
+  return (
+    <ZoneWrapper width={width} height={height}>
+      <div>{label}</div>
+    </ZoneWrapper>
+  );
+};
+
+export default memo(Zone);

src/components/Board/Items/Item/forms/ItemFormFactory.js

@@ -15,6 +15,7 @@ import RectFormFields from "./RectFormFields";
 import RoundFormFields from "./RoundFormFields";
 import DiceFormFields from "./DiceFormFields";
 import NoteFormFields from "./NoteFormFields";
+import ZoneFormFields from "./ZoneFormFields";
 
 import Label from "../../../Form/Label";
 
@@ -35,6 +36,8 @@ const getFormFieldComponent = (type) => {
       return NoteFormFields;
     case "image":
       return ImageFormFields;
+    case "zone":
+      return ZoneFormFields;
     default:
       return () => {
         return null;

src/components/Board/Items/Item/forms/ZoneFormFields.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Field } from "react-final-form";
+
+import Label from "../../../Form/Label";
+
+const Form = ({ initialValues }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Label>
+        {t("Label")}
+        <Field
+          name="label"
+          component="input"
+          initialValue={initialValues.label}
+        />
+      </Label>
+      <Label>
+        {t("Width")}
+        <Field
+          name="width"
+          component="input"
+          initialValue={initialValues.width}
+        >
+          {(props) => <input {...props.input} type="number" />}
+        </Field>
+      </Label>
+      <Label>
+        {t("Height")}
+        <Field
+          name="height"
+          component="input"
+          initialValue={initialValues.height}
+        >
+          {(props) => <input {...props.input} type="number" />}
+        </Field>
+      </Label>
+    </>
+  );
+};
+
+export default Form;

src/components/Board/Items/useItemActions.js

@@ -22,6 +22,7 @@ const getDefaultActionsFromItem = (item) => {
     case "note":
     case "counter":
     case "dice":
+    case "zone":
       return ["lock", "remove"];
     default:
       return [];

src/components/NewItems.js

@@ -14,6 +14,7 @@ const itemTypes = [
   i18n.t("Note"),
   i18n.t("Counter"),
   i18n.t("Dice"),
+  i18n.t("Zone"),
 ];
 
 const itemTemplates = {
@@ -23,6 +24,7 @@ const itemTemplates = {
   [i18n.t("Note")]: { type: "note" },
   [i18n.t("Counter")]: { type: "counter" },
   [i18n.t("Dice")]: { type: "dice" },
+  [i18n.t("Zone")]: { type: "zone" },
 };
 
 const NewItem = memo(({ type }) => {

src/games/testGame.js

@@ -73,6 +73,16 @@ const genGame = () => {
     y: 200,
   });
 
+  items.push({
+    label: "My zone",
+    type: "zone",
+    layer: -1,
+    width: 500,
+    height: 300,
+    x: 200,
+    y: 600,
+  });
+
   return {
     items,
     availableItems: [