From 0149f0c146bb0ed280f74e5ce64e4e61d3be0c91 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Sun, 23 Aug 2026 17:08:26 -0400
Subject: [PATCH] feat: wire sticker mode state and WebSocket plumbing

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/pages/Picker.jsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Picker.jsx b/frontend/src/pages/Picker.jsx
index e417399..b0263fa 100644
--- a/frontend/src/pages/Picker.jsx
+++ b/frontend/src/pages/Picker.jsx
@@ -32,6 +32,8 @@ function Picker() {
   const [error, setError] = useState('');
   const [showPopularity, setShowPopularity] = useState(true);
   const [sessionEnded, setSessionEnded] = useState(false);
+  const [stickerMode, setStickerMode] = useState('auto');
+  const stickerSendRef = useRef(null);
 
   // Filters
   const [playerCount, setPlayerCount] = useState('');
@@ -1294,6 +1296,8 @@ function Picker() {
             pollStartedAtRef={pollStartedAtRef}
             setSelectedGame={setSelectedGame}
             setGameSource={setGameSource}
+            setStickerMode={setStickerMode}
+            stickerSendRef={stickerSendRef}
           />
         </div>
       </div>
@@ -1301,7 +1305,7 @@ function Picker() {
   );
 }
 
-function SessionInfo({ sessionId, onGamesUpdate, playingGame, setPlayingGame, setHasPlayedGames, setLeadingGame, setPollActive, pollActiveRef, setPollResult, setPollEndingAt, setShowEndPollOptions, pollStartedAtRef, setSelectedGame, setGameSource }) {
+function SessionInfo({ sessionId, onGamesUpdate, playingGame, setPlayingGame, setHasPlayedGames, setLeadingGame, setPollActive, pollActiveRef, setPollResult, setPollEndingAt, setShowEndPollOptions, pollStartedAtRef, setSelectedGame, setGameSource, setStickerMode, stickerSendRef }) {
   const { isAuthenticated, token } = useAuth();
   const [games, setGames] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -1392,6 +1396,13 @@ function SessionInfo({ sessionId, onGamesUpdate, playingGame, setPlayingGame, se
                 ws.send(JSON.stringify({ type: 'ping' }));
               }
             }, 30000);
+
+            stickerSendRef.current = (mode) => {
+              if (ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'stickers.setMode', data: { mode } }));
+              }
+            };
+
             return;
           }
 
@@ -1467,6 +1478,11 @@ function SessionInfo({ sessionId, onGamesUpdate, playingGame, setPlayingGame, se
             return;
           }
 
+          if (message.type === 'stickers.mode') {
+            setStickerMode(message.mode);
+            return;
+          }
+
           if (reloadEvents.includes(message.type)) {
             console.log(`[WebSocket] ${message.type}:`, message.data);
             if (message.type === 'game.added') {
@@ -1487,6 +1503,7 @@ function SessionInfo({ sessionId, onGamesUpdate, playingGame, setPlayingGame, se
       ws.onclose = () => {
         console.log('[WebSocket] Disconnected, reconnecting in 3s...');
         clearInterval(pingIntervalRef.current);
+        stickerSendRef.current = null;
         reconnectTimeoutRef.current = setTimeout(connectWs, 3000);
       };
 
@@ -1495,7 +1512,7 @@ function SessionInfo({ sessionId, onGamesUpdate, playingGame, setPlayingGame, se
       console.error('[WebSocket] Failed to connect:', error);
       reconnectTimeoutRef.current = setTimeout(connectWs, 3000);
     }
-  }, [sessionId, token, loadGames, setPollActive, setPollResult, setPollEndingAt, setShowEndPollOptions, setLeadingGame, pollActiveRef, pollStartedAtRef, setSelectedGame, setGameSource]);
+  }, [sessionId, token, loadGames, setPollActive, setPollResult, setPollEndingAt, setShowEndPollOptions, setLeadingGame, pollActiveRef, pollStartedAtRef, setSelectedGame, setGameSource, setStickerMode, stickerSendRef]);
 
   useEffect(() => {
     connectWs();