@articles-media/articles-dev-box 1.5.0 → 1.5.1

package/README.md

@@ -68,6 +68,7 @@ npm run dev
 | GlobalClientModals | Imports all global client modals like FriendsList, CreditsModal, SettingsModal, InfoModal, and so on | USA Tycoon |
 | generateRandomNickname | Reusable way of doing random nicknames from package | USA Tycoon |
 | getAssetSource | Gets an assets source location based on the NEXT_PUBLIC_MODEL_SOURCE env value, allows easier/cheaper open sourcing of games by serving public site assets as CDN and dev/cloned site assets locally | School Run |
+| useAssetSource | Like getAssetSource but gets an assets source location based on the useStore state of modelSource. Main difference is this can be changed in game. | School Run |
 | defaultGameNextConfig | Not usable, for reference | None |
 | defaultGameThemeConfig | Not usable, for reference | None |
 | useModalNavigation | Handles navigating a modal with controller | None |

package/dist/{GameMenu-CBn1r9Cq.js → GameMenu-Cu0LB-VG.js}

@@ -103,6 +103,7 @@ function MenuButton({ useStore, menuBarConfig }) {
 * @param {React.ComponentType} [props.menuBarConfig.leftSlotChildren] - Content to render in the left slot of the menu bar.
 * @param {React.ComponentType} [props.menuBarConfig.centerSlotChildren] - Content to render in the center slot of the menu bar.
 * @param {React.ComponentType} [props.menuBarConfig.rightSlotChildren] - Content to render in the right slot of the menu bar.
+* @param {React.ComponentType} [props.menuBarConfig.settingsWithMenuButton] - Show settings button inside the menu button.
 */
 function GameMenu(props) {
 	const { useStore, LeftPanelContent, sidebarConfig, menuBarConfig } = props;

package/dist/GameMenu.js

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

package/dist/GlobalClientModals.js

@@ -1,7 +1,7 @@
 "use client";
 import { n as __toESM, t as require_classnames } from "./classnames-No-mjhw1.js";
 import { n as useMainSiteStatus, t as useAuthSiteStatus } from "./useAuthSiteStatus-DDN0q8T0.js";
-import { lazy } from "react";
+import { lazy, useEffect } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Global/ArticlesDevStatusBadge.jsx
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
@@ -57,6 +57,31 @@ function ArticlesDevStatusBadge({ useStore }) {
 	})] });
 }
 //#endregion
+//#region src/components/UI/ScreenshotModeHandler.jsx
+/**
+* Handles the screenshot mode functionality.
+*
+* @param {function} A Zustand store hook - With screenshotMode and setScreenshotMode
+* @returns {null} Nothing returned from this function.
+*/
+function ScreenshotModeHandler({ useStore }) {
+	const screenshotMode = useStore((state) => state.screenshotMode);
+	const hasHydrated = useStore((state) => state._hasHydrated);
+	useEffect(() => {
+		const indicator = document.querySelector("[data-nextjs-dev-overlay]");
+		if (!hasHydrated) return;
+		console.log("screenshotMode changed:", screenshotMode);
+		if (screenshotMode) {
+			document.body.setAttribute("data-articles-dev-box-screenshot-mode", "enabled");
+			if (indicator) indicator.style.display = "none";
+		} else {
+			document.body.setAttribute("data-articles-dev-box-screenshot-mode", "disabled");
+			if (indicator) indicator.style.display = "block";
+		}
+	}, [screenshotMode, hasHydrated]);
+	return /* @__PURE__ */ jsx(Fragment, {});
+}
+//#endregion
 //#region src/components/Global/GlobalClientModals.jsx
 var InfoModal = lazy(() => import("./InfoModal.js"));
 var CreditsModal = lazy(() => import("./CreditsModal.js"));
@@ -112,11 +137,15 @@ function GlobalClientModals({ useStore, useAudioStore, useTouchControlsStore, us
 			setShow: setShowInviteModal,
 			useSocketStore
 		}),
-		/* @__PURE__ */ jsxs(Fragment, { children: [showDevStatusModal && /* @__PURE__ */ jsx(StatusModal, {
-			show: showDevStatusModal,
-			setShow: setShowDevStatusModal,
-			useSocketStore
-		}), process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx(ArticlesDevStatusBadge, { useStore })] })
+		/* @__PURE__ */ jsxs(Fragment, { children: [
+			showDevStatusModal && /* @__PURE__ */ jsx(StatusModal, {
+				show: showDevStatusModal,
+				setShow: setShowDevStatusModal,
+				useSocketStore
+			}),
+			process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx(ArticlesDevStatusBadge, { useStore }),
+			/* @__PURE__ */ jsx(ScreenshotModeHandler, { useStore })
+		] })
 	] });
 }
 //#endregion

package/dist/PageTemplateLandingPage.js

@@ -11,6 +11,39 @@ var SessionButton = lazy(() => import("./SessionButton.js"));
 var ReturnToLauncherButton = lazy(() => import("./ReturnToLauncherButton.js"));
 var GameScoreboard = lazy(() => import("./GameScoreboard.js"));
 var Ad = lazy(() => import("./Ad.js"));
+/**
+* Landing page template for a game with single/multiplayer options, scoreboard and ads.
+*
+* @param {Object} props - Component props
+* @param {Function} props.useStore - Zustand (or similar) store hook
+* @param {Function} props.useSocketStore - Socket store hook
+* @param {React.Component|Function|Node} props.RotatingMascot - Mascot component or node
+* @param {Function} props.Link - Router Link component
+* @param {string} props.logoImage - URL for the logo image
+* @param {string} props.backgroundImage - URL for the background image
+* @param {React.Node} [props.CardBodyOverride] - Overrides the default card body
+* @param {React.Node} [props.CardBodyAppendContent] - Content appended to card body
+* @param {React.Node} [props.CardBodyPrependContent] - Content prepended to card body
+* @param {Object} [props.singlePlayerConfig] - Single player configuration
+* @param {Object} [props.multiplayerConfig] - Multiplayer configuration
+* @param {string} [props.brandingTextClass] - Extra class for branding text
+* @param {boolean} [props.disableHero] - Disable hero section
+* @param {React.Node} [props.heroOverride] - Override for hero area
+* @param {boolean} [props.disableAd] - Disable ad slot
+* @param {boolean} [props.disableGameScoreboard] - Disable scoreboard
+* @param {Object} [props.gameScoreboardConfig] - Config for scoreboard
+* @param {string|number} [props.maxInnerWidth] - Max inner width (CSS value)
+* @param {React.Node} [props.AdditionalContent] - Additional top-level content
+* @param {React.Node} [props.PostCardContent] - Content shown after the card
+* @param {React.Node} [props.PostExtrasContent] - Content shown after extras
+* @param {React.Node} [props.PreHeroContent] - Content shown before hero
+* @param {React.Node} [props.PostHeroContent] - Content shown after hero
+* @param {Object} [props.NicknameInputConfig] - Config for `NicknameInput`
+* @param {React.Node} [props.CardOverride] - Completely override the card
+* @param {React.Node} [props.LandingBackgroundAnimation] - Optional background animation node
+* @param {Function} [props.useRouter] - Router hook (optional)
+* @returns {React.Element} Landing page element
+*/
 function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Link, logoImage, backgroundImage, CardBodyOverride, CardBodyAppendContent, CardBodyPrependContent, singlePlayerConfig, multiplayerConfig, brandingTextClass, disableHero, heroOverride, disableAd, disableGameScoreboard, gameScoreboardConfig, maxInnerWidth = "20rem", AdditionalContent = null, PostCardContent = null, PostExtrasContent = null, PreHeroContent = null, PostHeroContent = null, NicknameInputConfig = null, CardOverride = null, LandingBackgroundAnimation = null, useRouter = 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 });
@@ -142,6 +175,15 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
 		]
 	});
 }
+/**
+* Server list renderer used on the landing page. Shows available servers and join buttons.
+*
+* @param {Object} props
+* @param {Function} props.useStore - Store hook to access lobby details
+* @param {Object} props.multiplayerConfig - Multiplayer configuration (e.g. defaultServers)
+* @param {Function|Component} props.Link - Router Link component
+* @returns {React.Element}
+*/
 function Servers({ useStore, multiplayerConfig, Link }) {
 	const lobbyDetails = useStore((state) => state.lobbyDetails);
 	useStore((state) => state.lobbyDetails.online_player_count);
@@ -205,6 +247,14 @@ function Servers({ useStore, multiplayerConfig, Link }) {
 		})
 	});
 }
+/**
+* Online players summary component.
+*
+* @param {Object} props
+* @param {Function} props.useStore - Store hook to access lobby/player counts
+* @param {Object} props.multiplayerConfig - Multiplayer configuration defining templates
+* @returns {React.Element}
+*/
 function OnlinePlayers({ useStore, multiplayerConfig }) {
 	const lobbyDetails = useStore((state) => state.lobbyDetails);
 	const landing_player_count = useStore((state) => state.lobbyDetails.landing_player_count);

package/dist/ReusedSocketLogicHandler.js

@@ -128,6 +128,8 @@ function ReusedSocketLogicHandler({ pathname, useStore, useGameStore, useSocketS
 		}
 	}, [debugConfig.enabled]);
 	if (debugConfig.enabled && isVisible && process.env.NODE_ENV !== "production") return /* @__PURE__ */ jsxs("div", {
+		id: "articles-dev-box-socket-debug-overlay",
+		className: "test",
 		style: {
 			position: "fixed",
 			bottom: 0,

package/dist/{SettingsModal-DOJp07_e.js → SettingsModal-9wsM2qrD.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.5.0",
+	version: "1.5.1",
 	type: "module",
 	sideEffects: false,
 	imports: { "#root/src/*": "./src/*" },

package/dist/SettingsModal.js

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

package/dist/articles-dev-box.css

@@ -488,6 +488,13 @@
   bottom: 50%;
   transform: translateY(50%);
   left: 8px;
+}body[data-articles-dev-box-screenshot-mode=enabled] .articles-dev-status,
+body[data-articles-dev-box-screenshot-mode=enabled] .dev-box-game-menu,
+body[data-articles-dev-box-screenshot-mode=enabled] .hide-in-screenshot-mode,
+body[data-articles-dev-box-screenshot-mode=enabled] #articles-dev-box-socket-debug-overlay,
+body[data-articles-dev-box-screenshot-mode=enabled] .show-sidebar .panel-left.dev-box-game-menu,
+body[data-articles-dev-box-screenshot-mode=enabled] #devtools-indicator {
+  display: none !important;
 }.articles-settings-modal input[type=range]::-webkit-slider-runnable-track {
   background: #000;
   height: 0.5rem;

package/dist/index.js

@@ -8,7 +8,7 @@ import useUserFriends from "./useUserFriends.js";
 import FriendsList from "./FriendsList.js";
 import { t as SessionButton } from "./SessionButton-D0EcgEPz.js";
 import ArticlesAd from "./ArticlesAd.js";
-import { t as GameMenu } from "./GameMenu-CBn1r9Cq.js";
+import { t as GameMenu } from "./GameMenu-Cu0LB-VG.js";
 import useFullscreen from "./useFullscreen.js";
 import PrimaryButtonGroup from "./GameMenuPrimaryButtonGroup.js";
 import NicknameInput from "./NicknameInput.js";
@@ -16,7 +16,7 @@ import { t as GameScoreboard } from "./GameScoreboard-BvE_sIDW.js";
 import PageTemplateLandingPage from "./PageTemplateLandingPage.js";
 import GlobalHead from "./GlobalHead.js";
 import GlobalBody_default from "./GlobalBody.js";
-import { t as SettingsModal } from "./SettingsModal-DOJp07_e.js";
+import { t as SettingsModal } from "./SettingsModal-9wsM2qrD.js";
 import CreditsModal from "./CreditsModal.js";
 import InfoModal from "./InfoModal.js";
 import DarkModeHandler from "./DarkModeHandler.js";

package/dist/typicalZustandStoreStateSlice.js

@@ -107,7 +107,10 @@ var typicalZustandStoreStateSlice = (set, get, generateRandomNickname) => ({
 	isTouchCapable: null,
 	setIsTouchCapable: (value) => set({ isTouchCapable: value }),
 	modelSource: process.env.NEXT_PUBLIC_MODEL_SOURCE || "Local",
-	setModelSource: (value) => set({ modelSource: value })
+	setModelSource: (value) => set({ modelSource: value }),
+	screenshotMode: false,
+	setScreenshotMode: (value) => set({ screenshotMode: value }),
+	toggleScreenshotMode: () => set({ screenshotMode: !get().screenshotMode })
 });
 //#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.5.0",
+  "version": "1.5.1",
   "type": "module",
   "sideEffects": false,
   "imports": {