// ================================================== // SYSTEM PROMPT (DO NOT REMOVE) // ================================================== /** * =========================== * PLAYROOM API REFERENCE * =========================== * * This reference provides a comprehensive overview of all available functions, methods, classes, * and React hooks for integrating and managing Playroom's multiplayer features. You can paste this * at the top of your file as a system-level comment for the AI to reference. * * * ---------------------------------------------------------------- * 1. Initialization * ---------------------------------------------------------------- * * --- insertCoin({ InitOptions }, [onLaunchCallback], [onDisconnectCallback]) --- * * Tells Playroom to start! Playroom Kit will handle room creation, players joining, and allows * players to pick their names, colors, and avatars. Once the host taps "Launch", the returned * promise resolves (and onLaunchCallback is called if provided). At this point you can start your game. * * Example: * // Show Playroom UI, let it handle players joining etc. Wait for host to tap "Launch" * await insertCoin(); * // Start your game! * * --- InitOptions --- * * An object with the following properties: * * - gameId: string (default: undefined) * The ID of the game from the Playroom developer portal. * * - streamMode: boolean (default: false) * If true, Playroom will start in stream mode. * * - liveMode: string (default: false) * If set to "tiktok", Playroom will start in TikTok Live mode. * * - allowGamepads: boolean (default: false) * If true, Playroom will let players use gamepads connected to the stream device itself. * Requires streamMode to be true. * The gamepads need to be connected to the device where the stream screen is running. * Phones remain optional as controllers if there are not enough physical gamepads. * * - baseUrl: string (default: current page URL) * Base URL used for generating the room link that the host shares with other players. * * - avatars: Array (default: Playroom-provided avatars) * An array of URLs to images that players can pick as their avatar, overriding the default system. * * - enableBots: boolean (default: false) * If true, Playroom initializes a bot using the provided botOptions. * * - botOptions: BotOptions (default: undefined) * An object containing parameters for bot instantiation and configuration. * * - roomCode: string (default: undefined) * Override the room to join. If not set, a random room code is assigned. * If the URL has a #r= param, that is used instead of this. * * - skipLobby: boolean (default: false) * Skips the Playroom's lobby screen altogether (useful for a custom multiplayer lobby). * * - reconnectGracePeriod: number (default: 0) * If set, Playroom waits for the given number of milliseconds for a player to reconnect * after a disconnect before fully removing the player from the room. * * - maxPlayersPerRoom: number (default: undefined) * If set, sets a maximum limit for the number of players per room. Exceeding the limit * triggers a ROOM_LIMIT_EXCEEDED error. * * - defaultStates: Object (default: undefined) * Default game states set when the room is created. * * - defaultPlayerStates: Object (default: undefined) * Default player states set for all players when they join the room. * * - matchmaking: MatchmakingOptions | boolean (default: false) * An object containing matchmaking options or simply `true` to enable with default options. * * - discord: boolean (default: false) * Enable Discord mode. See Discord Mode section for more info. * * Example with maxPlayersPerRoom: * try { * await insertCoin({ * maxPlayersPerRoom: 2, // limit for 2 players per room * }); * } catch (error) {} * * If skipLobby is true, Playroom skips the default lobby and "room is full" modal: * try { * await insertCoin({ * skipLobby: true, * maxPlayersPerRoom: 2, * }); * } catch (error) { * if (error.message === "ROOM_LIMIT_EXCEEDED") { * // Handle custom error * } * } * * * ---------------------------------------------------------------- * 2. Game State Management * ---------------------------------------------------------------- * * --- getState(key: string): any --- * Returns the current value of the specified key in the global game state. * const winnerId = getState('winner'); * * * --- setState(key: string, value: any, reliable: boolean = true): void --- * Sets the value of the specified key in the global game state. * * - reliable = true: State is synced via WebSockets (reliable). * - reliable = false: State is synced via WebRTC (faster but less reliable). * * Example: * setState('winner', 'player1'); * * * --- resetStates(keysToExclude?: string[]): Promise --- * Resets all game states to their default values. If keysToExclude is provided, * those keys are not reset. * * Example: * await resetStates(); * // or * await resetStates(['winner']); * * * --- resetPlayersStates(keysToExclude?: string[]): Promise --- * Resets all players' states to their default values. If keysToExclude is provided, * those keys are not reset. * * Example: * await resetPlayersStates(); * // or * await resetPlayersStates(['score']); * * * ---------------------------------------------------------------- * 3. Player Events & Utilities * ---------------------------------------------------------------- * * --- onPlayerJoin(callback) --- * Registers a callback that triggers when a new player joins the room. * The callback receives the player's PlayerState object. * * *Important:* This callback first runs with all existing players, then * continues to trigger for new players. Useful for obtaining a full player list * or catching new arrivals mid-game. * * Example: * onPlayerJoin((player) => { * console.log(`${player.id} joined!`); * }); * * --- isHost(): boolean --- * Returns true if the current player is the host. * if (isHost()) { * // Do host-only stuff * } * * --- transferHost(playerId: string): Promise --- * Transfers host privileges to the specified player. Must be called by the current host. * * Example: * try { * await transferHost(playerId); * } catch (error) {} * * --- isStreamScreen(): boolean --- * Returns true if the current screen is the stream screen (i.e., in streamMode). * if (isStreamScreen()) { * // Stream screen only actions * } * * --- getRoomCode(): string --- * Returns the 4-letter room code of the current room. * * * ---------------------------------------------------------------- * 4. Matchmaking * ---------------------------------------------------------------- * * --- startMatchmaking(): Promise --- * If matchmaking was not enabled in insertCoin, call this manually to start matchmaking. * * Example: * // Insert coin normally * await insertCoin({ skipLobby: true }); * // ...somewhere else * await startMatchmaking(); * * --- MatchmakingOptions --- * Properties for configuring matchmaking: * * - waitBeforeCreatingNewRoom: number (default: 5000) * Time (ms) to wait for an existing room before creating a new one. * * * ---------------------------------------------------------------- * 5. Disconnection & Room Exit * ---------------------------------------------------------------- * * --- onDisconnect(callback) --- * Registers a callback that is called when the current player disconnects, * or is kicked from the room. * * Example: * onDisconnect((e) => { * console.log('Disconnected!', e.code, e.reason); * }); * * * ---------------------------------------------------------------- * 6. Bots * ---------------------------------------------------------------- * * --- addBot() --- * Adds a bot to the room. Equivalent to clicking "Add Bot" in the lobby. * Returns a promise that resolves to an instance of the class provided via * botOptions.botClass in insertCoin. * * Example: * const newBot = await addBot(); * * --- BotOptions --- * Used to specify configurations for bots: * * - botClass: a class that extends Bot * The class/constructor used to instantiate a new bot (must conform to Bot interface). * * - botParams?: Object * Parameters passed to the botClass constructor for custom behaviors/configs. * * --- Bot --- * The Bot interface extends behaviors similar to a PlayerState object. Its logic * (decision-making, interactions, etc.) is entirely dependent on your * custom botClass implementation. * * * ---------------------------------------------------------------- * 7. Current Player Helpers * ---------------------------------------------------------------- * * --- myPlayer() or me() --- * Returns the current player's PlayerState object. * * Example: * const player = myPlayer(); * console.log(`Hello ${player.getProfile().name}!`); * * * ---------------------------------------------------------------- * 8. State Waiting * ---------------------------------------------------------------- * * --- waitForState(stateKey: string, [onStateSetCallback]): Promise --- * Waits for the global game state to have a specific key set to a truthy value. * Optionally accepts a callback that fires once the state is set. * * Example: * // Wait for "winner" to be set * const winnerId = await waitForState('winner'); * * --- waitForPlayerState(player: PlayerState, stateKey: string, [onStateSetCallback]): Promise --- * Waits for the given player's state to have a specific key set to a truthy value. * Optionally accepts a callback that fires once the state is set. * * Example: * const chosenThing = await waitForPlayerState(playerState, 'playedTurn'); * * * ---------------------------------------------------------------- * 9. Remote Procedure Calls (RPC) * ---------------------------------------------------------------- * * --- RPC.register(name: string, callback: (data: any, sender: PlayerState) => Promise) --- * Registers a callback for a given RPC name. Triggered when another client calls this RPC. * The callback receives data and the sender's PlayerState. * * Example: * RPC.register('playTurn', (data, sender) => { * console.log(`${sender.id} played their turn!`); * return 'ok'; * }); * * --- RPC.call(name: string, data: any, mode?: RPC.MODE, callbackOnResponse?: (data: any) => void): Promise --- * Calls a remote procedure with the given name and data. Optional mode: * * - RPC.Mode.HOST: calls the host only. * - RPC.Mode.ALL: calls all clients (including the host and caller). * - RPC.Mode.OTHERS: calls all clients except the caller. * * Returns a promise resolving to the response (or you can use callbackOnResponse). * * Example: * // Call only the host * RPC.call('playTurn', { thing: 'rock' }, RPC.Mode.HOST); * // Call all clients * RPC.call('playTurn', { thing: 'rock' }, RPC.Mode.ALL); * // Call all except caller * RPC.call('playTurn', { thing: 'rock' }, RPC.Mode.OTHERS); * * * ---------------------------------------------------------------- * 10. PlayerState * ---------------------------------------------------------------- * * A PlayerState object represents an individual player in the room: * * - id: string * Unique player ID. * * - getProfile(): PlayerProfile * Returns the player's profile with: * name: string, * color: { r, g, b, hexString, hex }, * photo: string (dataURL), * avatarIndex: number (index in the avatars array, or -1 if none). * * - getState(key: string): any * Gets a specific key from the player's state. * * - setState(key: string, value: any, reliable: boolean = false) * Sets a key in the player's state. * reliable = true => syncs via WebSockets * reliable = false => syncs via WebRTC * * - onQuit(callback): unsubscribeCallback * Register a callback for when this player quits. * Returns a function to unsubscribe the callback. * * - kick(): Promise * Kicks this player from the room (host only). * * - isBot(): boolean * Returns true if this player is a bot. * * * ---------------------------------------------------------------- * 11. Joystick Controller * ---------------------------------------------------------------- * * A built-in UI component for user input (particularly on mobile): * * --- Joystick(state: PlayerState, options: JoystickOptions) --- * * Example: * import { Joystick, myPlayer } from 'playroomkit'; * new Joystick(myPlayer(), { * type: "dpad" * }) * * --- JoystickOptions --- * - type: string (default: "angular") * "dpad" or "angular" to determine the style of joystick output. * * - buttons: Array (default: []) * Additional on-screen buttons to render. * * - zones: ZoneOptions (default: null) * Custom 4-sided zones for the joystick. Similar to buttons, but triggered by directional drag. * * - keyboard: boolean (default: true) * If true, W/A/S/D keys also control the joystick. * * --- ButtonOptions --- * - id: string * - label: string * - icon: string (URL to an image) * * --- ZoneOptions --- * - up: ButtonOptions * - down: ButtonOptions * - left: ButtonOptions * - right: ButtonOptions * * Joystick methods: * * - isPressed(id: string): boolean * Returns true if the button with the given id is pressed. * * - isJoystickPressed(): boolean * Returns true if the joystick "knob" is being pressed/dragged. * * - angle(): number * Returns joystick angle in radians (for type="angular"). * * - dpad(): { x: string, y: string } * Returns 'up'/'down' for y and 'left'/'right' for x if using dpad. * * - destroy(): void * Removes the joystick UI entirely. * * * ---------------------------------------------------------------- * 12. TikTok Live Events * ---------------------------------------------------------------- * * --- onTikTokLiveEvent: (event: TiktokLiveEvent) => unsubscribeCallback --- * Registers a callback for incoming TikTok live events. Returns a function to unsubscribe. * * Example: * const unsubscribe = onTikTokLiveEvent((event) => { * console.log(`Received live event: ${event.type}`); * }); * * --- TiktokLiveEvent --- * - type: "chat" | "gift" | "like" * - data: { * t: number, // timestamp * msgId: string, // message ID * userId: string, // user ID * name: string, // user name * userPhotoUrl: string, // user's avatar * comment?: string, // text if type=chat * giftName?: string, * giftPhotoUrl?: string, * giftId?: string, * giftDiamondCount?: number * } * * * ---------------------------------------------------------------- * 13. Discord Mode * ---------------------------------------------------------------- * * If discord: true is set in insertCoin, these methods become available: * * --- openDiscordInviteDialog(): Promise --- * Opens a dialog to invite players to the current Discord activity. * Not available outside of Discord. * * --- getDiscordClient(): DiscordClient --- * Returns an authenticated Discord client. Not available outside of Discord. * * --- getDiscordAccessToken(): string --- * Returns the access token of the current Discord user. Not available outside of Discord. * * --- getDiscordSDK(): Promise --- * Returns the Discord SDK object. Not available outside of Discord. * * * ---------------------------------------------------------------- * 14. React Hooks * ---------------------------------------------------------------- * * The following hooks are React-specific helpers for Playroom state management. * * --- useMultiplayerState(key: string, defaultValue: any) --- * Returns [state, setState], where state is synced among all players. * - setState(value: any, reliable?: boolean) => void * Example: * import { useMultiplayerState } from 'playroomkit'; * const [count, setCount] = useMultiplayerState('count', 0); * * --- usePlayersList(triggerOnPlayerStateChange?: boolean) --- * Returns a list of all PlayerState objects in the room, updating as players join/leave. * If triggerOnPlayerStateChange = true, also updates when a player's state changes. * * --- usePlayerState(playerState: PlayerState, key: string, defaultValue: any) --- * Returns [state, setState] for a specific player's state key. * - setState(value: any, reliable?: boolean) => void * Example: * import { usePlayerState } from 'playroomkit'; * const [score, setScore] = usePlayerState(player, 'score', 0); * * --- usePlayersState(key: string) --- * Returns an array of objects with { player: PlayerState, state: any } for a given key across all players. * Example: * const players = usePlayersState('count'); * // => [{ player: PlayerState, state: 10 }, { player: PlayerState, state: 20 }] * * --- useIsHost() --- * Returns true if the current player is the host, automatically updating if host changes. * Example: * const isHost = useIsHost(); * * * =========================== * END OF PLAYROOM API REFERENCE * =========================== * */ // ================================================== // General Notes for Rosie AI // ================================================== // Note: In this sandboxed environment, avoid using

elements and traditional // form submissions as they may be blocked by security policies. Instead, use // controlled components with direct event handlers (onClick, onChange, etc.). // ================================================== // ================================================== // Project Imports & Setup // ================================================== import React from 'react'; import { createRoot } from 'react-dom/client'; // New API for rendering import ReactDOMLegacy from 'react-dom'; // Legacy API (includes unmountComponentAtNode) // Expose React and the legacy ReactDOM globally for PlayroomKit. window.React = React; window.ReactDOM = ReactDOMLegacy; // Generate a unique 4-character room code // Room code will be provided by Playroom let ROOM_CODE = null; // Function to dynamically load a script. const loadScript = (src) => new Promise((resolve, reject) => { const script = document.createElement("script"); script.src = src; script.onload = resolve; script.onerror = reject; document.head.appendChild(script); }); // Room code will be set after joining const updateRoomCode = () => { ROOM_CODE = window.Playroom.getRoomCode(); console.log("Joined room:", ROOM_CODE); }; (async () => { // Load PlayroomKit from CDN. await loadScript("https://unpkg.com/playroomkit/multiplayer.umd.js"); // After loading, the Playroom object should be available globally. const { useMultiplayerState, insertCoin, myPlayer, usePlayersList } = window.Playroom; // ================================================== // Inject CSS Styles // ================================================== const style = document.createElement("style"); style.textContent = ` @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap'); /* Playroom Login Menu Customization */ .ReactModal__Content, .ReactModal__Overlay, div[class*="styles_container"], div[class*="styles_modal"] { background-color: rgb(14, 12, 20) !important; } div[class*="styles_inner"], div[class*="styles_content"], div[class*="styles_panel"], div[class*="styles_box"], div[class*="styles_form"] { background-color: rgb(32, 17, 43) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } button, [class*="styles_button"], [role="button"], [class*="styles_btn"] { background-color: rgb(143, 0, 200) !important; color: white !important; border: 2px solid #F19AA5 !important; outline: none !important; } button svg, [class*="styles_button"] svg, [role="button"] svg, [class*="styles_btn"] svg, [class*="styles_button"] path, [role="button"] path { fill: white !important; color: white !important; stroke: white !important; } input, [type="text"], [class*="input"] { background-color: white !important; color: black !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; opacity: 1 !important; } [class*="picker"], [class*="select"], [class*="dropdown"] { background-color: rgb(32, 17, 43) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } h1, h2, h3, h4, h5, h6, p, span, label, [class*="title"], [class*="text"], [class*="label"] { color: white !important; } .room-code { position: fixed; top: 1rem; left: 1rem; font-family: 'Comic Neue', cursive; font-size: 1.2rem; background: rgba(255, 255, 255, 0.9); padding: 0.5rem 1rem; border-radius: 0.5rem; color: #333; z-index: 1000; } body { background-color: #8D6BED; color: #fff; margin: 0; overflow: hidden; user-select: none; } .App { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .emoji-button-bar { display: flex; position: fixed; bottom: 0; align-items: center; left: 0; right: 0; justify-content: center; gap: 1rem; padding: 1rem 0px; } .emoji-button { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background-color: #fff; color: #FF7F56; font-size: 2rem; cursor: pointer; box-shadow: 0px 0.4rem 0px rgba(0, 0, 0, 0.25); } .emoji-button.disabled { opacity: 0.5; cursor: not-allowed; } .emoji-display { display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; font-size: 6rem; position: absolute; } .emoji-display .card { background: #fff; border: 2px solid #000000; border-radius: 1rem; padding: 3rem 2rem 2rem; animation: slideUp 2s linear; position: relative; } .card .username { font-family: 'Comic Neue', cursive; font-size: 1.2rem; color: #333; position: absolute; bottom: 0.5rem; left: 0; right: 0; text-align: center; } .card .avatar img { width: 2.5rem; position: absolute; top: 3px; left: 3px; } @keyframes slideUp { 0% { opacity: 1; margin-top: 200vh; animation-timing-function: ease-out; } 15% { margin-top: -10vh; animation-timing-function: ease-in; } 18% { margin-top: 5vh; animation-timing-function: ease-out; } 20% { margin-top: 0px; animation-timing-function: ease-in; } 95% { opacity: 1; margin-top: 0px; animation-timing-function: ease-in; } 100% { margin-top: 0px; opacity: 1; animation-timing-function: ease-out; } } `; document.head.appendChild(style); // ================================================== // Helper Functions & Variables // ================================================== // Utility: generate a random number between min and max. const randomNumBetween = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); // Pre-calculate a list of random CSS transform strings. const randomRotations = Array(20) .fill(0) .map( () => `rotate(${randomNumBetween(-5, 5)}deg) translateX(${randomNumBetween( -10, 10 )}px)` ); // ================================================== // Main App Component // ================================================== const App = () => { const players = usePlayersList(); // Redirect players if room is full React.useEffect(() => { if (players.length > 15) { window.location.reload(); } }, [players]); const [currentEmoji, setCurrentEmoji] = useMultiplayerState("emoji", []); return React.createElement( "div", { className: "App", style: { backgroundColor: myPlayer().getProfile().color.hexString }, }, React.createElement( "div", { className: "room-code" }, "Room: " + ROOM_CODE ), // Render each emoji display. currentEmoji.map((emojiData, i) => { const player = players.find((p) => p.id === emojiData.id); if (!player) return null; return React.createElement( "div", { key: i, className: "emoji-display" }, React.createElement( "span", { style: { transform: randomRotations[i % randomRotations.length] }, className: "card", }, React.createElement( "span", { className: "avatar" }, React.createElement("img", { src: player.getProfile().photo, alt: "avatar", }) ), React.createElement( "div", null, emojiData.emoji, React.createElement( "div", { className: "username" }, player.getProfile().name ) ) ) ); }), // Render the emoji buttons. React.createElement( "div", { className: "emoji-button-bar" }, React.createElement( "a", { className: "emoji-button", onClick: () => setCurrentEmoji([ ...currentEmoji, { emoji: "🫶", id: myPlayer().id }, ]), }, React.createElement("span", { role: "img", "aria-label": "emoji1" }, "🫶") ), React.createElement( "a", { className: "emoji-button", onClick: () => setCurrentEmoji([ ...currentEmoji, { emoji: "🥳", id: myPlayer().id }, ]), }, React.createElement("span", { role: "img", "aria-label": "emoji2" }, "🥳") ), React.createElement( "a", { className: "emoji-button", onClick: () => setCurrentEmoji([ ...currentEmoji, { emoji: "👋", id: myPlayer().id }, ]), }, React.createElement("span", { role: "img", "aria-label": "emoji3" }, "👋") ) ) ); }; // ================================================== // Setup Container & Initialize App // ================================================== const container = document.createElement("div"); container.id = "renderDiv"; document.body.appendChild(container); // Insert coin with your playroom ID, unique project hash for matchmaking, and render the app. insertCoin({ matchmaking: true, maxPlayersPerRoom: 16, }).then(() => { updateRoomCode(); createRoot(container).render(React.createElement(App)); }); })();