@articles-media/articles-dev-box 1.1.6 → 1.3.0

package/README.md

@@ -51,6 +51,9 @@ npm run dev
 | SettingsModal | All in one component to handle game settings UI across multiple games. | |
 | CreditsModal | All in one component to handle game credits UI across multiple games. | |
 | InfoModal | All in one component to handle game info modal across multiple games. | USA Tycoon |
+| FriendsList | List and Modal for showing friends. | Auto imported via GlobalClientModals |
+| InviteModal | Modal for showing FriendsList with allowInvite | Normally used via GlobalClientModals |
+| ReusedSocketLogicHandler | Sets up a lot of common websocket logic | Catching Game, Ocean Rings |
 | DarkModeHandler | Consumes a Zustand store, detects prefers-color-scheme, sets data-bs-theme on body element. | |
 | ToontownModeHandler | Handles setting zustand state from url params if toontownMode is passed. | |
 | SocketServerUrlHandler | Handles setting socket server state from url params if socketServerUrl is passed. | |

package/dist/FriendsList.js

@@ -2,6 +2,7 @@ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
 import useUserDetails from "./useUserDetails.js";
 import useUserToken from "./useUserToken.js";
 import useUserFriends from "./useUserFriends.js";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Modal } from "react-bootstrap";
 //#region src/components/Friends/FriendsList.jsx
@@ -14,16 +15,47 @@ function FriendsList({ show, setShow, componentType, className, style = {}, id =
 		user_id: userDetails?.user_id,
 		user_token: userToken
 	});
-	if (!componentType || componentType == "list") {
-		if (!friendsLoading && friends && friends.length > 0) return /* @__PURE__ */ jsx("ul", {
-			className,
-			style,
-			children: friends.map((friend) => /* @__PURE__ */ jsxs("li", { children: [
+	const friendsWrapped = useMemo(() => {
+		return /* @__PURE__ */ jsx("div", { children: friends?.map((friend) => /* @__PURE__ */ jsxs("div", {
+			className: "d-flex align-items-center justify-content-between border p-1",
+			children: [/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("img", {
+					src: friend?.populated_user?.photo_url,
+					alt: `${friend?.populated_user?.username}'s avatar`,
+					width: 32,
+					height: 32,
+					className: "me-2"
+				}),
 				friend?.populated_user?.username,
 				" - ",
 				friend?.populated_user?.display_name || "No Display Name"
-			] }, friend.friend_id))
-		});
+			] }), /* @__PURE__ */ jsxs("div", { children: [
+				allowInvite && /* @__PURE__ */ jsxs(ArticlesButton, {
+					variant: "articles",
+					onClick: () => {
+						allowInvite(friend);
+					},
+					children: [/* @__PURE__ */ jsx("i", { className: "fad fa-paper-plane me-2" }), /* @__PURE__ */ jsx("span", { children: "Invite" })]
+				}),
+				/* @__PURE__ */ jsx(ArticlesButton, {
+					variant: "articles",
+					onClick: () => {
+						console.log("View friend details for ", friend);
+					},
+					children: /* @__PURE__ */ jsx("i", { className: "fad fa-info me-0" })
+				}),
+				/* @__PURE__ */ jsx(ArticlesButton, {
+					variant: "articles",
+					onClick: () => {
+						console.log("Start Message");
+					},
+					children: /* @__PURE__ */ jsx("i", { className: "fad fa-envelope me-0" })
+				})
+			] })]
+		}, friend.friend_id)) });
+	}, [friends]);
+	if (!componentType || componentType == "list") {
+		if (!friendsLoading && friends && friends.length > 0) return friendsWrapped;
 	}
 	if (componentType.toLowerCase() == "modal") return /* @__PURE__ */ jsxs(Modal, {
 		show,
@@ -42,27 +74,7 @@ function FriendsList({ show, setShow, componentType, className, style = {}, id =
 					children: [/* @__PURE__ */ jsx("i", { className: "fad fa-spinner-third fa-spin fa-2x" }), /* @__PURE__ */ jsx("div", { children: "Loading..." })]
 				}),
 				!friendsLoading && friends && friends.length == 0 && /* @__PURE__ */ jsx("div", { children: "No friends to show." }),
-				!friendsLoading && friends && friends.length > 0 && /* @__PURE__ */ jsx("div", { children: friends.map((friend) => /* @__PURE__ */ jsxs("div", {
-					className: "d-flex align-items-center justify-content-between border p-1",
-					children: [
-						friend?.populated_user?.username,
-						" - ",
-						friend?.populated_user?.display_name || "No Display Name",
-						/* @__PURE__ */ jsxs("div", { children: [allowInvite && /* @__PURE__ */ jsx(ArticlesButton, {
-							variant: "articles",
-							onClick: () => {
-								allowInvite(friend);
-							},
-							children: /* @__PURE__ */ jsx("i", { className: "fad fa-comment-check" })
-						}), /* @__PURE__ */ jsx(ArticlesButton, {
-							variant: "articles",
-							onClick: () => {
-								console.log("View friend details for ", friend);
-							},
-							children: /* @__PURE__ */ jsx("i", { className: "fad fa-info me-0" })
-						})] })
-					]
-				}, friend.friend_id)) })
+				!friendsLoading && friends && friends.length > 0 && friendsWrapped
 			] }),
 			/* @__PURE__ */ jsxs(Modal.Footer, {
 				className: "justify-content-between",

package/dist/{GameMenu-BSfKeM4b.js → GameMenu-CBn1r9Cq.js}

@@ -8,7 +8,7 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 	const showMenu = useStore((state) => state.showMenu);
 	const setShowMenu = useStore((state) => state.setShowMenu);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: (0, import_classnames.default)(`menu-bar ${menuBarConfig.menuBarClassName || ""}`, {
+		className: (0, import_classnames.default)(`dev-box-game-menu menu-bar ${menuBarConfig.menuBarClassName || ""}`, {
 			"card card-articles p-1 justify-content-center": menuBarConfig.style == "Bar",
 			[menuBarConfig.style.replaceAll(" ", "_")]: menuBarConfig.style,
 			[menuBarConfig.menuBarButtonPosition]: menuBarConfig.menuBarButtonPosition
@@ -44,7 +44,7 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 			]
 		})
 	}), /* @__PURE__ */ jsx("div", {
-		className: `mobile-menu ${showMenu && "show"}`,
+		className: `dev-box-game-menu mobile-menu ${showMenu && "show"}`,
 		onClick: () => setShowMenu(false),
 		style: {
 			...menuBarConfig.style == "Bar" && { bottom: "50px" },
@@ -121,7 +121,7 @@ function GameMenu(props) {
 		LeftPanelContent,
 		menuBarConfig: { ...menuBarConfig }
 	}), /* @__PURE__ */ jsx("div", {
-		className: `panel-left card rounded-0 ${convertedSidebarStyle} ${sidebarConfig?.className || ""}`,
+		className: `dev-box-game-menu panel-left card rounded-0 ${convertedSidebarStyle} ${sidebarConfig?.className || ""}`,
 		style: {
 			...sidebarConfig?.cssStyle,
 			...convertedSidebarStyle == "Floating_Panel" && {

package/dist/GameMenu.js

@@ -1,2 +1,2 @@
-import { t as GameMenu } from "./GameMenu-BSfKeM4b.js";
+import { t as GameMenu } from "./GameMenu-CBn1r9Cq.js";
 export { GameMenu as default };

package/dist/GlobalClientModals.js

@@ -8,6 +8,7 @@ var InfoModal = lazy(() => import("./InfoModal.js"));
 var CreditsModal = lazy(() => import("./CreditsModal.js"));
 var FriendsList = lazy(() => import("./FriendsList.js"));
 var SettingsModal = lazy(() => import("./SettingsModal.js"));
+var InviteModal = lazy(() => import("./InviteModal.js"));
 function GlobalClientModals({ useStore, useAudioStore, useTouchControlsStore, useSocketStore, packageInfo, settingsModalConfig, infoModalConfig }) {
 	const showInfoModal = useStore((state) => state.showInfoModal);
 	const setShowInfoModal = useStore((state) => state.setShowInfoModal);
@@ -17,6 +18,8 @@ function GlobalClientModals({ useStore, useAudioStore, useTouchControlsStore, us
 	const setShowCreditsModal = useStore((state) => state.setShowCreditsModal);
 	const showFriendsModal = useStore((state) => state.showFriendsModal);
 	const setShowFriendsModal = useStore((state) => state.setShowFriendsModal);
+	const showInviteModal = useStore((state) => state.showInviteModal);
+	const setShowInviteModal = useStore((state) => state.setShowInviteModal);
 	const { data: userToken, error: userTokenError, isLoading: userTokenLoading, mutate: userTokenMutate } = useUserToken(process.env.NEXT_PUBLIC_GAME_PORT);
 	const { data: userDetails, error: userDetailsError, isLoading: userDetailsLoading, mutate: userDetailsMutate } = useUserDetails({ token: userToken });
 	if (!settingsModalConfig) {
@@ -47,9 +50,12 @@ function GlobalClientModals({ useStore, useAudioStore, useTouchControlsStore, us
 		showFriendsModal && /* @__PURE__ */ jsx(FriendsList, {
 			componentType: "modal",
 			show: showFriendsModal,
-			setShow: setShowFriendsModal,
-			user_id: userDetails ? userDetails.user_id : null,
-			user_token: userToken ? userToken : null
+			setShow: setShowFriendsModal
+		}),
+		showInviteModal && /* @__PURE__ */ jsx(InviteModal, {
+			show: showInviteModal,
+			setShow: setShowInviteModal,
+			useSocketStore
 		})
 	] });
 }

package/dist/InviteModal.js

@@ -0,0 +1,56 @@
+import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
+import { lazy, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Modal } from "react-bootstrap";
+//#region src/components/Games/InviteModal.jsx
+var FriendsList = lazy(() => import("./FriendsList.js"));
+function InviteModal({ show, setShow, useSocketStore }) {
+	const socket = useSocketStore((state) => state?.socket);
+	const [showModal, setShowModal] = useState(true);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Modal, {
+		className: "articles-modal games-invite-modal",
+		size: "md",
+		show: showModal,
+		centered: true,
+		scrollable: true,
+		onExited: () => {
+			setShow(false);
+		},
+		onHide: () => {
+			setShowModal(false);
+		},
+		children: [
+			/* @__PURE__ */ jsx(Modal.Header, {
+				closeButton: true,
+				children: /* @__PURE__ */ jsx(Modal.Title, { children: "Invite Players" })
+			}),
+			/* @__PURE__ */ jsx(Modal.Body, {
+				className: "flex-column p-0",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "p-3",
+					children: /* @__PURE__ */ jsx(FriendsList, {
+						componentType: "list",
+						show,
+						setShow,
+						allowInvite: () => {
+							socket.emit("invitePlayer", { ...show });
+						}
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(Modal.Footer, {
+				className: "justify-content-between",
+				children: [/* @__PURE__ */ jsx("div", {}), /* @__PURE__ */ jsx(ArticlesButton, {
+					variant: "outline-dark",
+					onClick: () => {
+						setShow(false);
+					},
+					className: "d-flex align-items-center",
+					children: "Close"
+				})]
+			})
+		]
+	}) });
+}
+//#endregion
+export { InviteModal as default };

package/dist/PageTemplateLandingPage.js

@@ -18,7 +18,7 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
 	const lobbyDetails = useStore((state) => state.lobbyDetails);
 	const landingAnimation = useStore((state) => state.landingAnimation);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "landing-page",
+		className: "landing-page dev-box-template-landing-page",
 		children: [
 			AdditionalContent && AdditionalContent,
 			/* @__PURE__ */ jsx("div", {
@@ -91,7 +91,8 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
 										}), /* @__PURE__ */ jsx("div", {
 											className: "servers",
 											children: Array.from({ length: multiplayerConfig?.defaultServers }).map((_, id) => {
-												let lobbyLookup = lobbyDetails?.games?.find((lobby) => parseInt(lobby.server_id) == id);
+												const serverNumber = id + 1;
+												let lobbyLookup = lobbyDetails?.games?.find((lobby) => parseInt(lobby.server_id) == serverNumber);
 												return /* @__PURE__ */ jsxs("div", {
 													className: "server",
 													children: [
@@ -100,7 +101,7 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
 															children: [/* @__PURE__ */ jsx("div", {
 																className: "mb-0",
 																style: { fontSize: "0.9rem" },
-																children: /* @__PURE__ */ jsxs("b", { children: ["Server ", id] })
+																children: /* @__PURE__ */ jsxs("b", { children: ["Server ", serverNumber] })
 															}), /* @__PURE__ */ jsxs("div", {
 																className: "mb-0",
 																children: [lobbyLookup?.players?.length || 0, "/4"]
@@ -131,7 +132,7 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
 															className: ``,
 															href: {
 																pathname: `/play`,
-																query: { server: id }
+																query: { server: serverNumber }
 															},
 															style: { ...multiplayerConfig?.comingSoon ? { pointerEvents: "none" } : {} },
 															children: /* @__PURE__ */ jsx(ArticlesButton, {

package/dist/ReusedSocketLogicHandler.js

@@ -0,0 +1,151 @@
+import useUserDetails from "./useUserDetails.js";
+import useUserToken from "./useUserToken.js";
+import { useEffect, useRef, useState } from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/Games/Socket/ReusedSocketLogicHandler.jsx
+function ReusedSocketLogicHandler({ pathname, useStore, useGameStore, useSocketStore, debugConfig, landingConfig, gameConfig, server }) {
+	const initialized = useRef(false);
+	const [isVisible, setIsVisible] = useState(true);
+	const socket = useSocketStore((state) => state.socket);
+	const connectSocket = useSocketStore((state) => state.connectSocket);
+	const loginSocket = useSocketStore((state) => state.loginSocket);
+	const connected = useSocketStore((state) => state.connected);
+	const setConnected = useSocketStore((state) => state.setConnected);
+	const authenticated = useSocketStore((state) => state.authenticated);
+	const setAuthenticated = useSocketStore((state) => state.setAuthenticated);
+	const setLobbyDetails = useStore((state) => state.setLobbyDetails);
+	const debug = useStore((state) => state.debug);
+	const nickname = useStore((state) => state.nickname);
+	const { data: userToken, error: userTokenError, isLoading: userTokenLoading, mutate: userTokenMutate } = useUserToken(process.env.NEXT_PUBLIC_GAME_PORT);
+	const { data: userDetails, error: userDetailsError, isLoading: userDetailsLoading, mutate: userDetailsMutate } = useUserDetails({ token: userToken });
+	function debugLog(...args) {
+		if (debug) console.log("[📶ReusedSocketLogicHandler]", ...args);
+	}
+	useEffect(() => {
+		if (!initialized.current) {
+			initialized.current = true;
+			connectSocket();
+		}
+		socket.on("connect", () => {
+			debugLog("Connected to server!");
+			setConnected(true);
+		});
+		socket.on("disconnect", () => {
+			debugLog("Disconnected from server!");
+			setConnected(false);
+			setAuthenticated(false);
+		});
+		socket.on("force-page", (data) => {
+			debugLog("You are being forced to a new page!", data);
+			window.location.href = data.page;
+		});
+		socket.on("authenticated", (data) => {
+			debugLog("Socket authenticated with server!");
+			setAuthenticated(true);
+		});
+		socket.on(`landing-details`, function(msg) {
+			debugLog(`landing-details`, msg);
+			if (landingConfig?.onLandingDetails) landingConfig.onLandingDetails(msg);
+			const currentLobbyDetails = useStore.getState().lobbyDetails;
+			if (JSON.stringify(msg) !== JSON.stringify(currentLobbyDetails)) setLobbyDetails(msg);
+		});
+		socket.on(`game-update`, function(msg) {
+			debugLog(`game-update`, msg);
+			if (gameConfig?.onGameUpdate) gameConfig.onGameUpdate(msg);
+			const currentGameState = useGameStore.getState().gameState;
+			const setGameState = useGameStore.getState().setGameState;
+			if (JSON.stringify(msg) !== JSON.stringify(currentGameState)) {
+				debugLog("Updating game state with new data from server");
+				setGameState(msg);
+			}
+		});
+		return () => {
+			socket.off("connect");
+			socket.off("disconnect");
+			socket.off("force-page");
+			socket.off("authenticated");
+			socket.off(`landing-details`);
+			socket.off(`game-update`);
+		};
+	}, [socket]);
+	useEffect(() => {
+		if (pathname == "/" && landingConfig?.handleLandingDetails) {
+			if (socket.connected) socket.emit("join-room", `game:${process.env.NEXT_PUBLIC_GAME_KEY}-landing`);
+			return function cleanup() {
+				socket.emit("leave-room", `game:${process.env.NEXT_PUBLIC_GAME_KEY}-landing`);
+				setLobbyDetails({
+					players: [],
+					games: []
+				});
+			};
+		}
+	}, [
+		connected,
+		landingConfig?.handleLandingDetails,
+		pathname
+	]);
+	useEffect(() => {
+		if (server && connected && gameConfig?.handleGameUpdates && pathname == "/play") {
+			const roomName = `game:${process.env.NEXT_PUBLIC_GAME_KEY}-room-${server}`;
+			debugLog("Joining game room: ", roomName);
+			socket.emit("join-room", roomName, {
+				game_id: server,
+				nickname,
+				client_version: "1"
+			});
+			return function cleanup() {
+				socket.emit("leave-room", roomName);
+			};
+		}
+	}, [
+		server,
+		connected,
+		nickname,
+		gameConfig?.handleGameUpdates,
+		pathname
+	]);
+	useEffect(() => {
+		if (connected && !authenticated && userDetails?.user_id) {
+			debugLog("Socket is now connected and not authenticated with a logged in user!");
+			loginSocket({
+				user_id: userDetails?.user_id,
+				socket_id: socket.id,
+				token: userToken
+			});
+		}
+	}, [
+		connected,
+		authenticated,
+		userDetails?.user_id
+	]);
+	useEffect(() => {
+		if (debugConfig.enabled && debugConfig.autoHide) {
+			const timer = setTimeout(() => {
+				setIsVisible(false);
+			}, debugConfig.autoHideDelay);
+			return () => clearTimeout(timer);
+		}
+	}, [debugConfig.enabled]);
+	if (debugConfig.enabled && isVisible && process.env.NODE_ENV !== "production") return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "fixed",
+			bottom: 0,
+			left: 0,
+			color: "white",
+			fontSize: "11px",
+			zIndex: 9999,
+			backgroundColor: "rgba(0,0,0,0.5)",
+			padding: "2px",
+			display: "flex",
+			gap: "8px"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: ["Connected: ", connected ? "Yes" : "No"] }),
+			/* @__PURE__ */ jsxs("div", { children: ["Authenticated: ", authenticated ? "Yes" : "No"] }),
+			/* @__PURE__ */ jsxs("div", { children: ["ID: ", socket.id] }),
+			/* @__PURE__ */ jsxs("div", { children: ["Host: ", socket.io.uri] })
+		]
+	});
+}
+//#endregion
+export { ReusedSocketLogicHandler as default };

package/dist/{SettingsModal-CZvPy5hf.js → SettingsModal-DIMbVw4n.js}

@@ -246,7 +246,7 @@ function OtherTab({ useStore, config }) {
 var package_default = {
 	name: "@articles-media/articles-dev-box",
 	description: "Shared code, functions, and components for different Articles Media projects.",
-	version: "1.1.6",
+	version: "1.3.0",
 	type: "module",
 	sideEffects: false,
 	imports: { "#root/src/*": "./src/*" },
@@ -281,6 +281,8 @@ var package_default = {
 		"./SocketServerUrlHandler": "./dist/SocketServerUrlHandler.js",
 		"./HasNoMouseHandler": "./dist/HasNoMouseHandler.js",
 		"./FriendsList": "./dist/FriendsList.js",
+		"./InviteModal": "./dist/InviteModal.js",
+		"./ReusedSocketLogicHandler": "./dist/ReusedSocketLogicHandler.js",
 		"./useUserDetails": "./dist/useUserDetails.js",
 		"./useUserToken": "./dist/useUserToken.js",
 		"./useUserFriends": "./dist/useUserFriends.js",

package/dist/SettingsModal.js

@@ -1,2 +1,2 @@
-import { t as SettingsModal } from "./SettingsModal-CZvPy5hf.js";
+import { t as SettingsModal } from "./SettingsModal-DIMbVw4n.js";
 export { SettingsModal as default };

package/dist/articles-dev-box.css

@@ -257,17 +257,17 @@
 }
 
 @media (min-width: 992px) {
-  .show-sidebar .menu-bar {
+  .show-sidebar .menu-bar.dev-box-game-menu {
     display: none;
   }
-  .show-sidebar .panel-left {
+  .show-sidebar .panel-left.dev-box-game-menu {
     display: flex !important;
   }
 }
-.menu-bar {
+.menu-bar.dev-box-game-menu {
   border-radius: 0;
 }
-.menu-bar.Bar {
+.menu-bar.dev-box-game-menu.Bar {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -275,12 +275,12 @@
   height: 50px;
   z-index: 3;
 }
-.menu-bar.Bar .btn {
+.menu-bar.dev-box-game-menu.Bar .btn {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.menu-bar.Corner_Button {
+.menu-bar.dev-box-game-menu.Corner_Button {
   position: fixed;
   bottom: 0;
   width: 100%;
@@ -289,7 +289,7 @@
   height: 50px;
   z-index: 3;
 }
-.menu-bar.Corner_Button .btn {
+.menu-bar.dev-box-game-menu.Corner_Button .btn {
   width: 100%;
   height: 100%;
   border-radius: 0;
@@ -299,12 +299,12 @@
   justify-content: center;
   flex-direction: column;
 }
-.menu-bar.Corner_Button .btn i {
+.menu-bar.dev-box-game-menu.Corner_Button .btn i {
   margin-right: 0;
   font-size: 1.25rem;
 }
 @media (min-width: 992px) {
-  .menu-bar .menu-bar-container .Center {
+  .menu-bar.dev-box-game-menu .menu-bar-container .Center {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -312,7 +312,7 @@
   }
 }
 
-.mobile-menu {
+.mobile-menu.dev-box-game-menu {
   position: fixed;
   left: 0;
   width: 100%;
@@ -326,7 +326,7 @@
   align-items: flex-end;
   justify-content: center;
 }
-.mobile-menu.Bar {
+.mobile-menu.dev-box-game-menu.Bar {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -334,23 +334,23 @@
   height: 50px;
   z-index: 3;
 }
-.mobile-menu.show {
+.mobile-menu.dev-box-game-menu.show {
   transform: translateY(0);
 }
 
-.panel-left,
-.panel-right {
+.panel-left.dev-box-game-menu,
+.panel-right.dev-box-game-menu {
   width: 300px;
   height: calc(100vh - 0px);
   overflow-y: auto;
   flex-shrink: 0;
 }
 
-.panel-left {
+.panel-left.dev-box-game-menu {
   display: none !important;
 }
 
-.panel-right {
+.panel-right.dev-box-game-menu {
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/index.js

@@ -8,7 +8,7 @@ import useUserFriends from "./useUserFriends.js";
 import FriendsList from "./FriendsList.js";
 import { t as SessionButton } from "./SessionButton-DsXEzmff.js";
 import ArticlesAd from "./ArticlesAd.js";
-import { t as GameMenu } from "./GameMenu-BSfKeM4b.js";
+import { t as GameMenu } from "./GameMenu-CBn1r9Cq.js";
 import useFullscreen from "./useFullscreen.js";
 import PrimaryButtonGroup from "./GameMenuPrimaryButtonGroup.js";
 import NicknameInput from "./NicknameInput.js";
@@ -16,17 +16,19 @@ import { t as GameScoreboard } from "./GameScoreboard-CYuTBE_E.js";
 import PageTemplateLandingPage from "./PageTemplateLandingPage.js";
 import GlobalHead from "./GlobalHead.js";
 import GlobalBody_default from "./GlobalBody.js";
-import { t as SettingsModal } from "./SettingsModal-CZvPy5hf.js";
+import { t as SettingsModal } from "./SettingsModal-DIMbVw4n.js";
 import CreditsModal from "./CreditsModal.js";
 import InfoModal from "./InfoModal.js";
 import DarkModeHandler from "./DarkModeHandler.js";
 import ToontownModeHandler from "./ToontownModeHandler.js";
 import SocketServerUrlHandler from "./SocketServerUrlHandler.js";
 import HasNoMouseHandler from "./HasNoMouseHandler.js";
+import InviteModal from "./InviteModal.js";
+import ReusedSocketLogicHandler from "./ReusedSocketLogicHandler.js";
 import typicalZustandStoreExcludes from "./typicalZustandStoreExcludes.js";
 import typicalZustandStoreStateSlice from "./typicalZustandStoreStateSlice.js";
 import defaultGameNextConfig from "./defaultGameNextConfig.js";
 import getTheme from "./defaultGameThemeConfig.js";
 import getSignOutRedirectUrl from "./getSignOutRedirectUrl.js";
 import generateRandomNickname from "./generateRandomNickname.js";
-export { Ad_default as Ad, ArticlesAd, CreditsModal, DarkModeHandler, FriendsList, GameMenu, PrimaryButtonGroup as GameMenuPrimaryButtonGroup, GameScoreboard, GlobalBody_default as GlobalBody, GlobalHead, HasNoMouseHandler, InfoModal, NicknameInput, PageTemplateLandingPage, ReturnToLauncherButton, SessionButton, SettingsModal, SignInButton, SocketServerUrlHandler, ToontownModeHandler, ViewUserModal, defaultGameNextConfig, getTheme as defaultGameThemeConfig, generateRandomNickname, getSignOutRedirectUrl, typicalZustandStoreExcludes, typicalZustandStoreStateSlice, useFullscreen, useUserDetails, useUserFriends, useUserToken };
+export { Ad_default as Ad, ArticlesAd, CreditsModal, DarkModeHandler, FriendsList, GameMenu, PrimaryButtonGroup as GameMenuPrimaryButtonGroup, GameScoreboard, GlobalBody_default as GlobalBody, GlobalHead, HasNoMouseHandler, InfoModal, InviteModal, NicknameInput, PageTemplateLandingPage, ReturnToLauncherButton, ReusedSocketLogicHandler, SessionButton, SettingsModal, SignInButton, SocketServerUrlHandler, ToontownModeHandler, ViewUserModal, defaultGameNextConfig, getTheme as defaultGameThemeConfig, generateRandomNickname, getSignOutRedirectUrl, typicalZustandStoreExcludes, typicalZustandStoreStateSlice, useFullscreen, useUserDetails, useUserFriends, useUserToken };

package/dist/typicalZustandStoreExcludes.js

@@ -8,7 +8,8 @@ var typicalZustandStoreExcludes = [
 	"showMenu",
 	"lobbyDetails",
 	"sceneKey",
-	"showFriendsModal"
+	"showFriendsModal",
+	"showInviteModal"
 ];
 //#endregion
 export { typicalZustandStoreExcludes as default };

package/dist/typicalZustandStoreStateSlice.js

@@ -66,6 +66,10 @@ var typicalZustandStoreStateSlice = (set, get, generateRandomNickname) => ({
 	setShowFriendsModal: (newValue) => {
 		set((prev) => ({ showFriendsModal: newValue }));
 	},
+	showInviteModal: false,
+	setShowInviteModal: (newValue) => {
+		set((prev) => ({ showInviteModal: newValue }));
+	},
 	graphicsQuality: "High",
 	setGraphicsQuality: (value) => set({ graphicsQuality: value }),
 	lobbyDetails: {

package/dist/useUserDetails.js

@@ -12,7 +12,8 @@ var useUserDetails = (params) => {
 		revalidateOnFocus: false,
 		revalidateOnReconnect: false,
 		shouldRetryOnError: false,
-		errorRetryInterval: 1e3 * 60 * 1
+		errorRetryInterval: 1e3 * 60 * 1,
+		dedupingInterval: 1e3 * 60 * 5
 	});
 	return {
 		data,

package/dist/useUserFriends.js

@@ -14,7 +14,7 @@ var options = {
 	revalidateOnFocus: false,
 	revalidateIfStale: false,
 	shouldRetryOnError: false,
-	errorRetryInterval: 1e3 * 60 * 1
+	errorRetryInterval: 1e3 * 60 * 2
 };
 var useUserFriends = (params) => {
 	const { data, error, isLoading, isValidating, mutate } = useSWR(params?.user_id && params?.user_token ? {

package/dist/useUserToken.js

@@ -9,7 +9,8 @@ var useUserToken = (port) => {
 		revalidateOnFocus: false,
 		revalidateOnReconnect: false,
 		shouldRetryOnError: false,
-		errorRetryInterval: 1e3 * 60 * 1
+		errorRetryInterval: 1e3 * 60 * 1,
+		dedupingInterval: 1e3 * 60 * 5
 	});
 	return {
 		data,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@articles-media/articles-dev-box",
   "description": "Shared code, functions, and components for different Articles Media projects.",
-  "version": "1.1.6",
+  "version": "1.3.0",
   "type": "module",
   "sideEffects": false,
   "imports": {
@@ -40,6 +40,8 @@
     "./SocketServerUrlHandler": "./dist/SocketServerUrlHandler.js",
     "./HasNoMouseHandler": "./dist/HasNoMouseHandler.js",
     "./FriendsList": "./dist/FriendsList.js",
+    "./InviteModal": "./dist/InviteModal.js",
+    "./ReusedSocketLogicHandler": "./dist/ReusedSocketLogicHandler.js",
     "./useUserDetails": "./dist/useUserDetails.js",
     "./useUserToken": "./dist/useUserToken.js",
     "./useUserFriends": "./dist/useUserFriends.js",