@articles-media/articles-dev-box 1.0.38 → 1.0.39
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.
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?
|
|
@@ -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 }) {
|
|
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/Articles-Joey/catching-game",
|
|
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 };
|
|
@@ -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 };
|
|
@@ -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.
|
|
235
|
+
version: "1.0.39",
|
|
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-
|
|
1
|
+
import { t as SettingsModal } from "./SettingsModal-PGPKzHah.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-
|
|
18
|
+
import { t as SettingsModal } from "./SettingsModal-PGPKzHah.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.
|
|
4
|
+
"version": "1.0.39",
|
|
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",
|