@articles-media/articles-dev-box 1.0.30 → 1.0.32

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 (51) hide show
  1. package/README.md +11 -3
  2. package/dist/Ad-BsG4C_lR.js +668 -0
  3. package/dist/Ad.js +2 -2
  4. package/dist/AdConfirmExitModal-heFPJNdX.js +55 -0
  5. package/dist/AdDetailsModal-D2-4lh9e.js +107 -0
  6. package/dist/ArticlesAd.js +15 -10
  7. package/dist/Button-DvEZjsVV.js +32 -0
  8. package/dist/CreditsModal.js +54 -34
  9. package/dist/DarkModeHandler.js +21 -13
  10. package/dist/FriendsList.js +49 -47
  11. package/dist/GameMenu-BD1HSDJ-.js +84 -0
  12. package/dist/GameMenu.js +2 -0
  13. package/dist/GameScoreboard-DVoXXDnM.js +174 -0
  14. package/dist/GameScoreboard.js +2 -2
  15. package/dist/GlobalBody.js +58 -23
  16. package/dist/GlobalHead.js +5 -5
  17. package/dist/Link-CguWJy6y.js +16 -0
  18. package/dist/ReturnToLauncherButton.js +26 -22
  19. package/dist/SessionButton.js +62 -38
  20. package/dist/SettingsModal-yU_TsVYh.js +430 -0
  21. package/dist/SettingsModal.js +2 -2
  22. package/dist/SignInButton.js +21 -17
  23. package/dist/SocketServerUrlHandler.js +14 -10
  24. package/dist/StatusModal-BXRbJQ10.js +84 -0
  25. package/dist/ToontownModeHandler.js +13 -10
  26. package/dist/ViewUserModal-Dgo1C4sR.js +1798 -0
  27. package/dist/ViewUserModal.js +2 -2
  28. package/dist/articles-dev-box.css +498 -2
  29. package/dist/classnames-No-mjhw1.js +66 -0
  30. package/dist/index.js +23 -22
  31. package/dist/numberWithCommas-B0B9bjWC.js +2198 -0
  32. package/dist/typicalZustandStoreExcludes.js +4 -3
  33. package/dist/typicalZustandStoreStateSlice.js +57 -46
  34. package/dist/useAuthSiteStatus-ZK1GbPBV.js +34 -0
  35. package/dist/useFullscreen.js +38 -18
  36. package/dist/useUserDetails.js +17 -16
  37. package/dist/useUserFriends.js +23 -21
  38. package/dist/useUserToken.js +12 -11
  39. package/package.json +2 -1
  40. package/dist/Ad-CFuDgQYL.js +0 -504
  41. package/dist/AdConfirmExitModal-skW9lp88.js +0 -55
  42. package/dist/AdDetailsModal-CdTR2Y9l.js +0 -107
  43. package/dist/Button-sSB4xpOw.js +0 -31
  44. package/dist/GameScoreboard-9GYlLx72.js +0 -165
  45. package/dist/Link-8nSDV4sI.js +0 -16
  46. package/dist/SettingsModal-gPPyBi4S.js +0 -302
  47. package/dist/StatusModal-PG3i9NKf.js +0 -75
  48. package/dist/ViewUserModal-C5gjfuJ5.js +0 -1549
  49. package/dist/classnames-DCsil9eG.js +0 -39
  50. package/dist/numberWithCommas-DSRplpBy.js +0 -1170
  51. package/dist/useAuthSiteStatus-Cj9IjMj7.js +0 -29
@@ -0,0 +1,55 @@
1
+ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
2
+ import { t as Link } from "./Link-CguWJy6y.js";
3
+ import { useEffect } from "react";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import Modal from "react-bootstrap/Modal";
6
+ //#region src/components/Ads/AdConfirmExitModal.jsx
7
+ function AdConfirmExitModal(props) {
8
+ let { setModalShow, ad, previewData } = props;
9
+ useEffect(() => {
10
+ console.log("Mounted");
11
+ }, []);
12
+ const closeModal = () => {
13
+ setModalShow(false);
14
+ };
15
+ return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Modal, {
16
+ show: true,
17
+ backdropClassName: "ad-details-modal-backdrop",
18
+ className: "articles-modal",
19
+ centered: true,
20
+ onHide: closeModal,
21
+ size: "md",
22
+ children: [
23
+ /* @__PURE__ */ jsx(Modal.Header, {
24
+ className: "align-items-center",
25
+ closeButton: true,
26
+ children: /* @__PURE__ */ jsx(Modal.Title, { children: "Confirm Exit" })
27
+ }),
28
+ /* @__PURE__ */ jsxs(Modal.Body, {
29
+ className: "",
30
+ children: [/* @__PURE__ */ jsx("div", { className: "ratio ratio-16x9 bg-black mb-2" }), /* @__PURE__ */ jsx("p", {
31
+ className: "mb-1",
32
+ children: "This advertiser has been approved and verified to display ads but always be cautious when interacting with ads. Any offsite interactions are at your own risk and should be approached with caution. We can not be held responsible for any issues that may arise."
33
+ })]
34
+ }),
35
+ /* @__PURE__ */ jsxs(Modal.Footer, {
36
+ className: "d-flex justify-content-between",
37
+ children: [/* @__PURE__ */ jsxs(ArticlesButton, {
38
+ variant: "articles",
39
+ onClick: closeModal,
40
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-times" }), "Close"]
41
+ }), /* @__PURE__ */ jsx(Link, {
42
+ href: ad?.website,
43
+ newPage: true,
44
+ children: /* @__PURE__ */ jsxs(ArticlesButton, {
45
+ variant: "articles",
46
+ onClick: closeModal,
47
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-link" }), "Proceed"]
48
+ })
49
+ })]
50
+ })
51
+ ]
52
+ }) });
53
+ }
54
+ //#endregion
55
+ export { AdConfirmExitModal as default };
@@ -0,0 +1,107 @@
1
+ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
2
+ import { t as Link } from "./Link-CguWJy6y.js";
3
+ import { useEffect } from "react";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import Modal from "react-bootstrap/Modal";
6
+ //#region src/components/Ads/AdDetailsModal.jsx
7
+ function AdDetailsModal(props) {
8
+ let { setModalShow, ad, previewData } = props;
9
+ useEffect(() => {
10
+ console.log("Mounted");
11
+ }, []);
12
+ const closeModal = () => {
13
+ setModalShow(false);
14
+ };
15
+ return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Modal, {
16
+ show: true,
17
+ backdropClassName: "ad-details-modal-backdrop",
18
+ className: "articles-modal",
19
+ centered: true,
20
+ onHide: closeModal,
21
+ size: "md",
22
+ children: [
23
+ /* @__PURE__ */ jsx(Modal.Header, {
24
+ className: "align-items-center",
25
+ closeButton: true,
26
+ children: /* @__PURE__ */ jsx(Modal.Title, { children: "Ad Details" })
27
+ }),
28
+ /* @__PURE__ */ jsxs(Modal.Body, {
29
+ className: "",
30
+ children: [
31
+ /* @__PURE__ */ jsxs("p", {
32
+ className: "mb-1",
33
+ children: ["Advertiser: ", /* @__PURE__ */ jsx("b", { children: ad?.business })]
34
+ }),
35
+ /* @__PURE__ */ jsxs("p", {
36
+ className: "mb-0",
37
+ children: ["Ad ID: ", /* @__PURE__ */ jsx("b", { children: previewData?._id || ad._id })]
38
+ }),
39
+ /* @__PURE__ */ jsx("hr", {}),
40
+ /* @__PURE__ */ jsx("div", {
41
+ className: "mb-1",
42
+ children: "This ad is being shown to you for the following reasons"
43
+ }),
44
+ ad.city ? /* @__PURE__ */ jsxs("div", { children: [
45
+ /* @__PURE__ */ jsx("div", {
46
+ className: "h4 mb-1",
47
+ children: ad.business
48
+ }),
49
+ /* @__PURE__ */ jsx("div", { children: "Is advertising to all zip codes within a" }),
50
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("div", {
51
+ className: "badge bg-black shadow-articles",
52
+ children: "15 Mile Radius"
53
+ }) }),
54
+ /* @__PURE__ */ jsx("div", { children: "of it's business" }),
55
+ /* @__PURE__ */ jsx("hr", { className: "border w-50 border-white" }),
56
+ /* @__PURE__ */ jsxs("div", {
57
+ className: "d-flex align-items-center",
58
+ children: [
59
+ /* @__PURE__ */ jsx("div", { children: "Your Zip code" }),
60
+ /* @__PURE__ */ jsx("div", {
61
+ className: "badge bg-black shadow-articles ms-2",
62
+ children: "00000"
63
+ }),
64
+ /* @__PURE__ */ jsx("div", {
65
+ className: "ms-2",
66
+ children: "is"
67
+ }),
68
+ /* @__PURE__ */ jsx("div", {
69
+ className: "badge bg-black shadow-articles ms-2",
70
+ children: "4.2 miles away"
71
+ })
72
+ ]
73
+ })
74
+ ] }) : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
75
+ className: "h4 mb-1",
76
+ children: ad.business
77
+ }), /* @__PURE__ */ jsx("div", { children: "Is advertising to all users" })] }),
78
+ /* @__PURE__ */ jsx("div", { className: "grow" }),
79
+ /* @__PURE__ */ jsx("hr", { className: "w-100" }),
80
+ /* @__PURE__ */ jsx("div", {
81
+ className: "reason lh-sm mb-2",
82
+ children: "Ads we display to you will always be transparent as to why you are seeing them."
83
+ }),
84
+ /* @__PURE__ */ jsx(Link, {
85
+ href: "https://articles.media/settings/account",
86
+ newPage: true,
87
+ className: "",
88
+ children: /* @__PURE__ */ jsx(ArticlesButton, {
89
+ small: true,
90
+ children: "Settings"
91
+ })
92
+ })
93
+ ]
94
+ }),
95
+ /* @__PURE__ */ jsx(Modal.Footer, {
96
+ className: "d-flex justify-content-center",
97
+ children: /* @__PURE__ */ jsx(ArticlesButton, {
98
+ variant: "articles",
99
+ onClick: closeModal,
100
+ children: "Close"
101
+ })
102
+ })
103
+ ]
104
+ }) });
105
+ }
106
+ //#endregion
107
+ export { AdDetailsModal as default };
@@ -1,16 +1,21 @@
1
- import { useEffect as e } from "react";
2
- import { jsx as t } from "react/jsx-runtime";
1
+ import { useEffect } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
3
  //#region src/components/Ads/ArticlesAd.jsx
4
- function n({ darkMode: n }) {
5
- return e(() => {}, []), e(() => {
6
- let e = document.createElement("script");
7
- return e.src = "https://accounts.articles.media/js/ad.js", e.async = !0, document.body.appendChild(e), () => {
8
- document.body.removeChild(e);
4
+ function ArticlesAd({ darkMode }) {
5
+ useEffect(() => {}, []);
6
+ useEffect(() => {
7
+ const script = document.createElement("script");
8
+ script.src = "https://accounts.articles.media/js/ad.js";
9
+ script.async = true;
10
+ document.body.appendChild(script);
11
+ return () => {
12
+ document.body.removeChild(script);
9
13
  };
10
- }, []), /* @__PURE__ */ t("div", {
14
+ }, []);
15
+ return /* @__PURE__ */ jsx("div", {
11
16
  className: "",
12
- children: /* @__PURE__ */ t("div", { className: "articles-media-ad" })
17
+ children: /* @__PURE__ */ jsx("div", { className: "articles-media-ad" })
13
18
  });
14
19
  }
15
20
  //#endregion
16
- export { n as default };
21
+ export { ArticlesAd as default };
@@ -0,0 +1,32 @@
1
+ import { n as __toESM, t as require_classnames } from "./classnames-No-mjhw1.js";
2
+ import { forwardRef } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/UI/Button.jsx
5
+ var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
6
+ var ArticlesButton = forwardRef((props, ref) => {
7
+ const { size, variant, style, small, large, onClick, className, disabled, active, type, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, title, ...rest } = props;
8
+ return /* @__PURE__ */ jsx("button", {
9
+ ref,
10
+ ...type && { type: "submit" },
11
+ disabled,
12
+ style,
13
+ title,
14
+ onMouseDown,
15
+ onMouseUp,
16
+ onMouseLeave,
17
+ onTouchStart,
18
+ onTouchEnd,
19
+ className: (0, import_classnames.default)(`btn ${variant ? `btn-${variant}` : "btn-articles"}`, {
20
+ [className]: className,
21
+ "btn-lg": large,
22
+ "btn-sm": small,
23
+ "active": active,
24
+ [`btn-${size}`]: size
25
+ }),
26
+ onClick,
27
+ children: props.children
28
+ });
29
+ });
30
+ ArticlesButton.displayName = "ArticlesButton";
31
+ //#endregion
32
+ export { ArticlesButton as t };
@@ -1,75 +1,95 @@
1
- import { t as e } from "./Button-sSB4xpOw.js";
2
- import { useState as t } from "react";
3
- import { jsx as n, jsxs as r } from "react/jsx-runtime";
4
- import { Modal as i } from "react-bootstrap";
1
+ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
2
+ import { useState } from "react";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { Modal } from "react-bootstrap";
5
5
  //#region src/components/Games/Credits/CreditsModal.jsx
6
- function a({ show: a, setShow: o, useStore: s, owner: c, repo: l, developers: u, publisher: d, introText: f }) {
7
- let [p, m] = t(!1);
8
- return /* @__PURE__ */ r(i, {
6
+ /**
7
+ * A modal component that displays game credits and links to a GitHub repository.
8
+ *
9
+ * @param {Object} props - The component props.
10
+ * @param {boolean} props.show - Controls whether the modal is visible.
11
+ * @param {Function} props.setShow - Function to update the visibility of the modal.
12
+ * @param {Function} props.useStore - Zustand store hook (currently unused in this component).
13
+ * @param {string} props.owner - The GitHub repository owner's username.
14
+ * @param {string} props.repo - The GitHub repository name.
15
+ * @param {string} props.introText - Introductory text for the modal.
16
+ * @param {Array} props.developers - List of developers.
17
+ * @param {string} props.publisher - The publisher's name.
18
+
19
+ *
20
+ * @returns {JSX.Element} The CreditsModal component.
21
+ */
22
+ function CreditsModal({ show, setShow, useStore, owner, repo, developers, publisher, introText, outroText }) {
23
+ const [showModal, setShowModal] = useState(false);
24
+ return /* @__PURE__ */ jsxs(Modal, {
9
25
  className: "articles-modal",
10
26
  size: "md",
11
- show: a,
12
- centered: !0,
13
- scrollable: !0,
27
+ show,
28
+ centered: true,
29
+ scrollable: true,
14
30
  onExited: () => {},
15
31
  onHide: () => {
16
- o(!1);
32
+ setShow(false);
17
33
  },
18
34
  children: [
19
- /* @__PURE__ */ n(i.Header, {
20
- closeButton: !0,
21
- children: /* @__PURE__ */ n(i.Title, { children: "Game Credits" })
35
+ /* @__PURE__ */ jsx(Modal.Header, {
36
+ closeButton: true,
37
+ children: /* @__PURE__ */ jsx(Modal.Title, { children: "Game Credits" })
22
38
  }),
23
- /* @__PURE__ */ r(i.Body, {
39
+ /* @__PURE__ */ jsxs(Modal.Body, {
24
40
  className: "flex-column p-3",
25
41
  children: [
26
- f && /* @__PURE__ */ n("div", {
42
+ introText && /* @__PURE__ */ jsx("div", {
27
43
  className: "mb-3",
28
- children: f
44
+ children: introText
29
45
  }),
30
- u ? /* @__PURE__ */ n("div", {}) : /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("h6", {
46
+ developers ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h6", {
31
47
  className: "mb-2",
32
48
  children: "Developer: Articles Joey"
33
- }), /* @__PURE__ */ n("a", {
49
+ }), /* @__PURE__ */ jsx("a", {
34
50
  href: "https://github.com/articles-joey",
35
51
  target: "_blank",
36
52
  rel: "noopener noreferrer",
37
- children: /* @__PURE__ */ r(e, {
53
+ children: /* @__PURE__ */ jsxs(ArticlesButton, {
38
54
  size: "",
39
55
  className: "mb-4",
40
- children: [/* @__PURE__ */ n("i", { className: "fab fa-github me-2" }), /* @__PURE__ */ n("span", { children: "View on Github" })]
56
+ children: [/* @__PURE__ */ jsx("i", { className: "fab fa-github me-2" }), /* @__PURE__ */ jsx("span", { children: "View on Github" })]
41
57
  })
42
58
  })] }),
43
- d ? /* @__PURE__ */ n("div", {}) : /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("h6", {
59
+ publisher ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h6", {
44
60
  className: "mb-2",
45
61
  children: "Publisher: Articles Media"
46
- }), /* @__PURE__ */ n("a", {
62
+ }), /* @__PURE__ */ jsx("a", {
47
63
  href: "https://github.com/Articles-Media",
48
64
  target: "_blank",
49
65
  rel: "noopener noreferrer",
50
- children: /* @__PURE__ */ r(e, {
66
+ children: /* @__PURE__ */ jsxs(ArticlesButton, {
51
67
  size: "",
52
68
  className: "mb-4",
53
- children: [/* @__PURE__ */ n("i", { className: "fad fa-browser me-2" }), /* @__PURE__ */ n("span", { children: "View Website" })]
69
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-browser me-2" }), /* @__PURE__ */ jsx("span", { children: "View Website" })]
54
70
  })
55
71
  })] }),
56
- c && l && /* @__PURE__ */ r("div", {
57
- className: "",
58
- children: [/* @__PURE__ */ n("div", { children: "Attributions:" }), /* @__PURE__ */ n("a", {
59
- href: `https://github.com/${c}/${l}/blob/main/README.md#attributions`,
72
+ owner && repo && /* @__PURE__ */ jsxs("div", {
73
+ className: "mb-3",
74
+ children: [/* @__PURE__ */ jsx("div", { children: "Attributions:" }), /* @__PURE__ */ jsx("a", {
75
+ href: `https://github.com/${owner}/${repo}/blob/main/README.md#attributions`,
60
76
  target: "_blank",
61
77
  rel: "noopener noreferrer",
62
- children: /* @__PURE__ */ r(e, { children: [/* @__PURE__ */ n("i", { className: "fab fa-github" }), "View on GitHub"] })
78
+ children: /* @__PURE__ */ jsxs(ArticlesButton, { children: [/* @__PURE__ */ jsx("i", { className: "fab fa-github" }), "View on GitHub"] })
63
79
  })]
80
+ }),
81
+ outroText && /* @__PURE__ */ jsx("div", {
82
+ className: "mb-3",
83
+ children: outroText
64
84
  })
65
85
  ]
66
86
  }),
67
- /* @__PURE__ */ r(i.Footer, {
87
+ /* @__PURE__ */ jsxs(Modal.Footer, {
68
88
  className: "justify-content-between",
69
- children: [/* @__PURE__ */ n("div", {}), /* @__PURE__ */ n(e, {
89
+ children: [/* @__PURE__ */ jsx("div", {}), /* @__PURE__ */ jsx(ArticlesButton, {
70
90
  variant: "outline-dark",
71
91
  onClick: () => {
72
- o(!1);
92
+ setShow(false);
73
93
  },
74
94
  children: "Close"
75
95
  })]
@@ -78,4 +98,4 @@ function a({ show: a, setShow: o, useStore: s, owner: c, repo: l, developers: u,
78
98
  });
79
99
  }
80
100
  //#endregion
81
- export { a as default };
101
+ export { CreditsModal as default };
@@ -1,17 +1,25 @@
1
- import { useEffect as e } from "react";
2
- import { Fragment as t, jsx as n } from "react/jsx-runtime";
1
+ import { useEffect } from "react";
2
+ import { Fragment, jsx } from "react/jsx-runtime";
3
3
  //#region src/components/UI/DarkModeHandler.jsx
4
- function r({ useStore: r }) {
5
- let i = r((e) => e.darkMode), a = r((e) => e._hasHydrated);
6
- return e(() => {
7
- if (a) {
8
- if (i == null) {
9
- let e = window.matchMedia("(prefers-color-scheme: dark)").matches;
10
- r.getState().setDarkMode(!!e);
11
- }
12
- i ? document.body.setAttribute("data-bs-theme", "dark") : document.body.setAttribute("data-bs-theme", "light");
4
+ /**
5
+ * Adds two numbers together.
6
+ *
7
+ * @param {function} A Zustand store hook - With darkMode and setDarkMode
8
+ * @returns {null} Nothing returned from this function.
9
+ */
10
+ function DarkModeHandler({ useStore }) {
11
+ const darkMode = useStore((state) => state.darkMode);
12
+ const hasHydrated = useStore((state) => state._hasHydrated);
13
+ useEffect(() => {
14
+ if (!hasHydrated) return;
15
+ if (darkMode == null) {
16
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
17
+ useStore.getState().setDarkMode(prefersDark ? true : false);
13
18
  }
14
- }, [i, a]), /* @__PURE__ */ n(t, {});
19
+ if (darkMode) document.body.setAttribute("data-bs-theme", "dark");
20
+ else document.body.setAttribute("data-bs-theme", "light");
21
+ }, [darkMode, hasHydrated]);
22
+ return /* @__PURE__ */ jsx(Fragment, {});
15
23
  }
16
24
  //#endregion
17
- export { r as default };
25
+ export { DarkModeHandler as default };
@@ -1,77 +1,79 @@
1
- import { t as e } from "./Button-sSB4xpOw.js";
2
- import t from "./useUserFriends.js";
3
- import { jsx as n, jsxs as r } from "react/jsx-runtime";
4
- import { Modal as i } from "react-bootstrap";
1
+ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
2
+ import useUserFriends from "./useUserFriends.js";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { Modal } from "react-bootstrap";
5
5
  //#region src/components/Friends/FriendsList.jsx
6
- function a({ show: a, setShow: o, componentType: s, className: c, style: l = {}, user_id: u, user_token: d, id: f = null, allowInvite: p = !1, inviteFunction: m = null, modalBackdropClassName: h = "" }) {
7
- let { data: g, error: _, isLoading: v, mutate: y } = t({
8
- user_id: u,
9
- user_token: d
6
+ function FriendsList({ show, setShow, componentType, className, style = {}, user_id, user_token, id = null, allowInvite = false, inviteFunction = null, modalBackdropClassName = "" }) {
7
+ const { data: friends, error: friendsError, isLoading: friendsLoading, mutate: mutateFriends } = useUserFriends({
8
+ user_id,
9
+ user_token
10
10
  });
11
- if ((!s || s == "list") && !v && g && g.length > 0) return /* @__PURE__ */ n("ul", {
12
- className: c,
13
- style: l,
14
- children: g.map((e) => /* @__PURE__ */ r("li", { children: [
15
- e?.populated_user?.username,
16
- " - ",
17
- e?.populated_user?.display_name || "No Display Name"
18
- ] }, e.user_id))
19
- });
20
- if (s.toLowerCase() == "modal") return /* @__PURE__ */ r(i, {
21
- show: a,
11
+ if (!componentType || componentType == "list") {
12
+ if (!friendsLoading && friends && friends.length > 0) return /* @__PURE__ */ jsx("ul", {
13
+ className,
14
+ style,
15
+ children: friends.map((friend) => /* @__PURE__ */ jsxs("li", { children: [
16
+ friend?.populated_user?.username,
17
+ " - ",
18
+ friend?.populated_user?.display_name || "No Display Name"
19
+ ] }, friend.user_id))
20
+ });
21
+ }
22
+ if (componentType.toLowerCase() == "modal") return /* @__PURE__ */ jsxs(Modal, {
23
+ show,
22
24
  size: "md",
23
- className: `articles-modal ${c}`,
24
- modalBackdropClassName: h,
25
- centered: !0,
26
- onHide: () => o(!1),
27
- style: l,
28
- id: f,
25
+ className: `articles-modal ${className}`,
26
+ modalBackdropClassName,
27
+ centered: true,
28
+ onHide: () => setShow(false),
29
+ style,
30
+ id,
29
31
  children: [
30
- /* @__PURE__ */ n(i.Header, { children: /* @__PURE__ */ n(i.Title, { children: "Friends" }) }),
31
- /* @__PURE__ */ r(i.Body, { children: [
32
- v && /* @__PURE__ */ r("div", {
32
+ /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Friends" }) }),
33
+ /* @__PURE__ */ jsxs(Modal.Body, { children: [
34
+ friendsLoading && /* @__PURE__ */ jsxs("div", {
33
35
  className: "d-flex align-items-center",
34
- children: [/* @__PURE__ */ n("i", { className: "fad fa-spinner-third fa-spin fa-2x" }), /* @__PURE__ */ n("div", { children: "Loading..." })]
36
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-spinner-third fa-spin fa-2x" }), /* @__PURE__ */ jsx("div", { children: "Loading..." })]
35
37
  }),
36
- !v && g && g.length == 0 && /* @__PURE__ */ n("div", { children: "No friends to show." }),
37
- !v && g && g.length > 0 && /* @__PURE__ */ n("div", { children: g.map((t) => /* @__PURE__ */ r("div", {
38
+ !friendsLoading && friends && friends.length == 0 && /* @__PURE__ */ jsx("div", { children: "No friends to show." }),
39
+ !friendsLoading && friends && friends.length > 0 && /* @__PURE__ */ jsx("div", { children: friends.map((friend) => /* @__PURE__ */ jsxs("div", {
38
40
  className: "d-flex align-items-center justify-content-between border p-1",
39
41
  children: [
40
- t?.populated_user?.username,
42
+ friend?.populated_user?.username,
41
43
  " - ",
42
- t?.populated_user?.display_name || "No Display Name",
43
- /* @__PURE__ */ r("div", { children: [p && /* @__PURE__ */ n(e, {
44
+ friend?.populated_user?.display_name || "No Display Name",
45
+ /* @__PURE__ */ jsxs("div", { children: [allowInvite && /* @__PURE__ */ jsx(ArticlesButton, {
44
46
  variant: "articles",
45
47
  onClick: () => {
46
- p(t);
48
+ allowInvite(friend);
47
49
  },
48
- children: /* @__PURE__ */ n("i", { className: "fad fa-comment-check" })
49
- }), /* @__PURE__ */ n(e, {
50
+ children: /* @__PURE__ */ jsx("i", { className: "fad fa-comment-check" })
51
+ }), /* @__PURE__ */ jsx(ArticlesButton, {
50
52
  variant: "articles",
51
53
  onClick: () => {},
52
- children: /* @__PURE__ */ n("i", { className: "fad fa-info" })
54
+ children: /* @__PURE__ */ jsx("i", { className: "fad fa-info" })
53
55
  })] })
54
56
  ]
55
- }, t.user_id)) })
57
+ }, friend.user_id)) })
56
58
  ] }),
57
- /* @__PURE__ */ r(i.Footer, {
59
+ /* @__PURE__ */ jsxs(Modal.Footer, {
58
60
  className: "justify-content-between",
59
- children: [/* @__PURE__ */ r(e, {
61
+ children: [/* @__PURE__ */ jsxs(ArticlesButton, {
60
62
  variant: "articles",
61
63
  onClick: () => {
62
- y();
64
+ mutateFriends();
63
65
  },
64
- children: [/* @__PURE__ */ n("i", { className: "fad fa-redo me-2" }), /* @__PURE__ */ n("span", { children: "Refresh" })]
65
- }), /* @__PURE__ */ r(e, {
66
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-redo me-2" }), /* @__PURE__ */ jsx("span", { children: "Refresh" })]
67
+ }), /* @__PURE__ */ jsxs(ArticlesButton, {
66
68
  variant: "articles",
67
69
  onClick: () => {
68
- o(!1);
70
+ setShow(false);
69
71
  },
70
- children: [/* @__PURE__ */ n("i", { className: "fad fa-times me-2" }), "Close"]
72
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-times me-2" }), "Close"]
71
73
  })]
72
74
  })
73
75
  ]
74
76
  });
75
77
  }
76
78
  //#endregion
77
- export { a as default };
79
+ export { FriendsList as default };
@@ -0,0 +1,84 @@
1
+ import { n as __toESM, t as require_classnames } from "./classnames-No-mjhw1.js";
2
+ import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
3
+ import { useEffect } from "react";
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ //#region src/components/Games/GameMenu/MobileMenu.jsx
6
+ var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
7
+ function MobileMenu({ useStore, LeftPanelContent, menuBarStyle }) {
8
+ const showMenu = useStore((state) => state.showMenu);
9
+ const setShowMenu = useStore((state) => state.setShowMenu);
10
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
11
+ className: (0, import_classnames.default)("menu-bar", {
12
+ "card card-articles p-1 justify-content-center": menuBarStyle == "Bar",
13
+ [menuBarStyle.replaceAll(" ", "_")]: menuBarStyle
14
+ }),
15
+ children: /* @__PURE__ */ jsx("div", {
16
+ className: "flex-header align-items-center",
17
+ children: /* @__PURE__ */ jsxs(ArticlesButton, {
18
+ small: true,
19
+ active: showMenu,
20
+ onClick: () => {
21
+ setShowMenu(!showMenu);
22
+ },
23
+ className: "d-flex",
24
+ children: [/* @__PURE__ */ jsx("i", { className: "fad fa-bars" }), /* @__PURE__ */ jsx("span", {
25
+ className: "text",
26
+ children: "Menu"
27
+ })]
28
+ })
29
+ })
30
+ }), /* @__PURE__ */ jsx("div", {
31
+ className: `mobile-menu ${showMenu && "show"}`,
32
+ onClick: () => setShowMenu(false),
33
+ style: {
34
+ ...menuBarStyle == "Bar" && { bottom: "50px" },
35
+ ...menuBarStyle == "Corner Button" && { bottom: "0px" }
36
+ },
37
+ children: /* @__PURE__ */ jsx("div", {
38
+ style: { maxWidth: "300px" },
39
+ className: "mobile-menu-container",
40
+ onClick: (e) => e.stopPropagation(),
41
+ children: LeftPanelContent && /* @__PURE__ */ jsx(LeftPanelContent, {})
42
+ })
43
+ })] });
44
+ }
45
+ //#endregion
46
+ //#region src/components/Games/GameMenu/GameMenu.jsx
47
+ /**
48
+ * @param {Object} props
49
+ * @param {Function} props.useStore
50
+ * @param {React.ComponentType} props.LeftPanelContent
51
+ * @param {"Bar" | "Corner Button"} props.menuBarStyle
52
+ * @param {"Static Panel" | "Floating Panel"} [props.sidebarStyle]
53
+ */
54
+ function GameMenu(props) {
55
+ const { useStore, LeftPanelContent, menuBarStyle, sidebarStyle } = props;
56
+ const sidebar = useStore((state) => state.sidebar);
57
+ const setShowMenu = useStore((state) => state.setShowMenu);
58
+ useEffect(() => {
59
+ if (sidebar == true) setShowMenu(false);
60
+ }, [sidebar]);
61
+ const convertedSidebarStyle = sidebarStyle.replaceAll(" ", "_");
62
+ if (!useStore) {
63
+ console.error("GameMenu: useStore is required");
64
+ return null;
65
+ }
66
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMenu, {
67
+ useStore,
68
+ LeftPanelContent,
69
+ menuBarStyle
70
+ }), /* @__PURE__ */ jsx("div", {
71
+ className: `panel-left card rounded-0 ${convertedSidebarStyle}`,
72
+ style: { ...convertedSidebarStyle == "Floating_Panel" && {
73
+ position: "absolute",
74
+ top: "0.5rem",
75
+ left: "0.5rem",
76
+ zIndex: 1,
77
+ height: "calc(100vh - 1rem)",
78
+ backgroundColor: "color-mix(in srgb, var(--bs-card-bg) 50%, transparent)"
79
+ } },
80
+ children: /* @__PURE__ */ jsx(LeftPanelContent, {})
81
+ })] });
82
+ }
83
+ //#endregion
84
+ export { GameMenu as t };
@@ -0,0 +1,2 @@
1
+ import { t as GameMenu } from "./GameMenu-BD1HSDJ-.js";
2
+ export { GameMenu as default };