{"version":3,"file":"static/js/3478.91462f8a.chunk.js","mappings":"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","sources":["common/hooks/useDelayedState.ts","components/shared/Button/DarkButton.tsx","components/shared/CharacterComment/index.tsx","components/shared/Dialog/CenterDialog.tsx","components/shared/Dialog/FriendsLimitDialog/components/MyFriendsLimitDialogContent.tsx","components/shared/Dialog/FriendsLimitDialog/components/TheirFriendsLimitDialogContent.tsx","components/shared/Dialog/FriendsLimitDialog/FriendsLimitDialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\r\n\r\nexport function useDelayedState(\r\n state: T,\r\n checkOpen: (state: T) => boolean,\r\n timeoutMilliSecond: number\r\n): { delayedState: T; delayedOpen: boolean } {\r\n const [delayedState, setDelayedState] = useState(state);\r\n useEffect(() => {\r\n if (checkOpen(state)) {\r\n // When it opens\r\n setDelayedState(state);\r\n return;\r\n }\r\n\r\n // When it closes\r\n const timeoutId = setTimeout(() => {\r\n setDelayedState(state);\r\n }, timeoutMilliSecond);\r\n return () => {\r\n clearTimeout(timeoutId);\r\n };\r\n }, [state, timeoutMilliSecond, checkOpen]);\r\n\r\n return { delayedState, delayedOpen: checkOpen(delayedState) };\r\n}\r\n","import Button, { ButtonProps } from \"@material-ui/core/Button\";\r\nimport { makeStyles, Theme } from \"@material-ui/core/styles\";\r\nimport { BaseCSSProperties } from \"@material-ui/core/styles/withStyles\";\r\nimport { forwardRef } from \"react\";\r\nimport { spaceBetween } from \"../../../common/util/Array/spaceBetween\";\r\n\r\ntype Props = { style?: BaseCSSProperties } & Omit<\r\n ButtonProps,\r\n \"style\" | \"buttonRef\"\r\n>;\r\n\r\nexport const DarkButton = forwardRef(\r\n ({ style, className, ...rest }, ref) => {\r\n const c = useStyles({ style });\r\n return (\r\n \r\n );\r\n }\r\n);\r\nconst useStyles = makeStyles(\r\n ({ palette }) => ({\r\n button: ({ style }) => ({\r\n backgroundColor: palette.grey[800],\r\n \"&:hover\": {\r\n backgroundColor: palette.grey[700],\r\n },\r\n color: \"white\",\r\n fontSize: \"medium\",\r\n ...style,\r\n }),\r\n })\r\n);\r\n","import { makeStyles, Theme } from \"@material-ui/core/styles\";\r\nimport { BaseCSSProperties } from \"@material-ui/core/styles/withStyles\";\r\nimport * as React from \"react\";\r\nimport * as consts from \"../../../common/consts\";\r\nimport { spaceBetween } from \"../../../common/util/Array/spaceBetween\";\r\nimport \"./CharacterComment.css\";\r\n\r\ntype TProps = {\r\n imgNumber: number;\r\n screenWidth: number;\r\n comment: string | React.ReactNode;\r\n style?: BaseCSSProperties;\r\n commentStyle?: BaseCSSProperties;\r\n imgStyle?: BaseCSSProperties;\r\n containerRef?: React.RefObject;\r\n className?: string;\r\n};\r\nexport default function CharacterComment(props: TProps) {\r\n const {\r\n imgNumber,\r\n screenWidth,\r\n comment,\r\n style,\r\n commentStyle,\r\n imgStyle,\r\n containerRef,\r\n className,\r\n } = props;\r\n const c = useStyles({ style, imgStyle, screenWidth, commentStyle });\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {comment}\r\n
\r\n
\r\n \r\n );\r\n}\r\nconst useStyles = makeStyles<\r\n Theme,\r\n {\r\n style?: BaseCSSProperties;\r\n imgStyle?: BaseCSSProperties;\r\n commentStyle?: BaseCSSProperties;\r\n screenWidth: number;\r\n }\r\n>({\r\n container: ({ style }) => ({ ...style }),\r\n ninjaPic: ({ imgStyle, screenWidth }) => ({\r\n width: (screenWidth * 2) / 10,\r\n ...imgStyle,\r\n }),\r\n comment: ({ screenWidth, commentStyle }) => ({\r\n width: screenWidth > 767 ? (screenWidth * 7) / 10 - 15 : \"100%\",\r\n ...commentStyle,\r\n }),\r\n});\r\n","import Button from \"@material-ui/core/Button\";\r\nimport Card from \"@material-ui/core/Card\";\r\nimport { makeStyles, Theme } from \"@material-ui/core/styles\";\r\nimport { BaseCSSProperties } from \"@material-ui/core/styles/withStyles\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { ReactNode, useEffect, useState } from \"react\";\r\nimport { AppState } from \"../../../common/appState\";\r\nimport { useOpenAnimationFinished } from \"../../../common/hooks/panelAndDialog/useOpenAnimationFinished\";\r\nimport { usePanelAndDialogOpenOrder } from \"../../../common/hooks/panelAndDialog/usePanelAndDialogOpenOrder\";\r\nimport { spaceBetween } from \"../../../common/util/Array/spaceBetween\";\r\nimport { zIndex } from \"../../zApps/Layout/zIndex\";\r\nimport ShurikenProgress from \"../Animations/ShurikenProgress\";\r\n\r\nexport function CenterDialog({\r\n open,\r\n transitionMilliseconds = 0,\r\n style,\r\n className,\r\n darkLayerStyle,\r\n children,\r\n onClose,\r\n withoutCloseButton,\r\n globalDialogState,\r\n isChildrenUnmounted,\r\n}: {\r\n open: boolean;\r\n transitionMilliseconds?: number;\r\n style?: BaseCSSProperties;\r\n className?: string;\r\n darkLayerStyle?: BaseCSSProperties;\r\n children: ReactNode;\r\n onClose?: () => void;\r\n withoutCloseButton?: boolean;\r\n globalDialogState?: AppState[keyof AppState]; // When the dialog's global state changed, zIndex increases (especially when targetId changes)\r\n isChildrenUnmounted?: boolean;\r\n}) {\r\n const { openedOrder } = usePanelAndDialogOpenOrder(\r\n globalDialogState,\r\n open,\r\n transitionMilliseconds\r\n );\r\n\r\n const c = useResultDialogStyles({\r\n transitionDuration: `${transitionMilliseconds}ms`,\r\n style,\r\n darkLayerStyle,\r\n openedOrder,\r\n });\r\n\r\n const [isContentShown, setIsContentShown] = useState(false);\r\n\r\n useEffect(() => {\r\n if (open && !isContentShown) {\r\n // when it opens\r\n setTimeout(() => {\r\n setIsContentShown(open);\r\n }, 10);\r\n return;\r\n }\r\n\r\n if (!open && isContentShown) {\r\n // when it closes\r\n setTimeout(() => {\r\n setIsContentShown(false);\r\n }, transitionMilliseconds);\r\n }\r\n }, [open, transitionMilliseconds]);\r\n\r\n const isCompletelyOpened = open && isContentShown;\r\n const { isOpenAnimationFinished } = useOpenAnimationFinished(\r\n isCompletelyOpened,\r\n transitionMilliseconds\r\n );\r\n\r\n if (!open && !isContentShown) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {\r\n ev.stopPropagation();\r\n }}\r\n >\r\n {!withoutCloseButton && (\r\n \r\n \r\n \r\n )}\r\n {isChildrenUnmounted && open ? (\r\n \r\n ) : (\r\n children\r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\nconst useResultDialogStyles = makeStyles<\r\n Theme,\r\n {\r\n transitionDuration: string;\r\n style?: BaseCSSProperties;\r\n darkLayerStyle?: BaseCSSProperties;\r\n openedOrder: number; // 0 to 30, The last opened panel or dialog is 0.\r\n }\r\n>(({ palette }) => ({\r\n darkLayer: ({ transitionDuration, darkLayerStyle, openedOrder }) => ({\r\n position: \"fixed\",\r\n top: 0,\r\n left: 0,\r\n width: \"100%\",\r\n height: \"100%\",\r\n backgroundColor: \"rgba(0,0,0,0.7)\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n transitionProperty: \"opacity\",\r\n transitionDuration,\r\n zIndex: zIndex.panelAndDialog.darkLayer(openedOrder),\r\n ...darkLayerStyle,\r\n }),\r\n opacity0: { opacity: 0 },\r\n opacity1: { opacity: 1 },\r\n card: ({ style, openedOrder }) => ({\r\n width: \"100%\",\r\n maxWidth: 350,\r\n height: \"100%\",\r\n maxHeight: 350,\r\n backgroundColor: \"white\",\r\n borderRadius: 16,\r\n zIndex: zIndex.panelAndDialog.panelOrDialog(openedOrder),\r\n ...style,\r\n }),\r\n closeButton: {\r\n borderRadius: \"50%\",\r\n maxWidth: 28,\r\n maxHeight: 28,\r\n minWidth: 28,\r\n minHeight: 28,\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: palette.success.main,\r\n \"&:hover\": {\r\n backgroundColor: palette.success.light,\r\n },\r\n color: \"white\",\r\n lineHeight: 1,\r\n marginLeft: \"auto\",\r\n marginTop: 3,\r\n marginRight: 3,\r\n padding: 0,\r\n },\r\n closeIcon: { width: 20, height: 20 },\r\n}));\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { changeAppState, useAppState } from \"../../../../../common/appState\";\r\nimport { useScreenSize } from \"../../../../../common/hooks/useScreenSize\";\r\nimport { useUser } from \"../../../../../common/hooks/useUser\";\r\nimport { spaceBetween } from \"../../../../../common/util/Array/spaceBetween\";\r\nimport { PrimaryButton } from \"../../../Button/PrimaryButton\";\r\nimport CharacterComment from \"../../../CharacterComment\";\r\nimport { User } from \"../../../User/types\";\r\n\r\nexport function MyFriendsLimitDialogContent() {\r\n const c = useMyFriendsLimitDialogStyles();\r\n const { screenWidth } = useScreenSize();\r\n\r\n const { user } = useUser();\r\n if (!user) {\r\n return null;\r\n }\r\n\r\n const [items] = useAppState(\"items\");\r\n\r\n return (\r\n
\r\n
\r\n {\"You can't add the friend!\"}\r\n

\r\n {\"Friend limit!\"}\r\n

\r\n
\r\n\r\n \r\n {getComment(user)}\r\n
\r\n }\r\n style={{ margin: 0 }}\r\n />\r\n\r\n {items.some(({ item }) => item.key === \"friend_limit_expander\") ? (\r\n {\r\n changeAppState(\"friendsLimitDialogState\", {\r\n type: \"close\",\r\n });\r\n changeAppState(\"signInPanelState\", {\r\n type: \"myPageTop\",\r\n initialView: \"MyPageItemsCard\",\r\n itemKeyToFocus: \"friend_limit_expander\",\r\n });\r\n }}\r\n >\r\n Open Item Box\r\n \r\n ) : (\r\n {\r\n changeAppState(\"friendsLimitDialogState\", {\r\n type: \"close\",\r\n });\r\n changeAppState(\"shopPanelState\", {\r\n open: true,\r\n focusedItemKey: \"friend_limit_expander\",\r\n });\r\n }}\r\n >\r\n Expand the Limit\r\n \r\n )}\r\n \r\n );\r\n}\r\nconst useMyFriendsLimitDialogStyles = makeStyles(theme => ({\r\n title: {\r\n color: theme.palette.secondary.main,\r\n marginBottom: 0,\r\n },\r\n container: {\r\n margin: \"10px 0\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n justifyContent: \"space-between\",\r\n height: 288,\r\n maxWidth: 288,\r\n },\r\n commentContainer: { whiteSpace: \"pre-wrap\" },\r\n}));\r\n\r\nfunction getComment(user: User) {\r\n const baseMessage = \"Level up or use items to add more friends!\";\r\n if (user.friendExpansion > 0) {\r\n return baseMessage;\r\n }\r\n return `Your level is ${user.level}, and you already have ${\r\n user.level\r\n } friend${user.level > 1 ? \"s\" : \"\"}.\r\n${baseMessage}`;\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { useEffect, useState } from \"react\";\r\nimport { changeAppState } from \"../../../../../common/appState\";\r\nimport { useScreenSize } from \"../../../../../common/hooks/useScreenSize\";\r\nimport { spaceBetween } from \"../../../../../common/util/Array/spaceBetween\";\r\nimport ShurikenProgress from \"../../../Animations/ShurikenProgress\";\r\nimport { DarkButton } from \"../../../Button/DarkButton\";\r\nimport CharacterComment from \"../../../CharacterComment\";\r\nimport { OtherUser } from \"../../../User/types\";\r\n\r\nexport function TheirFriendsLimitDialogContent({\r\n targetUserId,\r\n}: {\r\n targetUserId: number;\r\n}) {\r\n const c = useTheirFriendsLimitDialogStyles();\r\n const { screenWidth } = useScreenSize();\r\n\r\n const [targetUser, setTargetUser] = useState(\r\n undefined\r\n );\r\n useEffect(() => {\r\n (async () => {\r\n const res = await fetch(\r\n \"api/User/GetOtherUserInfo?userId=\" + targetUserId\r\n );\r\n setTargetUser(await res.json());\r\n })();\r\n }, [targetUserId]);\r\n\r\n const characterComment = `${targetUser?.name} had already reached the friend limit.\r\nPlease wait until ${targetUser?.name} levels up!`;\r\n\r\n return (\r\n
\r\n
\r\n

\r\n {\"Their friend limit!\"}\r\n

\r\n
\r\n\r\n \r\n {targetUser?.name ? (\r\n characterComment\r\n ) : (\r\n \r\n )}\r\n
\r\n }\r\n style={{ margin: 0 }}\r\n />\r\n\r\n {\r\n changeAppState(\"friendsLimitDialogState\", {\r\n type: \"close\",\r\n });\r\n }}\r\n >\r\n OK\r\n \r\n \r\n );\r\n}\r\nconst useTheirFriendsLimitDialogStyles = makeStyles({\r\n title: {\r\n marginBottom: 0,\r\n },\r\n container: {\r\n margin: \"10px 10px 0\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n justifyContent: \"space-between\",\r\n height: 278,\r\n maxWidth: 288,\r\n },\r\n});\r\n","import { changeAppState, useAppState } from \"../../../../common/appState\";\r\nimport { useDelayedState } from \"../../../../common/hooks/useDelayedState\";\r\nimport { CenterDialog } from \"../CenterDialog\";\r\nimport { MyFriendsLimitDialogContent } from \"./components/MyFriendsLimitDialogContent\";\r\nimport { TheirFriendsLimitDialogContent } from \"./components/TheirFriendsLimitDialogContent\";\r\nimport { FriendsLimitDialogState } from \"./type\";\r\n\r\nconst transitionMilliseconds = 300;\r\n\r\nexport default function FriendsLimitDialog() {\r\n const [friendsLimitDialogState] = useAppState(\"friendsLimitDialogState\");\r\n const { delayedState } = useDelayedState(\r\n friendsLimitDialogState,\r\n state => state.type !== \"close\",\r\n transitionMilliseconds\r\n );\r\n\r\n return (\r\n {\r\n changeAppState(\"friendsLimitDialogState\", { type: \"close\" });\r\n }}\r\n transitionMilliseconds={transitionMilliseconds}\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n }}\r\n globalDialogState={friendsLimitDialogState}\r\n >\r\n \r\n \r\n );\r\n}\r\n\r\nfunction DialogContent({\r\n dialogState,\r\n}: {\r\n dialogState: FriendsLimitDialogState;\r\n}) {\r\n switch (dialogState.type) {\r\n case \"myLimit\": {\r\n return ;\r\n }\r\n case \"theirLimit\": {\r\n return (\r\n \r\n );\r\n }\r\n default: {\r\n return null;\r\n }\r\n }\r\n}\r\n"],"names":["useDelayedState","state","checkOpen","timeoutMilliSecond","_useState","useState","_useState2","_slicedToArray","delayedState","setDelayedState","useEffect","timeoutId","setTimeout","clearTimeout","delayedOpen","DarkButton","forwardRef","_ref","ref","style","className","rest","_objectWithoutProperties","_excluded","c","useStyles","_jsx","Button","_objectSpread","spaceBetween","button","makeStyles","_ref2","palette","_ref3","backgroundColor","grey","color","fontSize","CharacterComment","props","imgNumber","screenWidth","comment","commentStyle","imgStyle","containerRef","_jsxs","container","children","src","concat","consts","alt","ninjaPic","width","CenterDialog","open","_ref$transitionMillis","transitionMilliseconds","darkLayerStyle","onClose","withoutCloseButton","globalDialogState","isChildrenUnmounted","openedOrder","usePanelAndDialogOpenOrder","useResultDialogStyles","transitionDuration","isContentShown","setIsContentShown","isCompletelyOpened","isOpenAnimationFinished","useOpenAnimationFinished","darkLayer","opacity1","opacity0","onClick","undefined","Card","card","ev","stopPropagation","variant","closeButton","CloseIcon","closeIcon","ShurikenProgress","size","height","position","top","left","display","justifyContent","alignItems","transitionProperty","zIndex","opacity","_ref4","maxWidth","maxHeight","borderRadius","minWidth","minHeight","success","main","light","lineHeight","marginLeft","marginTop","marginRight","padding","MyFriendsLimitDialogContent","useMyFriendsLimitDialogStyles","useScreenSize","user","useUser","_useAppState","useAppState","items","title","Math","min","commentContainer","getComment","margin","some","item","key","PrimaryButton","fullWidth","changeAppState","type","initialView","itemKeyToFocus","focusedItemKey","theme","secondary","marginBottom","flexDirection","whiteSpace","baseMessage","friendExpansion","level","TheirFriendsLimitDialogContent","targetUserId","useTheirFriendsLimitDialogStyles","targetUser","setTargetUser","_asyncToGenerator","_regeneratorRuntime","mark","_callee","res","wrap","_context","prev","next","fetch","sent","t0","json","t1","stop","characterComment","name","FriendsLimitDialog","friendsLimitDialogState","DialogContent","dialogState"],"sourceRoot":""}