@articles-media/articles-dev-box 1.0.38 → 1.0.40

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 (8) hide show
  1. package/README.md +6 -0
  2. package/dist/CreditsModal.js +1 -1
  3. package/dist/GameMenuPrimaryButtonGroup.js +120 -0
  4. package/dist/NicknameInput.js +54 -0
  5. package/dist/{SettingsModal-DDrykvTH.js → SettingsModal-D60ZKYrb.js} +3 -1
  6. package/dist/SettingsModal.js +1 -1
  7. package/dist/index.js +5 -3
  8. package/package.json +3 -1
package/README.md CHANGED
@@ -47,6 +47,10 @@ npm run dev
47
47
  - Articles Ad component that connects with user data.
48
48
  - GameMenu
49
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
50
54
  - GlobalHead
51
55
  - Not used at this time, allows for just <head> related tags to be added to site without other logic.
52
56
  - GlobalBody
@@ -83,6 +87,8 @@ For newly developed components I sometimes find myself trying to remember what r
83
87
  - SessionButton - Catching Game and School Run
84
88
  - 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.
85
89
  - getSignOutRedirectUrl - Catching Game
90
+ - GameMenuPrimaryButtonGroup - Catching Game and Move Match
91
+ - NicknameInput - Catching Game
86
92
 
87
93
  # Roadmap
88
94
  ⏹️ Remove Bootstrap reliance?
package/dist/CreditsModal.js CHANGED
@@ -72,7 +72,7 @@ function CreditsModal({ show, setShow, useStore, owner, repo, developers, publis
72
72
  owner && repo && /* @__PURE__ */ jsxs("div", {
73
73
  className: "mb-3",
74
74
  children: [/* @__PURE__ */ jsx("div", { children: "Attributions:" }), /* @__PURE__ */ jsx("a", {
75
- href: `https://github.com/${owner}/${repo}/blob/main/README.md#attributions`,
75
+ href: `https://github.com/${owner || process.env.NEXT_PUBLIC_OWNER}/${repo || process.env.NEXT_PUBLIC_REPO}/blob/main/README.md#attributions`,
76
76
  target: "_blank",
77
77
  rel: "noopener noreferrer",
78
78
  children: /* @__PURE__ */ jsxs(ArticlesButton, { children: [/* @__PURE__ */ jsx("i", { className: "fab fa-github" }), "View on GitHub"] })
package/dist/GameMenuPrimaryButtonGroup.js ADDED
@@ -0,0 +1,120 @@
1
+ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
2
+ import useFullscreen from "./useFullscreen.js";
3
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
+ //#region src/components/Games/GameMenuPrimaryButtonGroup.jsx
5
+ function PrimaryButtonGroup({ useStore, type, owner, repo }) {
6
+ if (!useStore) return null;
7
+ const { isFullscreen, requestFullscreen, exitFullscreen } = useFullscreen();
8
+ const setShowSettingsModal = useStore((state) => state.setShowSettingsModal);
9
+ const toggleDarkMode = useStore((state) => state.toggleDarkMode);
10
+ const darkMode = useStore((state) => state.darkMode);
11
+ const setShowInfoModal = useStore((state) => state.setShowInfoModal);
12
+ const setShowCreditsModal = useStore((state) => state.setShowCreditsModal);
13
+ const sidebar = useStore((state) => state.sidebar);
14
+ const setSidebar = useStore((state) => state.setSidebar);
15
+ switch (type) {
16
+ case "Landing": return /* @__PURE__ */ jsxs(Fragment, { children: [
17
+ /* @__PURE__ */ jsxs("div", {
18
+ className: "w-50 d-flex",
19
+ children: [/* @__PURE__ */ jsxs(ArticlesButton, {
20
+ className: `w-100`,
21
+ small: true,
22
+ onClick: () => {
23
+ setShowSettingsModal(true);
24
+ },
25
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-cog" }), "Settings"]
26
+ }), /* @__PURE__ */ jsx(ArticlesButton, {
27
+ className: ``,
28
+ small: true,
29
+ onClick: () => {
30
+ toggleDarkMode();
31
+ },
32
+ children: darkMode ? /* @__PURE__ */ jsx("i", { className: "fad fa-sun" }) : /* @__PURE__ */ jsx("i", { className: "fad fa-moon" })
33
+ })]
34
+ }),
35
+ /* @__PURE__ */ jsxs(ArticlesButton, {
36
+ className: `w-50`,
37
+ small: true,
38
+ onClick: () => {
39
+ setShowInfoModal(true);
40
+ },
41
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-info-square" }), "Info"]
42
+ }),
43
+ /* @__PURE__ */ jsx("a", {
44
+ href: `https://github.com/${owner || process.env.NEXT_PUBLIC_OWNER}/${repo || process.env.NEXT_PUBLIC_REPO}`,
45
+ target: "_blank",
46
+ rel: "noopener noreferrer",
47
+ className: "w-50",
48
+ children: /* @__PURE__ */ jsxs(ArticlesButton, {
49
+ className: `w-100`,
50
+ small: true,
51
+ onClick: () => {},
52
+ children: [/* @__PURE__ */ jsx("i", { className: "fab fa-github" }), "Github"]
53
+ })
54
+ }),
55
+ /* @__PURE__ */ jsxs(ArticlesButton, {
56
+ className: `w-50`,
57
+ small: true,
58
+ onClick: () => {
59
+ setShowCreditsModal(true);
60
+ },
61
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-users" }), "Credits"]
62
+ })
63
+ ] });
64
+ case "GameMenu": return /* @__PURE__ */ jsxs(Fragment, { children: [
65
+ /* @__PURE__ */ jsx("a", {
66
+ href: "/",
67
+ className: "w-50",
68
+ children: /* @__PURE__ */ jsxs(ArticlesButton, {
69
+ className: "w-100",
70
+ small: true,
71
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-arrow-alt-square-left" }), /* @__PURE__ */ jsx("span", { children: "Leave Game" })]
72
+ })
73
+ }),
74
+ /* @__PURE__ */ jsxs(ArticlesButton, {
75
+ small: true,
76
+ className: "w-50",
77
+ active: isFullscreen,
78
+ onClick: () => {
79
+ if (isFullscreen) exitFullscreen();
80
+ else requestFullscreen();
81
+ },
82
+ children: [
83
+ isFullscreen && /* @__PURE__ */ jsx("span", { children: "Exit " }),
84
+ !isFullscreen && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("i", { className: "fad fa-expand" }) }),
85
+ /* @__PURE__ */ jsx("span", { children: "Fullscreen" })
86
+ ]
87
+ }),
88
+ /* @__PURE__ */ jsxs("div", {
89
+ className: "w-50 d-flex",
90
+ children: [/* @__PURE__ */ jsxs(ArticlesButton, {
91
+ className: `w-100`,
92
+ small: true,
93
+ onClick: () => {
94
+ setShowSettingsModal(true);
95
+ },
96
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-cog" }), "Settings"]
97
+ }), /* @__PURE__ */ jsx(ArticlesButton, {
98
+ className: ``,
99
+ small: true,
100
+ onClick: () => {
101
+ toggleDarkMode();
102
+ },
103
+ children: darkMode ? /* @__PURE__ */ jsx("i", { className: "fad fa-sun" }) : /* @__PURE__ */ jsx("i", { className: "fad fa-moon" })
104
+ })]
105
+ }),
106
+ /* @__PURE__ */ jsxs(ArticlesButton, {
107
+ className: `w-50`,
108
+ small: true,
109
+ active: sidebar,
110
+ onClick: () => {
111
+ setSidebar(!sidebar);
112
+ },
113
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-cog" }), "Sidebar"]
114
+ })
115
+ ] });
116
+ default: return null;
117
+ }
118
+ }
119
+ //#endregion
120
+ export { PrimaryButtonGroup as default };
package/dist/NicknameInput.js ADDED
@@ -0,0 +1,54 @@
1
+ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
+ //#region src/components/Games/NicknameInput.jsx
4
+ /**
5
+ * NicknameInput component for managing and displaying the user's nickname.
6
+ *
7
+ * @param {Object} props
8
+ * @param {function} props.useStore - Zustand store hook for accessing nickname state and actions.
9
+ * @returns {JSX.Element|null} The rendered NicknameInput component or null if useStore is not provided.
10
+ */
11
+ function NicknameInput({ useStore }) {
12
+ const _hasHydrated = useStore((state) => state._hasHydrated);
13
+ const nickname = useStore((state) => state.nickname);
14
+ const setNickname = useStore((state) => state.setNickname);
15
+ const randomNickname = useStore((state) => state.randomNickname);
16
+ if (!useStore) return null;
17
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
18
+ className: "flex-grow-1",
19
+ children: [/* @__PURE__ */ jsxs("div", {
20
+ className: "form-group articles mb-0",
21
+ children: [/* @__PURE__ */ jsx("label", {
22
+ htmlFor: "nickname",
23
+ children: "Nickname"
24
+ }), /* @__PURE__ */ jsxs("div", {
25
+ className: "d-flex align-items-center",
26
+ children: [/* @__PURE__ */ jsx("input", {
27
+ type: "text",
28
+ value: _hasHydrated ? nickname : "",
29
+ disabled: !_hasHydrated,
30
+ id: "nickname",
31
+ name: "nickname",
32
+ placeholder: "Enter your nickname",
33
+ onChange: (e) => {
34
+ setNickname(e.target.value);
35
+ },
36
+ className: `form-control form-control-sm`
37
+ }), /* @__PURE__ */ jsx(ArticlesButton, {
38
+ small: true,
39
+ className: "",
40
+ onClick: () => {
41
+ randomNickname();
42
+ },
43
+ children: /* @__PURE__ */ jsx("i", { className: "fad fa-random" })
44
+ })]
45
+ })]
46
+ }), /* @__PURE__ */ jsx("div", {
47
+ className: "mt-1",
48
+ style: { fontSize: "0.8rem" },
49
+ children: "Visible to all players"
50
+ })]
51
+ }) });
52
+ }
53
+ //#endregion
54
+ export { NicknameInput as default };
package/dist/{SettingsModal-DDrykvTH.js → SettingsModal-D60ZKYrb.js} RENAMED
@@ -232,7 +232,7 @@ function OtherTab({ useStore, config }) {
232
232
  var package_default = {
233
233
  name: "@articles-media/articles-dev-box",
234
234
  description: "Shared code, functions, and components for different Articles Media projects.",
235
- version: "1.0.38",
235
+ version: "1.0.40",
236
236
  type: "module",
237
237
  imports: { "#root/src/*": "./src/*" },
238
238
  main: "./dist/index.js",
@@ -246,6 +246,8 @@ var package_default = {
246
246
  ".": "./dist/index.js",
247
247
  "./Ad": "./dist/Ad.js",
248
248
  "./GameMenu": "./dist/GameMenu.js",
249
+ "./GameMenuPrimaryButtonGroup": "./dist/GameMenuPrimaryButtonGroup.js",
250
+ "./NicknameInput": "./dist/NicknameInput.js",
249
251
  "./ArticlesAd": "./dist/ArticlesAd.js",
250
252
  "./GameScoreboard": "./dist/GameScoreboard.js",
251
253
  "./ReturnToLauncherButton": "./dist/ReturnToLauncherButton.js",
package/dist/SettingsModal.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as SettingsModal } from "./SettingsModal-DDrykvTH.js";
1
+ import { t as SettingsModal } from "./SettingsModal-D60ZKYrb.js";
2
2
  export { SettingsModal as default };
package/dist/index.js CHANGED
@@ -9,16 +9,18 @@ import FriendsList from "./FriendsList.js";
9
9
  import { t as SessionButton } from "./SessionButton-D3cupnzD.js";
10
10
  import ArticlesAd from "./ArticlesAd.js";
11
11
  import { t as GameMenu } from "./GameMenu-CyW1MF3Y.js";
12
+ import useFullscreen from "./useFullscreen.js";
13
+ import PrimaryButtonGroup from "./GameMenuPrimaryButtonGroup.js";
14
+ import NicknameInput from "./NicknameInput.js";
12
15
  import { t as GameScoreboard } from "./GameScoreboard-CYuTBE_E.js";
13
16
  import GlobalHead from "./GlobalHead.js";
14
17
  import GlobalBody_default from "./GlobalBody.js";
15
- import { t as SettingsModal } from "./SettingsModal-DDrykvTH.js";
18
+ import { t as SettingsModal } from "./SettingsModal-D60ZKYrb.js";
16
19
  import CreditsModal from "./CreditsModal.js";
17
20
  import DarkModeHandler from "./DarkModeHandler.js";
18
21
  import ToontownModeHandler from "./ToontownModeHandler.js";
19
22
  import SocketServerUrlHandler from "./SocketServerUrlHandler.js";
20
- import useFullscreen from "./useFullscreen.js";
21
23
  import typicalZustandStoreExcludes from "./typicalZustandStoreExcludes.js";
22
24
  import typicalZustandStoreStateSlice from "./typicalZustandStoreStateSlice.js";
23
25
  import getSignOutRedirectUrl from "./getSignOutRedirectUrl.js";
24
- export { Ad_default as Ad, ArticlesAd, CreditsModal, DarkModeHandler, FriendsList, GameMenu, GameScoreboard, GlobalBody_default as GlobalBody, GlobalHead, ReturnToLauncherButton, SessionButton, SettingsModal, SignInButton, SocketServerUrlHandler, ToontownModeHandler, ViewUserModal, getSignOutRedirectUrl, typicalZustandStoreExcludes, typicalZustandStoreStateSlice, useFullscreen, useUserDetails, useUserFriends, useUserToken };
26
+ export { Ad_default as Ad, ArticlesAd, CreditsModal, DarkModeHandler, FriendsList, GameMenu, PrimaryButtonGroup as GameMenuPrimaryButtonGroup, GameScoreboard, GlobalBody_default as GlobalBody, GlobalHead, NicknameInput, ReturnToLauncherButton, SessionButton, SettingsModal, SignInButton, SocketServerUrlHandler, ToontownModeHandler, ViewUserModal, getSignOutRedirectUrl, typicalZustandStoreExcludes, typicalZustandStoreStateSlice, useFullscreen, useUserDetails, useUserFriends, useUserToken };
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.0.38",
4
+ "version": "1.0.40",
5
5
  "type": "module",
6
6
  "imports": {
7
7
  "#root/src/*": "./src/*"
@@ -19,6 +19,8 @@
19
19
  ".": "./dist/index.js",
20
20
  "./Ad": "./dist/Ad.js",
21
21
  "./GameMenu": "./dist/GameMenu.js",
22
+ "./GameMenuPrimaryButtonGroup": "./dist/GameMenuPrimaryButtonGroup.js",
23
+ "./NicknameInput": "./dist/NicknameInput.js",
22
24
  "./ArticlesAd": "./dist/ArticlesAd.js",
23
25
  "./GameScoreboard": "./dist/GameScoreboard.js",
24
26
  "./ReturnToLauncherButton": "./dist/ReturnToLauncherButton.js",