@articles-media/articles-dev-box 1.3.3 → 1.3.5

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.
@@ -9,9 +9,10 @@ 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, LeaveGameOverride, SidebarOverride, SettingsOverride, InfoOverride, CreditsOverride, GithubOverride, FullscreenOverride }) {
12
+ function PrimaryButtonGroup({ useStore, type, owner, repo, LeaveGameOverride, SidebarOverride, SettingsOverride, InfoOverride, CreditsOverride, GithubOverride, FullscreenOverride, useRouter = null }) {
13
13
  if (!useStore) return null;
14
14
  const { isFullscreen, requestFullscreen, exitFullscreen } = useFullscreen();
15
+ const router = useRouter ? useRouter() : null;
15
16
  const setShowSettingsModal = useStore((state) => state.setShowSettingsModal);
16
17
  const toggleDarkMode = useStore((state) => state.toggleDarkMode);
17
18
  const darkMode = useStore((state) => state.darkMode);
@@ -19,6 +20,7 @@ function PrimaryButtonGroup({ useStore, type, owner, repo, LeaveGameOverride, Si
19
20
  const setShowCreditsModal = useStore((state) => state.setShowCreditsModal);
20
21
  const sidebar = useStore((state) => state.sidebar);
21
22
  const setSidebar = useStore((state) => state.setSidebar);
23
+ if (!router && type === "GameMenu") console.warn("GameMenuPrimaryButtonGroup: useRouter is needed for GameMenu type to avoid full reload navigation. Please provide a router instance from your framework (e.g. Next.js useRouter) as a prop.");
22
24
  switch (type) {
23
25
  case "Landing": return /* @__PURE__ */ jsxs(Fragment, { children: [
24
26
  SettingsOverride ? SettingsOverride : /* @__PURE__ */ jsxs("div", {
@@ -72,6 +74,13 @@ function PrimaryButtonGroup({ useStore, type, owner, repo, LeaveGameOverride, Si
72
74
  LeaveGameOverride ? LeaveGameOverride : /* @__PURE__ */ jsx("a", {
73
75
  href: "/",
74
76
  className: "w-50",
77
+ onClick: (e) => {
78
+ if (router) {
79
+ e.preventDefault();
80
+ router.push("/");
81
+ return;
82
+ }
83
+ },
75
84
  children: /* @__PURE__ */ jsxs(ArticlesButton, {
76
85
  className: "w-100",
77
86
  small: true,
@@ -11,7 +11,7 @@ var SessionButton = lazy(() => import("./SessionButton.js"));
11
11
  var ReturnToLauncherButton = lazy(() => import("./ReturnToLauncherButton.js"));
12
12
  var GameScoreboard = lazy(() => import("./GameScoreboard.js"));
13
13
  var Ad = lazy(() => import("./Ad.js"));
14
- function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Link, logoImage, backgroundImage, CardBodyOverride, singlePlayerConfig, multiplayerConfig, brandingTextClass, disableHero, heroOverride, disableAd, disableGameScoreboard, gameScoreboardConfig, maxInnerWidth = "20rem", AdditionalContent = null, PostCardContent = null, PostExtrasContent = null, PreHeroContent = null, PostHeroContent = null, NicknameInputConfig = null, CardOverride = null, LandingBackgroundAnimation = null }) {
14
+ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Link, logoImage, backgroundImage, CardBodyOverride, CardBodyAppendContent, CardBodyPrependContent, singlePlayerConfig, multiplayerConfig, brandingTextClass, disableHero, heroOverride, disableAd, disableGameScoreboard, gameScoreboardConfig, maxInnerWidth = "20rem", AdditionalContent = null, PostCardContent = null, PostExtrasContent = null, PreHeroContent = null, PostHeroContent = null, NicknameInputConfig = null, CardOverride = null, LandingBackgroundAnimation = null, useRouter = null }) {
15
15
  const { data: userToken, error: userTokenError, isLoading: userTokenLoading, mutate: userTokenMutate } = useUserToken(process.env.NEXT_PUBLIC_GAME_PORT);
16
16
  const { data: userDetails, error: userDetailsError, isLoading: userDetailsLoading, mutate: userDetailsMutate } = useUserDetails({ token: userToken });
17
17
  const darkMode = useStore((state) => state.darkMode);
@@ -71,87 +71,85 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
71
71
  }),
72
72
  CardBodyOverride ? CardBodyOverride : /* @__PURE__ */ jsxs("div", {
73
73
  className: "card-body",
74
- children: [singlePlayerConfig && /* @__PURE__ */ jsx(Link, {
75
- href: "/play",
76
- style: { textDecoration: "none" },
77
- children: /* @__PURE__ */ jsxs(ArticlesButton, {
78
- variant: "",
79
- className: "d-flex justify-content-center align-items-center mb-3 w-100",
80
- onClick: () => {},
81
- children: [/* @__PURE__ */ jsx("i", { className: "fad fa-play me-2" }), "Single Player"]
82
- })
83
- }), multiplayerConfig && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
84
- className: "fw-bold mb-1 small text-center",
85
- children: [
86
- lobbyDetails?.players.length || 0,
87
- " player",
88
- lobbyDetails?.players.length !== 1 && "s",
89
- " in the lobby."
90
- ]
91
- }), /* @__PURE__ */ jsx("div", {
92
- className: "servers",
93
- children: Array.from({ length: multiplayerConfig?.defaultServers }).map((_, id) => {
94
- const serverNumber = id + 1;
95
- let lobbyLookup = lobbyDetails?.games?.find((lobby) => parseInt(lobby.server_id) == serverNumber);
96
- return /* @__PURE__ */ jsxs("div", {
97
- className: "server",
98
- children: [
99
- /* @__PURE__ */ jsxs("div", {
100
- className: "d-flex justify-content-between align-items-center w-100 mb-2",
101
- children: [/* @__PURE__ */ jsx("div", {
102
- className: "mb-0",
103
- style: { fontSize: "0.9rem" },
104
- children: /* @__PURE__ */ jsxs("b", { children: ["Server ", serverNumber] })
105
- }), /* @__PURE__ */ jsxs("div", {
106
- className: "mb-0",
107
- children: [lobbyLookup?.players?.length || 0, "/4"]
108
- })]
109
- }),
110
- /* @__PURE__ */ jsx("div", {
111
- className: "d-flex justify-content-around w-100 mb-1",
112
- children: [
113
- 1,
114
- 2,
115
- 3,
116
- 4
117
- ].map((player_count) => {
118
- let playerLookup = false;
119
- if (lobbyLookup?.players?.length >= player_count) playerLookup = true;
120
- return /* @__PURE__ */ jsx("div", {
121
- className: "icon",
122
- style: {
123
- width: "20px",
124
- height: "20px",
125
- ...playerLookup ? { backgroundColor: "black" } : { backgroundColor: "gray" },
126
- border: "1px solid black"
127
- }
128
- }, player_count);
74
+ children: [
75
+ CardBodyPrependContent && CardBodyPrependContent,
76
+ singlePlayerConfig && /* @__PURE__ */ jsx(Link, {
77
+ href: "/play",
78
+ style: { textDecoration: "none" },
79
+ children: /* @__PURE__ */ jsxs(ArticlesButton, {
80
+ variant: "",
81
+ className: "d-flex justify-content-center align-items-center mb-3 w-100",
82
+ onClick: () => {},
83
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-play me-2" }), "Single Player"]
84
+ })
85
+ }),
86
+ multiplayerConfig && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OnlinePlayers, { useStore }), /* @__PURE__ */ jsx("div", {
87
+ className: "servers",
88
+ children: Array.from({ length: multiplayerConfig?.defaultServers }).map((_, id) => {
89
+ const serverNumber = id + 1;
90
+ let lobbyLookup = lobbyDetails?.games?.find((lobby) => parseInt(lobby.server_id) == serverNumber);
91
+ return /* @__PURE__ */ jsxs("div", {
92
+ className: "server",
93
+ children: [
94
+ /* @__PURE__ */ jsxs("div", {
95
+ className: "d-flex justify-content-between align-items-center w-100 mb-2",
96
+ children: [/* @__PURE__ */ jsx("div", {
97
+ className: "mb-0",
98
+ style: { fontSize: "0.9rem" },
99
+ children: /* @__PURE__ */ jsxs("b", { children: ["Server ", serverNumber] })
100
+ }), /* @__PURE__ */ jsxs("div", {
101
+ className: "mb-0",
102
+ children: [lobbyLookup?.players?.length || 0, "/4"]
103
+ })]
104
+ }),
105
+ /* @__PURE__ */ jsx("div", {
106
+ className: "d-flex justify-content-around w-100 mb-1",
107
+ children: [
108
+ 1,
109
+ 2,
110
+ 3,
111
+ 4
112
+ ].map((player_count) => {
113
+ let playerLookup = false;
114
+ if (lobbyLookup?.players?.length >= player_count) playerLookup = true;
115
+ return /* @__PURE__ */ jsx("div", {
116
+ className: "icon",
117
+ style: {
118
+ width: "20px",
119
+ height: "20px",
120
+ ...playerLookup ? { backgroundColor: "black" } : { backgroundColor: "gray" },
121
+ border: "1px solid black"
122
+ }
123
+ }, player_count);
124
+ })
125
+ }),
126
+ /* @__PURE__ */ jsx(Link, {
127
+ className: ``,
128
+ href: {
129
+ pathname: `/play`,
130
+ query: { server: serverNumber }
131
+ },
132
+ style: { ...multiplayerConfig?.comingSoon ? { pointerEvents: "none" } : {} },
133
+ children: /* @__PURE__ */ jsx(ArticlesButton, {
134
+ small: true,
135
+ className: "px-3",
136
+ disabled: multiplayerConfig?.comingSoon,
137
+ children: multiplayerConfig?.comingSoon ? "Coming Soon" : "Join Game"
138
+ })
129
139
  })
130
- }),
131
- /* @__PURE__ */ jsx(Link, {
132
- className: ``,
133
- href: {
134
- pathname: `/play`,
135
- query: { server: serverNumber }
136
- },
137
- style: { ...multiplayerConfig?.comingSoon ? { pointerEvents: "none" } : {} },
138
- children: /* @__PURE__ */ jsx(ArticlesButton, {
139
- small: true,
140
- className: "px-3",
141
- disabled: multiplayerConfig?.comingSoon,
142
- children: multiplayerConfig?.comingSoon ? "Coming Soon" : "Join Game"
143
- })
144
- })
145
- ]
146
- }, id);
147
- })
148
- })] })]
140
+ ]
141
+ }, id);
142
+ })
143
+ })] }),
144
+ CardBodyAppendContent && CardBodyAppendContent
145
+ ]
149
146
  }),
150
147
  /* @__PURE__ */ jsx("div", {
151
148
  className: "card-footer d-flex flex-wrap justify-content-center",
152
149
  children: /* @__PURE__ */ jsx(PrimaryButtonGroup, {
153
150
  useStore,
154
- type: "Landing"
151
+ type: "Landing",
152
+ useRouter
155
153
  })
156
154
  })
157
155
  ]
@@ -197,5 +195,17 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
197
195
  ]
198
196
  });
199
197
  }
198
+ function OnlinePlayers({ useStore }) {
199
+ const lobbyDetails = useStore((state) => state.lobbyDetails);
200
+ return /* @__PURE__ */ jsxs("div", {
201
+ className: "fw-bold mb-1 small text-center",
202
+ children: [
203
+ lobbyDetails?.online_player_count || lobbyDetails?.players?.length || 0,
204
+ " player",
205
+ (lobbyDetails?.online_player_count || lobbyDetails?.players?.length !== 1) && "s",
206
+ " in the lobby."
207
+ ]
208
+ });
209
+ }
200
210
  //#endregion
201
211
  export { PageTemplateLandingPage as default };
@@ -105,7 +105,7 @@ function ReusedSocketLogicHandler({ pathname, useStore, useGameStore, useSocketS
105
105
  pathname
106
106
  ]);
107
107
  useEffect(() => {
108
- if (connected && !authenticated && userDetails?.user_id) {
108
+ if (connected && !authenticated && userDetails?.user_id && userToken) {
109
109
  debugLog("Socket is now connected and not authenticated with a logged in user!");
110
110
  loginSocket({
111
111
  user_id: userDetails?.user_id,
@@ -116,7 +116,8 @@ function ReusedSocketLogicHandler({ pathname, useStore, useGameStore, useSocketS
116
116
  }, [
117
117
  connected,
118
118
  authenticated,
119
- userDetails?.user_id
119
+ userDetails?.user_id,
120
+ userToken
120
121
  ]);
121
122
  useEffect(() => {
122
123
  if (debugConfig.enabled && debugConfig.autoHide) {
@@ -246,7 +246,7 @@ function OtherTab({ useStore, config }) {
246
246
  var package_default = {
247
247
  name: "@articles-media/articles-dev-box",
248
248
  description: "Shared code, functions, and components for different Articles Media projects.",
249
- version: "1.3.3",
249
+ version: "1.3.5",
250
250
  type: "module",
251
251
  sideEffects: false,
252
252
  imports: { "#root/src/*": "./src/*" },
@@ -1,2 +1,2 @@
1
- import { t as SettingsModal } from "./SettingsModal-Bud-D-3m.js";
1
+ import { t as SettingsModal } from "./SettingsModal-DfrM7Ai1.js";
2
2
  export { SettingsModal as default };
package/dist/index.js CHANGED
@@ -16,7 +16,7 @@ import { t as GameScoreboard } from "./GameScoreboard-BvE_sIDW.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-Bud-D-3m.js";
19
+ import { t as SettingsModal } from "./SettingsModal-DfrM7Ai1.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.3.3",
4
+ "version": "1.3.5",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "imports": {