@articles-media/articles-dev-box 1.1.1 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +33 -61
  2. package/dist/FriendsList.js +7 -5
  3. package/dist/GameMenuPrimaryButtonGroup.js +9 -9
  4. package/dist/GlobalBody.js +2 -2
  5. package/dist/GlobalHead.js +2 -2
  6. package/dist/{SessionButton-D3cupnzD.js → SessionButton-DsXEzmff.js} +22 -9
  7. package/dist/SessionButton.js +1 -1
  8. package/dist/{SettingsModal-BKcxlAg_.js → SettingsModal-VLREmj2k.js} +37 -28
  9. package/dist/SettingsModal.js +1 -1
  10. package/dist/SignInButton.js +2 -2
  11. package/dist/Textfit-XtAzfT0P.js +52 -0
  12. package/dist/index.js +2 -2
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -35,71 +35,43 @@ npm run dev
35
35
 
36
36
  ## Package Exports
37
37
 
38
- - ReturnToLauncherButton
39
- - For bringing users back to their state in the games showcase/launcher
40
- - SignInButton
41
- - For bringing users to the accounts service to login at and redirecting back
42
- - SessionButton
43
- - Button that manages sign in, sign out, and account details.
44
- - GameScoreboard
45
- - Scoreboard for registered games that links with a user's Articles Media account.
46
- - Ad
47
- - Articles Ad component that connects with user data.
48
- - GameMenu
49
- - All in one component that handles the sidebar and menu-bar inside a game page.
50
- - GameMenuPrimaryButtonGroup
51
- - The common button groups for landing page and menu content across our games
52
- - NicknameInput
53
- - Handles nickname UI on landing page
54
- - GlobalHead
55
- - Not used at this time, allows for just <head> related tags to be added to site without other logic.
56
- - GlobalBody
57
- - Easy way to add future logic and components to all projects with ease. For now handling the font awesome script. Also shows connection status to required servers in development. Will ping the main and auth server as they are needed for some dev-box features.
58
- - ViewUserModal
59
- - View user profile data and recent activity.
60
- - SettingsModal
61
- - All in one component to handle game settings UI across multiple games.
62
- - CreditsModal
63
- - All in one component to handle game credits UI across multiple games.
64
- - DarkModeHandler
65
- - Consumes a Zustand store, detects prefers-color-scheme, sets data-bs-theme on body element.
66
- - ToontownModeHandler
67
- - Handles setting zustand state from url params if toontownMode is passed.
68
- - SocketServerUrlHandler
69
- - Handles setting socket server state from url params if socketServerUrl is passed.
70
- - HasNoMouseHandler
71
- - Sets hasNoMouse and isTouchCapable on first load
72
- - useUserToken
73
- - Hook for getting the subdomain auth token.
74
- - useUserDetails
75
- - Hook for getting the details of the current user if a valid user token is found.
76
- - useFullscreen
77
- - Hook for going fullscreen on the body or provided element
78
- - typicalZustandStoreExcludes
79
- - Array of strings that every game published by Articles Media would want to normally exclude from persisting in base game store.
80
- - typicalZustandStoreStateSlice
81
- - Slice of zustand states that every game normally uses
82
- - getSignOutRedirectUrl
83
- - Handles signout redirect api logic
38
+ | Name | Description | Usage Example |
39
+ | :--- | :--- | :--- |
40
+ | ReturnToLauncherButton | For bringing users back to their state in the games showcase/launcher | |
41
+ | SignInButton | For bringing users to the accounts service to login at and redirecting back | |
42
+ | SessionButton | Button that manages sign in, sign out, and account details. | Catching Game and School Run |
43
+ | GameScoreboard | Scoreboard for registered games that links with a user's Articles Media account. | |
44
+ | Ad | Articles Ad component that connects with user data. | |
45
+ | GameMenu | All in one component that handles the sidebar and menu-bar inside a game page. | Catching Game and School Run use Static Panel for sidebarStyle and Corner Button for menuBarStyle. Ice Slide uses Floating Panel for sidebarStyle and Bar for menuBarStyle. |
46
+ | GameMenuPrimaryButtonGroup | The common button groups for landing page and menu content across our games | Catching Game and Move Match |
47
+ | NicknameInput | Handles nickname UI on landing page | Catching Game |
48
+ | GlobalHead | Not used at this time, allows for head element related tags to be added to site without other logic. | |
49
+ | GlobalBody | Easy way to add future logic and components to all projects with ease. For now handling the font awesome script. Also shows connection status to required servers in development. Will ping the main and auth server as they are needed for some dev-box features. | |
50
+ | ViewUserModal | View user profile data and recent activity. | |
51
+ | SettingsModal | All in one component to handle game settings UI across multiple games. | |
52
+ | CreditsModal | All in one component to handle game credits UI across multiple games. | |
53
+ | InfoModal | All in one component to handle game info modal across multiple games. | USA Tycoon |
54
+ | DarkModeHandler | Consumes a Zustand store, detects prefers-color-scheme, sets data-bs-theme on body element. | |
55
+ | ToontownModeHandler | Handles setting zustand state from url params if toontownMode is passed. | |
56
+ | SocketServerUrlHandler | Handles setting socket server state from url params if socketServerUrl is passed. | |
57
+ | HasNoMouseHandler | Sets hasNoMouse and isTouchCapable on first load | |
58
+ | useUserToken | Hook for getting the subdomain auth token. | |
59
+ | useUserDetails | Hook for getting the details of the current user if a valid user token is found. | |
60
+ | useFullscreen | Hook for going fullscreen on the body or provided element | |
61
+ | typicalZustandStoreExcludes | Array of strings that every game published by Articles Media would want to normally exclude from persisting in base game store. | Catching Game and School Run |
62
+ | typicalZustandStoreStateSlice | Slice of zustand states that every game normally uses | Catching Game and School Run |
63
+ | getSignOutRedirectUrl | Handles signout redirect api logic | Catching Game |
64
+ | GlobalClientModals | Imports all global client modals like FriendsList, CreditsModal, SettingsModal, InfoModal, and so on | USA Tycoon |
65
+ | generateRandomNickname | Reusable way of doing random nicknames from package | USA Tycoon |
66
+ | defaultGameNextConfig | Not usable, for reference | None |
67
+ | defaultGameThemeConfig | Not usable, for reference | None |
68
+ | useModalNavigation | Handles navigating a modal with controller | None |
69
+ | gameLandingPageTemplate | All in one component that sets up the default landing page as much as possible | USA Tycoon |
70
+ | gamePageTemplate | All in one component that sets up the default game page as much as possible | USA Tycoon |
84
71
 
85
72
  # Usage Examples
86
73
  For newly developed components I sometimes find myself trying to remember what repos used it. Here is a short list of recent components developed and what project is using it. Doing this until AMPM can search by imports or enough projects adopted the component.
87
74
 
88
- - typicalZustandStoreExcludes - Catching Game and School Run
89
- - SessionButton - Catching Game and School Run
90
- - GameMenu - Catching Game and School Run use Static Panel for sidebarStyle and Corner Button for menuBarStyle. Ice Slide uses Floating Panel for sidebarStyle and Bar for menuBarStyle.
91
- - getSignOutRedirectUrl - Catching Game
92
- - GameMenuPrimaryButtonGroup - Catching Game and Move Match
93
- - NicknameInput - Catching Game
94
- - InfoModal - USA Tycoon
95
- - GlobalClientModals - USA Tycoon
96
- - generateRandomNickname - USA Tycoon
97
- - defaultGameNextConfig - USA Tycoon
98
- - defaultGameThemeConfig - USA Tycoon
99
- - useModalNavigation - USA Tycoon
100
- - gameLandingPageTemplate - USA Tycoon
101
- - gamePageTemplate - USA Tycoon
102
-
103
75
  # Roadmap
104
76
  ⏹️ Remove Bootstrap reliance?
105
77
  ⏹️ Figure out why this package does not work outside webpack, on Turbopack for example it fails. Bootstrap SASS related I think.
package/dist/FriendsList.js CHANGED
@@ -22,14 +22,14 @@ function FriendsList({ show, setShow, componentType, className, style = {}, id =
22
22
  friend?.populated_user?.username,
23
23
  " - ",
24
24
  friend?.populated_user?.display_name || "No Display Name"
25
- ] }, friend.user_id))
25
+ ] }, friend.friend_id))
26
26
  });
27
27
  }
28
28
  if (componentType.toLowerCase() == "modal") return /* @__PURE__ */ jsxs(Modal, {
29
29
  show,
30
30
  size: "md",
31
31
  className: `articles-modal ${className}`,
32
- modalBackdropClassName,
32
+ backdropClassName: modalBackdropClassName,
33
33
  centered: true,
34
34
  onHide: () => setShow(false),
35
35
  style,
@@ -56,11 +56,13 @@ function FriendsList({ show, setShow, componentType, className, style = {}, id =
56
56
  children: /* @__PURE__ */ jsx("i", { className: "fad fa-comment-check" })
57
57
  }), /* @__PURE__ */ jsx(ArticlesButton, {
58
58
  variant: "articles",
59
- onClick: () => {},
60
- children: /* @__PURE__ */ jsx("i", { className: "fad fa-info" })
59
+ onClick: () => {
60
+ console.log("View friend details for ", friend);
61
+ },
62
+ children: /* @__PURE__ */ jsx("i", { className: "fad fa-info me-0" })
61
63
  })] })
62
64
  ]
63
- }, friend.user_id)) })
65
+ }, friend.friend_id)) })
64
66
  ] }),
65
67
  /* @__PURE__ */ jsxs(Modal.Footer, {
66
68
  className: "justify-content-between",
package/dist/GameMenuPrimaryButtonGroup.js CHANGED
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
9
  * @param {string} [props.owner] Optional GitHub owner
10
10
  * @param {string} [props.repo] Optional GitHub repo
11
11
  */
12
- function PrimaryButtonGroup({ useStore, type, owner, repo }) {
12
+ function PrimaryButtonGroup({ useStore, type, owner, repo, LeaveGameOverride, SidebarOverride, SettingsOverride, InfoOverride, CreditsOverride, GithubOverride, FullscreenOverride }) {
13
13
  if (!useStore) return null;
14
14
  const { isFullscreen, requestFullscreen, exitFullscreen } = useFullscreen();
15
15
  const setShowSettingsModal = useStore((state) => state.setShowSettingsModal);
@@ -21,7 +21,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
21
21
  const setSidebar = useStore((state) => state.setSidebar);
22
22
  switch (type) {
23
23
  case "Landing": return /* @__PURE__ */ jsxs(Fragment, { children: [
24
- /* @__PURE__ */ jsxs("div", {
24
+ SettingsOverride ? SettingsOverride : /* @__PURE__ */ jsxs("div", {
25
25
  className: "w-50 d-flex",
26
26
  children: [/* @__PURE__ */ jsxs(ArticlesButton, {
27
27
  className: `w-100`,
@@ -39,7 +39,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
39
39
  children: darkMode ? /* @__PURE__ */ jsx("i", { className: "fad fa-sun" }) : /* @__PURE__ */ jsx("i", { className: "fad fa-moon" })
40
40
  })]
41
41
  }),
42
- /* @__PURE__ */ jsxs(ArticlesButton, {
42
+ InfoOverride ? InfoOverride : /* @__PURE__ */ jsxs(ArticlesButton, {
43
43
  className: `w-50`,
44
44
  small: true,
45
45
  onClick: () => {
@@ -47,7 +47,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
47
47
  },
48
48
  children: [/* @__PURE__ */ jsx("i", { className: "fad fa-info-square" }), "Info"]
49
49
  }),
50
- /* @__PURE__ */ jsx("a", {
50
+ GithubOverride ? GithubOverride : /* @__PURE__ */ jsx("a", {
51
51
  href: `https://github.com/${owner || process.env.NEXT_PUBLIC_OWNER}/${repo || process.env.NEXT_PUBLIC_REPO}`,
52
52
  target: "_blank",
53
53
  rel: "noopener noreferrer",
@@ -59,7 +59,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
59
59
  children: [/* @__PURE__ */ jsx("i", { className: "fab fa-github" }), "Github"]
60
60
  })
61
61
  }),
62
- /* @__PURE__ */ jsxs(ArticlesButton, {
62
+ CreditsOverride ? CreditsOverride : /* @__PURE__ */ jsxs(ArticlesButton, {
63
63
  className: `w-50`,
64
64
  small: true,
65
65
  onClick: () => {
@@ -69,7 +69,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
69
69
  })
70
70
  ] });
71
71
  case "GameMenu": return /* @__PURE__ */ jsxs(Fragment, { children: [
72
- /* @__PURE__ */ jsx("a", {
72
+ LeaveGameOverride ? LeaveGameOverride : /* @__PURE__ */ jsx("a", {
73
73
  href: "/",
74
74
  className: "w-50",
75
75
  children: /* @__PURE__ */ jsxs(ArticlesButton, {
@@ -78,7 +78,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
78
78
  children: [/* @__PURE__ */ jsx("i", { className: "fad fa-arrow-alt-square-left" }), /* @__PURE__ */ jsx("span", { children: "Leave Game" })]
79
79
  })
80
80
  }),
81
- /* @__PURE__ */ jsxs(ArticlesButton, {
81
+ FullscreenOverride ? FullscreenOverride : /* @__PURE__ */ jsxs(ArticlesButton, {
82
82
  small: true,
83
83
  className: "w-50",
84
84
  active: isFullscreen,
@@ -92,7 +92,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
92
92
  /* @__PURE__ */ jsx("span", { children: "Fullscreen" })
93
93
  ]
94
94
  }),
95
- /* @__PURE__ */ jsxs("div", {
95
+ SettingsOverride ? SettingsOverride : /* @__PURE__ */ jsxs("div", {
96
96
  className: "w-50 d-flex",
97
97
  children: [/* @__PURE__ */ jsxs(ArticlesButton, {
98
98
  className: `w-100`,
@@ -110,7 +110,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
110
110
  children: darkMode ? /* @__PURE__ */ jsx("i", { className: "fad fa-sun" }) : /* @__PURE__ */ jsx("i", { className: "fad fa-moon" })
111
111
  })]
112
112
  }),
113
- /* @__PURE__ */ jsxs(ArticlesButton, {
113
+ SidebarOverride ? SidebarOverride : /* @__PURE__ */ jsxs(ArticlesButton, {
114
114
  className: `w-50`,
115
115
  small: true,
116
116
  active: sidebar,
package/dist/GlobalBody.js CHANGED
@@ -6,11 +6,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
6
  //#region src/components/Global/GlobalBody.jsx
7
7
  var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
8
8
  var StatusModal = lazy(() => import("./StatusModal-DkHAimHp.js"));
9
- function GlobalBody(props) {
9
+ function GlobalBody({ fontawesome = true }) {
10
10
  const [statusModal, setStatusModal] = useState(false);
11
11
  const { data: mainSiteStatus, error: mainSiteStatusError, isLoading: mainSiteStatusLoading, mutate: mainSiteStatusMutate } = useMainSiteStatus({ disable: process.env.NODE_ENV !== "development" });
12
12
  const { data: authSiteStatus, error: authSiteStatusError, isLoading: authSiteStatusLoading, mutate: authSiteStatusMutate } = useAuthSiteStatus({ disable: process.env.NODE_ENV !== "development" });
13
- return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("link", {
13
+ return /* @__PURE__ */ jsxs(Fragment, { children: [fontawesome && /* @__PURE__ */ jsx("link", {
14
14
  rel: "stylesheet",
15
15
  href: `https://cdn.articles.media/fonts/fontawesome/css/all.min.css`
16
16
  }), process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(Fragment, { children: [
package/dist/GlobalHead.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Fragment, jsx } from "react/jsx-runtime";
2
2
  //#region src/components/Global/GlobalHead.jsx
3
- function GlobalHead() {
4
- return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("link", {
3
+ function GlobalHead({ fontawesome = false }) {
4
+ return /* @__PURE__ */ jsx(Fragment, { children: fontawesome && /* @__PURE__ */ jsx("link", {
5
5
  rel: "stylesheet",
6
6
  href: `https://cdn.articles.media/fonts/fontawesome/css/all.min.css`
7
7
  }) });
package/dist/{SessionButton-D3cupnzD.js → SessionButton-DsXEzmff.js} RENAMED
@@ -4,7 +4,7 @@ import useUserDetails from "./useUserDetails.js";
4
4
  import useUserToken from "./useUserToken.js";
5
5
  import { t as ViewUserModal } from "./ViewUserModal-Dgo1C4sR.js";
6
6
  import FriendsList from "./FriendsList.js";
7
- import { useState } from "react";
7
+ import { lazy, useState } from "react";
8
8
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
9
  import { Modal } from "react-bootstrap";
10
10
  //#region src/components/User/SignOutModal.jsx
@@ -40,28 +40,41 @@ function SignOutModal({ show, setShow, action }) {
40
40
  }
41
41
  //#endregion
42
42
  //#region src/components/User/SessionButton.jsx
43
- function SessionButton({ port, friendsButton }) {
43
+ var Textfit = lazy(() => import("./Textfit-XtAzfT0P.js").then((module) => ({ default: module.Textfit })));
44
+ function SessionButton({ port, friendsButton, enableTextfit = false, size = "sm" }) {
44
45
  const { data: userToken, error: userTokenError, isLoading: userTokenLoading, mutate: userTokenMutate } = useUserToken(port);
45
46
  const { data: userDetails, error: userDetailsError, isLoading: userDetailsLoading, mutate: userDetailsMutate } = useUserDetails({ token: userToken });
46
47
  const [showFriendsModal, setShowFriendsModal] = useState(false);
47
48
  const [confirmSignOut, setConfirmSignOut] = useState(false);
48
- return /* @__PURE__ */ jsx(Fragment, { children: !userDetails ? /* @__PURE__ */ jsx(SignInButton, { className: "mb-2" }) : /* @__PURE__ */ jsxs("div", {
49
- className: "w-100 d-flex align-items-stretch mb-2",
49
+ return /* @__PURE__ */ jsx(Fragment, { children: !userDetails ? /* @__PURE__ */ jsx(SignInButton, {
50
+ className: "mb-2",
51
+ size
52
+ }) : /* @__PURE__ */ jsxs("div", {
53
+ className: "SessionButton w-100 d-flex align-items-stretch mb-2",
50
54
  children: [
51
55
  /* @__PURE__ */ jsx(ViewUserModal, {
52
56
  buttonType: "Link",
53
57
  className: "w-100",
54
- children: /* @__PURE__ */ jsxs(ArticlesButton, {
55
- className: "w-100",
56
- small: true,
58
+ children: /* @__PURE__ */ jsx(ArticlesButton, {
59
+ className: "w-100 h-100",
60
+ size,
57
61
  onClick: () => {
58
62
  console.log("userDetails", userDetails);
59
63
  },
60
- children: [
64
+ children: enableTextfit ? /* @__PURE__ */ jsxs(Textfit, {
65
+ maxFontSize: 11,
66
+ minFontSize: 6,
67
+ justifyContent: "center",
68
+ children: [
69
+ /* @__PURE__ */ jsx("i", { className: "fad fa-sign-out" }),
70
+ "Logged in as ",
71
+ userDetails?.display_name || "Unknown User"
72
+ ]
73
+ }) : /* @__PURE__ */ jsxs(Fragment, { children: [
61
74
  /* @__PURE__ */ jsx("i", { className: "fad fa-sign-out" }),
62
75
  "Logged in as ",
63
76
  userDetails?.display_name || "Unknown User"
64
- ]
77
+ ] })
65
78
  })
66
79
  }),
67
80
  confirmSignOut && /* @__PURE__ */ jsx(SignOutModal, {
package/dist/SessionButton.js CHANGED
@@ -3,5 +3,5 @@ import "./SignInButton.js";
3
3
  import "./useUserDetails.js";
4
4
  import "./useUserToken.js";
5
5
  import "./FriendsList.js";
6
- import { t as SessionButton } from "./SessionButton-D3cupnzD.js";
6
+ import { t as SessionButton } from "./SessionButton-DsXEzmff.js";
7
7
  export { SessionButton as default };
package/dist/{SettingsModal-BKcxlAg_.js → SettingsModal-VLREmj2k.js} RENAMED
@@ -88,22 +88,25 @@ function AudioTab({ useAudioStore, config }) {
88
88
  }),
89
89
  /* @__PURE__ */ jsx("div", {
90
90
  className: "border mb-3 p-2",
91
- children: config?.tabs?.Audio?.sliders?.map((slider_obj) => {
92
- return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Form.Label, {
93
- className: "mb-0",
94
- children: [/* @__PURE__ */ jsx("span", { children: slider_obj.label }), audioSettings?.[slider_obj.key] && /* @__PURE__ */ jsxs("span", {
95
- className: "ms-2 text-muted",
96
- children: [audioSettings[slider_obj.key], "%"]
91
+ children: config?.tabs?.Audio?.sliders?.map((slider_obj, i) => {
92
+ return /* @__PURE__ */ jsxs("div", {
93
+ className: "mb-3",
94
+ children: [/* @__PURE__ */ jsxs(Form.Label, {
95
+ className: "mb-0",
96
+ children: [/* @__PURE__ */ jsx("span", { children: slider_obj.label }), audioSettings?.[slider_obj.key] && /* @__PURE__ */ jsxs("span", {
97
+ className: "ms-2 text-muted",
98
+ children: [audioSettings[slider_obj.key], "%"]
99
+ })]
100
+ }), /* @__PURE__ */ jsx(Form.Range, {
101
+ value: audioSettings?.[slider_obj.key],
102
+ onChange: (value) => {
103
+ setAudioSettings({
104
+ ...audioSettings,
105
+ [slider_obj.key]: value.target.value
106
+ });
107
+ }
97
108
  })]
98
- }), /* @__PURE__ */ jsx(Form.Range, {
99
- value: audioSettings?.[slider_obj.key],
100
- onChange: (value) => {
101
- setAudioSettings({
102
- ...audioSettings,
103
- [slider_obj.key]: value.target.value
104
- });
105
- }
106
- })] }, slider_obj.key);
109
+ }, slider_obj.key + "_" + i);
107
110
  })
108
111
  }),
109
112
  config?.tabs?.Audio?.children
@@ -166,7 +169,11 @@ function SocketSettings({ useStore }) {
166
169
  function ControlsTab({ useTouchControlsStore, config }) {
167
170
  return /* @__PURE__ */ jsxs("div", {
168
171
  className: "",
169
- children: [useTouchControlsStore && config?.tabs?.Controls?.touchControls && /* @__PURE__ */ jsx(TouchControls, { useTouchControlsStore }), config?.tabs?.Controls?.children]
172
+ children: [
173
+ config?.tabs?.Controls?.ControlsPanel && /* @__PURE__ */ jsx(Fragment, { children: config?.tabs?.Controls?.ControlsPanel }),
174
+ useTouchControlsStore && config?.tabs?.Controls?.touchControls && /* @__PURE__ */ jsx(TouchControls, { useTouchControlsStore }),
175
+ config?.tabs?.Controls?.children
176
+ ]
170
177
  });
171
178
  }
172
179
  function TouchControls({ useTouchControlsStore }) {
@@ -235,7 +242,7 @@ function OtherTab({ useStore, config }) {
235
242
  var package_default = {
236
243
  name: "@articles-media/articles-dev-box",
237
244
  description: "Shared code, functions, and components for different Articles Media projects.",
238
- version: "1.1.1",
245
+ version: "1.1.3",
239
246
  type: "module",
240
247
  sideEffects: false,
241
248
  imports: { "#root/src/*": "./src/*" },
@@ -321,16 +328,18 @@ function DebugTab({ useStore, config }) {
321
328
  className: "mb-3",
322
329
  children: ["dev-box version: ", package_default.version]
323
330
  }),
324
- /* @__PURE__ */ jsx("div", { children: "Show Debug Stats" }),
325
- /* @__PURE__ */ jsx("div", {
331
+ config?.tabs?.Debug?.showStats !== false && /* @__PURE__ */ jsxs("div", {
326
332
  className: "mb-3",
327
- children: [false, true].map((level, i) => /* @__PURE__ */ jsx(ArticlesButton, {
328
- active: showStats === level,
329
- onClick: () => {
330
- setDebugConfigKey("showStats", level);
331
- },
332
- children: level ? "Enabled" : "Disabled"
333
- }, i))
333
+ children: [/* @__PURE__ */ jsx("div", { children: "Show Debug Stats" }), /* @__PURE__ */ jsx("div", {
334
+ className: "",
335
+ children: [false, true].map((level, i) => /* @__PURE__ */ jsx(ArticlesButton, {
336
+ active: showStats === level,
337
+ onClick: () => {
338
+ setDebugConfigKey("showStats", level);
339
+ },
340
+ children: level ? "Enabled" : "Disabled"
341
+ }, i))
342
+ })]
334
343
  }),
335
344
  config?.tabs?.Debug?.children && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", {}), config?.tabs?.Debug?.children] })
336
345
  ] });
@@ -432,10 +441,10 @@ function ModalContent({ setShow, useStore, useAudioStore, useTouchControlsStore,
432
441
  setShow(false);
433
442
  },
434
443
  children: "Close"
435
- }), /* @__PURE__ */ jsx(ArticlesButton, {
444
+ }), config?.reset && /* @__PURE__ */ jsx(ArticlesButton, {
436
445
  variant: "outline-danger ms-3",
437
446
  onClick: () => {
438
- reset();
447
+ config.reset();
439
448
  },
440
449
  children: "Reset"
441
450
  })] })
package/dist/SettingsModal.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as SettingsModal } from "./SettingsModal-BKcxlAg_.js";
1
+ import { t as SettingsModal } from "./SettingsModal-VLREmj2k.js";
2
2
  export { SettingsModal as default };
package/dist/SignInButton.js CHANGED
@@ -3,7 +3,7 @@ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
3
3
  import { useEffect, useState } from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  //#region src/components/User/SignInButton.jsx
6
- function SignInButton({ className, id, text }) {
6
+ function SignInButton({ className, id, text, size = "sm" }) {
7
7
  const [isMounted, setIsMounted] = useState(false);
8
8
  const baseLink = process.env.NODE_ENV === "development" ? "http://localhost:3012" : "https://accounts.articles.media";
9
9
  const [finalLink, setFinalLink] = useState(`${baseLink}/login`);
@@ -19,7 +19,7 @@ function SignInButton({ className, id, text }) {
19
19
  children: /* @__PURE__ */ jsxs(ArticlesButton, {
20
20
  className: `${className} w-100`,
21
21
  id,
22
- small: true,
22
+ size,
23
23
  style: {
24
24
  zIndex: 10,
25
25
  position: "relative"
package/dist/Textfit-XtAzfT0P.js ADDED
@@ -0,0 +1,52 @@
1
+ import { useEffect, useRef, useState } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ //#region src/components/UI/Textfit.jsx
4
+ var Textfit = ({ children, maxFontSize = 18, minFontSize = 10, justifyContent = "left" }) => {
5
+ const containerRef = useRef(null);
6
+ const textRef = useRef(null);
7
+ const [fontSize, setFontSize] = useState(maxFontSize);
8
+ useEffect(() => {
9
+ const adjustFontSize = () => {
10
+ if (!containerRef.current || !textRef.current) return;
11
+ let currentFontSize = maxFontSize;
12
+ textRef.current.style.fontSize = `${currentFontSize}px`;
13
+ while (textRef.current.scrollWidth > containerRef.current.clientWidth && currentFontSize > minFontSize) {
14
+ currentFontSize -= 1;
15
+ textRef.current.style.fontSize = `${currentFontSize}px`;
16
+ }
17
+ setFontSize(currentFontSize);
18
+ };
19
+ const resizeObserver = new ResizeObserver(adjustFontSize);
20
+ if (containerRef.current) resizeObserver.observe(containerRef.current);
21
+ adjustFontSize();
22
+ window.addEventListener("resize", adjustFontSize);
23
+ return () => {
24
+ window.removeEventListener("resize", adjustFontSize);
25
+ resizeObserver.disconnect();
26
+ };
27
+ }, [
28
+ children,
29
+ maxFontSize,
30
+ minFontSize
31
+ ]);
32
+ return /* @__PURE__ */ jsx("div", {
33
+ ref: containerRef,
34
+ style: {
35
+ width: "100%",
36
+ display: "flex",
37
+ justifyContent,
38
+ overflow: "hidden"
39
+ },
40
+ children: /* @__PURE__ */ jsx("span", {
41
+ ref: textRef,
42
+ style: {
43
+ fontSize,
44
+ whiteSpace: "nowrap",
45
+ lineHeight: 1
46
+ },
47
+ children
48
+ })
49
+ });
50
+ };
51
+ //#endregion
52
+ export { Textfit };
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ import { t as ViewUserModal } from "./ViewUserModal-Dgo1C4sR.js";
6
6
  import { t as Ad_default } from "./Ad-bic8syS1.js";
7
7
  import useUserFriends from "./useUserFriends.js";
8
8
  import FriendsList from "./FriendsList.js";
9
- import { t as SessionButton } from "./SessionButton-D3cupnzD.js";
9
+ import { t as SessionButton } from "./SessionButton-DsXEzmff.js";
10
10
  import ArticlesAd from "./ArticlesAd.js";
11
11
  import { t as GameMenu } from "./GameMenu-DeFdYvvR.js";
12
12
  import useFullscreen from "./useFullscreen.js";
@@ -16,7 +16,7 @@ import { t as GameScoreboard } from "./GameScoreboard-CYuTBE_E.js";
16
16
  import PageTemplateLandingPage from "./PageTemplateLandingPage.js";
17
17
  import GlobalHead from "./GlobalHead.js";
18
18
  import GlobalBody_default from "./GlobalBody.js";
19
- import { t as SettingsModal } from "./SettingsModal-BKcxlAg_.js";
19
+ import { t as SettingsModal } from "./SettingsModal-VLREmj2k.js";
20
20
  import CreditsModal from "./CreditsModal.js";
21
21
  import InfoModal from "./InfoModal.js";
22
22
  import DarkModeHandler from "./DarkModeHandler.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@articles-media/articles-dev-box",
3
3
  "description": "Shared code, functions, and components for different Articles Media projects.",
4
- "version": "1.1.1",
4
+ "version": "1.1.3",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "imports": {