Stamps are finally working like other strokes

Author: bchou9

frontend/src/components/Canvas.js

@@ -115,6 +115,7 @@ function Canvas({
     rotation: 0,
     opacity: 100,
   });
+  const [backendStamps, setBackendStamps] = useState([]);
   const [activeFilter, setActiveFilter] = useState(null);
   const [filterParams, setFilterParams] = useState({});
   const [isFilterPreview, setIsFilterPreview] = useState(false);
@@ -434,6 +435,28 @@ function Canvas({
 
       setPendingDrawings((prev) => [...prev, drawing]);
 
+      // If this is a custom stamp, add it to the stamp panel
+      if (drawing.drawingType === "stamp" && drawing.stampData && drawing.stampData.image) {
+        setBackendStamps((prevStamps) => {
+          const imageKey = drawing.stampData.image.substring(0, 100);
+          const alreadyExists = prevStamps.some(s =>
+            s.image && s.image.substring(0, 100) === imageKey
+          );
+
+          if (!alreadyExists) {
+            console.log('Adding new custom stamp from Socket.IO:', drawing.stampData.name || 'Custom Stamp');
+            return [...prevStamps, {
+              id: `stamp-${Date.now()}-${prevStamps.length}`,
+              name: drawing.stampData.name || 'Custom Stamp',
+              category: drawing.stampData.category || 'custom',
+              image: drawing.stampData.image,
+              emoji: drawing.stampData.emoji
+            }];
+          }
+          return prevStamps;
+        });
+      }
+
       // Use requestAnimationFrame for smoother rendering
       requestAnimationFrame(() => {
         drawAllDrawings();
@@ -1454,7 +1477,6 @@ function Canvas({
           }
         }
 
-        // CRITICAL: Check for stamps FIRST before checking pathData as array
         // Stamps have pathData as array but need special rendering
         if (drawing.drawingType === "stamp" && drawing.stampData && drawing.stampSettings && Array.isArray(drawing.pathData) && drawing.pathData.length > 0) {
           // Collect stamp for batch rendering (handled after loop)
@@ -1609,7 +1631,7 @@ function Canvas({
         }
       }
       if (!selectedUser) {
-        // Group users by 5-minute intervals (periodStart in epoch ms).
+        // Group users by 5-minute intervals
         // Use both committed drawings and pending drawings so the UI's
         // user/time-group list reflects the strokes the user currently sees.
         const groupMap = {};
@@ -1664,7 +1686,6 @@ function Canvas({
         setUserList(groups);
       }
 
-      // CRITICAL: Render all stamps synchronously to avoid async rendering issues
       // Emoji stamps can be drawn immediately, image stamps need to be loaded first
       console.log("[drawAllDrawings] Processing", stampsToRender.length, "stamps");
 
@@ -1743,7 +1764,7 @@ function Canvas({
         }
       }
 
-      // Copy offscreen canvas to visible canvas atomically (no flicker)
+      // Copy offscreen canvas to visible canvas atomically
       console.log("[drawAllDrawings] Copying offscreen canvas to visible canvas. Total strokes rendered:", sortedDrawings.length);
       context.imageSmoothingEnabled = false;
       context.clearRect(0, 0, canvasWidth, canvasHeight);
@@ -2200,13 +2221,58 @@ function Canvas({
     // Update pending drawings to only include those still not confirmed by backend
     setPendingDrawings(stillPending);
 
+    // Extract custom stamps from all drawings and update stamp panel
+    extractCustomStamps();
+
     // Use requestAnimationFrame for smoother rendering
     requestAnimationFrame(() => {
       drawAllDrawings();
       setIsLoading(false);
     });
   };
 
+  // Extract custom stamps from backend drawings and update StampPanel
+  const extractCustomStamps = () => {
+    try {
+      const customStamps = [];
+      const seenStamps = new Map(); // Deduplicate by image content or emoji
+
+      (userData.drawings || []).forEach((drawing) => {
+        if (drawing.drawingType === "stamp" && drawing.stampData) {
+          const stamp = drawing.stampData;
+
+          // Skip default emoji stamps (they're already in StampPanel)
+          if (stamp.emoji && !stamp.image) {
+            return;
+          }
+
+          // For custom image stamps, create a unique key based on image content
+          if (stamp.image) {
+            const imageKey = stamp.image.substring(0, 100); // Use first 100 chars as key
+
+            if (!seenStamps.has(imageKey)) {
+              seenStamps.set(imageKey, true);
+              customStamps.push({
+                id: `stamp-${Date.now()}-${customStamps.length}`,
+                name: stamp.name || 'Custom Stamp',
+                category: stamp.category || 'custom',
+                image: stamp.image,
+                emoji: stamp.emoji
+              });
+            }
+          }
+        }
+      });
+
+      if (customStamps.length > 0) {
+        console.log('Extracted custom stamps from backend:', customStamps.length);
+        setBackendStamps(customStamps);
+      }
+    } catch (error) {
+      console.error('Error extracting custom stamps:', error);
+    }
+  };
+
   const startDrawingHandler = (e) => {
     const canvas = canvasRef.current;
     const rect = canvas.getBoundingClientRect();
@@ -3278,6 +3344,7 @@ function Canvas({
           selectedStamp={selectedStamp}
           onStampSelect={handleStampSelect}
           onStampChange={handleStampChange}
+          backendStamps={backendStamps}
           onFilterApply={applyFilter}
           onFilterPreview={previewFilter}
           onFilterUndo={undoFilter}

frontend/src/components/Stamps/StampPanel.jsx

@@ -35,7 +35,7 @@ const defaultStamps = [
   { id: "rocket", emoji: "🚀", name: "Rocket", category: "objects" },
 ];
 
-export default function StampPanel({ onSelect, onStampChange }) {
+export default function StampPanel({ onSelect, onStampChange, backendStamps = [] }) {
   const [showEditor, setShowEditor] = useState(false);
   const [stamps, setStamps] = useState(defaultStamps);
   const [selectedStamp, setSelectedStamp] = useState(null);
@@ -46,20 +46,68 @@ export default function StampPanel({ onSelect, onStampChange }) {
   });
   const [filterCategory, setFilterCategory] = useState("all");
 
-  const categories = ["all", "nature", "shapes", "animals", "objects"];
+  const categories = ["all", "nature", "shapes", "animals", "objects", "custom"];
 
   useEffect(() => {
-    // Load stamps from localStorage
+    // Merge stamps from multiple sources:
+    // 1. Default stamps (always present)
+    // 2. localStorage stamps (user's local custom stamps)
+    // 3. Backend stamps (custom stamps from all users in the room)
+
     const savedStamps = localStorage.getItem('rescanvas-stamps');
+    let localCustomStamps = [];
     if (savedStamps) {
       try {
-        const parsed = JSON.parse(savedStamps);
-        setStamps([...defaultStamps, ...parsed]);
+        localCustomStamps = JSON.parse(savedStamps);
       } catch (e) {
         console.warn('Failed to load saved stamps:', e);
       }
     }
-  }, []);
+
+    // Merge all stamps, avoiding duplicates
+    // Use a Map to deduplicate by a combination of emoji/image content
+    const stampMap = new Map();
+
+    // Add default stamps first
+    defaultStamps.forEach(stamp => {
+      const key = stamp.id;
+      stampMap.set(key, stamp);
+    });
+
+    // Add localStorage stamps
+    localCustomStamps.forEach(stamp => {
+      const key = stamp.id || (stamp.emoji ? `emoji-${stamp.emoji}` : `image-${stamp.image?.substring(0, 50)}`);
+      if (!stampMap.has(key)) {
+        stampMap.set(key, { ...stamp, id: stamp.id || key });
+      }
+    });
+
+    // Add backend stamps (highest priority for custom stamps)
+    backendStamps.forEach(stamp => {
+      // For backend stamps, use image content or emoji as key to avoid duplicates
+      const key = stamp.emoji ? `emoji-${stamp.emoji}` : `image-${stamp.image?.substring(0, 50)}`;
+      if (!stampMap.has(key)) {
+        // Ensure backend stamp has proper structure
+        stampMap.set(key, {
+          id: stamp.id || key,
+          name: stamp.name || 'Custom Stamp',
+          category: stamp.category || 'custom',
+          emoji: stamp.emoji,
+          image: stamp.image
+        });
+      }
+    });
+
+    const mergedStamps = Array.from(stampMap.values());
+    setStamps(mergedStamps);
+
+    console.log('StampPanel: Merged stamps', {
+      defaultCount: defaultStamps.length,
+      localCount: localCustomStamps.length,
+      backendCount: backendStamps.length,
+      totalUnique: mergedStamps.length
+    });
+  }, [backendStamps]);
 
   const saveStamps = (newStamps) => {
     const customStamps = newStamps.filter(s => !defaultStamps.find(d => d.id === s.id));

frontend/src/components/Toolbar.js

@@ -62,6 +62,7 @@ const Toolbar = ({
   selectedStamp,
   onStampSelect,
   onStampChange,
+  backendStamps,
   onFilterApply,
   onFilterPreview,
   onFilterUndo,
@@ -95,24 +96,25 @@ const Toolbar = ({
           PaperProps={{ sx: { p: 2, borderRadius: 2, boxShadow: 3 } }}
         >
           {tool === "brush" && (
-            <BrushPanel 
+            <BrushPanel
               selectedBrush={currentBrushType}
               onSelect={onBrushSelect}
               onParamsChange={onBrushParamsChange}
             />
           )}
           {tool === "mixer" && (
-            <MixerPanel 
+            <MixerPanel
               onApply={onFilterApply}
               onPreview={onFilterPreview}
               onUndo={onFilterUndo}
               canUndo={canUndoFilter}
             />
           )}
           {tool === "stamp" && (
-            <StampPanel 
+            <StampPanel
               onSelect={onStampSelect}
               onStampChange={onStampChange}
+              backendStamps={backendStamps}
             />
           )}
         </Popover>