@mbpockets/shared-ui 0.1.19 → 0.1.20

package/dist/ProfilePage/index.cjs

@@ -1,27 +1,288 @@
 "use client";
 'use strict';
 
+var material = require('@mui/material');
+var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Autocomplete = require('@mui/material/Autocomplete');
-var Card = require('@mui/material/Card');
-var CardContent = require('@mui/material/CardContent');
-var CardHeader = require('@mui/material/CardHeader');
-var Grid = require('@mui/material/Grid');
 var Popper = require('@mui/material/Popper');
-var TextField = require('@mui/material/TextField');
-var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
-var Card__default = /*#__PURE__*/_interopDefault(Card);
-var CardContent__default = /*#__PURE__*/_interopDefault(CardContent);
-var CardHeader__default = /*#__PURE__*/_interopDefault(CardHeader);
-var Grid__default = /*#__PURE__*/_interopDefault(Grid);
 var Popper__default = /*#__PURE__*/_interopDefault(Popper);
-var TextField__default = /*#__PURE__*/_interopDefault(TextField);
 
-// src/components/shared/TagEditor.tsx
+// src/components/PlayerPage/PlayerDetailsCard.tsx
+var PlayerDetailsCard = ({
+  preferredPronouns,
+  age,
+  yearsPlaying,
+  discordUsername,
+  preferredGames
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Card,
+    {
+      sx: {
+        margin: "1rem",
+        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+        // Primary Blue Gradient
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+        // Deep shadow based on the color
+        borderRadius: "12px",
+        // Rounded corners
+        color: "#FFFFFF",
+        // White as the base text color for contrast
+        position: "relative",
+        overflow: "hidden"
+        // Ensures clean edges
+      },
+      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-gradient-to-t from-white/10 to-transparent opacity-60",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "relative p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "h5",
+              className: "font-bold uppercase text-center tracking-wide mb-4",
+              sx: {
+                color: "#FFFFFF",
+                // Bright white for high contrast
+                textShadow: "0px 4px 8px rgba(0, 0, 0, 0.5)",
+                // Stronger shadow for bold presence
+                fontSize: "1.5rem"
+                // Slightly larger title size
+              },
+              children: "Player Details"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            preferredPronouns && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Pronouns:" }),
+                  " ",
+                  preferredPronouns
+                ]
+              }
+            ),
+            age !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Age:" }),
+                  " ",
+                  age
+                ]
+              }
+            ),
+            yearsPlaying !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Years Playing:" }),
+                  " ",
+                  yearsPlaying
+                ]
+              }
+            ),
+            discordUsername && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Discord Username:" }),
+                  " ",
+                  discordUsername
+                ]
+              }
+            ),
+            preferredGames && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Games:" }),
+                  " ",
+                  Array.isArray(preferredGames) ? preferredGames.join(", ") : preferredGames
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "caption",
+              className: "text-xs italic",
+              sx: {
+                color: "#BBDEFB",
+                // Subtle light blue for footer text
+                textShadow: "0px 1px 3px rgba(0, 0, 0, 0.2)"
+              },
+              children: "All information is player-submitted."
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+var PlayerDetailsCard_default = PlayerDetailsCard;
+
+// src/data/values.tsx
+var ProfilePictureSettings = {
+  aspectRatio: 4 / 5};
+var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) => {
+  const defaultImg = "/man-walking-silhouette-clipart.jpg";
+  const [imageSrc, setImageSrc] = react.useState(defaultImg);
+  const { aspectRatio } = ProfilePictureSettings;
+  react.useEffect(() => {
+    async function validateImage() {
+      const newImage = profilePicture || defaultImg;
+      if (!profilePicture) {
+        setImageSrc(defaultImg);
+        return;
+      }
+      const img = new Image();
+      img.src = newImage;
+      img.onload = () => {
+        setImageSrc(newImage);
+      };
+      img.onerror = () => {
+        setImageSrc(defaultImg);
+      };
+    }
+    validateImage();
+  }, [profilePicture]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Card,
+    {
+      sx: {
+        margin: "1rem",
+        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+        // Vibrant blue gradient
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+        // Blue shadow to add depth
+        borderRadius: "12px",
+        // Smooth rounded corners
+        color: "#FFFFFF",
+        // White text for high contrast
+        overflow: "hidden"
+        // Clean edges
+      },
+      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.CardMedia,
+          {
+            component: "img",
+            image: imageSrc,
+            alt: `${username}'s Profile Picture`,
+            sx: {
+              aspectRatio,
+              height: "auto",
+              // Updates to maintain aspect ratio and fill space nicely
+              width: "100%",
+              objectFit: "cover"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "relative p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "h5",
+              component: "div",
+              className: "font-bold text-lg uppercase text-center tracking-wide mb-2",
+              sx: {
+                color: "#FFFFFF",
+                // Pure white for username
+                fontSize: "1.5rem",
+                textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+                // Strong shadow for visibility
+              },
+              children: username
+            }
+          ),
+          preferredPronouns && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "body2",
+              className: "text-sm font-medium",
+              sx: {
+                color: "#E3F2FD",
+                textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+                // Subtle shadow for readability
+                fontWeight: "bold",
+                // Emphasize key details
+                marginBottom: "1rem"
+              },
+              children: preferredPronouns
+            }
+          ),
+          bio && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "body2",
+              className: "text-sm font-light",
+              sx: {
+                color: "#E3F2FD",
+                // Softer muted tone for secondary text
+                textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+                // Subtle shadow for readability
+                fontStyle: "italic"
+                // Distinguish bio visually
+              },
+              children: bio
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var PlayerDisplayCard_default = PlayerDisplayCard;
 function Chip({ tag, removeCallback }) {
   var _a;
   const color = (_a = tag.color) != null ? _a : "#bfbcbb";
@@ -54,33 +315,127 @@ function Chip({ tag, removeCallback }) {
     tag.id
   ) });
 }
-function TagEditor({
-  title = "Tags",
-  selectedTags,
-  possibleTags,
+var PlayerTagsCard = ({ tags = [] }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: {
+    margin: "1rem",
+    borderRadius: "12px",
+    boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+    overflow: "hidden"
+  }, className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.CardHeader,
+      {
+        title: "Player Tags",
+        sx: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+          "& .MuiCardHeader-title": {
+            fontWeight: "bold",
+            fontSize: "1.5rem",
+            textAlign: "center",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id)) }) })
+  ] });
+};
+var PlayerTagsCard_default = PlayerTagsCard;
+var PlayerPromptCard = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx(
+  material.Card,
+  {
+    sx: {
+      margin: "1rem",
+      background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+      // Gradient color scheme
+      boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+      // Card shadow
+      borderRadius: "12px",
+      // Rounded corners
+      color: "#FFFFFF",
+      // Text contrast with the background
+      overflow: "hidden"
+      // Keeps consistent and clean card shape
+    },
+    className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Typography,
+        {
+          variant: "h5",
+          className: "font-bold text-lg uppercase text-center tracking-wide mb-4",
+          sx: {
+            color: "#FFFFFF",
+            // Bright white for high visibility
+            textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+            // Strong text shadow for contrast
+            fontSize: "1.5rem"
+          },
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Typography,
+        {
+          variant: "body2",
+          className: "text-sm font-medium text-center",
+          sx: {
+            color: "#E3F2FD",
+            // Softer light blue for description
+            textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+            // Subtle shadow
+            lineHeight: 1.6,
+            marginTop: "1rem"
+          },
+          children: description
+        }
+      )
+    ] })
+  }
+);
+var PlayerPromptCard_default = PlayerPromptCard;
+var PlayerTagsEdit = ({
+  selectedTags = [],
+  possibleTags = [],
   onToggleTag
-}) {
+}) => {
   const [inputValue, setInputValue] = react.useState("");
   const selectedIds = react.useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
   const options = react.useMemo(
-    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label, alternate_title: tag.alternate_title })),
     [possibleTags]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card__default.default, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: {
+    margin: "1rem",
+    borderRadius: "12px",
+    boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+    overflow: "hidden"
+  }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      CardHeader__default.default,
+      material.CardHeader,
       {
-        title,
-        style: {
+        title: "Player Tags",
+        sx: {
           background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
           color: "#FFFFFF",
           fontSize: "1.5rem",
-          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+          "& .MuiCardHeader-title": {
+            fontWeight: "bold",
+            fontSize: "1.5rem",
+            textAlign: "center",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent__default.default, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-4", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
         Chip,
         {
           tag,
@@ -88,13 +443,19 @@ function TagEditor({
         },
         tag.id
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(
         Autocomplete__default.default,
         {
           options,
-          filterOptions: (availableOptions, state) => availableOptions.filter(
-            (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
-          ).slice(0, 3),
+          filterOptions: (availableOptions, state) => {
+            const query = state.inputValue.toLowerCase();
+            return availableOptions.filter(
+              (option) => {
+                var _a;
+                return !selectedIds.includes(option.value) && (option.label.toLowerCase().includes(query) || ((_a = option.alternate_title) == null ? void 0 : _a.some((title) => title.toLowerCase().includes(query))));
+              }
+            ).slice(0, 5);
+          },
           value: null,
           inputValue,
           onInputChange: (event, newInputValue) => {
@@ -109,13 +470,20 @@ function TagEditor({
             setInputValue("");
           },
           slots: { popper: CustomPopper },
-          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField__default.default, { ...params, label: "Select Tags" })
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              ...params,
+              label: "Select Tags",
+              variant: "outlined"
+            }
+          )
         },
         selectedIds.join("-")
-      ) }) })
+      )
     ] })
-  ] }) }) });
-}
+  ] });
+};
 var CustomPopper = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popper__default.default,
@@ -124,29 +492,91 @@ var CustomPopper = (props) => {
       modifiers: [
         {
           name: "preventOverflow",
-          options: { boundary: "viewport" }
+          options: {
+            boundary: "viewport"
+          }
         },
         {
           name: "offset",
-          options: { offset: [0, -10] }
+          options: {
+            offset: [0, -10]
+          }
         }
       ],
       placement: "top-start"
     }
   );
 };
-function PlayerTagsEdit(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TagEditor,
+var PlayerTagsEdit_default = PlayerTagsEdit;
+function PlayerPageLayout({
+  playerData,
+  tags = [],
+  blurbs = [],
+  isOwner = false,
+  possibleTags = [],
+  onToggleTag = () => {
+  }
+}) {
+  const theme = material.useTheme();
+  const isSmallScreen = material.useMediaQuery(theme.breakpoints.down("lg"));
+  const tagsElement = isOwner ? /* @__PURE__ */ jsxRuntime.jsx(
+    PlayerTagsEdit_default,
     {
-      title: "Player Tags",
-      selectedTags: props.PlayerTags,
-      possibleTags: props.possibleTags,
-      onToggleTag: props.updatePlayerTags
+      selectedTags: tags,
+      possibleTags,
+      onToggleTag
     }
-  );
+  ) : /* @__PURE__ */ jsxRuntime.jsx(PlayerTagsCard_default, { tags });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.NoSsr, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { padding: "2rem", marginRight: "auto", marginLeft: "auto" }, justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 3, justifyContent: "center", sx: { marginRight: "auto", marginLeft: "auto" }, children: [
+    !isSmallScreen && /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { size: { xs: 12, lg: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ),
+      tagsElement
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerDisplayCard_default,
+        {
+          profilePicture: playerData.profilePicture,
+          username: playerData.username,
+          bio: playerData.bio,
+          preferredPronouns: playerData.preferredPronouns
+        }
+      ) }),
+      isSmallScreen && /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ) }),
+      blurbs.map((blurb, index) => /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerPromptCard_default,
+        {
+          title: blurb.title,
+          description: blurb.description
+        }
+      ) }, index))
+    ] }) })
+  ] }) }) });
 }
 
-exports.PlayerTagsEdit = PlayerTagsEdit;
+exports.PlayerDetailsCard = PlayerDetailsCard_default;
+exports.PlayerDisplayCard = PlayerDisplayCard_default;
+exports.PlayerPageLayout = PlayerPageLayout;
+exports.PlayerPromptCard = PlayerPromptCard_default;
+exports.PlayerTagsCard = PlayerTagsCard_default;
+exports.PlayerTagsEdit = PlayerTagsEdit_default;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map