@articles-media/articles-dev-box 1.0.41 → 1.1.0

package/README.md

@@ -67,6 +67,8 @@ npm run dev
     - Handles setting zustand state from url params if toontownMode is passed.
 - SocketServerUrlHandler
     - Handles setting socket server state from url params if socketServerUrl is passed.
+- HasNoMouseHandler
+    - Sets hasNoMouse and isTouchCapable on first load
 - useUserToken
     - Hook for getting the subdomain auth token.
 - useUserDetails
@@ -89,6 +91,14 @@ For newly developed components I sometimes find myself trying to remember what r
 - getSignOutRedirectUrl - Catching Game
 - GameMenuPrimaryButtonGroup - Catching Game and Move Match
 - NicknameInput - Catching Game
+- InfoModal - USA Tycoon
+- GlobalClientModals - USA Tycoon
+- generateRandomNickname - USA Tycoon
+- defaultGameNextConfig - USA Tycoon
+- defaultGameThemeConfig - USA Tycoon
+- useModalNavigation - USA Tycoon
+- gameLandingPageTemplate - USA Tycoon
+- gamePageTemplate - USA Tycoon
 
 # Roadmap
 ⏹️ Remove Bootstrap reliance?  

package/dist/{GameMenu-CyW1MF3Y.js → GameMenu-DeFdYvvR.js}

@@ -7,18 +7,6 @@ var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
 function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 	const showMenu = useStore((state) => state.showMenu);
 	const setShowMenu = useStore((state) => state.setShowMenu);
-	const MenuButton = () => /* @__PURE__ */ jsxs(ArticlesButton, {
-		small: true,
-		active: showMenu,
-		onClick: () => {
-			setShowMenu(!showMenu);
-		},
-		className: "d-flex",
-		children: [/* @__PURE__ */ jsx("i", { className: "fad fa-bars" }), /* @__PURE__ */ jsx("span", {
-			className: "text",
-			children: "Menu"
-		})]
-	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: (0, import_classnames.default)(`menu-bar ${menuBarConfig.menuBarClassName || ""}`, {
 			"card card-articles p-1 justify-content-center": menuBarConfig.style == "Bar",
@@ -30,19 +18,28 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 			...menuBarConfig.style == "Bar" && { borderRadius: "0px" }
 		},
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex-header align-items-center",
+			className: "menu-bar-container flex-header align-items-center",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "Left d-flex align-items-center",
-					children: [(menuBarConfig.menuBarButtonPosition == "Left" || !menuBarConfig.menuBarButtonPosition) && /* @__PURE__ */ jsx(MenuButton, {}), menuBarConfig.leftSlotChildren && menuBarConfig.leftSlotChildren]
+					children: [(menuBarConfig.menuBarButtonPosition == "Left" || !menuBarConfig.menuBarButtonPosition) && /* @__PURE__ */ jsx(MenuButton, {
+						useStore,
+						menuBarConfig
+					}), menuBarConfig.leftSlotChildren && menuBarConfig.leftSlotChildren]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "Center d-flex align-items-center",
-					children: [menuBarConfig.menuBarButtonPosition == "Center" && /* @__PURE__ */ jsx(MenuButton, {}), menuBarConfig.centerSlotChildren && menuBarConfig.centerSlotChildren]
+					children: [menuBarConfig.menuBarButtonPosition == "Center" && /* @__PURE__ */ jsx(MenuButton, {
+						useStore,
+						menuBarConfig
+					}), menuBarConfig.centerSlotChildren && menuBarConfig.centerSlotChildren]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "Right d-flex align-items-center",
-					children: [menuBarConfig.menuBarButtonPosition == "Right" && /* @__PURE__ */ jsx(MenuButton, {}), menuBarConfig.rightSlotChildren && menuBarConfig.rightSlotChildren]
+					children: [menuBarConfig.menuBarButtonPosition == "Right" && /* @__PURE__ */ jsx(MenuButton, {
+						useStore,
+						menuBarConfig
+					}), menuBarConfig.rightSlotChildren && menuBarConfig.rightSlotChildren]
 				})
 			]
 		})
@@ -65,6 +62,29 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 		})
 	})] });
 }
+function MenuButton({ useStore, menuBarConfig }) {
+	const showMenu = useStore((state) => state.showMenu);
+	const setShowMenu = useStore((state) => state.setShowMenu);
+	const setShowSettingsModal = useStore((state) => state.setShowSettingsModal);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ArticlesButton, {
+		small: true,
+		active: showMenu,
+		onClick: () => {
+			console.log("Menu button clicked, toggling menu visibility");
+			setShowMenu(!showMenu);
+		},
+		className: "d-flex",
+		children: [/* @__PURE__ */ jsx("i", { className: "fad fa-bars" }), /* @__PURE__ */ jsx("span", {
+			className: "text",
+			children: "Menu"
+		})]
+	}), menuBarConfig?.settingsWithMenuButton && /* @__PURE__ */ jsx(ArticlesButton, {
+		onClick: () => {
+			setShowSettingsModal(true);
+		},
+		children: /* @__PURE__ */ jsx("i", { className: "fad fa-cog" })
+	})] });
+}
 //#endregion
 //#region src/components/Games/GameMenu/GameMenu.jsx
 /**

package/dist/GameMenu.js

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

package/dist/GameMenuPrimaryButtonGroup.js

@@ -2,6 +2,13 @@ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
 import useFullscreen from "./useFullscreen.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Games/GameMenuPrimaryButtonGroup.jsx
+/**
+* @param {Object} props
+* @param {function} props.useStore Zustand store hook
+* @param {('Landing'|'GameMenu')} props.type Only "Landing" or "GameMenu" allowed
+* @param {string} [props.owner] Optional GitHub owner
+* @param {string} [props.repo] Optional GitHub repo
+*/
 function PrimaryButtonGroup({ useStore, type, owner, repo }) {
 	if (!useStore) return null;
 	const { isFullscreen, requestFullscreen, exitFullscreen } = useFullscreen();

package/dist/GlobalClientModals.js

@@ -0,0 +1,57 @@
+"use client";
+import useUserDetails from "./useUserDetails.js";
+import useUserToken from "./useUserToken.js";
+import { lazy } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Global/GlobalClientModals.jsx
+var InfoModal = lazy(() => import("./InfoModal.js"));
+var CreditsModal = lazy(() => import("./CreditsModal.js"));
+var FriendsList = lazy(() => import("./FriendsList.js"));
+var SettingsModal = lazy(() => import("./SettingsModal.js"));
+function GlobalClientModals({ useStore, useAudioStore, useTouchControlsStore, useSocketStore, packageInfo, settingsModalConfig, infoModalConfig }) {
+	const showInfoModal = useStore((state) => state.showInfoModal);
+	const setShowInfoModal = useStore((state) => state.setShowInfoModal);
+	const showSettingsModal = useStore((state) => state.showSettingsModal);
+	const setShowSettingsModal = useStore((state) => state.setShowSettingsModal);
+	const showCreditsModal = useStore((state) => state.showCreditsModal);
+	const setShowCreditsModal = useStore((state) => state.setShowCreditsModal);
+	const showFriendsModal = useStore((state) => state.showFriendsModal);
+	const setShowFriendsModal = useStore((state) => state.setShowFriendsModal);
+	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) {
+		console.error("GlobalClientModals: settingsModalConfig is not provided!");
+		return;
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		showInfoModal && /* @__PURE__ */ jsx(InfoModal, {
+			show: showInfoModal,
+			setShow: setShowInfoModal,
+			useStore,
+			packageInfo,
+			infoModalConfig
+		}),
+		showSettingsModal && /* @__PURE__ */ jsx(SettingsModal, {
+			show: showSettingsModal,
+			setShow: setShowSettingsModal,
+			store: useStore,
+			useAudioStore,
+			useTouchControlsStore,
+			useSocketStore,
+			config: settingsModalConfig
+		}),
+		showCreditsModal && /* @__PURE__ */ jsx(CreditsModal, {
+			show: showCreditsModal,
+			setShow: setShowCreditsModal
+		}),
+		showFriendsModal && /* @__PURE__ */ jsx(FriendsList, {
+			componentType: "modal",
+			show: showFriendsModal,
+			setShow: setShowFriendsModal,
+			user_id: userDetails ? userDetails.user_id : null,
+			user_token: userToken ? userToken : null
+		})
+	] });
+}
+//#endregion
+export { GlobalClientModals as default };

package/dist/HasNoMouseHandler.js

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/components/Handlers/HasNoMouseHandler.jsx
+function HasNoMouseHandler({ useStore }) {
+	const hasHydrated = useStore((state) => state._hasHydrated);
+	const hasNoMouse = useStore((state) => state.hasNoMouse);
+	const setHasNoMouse = useStore((state) => state.setHasNoMouse);
+	const isTouchCapable = useStore((state) => state.isTouchCapable);
+	const setIsTouchCapable = useStore((state) => state.setIsTouchCapable);
+	useEffect(() => {
+		if (!hasHydrated) return;
+		if (hasNoMouse === null) {
+			const hasMouse = window.matchMedia("(pointer: fine)").matches;
+			setHasNoMouse(!hasMouse);
+		}
+		if (isTouchCapable === null) setIsTouchCapable("ontouchstart" in window || navigator.maxTouchPoints > 0);
+	}, [
+		hasHydrated,
+		hasNoMouse,
+		isTouchCapable,
+		setHasNoMouse,
+		setIsTouchCapable
+	]);
+	return /* @__PURE__ */ jsx(Fragment, {});
+}
+//#endregion
+export { HasNoMouseHandler as default };

package/dist/InfoModal.js

@@ -0,0 +1,58 @@
+import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
+import { useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Modal } from "react-bootstrap";
+//#region src/components/Games/InfoModal.jsx
+function InfoModal({ show, setShow, useStore, packageInfo, infoModalConfig }) {
+	const [showModal, setShowModal] = useState(true);
+	const darkMode = useStore((state) => state.darkMode);
+	useRef([]);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Modal, {
+		className: "articles-modal games-info-modal",
+		size: "md",
+		show: showModal,
+		centered: true,
+		scrollable: true,
+		onExited: () => {
+			setShow(false);
+		},
+		onHide: () => {
+			setShowModal(false);
+		},
+		children: [
+			/* @__PURE__ */ jsx(Modal.Header, {
+				closeButton: true,
+				children: /* @__PURE__ */ jsxs(Modal.Title, { children: [process.env.NEXT_PUBLIC_GAME_NAME, " Info"] })
+			}),
+			/* @__PURE__ */ jsxs(Modal.Body, {
+				className: "flex-column p-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "ratio ratio-16x9",
+					children: darkMode ? /* @__PURE__ */ jsx("img", { src: infoModalConfig?.previewImage }) : /* @__PURE__ */ jsx("img", { src: infoModalConfig?.previewImage })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "p-3",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "",
+						children: packageInfo?.description
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Modal.Footer, {
+				className: "justify-content-between",
+				children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
+					className: "version small",
+					children: ["Version: ", packageInfo?.version]
+				}) }), /* @__PURE__ */ jsx(ArticlesButton, {
+					variant: "outline-dark",
+					onClick: () => {
+						setShow(false);
+					},
+					className: "d-flex align-items-center",
+					children: "Close"
+				})]
+			})
+		]
+	}) });
+}
+//#endregion
+export { InfoModal as default };

package/dist/PageTemplateLandingPage.js

@@ -0,0 +1,195 @@
+"use client";
+import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
+import useUserDetails from "./useUserDetails.js";
+import useUserToken from "./useUserToken.js";
+import PrimaryButtonGroup from "./GameMenuPrimaryButtonGroup.js";
+import NicknameInput from "./NicknameInput.js";
+import { lazy } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Games/PageTemplates/PageTemplateLandingPage.jsx
+var SessionButton = lazy(() => import("./SessionButton.js"));
+var ReturnToLauncherButton = lazy(() => import("./ReturnToLauncherButton.js"));
+var GameScoreboard = lazy(() => import("./GameScoreboard.js"));
+var Ad = lazy(() => import("./Ad.js"));
+function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Link, logoImage, backgroundImage, CardBodyOverride, singlePlayerConfig, multiplayerConfig, brandingTextClass, disableHero, disableAd, disableGameScoreboard, maxInnerWidth = "20rem", AdditionalContent = null, PostCardContent = null, PostExtrasContent = null, PreHeroContent = null, PostHeroContent = null }) {
+	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 });
+	const darkMode = useStore((state) => state.darkMode);
+	const lobbyDetails = useStore((state) => state.lobbyDetails);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "landing-page",
+		children: [
+			AdditionalContent,
+			/* @__PURE__ */ jsx("div", {
+				className: "background-wrap",
+				children: /* @__PURE__ */ jsx("img", {
+					src: backgroundImage,
+					alt: "",
+					width: "100%",
+					height: "100%",
+					style: {
+						objectFit: "cover",
+						objectPosition: "bottom"
+					}
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "container d-flex flex-column-reverse flex-lg-row justify-content-center align-items-center py-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "",
+						style: { "width": maxInnerWidth },
+						children: [
+							PreHeroContent,
+							!disableHero && /* @__PURE__ */ jsxs("div", {
+								className: "landing-hero text-center mb-2",
+								children: [/* @__PURE__ */ jsx("img", {
+									src: logoImage,
+									alt: "",
+									width: "200",
+									height: "auto",
+									style: {
+										objectFit: "cover",
+										objectPosition: "bottom"
+									}
+								}), /* @__PURE__ */ jsx("h1", {
+									className: `text-center mb-0 ${brandingTextClass}`,
+									children: process.env.NEXT_PUBLIC_GAME_NAME
+								})]
+							}),
+							PostHeroContent,
+							/* @__PURE__ */ jsxs("div", {
+								className: "card card-articles mb-3",
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "card-header",
+										children: /* @__PURE__ */ jsx(NicknameInput, { useStore })
+									}),
+									CardBodyOverride ? /* @__PURE__ */ jsx(CardBodyOverride, {}) : /* @__PURE__ */ jsxs("div", {
+										className: "card-body",
+										children: [singlePlayerConfig && /* @__PURE__ */ jsx(Link, {
+											href: "/play",
+											style: { textDecoration: "none" },
+											children: /* @__PURE__ */ jsxs(ArticlesButton, {
+												variant: "",
+												className: "d-flex justify-content-center align-items-center mb-3 w-100",
+												onClick: () => {},
+												children: [/* @__PURE__ */ jsx("i", { className: "fad fa-play me-2" }), "Single Player"]
+											})
+										}), multiplayerConfig && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+											className: "fw-bold mb-1 small text-center",
+											children: [
+												lobbyDetails?.players.length || 0,
+												" player",
+												lobbyDetails?.players.length !== 1 && "s",
+												" in the lobby."
+											]
+										}), /* @__PURE__ */ jsx("div", {
+											className: "servers",
+											children: Array.from({ length: multiplayerConfig?.defaultServers }).map((_, id) => {
+												let lobbyLookup = lobbyDetails?.games?.find((lobby) => parseInt(lobby.server_id) == id);
+												return /* @__PURE__ */ jsxs("div", {
+													className: "server",
+													children: [
+														/* @__PURE__ */ jsxs("div", {
+															className: "d-flex justify-content-between align-items-center w-100 mb-2",
+															children: [/* @__PURE__ */ jsx("div", {
+																className: "mb-0",
+																style: { fontSize: "0.9rem" },
+																children: /* @__PURE__ */ jsxs("b", { children: ["Server ", id] })
+															}), /* @__PURE__ */ jsxs("div", {
+																className: "mb-0",
+																children: [lobbyLookup?.players?.length || 0, "/4"]
+															})]
+														}),
+														/* @__PURE__ */ jsx("div", {
+															className: "d-flex justify-content-around w-100 mb-1",
+															children: [
+																1,
+																2,
+																3,
+																4
+															].map((player_count) => {
+																let playerLookup = false;
+																if (lobbyLookup?.players?.length >= player_count) playerLookup = true;
+																return /* @__PURE__ */ jsx("div", {
+																	className: "icon",
+																	style: {
+																		width: "20px",
+																		height: "20px",
+																		...playerLookup ? { backgroundColor: "black" } : { backgroundColor: "gray" },
+																		border: "1px solid black"
+																	}
+																}, player_count);
+															})
+														}),
+														/* @__PURE__ */ jsx(Link, {
+															className: ``,
+															href: {
+																pathname: `/play`,
+																query: { server: id }
+															},
+															style: { ...multiplayerConfig?.comingSoon ? { pointerEvents: "none" } : {} },
+															children: /* @__PURE__ */ jsx(ArticlesButton, {
+																small: true,
+																className: "px-3",
+																disabled: multiplayerConfig?.comingSoon,
+																children: multiplayerConfig?.comingSoon ? "Coming Soon" : "Join Game"
+															})
+														})
+													]
+												}, id);
+											})
+										})] })]
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "card-footer d-flex flex-wrap justify-content-center",
+										children: /* @__PURE__ */ jsx(PrimaryButtonGroup, {
+											useStore,
+											type: "Landing"
+										})
+									})
+								]
+							}),
+							PostCardContent,
+							/* @__PURE__ */ jsxs("div", {
+								className: "extras",
+								children: [/* @__PURE__ */ jsx(SessionButton, {
+									port: process.env.NEXT_PUBLIC_GAME_PORT,
+									friendsButton: true
+								}), /* @__PURE__ */ jsx(ReturnToLauncherButton, {})]
+							}),
+							PostExtrasContent
+						]
+					}),
+					!disableGameScoreboard && /* @__PURE__ */ jsx(GameScoreboard, {
+						game: process.env.NEXT_PUBLIC_GAME_NAME,
+						style: "Default",
+						darkMode: darkMode ? true : false,
+						prepend: RotatingMascot && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+							style: {
+								width: "100%",
+								height: "200px",
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center"
+							},
+							children: /* @__PURE__ */ jsx(RotatingMascot, {})
+						}) })
+					}),
+					!disableAd && /* @__PURE__ */ jsx(Ad, {
+						style: "Default",
+						section: "Games",
+						section_id: process.env.NEXT_PUBLIC_GAME_NAME,
+						darkMode: darkMode ? true : false,
+						user_ad_token: userToken,
+						userDetails,
+						userDetailsLoading
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { PageTemplateLandingPage as default };

package/dist/{SettingsModal-DDTYTP4z.js → SettingsModal-Cy49y82s.js}

@@ -89,9 +89,12 @@ function AudioTab({ useAudioStore, config }) {
 		/* @__PURE__ */ jsx("div", {
 			className: "border mb-3 p-2",
 			children: config?.tabs?.Audio?.sliders?.map((slider_obj) => {
-				return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Form.Label, {
+				return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Form.Label, {
 					className: "mb-0",
-					children: slider_obj.label
+					children: [/* @__PURE__ */ jsx("span", { children: slider_obj.label }), audioSettings?.[slider_obj.key] && /* @__PURE__ */ jsxs("span", {
+						className: "ms-2 text-muted",
+						children: [audioSettings[slider_obj.key], "%"]
+					})]
 				}), /* @__PURE__ */ jsx(Form.Range, {
 					value: audioSettings?.[slider_obj.key],
 					onChange: (value) => {
@@ -103,7 +106,7 @@ function AudioTab({ useAudioStore, config }) {
 				})] }, slider_obj.key);
 			})
 		}),
-		config?.tabs?.Controls?.children
+		config?.tabs?.Audio?.children
 	] });
 }
 //#endregion
@@ -163,7 +166,7 @@ function SocketSettings({ useStore }) {
 function ControlsTab({ useTouchControlsStore, config }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "",
-		children: [useTouchControlsStore && /* @__PURE__ */ jsx(TouchControls, { useTouchControlsStore }), config?.tabs?.Controls?.children]
+		children: [useTouchControlsStore && config?.tabs?.Controls?.touchControls && /* @__PURE__ */ jsx(TouchControls, { useTouchControlsStore }), config?.tabs?.Controls?.children]
 	});
 }
 function TouchControls({ useTouchControlsStore }) {
@@ -232,7 +235,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.0.41",
+	version: "1.1.0",
 	type: "module",
 	imports: { "#root/src/*": "./src/*" },
 	main: "./dist/index.js",
@@ -250,17 +253,21 @@ var package_default = {
 		"./NicknameInput": "./dist/NicknameInput.js",
 		"./ArticlesAd": "./dist/ArticlesAd.js",
 		"./GameScoreboard": "./dist/GameScoreboard.js",
+		"./PageTemplateLandingPage": "./dist/PageTemplateLandingPage.js",
 		"./ReturnToLauncherButton": "./dist/ReturnToLauncherButton.js",
 		"./SignInButton": "./dist/SignInButton.js",
 		"./SessionButton": "./dist/SessionButton.js",
 		"./GlobalHead": "./dist/GlobalHead.js",
 		"./GlobalBody": "./dist/GlobalBody.js",
+		"./GlobalClientModals": "./dist/GlobalClientModals.js",
 		"./ViewUserModal": "./dist/ViewUserModal.js",
 		"./SettingsModal": "./dist/SettingsModal.js",
 		"./CreditsModal": "./dist/CreditsModal.js",
+		"./InfoModal": "./dist/InfoModal.js",
 		"./DarkModeHandler": "./dist/DarkModeHandler.js",
 		"./ToontownModeHandler": "./dist/ToontownModeHandler.js",
 		"./SocketServerUrlHandler": "./dist/SocketServerUrlHandler.js",
+		"./HasNoMouseHandler": "./dist/HasNoMouseHandler.js",
 		"./FriendsList": "./dist/FriendsList.js",
 		"./useUserDetails": "./dist/useUserDetails.js",
 		"./useUserToken": "./dist/useUserToken.js",
@@ -268,7 +275,10 @@ var package_default = {
 		"./useFullscreen": "./dist/useFullscreen.js",
 		"./typicalZustandStoreExcludes": "./dist/typicalZustandStoreExcludes.js",
 		"./typicalZustandStoreStateSlice": "./dist/typicalZustandStoreStateSlice.js",
+		"./defaultGameNextConfig": "./dist/defaultGameNextConfig.js",
+		"./defaultGameThemeConfig": "./dist/defaultGameThemeConfig.js",
 		"./getSignOutRedirectUrl": "./dist/getSignOutRedirectUrl.js",
+		"./generateRandomNickname": "./dist/generateRandomNickname.js",
 		"./dist/style.css": "./dist/articles-dev-box.css",
 		"./dist/articles-dev-box.css": "./dist/articles-dev-box.css"
 	},
@@ -303,10 +313,26 @@ var package_default = {
 //#endregion
 //#region src/components/Games/Settings/DebugTab.jsx
 function DebugTab({ useStore, config }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "mb-3",
-		children: ["dev-box version: ", package_default.version]
-	}), config?.tabs?.Debug?.children && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", {}), config?.tabs?.Debug?.children] })] });
+	const showStats = useStore((state) => state?.debugConfig?.showStats);
+	const setDebugConfigKey = useStore((state) => state?.setDebugConfigKey);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "mb-3",
+			children: ["dev-box version: ", package_default.version]
+		}),
+		/* @__PURE__ */ jsx("div", { children: "Show Debug Stats" }),
+		/* @__PURE__ */ jsx("div", {
+			className: "mb-3",
+			children: [false, true].map((level, i) => /* @__PURE__ */ jsx(ArticlesButton, {
+				active: showStats === level,
+				onClick: () => {
+					setDebugConfigKey("showStats", level);
+				},
+				children: level ? "Enabled" : "Disabled"
+			}, i))
+		}),
+		config?.tabs?.Debug?.children && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", {}), config?.tabs?.Debug?.children] })
+	] });
 }
 //#endregion
 //#region src/components/Games/Settings/SettingsModal.jsx
@@ -323,6 +349,7 @@ function SettingsModal({ show, setShow, store, useAudioStore, useTouchControlsSt
 			setShow(false);
 		},
 		children: store && /* @__PURE__ */ jsx(ModalContent, {
+			setShow,
 			useStore: store,
 			useAudioStore,
 			useTouchControlsStore,
@@ -331,7 +358,7 @@ function SettingsModal({ show, setShow, store, useAudioStore, useTouchControlsSt
 		})
 	});
 }
-function ModalContent({ useStore, useAudioStore, useTouchControlsStore, useSocketStore, config }) {
+function ModalContent({ setShow, useStore, useAudioStore, useTouchControlsStore, useSocketStore, config }) {
 	const [tab, setTab] = useState(localStorage.getItem("articles_settings_tab") || "Graphics");
 	const handleTabChange = (newTab) => {
 		setTab(newTab);

package/dist/SettingsModal.js

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

package/dist/articles-dev-box.css

@@ -303,6 +303,14 @@
   margin-right: 0;
   font-size: 1.25rem;
 }
+@media (min-width: 992px) {
+  .menu-bar .menu-bar-container .Center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
 
 .mobile-menu {
   position: fixed;

package/dist/defaultGameNextConfig.js

@@ -0,0 +1,25 @@
+//#region src/constants/defaultGameNextConfig.js
+var defaultGameNextConfig = {
+	poweredByHeader: false,
+	reactCompiler: true,
+	images: { remotePatterns: [{
+		protocol: "https",
+		hostname: "cdn.articles.media",
+		port: ""
+	}, {
+		protocol: "https",
+		hostname: "articles-website.s3.amazonaws.com",
+		port: ""
+	}] },
+	async headers() {
+		return [{
+			source: "/(.*)",
+			headers: [{
+				key: "X-Frame-Options",
+				value: "SAMEORIGIN"
+			}]
+		}];
+	}
+};
+//#endregion
+export { defaultGameNextConfig as default };

package/dist/defaultGameThemeConfig.js

@@ -0,0 +1,11 @@
+//#region src/constants/defaultGameThemeConfig.js
+var getTheme = (createTheme) => createTheme({
+	cssVariables: true,
+	palette: { mode: "dark" },
+	components: { MuiAlert: { styleOverrides: { root: { variants: [{
+		props: { severity: "info" },
+		style: { backgroundColor: "#60a5fa" }
+	}] } } } }
+});
+//#endregion
+export { getTheme as default };

package/dist/generateRandomNickname.js

@@ -0,0 +1,78 @@
+//#region src/util/generateRandomNickname.js
+var defaultAdjectives = [
+	"Swift",
+	"Clever",
+	"Bright",
+	"Bold",
+	"Calm",
+	"Quick",
+	"Smart",
+	"Witty",
+	"Sharp",
+	"Kind",
+	"Cool",
+	"Vast",
+	"Fair",
+	"Brave",
+	"Keen",
+	"Grand",
+	"Pure",
+	"Rich",
+	"Smooth",
+	"Strong",
+	"Sunny",
+	"Wild",
+	"Wise",
+	"Zero",
+	"Great",
+	"Elite",
+	"Prime",
+	"Solid",
+	"Global",
+	"Unique"
+];
+var defaultNouns = [
+	"Fox",
+	"Wolf",
+	"Bear",
+	"Eagle",
+	"Hawk",
+	"Lion",
+	"Tiger",
+	"Shark",
+	"Owl",
+	"Deer",
+	"Falcon",
+	"Raven",
+	"Panda",
+	"Koala",
+	"Otter",
+	"Lynx",
+	"River",
+	"Star",
+	"Sky",
+	"Mountain",
+	"Cloud",
+	"Ocean",
+	"Forest",
+	"Storm",
+	"Peak",
+	"Valley",
+	"Desert",
+	"Island",
+	"Bridge"
+];
+/**
+* Generates a random pattern/solving-themed nickname.
+* @returns {string} A random nickname like "CleverSolver42" or "SwiftMatcher7".
+*/
+var generateRandomNickname = (config) => {
+	const { type, parts } = config || {};
+	if (type == "Basic") {
+		const adjectives = parts[0] || defaultAdjectives;
+		const nouns = parts[1] || defaultNouns;
+		return `${(adjectives || defaultAdjectives)[Math.floor(Math.random() * (adjectives || defaultAdjectives).length)]}${(nouns || defaultNouns)[Math.floor(Math.random() * (nouns || defaultNouns).length)]}${Math.floor(Math.random() * 100)}`;
+	}
+};
+//#endregion
+export { generateRandomNickname as default };

package/dist/index.js

@@ -8,19 +8,25 @@ import useUserFriends from "./useUserFriends.js";
 import FriendsList from "./FriendsList.js";
 import { t as SessionButton } from "./SessionButton-D3cupnzD.js";
 import ArticlesAd from "./ArticlesAd.js";
-import { t as GameMenu } from "./GameMenu-CyW1MF3Y.js";
+import { t as GameMenu } from "./GameMenu-DeFdYvvR.js";
 import useFullscreen from "./useFullscreen.js";
 import PrimaryButtonGroup from "./GameMenuPrimaryButtonGroup.js";
 import NicknameInput from "./NicknameInput.js";
 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-DDTYTP4z.js";
+import { t as SettingsModal } from "./SettingsModal-Cy49y82s.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 typicalZustandStoreExcludes from "./typicalZustandStoreExcludes.js";
 import typicalZustandStoreStateSlice from "./typicalZustandStoreStateSlice.js";
+import defaultGameNextConfig from "./defaultGameNextConfig.js";
+import getTheme from "./defaultGameThemeConfig.js";
 import getSignOutRedirectUrl from "./getSignOutRedirectUrl.js";
-export { Ad_default as Ad, ArticlesAd, CreditsModal, DarkModeHandler, FriendsList, GameMenu, PrimaryButtonGroup as GameMenuPrimaryButtonGroup, GameScoreboard, GlobalBody_default as GlobalBody, GlobalHead, NicknameInput, ReturnToLauncherButton, SessionButton, SettingsModal, SignInButton, SocketServerUrlHandler, ToontownModeHandler, ViewUserModal, getSignOutRedirectUrl, typicalZustandStoreExcludes, typicalZustandStoreStateSlice, useFullscreen, useUserDetails, useUserFriends, useUserToken };
+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 };

package/dist/typicalZustandStoreStateSlice.js

@@ -22,9 +22,22 @@ var typicalZustandStoreStateSlice = (set, get, generateRandomNickname) => ({
 		set((prev) => ({ nicknameKeyboard: newValue }));
 	},
 	debug: false,
+	toggleDebug: () => {
+		set((prev) => ({ debug: !prev.debug }));
+	},
 	setDebug: (newValue) => {
 		set((prev) => ({ debug: newValue }));
 	},
+	debugConfig: { showStats: false },
+	setDebugConfig: (newValue) => {
+		set((prev) => ({ debugConfig: { ...newValue } }));
+	},
+	setDebugConfigKey: (key, value) => {
+		set((prev) => ({ debugConfig: {
+			...prev.debugConfig,
+			[key]: value
+		} }));
+	},
 	sidebar: true,
 	toggleSidebar: () => {
 		set((prev) => ({ sidebar: !prev.sidebar }));
@@ -33,6 +46,9 @@ var typicalZustandStoreStateSlice = (set, get, generateRandomNickname) => ({
 		set((prev) => ({ sidebar: newValue }));
 	},
 	showMenu: false,
+	toggleShowMenu: () => {
+		set((prev) => ({ showMenu: !prev.showMenu }));
+	},
 	setShowMenu: (value) => set({ showMenu: value }),
 	showSettingsModal: false,
 	setShowSettingsModal: (newValue) => {
@@ -77,7 +93,11 @@ var typicalZustandStoreStateSlice = (set, get, generateRandomNickname) => ({
 	},
 	reloadScene: () => {
 		set((prev) => ({ sceneKey: prev.sceneKey + 1 }));
-	}
+	},
+	hasNoMouse: null,
+	setHasNoMouse: (value) => set({ hasNoMouse: value }),
+	isTouchCapable: null,
+	setIsTouchCapable: (value) => set({ isTouchCapable: value })
 });
 //#endregion
 export { typicalZustandStoreStateSlice as default };

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.0.41",
+  "version": "1.1.0",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"
@@ -23,17 +23,21 @@
     "./NicknameInput": "./dist/NicknameInput.js",
     "./ArticlesAd": "./dist/ArticlesAd.js",
     "./GameScoreboard": "./dist/GameScoreboard.js",
+    "./PageTemplateLandingPage": "./dist/PageTemplateLandingPage.js",
     "./ReturnToLauncherButton": "./dist/ReturnToLauncherButton.js",
     "./SignInButton": "./dist/SignInButton.js",
     "./SessionButton": "./dist/SessionButton.js",
     "./GlobalHead": "./dist/GlobalHead.js",
     "./GlobalBody": "./dist/GlobalBody.js",
+    "./GlobalClientModals": "./dist/GlobalClientModals.js",
     "./ViewUserModal": "./dist/ViewUserModal.js",
     "./SettingsModal": "./dist/SettingsModal.js",
     "./CreditsModal": "./dist/CreditsModal.js",
+    "./InfoModal": "./dist/InfoModal.js",
     "./DarkModeHandler": "./dist/DarkModeHandler.js",
     "./ToontownModeHandler": "./dist/ToontownModeHandler.js",
     "./SocketServerUrlHandler": "./dist/SocketServerUrlHandler.js",
+    "./HasNoMouseHandler": "./dist/HasNoMouseHandler.js",
     "./FriendsList": "./dist/FriendsList.js",
     "./useUserDetails": "./dist/useUserDetails.js",
     "./useUserToken": "./dist/useUserToken.js",
@@ -41,7 +45,10 @@
     "./useFullscreen": "./dist/useFullscreen.js",
     "./typicalZustandStoreExcludes": "./dist/typicalZustandStoreExcludes.js",
     "./typicalZustandStoreStateSlice": "./dist/typicalZustandStoreStateSlice.js",
+    "./defaultGameNextConfig": "./dist/defaultGameNextConfig.js",
+    "./defaultGameThemeConfig": "./dist/defaultGameThemeConfig.js",
     "./getSignOutRedirectUrl": "./dist/getSignOutRedirectUrl.js",
+    "./generateRandomNickname": "./dist/generateRandomNickname.js",
     "./dist/style.css": "./dist/articles-dev-box.css",
     "./dist/articles-dev-box.css": "./dist/articles-dev-box.css"
   },