god-button-action-button 0.1.0 → 0.1.1
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 +91 -20
- package/dist/components/ActionButton/ActionButton.d.ts +4 -0
- package/dist/components/ActionButton/types.d.ts +25 -0
- package/dist/index.cjs +1 -16
- package/dist/index.d.ts +2 -2
- package/dist/index.js +410 -664
- package/package.json +21 -2
package/README.md
CHANGED
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
# god-button-action-button
|
|
2
2
|
|
|
3
|
-
Movable circular action button for mobile games (draggable) with an RTL
|
|
3
|
+
Movable circular action button for mobile games (draggable) with an RTL “glass” menu built with MUI.
|
|
4
4
|
|
|
5
|
-
## Install
|
|
5
|
+
## Install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm
|
|
8
|
+
npm install god-button-action-button
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Requirements (peer dependencies)
|
|
12
|
+
|
|
13
|
+
This package expects the host app to provide:
|
|
14
|
+
|
|
15
|
+
- `react` (>= 18)
|
|
16
|
+
- `react-dom` (>= 18)
|
|
17
|
+
- `@mui/material` (>= 5)
|
|
18
|
+
- `@emotion/react` (>= 11)
|
|
19
|
+
- `@emotion/styled` (>= 11)
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
12
22
|
|
|
13
23
|
```tsx
|
|
14
24
|
import { ActionButton } from 'god-button-action-button'
|
|
@@ -18,36 +28,97 @@ export function GameUI() {
|
|
|
18
28
|
<ActionButton
|
|
19
29
|
yourRoleName="پزشک"
|
|
20
30
|
onItemClick={(id) => {
|
|
21
|
-
console.log(id)
|
|
31
|
+
console.log(id) // "messages" | "gameInfo" | "yourRole"
|
|
22
32
|
}}
|
|
23
33
|
/>
|
|
24
34
|
)
|
|
25
35
|
}
|
|
26
36
|
```
|
|
27
37
|
|
|
28
|
-
##
|
|
38
|
+
## What this component does
|
|
29
39
|
|
|
30
|
-
|
|
40
|
+
`ActionButton` renders a fixed-position draggable circle. It behaves like:
|
|
31
41
|
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
42
|
+
- Default state: bolt (action) icon
|
|
43
|
+
- Menu open: close icon
|
|
44
|
+
- “اطلاعات بازی” (game info) or “پیام ها” (messages) panel open: back icon
|
|
45
|
+
- Tapping back returns to the main 3-item menu
|
|
35
46
|
|
|
36
|
-
|
|
47
|
+
The menu opens toward the opposite side of the circle:
|
|
37
48
|
|
|
38
|
-
|
|
49
|
+
- circle is left of the screen center => menu expands to the right
|
|
50
|
+
- circle is right of the screen center => menu expands to the left
|
|
39
51
|
|
|
40
|
-
|
|
52
|
+
## Menu items
|
|
41
53
|
|
|
42
|
-
|
|
43
|
-
- Circle on the right => menu expands to the left
|
|
54
|
+
Three standalone menu buttons (top to bottom):
|
|
44
55
|
|
|
45
|
-
|
|
56
|
+
- `messages` — label: `پیام ها`
|
|
57
|
+
- `gameInfo` — label: `اطلاعات بازی`
|
|
58
|
+
- `yourRole` — label: `نقش شما {yourRoleName}` (default `yourRoleName` is `پزشک`)
|
|
46
59
|
|
|
47
|
-
|
|
60
|
+
Override any labels with the `labels` prop.
|
|
48
61
|
|
|
49
|
-
|
|
50
|
-
|
|
62
|
+
## Messages
|
|
63
|
+
|
|
64
|
+
If you pass `messages`, the component shows:
|
|
65
|
+
|
|
66
|
+
- An unread badge on the circle (based on message count since last “open”)
|
|
67
|
+
- A preview bubble for the latest message (for `messagePreviewDurationMs`, default `10000` ms)
|
|
68
|
+
- A scrollable “پیام ها” panel that lists messages newest-first
|
|
69
|
+
|
|
70
|
+
Message type:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
{ id: string; body: string; at?: number } // `at` is a ms timestamp for display
|
|
51
74
|
```
|
|
52
75
|
|
|
53
|
-
|
|
76
|
+
## Game info panel
|
|
77
|
+
|
|
78
|
+
When “اطلاعات بازی” is opened, it renders a tall glass panel in the same anchored position and width as the menu stack (`menuWidth`).
|
|
79
|
+
|
|
80
|
+
You can customize:
|
|
81
|
+
|
|
82
|
+
- section headings with `gameInfoSectionLabels` (defaults: `نام بازیکنان`, `نام نقش های بازی`)
|
|
83
|
+
- section bodies with `playerNamesContent` and `gameRoleNamesContent`
|
|
84
|
+
- max panel height with `gameInfoPanelMaxHeight` (default `340`)
|
|
85
|
+
|
|
86
|
+
## Props (high level)
|
|
87
|
+
|
|
88
|
+
The full prop surface is typed in `ActionButtonProps` (`src/components/ActionButton/types.ts`), but these are the key ones:
|
|
89
|
+
|
|
90
|
+
- `yourRoleName?: string` (default `پزشک`)
|
|
91
|
+
- `onItemClick?: (id: 'messages' | 'gameInfo' | 'yourRole') => void`
|
|
92
|
+
- `messages?: ActionButtonMessage[]`
|
|
93
|
+
- `playerNamesContent?: React.ReactNode`
|
|
94
|
+
- `gameRoleNamesContent?: React.ReactNode`
|
|
95
|
+
- `labels?: Partial<Record<'messages' | 'gameInfo' | 'yourRole', string>>`
|
|
96
|
+
- `initialPosition?: { x: number; y: number }` (px from top-left)
|
|
97
|
+
- `homePosition?: { x: number; y: number }` (used after long-press snap-back)
|
|
98
|
+
- `menuWidth?: number` (px)
|
|
99
|
+
- `menuItemHeight?: number` (px)
|
|
100
|
+
- `menuGap?: number` (px)
|
|
101
|
+
- `gameInfoPanelMaxHeight?: number` (px)
|
|
102
|
+
- `messagePreviewDurationMs?: number`
|
|
103
|
+
- `accentGradient?: string` (CSS `background` for the circle)
|
|
104
|
+
- `menuSurfaceBackground?: string` (CSS `background` for the panels)
|
|
105
|
+
|
|
106
|
+
## RTL / accessibility notes
|
|
107
|
+
|
|
108
|
+
The component uses:
|
|
109
|
+
|
|
110
|
+
- `dir="rtl"` on its panels (and checks document direction to mirror the “back” arrow)
|
|
111
|
+
- `role="button"` and an `aria-label` on the draggable circle
|
|
112
|
+
|
|
113
|
+
If your app is not RTL, labels can still be customized, but the default UI text is Persian.
|
|
114
|
+
|
|
115
|
+
## Development
|
|
116
|
+
|
|
117
|
+
See:
|
|
118
|
+
|
|
119
|
+
- `DEVELOPMENT.md`
|
|
120
|
+
- `API.md`
|
|
121
|
+
|
|
122
|
+
## License
|
|
123
|
+
|
|
124
|
+
MIT
|
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
import { ActionButtonProps } from './types';
|
|
2
|
+
/** Default FAB: dark purple gradient */
|
|
3
|
+
export declare const DEFAULT_ACCENT_GRADIENT = "linear-gradient(155deg, #6d28d9 0%, #5b21b6 38%, #4c1d95 72%, #1e1b4b 100%)";
|
|
4
|
+
/** Default menu / game-info glass surfaces (pairs with {@link DEFAULT_ACCENT_GRADIENT}) */
|
|
5
|
+
export declare const DEFAULT_MENU_SURFACE_BACKGROUND = "linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)), linear-gradient(140deg, rgba(91,33,182,0.48), rgba(30,27,75,0.58))";
|
|
2
6
|
export declare function ActionButton(props: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,6 +4,13 @@ export type ActionButtonMenuItem = {
|
|
|
4
4
|
id: ActionButtonMenuItemId;
|
|
5
5
|
label: string;
|
|
6
6
|
};
|
|
7
|
+
/** In-app message piped into the action button (list + preview bubble). */
|
|
8
|
+
export type ActionButtonMessage = {
|
|
9
|
+
id: string;
|
|
10
|
+
body: string;
|
|
11
|
+
/** Optional ms timestamp for display in the messages panel. */
|
|
12
|
+
at?: number;
|
|
13
|
+
};
|
|
7
14
|
export type ActionButtonProps = {
|
|
8
15
|
/**
|
|
9
16
|
* Role name shown in the bottom item: `نقش شما {yourRoleName}`.
|
|
@@ -71,6 +78,24 @@ export type ActionButtonProps = {
|
|
|
71
78
|
* Max height of the «اطلاعات بازی» panel (same width as the menu). Taller than the button stack; content scrolls inside.
|
|
72
79
|
*/
|
|
73
80
|
gameInfoPanelMaxHeight?: number;
|
|
81
|
+
/**
|
|
82
|
+
* Incoming messages (newest appended). Drives unread badge, preview bubble, and the «پیام ها» panel.
|
|
83
|
+
*/
|
|
84
|
+
messages?: ActionButtonMessage[];
|
|
85
|
+
/**
|
|
86
|
+
* How long the chat preview bubble stays visible after a new message (ms). Default 10000.
|
|
87
|
+
*/
|
|
88
|
+
messagePreviewDurationMs?: number;
|
|
89
|
+
/**
|
|
90
|
+
* Background for the draggable circle (CSS `background`, e.g. a `linear-gradient`).
|
|
91
|
+
* Default: dark purple gradient.
|
|
92
|
+
*/
|
|
93
|
+
accentGradient?: string;
|
|
94
|
+
/**
|
|
95
|
+
* Background for menu rows and the game-info panel (glass stack).
|
|
96
|
+
* Default: frosted glass with a purple tint that matches `accentGradient`.
|
|
97
|
+
*/
|
|
98
|
+
menuSurfaceBackground?: string;
|
|
74
99
|
/**
|
|
75
100
|
* Optional CSS class applied to the root wrapper.
|
|
76
101
|
*/
|
package/dist/index.cjs
CHANGED
|
@@ -1,16 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require(`react`);l=c(l);let u=require(`@mui/material`);var d=o((e=>{var t=require(`react`),n=Symbol.for(`react.element`),r=Symbol.for(`react.fragment`),i=Object.prototype.hasOwnProperty,a=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,o={key:!0,ref:!0,__self:!0,__source:!0};function s(e,t,r){var s,c={},l=null,u=null;for(s in r!==void 0&&(l=``+r),t.key!==void 0&&(l=``+t.key),t.ref!==void 0&&(u=t.ref),t)i.call(t,s)&&!o.hasOwnProperty(s)&&(c[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps,t)c[s]===void 0&&(c[s]=t[s]);return{$$typeof:n,type:e,key:l,ref:u,props:c,_owner:a.current}}e.Fragment=r,e.jsx=s,e.jsxs=s})),f=o((e=>{process.env.NODE_ENV!==`production`&&(function(){"use strict";var t=require(`react`),n=Symbol.for(`react.element`),r=Symbol.for(`react.portal`),i=Symbol.for(`react.fragment`),a=Symbol.for(`react.strict_mode`),o=Symbol.for(`react.profiler`),s=Symbol.for(`react.provider`),c=Symbol.for(`react.context`),l=Symbol.for(`react.forward_ref`),u=Symbol.for(`react.suspense`),d=Symbol.for(`react.suspense_list`),f=Symbol.for(`react.memo`),p=Symbol.for(`react.lazy`),m=Symbol.for(`react.offscreen`),h=Symbol.iterator,g=`@@iterator`;function _(e){if(typeof e!=`object`||!e)return null;var t=h&&e[h]||e[g];return typeof t==`function`?t:null}var v=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function y(e){b(`error`,e,[...arguments].slice(1))}function b(e,t,n){var r=v.ReactDebugCurrentFrame.getStackAddendum();r!==``&&(t+=`%s`,n=n.concat([r]));var i=n.map(function(e){return String(e)});i.unshift(`Warning: `+t),Function.prototype.apply.call(console[e],console,i)}var ee=!1,te=!1,x=!1,S=!1,C=!1,w=Symbol.for(`react.module.reference`);function T(e){return!!(typeof e==`string`||typeof e==`function`||e===i||e===o||C||e===a||e===u||e===d||S||e===m||ee||te||x||typeof e==`object`&&e&&(e.$$typeof===p||e.$$typeof===f||e.$$typeof===s||e.$$typeof===c||e.$$typeof===l||e.$$typeof===w||e.getModuleId!==void 0))}function E(e,t,n){var r=e.displayName;if(r)return r;var i=t.displayName||t.name||``;return i===``?n:n+`(`+i+`)`}function D(e){return e.displayName||`Context`}function O(e){if(e==null)return null;if(typeof e.tag==`number`&&y(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),typeof e==`function`)return e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case i:return`Fragment`;case r:return`Portal`;case o:return`Profiler`;case a:return`StrictMode`;case u:return`Suspense`;case d:return`SuspenseList`}if(typeof e==`object`)switch(e.$$typeof){case c:return D(e)+`.Consumer`;case s:return D(e._context)+`.Provider`;case l:return E(e,e.render,`ForwardRef`);case f:var t=e.displayName||null;return t===null?O(e.type)||`Memo`:t;case p:var n=e,m=n._payload,h=n._init;try{return O(h(m))}catch{return null}}return null}var k=Object.assign,A=0,j,M,N,P,F,I,L;function R(){}R.__reactDisabledLog=!0;function z(){if(A===0){j=console.log,M=console.info,N=console.warn,P=console.error,F=console.group,I=console.groupCollapsed,L=console.groupEnd;var e={configurable:!0,enumerable:!0,value:R,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}A++}function ne(){if(A--,A===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:k({},e,{value:j}),info:k({},e,{value:M}),warn:k({},e,{value:N}),error:k({},e,{value:P}),group:k({},e,{value:F}),groupCollapsed:k({},e,{value:I}),groupEnd:k({},e,{value:L})})}A<0&&y(`disabledDepth fell below zero. This is a bug in React. Please file an issue.`)}var B=v.ReactCurrentDispatcher,V;function H(e,t,n){if(V===void 0)try{throw Error()}catch(e){var r=e.stack.trim().match(/\n( *(at )?)/);V=r&&r[1]||``}return`
|
|
2
|
-
`+V+e}var U=!1,W=new(typeof WeakMap==`function`?WeakMap:Map);function G(e,t){if(!e||U)return``;var n=W.get(e);if(n!==void 0)return n;var r;U=!0;var i=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var a=B.current;B.current=null,z();try{if(t){var o=function(){throw Error()};if(Object.defineProperty(o.prototype,`props`,{set:function(){throw Error()}}),typeof Reflect==`object`&&Reflect.construct){try{Reflect.construct(o,[])}catch(e){r=e}Reflect.construct(e,[],o)}else{try{o.call()}catch(e){r=e}e.call(o.prototype)}}else{try{throw Error()}catch(e){r=e}e()}}catch(t){if(t&&r&&typeof t.stack==`string`){for(var s=t.stack.split(`
|
|
3
|
-
`),c=r.stack.split(`
|
|
4
|
-
`),l=s.length-1,u=c.length-1;l>=1&&u>=0&&s[l]!==c[u];)u--;for(;l>=1&&u>=0;l--,u--)if(s[l]!==c[u]){if(l!==1||u!==1)do if(l--,u--,u<0||s[l]!==c[u]){var d=`
|
|
5
|
-
`+s[l].replace(` at new `,` at `);return e.displayName&&d.includes(`<anonymous>`)&&(d=d.replace(`<anonymous>`,e.displayName)),typeof e==`function`&&W.set(e,d),d}while(l>=1&&u>=0);break}}}finally{U=!1,B.current=a,ne(),Error.prepareStackTrace=i}var f=e?e.displayName||e.name:``,p=f?H(f):``;return typeof e==`function`&&W.set(e,p),p}function re(e,t,n){return G(e,!1)}function ie(e){var t=e.prototype;return!!(t&&t.isReactComponent)}function K(e,t,n){if(e==null)return``;if(typeof e==`function`)return G(e,ie(e));if(typeof e==`string`)return H(e);switch(e){case u:return H(`Suspense`);case d:return H(`SuspenseList`)}if(typeof e==`object`)switch(e.$$typeof){case l:return re(e.render);case f:return K(e.type,t,n);case p:var r=e,i=r._payload,a=r._init;try{return K(a(i),t,n)}catch{}}return``}var q=Object.prototype.hasOwnProperty,J={},Y=v.ReactDebugCurrentFrame;function X(e){if(e){var t=e._owner,n=K(e.type,e._source,t?t.type:null);Y.setExtraStackFrame(n)}else Y.setExtraStackFrame(null)}function ae(e,t,n,r,i){var a=Function.call.bind(q);for(var o in e)if(a(e,o)){var s=void 0;try{if(typeof e[o]!=`function`){var c=Error((r||`React class`)+`: `+n+" type `"+o+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[o]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name=`Invariant Violation`,c}s=e[o](t,o,r,n,null,`SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED`)}catch(e){s=e}s&&!(s instanceof Error)&&(X(i),y("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",r||`React class`,n,o,typeof s),X(null)),s instanceof Error&&!(s.message in J)&&(J[s.message]=!0,X(i),y(`Failed %s type: %s`,n,s.message),X(null))}}var oe=Array.isArray;function Z(e){return oe(e)}function se(e){return typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`}function ce(e){try{return le(e),!1}catch{return!0}}function le(e){return``+e}function ue(e){if(ce(e))return y(`The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.`,se(e)),le(e)}var Q=v.ReactCurrentOwner,de={key:!0,ref:!0,__self:!0,__source:!0},fe,pe,me={};function he(e){if(q.call(e,`ref`)){var t=Object.getOwnPropertyDescriptor(e,`ref`).get;if(t&&t.isReactWarning)return!1}return e.ref!==void 0}function ge(e){if(q.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function _e(e,t){if(typeof e.ref==`string`&&Q.current&&t&&Q.current.stateNode!==t){var n=O(Q.current.type);me[n]||(y(`Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref`,O(Q.current.type),e.ref),me[n]=!0)}}function ve(e,t){var n=function(){fe||(fe=!0,y("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,`key`,{get:n,configurable:!0})}function ye(e,t){var n=function(){pe||(pe=!0,y("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,`ref`,{get:n,configurable:!0})}var be=function(e,t,r,i,a,o,s){var c={$$typeof:n,type:e,key:t,ref:r,props:s,_owner:o};return c._store={},Object.defineProperty(c._store,`validated`,{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,`_self`,{configurable:!1,enumerable:!1,writable:!1,value:i}),Object.defineProperty(c,`_source`,{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function xe(e,t,n,r,i){var a,o={},s=null,c=null;for(a in n!==void 0&&(ue(n),s=``+n),ge(t)&&(ue(t.key),s=``+t.key),he(t)&&(c=t.ref,_e(t,i)),t)q.call(t,a)&&!de.hasOwnProperty(a)&&(o[a]=t[a]);if(e&&e.defaultProps){var l=e.defaultProps;for(a in l)o[a]===void 0&&(o[a]=l[a])}if(s||c){var u=typeof e==`function`?e.displayName||e.name||`Unknown`:e;s&&ve(o,u),c&&ye(o,u)}return be(e,s,c,i,r,Q.current,o)}var Se=v.ReactCurrentOwner,Ce=v.ReactDebugCurrentFrame;function $(e){if(e){var t=e._owner,n=K(e.type,e._source,t?t.type:null);Ce.setExtraStackFrame(n)}else Ce.setExtraStackFrame(null)}var we=!1;function Te(e){return typeof e==`object`&&!!e&&e.$$typeof===n}function Ee(){if(Se.current){var e=O(Se.current.type);if(e)return`
|
|
6
|
-
|
|
7
|
-
Check the render method of \``+e+"`."}return``}function De(e){if(e!==void 0){var t=e.fileName.replace(/^.*[\\\/]/,``),n=e.lineNumber;return`
|
|
8
|
-
|
|
9
|
-
Check your code at `+t+`:`+n+`.`}return``}var Oe={};function ke(e){var t=Ee();if(!t){var n=typeof e==`string`?e:e.displayName||e.name;n&&(t=`
|
|
10
|
-
|
|
11
|
-
Check the top-level render call using <`+n+`>.`)}return t}function Ae(e,t){if(!(!e._store||e._store.validated||e.key!=null)){e._store.validated=!0;var n=ke(t);if(!Oe[n]){Oe[n]=!0;var r=``;e&&e._owner&&e._owner!==Se.current&&(r=` It was passed a child from `+O(e._owner.type)+`.`),$(e),y(`Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.`,n,r),$(null)}}}function je(e,t){if(typeof e==`object`){if(Z(e))for(var n=0;n<e.length;n++){var r=e[n];Te(r)&&Ae(r,t)}else if(Te(e))e._store&&(e._store.validated=!0);else if(e){var i=_(e);if(typeof i==`function`&&i!==e.entries)for(var a=i.call(e),o;!(o=a.next()).done;)Te(o.value)&&Ae(o.value,t)}}}function Me(e){var t=e.type;if(!(t==null||typeof t==`string`)){var n;if(typeof t==`function`)n=t.propTypes;else if(typeof t==`object`&&(t.$$typeof===l||t.$$typeof===f))n=t.propTypes;else return;if(n){var r=O(t);ae(n,e.props,`prop`,r,e)}else t.PropTypes!==void 0&&!we&&(we=!0,y("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",O(t)||`Unknown`));typeof t.getDefaultProps==`function`&&!t.getDefaultProps.isReactClassApproved&&y("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Ne(e){for(var t=Object.keys(e.props),n=0;n<t.length;n++){var r=t[n];if(r!==`children`&&r!==`key`){$(e),y("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",r),$(null);break}}e.ref!==null&&($(e),y("Invalid attribute `ref` supplied to `React.Fragment`."),$(null))}var Pe={};function Fe(e,t,r,a,o,s){var c=T(e);if(!c){var l=``;(e===void 0||typeof e==`object`&&e&&Object.keys(e).length===0)&&(l+=` You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.`);var u=De(o);u?l+=u:l+=Ee();var d;e===null?d=`null`:Z(e)?d=`array`:e!==void 0&&e.$$typeof===n?(d=`<`+(O(e.type)||`Unknown`)+` />`,l=` Did you accidentally export a JSX literal instead of a component?`):d=typeof e,y(`React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s`,d,l)}var f=xe(e,t,r,o,s);if(f==null)return f;if(c){var p=t.children;if(p!==void 0)if(a)if(Z(p)){for(var m=0;m<p.length;m++)je(p[m],e);Object.freeze&&Object.freeze(p)}else y(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else je(p,e)}if(q.call(t,`key`)){var h=O(e),g=Object.keys(t).filter(function(e){return e!==`key`}),_=g.length>0?`{key: someKey, `+g.join(`: ..., `)+`: ...}`:`{key: someKey}`;Pe[h+_]||(y(`A props object containing a "key" prop is being spread into JSX:
|
|
12
|
-
let props = %s;
|
|
13
|
-
<%s {...props} />
|
|
14
|
-
React keys must be passed directly to JSX without using spread:
|
|
15
|
-
let props = %s;
|
|
16
|
-
<%s key={someKey} {...props} />`,_,h,g.length>0?`{`+g.join(`: ..., `)+`: ...}`:`{}`,h),Pe[h+_]=!0)}return e===i?Ne(f):Me(f),f}function Ie(e,t,n){return Fe(e,t,n,!0)}function Le(e,t,n){return Fe(e,t,n,!1)}var Re=Le,ze=Ie;e.Fragment=i,e.jsx=Re,e.jsxs=ze})()})),p=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=d():t.exports=f()}))(),m={width:22,height:22,flexShrink:0,display:`block`,color:`rgba(255,255,255,0.95)`,opacity:.98};function h(e){let{id:t}=e;switch(t){case`messages`:return(0,p.jsx)(u.Box,{component:`svg`,viewBox:`0 0 24 24`,"aria-hidden":!0,sx:m,children:(0,p.jsx)(`path`,{fill:`currentColor`,d:`M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z`})});case`gameInfo`:return(0,p.jsx)(u.Box,{component:`svg`,viewBox:`0 0 24 24`,"aria-hidden":!0,sx:m,children:(0,p.jsx)(`path`,{fill:`currentColor`,d:`M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.5 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm5 8.5c0 2.49-2.01 4.5-4.5 4.5S5.5 18.99 5.5 16.5 7.51 12 10 12s4.5 2.01 4.5 4.5zm4.5-4.5c0 1.38-1.12 2.5-2.5 2.5S14 16.38 14 15s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5z`})});case`yourRole`:return(0,p.jsx)(u.Box,{component:`svg`,viewBox:`0 0 24 24`,"aria-hidden":!0,sx:m,children:(0,p.jsx)(`path`,{fill:`currentColor`,d:`M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z`})});default:return t}}var g=[`messages`,`gameInfo`,`yourRole`],_=`پزشک`;function v(e){let{yourRoleName:t=_,gameInfoSectionLabels:n,playerNamesContent:r,gameRoleNamesContent:i,onItemClick:a,labels:o,initialPosition:s,homePosition:c,dragBoundsPadding:d=12,circleSize:f=64,menuWidth:m=230,menuItemHeight:v=44,menuGap:y=10,gameInfoPanelMaxHeight:b=340,className:ee,style:te}=e,x=(0,l.useId)().replace(/:/g,``),S=(0,l.useRef)(null),C=(0,l.useRef)(!1),w=(0,l.useRef)(null),T=(0,l.useRef)({x:0,y:0}),E=(0,l.useRef)({x:0,y:0}),D=(0,l.useRef)({x:0,y:0,t:0}),O=(0,l.useRef)(null),k=(0,l.useRef)(!1),A=()=>typeof window>`u`?{x:d+f/2,y:0}:{x:d+f/2,y:window.innerHeight*.3},j=(0,l.useMemo)(()=>c?{...c}:s?{...s}:typeof window>`u`?{x:d+f/2,y:0}:{x:d+f/2,y:window.innerHeight*.3},[c,s,d,f]),[M,N]=(0,l.useState)(!1),[P,F]=(0,l.useState)(!1),[I,L]=(0,l.useState)(()=>s?{x:s.x,y:s.y}:c?{x:c.x,y:c.y}:A()),R=(0,l.useMemo)(()=>typeof window>`u`||I.x<window.innerWidth/2?`right`:`left`,[I.x]),z=(0,l.useMemo)(()=>{let e={messages:`پیام ها`,gameInfo:`اطلاعات بازی`,yourRole:`نقش شما ${t}`};return o?{...e,...o}:e},[o,t]),ne=(0,l.useMemo)(()=>({playerNames:n?.playerNames??`نام بازیکنان`,roleNames:n?.roleNames??`نام نقش های بازی`}),[n]),B=P?`back`:M?`close`:`action`,V=(0,u.useTheme)().direction===`rtl`||typeof document<`u`&&document.documentElement.getAttribute(`dir`)===`rtl`,[H,U]=(0,l.useState)(()=>typeof window<`u`?window.innerHeight:800);(0,l.useEffect)(()=>{let e=()=>U(window.innerHeight);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let W=(0,l.useMemo)(()=>Math.min(b,Math.max(120,H-d*2)),[b,H,d]),[G,re]=(0,l.useState)(()=>{let e=I.y-f/2;return{x:I.x-m/2,y:e,gap:10}}),ie=()=>{let e=I.y-f/2,t=R===`right`?I.x+f/2+10:I.x-f/2-10-m,n=v*g.length+y*(g.length-1),r=P?W:n,i=Math.min(Math.max(e,d),H-d-r);re({x:Math.min(Math.max(t,d),window.innerWidth-d-m),y:i,gap:10})};(0,l.useEffect)(()=>{ie()},[I.x,I.y,R,P,H,W]),(0,l.useEffect)(()=>{if(!M&&!P)return;let e=e=>{let t=S.current;if(!t)return;let n=e.target;n&&t.contains(n)||(N(!1),F(!1))};return window.addEventListener(`mousedown`,e),window.addEventListener(`touchstart`,e,{passive:!0}),()=>{window.removeEventListener(`mousedown`,e),window.removeEventListener(`touchstart`,e)}},[M,P]),(0,l.useEffect)(()=>()=>{O.current!=null&&(clearTimeout(O.current),O.current=null)},[]);let K=e=>{let t=f/2,n=d+t,r=window.innerWidth-d-t,i=d+t,a=window.innerHeight-d-t;return{x:Math.min(Math.max(e.x,n),r),y:Math.min(Math.max(e.y,i),a)}},q=()=>{O.current!=null&&(clearTimeout(O.current),O.current=null)},J=e=>{if(e.isPrimary){w.current=e.pointerId,C.current=!1,k.current=!1,T.current={x:e.clientX,y:e.clientY},E.current=I,D.current={x:e.clientX,y:e.clientY,t:Date.now()},q(),O.current=setTimeout(()=>{C.current||(k.current=!0,N(!1),F(!1),L(K({x:j.x,y:j.y})))},500);try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}}},Y=e=>{if(w.current!==e.pointerId)return;let t=e.clientX-T.current.x,n=e.clientY-T.current.y;C.current||Math.hypot(t,n)>6&&(C.current=!0,q()),L(K({x:E.current.x+t,y:E.current.y+n}))},X=e=>{if(w.current!==e.pointerId)return;q();let{x:t,y:n,t:r}=D.current,i=Math.hypot(e.clientX-t,e.clientY-n),a=Date.now()-r,o=C.current;if(w.current=null,C.current=!1,k.current){k.current=!1;try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}return}i<6&&a<400&&!o&&(P?(F(!1),N(!0)):N(e=>!e));try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}},ae=e=>{if(q(),w.current===e.pointerId){w.current=null,C.current=!1,k.current=!1;try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}}},oe=e=>{if(e===`gameInfo`){a?.(e),F(!0),N(!1);return}a?.(e),N(!1)};return(0,p.jsxs)(`div`,{ref:S,className:ee,style:{position:`fixed`,zIndex:1300,top:0,left:0,width:0,height:0,...te},children:[M?(0,p.jsx)(u.Box,{dir:`rtl`,onPointerDown:e=>{e.stopPropagation()},sx:{position:`fixed`,zIndex:1310,top:G.y,left:G.x,width:`${m}px`,display:`flex`,flexDirection:`column`,gap:`${y}px`,transformOrigin:R===`right`?`left top`:`right top`},children:g.map(e=>{let t=z[e];return(0,p.jsx)(u.ButtonBase,{onClick:()=>oe(e),sx:{height:`${v}px`,borderRadius:`18px`,paddingX:`12px`,justifyContent:`flex-start`,backdropFilter:`blur(12px)`,background:`rgba(255,255,255,0.10)`,border:`1px solid rgba(255,255,255,0.22)`,boxShadow:`0 12px 36px rgba(0,0,0,0.35)`,"&:hover":{background:`rgba(255,255,255,0.14)`}},children:(0,p.jsxs)(u.Box,{sx:{display:`flex`,alignItems:`center`,justifyContent:`flex-start`,gap:`10px`,width:`100%`,flexDirection:`row`},children:[(0,p.jsx)(u.Typography,{sx:{fontSize:`0.95rem`,fontWeight:700,letterSpacing:`-0.01em`,flex:1,minWidth:0,textAlign:`start`},children:t}),(0,p.jsx)(h,{id:e})]})},e)})}):null,P?(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(u.Box,{"aria-hidden":!0,onClick:()=>F(!1),sx:{position:`fixed`,inset:0,zIndex:1320,background:`rgba(0,0,0,0.52)`,backdropFilter:`blur(4px)`}}),(0,p.jsxs)(u.Paper,{dir:`rtl`,elevation:0,onPointerDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),sx:{position:`fixed`,zIndex:1321,top:G.y,left:G.x,width:`${m}px`,height:`${W}px`,maxHeight:`${W}px`,display:`flex`,flexDirection:`column`,overflow:`hidden`,borderRadius:`22px`,padding:`14px 14px 16px`,backdropFilter:`blur(12px)`,background:`rgba(255,255,255,0.10)`,border:`1px solid rgba(255,255,255,0.22)`,boxShadow:`0 12px 36px rgba(0,0,0,0.35)`,transformOrigin:R===`right`?`left top`:`right top`},children:[(0,p.jsx)(u.Typography,{sx:{fontSize:`1.02rem`,fontWeight:800,letterSpacing:`-0.02em`,marginBottom:`12px`,flexShrink:0},children:z.gameInfo}),(0,p.jsxs)(u.Box,{sx:{display:`flex`,flexDirection:`column`,gap:2,minHeight:0,flex:1,overflow:`auto`,pr:`2px`},children:[(0,p.jsxs)(u.Box,{children:[(0,p.jsx)(u.Typography,{sx:{fontSize:`0.82rem`,fontWeight:700,opacity:.72,marginBottom:`6px`},children:ne.playerNames}),(0,p.jsx)(u.Typography,{sx:{fontSize:`0.95rem`,fontWeight:600,lineHeight:1.45},children:r??`—`})]}),(0,p.jsx)(u.Divider,{sx:{borderColor:`rgba(255,255,255,0.12)`}}),(0,p.jsxs)(u.Box,{children:[(0,p.jsx)(u.Typography,{sx:{fontSize:`0.82rem`,fontWeight:700,opacity:.72,marginBottom:`6px`},children:ne.roleNames}),(0,p.jsx)(u.Typography,{sx:{fontSize:`0.95rem`,fontWeight:600,lineHeight:1.45},children:i??`—`})]})]})]})]}):null,(0,p.jsx)(u.Box,{role:`button`,"aria-label":B===`back`?`بازگشت به منو`:B===`close`?`بستن منو`:`باز کردن منو`,onPointerDown:J,onPointerMove:Y,onPointerUp:X,onPointerCancel:ae,sx:{position:`fixed`,width:`${f}px`,height:`${f}px`,borderRadius:`50%`,top:I.y-f/2,left:I.x-f/2,zIndex:1330,display:`flex`,alignItems:`center`,justifyContent:`center`,cursor:C.current?`grabbing`:`pointer`,userSelect:`none`,touchAction:`none`,background:`linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06))`,border:`1px solid rgba(255,255,255,0.25)`,boxShadow:`0 18px 60px rgba(0,0,0,0.45)`},children:B===`back`?(0,p.jsx)(u.Box,{"aria-hidden":!0,component:`svg`,viewBox:`0 0 24 24`,sx:{width:`${f*.48}px`,height:`${f*.48}px`,flexShrink:0,display:`block`,color:`#fff`,opacity:.98,filter:`drop-shadow(0 2px 8px rgba(0,0,0,0.45))`,shapeRendering:`geometricPrecision`,transform:V?`scaleX(-1)`:`none`},children:(0,p.jsx)(`path`,{fill:`currentColor`,d:`M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z`})}):B===`close`?(0,p.jsx)(u.Box,{"aria-hidden":!0,component:`svg`,viewBox:`0 0 24 24`,sx:{width:`${f*.46}px`,height:`${f*.46}px`,flexShrink:0,display:`block`,color:`#fff`,opacity:.98,filter:`drop-shadow(0 2px 8px rgba(0,0,0,0.45))`,shapeRendering:`geometricPrecision`},children:(0,p.jsx)(`path`,{fill:`currentColor`,d:`M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z`})}):(0,p.jsxs)(u.Box,{"aria-hidden":!0,component:`svg`,viewBox:`0 0 24 24`,sx:{width:`${f*.5}px`,height:`${f*.5}px`,flexShrink:0,display:`block`,color:`#fff`,opacity:.96,filter:`drop-shadow(0 2px 8px rgba(0,0,0,0.45))`,shapeRendering:`geometricPrecision`},children:[(0,p.jsx)(`defs`,{children:(0,p.jsxs)(`linearGradient`,{id:x,x1:`0%`,y1:`0%`,x2:`100%`,y2:`100%`,children:[(0,p.jsx)(`stop`,{offset:`0%`,stopColor:`#ffffff`,stopOpacity:`1`}),(0,p.jsx)(`stop`,{offset:`100%`,stopColor:`#e8eef8`,stopOpacity:`0.95`})]})}),(0,p.jsx)(`path`,{fill:`url(#${x})`,d:`M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z`})]})})]})}exports.ActionButton=v;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`@mui/material`),u=require(`react/jsx-runtime`);var d={width:22,height:22,flexShrink:0,display:`block`,color:`rgba(255,255,255,0.95)`,opacity:.98};function ee(e){let{id:t}=e;switch(t){case`messages`:return(0,u.jsx)(l.Box,{component:`svg`,viewBox:`0 0 24 24`,"aria-hidden":!0,sx:d,children:(0,u.jsx)(`path`,{fill:`currentColor`,d:`M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z`})});case`gameInfo`:return(0,u.jsx)(l.Box,{component:`svg`,viewBox:`0 0 24 24`,"aria-hidden":!0,sx:d,children:(0,u.jsx)(`path`,{fill:`currentColor`,d:`M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.5 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm5 8.5c0 2.49-2.01 4.5-4.5 4.5S5.5 18.99 5.5 16.5 7.51 12 10 12s4.5 2.01 4.5 4.5zm4.5-4.5c0 1.38-1.12 2.5-2.5 2.5S14 16.38 14 15s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5z`})});case`yourRole`:return(0,u.jsx)(l.Box,{component:`svg`,viewBox:`0 0 24 24`,"aria-hidden":!0,sx:d,children:(0,u.jsx)(`path`,{fill:`currentColor`,d:`M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z`})});default:return t}}var f=[`messages`,`gameInfo`,`yourRole`],te=`پزشک`,p=`linear-gradient(155deg, #6d28d9 0%, #5b21b6 38%, #4c1d95 72%, #1e1b4b 100%)`,ne=`linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)), linear-gradient(140deg, rgba(91,33,182,0.48), rgba(30,27,75,0.58))`;function m(e){let{yourRoleName:t=te,gameInfoSectionLabels:n,playerNamesContent:r,gameRoleNamesContent:i,onItemClick:a,labels:o,initialPosition:s,homePosition:d,dragBoundsPadding:m=12,circleSize:h=64,menuWidth:g=230,menuItemHeight:_=44,menuGap:v=10,gameInfoPanelMaxHeight:y=340,messages:re,messagePreviewDurationMs:ie=1e4,accentGradient:ae=p,menuSurfaceBackground:b=ne,className:oe,style:se}=e,x=re??[],S=(0,c.useId)().replace(/:/g,``),C=(0,c.useRef)(null),w=(0,c.useRef)(!1),T=(0,c.useRef)(null),E=(0,c.useRef)({x:0,y:0}),D=(0,c.useRef)({x:0,y:0}),O=(0,c.useRef)({x:0,y:0,t:0}),k=(0,c.useRef)(null),A=(0,c.useRef)(!1),ce=()=>typeof window>`u`?{x:m+h/2,y:0}:{x:m+h/2,y:window.innerHeight*.3},le=(0,c.useMemo)(()=>d?{...d}:s?{...s}:typeof window>`u`?{x:m+h/2,y:0}:{x:m+h/2,y:window.innerHeight*.3},[d,s,m,h]),[j,M]=(0,c.useState)(!1),[N,P]=(0,c.useState)(!1),[F,I]=(0,c.useState)(!1),[ue,L]=(0,c.useState)(0),[R,z]=(0,c.useState)(null),B=(0,c.useRef)(0),V=(0,c.useRef)(null),[H,U]=(0,c.useState)(()=>s?{x:s.x,y:s.y}:d?{x:d.x,y:d.y}:ce()),W=(0,c.useMemo)(()=>typeof window>`u`||H.x<window.innerWidth/2?`right`:`left`,[H.x]),G=(0,c.useMemo)(()=>{let e={messages:`پیام ها`,gameInfo:`اطلاعات بازی`,yourRole:`نقش شما ${t}`};return o?{...e,...o}:e},[o,t]),de=(0,c.useMemo)(()=>({playerNames:n?.playerNames??`نام بازیکنان`,roleNames:n?.roleNames??`نام نقش های بازی`}),[n]),K=Math.max(0,x.length-ue);(0,c.useEffect)(()=>{if(x.length===0){B.current=0,L(0);return}L(e=>Math.min(e,x.length))},[x.length]),(0,c.useEffect)(()=>{if(x.length===0){B.current=0;return}if(x.length>B.current){let e=x[x.length-1];z(e),V.current!=null&&(clearTimeout(V.current),V.current=null),V.current=setTimeout(()=>{z(null),V.current=null},ie)}return B.current=x.length,()=>{V.current!=null&&(clearTimeout(V.current),V.current=null)}},[x,ie]),(0,c.useEffect)(()=>{F&&L(x.length)},[x,F]);let q=N||F?`back`:j?`close`:`action`,fe=(0,l.useTheme)().direction===`rtl`||typeof document<`u`&&document.documentElement.getAttribute(`dir`)===`rtl`,[J,pe]=(0,c.useState)(()=>typeof window<`u`?window.innerHeight:800);(0,c.useEffect)(()=>{let e=()=>pe(window.innerHeight);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let Y=(0,c.useMemo)(()=>Math.min(y,Math.max(120,J-m*2)),[y,J,m]),[X,me]=(0,c.useState)(()=>{let e=H.y-h/2;return{x:H.x-g/2,y:e,gap:10}}),he=()=>{let e=H.y-h/2,t=W===`right`?H.x+h/2+10:H.x-h/2-10-g,n=_*f.length+v*(f.length-1),r=N||F?Y:n,i=Math.min(Math.max(e,m),J-m-r);me({x:Math.min(Math.max(t,m),window.innerWidth-m-g),y:i,gap:10})};(0,c.useEffect)(()=>{he()},[H.x,H.y,W,N,F,J,Y]),(0,c.useEffect)(()=>{if(!j&&!N&&!F)return;let e=e=>{let t=C.current;if(!t)return;let n=e.target;n&&t.contains(n)||(M(!1),P(!1),I(!1))};return window.addEventListener(`mousedown`,e),window.addEventListener(`touchstart`,e,{passive:!0}),()=>{window.removeEventListener(`mousedown`,e),window.removeEventListener(`touchstart`,e)}},[j,N,F]),(0,c.useEffect)(()=>()=>{k.current!=null&&(clearTimeout(k.current),k.current=null)},[]);let Z=e=>{let t=h/2,n=m+t,r=window.innerWidth-m-t,i=m+t,a=window.innerHeight-m-t;return{x:Math.min(Math.max(e.x,n),r),y:Math.min(Math.max(e.y,i),a)}},Q=()=>{k.current!=null&&(clearTimeout(k.current),k.current=null)},ge=e=>{if(e.isPrimary){T.current=e.pointerId,w.current=!1,A.current=!1,E.current={x:e.clientX,y:e.clientY},D.current=H,O.current={x:e.clientX,y:e.clientY,t:Date.now()},Q(),k.current=setTimeout(()=>{w.current||(A.current=!0,M(!1),P(!1),I(!1),U(Z({x:le.x,y:le.y})))},500);try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}}},_e=e=>{if(T.current!==e.pointerId)return;let t=e.clientX-E.current.x,n=e.clientY-E.current.y;w.current||Math.hypot(t,n)>6&&(w.current=!0,Q()),U(Z({x:D.current.x+t,y:D.current.y+n}))},ve=e=>{if(T.current!==e.pointerId)return;Q();let{x:t,y:n,t:r}=O.current,i=Math.hypot(e.clientX-t,e.clientY-n),a=Date.now()-r,o=w.current;if(T.current=null,w.current=!1,A.current){A.current=!1;try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}return}i<6&&a<400&&!o&&(N?(P(!1),M(!0)):F?(I(!1),M(!0)):M(e=>!e));try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}},ye=e=>{if(Q(),T.current===e.pointerId){T.current=null,w.current=!1,A.current=!1;try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}}},be=e=>{if(e===`gameInfo`){a?.(e),I(!1),P(!0),M(!1);return}if(e===`messages`){a?.(e),P(!1),I(!0),M(!1),L(x.length),z(null),V.current!=null&&(clearTimeout(V.current),V.current=null);return}a?.(e),M(!1)},xe=(0,c.useMemo)(()=>`linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)), ${ae}`,[ae]),$=(0,c.useMemo)(()=>{if(!R||typeof window>`u`)return null;let e=Math.min(g+24,280),t=Math.min(Math.max(m,H.x-e/2),window.innerWidth-m-e),n=H.y-h/2;return{left:t,width:e,bottom:window.innerHeight-n+5,maxBubbleHeight:Math.max(96,n-m-5)}},[R,H.x,H.y,h,g,m]);return(0,u.jsxs)(`div`,{ref:C,className:oe,style:{position:`fixed`,zIndex:1300,top:0,left:0,width:0,height:0,...se},children:[j?(0,u.jsx)(l.Box,{dir:`rtl`,onPointerDown:e=>{e.stopPropagation()},sx:{position:`fixed`,zIndex:1310,top:X.y,left:X.x,width:`${g}px`,display:`flex`,flexDirection:`column`,gap:`${v}px`,transformOrigin:W===`right`?`left top`:`right top`},children:f.map(e=>{let t=G[e];return(0,u.jsx)(l.ButtonBase,{onClick:()=>be(e),sx:{height:`${_}px`,borderRadius:`18px`,paddingX:`12px`,justifyContent:`flex-start`,backdropFilter:`blur(12px)`,background:b,border:`1px solid rgba(255,255,255,0.22)`,boxShadow:`0 12px 36px rgba(0,0,0,0.35)`,"&:hover":{filter:`brightness(1.08)`}},children:(0,u.jsxs)(l.Box,{sx:{display:`flex`,alignItems:`center`,justifyContent:`flex-start`,gap:`10px`,width:`100%`,flexDirection:`row`},children:[(0,u.jsx)(l.Typography,{sx:{fontSize:`0.95rem`,fontWeight:700,letterSpacing:`-0.01em`,flex:1,minWidth:0,textAlign:`start`},children:t}),e===`messages`&&K>0?(0,u.jsx)(l.Box,{component:`span`,"aria-label":String(K),sx:{minWidth:22,height:22,px:.5,borderRadius:`11px`,bgcolor:`#f43f5e`,color:`#fff`,fontSize:`0.72rem`,fontWeight:800,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,flexShrink:0,lineHeight:1,border:`2px solid rgba(255,255,255,0.2)`},children:K>99?`99+`:K}):null,(0,u.jsx)(ee,{id:e})]})},e)})}):null,N?(0,u.jsxs)(l.Paper,{dir:`rtl`,elevation:0,onPointerDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),sx:{position:`fixed`,zIndex:1321,top:X.y,left:X.x,width:`${g}px`,height:`${Y}px`,maxHeight:`${Y}px`,display:`flex`,flexDirection:`column`,overflow:`hidden`,borderRadius:`22px`,padding:`14px 14px 16px`,backdropFilter:`blur(12px)`,background:b,border:`1px solid rgba(255,255,255,0.22)`,boxShadow:`0 12px 36px rgba(0,0,0,0.35)`,transformOrigin:W===`right`?`left top`:`right top`},children:[(0,u.jsx)(l.Typography,{sx:{fontSize:`1.02rem`,fontWeight:800,letterSpacing:`-0.02em`,marginBottom:`12px`,flexShrink:0},children:G.gameInfo}),(0,u.jsxs)(l.Box,{sx:{display:`flex`,flexDirection:`column`,gap:2,minHeight:0,flex:1,overflow:`auto`,pr:`2px`},children:[(0,u.jsxs)(l.Box,{children:[(0,u.jsx)(l.Typography,{sx:{fontSize:`0.82rem`,fontWeight:700,opacity:.72,marginBottom:`6px`},children:de.playerNames}),(0,u.jsx)(l.Typography,{sx:{fontSize:`0.95rem`,fontWeight:600,lineHeight:1.45},children:r??`—`})]}),(0,u.jsx)(l.Divider,{sx:{borderColor:`rgba(255,255,255,0.12)`}}),(0,u.jsxs)(l.Box,{children:[(0,u.jsx)(l.Typography,{sx:{fontSize:`0.82rem`,fontWeight:700,opacity:.72,marginBottom:`6px`},children:de.roleNames}),(0,u.jsx)(l.Typography,{sx:{fontSize:`0.95rem`,fontWeight:600,lineHeight:1.45},children:i??`—`})]})]})]}):null,F?(0,u.jsxs)(l.Paper,{dir:`rtl`,elevation:0,onPointerDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),sx:{position:`fixed`,zIndex:1321,top:X.y,left:X.x,width:`${g}px`,height:`${Y}px`,maxHeight:`${Y}px`,display:`flex`,flexDirection:`column`,overflow:`hidden`,borderRadius:`22px`,padding:`14px 14px 16px`,backdropFilter:`blur(12px)`,background:b,border:`1px solid rgba(255,255,255,0.22)`,boxShadow:`0 12px 36px rgba(0,0,0,0.35)`,transformOrigin:W===`right`?`left top`:`right top`},children:[(0,u.jsx)(l.Typography,{sx:{fontSize:`1.02rem`,fontWeight:800,letterSpacing:`-0.02em`,marginBottom:`12px`,flexShrink:0},children:G.messages}),(0,u.jsx)(l.Box,{sx:{display:`flex`,flexDirection:`column`,gap:0,minHeight:0,flex:1,overflow:`auto`,pr:`2px`},children:x.length===0?(0,u.jsx)(l.Typography,{sx:{fontSize:`0.9rem`,opacity:.75,py:2,textAlign:`center`},children:`پیامی نیست`}):[...x].reverse().map(e=>(0,u.jsxs)(l.Box,{sx:{py:1.25,borderBottom:`1px solid rgba(255,255,255,0.1)`,"&:last-of-type":{borderBottom:`none`}},children:[e.at==null?null:(0,u.jsx)(l.Typography,{component:`div`,sx:{fontSize:`0.7rem`,fontWeight:600,opacity:.65,marginBottom:`4px`},children:new Date(e.at).toLocaleString()}),(0,u.jsx)(l.Typography,{sx:{fontSize:`0.93rem`,fontWeight:600,lineHeight:1.45,wordBreak:`break-word`},children:e.body})]},e.id))})]}):null,R&&!F&&$?(0,u.jsxs)(l.Box,{dir:`rtl`,sx:{position:`fixed`,zIndex:1328,left:$.left,bottom:$.bottom,width:$.width,maxHeight:$.maxBubbleHeight,display:`flex`,flexDirection:`column`,justifyContent:`flex-end`,pointerEvents:`none`},children:[(0,u.jsx)(l.Paper,{elevation:0,sx:{p:`10px 12px`,borderRadius:`14px`,backdropFilter:`blur(12px)`,background:b,border:`1px solid rgba(255,255,255,0.28)`,boxShadow:`0 14px 40px rgba(0,0,0,0.4)`,position:`relative`,flexShrink:1,minHeight:0},children:(0,u.jsx)(l.Typography,{sx:{fontSize:`0.88rem`,fontWeight:650,lineHeight:1.45,display:`-webkit-box`,WebkitLineClamp:4,WebkitBoxOrient:`vertical`,overflow:`hidden`,wordBreak:`break-word`},children:R.body})}),(0,u.jsx)(l.Box,{sx:{width:0,height:0,mx:`auto`,flexShrink:0,borderLeft:`9px solid transparent`,borderRight:`9px solid transparent`,borderTop:`9px solid rgba(255,255,255,0.14)`,filter:`drop-shadow(0 3px 8px rgba(0,0,0,0.22))`,mt:`-1px`}})]}):null,(0,u.jsxs)(l.Box,{role:`button`,"aria-label":q===`back`?`بازگشت به منو`:q===`close`?`بستن منو`:`باز کردن منو`,onPointerDown:ge,onPointerMove:_e,onPointerUp:ve,onPointerCancel:ye,sx:{position:`fixed`,width:`${h}px`,height:`${h}px`,borderRadius:`50%`,top:H.y-h/2,left:H.x-h/2,zIndex:1330,display:`flex`,alignItems:`center`,justifyContent:`center`,cursor:w.current?`grabbing`:`pointer`,userSelect:`none`,touchAction:`none`,background:xe,border:`1px solid rgba(255,255,255,0.28)`,boxShadow:`0 18px 60px rgba(0,0,0,0.45)`},children:[K>0?(0,u.jsx)(l.Box,{component:`span`,"aria-label":String(K),sx:{position:`absolute`,top:-2,right:-2,minWidth:22,height:22,px:.5,borderRadius:`11px`,bgcolor:`#f43f5e`,color:`#fff`,fontSize:`0.72rem`,fontWeight:800,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,lineHeight:1,border:`2px solid rgba(255,255,255,0.35)`,boxShadow:`0 4px 12px rgba(0,0,0,0.35)`,zIndex:2,pointerEvents:`none`},children:K>99?`99+`:K}):null,q===`back`?(0,u.jsx)(l.Box,{"aria-hidden":!0,component:`svg`,viewBox:`0 0 24 24`,sx:{width:`${h*.48}px`,height:`${h*.48}px`,flexShrink:0,display:`block`,color:`#fff`,opacity:.98,filter:`drop-shadow(0 2px 8px rgba(0,0,0,0.45))`,shapeRendering:`geometricPrecision`,transform:fe?`scaleX(-1)`:`none`},children:(0,u.jsx)(`path`,{fill:`currentColor`,d:`M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z`})}):q===`close`?(0,u.jsx)(l.Box,{"aria-hidden":!0,component:`svg`,viewBox:`0 0 24 24`,sx:{width:`${h*.46}px`,height:`${h*.46}px`,flexShrink:0,display:`block`,color:`#fff`,opacity:.98,filter:`drop-shadow(0 2px 8px rgba(0,0,0,0.45))`,shapeRendering:`geometricPrecision`},children:(0,u.jsx)(`path`,{fill:`currentColor`,d:`M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z`})}):(0,u.jsxs)(l.Box,{"aria-hidden":!0,component:`svg`,viewBox:`0 0 24 24`,sx:{width:`${h*.5}px`,height:`${h*.5}px`,flexShrink:0,display:`block`,color:`#fff`,opacity:.96,filter:`drop-shadow(0 2px 8px rgba(0,0,0,0.45))`,shapeRendering:`geometricPrecision`},children:[(0,u.jsx)(`defs`,{children:(0,u.jsxs)(`linearGradient`,{id:S,x1:`0%`,y1:`0%`,x2:`100%`,y2:`100%`,children:[(0,u.jsx)(`stop`,{offset:`0%`,stopColor:`#ffffff`,stopOpacity:`1`}),(0,u.jsx)(`stop`,{offset:`100%`,stopColor:`#e8eef8`,stopOpacity:`0.95`})]})}),(0,u.jsx)(`path`,{fill:`url(#${S})`,d:`M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z`})]})]})]})}exports.ActionButton=m,exports.DEFAULT_ACCENT_GRADIENT=p,exports.DEFAULT_MENU_SURFACE_BACKGROUND=ne;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { ActionButton } from './components/ActionButton/ActionButton';
|
|
2
|
-
export type { ActionButtonProps, ActionButtonMenuItemId } from './components/ActionButton/types';
|
|
1
|
+
export { ActionButton, DEFAULT_ACCENT_GRADIENT, DEFAULT_MENU_SURFACE_BACKGROUND } from './components/ActionButton/ActionButton';
|
|
2
|
+
export type { ActionButtonProps, ActionButtonMenuItemId, ActionButtonMessage } from './components/ActionButton/types';
|