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

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

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/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/{SettingsModal-DDTYTP4z.js → SettingsModal-B7EJA7mn.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.0.42",
 	type: "module",
 	imports: { "#root/src/*": "./src/*" },
 	main: "./dist/index.js",
@@ -261,6 +264,7 @@ var package_default = {
 		"./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",
@@ -303,10 +307,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

package/dist/SettingsModal.js

@@ -1,2 +1,2 @@
-import { t as SettingsModal } from "./SettingsModal-DDTYTP4z.js";
+import { t as SettingsModal } from "./SettingsModal-B7EJA7mn.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/index.js

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

package/dist/typicalZustandStoreStateSlice.js

@@ -25,6 +25,16 @@ var typicalZustandStoreStateSlice = (set, get, generateRandomNickname) => ({
 	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 }));
@@ -77,7 +87,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.0.42",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"
@@ -34,6 +34,7 @@
     "./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",