@articles-media/articles-dev-box 1.0.26 → 1.0.28

package/README.md

@@ -37,6 +37,8 @@ npm run dev
 
 - ReturnToLauncherButton
     - For bringing users back to their state in the games showcase/launcher
+- SignInButton
+    - For bringing users to the accounts service to login at and redirecting back
 - GameScoreboard
     - Scoreboard for registered games that links with a user's Articles Media account.
 - Ad
@@ -53,6 +55,10 @@ npm run dev
     - All in one component to handle game credits UI across multiple games.
 - 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.
 - useUserToken
     - Hook for getting the subdomain auth token.
 - useUserDetails

package/dist/{GameScoreboard-DID7b4kw.js → GameScoreboard-pTQKozrD.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./Button-C8R7Qxqb.js";
-import { t } from "./ViewUserModal-BbphE2vW.js";
+import { t } from "./ViewUserModal-CrGeXxWG.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import o from "swr";

package/dist/GameScoreboard.js

@@ -1,2 +1,2 @@
-import { t as e } from "./GameScoreboard-DID7b4kw.js";
+import { t as e } from "./GameScoreboard-pTQKozrD.js";
 export { e as default };

package/dist/GlobalBody.js

@@ -4,7 +4,7 @@ import { n, t as r } from "./useAuthSiteStatus-Cj9IjMj7.js";
 import { Suspense as i, lazy as a, memo as o, useState as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/Global/GlobalBody.jsx
-var d = /* @__PURE__ */ e(t(), 1), f = a(() => import("./StatusModal-BrBJnAXD.js"));
+var d = /* @__PURE__ */ e(t(), 1), f = a(() => import("./StatusModal-CM9gjtT8.js"));
 function p(e) {
 	let [t, a] = s(!1), { data: o, error: p, isLoading: m, mutate: h } = n({ disable: process.env.NODE_ENV !== "development" }), { data: g, error: _, isLoading: v, mutate: y } = r({ disable: process.env.NODE_ENV !== "development" });
 	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("link", {

package/dist/{SettingsModal-DYcHm28E.js → SettingsModal-DZmAGhAO.js}

@@ -95,33 +95,42 @@ function c({ useAudioStore: t, config: o }) {
 }
 //#endregion
 //#region src/components/Games/Settings/MultiplayerTab.jsx
-function l({ useStore: t }) {
-	let n = t((e) => e.socketServerHost), o = t((e) => e.setSocketServerHost);
+function l({ useStore: t, config: n }) {
+	let o = t((e) => e.serverUrl), s = t((e) => e.setServerUrl), c = t((e) => e.connected), l = t((e) => e.connectSocket), u = t((e) => e.disconnectSocket);
 	return /* @__PURE__ */ i("div", {
-		className: "p-2",
+		className: "",
 		children: [
-			/* @__PURE__ */ r(a.Label, {
+			/* @__PURE__ */ i(a.Label, {
 				className: "mb-0",
-				children: "Socket Server Host"
+				children: [/* @__PURE__ */ i("div", { children: ["Status: ", /* @__PURE__ */ r("span", {
+					className: `badge ${c ? "bg-success" : "bg-danger"}`,
+					children: c ? "Online" : "Offline"
+				})] }), "Socket Server Host"]
 			}),
 			/* @__PURE__ */ r(a.Control, {
 				type: "text",
-				value: n,
-				onChange: (e) => o(e.target.value)
+				value: o,
+				onChange: (e) => s(e.target.value)
 			}),
 			/* @__PURE__ */ r(a.Label, {
 				className: "mb-0",
 				children: "Edit this to connect to a different multiplayer host!"
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ r("div", {
 				className: "mt-3",
-				children: [/* @__PURE__ */ r(e, {
-					className: "mb-1",
-					children: "Retry"
-				}), /* @__PURE__ */ i("div", { children: ["Status: ", /* @__PURE__ */ r("span", {
-					className: "badge bg-danger",
-					children: "Offline"
-				})] })]
+				children: c ? /* @__PURE__ */ r(e, {
+					className: "",
+					onClick: () => {
+						u();
+					},
+					children: "Disconnect"
+				}) : /* @__PURE__ */ r(e, {
+					className: "",
+					onClick: () => {
+						l();
+					},
+					children: "Connect"
+				})
 			})
 		]
 	});
@@ -129,53 +138,82 @@ function l({ useStore: t }) {
 //#endregion
 //#region src/components/Games/Settings/ControlsTab.jsx
 function u({ useTouchControlsStore: e }) {
-	return /* @__PURE__ */ i("div", {
-		className: "p-3",
-		children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("h5", { children: "Control Settings" }), /* @__PURE__ */ r("p", { children: "Configure your key bindings and control preferences here." })] }), e && /* @__PURE__ */ r(d, { useTouchControlsStore: e })]
+	return /* @__PURE__ */ r("div", {
+		className: "",
+		children: e && /* @__PURE__ */ r(d, { useTouchControlsStore: e })
 	});
 }
-function d({ useTouchControlsStore: e }) {
-	let t = e((e) => e.touchControls), n = e((e) => e.setTouchControls);
-	return /* @__PURE__ */ r("div", {
+function d({ useTouchControlsStore: t }) {
+	let n = t((e) => e?.enabled), a = t((e) => e?.setEnabled);
+	return /* @__PURE__ */ i("div", {
 		className: "mb-3",
-		children: [!1, !0].map((e, i) => /* @__PURE__ */ r(ArticlesButton, {
-			active: t === e,
-			onClick: () => {
-				n(e);
-			},
-			children: e ? "On" : "Off"
-		}, i))
+		children: [
+			/* @__PURE__ */ r("div", { children: "Touch Controls" }),
+			/* @__PURE__ */ r("div", {
+				className: "small mb-1",
+				children: "Adds on screen controls for touch devices."
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "mb-3",
+				children: [!1, !0].map((t, i) => /* @__PURE__ */ r(e, {
+					active: n === t,
+					onClick: () => {
+						a(t);
+					},
+					children: t ? "On" : "Off"
+				}, i))
+			})
+		]
 	});
 }
 //#endregion
 //#region src/components/Games/Settings/OtherTab.jsx
-function f({ useStore: t, children: a }) {
-	let o = t((e) => e?.debug), s = t((e) => e?.setDebug);
+function f({ useStore: t, config: a, children: o }) {
+	let s = t((e) => e?.debug), c = t((e) => e?.setDebug), l = t((e) => e?.toontownMode), u = t((e) => e?.setToontownMode);
 	return /* @__PURE__ */ i(n, { children: [
 		/* @__PURE__ */ r("div", { children: "Debug Mode" }),
 		/* @__PURE__ */ r("div", {
 			className: "mb-3",
 			children: [!1, !0].map((t, n) => /* @__PURE__ */ r(e, {
-				active: o === t,
+				active: s === t,
 				onClick: () => {
-					s(t);
+					c(t);
 				},
 				children: t ? "On" : "Off"
 			}, n))
 		}),
-		a && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
+		a?.tabs?.Other?.toontownMode && /* @__PURE__ */ i(n, { children: [
+			/* @__PURE__ */ r("div", { children: "Toontown Mode" }),
+			/* @__PURE__ */ r("div", {
+				className: "small mb-1",
+				children: "Mimics Toontown Online graphics."
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "mb-3",
+				children: [!1, !0].map((t, n) => /* @__PURE__ */ r(e, {
+					active: l === t,
+					onClick: () => {
+						u(t);
+					},
+					children: t ? "On" : "Off"
+				}, n))
+			})
+		] }),
+		o && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
 			className: "mb-3",
 			children: "Other Settings"
 		}), /* @__PURE__ */ r("div", {
 			className: "mb-3",
-			children: a
+			children: o
 		})] })
 	] });
 }
 //#endregion
 //#region src/components/Games/Settings/SettingsModal.jsx
-function p({ show: n, setShow: a, store: d, useAudioStore: p, useTouchControlsStore: m, config: h }) {
-	let [g, _] = t(!1), [v, y] = t("Graphics");
+function p({ show: n, setShow: a, store: d, useAudioStore: p, useTouchControlsStore: m, useSocketStore: h, config: g }) {
+	let [_, v] = t(!1), [y, b] = t(localStorage.getItem("articles_settings_tab") || "Graphics"), x = (e) => {
+		b(e), localStorage.setItem("articles_settings_tab", e);
+	};
 	return d((e) => e.darkMode), d((e) => e.setDarkMode), d((e) => e.arcadeMode), d((e) => e.setArcadeMode), /* @__PURE__ */ i(o, {
 		className: "articles-modal",
 		size: "md",
@@ -203,35 +241,38 @@ function p({ show: n, setShow: a, store: d, useAudioStore: p, useTouchControlsSt
 							"Multiplayer",
 							"Other"
 						].map((t) => /* @__PURE__ */ r(e, {
-							active: v == t,
+							active: y == t,
 							onClick: () => {
-								y(t);
+								x(t);
 							},
 							children: t
 						}, t))
 					}),
 					/* @__PURE__ */ r("hr", { className: "my-0" }),
 					/* @__PURE__ */ i("div", {
-						className: "p-2",
+						className: "p-3",
 						children: [
-							v == "Controls" && /* @__PURE__ */ r(u, {
+							y == "Controls" && /* @__PURE__ */ r(u, {
 								useStore: d,
 								useTouchControlsStore: m,
-								config: h
+								config: g
 							}),
-							v == "Graphics" && /* @__PURE__ */ r(s, {
+							y == "Graphics" && /* @__PURE__ */ r(s, {
 								useStore: d,
-								config: h
+								config: g
 							}),
-							v == "Audio" && /* @__PURE__ */ r(c, {
+							y == "Audio" && /* @__PURE__ */ r(c, {
 								useAudioStore: p,
-								config: h
+								config: g
 							}),
-							v == "Multiplayer" && /* @__PURE__ */ r(l, {
-								useStore: d,
-								config: h
+							y == "Multiplayer" && /* @__PURE__ */ r(l, {
+								useStore: h,
+								config: g
 							}),
-							v == "Other" && /* @__PURE__ */ r(f, { useStore: d })
+							y == "Other" && /* @__PURE__ */ r(f, {
+								useStore: d,
+								config: g
+							})
 						]
 					})
 				]

package/dist/SettingsModal.js

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

package/dist/SignInButton.js

@@ -0,0 +1,29 @@
+"use client";
+import { t as e } from "./Button-C8R7Qxqb.js";
+import { useEffect as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/User/SignInButton.jsx
+function a({ className: a, id: o, text: s }) {
+	let [c, l] = n(!1), u = process.env.NODE_ENV === "development" ? "http://localhost:3012" : "https://accounts.articles.media", [d, f] = n(`${u}/login`);
+	return t(() => {
+		l(!0);
+		let e = window.location.pathname, t = window.location.search;
+		f(`${u}/login?redirect=${encodeURIComponent(window.location.origin + e + t)}&type=subdomain`);
+	}, [u]), /* @__PURE__ */ r("a", {
+		href: d,
+		rel: "noopener noreferrer",
+		children: /* @__PURE__ */ i(e, {
+			className: `${a} w-100`,
+			id: o,
+			small: !0,
+			style: {
+				zIndex: 10,
+				position: "relative"
+			},
+			onClick: () => {},
+			children: [/* @__PURE__ */ r("i", { className: "fad fa-user" }), s || "Sign In"]
+		})
+	});
+}
+//#endregion
+export { a as default };

package/dist/SocketServerUrlHandler.js

@@ -0,0 +1,14 @@
+import { useEffect as e } from "react";
+//#region src/components/Games/SocketServerUrlHandler.jsx
+function t({ useStore: t }) {
+	return e(() => {
+		let e = t.getState()?.setSocketServerUrl, n = new URLSearchParams(window.location.search), r = n.get("socketServerUrl");
+		if (r) {
+			e(r), n.delete("socketServerUrl");
+			let t = window.location.pathname + (n.toString() ? `?${n.toString()}` : "") + window.location.hash;
+			window.history.replaceState({}, "", t);
+		}
+	}, []), null;
+}
+//#endregion
+export { t as default };

package/dist/{StatusModal-BrBJnAXD.js → StatusModal-CM9gjtT8.js}

@@ -19,7 +19,10 @@ function s({ show: s, setShow: c }) {
 					className: "d-flex align-items-center mb-2",
 					children: [/* @__PURE__ */ a("h5", {
 						className: "mb-0 me-2",
-						children: ["Main Site Status: ", p(m, h, g)]
+						children: ["Main Site Status: ", /* @__PURE__ */ i("span", {
+							className: `badge ${m ? "bg-success" : "bg-danger"}`,
+							children: p(m, h, g)
+						})]
 					}), /* @__PURE__ */ a(e, {
 						variant: "link",
 						size: "sm",
@@ -37,7 +40,10 @@ function s({ show: s, setShow: c }) {
 					className: "d-flex align-items-center mb-2",
 					children: [/* @__PURE__ */ a("h5", {
 						className: "mb-0 me-2",
-						children: ["Auth Site Status: ", p(v, y, b)]
+						children: ["Auth Site Status: ", /* @__PURE__ */ i("span", {
+							className: `badge ${v ? "bg-success" : "bg-danger"}`,
+							children: p(v, y, b)
+						})]
 					}), /* @__PURE__ */ a(e, {
 						variant: "link",
 						size: "sm",

package/dist/ToontownModeHandler.js

@@ -0,0 +1,14 @@
+import { useEffect as e } from "react";
+//#region src/components/Games/ToontownModeHandler.jsx
+function t({ useStore: t }) {
+	return e(() => {
+		let e = t.getState()?.setToontownMode, n = new URLSearchParams(window.location.search);
+		if (n.get("toontownMode")) {
+			e(!0), n.delete("toontownMode");
+			let t = window.location.pathname + (n.toString() ? `?${n.toString()}` : "") + window.location.hash;
+			window.history.replaceState({}, "", t);
+		}
+	}, []), null;
+}
+//#endregion
+export { t as default };

package/dist/{ViewUserModal-BbphE2vW.js → ViewUserModal-CrGeXxWG.js}

@@ -984,10 +984,11 @@ function R(e) {
 			]
 		});
 	};
-	function Oe(e) {
-		switch (e) {
+	function Oe(t) {
+		switch (t) {
 			case "Link": return /* @__PURE__ */ p("span", {
 				type: "button",
+				className: e.className,
 				onClick: () => {
 					T(!0);
 				},

package/dist/ViewUserModal.js

@@ -1,3 +1,3 @@
 "use client";
-import { t as e } from "./ViewUserModal-BbphE2vW.js";
+import { t as e } from "./ViewUserModal-CrGeXxWG.js";
 export { e as default };

package/dist/index.js

@@ -1,16 +1,19 @@
 import e from "./ReturnToLauncherButton.js";
-import t from "./ArticlesAd.js";
-import { t as n } from "./Ad-DW52TMZ4.js";
-import { t as r } from "./ViewUserModal-BbphE2vW.js";
-import { t as i } from "./GameScoreboard-DID7b4kw.js";
-import a from "./GlobalHead.js";
-import o from "./GlobalBody.js";
-import { t as s } from "./SettingsModal-DYcHm28E.js";
-import c from "./CreditsModal.js";
-import l from "./DarkModeHandler.js";
-import u from "./useUserFriends.js";
-import d from "./FriendsList.js";
-import f from "./useUserDetails.js";
-import p from "./useUserToken.js";
-import m from "./useFullscreen.js";
-export { n as Ad, t as ArticlesAd, c as CreditsModal, l as DarkModeHandler, d as FriendsList, i as GameScoreboard, o as GlobalBody, a as GlobalHead, e as ReturnToLauncherButton, s as SettingsModal, r as ViewUserModal, m as useFullscreen, f as useUserDetails, u as useUserFriends, p as useUserToken };
+import t from "./SignInButton.js";
+import n from "./ArticlesAd.js";
+import { t as r } from "./Ad-DW52TMZ4.js";
+import { t as i } from "./ViewUserModal-CrGeXxWG.js";
+import { t as a } from "./GameScoreboard-pTQKozrD.js";
+import o from "./GlobalHead.js";
+import s from "./GlobalBody.js";
+import { t as c } from "./SettingsModal-DZmAGhAO.js";
+import l from "./CreditsModal.js";
+import u from "./DarkModeHandler.js";
+import d from "./ToontownModeHandler.js";
+import f from "./SocketServerUrlHandler.js";
+import p from "./useUserFriends.js";
+import m from "./FriendsList.js";
+import h from "./useUserDetails.js";
+import g from "./useUserToken.js";
+import _ from "./useFullscreen.js";
+export { r as Ad, n as ArticlesAd, l as CreditsModal, u as DarkModeHandler, m as FriendsList, a as GameScoreboard, s as GlobalBody, o as GlobalHead, e as ReturnToLauncherButton, c as SettingsModal, t as SignInButton, f as SocketServerUrlHandler, d as ToontownModeHandler, i as ViewUserModal, _ as useFullscreen, h as useUserDetails, p as useUserFriends, g as useUserToken };

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.26",
+  "version": "1.0.28",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"
@@ -21,12 +21,15 @@
     "./ArticlesAd": "./dist/ArticlesAd.js",
     "./GameScoreboard": "./dist/GameScoreboard.js",
     "./ReturnToLauncherButton": "./dist/ReturnToLauncherButton.js",
+    "./SignInButton": "./dist/SignInButton.js",
     "./GlobalHead": "./dist/GlobalHead.js",
     "./GlobalBody": "./dist/GlobalBody.js",
     "./ViewUserModal": "./dist/ViewUserModal.js",
     "./SettingsModal": "./dist/SettingsModal.js",
     "./CreditsModal": "./dist/CreditsModal.js",
     "./DarkModeHandler": "./dist/DarkModeHandler.js",
+    "./ToontownModeHandler": "./dist/ToontownModeHandler.js",
+    "./SocketServerUrlHandler": "./dist/SocketServerUrlHandler.js",
     "./FriendsList": "./dist/FriendsList.js",
     "./useUserDetails": "./dist/useUserDetails.js",
     "./useUserToken": "./dist/useUserToken.js",