Add edit mode

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

@@ -114,6 +114,7 @@ const Item = ({ setState, state }) => {
         position: "absolute",
         display: "inline-block",
         transform: `rotate(${rotation}deg)`,
+        transition: "transform 200ms",
         zIndex: (state.layer || 0) + 3,
         ...extraStyle,
       }}

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

@@ -17,7 +17,7 @@ const ImageForm = ({ initialValues }) => {
         />
       </Label>
       <Label>
-        {t("Text")}è
+        {t("Text")}
         <Field
           name="text"
           component="input"

src/components/SelectedItemsPane.js

@@ -21,7 +21,7 @@ const SelectedPane = styled.div.attrs(() => ({ className: "casrd" }))`
   overflow-y: scroll;
 `;
 
-export const SelectedItems = () => {
+export const SelectedItems = ({ edit }) => {
   const {
     itemList,
     updateItem,
@@ -73,6 +73,41 @@ export const SelectedItems = () => {
     }));
   }, [selectedItems, batchUpdateItems]);
 
+  const tap = React.useCallback(() => {
+    batchUpdateItems(selectedItems, (item) => ({
+      ...item,
+      rotation: 90,
+    }));
+  }, [selectedItems, batchUpdateItems]);
+
+  const untap = React.useCallback(() => {
+    batchUpdateItems(selectedItems, (item) => ({
+      ...item,
+      rotation: 0,
+    }));
+  }, [selectedItems, batchUpdateItems]);
+
+  const toggleTap = React.useCallback(() => {
+    batchUpdateItems(selectedItems, (item) => ({
+      ...item,
+      rotation: item.rotation === 90 ? 0 : 90,
+    }));
+  }, [selectedItems, batchUpdateItems]);
+
+  const toggleLock = React.useCallback(() => {
+    batchUpdateItems(selectedItems, (item) => ({
+      ...item,
+      locked: !item.locked,
+    }));
+  }, [selectedItems, batchUpdateItems]);
+
+  const toggleFlip = React.useCallback(() => {
+    batchUpdateItems(selectedItems, (item) => ({
+      ...item,
+      flipped: !item.flipped,
+    }));
+  }, [selectedItems, batchUpdateItems]);
+
   const unflip = React.useCallback(() => {
     batchUpdateItems(selectedItems, (item) => ({
       ...item,
@@ -111,34 +146,64 @@ export const SelectedItems = () => {
     });
   };
 
+  if (selectedItems.length === 1) {
+    return (
+      <SelectedPane>
+        {edit &&
+          selectedItemList.map((item) => (
+            <div className="card" key={item.id}>
+              <header>
+                <h3>{t("Edit item")}</h3>
+              </header>
+              <section className="content">
+                <ItemFormFactory
+                  item={item}
+                  onSubmitHandler={onSubmitHandler}
+                />
+                <button onClick={onRemove}>{t("Remove")}</button>
+              </section>
+            </div>
+          ))}
+        {!edit &&
+          selectedItemList.map((item) => (
+            <div className="card" key={item.id}>
+              <header>
+                <h3>{t("Actions")}</h3>
+              </header>
+              <section className="content">
+                {item.type === "image" && item.backContent && (
+                  <button onClick={toggleFlip}>
+                    {item.flipped ? t("Reveal") : t("Hide")}
+                  </button>
+                )}
+                <button onClick={toggleTap}>
+                  {item.rotation === 90 ? t("Untap") : t("Tap")}
+                </button>
+                <button onClick={toggleLock}>
+                  {item.locked ? t("Unlock") : t("Lock")}
+                </button>
+              </section>
+            </div>
+          ))}
+      </SelectedPane>
+    );
+  }
   return (
     <SelectedPane>
-      {selectedItems.length > 1 && (
-        <div className="card">
-          <header>
-            <h3>{t("items selected", { count: selectedItems.length })}</h3>
-          </header>
-          <section className="content">
-            <button onClick={shuffleSelectedItems}>{t("Shuffle")}</button>
-            <button onClick={align}>{t("Stack")}</button>
-            <button onClick={flip}>{t("Hide")}</button>
-            <button onClick={unflip}>{t("Reveal")}</button>
-            <button onClick={onRemove}>{t("Remove all")}</button>
-          </section>
-        </div>
-      )}
-      {selectedItems.length === 1 &&
-        selectedItemList.map((item) => (
-          <div className="card" key={item.id}>
-            <header>
-              <h3>{t("Edit item")}</h3>
-            </header>
-            <section className="content">
-              <ItemFormFactory item={item} onSubmitHandler={onSubmitHandler} />
-              <button onClick={onRemove}>{t("Remove")}</button>
-            </section>
-          </div>
-        ))}
+      <div className="card">
+        <header>
+          <h3>{t("items selected", { count: selectedItems.length })}</h3>
+        </header>
+        <section className="content">
+          <button onClick={shuffleSelectedItems}>{t("Shuffle")}</button>
+          <button onClick={align}>{t("Stack")}</button>
+          <button onClick={flip}>{t("Hide")}</button>
+          <button onClick={unflip}>{t("Reveal")}</button>
+          <button onClick={tap}>{t("Tap")}</button>
+          <button onClick={untap}>{t("Untap")}</button>
+          {edit && <button onClick={onRemove}>{t("Remove all")}</button>}
+        </section>
+      </div>
     </SelectedPane>
   );
 };

src/games/testGame.js

@@ -3,13 +3,30 @@ const genGame = () => {
 
   items.push({
     type: "image",
-    content: "/games/card.jpg",
-    backContent: "/games/back.jpg",
+    content: "/games/AS.jpg",
+    backContent: "/games/Red_back.jpg",
     width: 100,
-    x: 100,
+    x: 400,
     y: 100,
   });
 
+  items.push({
+    type: "image",
+    content: "/games/BH.jpg",
+    backContent: "/games/Red_back.jpg",
+    width: 100,
+    x: 410,
+    y: 100,
+  });
+
+  items.push({
+    type: "image",
+    content: "/games/JC.jpg",
+    backContent: "/games/Red_back.jpg",
+    width: 100,
+    x: 420,
+    y: 100,
+  });
   items.push({
     type: "rect",
     color: "#00D022",

src/i18n/en.json

@@ -44,5 +44,12 @@
   "Round": "Round",
   "Note": "Note",
   "Counter": "Counter",
-  "Dice": "Dice"
+  "Dice": "Dice",
+  "Actions": "Actions",
+  "Untap": "Untap",
+  "Tap": "Tap",
+  "Unlock": "Unlock",
+  "Lock": "Lock",
+  "Edit mode": "Edit mode",
+  "Play": "Play"
 }

src/i18n/fr.json

@@ -44,5 +44,12 @@
   "Round": "Rond",
   "Note": "Note",
   "Counter": "Compteur",
-  "Dice": "Dé"
+  "Dice": "Dé",
+  "Actions": "Actions",
+  "Untap": "Restaurer",
+  "Tap": "Engager",
+  "Unlock": "Libérer",
+  "Lock": "Figer",
+  "Edit mode": "Mode édition",
+  "Play": "Jouer"
 }

src/views/BoardView.js

@@ -8,6 +8,8 @@ import { Board } from "../components/Board";
 import SelectedItemsPane from "../components/SelectedItemsPane";
 import { useUsers, SubscribeUserEvents, UserList } from "../components/users";
 import LoadGameModal from "../components/LoadGameModal";
+import { useC2C } from "../hooks/useC2C";
+import { useTranslation } from "react-i18next";
 
 const BoardContainer = styled.div`
   width: 100%;
@@ -17,19 +19,38 @@ const BoardContainer = styled.div`
   background-color: #202b38;
 `;
 
+const EditButton = styled.button`
+  position: absolute;
+  top: 0.5em;
+  left: 5em;
+  z-index: 10;
+`;
+
 export const BoardView = () => {
+  const { t } = useTranslation();
   const { currentUser, users } = useUsers();
+  const [, , isMaster] = useC2C();
   const [showModal, setShowModal] = React.useState(false);
+  const [edit, setEdit] = React.useState(false);
+
+  const toggleEdit = () => {
+    setEdit((prev) => !prev);
+  };
 
   return (
     <BoardContainer>
       <BoardMenu setShowLoadGameModal={setShowModal} />
+      {isMaster && (
+        <EditButton onClick={toggleEdit}>
+          {!edit ? t("Edit mode") : t("Play")}
+        </EditButton>
+      )}
       <SubscribeUserEvents />
       <SubscribeGameEvents />
       <UserList />
       <Board user={currentUser} users={users} />
-      <SelectedItemsPane />
-      <GameController />
+      <SelectedItemsPane edit={edit} />
+      {edit && <GameController />}
       <LoadGameModal showModal={showModal} setShowModal={setShowModal} />
     </BoardContainer>
   );