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

package/README.md

@@ -39,6 +39,8 @@ npm run dev
     - 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
+- SessionButton
+    - Button that manages sign in, sign out, and account details.
 - GameScoreboard
     - Scoreboard for registered games that links with a user's Articles Media account.
 - Ad
@@ -65,6 +67,10 @@ npm run dev
     - Hook for getting the details of the current user if a valid user token is found.
 - useFullscreen
     - Hook for going fullscreen on the body or provided element
+- typicalZustandStoreExcludes
+    - Array of strings that every game published by Articles Media would want to normally exclude from persisting in base game store.
+- typicalZustandStoreStateSlice
+    - Slice of zustand states that every game normally uses
 
 # Roadmap
 ⏹️ Remove Bootstrap reliance  

package/dist/{Ad-DW52TMZ4.js → Ad-CFuDgQYL.js}

@@ -1,21 +1,40 @@
 import { n as e, t } from "./classnames-DCsil9eG.js";
-import { t as n } from "./Button-C8R7Qxqb.js";
+import { t as n } from "./Button-sSB4xpOw.js";
 import { t as r } from "./Link-8nSDV4sI.js";
-import { n as i, o as a, r as o, s, t as c } from "./numberWithCommas-DXxghuXP.js";
+import { n as i, o as a, r as o, s, t as c } from "./numberWithCommas-DSRplpBy.js";
 import * as l from "react";
 import { lazy as u, memo as d, useEffect as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import g from "swr";
+//#region node_modules/date-fns/_lib/getRoundingMethod.js
+function _(e) {
+	return (t) => {
+		let n = (e ? Math[e] : Math.trunc)(t);
+		return n === 0 ? 0 : n;
+	};
+}
+//#endregion
+//#region node_modules/date-fns/differenceInMilliseconds.js
+function v(e, t) {
+	return a(e) - +a(t);
+}
+//#endregion
+//#region node_modules/date-fns/differenceInMinutes.js
+function y(e, t, n) {
+	let r = v(e, t) / s;
+	return _(n?.roundingMethod)(r);
+}
+//#endregion
 //#region node_modules/react-intersection-observer/dist/index.mjs
-var _ = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new WeakMap(), y = 0, b;
-function x(e) {
-	return e ? v.has(e) ? v.get(e) : (y += 1, v.set(e, y.toString()), v.get(e)) : "0";
+var b = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new WeakMap(), S = 0, C;
+function w(e) {
+	return e ? x.has(e) ? x.get(e) : (S += 1, x.set(e, S.toString()), x.get(e)) : "0";
 }
-function S(e) {
-	return Object.keys(e).sort().filter((t) => e[t] !== void 0).map((t) => `${t}_${t === "root" ? x(e.root) : e[t]}`).toString();
+function T(e) {
+	return Object.keys(e).sort().filter((t) => e[t] !== void 0).map((t) => `${t}_${t === "root" ? w(e.root) : e[t]}`).toString();
 }
-function C(e) {
-	let t = S(e), n = _.get(t);
+function E(e) {
+	let t = T(e), n = b.get(t);
 	if (!n) {
 		let r = /* @__PURE__ */ new Map(), i, a = new IntersectionObserver((t) => {
 			t.forEach((t) => {
@@ -30,11 +49,11 @@ function C(e) {
 			id: t,
 			observer: a,
 			elements: r
-		}, _.set(t, n);
+		}, b.set(t, n);
 	}
 	return n;
 }
-function w(e, t, n = {}, r = b) {
+function D(e, t, n = {}, r = C) {
 	if (window.IntersectionObserver === void 0 && r !== void 0) {
 		let i = e.getBoundingClientRect();
 		return t(r, {
@@ -47,13 +66,13 @@ function w(e, t, n = {}, r = b) {
 			rootBounds: i
 		}), () => {};
 	}
-	let { id: i, observer: a, elements: o } = C(n), s = o.get(e) || [];
+	let { id: i, observer: a, elements: o } = E(n), s = o.get(e) || [];
 	return o.has(e) || o.set(e, s), s.push(t), a.observe(e), function() {
-		s.splice(s.indexOf(t), 1), s.length === 0 && (o.delete(e), a.unobserve(e)), o.size === 0 && (a.disconnect(), _.delete(i));
+		s.splice(s.indexOf(t), 1), s.length === 0 && (o.delete(e), a.unobserve(e)), o.size === 0 && (a.disconnect(), b.delete(i));
 	};
 }
 l.Component;
-function T({ threshold: e, delay: t, trackVisibility: n, rootMargin: r, root: i, triggerOnce: a, skip: o, initialInView: s, fallbackInView: c, onChange: u } = {}) {
+function O({ threshold: e, delay: t, trackVisibility: n, rootMargin: r, root: i, triggerOnce: a, skip: o, initialInView: s, fallbackInView: c, onChange: u } = {}) {
 	let [d, f] = l.useState(null), p = l.useRef(u), m = l.useRef(s), [h, g] = l.useState({
 		inView: !!s,
 		entry: void 0
@@ -61,7 +80,7 @@ function T({ threshold: e, delay: t, trackVisibility: n, rootMargin: r, root: i,
 	p.current = u, l.useEffect(() => {
 		if (m.current === void 0 && (m.current = s), o || !d) return;
 		let l;
-		return l = w(d, (e, t) => {
+		return l = D(d, (e, t) => {
 			let n = m.current;
 			m.current = e, !(n === void 0 && !e) && (g({
 				inView: e,
@@ -102,7 +121,7 @@ function T({ threshold: e, delay: t, trackVisibility: n, rootMargin: r, root: i,
 l.useInsertionEffect ?? l.useLayoutEffect ?? l.useEffect;
 //#endregion
 //#region src/hooks/Ads/useAd.js
-var E = async (e) => {
+var ee = async (e) => {
 	if (process.env.NODE_ENV === "development") try {
 		let t = new URLSearchParams({
 			ad_id: e.ad_id,
@@ -112,44 +131,22 @@ var E = async (e) => {
 	} catch {}
 	let t = new URLSearchParams({ ad_id: e.ad_id }).toString();
 	return fetch(`${e.url}?${t}`).then((e) => e.json()).then((e) => e.result);
-}, ee = {
+}, te = {
 	dedupingInterval: 1e3 * 60 * 60,
 	errorRetryInterval: 1e3 * 60 * 5
-}, te = (e, t) => {
+}, k = (e, t) => {
 	let { data: n, error: r, isLoading: i, mutate: a } = g(e ? {
 		url: `https://articles.media/api/ads/${e}`,
 		ad_id: e,
 		user_ad_token: t
-	} : null, E, ee);
+	} : null, ee, te);
 	return {
 		data: n,
 		error: r,
 		isLoading: i,
 		mutate: a
 	};
-};
-//#endregion
-//#region node_modules/date-fns/_lib/getRoundingMethod.js
-function D(e) {
-	return (t) => {
-		let n = (e ? Math[e] : Math.trunc)(t);
-		return n === 0 ? 0 : n;
-	};
-}
-//#endregion
-//#region node_modules/date-fns/differenceInMilliseconds.js
-function O(e, t) {
-	return a(e) - +a(t);
-}
-//#endregion
-//#region node_modules/date-fns/differenceInMinutes.js
-function k(e, t, n) {
-	let r = O(e, t) / s;
-	return D(n?.roundingMethod)(r);
-}
-//#endregion
-//#region src/hooks/Ads/useAds.js
-var A = async (e) => {
+}, A = async (e) => {
 	if (process.env.NODE_ENV === "development") try {
 		return await (await fetch("http://localhost:3001/api/ads")).json();
 	} catch {}
@@ -166,24 +163,24 @@ var A = async (e) => {
 		isLoading: r,
 		mutate: i
 	};
-}, P = /* @__PURE__ */ e(t(), 1), F = u(() => import("./AdDetailsModal-FPwnBWKy.js")), I = u(() => import("./AdConfirmExitModal-BiIXNJwG.js"));
+}, P = /* @__PURE__ */ e(t(), 1), F = u(() => import("./AdDetailsModal-CdTR2Y9l.js")), I = u(() => import("./AdConfirmExitModal-skW9lp88.js"));
 function L(e, t) {
 	return Math.floor(Math.random() * (t - e + 1)) + e;
 }
 function R(e) {
-	let { previewMode: t, darkMode: a, user_ad_token: o, userDetails: s, userDetailsLoading: l, prepend: u, append: d } = e, g = [], [_, v] = p(null), { data: y, isLoading: b, mutate: x } = N({
+	let { previewMode: t, darkMode: a, user_ad_token: o, userDetails: s, userDetailsLoading: l, prepend: u, append: d } = e, g = [], [_, v] = p(null), { data: b, isLoading: x, mutate: S } = N({
 		loading: l,
 		disabled: s?.articles_membership?.status == "Active"
-	}), { data: S, isLoading: C } = te(_, o), w = e.previewData || {}, [E, ee] = p(null), [D, O] = p(null), [A, j] = p(null), [M, R] = p(0), [z, B] = p(!1), [V, H] = p(!1), [U, W] = p(!1), [ne, re] = p(/* @__PURE__ */ new Date()), [G, K] = p([]);
+	}), { data: C, isLoading: w } = k(_, o), T = e.previewData || {}, [E, D] = p(null), [ee, te] = p(null), [A, j] = p(null), [M, R] = p(0), [z, B] = p(!1), [V, H] = p(!1), [U, W] = p(!1), [ne, re] = p(/* @__PURE__ */ new Date()), [G, K] = p([]);
 	f(() => {
-		y && y?.length > 0 && !_ && (console.log("Ad Mounted or reduxAds changed"), v(e.ad_id || y[L(0, y?.length - 1)]?._id));
-	}, [y]), f(() => {}, [S]), f(() => {
-		S?.populated_promos && M >= 0 && j(S?.populated_promos[M]);
-	}, [M, S]);
+		b && b?.length > 0 && !_ && (console.log("Ad Mounted or reduxAds changed"), v(e.ad_id || b[L(0, b?.length - 1)]?._id));
+	}, [b]), f(() => {}, [C]), f(() => {
+		C?.populated_promos && M >= 0 && j(C?.populated_promos[M]);
+	}, [M, C]);
 	function q() {
 		H(!V);
 	}
-	let { ref: J, inView: Y, entry: ie } = T({
+	let { ref: J, inView: Y, entry: ie } = O({
 		threshold: 0,
 		triggerOnce: !0
 	});
@@ -193,7 +190,7 @@ function R(e) {
 			return;
 		}
 		let n = new URLSearchParams({
-			ad_id: S?._id,
+			ad_id: C?._id,
 			event: e
 		}).toString();
 		fetch(`/api/ads/event?${n}`).then(function(e) {
@@ -210,7 +207,7 @@ function R(e) {
 				ad_id: _,
 				date: (/* @__PURE__ */ new Date()).toString()
 			}, ...g.filter((e) => {
-				if (console.log(k(/* @__PURE__ */ new Date(), new Date(e.date))), k(/* @__PURE__ */ new Date(), new Date(e.date)) > 5) {
+				if (console.log(y(/* @__PURE__ */ new Date(), new Date(e.date))), y(/* @__PURE__ */ new Date(), new Date(e.date)) > 5) {
 					console.log("adsViewed - Remove Old Ad View Object");
 					return;
 				} else return console.log("adsViewed - Keep Ad View Object"), e;
@@ -236,20 +233,20 @@ function R(e) {
 		ref: J,
 		className: (0, P.default)("ad-wrap", { "active-member": s?.articles_membership?.status == "Active" }),
 		style: {
-			"--articles-ad-background-color": w.background_color || S?.background_color,
-			"--articles-ad-font-color": w.font_color || S?.font_color,
-			"--articles-ad-border-color": w.border_color || S?.border_color
+			"--articles-ad-background-color": T.background_color || C?.background_color,
+			"--articles-ad-font-color": T.font_color || C?.font_color,
+			"--articles-ad-border-color": T.border_color || C?.border_color
 		},
 		children: [
 			V && /* @__PURE__ */ m(F, {
 				setModalShow: H,
-				ad: S,
-				previewData: w
+				ad: C,
+				previewData: T
 			}),
 			U && /* @__PURE__ */ m(I, {
 				setModalShow: W,
-				ad: S,
-				previewData: w
+				ad: C,
+				previewData: T
 			}),
 			u && /* @__PURE__ */ m("div", {
 				className: "prepend-container",
@@ -264,7 +261,7 @@ function R(e) {
 							className: "ad-warning flex-header",
 							children: /* @__PURE__ */ h("div", {
 								className: "",
-								children: [S?.city && "Local", " Advertisement"]
+								children: [C?.city && "Local", " Advertisement"]
 							})
 						}),
 						/* @__PURE__ */ h("div", {
@@ -274,8 +271,8 @@ function R(e) {
 								children: [
 									/* @__PURE__ */ m("div", {
 										className: "logo",
-										children: (w.logo?.location || S?.logo?.location) && /* @__PURE__ */ m("img", {
-											src: w?.logo?.key ? `${process.env.NEXT_PUBLIC_CDN}${w?.logo?.key}` : `${process.env.NEXT_PUBLIC_CDN}${S?.logo?.key}`,
+										children: (T.logo?.location || C?.logo?.location) && /* @__PURE__ */ m("img", {
+											src: T?.logo?.key ? `${process.env.NEXT_PUBLIC_CDN}${T?.logo?.key}` : `${process.env.NEXT_PUBLIC_CDN}${C?.logo?.key}`,
 											alt: ""
 										})
 									}),
@@ -285,7 +282,7 @@ function R(e) {
 									}),
 									/* @__PURE__ */ m("img", {
 										className: "photo",
-										src: w?.background?.key ? `${process.env.NEXT_PUBLIC_CDN}${w.background?.key}` : `${process.env.NEXT_PUBLIC_CDN}${S?.background?.key}`,
+										src: T?.background?.key ? `${process.env.NEXT_PUBLIC_CDN}${T.background?.key}` : `${process.env.NEXT_PUBLIC_CDN}${C?.background?.key}`,
 										alt: ""
 									})
 								]
@@ -298,7 +295,7 @@ function R(e) {
 											className: "detail",
 											children: /* @__PURE__ */ m("span", {
 												className: "h4",
-												children: w?.business || S?.business
+												children: T?.business || C?.business
 											})
 										}), /* @__PURE__ */ h("div", {
 											className: "flex flex-column d-none",
@@ -308,9 +305,9 @@ function R(e) {
 													className: "icon",
 													children: /* @__PURE__ */ m("i", { className: "fas fa-search-location" })
 												}), /* @__PURE__ */ h("span", { children: [
-													S?.city,
+													C?.city,
 													", ",
-													S?.state
+													C?.state
 												] })]
 											}), /* @__PURE__ */ h("div", {
 												className: "detail",
@@ -321,15 +318,15 @@ function R(e) {
 											})]
 										})]
 									}),
-									S?.city && /* @__PURE__ */ m("div", { className: "details mb-3 d-none" }),
+									C?.city && /* @__PURE__ */ m("div", { className: "details mb-3 d-none" }),
 									/* @__PURE__ */ m("div", {
 										className: "short-description",
-										children: w?.description || S?.description
+										children: T?.description || C?.description
 									})
 								]
 							})]
 						}),
-						(!1)?.roles?.isDev && S?.populated_promos?.length > 0 && /* @__PURE__ */ h("div", { children: [A && /* @__PURE__ */ m("div", {
+						(!1)?.roles?.isDev && C?.populated_promos?.length > 0 && /* @__PURE__ */ h("div", { children: [A && /* @__PURE__ */ m("div", {
 							className: "promos-wrap",
 							children: A && /* @__PURE__ */ h("div", {
 								className: "promo-wrap d-flex justify-content-between align-items-center mx-2 p-1 px-2 border border-2 border-light mb-0",
@@ -355,7 +352,7 @@ function R(e) {
 							className: "d-flex justify-content-between",
 							children: [/* @__PURE__ */ h("div", {
 								className: "px-2",
-								children: [S?.populated_promos?.length, " Promos Active"]
+								children: [C?.populated_promos?.length, " Promos Active"]
 							}), /* @__PURE__ */ h("div", {
 								className: "controls",
 								children: [
@@ -363,15 +360,15 @@ function R(e) {
 										className: "fad fa-arrow-circle-left",
 										type: "button",
 										onClick: () => {
-											R(M == 0 ? S?.populated_promos?.length - 1 : (e) => e - 1);
+											R(M == 0 ? C?.populated_promos?.length - 1 : (e) => e - 1);
 										}
 									}),
-									S?.populated_promos?.map((e, t) => /* @__PURE__ */ m("i", { className: `fa-square ${t == M ? "fad" : "fas"}` }, e._id)),
+									C?.populated_promos?.map((e, t) => /* @__PURE__ */ m("i", { className: `fa-square ${t == M ? "fad" : "fas"}` }, e._id)),
 									/* @__PURE__ */ m("i", {
 										className: "fad fa-arrow-circle-right",
 										type: "button",
 										onClick: () => {
-											M == S?.populated_promos?.length - 1 ? R(0) : R((e) => e + 1);
+											M == C?.populated_promos?.length - 1 ? R(0) : R((e) => e + 1);
 										}
 									})
 								]
@@ -394,7 +391,7 @@ function R(e) {
 								/* @__PURE__ */ m("span", { className: "px-4" }),
 								/* @__PURE__ */ m("a", {
 									className: "action flex-grow-1 flex-shrink-0",
-									href: S?.website,
+									href: C?.website,
 									target: "_blank",
 									rel: "noreferrer",
 									onClick: (e) => {
@@ -488,9 +485,9 @@ function R(e) {
 			!t && /* @__PURE__ */ m("div", {
 				className: "advertise-with-us p-1",
 				style: {
-					backgroundColor: w.background_color || S?.background_color,
-					color: w.font_color || S?.font_color,
-					borderColor: w.border_color || S?.border_color
+					backgroundColor: T.background_color || C?.background_color,
+					color: T.font_color || C?.font_color,
+					borderColor: T.border_color || C?.border_color
 				},
 				children: /* @__PURE__ */ h(r, {
 					className: "small d-block w-100 text-center",

package/dist/Ad.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Ad-DW52TMZ4.js";
+import { t as e } from "./Ad-CFuDgQYL.js";
 export { e as default };

package/dist/{AdConfirmExitModal-BiIXNJwG.js → AdConfirmExitModal-skW9lp88.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.js";
 import { t } from "./Link-8nSDV4sI.js";
 import { useEffect as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/{AdDetailsModal-FPwnBWKy.js → AdDetailsModal-CdTR2Y9l.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.js";
 import { t } from "./Link-8nSDV4sI.js";
 import { useEffect as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/{Button-C8R7Qxqb.js → Button-sSB4xpOw.js}

@@ -3,12 +3,13 @@ import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/UI/Button.jsx
 var i = /* @__PURE__ */ e(t(), 1), a = n((e, t) => {
-	let { size: n, variant: a, style: o, small: s, large: c, onClick: l, className: u, disabled: d, active: f, type: p, onMouseDown: m, onMouseUp: h, onMouseLeave: g, onTouchStart: _, onTouchEnd: v, ...y } = e;
+	let { size: n, variant: a, style: o, small: s, large: c, onClick: l, className: u, disabled: d, active: f, type: p, onMouseDown: m, onMouseUp: h, onMouseLeave: g, onTouchStart: _, onTouchEnd: v, title: y, ...b } = e;
 	return /* @__PURE__ */ r("button", {
 		ref: t,
 		...p && { type: "submit" },
 		disabled: d,
 		style: o,
+		title: y,
 		onMouseDown: m,
 		onMouseUp: h,
 		onMouseLeave: g,

package/dist/CreditsModal.js

@@ -1,4 +1,4 @@
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Modal as i } from "react-bootstrap";

package/dist/FriendsList.js

@@ -1,4 +1,4 @@
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.js";
 import t from "./useUserFriends.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Modal as i } from "react-bootstrap";

package/dist/{GameScoreboard-pTQKozrD.js → GameScoreboard-9GYlLx72.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./Button-C8R7Qxqb.js";
-import { t } from "./ViewUserModal-CrGeXxWG.js";
+import { t as e } from "./Button-sSB4xpOw.js";
+import { t } from "./ViewUserModal-C5gjfuJ5.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-pTQKozrD.js";
+import { t as e } from "./GameScoreboard-9GYlLx72.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-CM9gjtT8.js"));
+var d = /* @__PURE__ */ e(t(), 1), f = a(() => import("./StatusModal-PG3i9NKf.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/ReturnToLauncherButton.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.js";
 import { useEffect as t, useState as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/Games/ReturnToLauncherButton.jsx

package/dist/SessionButton.js

@@ -0,0 +1,46 @@
+import { t as e } from "./Button-sSB4xpOw.js";
+import t from "./SignInButton.js";
+import n from "./useUserDetails.js";
+import r from "./useUserToken.js";
+import { t as i } from "./ViewUserModal-C5gjfuJ5.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/User/SessionButton.jsx
+function c({ port: c }) {
+	let { data: l, error: u, isLoading: d, mutate: f } = r(c), { data: p, error: m, isLoading: h, mutate: g } = n({ token: l });
+	return /* @__PURE__ */ o(a, { children: p ? /* @__PURE__ */ s("div", {
+		className: "w-100 d-flex align-items-stretch mb-2",
+		children: [/* @__PURE__ */ o(i, {
+			buttonType: "Link",
+			className: "w-100",
+			children: /* @__PURE__ */ s(e, {
+				className: "w-100",
+				small: !0,
+				onClick: () => {
+					console.log("userDetails", p);
+				},
+				children: [
+					/* @__PURE__ */ o("i", { className: "fad fa-sign-out" }),
+					"Logged in as ",
+					p?.display_name || "Unknown User"
+				]
+			})
+		}), /* @__PURE__ */ o(e, {
+			className: "",
+			small: !0,
+			title: "Sign out",
+			onClick: () => {
+				fetch("/api/signout", {
+					method: "GET",
+					headers: {}
+				}).then((e) => e.json()).then((e) => {
+					console.log("Logout successful:", e), f(null), g(null);
+				}).catch((e) => {
+					console.error("Logout error:", e);
+				});
+			},
+			children: /* @__PURE__ */ o("i", { className: "fad fa-sign-out" })
+		})]
+	}) : /* @__PURE__ */ o(t, { className: "mb-2" }) });
+}
+//#endregion
+export { c as default };

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

@@ -1,18 +1,18 @@
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.js";
 import { useState as t } from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Form as a, Modal as o } from "react-bootstrap";
 //#region src/components/Games/Settings/GraphicsTab.jsx
-function s({ useStore: t }) {
-	let a = t((e) => e?.darkMode), o = t((e) => e?.setDarkMode), s = t((e) => e?.graphicsQuality), c = t((e) => e?.setGraphicsQuality), l = t((e) => e?.landingAnimation), u = t((e) => e?.setLandingAnimation);
+function s({ useStore: t, config: a }) {
+	let o = t((e) => e?.darkMode), s = t((e) => e?.setDarkMode), c = t((e) => e?.graphicsQuality), l = t((e) => e?.setGraphicsQuality), u = t((e) => e?.landingAnimation), d = t((e) => e?.setLandingAnimation);
 	return /* @__PURE__ */ i(n, { children: [
 		/* @__PURE__ */ r("div", { children: "Dark Mode" }),
 		/* @__PURE__ */ r("div", {
 			className: "mb-3",
 			children: [!1, !0].map((t, n) => /* @__PURE__ */ r(e, {
-				active: a === t,
+				active: o === t,
 				onClick: () => {
-					o(t);
+					s(t);
 				},
 				children: t ? "On" : "Off"
 			}, n))
@@ -25,9 +25,9 @@ function s({ useStore: t }) {
 				"Medium",
 				"High"
 			].map((t) => /* @__PURE__ */ r(e, {
-				active: s === t,
+				active: c === t,
 				onClick: () => {
-					c(t);
+					l(t);
 				},
 				children: t
 			}, t))
@@ -36,19 +36,20 @@ function s({ useStore: t }) {
 		/* @__PURE__ */ i("div", {
 			className: "mb-3",
 			children: [/* @__PURE__ */ r(e, {
-				active: l === !1,
+				active: u === !1,
 				onClick: () => {
-					u(!1);
+					d(!1);
 				},
 				children: "Disabled"
 			}), /* @__PURE__ */ r(e, {
-				active: l === !0,
+				active: u === !0,
 				onClick: () => {
-					u(!0);
+					d(!0);
 				},
 				children: "Enabled"
 			})]
-		})
+		}),
+		a?.tabs?.Graphics?.children
 	] });
 }
 //#endregion
@@ -95,55 +96,58 @@ function c({ useAudioStore: t, config: o }) {
 }
 //#endregion
 //#region src/components/Games/Settings/MultiplayerTab.jsx
-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", {
+function l({ useStore: e, config: t }) {
+	return /* @__PURE__ */ r("div", {
 		className: "",
-		children: [
-			/* @__PURE__ */ i(a.Label, {
-				className: "mb-0",
-				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: 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__ */ r("div", {
-				className: "mt-3",
-				children: c ? /* @__PURE__ */ r(e, {
-					className: "",
-					onClick: () => {
-						u();
-					},
-					children: "Disconnect"
-				}) : /* @__PURE__ */ r(e, {
-					className: "",
-					onClick: () => {
-						l();
-					},
-					children: "Connect"
-				})
-			})
-		]
+		children: e && /* @__PURE__ */ r(u, { useStore: e })
 	});
 }
+function u({ useStore: t }) {
+	let n = t((e) => e.serverUrl), o = t((e) => e.setServerUrl), s = t((e) => e.connected), c = t((e) => e.connectSocket), l = t((e) => e.disconnectSocket);
+	return /* @__PURE__ */ i("div", { children: [
+		/* @__PURE__ */ i(a.Label, {
+			className: "mb-0",
+			children: [/* @__PURE__ */ i("div", { children: ["Status: ", /* @__PURE__ */ r("span", {
+				className: `badge ${s ? "bg-success" : "bg-danger"}`,
+				children: s ? "Online" : "Offline"
+			})] }), "Socket Server Host"]
+		}),
+		/* @__PURE__ */ r(a.Control, {
+			type: "text",
+			value: n,
+			onChange: (e) => o(e.target.value)
+		}),
+		/* @__PURE__ */ r(a.Label, {
+			className: "mb-0",
+			children: "Edit this to connect to a different multiplayer host!"
+		}),
+		/* @__PURE__ */ r("div", {
+			className: "mt-3",
+			children: s ? /* @__PURE__ */ r(e, {
+				className: "",
+				onClick: () => {
+					l();
+				},
+				children: "Disconnect"
+			}) : /* @__PURE__ */ r(e, {
+				className: "",
+				onClick: () => {
+					c();
+				},
+				children: "Connect"
+			})
+		})
+	] });
+}
 //#endregion
 //#region src/components/Games/Settings/ControlsTab.jsx
-function u({ useTouchControlsStore: e }) {
+function d({ useTouchControlsStore: e }) {
 	return /* @__PURE__ */ r("div", {
 		className: "",
-		children: e && /* @__PURE__ */ r(d, { useTouchControlsStore: e })
+		children: e && /* @__PURE__ */ r(f, { useTouchControlsStore: e })
 	});
 }
-function d({ useTouchControlsStore: t }) {
+function f({ useTouchControlsStore: t }) {
 	let n = t((e) => e?.enabled), a = t((e) => e?.setEnabled);
 	return /* @__PURE__ */ i("div", {
 		className: "mb-3",
@@ -168,7 +172,7 @@ function d({ useTouchControlsStore: t }) {
 }
 //#endregion
 //#region src/components/Games/Settings/OtherTab.jsx
-function f({ useStore: t, config: a, children: o }) {
+function p({ 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" }),
@@ -210,11 +214,11 @@ function f({ useStore: t, config: a, children: o }) {
 }
 //#endregion
 //#region src/components/Games/Settings/SettingsModal.jsx
-function p({ show: n, setShow: a, store: d, useAudioStore: p, useTouchControlsStore: m, useSocketStore: h, config: g }) {
+function m({ show: n, setShow: a, store: u, useAudioStore: f, 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, {
+	return u((e) => e.darkMode), u((e) => e.setDarkMode), u((e) => e.arcadeMode), u((e) => e.setArcadeMode), /* @__PURE__ */ i(o, {
 		className: "articles-modal",
 		size: "md",
 		show: n,
@@ -252,25 +256,25 @@ function p({ show: n, setShow: a, store: d, useAudioStore: p, useTouchControlsSt
 					/* @__PURE__ */ i("div", {
 						className: "p-3",
 						children: [
-							y == "Controls" && /* @__PURE__ */ r(u, {
-								useStore: d,
+							y == "Controls" && /* @__PURE__ */ r(d, {
+								useStore: u,
 								useTouchControlsStore: m,
 								config: g
 							}),
 							y == "Graphics" && /* @__PURE__ */ r(s, {
-								useStore: d,
+								useStore: u,
 								config: g
 							}),
 							y == "Audio" && /* @__PURE__ */ r(c, {
-								useAudioStore: p,
+								useAudioStore: f,
 								config: g
 							}),
 							y == "Multiplayer" && /* @__PURE__ */ r(l, {
 								useStore: h,
 								config: g
 							}),
-							y == "Other" && /* @__PURE__ */ r(f, {
-								useStore: d,
+							y == "Other" && /* @__PURE__ */ r(p, {
+								useStore: u,
 								config: g
 							})
 						]
@@ -295,4 +299,4 @@ function p({ show: n, setShow: a, store: d, useAudioStore: p, useTouchControlsSt
 	});
 }
 //#endregion
-export { p as t };
+export { m as t };

package/dist/SettingsModal.js

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

package/dist/SignInButton.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.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

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

@@ -1,4 +1,4 @@
-import { t as e } from "./Button-C8R7Qxqb.js";
+import { t as e } from "./Button-sSB4xpOw.js";
 import { n as t, t as n } from "./useAuthSiteStatus-Cj9IjMj7.js";
 import { useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";

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

@@ -1,7 +1,7 @@
 import { n as e, t } from "./classnames-DCsil9eG.js";
-import { t as n } from "./Button-C8R7Qxqb.js";
+import { t as n } from "./Button-sSB4xpOw.js";
 import { t as r } from "./Link-8nSDV4sI.js";
-import { a as i, i as a, n as o, o as s, r as c, t as l } from "./numberWithCommas-DXxghuXP.js";
+import { a as i, i as a, n as o, o as s, r as c, t as l } from "./numberWithCommas-DSRplpBy.js";
 import { useEffect as u, useMemo as ee, useState as d } from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import h from "swr";

package/dist/ViewUserModal.js

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

package/dist/index.js

@@ -1,19 +1,22 @@
 import e from "./ReturnToLauncherButton.js";
 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 };
+import n from "./useUserDetails.js";
+import r from "./useUserToken.js";
+import { t as i } from "./ViewUserModal-C5gjfuJ5.js";
+import { t as a } from "./Ad-CFuDgQYL.js";
+import o from "./SessionButton.js";
+import s from "./ArticlesAd.js";
+import { t as c } from "./GameScoreboard-9GYlLx72.js";
+import l from "./GlobalHead.js";
+import u from "./GlobalBody.js";
+import { t as d } from "./SettingsModal-gPPyBi4S.js";
+import f from "./CreditsModal.js";
+import p from "./DarkModeHandler.js";
+import m from "./ToontownModeHandler.js";
+import h from "./SocketServerUrlHandler.js";
+import g from "./useUserFriends.js";
+import _ from "./FriendsList.js";
+import v from "./useFullscreen.js";
+import y from "./typicalZustandStoreExcludes.js";
+import b from "./typicalZustandStoreStateSlice.js";
+export { a as Ad, s as ArticlesAd, f as CreditsModal, p as DarkModeHandler, _ as FriendsList, c as GameScoreboard, u as GlobalBody, l as GlobalHead, e as ReturnToLauncherButton, o as SessionButton, d as SettingsModal, t as SignInButton, h as SocketServerUrlHandler, m as ToontownModeHandler, i as ViewUserModal, y as typicalZustandStoreExcludes, b as typicalZustandStoreStateSlice, v as useFullscreen, n as useUserDetails, g as useUserFriends, r as useUserToken };

package/dist/typicalZustandStoreExcludes.js

@@ -0,0 +1,13 @@
+//#region src/constants/typicalZustandStoreExcludes.js
+var e = [
+	"_hasHydrated",
+	"showSettingsModal",
+	"showInfoModal",
+	"showCreditsModal",
+	"showGameOverModal",
+	"showMenu",
+	"lobbyDetails",
+	"sceneKey"
+];
+//#endregion
+export { e as default };

package/dist/typicalZustandStoreStateSlice.js

@@ -0,0 +1,72 @@
+//#region src/constants/typicalZustandStoreStateSlice.js
+var e = (e, t, n) => ({
+	_hasHydrated: !1,
+	setHasHydrated: (t) => {
+		e({ _hasHydrated: t });
+	},
+	darkMode: null,
+	toggleDarkMode: () => e({ darkMode: !t().darkMode }),
+	setDarkMode: (t) => {
+		e((e) => ({ darkMode: t }));
+	},
+	nickname: n(),
+	setNickname: (t) => {
+		e((e) => ({ nickname: t }));
+	},
+	randomNickname: () => {
+		let t = n();
+		e((e) => ({ nickname: t }));
+	},
+	nicknameKeyboard: !1,
+	setNicknameKeyboard: (t) => {
+		e((e) => ({ nicknameKeyboard: t }));
+	},
+	debug: !1,
+	setDebug: (t) => {
+		e((e) => ({ debug: t }));
+	},
+	sidebar: !0,
+	toggleSidebar: () => {
+		e((e) => ({ sidebar: !e.sidebar }));
+	},
+	setSidebar: (t) => {
+		e((e) => ({ sidebar: t }));
+	},
+	showMenu: !1,
+	setShowMenu: (t) => e({ showMenu: t }),
+	showSettingsModal: !1,
+	setShowSettingsModal: (t) => {
+		e((e) => ({ showSettingsModal: t }));
+	},
+	showInfoModal: !1,
+	setShowInfoModal: (t) => {
+		e((e) => ({ showInfoModal: t }));
+	},
+	showCreditsModal: !1,
+	setShowCreditsModal: (t) => {
+		e((e) => ({ showCreditsModal: t }));
+	},
+	graphicsQuality: "High",
+	setGraphicsQuality: (t) => e({ graphicsQuality: t }),
+	lobbyDetails: {
+		players: [],
+		games: []
+	},
+	setLobbyDetails: (t) => e({ lobbyDetails: t }),
+	landingAnimation: !0,
+	setLandingAnimation: (t) => e({ landingAnimation: t }),
+	toggleLandingAnimation: () => e({ landingAnimation: !t().landingAnimation }),
+	toontownMode: !1,
+	toggleToontownMode: () => {
+		e((e) => ({ toontownMode: !e.toontownMode }));
+	},
+	setToontownMode: (t) => {
+		e((e) => ({ toontownMode: t }));
+	},
+	showGameOverModal: !1,
+	setShowGameOverModal: (t) => {
+		e((e) => ({ showGameOverModal: t }));
+	}
+});
+//#endregion
+export { e 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.28",
+  "version": "1.0.30",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"
@@ -22,6 +22,7 @@
     "./GameScoreboard": "./dist/GameScoreboard.js",
     "./ReturnToLauncherButton": "./dist/ReturnToLauncherButton.js",
     "./SignInButton": "./dist/SignInButton.js",
+    "./SessionButton": "./dist/SessionButton.js",
     "./GlobalHead": "./dist/GlobalHead.js",
     "./GlobalBody": "./dist/GlobalBody.js",
     "./ViewUserModal": "./dist/ViewUserModal.js",
@@ -35,6 +36,8 @@
     "./useUserToken": "./dist/useUserToken.js",
     "./useUserFriends": "./dist/useUserFriends.js",
     "./useFullscreen": "./dist/useFullscreen.js",
+    "./typicalZustandStoreExcludes": "./dist/typicalZustandStoreExcludes.js",
+    "./typicalZustandStoreStateSlice": "./dist/typicalZustandStoreStateSlice.js",
     "./dist/style.css": "./dist/articles-dev-box.css",
     "./dist/articles-dev-box.css": "./dist/articles-dev-box.css"
   },
@@ -65,4 +68,4 @@
     "vite": "^8.0.3"
   },
   "dependencies": {}
-}
+}