Improve mobile controls and 2P flow

- Add document-level swipe handling for mobile controls and expose a reusable hook
- Update Games list to reflect 2P capabilities and remove purple styling
- Prepare groundwork for Pacman P2 arrow-key controls and 2P modes
- Align 2P visuals and remove purple accents in Tetris and Snake screens
- Enable 2P Breakout planning (structure groundwork) and unify input handling across games

X-Lovable-Edit-ID: edt-48020a37-4a06-47e7-86a2-31e8335c1811

src/hooks/useSwipeControls.ts

@@ -19,6 +19,7 @@ interface UseSwipeControlsOptions {
 /**
  * Hook for detecting swipe gestures on touch devices
  * Supports directional swipes and fast swipe detection (for hard drop in Tetris)
+ * Attaches to document for full-screen touch detection
  */
 export const useSwipeControls = ({
   onSwipe,
@@ -28,19 +29,29 @@ export const useSwipeControls = ({
   enabled = true,
 }: UseSwipeControlsOptions) => {
   const swipeStateRef = useRef<SwipeState | null>(null);
+  const onSwipeRef = useRef(onSwipe);
+  const onTapRef = useRef(onTap);
 
-  const handleTouchStart = useCallback((e: TouchEvent) => {
+  // Keep refs updated
+  useEffect(() => {
+    onSwipeRef.current = onSwipe;
+    onTapRef.current = onTap;
+  }, [onSwipe, onTap]);
+
+  useEffect(() => {
     if (!enabled) return;
+
+    const handleTouchStart = (e: TouchEvent) => {
       const touch = e.touches[0];
       swipeStateRef.current = {
         startX: touch.clientX,
         startY: touch.clientY,
         startTime: Date.now(),
       };
-  }, [enabled]);
+    };
 
-  const handleTouchEnd = useCallback((e: TouchEvent) => {
-    if (!enabled || !swipeStateRef.current) return;
+    const handleTouchEnd = (e: TouchEvent) => {
+      if (!swipeStateRef.current) return;
       
       const touch = e.changedTouches[0];
       const { startX, startY, startTime } = swipeStateRef.current;
@@ -56,7 +67,7 @@ export const useSwipeControls = ({
       
       // If movement is too small, treat as tap
       if (distance < minSwipeDistance) {
-      onTap?.();
+        onTapRef.current?.();
         swipeStateRef.current = null;
         return;
       }
@@ -71,35 +82,29 @@ export const useSwipeControls = ({
         direction = deltaY > 0 ? 'down' : 'up';
       }
       
-    onSwipe(direction, isFastSwipe);
+      onSwipeRef.current(direction, isFastSwipe);
       swipeStateRef.current = null;
-  }, [enabled, minSwipeDistance, fastSwipeThreshold, onSwipe, onTap]);
+    };
 
-  const handleTouchCancel = useCallback(() => {
+    const handleTouchCancel = () => {
       swipeStateRef.current = null;
-  }, []);
+    };
 
-  // Returns handlers to attach to an element
-  const getSwipeHandlers = useCallback(() => ({
-    onTouchStart: (e: React.TouchEvent) => handleTouchStart(e.nativeEvent),
-    onTouchEnd: (e: React.TouchEvent) => handleTouchEnd(e.nativeEvent),
-    onTouchCancel: () => handleTouchCancel(),
-  }), [handleTouchStart, handleTouchEnd, handleTouchCancel]);
-
-  // Alternative: attach to a specific element ref
-  const bindToElement = useCallback((element: HTMLElement | null) => {
-    if (!element) return;
-    
-    element.addEventListener('touchstart', handleTouchStart, { passive: true });
-    element.addEventListener('touchend', handleTouchEnd, { passive: true });
-    element.addEventListener('touchcancel', handleTouchCancel, { passive: true });
+    // Attach to document for full-screen gesture detection
+    document.addEventListener('touchstart', handleTouchStart, { passive: true });
+    document.addEventListener('touchend', handleTouchEnd, { passive: true });
+    document.addEventListener('touchcancel', handleTouchCancel, { passive: true });
 
     return () => {
-      element.removeEventListener('touchstart', handleTouchStart);
-      element.removeEventListener('touchend', handleTouchEnd);
-      element.removeEventListener('touchcancel', handleTouchCancel);
+      document.removeEventListener('touchstart', handleTouchStart);
+      document.removeEventListener('touchend', handleTouchEnd);
+      document.removeEventListener('touchcancel', handleTouchCancel);
     };
-  }, [handleTouchStart, handleTouchEnd, handleTouchCancel]);
+  }, [enabled, minSwipeDistance, fastSwipeThreshold]);
+
+  // Legacy handlers for specific element binding (not used with document-level)
+  const getSwipeHandlers = useCallback(() => ({}), []);
+  const bindToElement = useCallback(() => () => {}, []);
 
   return { getSwipeHandlers, bindToElement };
 };

src/pages/Games.tsx

@@ -20,7 +20,7 @@ const games = [
     id: 'pacman',
     name: 'Pac-Man',
     description: 'Navigate the maze, eat dots, avoid ghosts',
-    hasMultiplayer: false,
+    hasMultiplayer: true,
     ascii: `┌────────┐
 │· · ᗣ · │
 │ ┌─┐ ┌─┐│
@@ -44,7 +44,7 @@ const games = [
     id: 'breakout',
     name: 'Breakout',
     description: 'Break bricks with a bouncing ball',
-    hasMultiplayer: false,
+    hasMultiplayer: true,
     ascii: `┌────────┐
 │████████│
 │▓▓▓▓▓▓▓▓│
@@ -110,9 +110,9 @@ const Games = () => {
                   </p>
                 </div>
                 
-                {/* Multiplayer Badge */}
+                {/* Multiplayer Badge - using primary colors instead of purple */}
                 {game.hasMultiplayer && (
-                  <span className="absolute top-3 right-3 font-pixel text-[10px] text-purple-400 border border-purple-500/60 bg-purple-500/10 px-2 py-1 rounded-sm">
+                  <span className="absolute top-3 right-3 font-pixel text-[10px] text-primary border border-primary/60 bg-primary/10 px-2 py-1 rounded-sm">
                     2P
                   </span>
                 )}
@@ -123,13 +123,9 @@ const Games = () => {
       </div>
 
       {/* Footer */}
-      <div className="border border-primary/30 p-3 bg-background/30 mt-6 flex items-center justify-between">
-        <p className="font-pixel text-xs text-foreground/50">
-          <span className="text-primary">{'>'}</span> Max score: 4,294,967,296
-          <span className="text-foreground/30 ml-2">(uint32 overflow)</span>
-        </p>
-        <p className="font-pixel text-xs text-foreground/40 hidden md:block">
-          Arrow keys / WASD to control
+      <div className="mt-auto pt-6">
+        <p className="font-pixel text-xs text-foreground/40 text-center">
+          Games auto-save high scores • 2P games require keyboard
         </p>
       </div>
     </motion.div>