First attempt to add items

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

@@ -6,16 +6,15 @@ import { useUsers } from "../../../../components/users";
 const Image = ({
   width,
   height,
-  content,
+  content = "/default.png",
   backContent,
-  flipped,
+  flipped = false,
   setState,
   unflippedFor,
   text,
   backText,
   overlay,
 }) => {
-  //const user = useRecoilValue(userAtom);
   const { currentUser } = useUsers();
   const size = {};
   if (width) {

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

@@ -2,7 +2,7 @@ import { memo } from "react";
 import styled, { css } from "styled-components";
 
 const Rect = styled.div`
-  ${({ width, height, color }) => css`
+  ${({ width = 50, height = 50, color = "#ccc" }) => css`
     width: ${width}px;
     height: ${height}px;
     background-color: ${color};

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

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import styled, { css } from "styled-components";
 
 const StyledRound = styled.div`
-  ${({ radius, color }) => css`
+  ${({ radius = 50, color = "#ccc" }) => css`
     border-radius: 100%;
     width: ${radius}px;
     height: ${radius}px;

src/components/GameController.js

@@ -19,6 +19,7 @@ import testGame from "../games/testGame";
 import LoadGame from "./LoadGame";
 import AvailableItems from "./AvailableItems";
 import { useItems } from "../components/Board/Items";
+import NewItems from "./NewItems";
 
 const generateDownloadURI = (data) => {
   return (
@@ -26,7 +27,7 @@ const generateDownloadURI = (data) => {
   );
 };
 
-const RightPane = styled.div`
+const LeftPane = styled.div`
   position: fixed;
   left: 0.5em;
   top: 0.5em;
@@ -138,7 +139,7 @@ export const GameController = ({ availableItemList, boardConfig }) => {
   }
 
   return (
-    <RightPane>
+    <LeftPane>
       <Title onClick={logGame}>{t("Games")}</Title>
       <button onClick={loadTestGame}>Test Game</button>
       <button onClick={loadTikTok}>TikTok</button>
@@ -151,13 +152,15 @@ export const GameController = ({ availableItemList, boardConfig }) => {
       <a href={downloadURI} download={`save_${date}.json`}>
         {t("Save game")}
       </a>
+      <Title>{t("Add item")}</Title>
+      <NewItems />
       {availableItemList && availableItemList.length > 0 && (
         <AvailableItemList>
           <Title>{t("Box Content")}</Title>
           <AvailableItems />
         </AvailableItemList>
       )}
-    </RightPane>
+    </LeftPane>
   );
 };
 

src/components/NewItems.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { useItems } from "../components/Board/Items";
+import { nanoid } from "nanoid";
+import { useTranslation } from "react-i18next";
+
+const itemTypes = ["rect", "round", "image", "note", "counter", "dice"];
+
+const itemTemplates = {
+  round: {},
+  rect: {},
+  image: {},
+  note: {},
+  counter: {},
+  dice: {},
+};
+
+const NewItem = ({ type }) => {
+  const { t } = useTranslation();
+
+  const { pushItem } = useItems();
+
+  const onClickHandler = () => {
+    const newItem = {
+      ...itemTemplates[type],
+      type,
+      x: 200,
+      y: 50,
+      id: nanoid(),
+    };
+    pushItem(newItem);
+  };
+
+  return (
+    <button style={{ cursor: "pointer" }} onClick={onClickHandler}>
+      {t(type)}
+    </button>
+  );
+};
+
+const NewItems = () => {
+  return (
+    <ul style={{ textAlign: "left", listStyle: "none" }}>
+      {itemTypes.map((type) => (
+        <li key={type}>
+          <NewItem type={type} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default NewItems;