Fix sync issues and click event for firefox

jrmi · Feb 18, 2024 · 6e03f3f · 6e03f3f · github-actions · Feb 18, 2024
1 parent a08be7c
commit 6e03f3f
Show file tree

Hide file tree

Showing 14 changed files with 324 additions and 178 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "react-icons": "^4.8.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.8.0",
-    "react-sync-board": "^1.2.3",
+    "react-sync-board": "^1.2.4",
     "react-toastify": "^6.1.0",
     "recoil": "^0.7.4",
     "socket.io-client": "^4.1.2",

diff --git a/src/gameComponents/AdvancedImage/AdvancedImage.jsx b/src/gameComponents/AdvancedImage/AdvancedImage.jsx
@@ -129,17 +129,24 @@ const AdvancedImage = ({
 
   const onPlaceItem = React.useCallback(
     (itemIds) => {
-      setState((item) => ({
-        ...item,
-        linkedItems: getHeldItems({
+      setState((item) => {
+        const newLinkedItems = getHeldItems({
           element: wrapperRef.current,
           currentItemId,
-          linkedItemIds: item.linkedItems,
+          currentLinkedItemIds: item.linkedItems,
           itemList: getItemList(),
           itemIds,
           shouldHoldItems: item.holdItems,
-        }),
-      }));
+        });
+
+        if (item.linkedItems !== newLinkedItems) {
+          return {
+            linkedItems: newLinkedItems,
+          };
+        }
+
+        return {};
+      }, true);
     },
     [currentItemId, getItemList, setState]
   );

diff --git a/src/gameComponents/CheckerBoard/CheckerBoard.jsx b/src/gameComponents/CheckerBoard/CheckerBoard.jsx
@@ -37,17 +37,24 @@ const CheckerBoard = ({
 
   const onPlaceItem = React.useCallback(
     (itemIds) => {
-      setState((item) => ({
-        ...item,
-        linkedItems: getHeldItems({
+      setState((item) => {
+        const newLinkedItems = getHeldItems({
           element: wrapperRef.current,
           currentItemId,
-          linkedItemIds: item.linkedItems,
+          currentLinkedItemIds: item.linkedItems,
           itemList: getItemList(),
           itemIds,
           shouldHoldItems: item.holdItems,
-        }),
-      }));
+        });
+
+        if (item.linkedItems !== newLinkedItems) {
+          return {
+            linkedItems: newLinkedItems,
+          };
+        }
+
+        return {};
+      }, true);
     },
     [currentItemId, getItemList, setState]
   );

diff --git a/src/gameComponents/Image/Image.jsx b/src/gameComponents/Image/Image.jsx
@@ -122,17 +122,24 @@ const Image = ({
 
   const onPlaceItem = React.useCallback(
     (itemIds) => {
-      setState((item) => ({
-        ...item,
-        linkedItems: getHeldItems({
+      setState((item) => {
+        const newLinkedItems = getHeldItems({
           element: wrapperRef.current,
           currentItemId,
-          linkedItemIds: item.linkedItems,
+          currentLinkedItemIds: item.linkedItems,
           itemList: getItemList(),
           itemIds,
           shouldHoldItems: item.holdItems,
-        }),
-      }));
+        });
+
+        if (item.linkedItems !== newLinkedItems) {
+          return {
+            linkedItems: newLinkedItems,
+          };
+        }
+
+        return {};
+      }, true);
     },
     [currentItemId, getItemList, setState]
   );

diff --git a/src/gameComponents/Zone/Zone.jsx b/src/gameComponents/Zone/Zone.jsx
@@ -62,17 +62,24 @@ const Zone = ({
 
   const onInsideItem = React.useCallback(
     (itemIds) => {
-      setState((item) => ({
-        ...item,
-        linkedItems: getHeldItems({
+      setState((item) => {
+        const newLinkedItems = getHeldItems({
           element: zoneRef.current,
           currentItemId,
-          linkedItemIds: item.linkedItems,
+          currentLinkedItemIds: item.linkedItems,
           itemList: getItemList(),
           itemIds,
           shouldHoldItems: item.holdItems,
-        }),
-      }));
+        });
+
+        if (item.linkedItems !== newLinkedItems) {
+          return {
+            linkedItems: newLinkedItems,
+          };
+        }
+
+        return {};
+      }, true);
 
       const addedItems = Object.entries(
         areItemsInside(zoneRef.current, itemIds)