@smoregg/sdk 0.1.0

package/dist/umd/smore-sdk.umd.js

@@ -0,0 +1,709 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SmoreSDK = {}, global.ReactJSXRuntime, global.React));
+})(this, (function (exports, jsxRuntime, react) { 'use strict';
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css_248z$3 = ".TapButton-module_tapButton__dqJr9{-webkit-tap-highlight-color:transparent;align-items:center;background:var(--color-primary,#6366f1);border:none;border-radius:16px;color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;justify-content:center;min-height:80px;min-width:80px;padding:16px 24px;touch-action:manipulation;transition:transform .1s ease,background .1s ease;user-select:none;-webkit-user-select:none}.TapButton-module_pressed__Z2nfR,.TapButton-module_tapButton__dqJr9:active{background:var(--color-primary-dark,#4f46e5);transform:scale(.95)}.TapButton-module_disabled__3bR6q{cursor:not-allowed;opacity:.5}.TapButton-module_disabled__3bR6q.TapButton-module_pressed__Z2nfR,.TapButton-module_disabled__3bR6q:active{background:var(--color-primary,#6366f1);transform:none}";
+  var styles$3 = {"tapButton":"TapButton-module_tapButton__dqJr9","pressed":"TapButton-module_pressed__Z2nfR","disabled":"TapButton-module_disabled__3bR6q"};
+  styleInject(css_248z$3);
+
+  function TapButton({
+    onTap,
+    children,
+    className,
+    disabled = false
+  }) {
+    const isPressed = react.useRef(false);
+    const buttonRef = react.useRef(null);
+    const handleTouchStart = react.useCallback((e) => {
+      if (disabled) return;
+      e.preventDefault();
+      isPressed.current = true;
+      buttonRef.current?.classList.add(styles$3.pressed);
+      if (navigator.vibrate) {
+        navigator.vibrate(10);
+      }
+      onTap();
+    }, [onTap, disabled]);
+    const handleTouchEnd = react.useCallback((e) => {
+      e.preventDefault();
+      isPressed.current = false;
+      buttonRef.current?.classList.remove(styles$3.pressed);
+    }, []);
+    const handleMouseDown = react.useCallback(() => {
+      if (disabled) return;
+      isPressed.current = true;
+      buttonRef.current?.classList.add(styles$3.pressed);
+      onTap();
+    }, [onTap, disabled]);
+    const handleMouseUp = react.useCallback(() => {
+      isPressed.current = false;
+      buttonRef.current?.classList.remove(styles$3.pressed);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: `${styles$3.tapButton} ${className || ""} ${disabled ? styles$3.disabled : ""}`,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseUp,
+        disabled,
+        children
+      }
+    );
+  }
+
+  var css_248z$2 = ".HoldButton-module_holdButton__tu4mi{-webkit-tap-highlight-color:transparent;align-items:center;background:var(--color-secondary,#f59e0b);border:none;border-radius:16px;color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;justify-content:center;min-height:80px;min-width:80px;padding:16px 24px;touch-action:manipulation;transition:transform .1s ease,background .1s ease;user-select:none;-webkit-user-select:none}.HoldButton-module_holdButton__tu4mi:active,.HoldButton-module_pressed__JWIRG{background:var(--color-secondary-dark,#d97706);transform:scale(.95)}.HoldButton-module_disabled__4QwwT{cursor:not-allowed;opacity:.5}.HoldButton-module_disabled__4QwwT.HoldButton-module_pressed__JWIRG,.HoldButton-module_disabled__4QwwT:active{background:var(--color-secondary,#f59e0b);transform:none}";
+  var styles$2 = {"holdButton":"HoldButton-module_holdButton__tu4mi","pressed":"HoldButton-module_pressed__JWIRG","disabled":"HoldButton-module_disabled__4QwwT"};
+  styleInject(css_248z$2);
+
+  function HoldButton({
+    onHoldStart,
+    onHoldEnd,
+    children,
+    className,
+    disabled = false
+  }) {
+    const isHolding = react.useRef(false);
+    const buttonRef = react.useRef(null);
+    const startHold = react.useCallback(() => {
+      if (disabled || isHolding.current) return;
+      isHolding.current = true;
+      buttonRef.current?.classList.add(styles$2.pressed);
+      if (navigator.vibrate) {
+        navigator.vibrate(10);
+      }
+      onHoldStart();
+    }, [onHoldStart, disabled]);
+    const endHold = react.useCallback(() => {
+      if (!isHolding.current) return;
+      isHolding.current = false;
+      buttonRef.current?.classList.remove(styles$2.pressed);
+      onHoldEnd();
+    }, [onHoldEnd]);
+    const handleTouchStart = react.useCallback((e) => {
+      e.preventDefault();
+      startHold();
+    }, [startHold]);
+    const handleTouchEnd = react.useCallback((e) => {
+      e.preventDefault();
+      endHold();
+    }, [endHold]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: `${styles$2.holdButton} ${className || ""} ${disabled ? styles$2.disabled : ""}`,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd,
+        onMouseDown: startHold,
+        onMouseUp: endHold,
+        onMouseLeave: endHold,
+        disabled,
+        children
+      }
+    );
+  }
+
+  var css_248z$1 = ".DirectionPad-module_padContainer__iL-rh{align-items:center;display:flex;flex-direction:column;gap:8px;user-select:none;-webkit-user-select:none}.DirectionPad-module_horizontal__kI4j7{flex-direction:row;gap:16px}.DirectionPad-module_vertical__b8Xec{flex-direction:column;gap:16px}.DirectionPad-module_row__mzuUr{display:flex;gap:8px}.DirectionPad-module_dirButton__QCCHz{-webkit-tap-highlight-color:transparent;align-items:center;background:var(--color-surface,#374151);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-size:24px;height:70px;justify-content:center;touch-action:manipulation;transition:transform .1s ease,background .1s ease;width:70px}.DirectionPad-module_dirButton__QCCHz:active{background:var(--color-primary,#6366f1);transform:scale(.9)}.DirectionPad-module_horizontal__kI4j7 .DirectionPad-module_dirButton__QCCHz,.DirectionPad-module_vertical__b8Xec .DirectionPad-module_dirButton__QCCHz{font-size:32px;height:100px;width:100px}";
+  var styles$1 = {"padContainer":"DirectionPad-module_padContainer__iL-rh","horizontal":"DirectionPad-module_horizontal__kI4j7","vertical":"DirectionPad-module_vertical__b8Xec","row":"DirectionPad-module_row__mzuUr","dirButton":"DirectionPad-module_dirButton__QCCHz"};
+  styleInject(css_248z$1);
+
+  function DirectionPad({
+    onDirection,
+    leftRightOnly = false,
+    upDownOnly = false,
+    className
+  }) {
+    const pressedRef = react.useRef(/* @__PURE__ */ new Set());
+    const handlePress = react.useCallback((direction) => {
+      if (pressedRef.current.has(direction)) return;
+      pressedRef.current.add(direction);
+      if (navigator.vibrate) {
+        navigator.vibrate(10);
+      }
+      onDirection(direction);
+    }, [onDirection]);
+    const handleRelease = react.useCallback((direction) => {
+      pressedRef.current.delete(direction);
+    }, []);
+    const createButton = (direction, label) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: `${styles$1.dirButton} ${styles$1[direction]}`,
+        onTouchStart: (e) => {
+          e.preventDefault();
+          handlePress(direction);
+        },
+        onTouchEnd: (e) => {
+          e.preventDefault();
+          handleRelease(direction);
+        },
+        onTouchCancel: () => handleRelease(direction),
+        onMouseDown: () => handlePress(direction),
+        onMouseUp: () => handleRelease(direction),
+        onMouseLeave: () => handleRelease(direction),
+        children: label
+      },
+      direction
+    );
+    if (leftRightOnly) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$1.padContainer} ${styles$1.horizontal} ${className || ""}`, children: [
+        createButton("left", "\u25C0"),
+        createButton("right", "\u25B6")
+      ] });
+    }
+    if (upDownOnly) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$1.padContainer} ${styles$1.vertical} ${className || ""}`, children: [
+        createButton("up", "\u25B2"),
+        createButton("down", "\u25BC")
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$1.padContainer} ${styles$1.full} ${className || ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.row, children: createButton("up", "\u25B2") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.row, children: [
+        createButton("left", "\u25C0"),
+        createButton("right", "\u25B6")
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.row, children: createButton("down", "\u25BC") })
+    ] });
+  }
+
+  var css_248z = ".SwipeArea-module_swipeArea__yob7L{height:100%;touch-action:none;user-select:none;-webkit-user-select:none;width:100%}";
+  var styles = {"swipeArea":"SwipeArea-module_swipeArea__yob7L"};
+  styleInject(css_248z);
+
+  function SwipeArea({
+    onSwipe,
+    threshold = 50,
+    children,
+    className
+  }) {
+    const touchStart = react.useRef(null);
+    const handleTouchStart = react.useCallback((e) => {
+      const touch = e.touches[0];
+      if (!touch) return;
+      touchStart.current = { x: touch.clientX, y: touch.clientY };
+    }, []);
+    const handleTouchEnd = react.useCallback((e) => {
+      if (!touchStart.current) return;
+      const touch = e.changedTouches[0];
+      if (!touch) return;
+      const deltaX = touch.clientX - touchStart.current.x;
+      const deltaY = touch.clientY - touchStart.current.y;
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
+      if (absX < threshold && absY < threshold) {
+        touchStart.current = null;
+        return;
+      }
+      let direction;
+      if (absX > absY) {
+        direction = deltaX > 0 ? "right" : "left";
+      } else {
+        direction = deltaY > 0 ? "down" : "up";
+      }
+      if (navigator.vibrate) {
+        navigator.vibrate(15);
+      }
+      onSwipe(direction);
+      touchStart.current = null;
+    }, [onSwipe, threshold]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${styles.swipeArea} ${className || ""}`,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: () => {
+          touchStart.current = null;
+        },
+        children
+      }
+    );
+  }
+
+  class DirectTransport {
+    constructor(socket) {
+      this.socket = socket;
+    }
+    emit(event, ...args) {
+      this.socket.emit(event, ...args);
+    }
+    on(event, handler) {
+      this.socket.on(event, handler);
+    }
+    off(event, handler) {
+      if (handler) {
+        this.socket.off(event, handler);
+      } else {
+        this.socket.off(event);
+      }
+    }
+  }
+
+  const TransportContext = react.createContext(null);
+  function useTransport() {
+    const transport = react.useContext(TransportContext);
+    if (!transport) {
+      throw new Error("useTransport must be used within a RoomProvider that supplies a Transport");
+    }
+    return transport;
+  }
+  const RoomContext = react.createContext(null);
+  const HostRoomProvider = ({
+    roomCode,
+    players,
+    leaderId,
+    socket,
+    children
+  }) => {
+    const connectedPlayers = react.useMemo(
+      () => players.filter((p) => p.connected !== false),
+      [players]
+    );
+    const hostState = react.useMemo(
+      () => ({ roomCode, players, connectedPlayers, leaderId, socket }),
+      [roomCode, players, connectedPlayers, leaderId, socket]
+    );
+    const value = react.useMemo(
+      () => ({
+        roomCode,
+        players,
+        connectedPlayers,
+        leaderId,
+        side: "host",
+        host: hostState,
+        player: null
+      }),
+      [roomCode, players, connectedPlayers, leaderId, hostState]
+    );
+    const transport = react.useMemo(() => new DirectTransport(socket), [socket]);
+    return /* @__PURE__ */ jsxRuntime.jsx(TransportContext.Provider, { value: transport, children: /* @__PURE__ */ jsxRuntime.jsx(RoomContext.Provider, { value, children }) });
+  };
+  const PlayerRoomProvider = ({
+    roomCode,
+    players,
+    leaderId,
+    mySessionId,
+    isLeader,
+    socket,
+    isConnected,
+    children
+  }) => {
+    const connectedPlayers = react.useMemo(
+      () => players.filter((p) => p.connected !== false),
+      [players]
+    );
+    const playerState = react.useMemo(
+      () => ({
+        roomCode,
+        players,
+        connectedPlayers,
+        leaderId,
+        mySessionId,
+        isLeader,
+        socket,
+        isConnected
+      }),
+      [roomCode, players, connectedPlayers, leaderId, mySessionId, isLeader, socket, isConnected]
+    );
+    const value = react.useMemo(
+      () => ({
+        roomCode,
+        players,
+        connectedPlayers,
+        leaderId,
+        side: "player",
+        host: null,
+        player: playerState
+      }),
+      [roomCode, players, connectedPlayers, leaderId, playerState]
+    );
+    const transport = react.useMemo(() => new DirectTransport(socket), [socket]);
+    return /* @__PURE__ */ jsxRuntime.jsx(TransportContext.Provider, { value: transport, children: /* @__PURE__ */ jsxRuntime.jsx(RoomContext.Provider, { value, children }) });
+  };
+  function useRoom() {
+    const context = react.useContext(RoomContext);
+    if (!context) {
+      throw new Error("useRoom must be used within HostRoomProvider or PlayerRoomProvider");
+    }
+    return context;
+  }
+  function useHostRoom() {
+    const context = useRoom();
+    if (context.side !== "host" || !context.host) {
+      throw new Error("useHostRoom must be used within HostRoomProvider");
+    }
+    return context.host;
+  }
+  function usePlayerRoom() {
+    const context = useRoom();
+    if (context.side !== "player" || !context.player) {
+      throw new Error("usePlayerRoom must be used within PlayerRoomProvider");
+    }
+    return context.player;
+  }
+
+  const SMORE_MSG_PREFIX = "smore:";
+  function isSmoreMessage(data) {
+    return data && typeof data === "object" && typeof data.type === "string" && data.type.startsWith(SMORE_MSG_PREFIX);
+  }
+
+  class PostMessageTransport {
+    handlers = /* @__PURE__ */ new Map();
+    ackCallbacks = /* @__PURE__ */ new Map();
+    ackCounter = 0;
+    parentOrigin;
+    boundMessageHandler;
+    constructor(parentOrigin = "*") {
+      this.parentOrigin = parentOrigin;
+      this.boundMessageHandler = this.handleMessage.bind(this);
+      window.addEventListener("message", this.boundMessageHandler);
+    }
+    emit(event, ...args) {
+      let data = args[0];
+      let ackId;
+      if (args.length >= 2 && typeof args[args.length - 1] === "function") {
+        data = args.length === 2 ? args[0] : args[0];
+        const callback = args[args.length - 1];
+        ackId = `ack_${++this.ackCounter}`;
+        this.ackCallbacks.set(ackId, callback);
+      }
+      window.parent.postMessage(
+        { type: "smore:emit", payload: { event, data, ackId } },
+        this.parentOrigin
+      );
+    }
+    on(event, handler) {
+      let set = this.handlers.get(event);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        this.handlers.set(event, set);
+      }
+      set.add(handler);
+    }
+    off(event, handler) {
+      if (!handler) {
+        this.handlers.delete(event);
+        return;
+      }
+      this.handlers.get(event)?.delete(handler);
+    }
+    destroy() {
+      window.removeEventListener("message", this.boundMessageHandler);
+      this.handlers.clear();
+      this.ackCallbacks.clear();
+    }
+    handleMessage(e) {
+      if (this.parentOrigin !== "*" && e.origin !== this.parentOrigin) return;
+      const msg = e.data;
+      if (!isSmoreMessage(msg)) return;
+      if (msg.type === "smore:event") {
+        const { event, data } = msg.payload;
+        const set = this.handlers.get(event);
+        if (set) {
+          set.forEach((handler) => handler(data));
+        }
+      } else if (msg.type === "smore:ack") {
+        const { ackId, data } = msg.payload;
+        const cb = this.ackCallbacks.get(ackId);
+        if (cb) {
+          this.ackCallbacks.delete(ackId);
+          cb(data);
+        }
+      }
+    }
+  }
+
+  function useGameHost(config) {
+    const { gameId, onInput, onStateRequest, onPlayerLeave, onPlayerDisconnect, onPlayerReconnect, listeners } = config;
+    const hostRoom = useHostRoom();
+    const transport = useTransport();
+    const onInputRef = react.useRef(onInput);
+    const onStateRequestRef = react.useRef(onStateRequest);
+    const onPlayerLeaveRef = react.useRef(onPlayerLeave);
+    const onPlayerDisconnectRef = react.useRef(onPlayerDisconnect);
+    const onPlayerReconnectRef = react.useRef(onPlayerReconnect);
+    react.useEffect(() => {
+      onInputRef.current = onInput;
+    }, [onInput]);
+    react.useEffect(() => {
+      onStateRequestRef.current = onStateRequest;
+    }, [onStateRequest]);
+    react.useEffect(() => {
+      onPlayerLeaveRef.current = onPlayerLeave;
+    }, [onPlayerLeave]);
+    react.useEffect(() => {
+      onPlayerDisconnectRef.current = onPlayerDisconnect;
+    }, [onPlayerDisconnect]);
+    react.useEffect(() => {
+      onPlayerReconnectRef.current = onPlayerReconnect;
+    }, [onPlayerReconnect]);
+    react.useEffect(() => {
+      if (!transport || !onInputRef.current) return;
+      const registeredEvents = [];
+      const inputMap = onInputRef.current;
+      for (const key of Object.keys(inputMap)) {
+        const eventName = `${gameId}:${key}`;
+        const handler = (data) => {
+          const currentHandler = onInputRef.current?.[key];
+          if (currentHandler) {
+            currentHandler(data?.sessionId ?? data?.playerId, data);
+          }
+        };
+        transport.on(eventName, handler);
+        registeredEvents.push({ event: eventName, handler });
+      }
+      return () => {
+        for (const { event, handler } of registeredEvents) {
+          transport.off(event, handler);
+        }
+      };
+    }, [gameId, transport]);
+    react.useEffect(() => {
+      if (!transport) return;
+      const handler = (data) => {
+        const stateFn = onStateRequestRef.current;
+        if (!stateFn) return;
+        const gameState = stateFn(data.requesterId);
+        transport.emit("game:state-response", {
+          targetSessionId: data.requesterId,
+          gameState: {
+            gameId,
+            ...gameState
+          }
+        });
+      };
+      transport.on("game:state-request", handler);
+      return () => {
+        transport.off("game:state-request", handler);
+      };
+    }, [transport, gameId]);
+    react.useEffect(() => {
+      if (!transport) return;
+      const onLeft = (data) => {
+        onPlayerLeaveRef.current?.(data?.sessionId ?? data?.playerId);
+      };
+      const onDisconnected = (data) => {
+        onPlayerDisconnectRef.current?.(data?.sessionId ?? data?.playerId);
+      };
+      const onReconnected = (data) => {
+        onPlayerReconnectRef.current?.(data?.sessionId ?? data?.playerId);
+      };
+      transport.on("room:player-left", onLeft);
+      transport.on("room:player-disconnected", onDisconnected);
+      transport.on("room:player-reconnected", onReconnected);
+      return () => {
+        transport.off("room:player-left", onLeft);
+        transport.off("room:player-disconnected", onDisconnected);
+        transport.off("room:player-reconnected", onReconnected);
+      };
+    }, [transport]);
+    const listenersRef = react.useRef(listeners);
+    listenersRef.current = listeners;
+    react.useEffect(() => {
+      if (!transport || !listenersRef.current) return;
+      const entries = Object.entries(listenersRef.current);
+      const handlers = entries.map(([event, handler]) => {
+        transport.on(event, handler);
+        return () => {
+          transport.off(event, handler);
+        };
+      });
+      return () => handlers.forEach((fn) => fn());
+    }, [transport, listeners]);
+    const broadcast = react.useCallback(
+      (event, data) => {
+        transport?.emit(event, data);
+      },
+      [transport]
+    );
+    const sendToPlayer = react.useCallback(
+      (sessionId, event, data) => {
+        transport?.emit("game:state-to-player", {
+          targetSessionId: sessionId,
+          gameId,
+          event,
+          state: data
+        });
+      },
+      [transport, gameId]
+    );
+    const emitGameOver = react.useCallback(
+      (results) => {
+        transport?.emit("room:game-over", { gameId, results });
+      },
+      [transport, gameId]
+    );
+    return {
+      room: hostRoom,
+      broadcast,
+      sendToPlayer,
+      emitGameOver
+    };
+  }
+
+  function useGamePlayer(config) {
+    const room = usePlayerRoom();
+    const transport = useTransport();
+    const { isConnected } = room;
+    const { gameId, listeners } = config;
+    const [gameState, setGameState] = react.useState(null);
+    const listenersRef = react.useRef(listeners);
+    listenersRef.current = listeners;
+    react.useEffect(() => {
+      if (!transport || !listenersRef.current) return;
+      const cleanups = [];
+      Object.entries(listenersRef.current).forEach(([event, handler]) => {
+        transport.on(event, handler);
+        cleanups.push(() => transport.off(event, handler));
+      });
+      return () => cleanups.forEach((fn) => fn());
+    }, [transport, listeners]);
+    react.useEffect(() => {
+      if (!transport) return;
+      const handler = (state) => {
+        if (state.gameId !== gameId) return;
+        setGameState(state);
+      };
+      transport.on("game:state-response", handler);
+      return () => {
+        transport.off("game:state-response", handler);
+      };
+    }, [transport, gameId]);
+    react.useEffect(() => {
+      if (!transport) return;
+      const handler = (data) => {
+        if (data.gameId !== gameId) return;
+        setGameState(data.state);
+      };
+      transport.on("game:state-to-player", handler);
+      return () => {
+        transport.off("game:state-to-player", handler);
+      };
+    }, [transport, gameId]);
+    react.useEffect(() => {
+      if (!transport) return;
+      const handler = () => {
+        if (!document.hidden) {
+          transport.emit("game:request-state", { gameId });
+        }
+      };
+      document.addEventListener("visibilitychange", handler);
+      return () => document.removeEventListener("visibilitychange", handler);
+    }, [transport, gameId]);
+    const emit = react.useCallback((event, data, callback) => {
+      if (!transport) return;
+      if (callback) {
+        transport.emit(event, data, callback);
+      } else {
+        transport.emit(event, data);
+      }
+    }, [transport]);
+    const sendTapInput = react.useCallback((action) => {
+      if (!transport) return;
+      transport.emit(`${gameId}:${action}`);
+    }, [transport, gameId]);
+    const sendHoldInput = react.useCallback((action, type) => {
+      if (!transport) return;
+      transport.emit(`${gameId}:${action}:${type}`);
+    }, [transport, gameId]);
+    return { room, emit, sendTapInput, sendHoldInput, isConnected, gameState };
+  }
+
+  function useExternalGames(config) {
+    const { serverUrl, enabled = true } = config;
+    const [games, setGames] = react.useState([]);
+    const [loading, setLoading] = react.useState(false);
+    const [error, setError] = react.useState(null);
+    const [refreshKey, setRefreshKey] = react.useState(0);
+    react.useEffect(() => {
+      if (!enabled) return;
+      let cancelled = false;
+      setLoading(true);
+      fetch(`${serverUrl}/api/games`).then((res) => res.json()).then((data) => {
+        if (cancelled) return;
+        const external = (data.games || []).map((g) => ({
+          id: g.id,
+          title: g.title,
+          description: g.description || "",
+          minPlayers: g.minPlayers || 2,
+          maxPlayers: g.maxPlayers || 8,
+          thumbnail: g.thumbnail || "/thumbnails/g8.jpeg",
+          categories: g.categories || ["party"],
+          type: "external",
+          hostUrl: g.hostUrl,
+          playerUrl: g.playerUrl,
+          available: !!(g.hostUrl && g.playerUrl),
+          rating: 4,
+          heroRequired: false
+        }));
+        setGames(external);
+        setError(null);
+      }).catch((err) => {
+        if (cancelled) return;
+        setError(err.message);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [serverUrl, enabled, refreshKey]);
+    const refresh = () => setRefreshKey((k) => k + 1);
+    return { games, loading, error, refresh };
+  }
+
+  exports.DirectTransport = DirectTransport;
+  exports.DirectionPad = DirectionPad;
+  exports.HoldButton = HoldButton;
+  exports.HostRoomProvider = HostRoomProvider;
+  exports.PlayerRoomProvider = PlayerRoomProvider;
+  exports.PostMessageTransport = PostMessageTransport;
+  exports.SwipeArea = SwipeArea;
+  exports.TapButton = TapButton;
+  exports.TransportContext = TransportContext;
+  exports.useExternalGames = useExternalGames;
+  exports.useGameHost = useGameHost;
+  exports.useGamePlayer = useGamePlayer;
+  exports.useHostRoom = useHostRoom;
+  exports.usePlayerRoom = usePlayerRoom;
+  exports.useRoom = useRoom;
+  exports.useTransport = useTransport;
+
+}));
+//# sourceMappingURL=smore-sdk.umd.js.map