@articles-media/articles-dev-box 1.3.2 → 1.3.4

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 (9) hide show
  1. package/README.md +1 -0
  2. package/dist/GlobalBody.js +2 -2
  3. package/dist/PageTemplateLandingPage.js +84 -75
  4. package/dist/ReusedSocketLogicHandler.js +3 -2
  5. package/dist/{SettingsModal-Cg15aSoE.js → SettingsModal-BgIeffY6.js} +3 -1
  6. package/dist/SettingsModal.js +1 -1
  7. package/dist/index.js +3 -2
  8. package/dist/zustandSocketStoreSlice.js +51 -0
  9. package/package.json +3 -1
package/README.md CHANGED
@@ -63,6 +63,7 @@ npm run dev
63
63
  | useFullscreen | Hook for going fullscreen on the body or provided element | |
64
64
  | 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 |
65
65
  | typicalZustandStoreStateSlice | Slice of zustand states that every game normally uses | Catching Game and School Run |
66
+ | zustandSocketStoreSlice | Slice of zustand states that every game normally uses for sockets | School Run
66
67
  | getSignOutRedirectUrl | Handles signout redirect api logic | Catching Game |
67
68
  | GlobalClientModals | Imports all global client modals like FriendsList, CreditsModal, SettingsModal, InfoModal, and so on | USA Tycoon |
68
69
  | generateRandomNickname | Reusable way of doing random nicknames from package | USA Tycoon |
package/dist/GlobalBody.js CHANGED
@@ -8,8 +8,8 @@ var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
8
8
  var StatusModal = lazy(() => import("./StatusModal-DkHAimHp.js"));
9
9
  function GlobalBody({ fontawesome = true }) {
10
10
  const [statusModal, setStatusModal] = useState(false);
11
- const { data: mainSiteStatus, error: mainSiteStatusError, isLoading: mainSiteStatusLoading, mutate: mainSiteStatusMutate } = useMainSiteStatus({ disable: process.env.NODE_ENV !== "development" });
12
- const { data: authSiteStatus, error: authSiteStatusError, isLoading: authSiteStatusLoading, mutate: authSiteStatusMutate } = useAuthSiteStatus({ disable: process.env.NODE_ENV !== "development" });
11
+ const { data: mainSiteStatus, error: mainSiteStatusError, isLoading: mainSiteStatusLoading, mutate: mainSiteStatusMutate } = useMainSiteStatus({ disable: process.env.NODE_ENV !== "development" || process.env.NEXT_PUBLIC_ENABLE_ARTICLES === "false" });
12
+ const { data: authSiteStatus, error: authSiteStatusError, isLoading: authSiteStatusLoading, mutate: authSiteStatusMutate } = useAuthSiteStatus({ disable: process.env.NODE_ENV !== "development" || process.env.NEXT_PUBLIC_ENABLE_ARTICLES === "false" });
13
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`
package/dist/PageTemplateLandingPage.js CHANGED
@@ -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 }) {
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,81 +71,78 @@ 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",
@@ -197,5 +194,17 @@ function PageTemplateLandingPage({ useStore, useSocketStore, RotatingMascot, Lin
197
194
  ]
198
195
  });
199
196
  }
197
+ function OnlinePlayers({ useStore }) {
198
+ const lobbyDetails = useStore((state) => state.lobbyDetails);
199
+ return /* @__PURE__ */ jsxs("div", {
200
+ className: "fw-bold mb-1 small text-center",
201
+ children: [
202
+ lobbyDetails?.online_player_count || lobbyDetails?.players?.length || 0,
203
+ " player",
204
+ (lobbyDetails?.online_player_count || lobbyDetails?.players?.length !== 1) && "s",
205
+ " in the lobby."
206
+ ]
207
+ });
208
+ }
200
209
  //#endregion
201
210
  export { PageTemplateLandingPage as default };
package/dist/ReusedSocketLogicHandler.js CHANGED
@@ -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) {
package/dist/{SettingsModal-Cg15aSoE.js → SettingsModal-BgIeffY6.js} RENAMED
@@ -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.2",
249
+ version: "1.3.4",
250
250
  type: "module",
251
251
  sideEffects: false,
252
252
  imports: { "#root/src/*": "./src/*" },
@@ -289,6 +289,8 @@ var package_default = {
289
289
  "./useFullscreen": "./dist/useFullscreen.js",
290
290
  "./typicalZustandStoreExcludes": "./dist/typicalZustandStoreExcludes.js",
291
291
  "./typicalZustandStoreStateSlice": "./dist/typicalZustandStoreStateSlice.js",
292
+ "./zustandSocketStoreSlice": "./dist/zustandSocketStoreSlice.js",
293
+ "./useSocketStoreSlice": "./dist/useSocketStoreSlice.js",
292
294
  "./defaultGameNextConfig": "./dist/defaultGameNextConfig.js",
293
295
  "./defaultGameThemeConfig": "./dist/defaultGameThemeConfig.js",
294
296
  "./getSignOutRedirectUrl": "./dist/getSignOutRedirectUrl.js",
package/dist/SettingsModal.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as SettingsModal } from "./SettingsModal-Cg15aSoE.js";
1
+ import { t as SettingsModal } from "./SettingsModal-BgIeffY6.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-Cg15aSoE.js";
19
+ import { t as SettingsModal } from "./SettingsModal-BgIeffY6.js";
20
20
  import CreditsModal from "./CreditsModal.js";
21
21
  import InfoModal from "./InfoModal.js";
22
22
  import DarkModeHandler from "./DarkModeHandler.js";
@@ -27,8 +27,9 @@ import InviteModal from "./InviteModal.js";
27
27
  import ReusedSocketLogicHandler from "./ReusedSocketLogicHandler.js";
28
28
  import typicalZustandStoreExcludes from "./typicalZustandStoreExcludes.js";
29
29
  import typicalZustandStoreStateSlice from "./typicalZustandStoreStateSlice.js";
30
+ import zustandSocketStoreSlice from "./zustandSocketStoreSlice.js";
30
31
  import defaultGameNextConfig from "./defaultGameNextConfig.js";
31
32
  import getTheme from "./defaultGameThemeConfig.js";
32
33
  import getSignOutRedirectUrl from "./getSignOutRedirectUrl.js";
33
34
  import generateRandomNickname from "./generateRandomNickname.js";
34
- export { Ad_default as Ad, ArticlesAd, CreditsModal, DarkModeHandler, FriendsList, GameMenu, PrimaryButtonGroup as GameMenuPrimaryButtonGroup, GameScoreboard, GlobalBody_default as GlobalBody, GlobalHead, HasNoMouseHandler, InfoModal, InviteModal, NicknameInput, PageTemplateLandingPage, ReturnToLauncherButton, ReusedSocketLogicHandler, SessionButton, SettingsModal, SignInButton, SocketServerUrlHandler, ToontownModeHandler, ViewUserModal, defaultGameNextConfig, getTheme as defaultGameThemeConfig, generateRandomNickname, getSignOutRedirectUrl, typicalZustandStoreExcludes, typicalZustandStoreStateSlice, useFullscreen, useUserDetails, useUserFriends, useUserToken };
35
+ export { Ad_default as Ad, ArticlesAd, CreditsModal, DarkModeHandler, FriendsList, GameMenu, PrimaryButtonGroup as GameMenuPrimaryButtonGroup, GameScoreboard, GlobalBody_default as GlobalBody, GlobalHead, HasNoMouseHandler, InfoModal, InviteModal, NicknameInput, PageTemplateLandingPage, ReturnToLauncherButton, ReusedSocketLogicHandler, SessionButton, SettingsModal, SignInButton, SocketServerUrlHandler, ToontownModeHandler, ViewUserModal, defaultGameNextConfig, getTheme as defaultGameThemeConfig, generateRandomNickname, getSignOutRedirectUrl, typicalZustandStoreExcludes, typicalZustandStoreStateSlice, useFullscreen, useUserDetails, useUserFriends, useUserToken, zustandSocketStoreSlice };
package/dist/zustandSocketStoreSlice.js ADDED
@@ -0,0 +1,51 @@
1
+ //#region src/constants/zustandSocketStoreSlice.js
2
+ var game_name_key = process.env.NEXT_PUBLIC_GAME_KEY;
3
+ function zustandSocketStoreSlice(set, get, io) {
4
+ return {
5
+ socket: io({ autoConnect: false }),
6
+ serverUrl: process.env.NEXT_PUBLIC_NODE_SERVER,
7
+ connectSocket: (url) => {
8
+ const newSocket = io(url || process.env.NEXT_PUBLIC_NODE_SERVER, {
9
+ transports: ["websocket"],
10
+ autoConnect: false,
11
+ reconnection: true,
12
+ reconnectionDelay: 5e3,
13
+ reconnectionDelayMax: 1e4,
14
+ query: { client: process.env.NEXT_PUBLIC_GAME_KEY }
15
+ });
16
+ newSocket.connect();
17
+ set({ socket: newSocket });
18
+ },
19
+ setServerUrl: (url) => set({ serverUrl: url }),
20
+ disconnectSocket: () => set((state) => {
21
+ state.socket?.disconnect();
22
+ return {};
23
+ }),
24
+ startGame: (gameId, status) => {
25
+ set((state) => {
26
+ state.socket.emit(`game:${game_name_key}:start`, {
27
+ game_id: gameId,
28
+ status
29
+ });
30
+ return {};
31
+ });
32
+ },
33
+ totalUsers: 0,
34
+ setTotalUsers: (total) => set({ totalUsers: total }),
35
+ connected: false,
36
+ setConnected: (total) => set({ connected: total }),
37
+ authenticated: false,
38
+ setAuthenticated: (value) => set({ authenticated: value }),
39
+ loginSocket: (data) => {
40
+ set((state) => {
41
+ state.socket.emit("login-socket", {
42
+ ...data,
43
+ game_name: process.env.NEXT_PUBLIC_GAME_NAME
44
+ });
45
+ return {};
46
+ });
47
+ }
48
+ };
49
+ }
50
+ //#endregion
51
+ export { zustandSocketStoreSlice as default };
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.2",
4
+ "version": "1.3.4",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "imports": {
@@ -48,6 +48,8 @@
48
48
  "./useFullscreen": "./dist/useFullscreen.js",
49
49
  "./typicalZustandStoreExcludes": "./dist/typicalZustandStoreExcludes.js",
50
50
  "./typicalZustandStoreStateSlice": "./dist/typicalZustandStoreStateSlice.js",
51
+ "./zustandSocketStoreSlice": "./dist/zustandSocketStoreSlice.js",
52
+ "./useSocketStoreSlice": "./dist/useSocketStoreSlice.js",
51
53
  "./defaultGameNextConfig": "./dist/defaultGameNextConfig.js",
52
54
  "./defaultGameThemeConfig": "./dist/defaultGameThemeConfig.js",
53
55
  "./getSignOutRedirectUrl": "./dist/getSignOutRedirectUrl.js",