@pieai/swimmer-ui-kit 3.0.0 → 3.2.0
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/CHANGELOG.md +25 -2
- package/README.md +3 -3
- package/dist/GameAvatar-Cs5KVYFf.js +923 -0
- package/dist/GameStageTile-BtBb8NEw.js +687 -0
- package/dist/{LiquidGroup-BXw1tv9H.js → LiquidGroup-RTK_Uvgw.js} +845 -376
- package/dist/index.d.ts +66 -1
- package/dist/index.js +520 -313
- package/dist/liquid-effects.js +36 -37
- package/dist/liquid-presence.d.ts +48 -0
- package/dist/liquid-presence.js +584 -413
- package/dist/preview.js +132 -132
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/GameStageTile-DwU_Vvi8.js +0 -1597
- package/dist/reducedMotion-B8kv-v64.js +0 -473
package/dist/liquid-presence.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
2
|
+
import { C as e, a as t, b as n, g as r, m as i, o as a, p as o, v as s, x as c } from "./LiquidGroup-RTK_Uvgw.js";
|
|
3
|
+
import { i as l, n as u, o as d, r as f, s as p, t as m } from "./GameAvatar-Cs5KVYFf.js";
|
|
4
|
+
import { useCallback as h, useEffect as g, useId as _, useLayoutEffect as v, useRef as y, useState as b } from "react";
|
|
5
|
+
import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
|
|
6
|
+
import { createPortal as w } from "react-dom";
|
|
7
|
+
import { FloatingPortal as T, autoUpdate as E, computePosition as D, flip as O, hide as k, offset as A, shift as ee, size as te } from "@floating-ui/react";
|
|
7
8
|
//#region src/liquid/material/light.ts
|
|
8
|
-
var
|
|
9
|
-
[0, `color-mix(in srgb, ${
|
|
10
|
-
[.16, `color-mix(in srgb, ${
|
|
11
|
-
[.5, `color-mix(in srgb, ${
|
|
12
|
-
[1, `color-mix(in srgb, ${
|
|
9
|
+
var j = "var(--liquid-presence-from, var(--game-ui-cta-from))", M = "var(--liquid-presence-to, var(--game-ui-cta-to))", ne = [
|
|
10
|
+
[0, `color-mix(in srgb, ${j}, white 30%)`],
|
|
11
|
+
[.16, `color-mix(in srgb, ${j}, white 15%)`],
|
|
12
|
+
[.5, `color-mix(in srgb, ${j}, ${M})`],
|
|
13
|
+
[1, `color-mix(in srgb, ${M}, black 5%)`]
|
|
13
14
|
];
|
|
14
|
-
function
|
|
15
|
+
function N(e, t, n) {
|
|
15
16
|
return Number.isFinite(e) ? Math.max(t, Math.min(n, e)) : t;
|
|
16
17
|
}
|
|
17
|
-
function
|
|
18
|
+
function P(e) {
|
|
18
19
|
return !!(e && [
|
|
19
20
|
e.x,
|
|
20
21
|
e.y,
|
|
@@ -22,23 +23,23 @@ function j(e) {
|
|
|
22
23
|
e.height
|
|
23
24
|
].every(Number.isFinite) && e.width > 0 && e.height > 0);
|
|
24
25
|
}
|
|
25
|
-
function
|
|
26
|
-
return
|
|
26
|
+
function re(e, t) {
|
|
27
|
+
return P(e) && e.x + e.width > t.x && e.y + e.height > t.y && e.x < t.x + t.width && e.y < t.y + t.height;
|
|
27
28
|
}
|
|
28
|
-
function
|
|
29
|
+
function ie(e) {
|
|
29
30
|
return {
|
|
30
31
|
x: e.x + e.width / 2,
|
|
31
32
|
y: e.y + e.height / 2
|
|
32
33
|
};
|
|
33
34
|
}
|
|
34
|
-
function
|
|
35
|
+
function F(e, t) {
|
|
35
36
|
let n = Math.hypot(t.x - e.x, t.y - e.y) || 1;
|
|
36
37
|
return {
|
|
37
38
|
x: (t.x - e.x) / n,
|
|
38
39
|
y: (t.y - e.y) / n
|
|
39
40
|
};
|
|
40
41
|
}
|
|
41
|
-
function
|
|
42
|
+
function ae(e, t) {
|
|
42
43
|
let n = Math.max(e.x, t.x), r = Math.max(e.y, t.y);
|
|
43
44
|
return {
|
|
44
45
|
x: n,
|
|
@@ -47,19 +48,19 @@ function ne(e, t) {
|
|
|
47
48
|
height: Math.max(0, Math.min(e.y + e.height, t.y + t.height) - r)
|
|
48
49
|
};
|
|
49
50
|
}
|
|
50
|
-
function
|
|
51
|
-
let n = e.y + e.height + 88 < t.y + t.height, r = n ? "bottom" : "top", i = Math.max(t.x + 18, e.x), a = Math.min(t.x + t.width - 18, e.x + e.width), o =
|
|
51
|
+
function oe(e, t) {
|
|
52
|
+
let n = e.y + e.height + 88 < t.y + t.height, r = n ? "bottom" : "top", i = Math.max(t.x + 18, e.x), a = Math.min(t.x + t.width - 18, e.x + e.width), o = N(Math.max(0, a - i) * .58, 36, 84);
|
|
52
53
|
return {
|
|
53
|
-
x:
|
|
54
|
-
y:
|
|
54
|
+
x: N((i + a) / 2, t.x + o / 2 + 8, t.x + t.width - o / 2 - 8),
|
|
55
|
+
y: N(n ? e.y + e.height + 10 : e.y - 10, t.y + 18, t.y + t.height - 18),
|
|
55
56
|
side: r,
|
|
56
57
|
width: o
|
|
57
58
|
};
|
|
58
59
|
}
|
|
59
|
-
function
|
|
60
|
-
let i =
|
|
61
|
-
x:
|
|
62
|
-
y:
|
|
60
|
+
function I(e, t, n, r) {
|
|
61
|
+
let i = N(n, 0, 1), a = F(e, t), o = Math.min(86, Math.hypot(t.x - e.x, t.y - e.y) * .2), s = {
|
|
62
|
+
x: N((e.x + t.x) / 2 + a.y * o, r.x + 16, r.x + r.width - 16),
|
|
63
|
+
y: N((e.y + t.y) / 2 - a.x * o, r.y + 16, r.y + r.height - 16)
|
|
63
64
|
}, c = 2 * (1 - i) * (s.x - e.x) + 2 * i * (t.x - s.x), l = 2 * (1 - i) * (s.y - e.y) + 2 * i * (t.y - s.y);
|
|
64
65
|
return {
|
|
65
66
|
x: (1 - i) ** 2 * e.x + 2 * (1 - i) * i * s.x + i ** 2 * t.x,
|
|
@@ -67,51 +68,51 @@ function N(e, t, n, r) {
|
|
|
67
68
|
angle: Math.atan2(l, c) * 180 / Math.PI
|
|
68
69
|
};
|
|
69
70
|
}
|
|
70
|
-
function
|
|
71
|
-
let
|
|
72
|
-
return
|
|
71
|
+
function L(e = 0, t = 0, n = 0, r = 1, i = 0) {
|
|
72
|
+
let a = N(i, 0, 1), s = 66 * Math.sqrt(1 - .075 * N(n, 0, 1)) - a * 2.4;
|
|
73
|
+
return o(80 - s, 80 - s, s * 2, s * 2, [
|
|
73
74
|
s,
|
|
74
75
|
s,
|
|
75
76
|
s,
|
|
76
77
|
s
|
|
77
78
|
], {
|
|
78
|
-
amplitude: (3.5 +
|
|
79
|
+
amplitude: (3.5 + a * 9 + N(t, 0, 1) * 9) * N(r, .15, 1.25),
|
|
79
80
|
lobes: 3,
|
|
80
81
|
seed: 17,
|
|
81
|
-
phase:
|
|
82
|
+
phase: e
|
|
82
83
|
});
|
|
83
84
|
}
|
|
84
|
-
function
|
|
85
|
-
let
|
|
86
|
-
return
|
|
85
|
+
function R(e, t, n = 20) {
|
|
86
|
+
let r = N(t, 0, 1), i = N(n, 6, 48), a = i + (e - i) * r, s = i + (8 - i) * r;
|
|
87
|
+
return o(-a / 2, -s / 2, a, s, [
|
|
87
88
|
s / 2,
|
|
88
89
|
s / 2,
|
|
89
90
|
s / 2,
|
|
90
91
|
s / 2
|
|
91
92
|
], {
|
|
92
93
|
amplitude: 2.2,
|
|
93
|
-
phase:
|
|
94
|
+
phase: r * Math.PI,
|
|
94
95
|
seed: 17,
|
|
95
96
|
lobes: 3
|
|
96
97
|
});
|
|
97
98
|
}
|
|
98
99
|
//#endregion
|
|
99
100
|
//#region src/presence/LiquidReveal/geometry.ts
|
|
100
|
-
function
|
|
101
|
-
let s = Math.max(44,
|
|
101
|
+
function z(e, t, n, r = 0, a = 1) {
|
|
102
|
+
let s = Math.max(44, e), c = Math.max(44, t), l = Math.min(28, (s - 12) / 2, (c - 12) / 2), u = o(6, 6, s - 12, c - 12, [
|
|
102
103
|
l,
|
|
103
104
|
l,
|
|
104
105
|
l,
|
|
105
106
|
l
|
|
106
107
|
], {
|
|
107
|
-
amplitude: (
|
|
108
|
+
amplitude: (n ? 8 : 11) * Math.min(1.25, Math.max(.25, Number.isFinite(a) ? a : 1)),
|
|
108
109
|
lobes: 3,
|
|
109
110
|
seed: 17,
|
|
110
|
-
phase:
|
|
111
|
+
phase: r
|
|
111
112
|
}), d = Math.max(0, l - 2.5);
|
|
112
113
|
return {
|
|
113
114
|
outline: u,
|
|
114
|
-
ribbon: `${u} ${
|
|
115
|
+
ribbon: `${u} ${i(8.5, 8.5, s - 17, c - 17, [
|
|
115
116
|
d,
|
|
116
117
|
d,
|
|
117
118
|
d,
|
|
@@ -121,93 +122,93 @@ function I(t, r, i, a = 0, o = 1) {
|
|
|
121
122
|
}
|
|
122
123
|
//#endregion
|
|
123
124
|
//#region src/liquid/ambientClock.ts
|
|
124
|
-
var
|
|
125
|
-
function
|
|
126
|
-
if (
|
|
127
|
-
let e = Math.min(...[...
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
125
|
+
var B = /* @__PURE__ */ new Map(), V, H, U = !1;
|
|
126
|
+
function W() {
|
|
127
|
+
if (U || H !== void 0 || (clearTimeout(V), V = void 0, !B.size)) return;
|
|
128
|
+
let e = Math.min(...[...B.values()].map((e) => e.at));
|
|
129
|
+
V = setTimeout(() => {
|
|
130
|
+
V = void 0, H = requestAnimationFrame((e) => {
|
|
131
|
+
H = void 0, U = !0;
|
|
131
132
|
try {
|
|
132
|
-
for (let [t, n] of [...
|
|
133
|
+
for (let [t, n] of [...B]) n.at > e + 1 || !B.has(t) || (B.delete(t), n.paint(e));
|
|
133
134
|
} finally {
|
|
134
|
-
|
|
135
|
+
U = !1, W();
|
|
135
136
|
}
|
|
136
137
|
});
|
|
137
138
|
}, Math.max(0, e - performance.now()));
|
|
138
139
|
}
|
|
139
|
-
function
|
|
140
|
+
function se(e, t = 1e3 / 12) {
|
|
140
141
|
let n = Symbol();
|
|
141
|
-
return
|
|
142
|
+
return B.set(n, {
|
|
142
143
|
at: performance.now() + t,
|
|
143
144
|
paint: e
|
|
144
|
-
}),
|
|
145
|
-
|
|
145
|
+
}), W(), () => {
|
|
146
|
+
B.delete(n), !B.size && H !== void 0 && (cancelAnimationFrame(H), H = void 0), W();
|
|
146
147
|
};
|
|
147
148
|
}
|
|
148
149
|
//#endregion
|
|
149
150
|
//#region src/presence/LiquidReveal/useAmbient.ts
|
|
150
|
-
function
|
|
151
|
-
let
|
|
152
|
-
return
|
|
153
|
-
let
|
|
154
|
-
if (!
|
|
155
|
-
|
|
151
|
+
function G(t, r, i, a, o, s = 1, l = 1) {
|
|
152
|
+
let u = y(0);
|
|
153
|
+
return g(() => {
|
|
154
|
+
let d = t.current;
|
|
155
|
+
if (!d || !r || !i || !a) {
|
|
156
|
+
d && (d.dataset.revealAmbient = "static");
|
|
156
157
|
return;
|
|
157
158
|
}
|
|
158
|
-
let f = !0, p = !0, m = performance.now(), h = () => {}, g =
|
|
159
|
+
let f = !0, p = !0, m = performance.now(), h = () => {}, g = d.querySelector("[data-reveal-outline]"), _ = d.querySelector("[data-reveal-body]"), v = d.querySelector("[data-reveal-ribbon]"), y = (i + 24) * (a + 24), b = (t) => {
|
|
159
160
|
if (!f || !p || document.hidden) return;
|
|
160
|
-
let
|
|
161
|
-
m =
|
|
162
|
-
let x = document.querySelector("dialog:modal"), S = x && !x.contains(
|
|
163
|
-
if (S || C.activeGroups > 0 || !
|
|
164
|
-
|
|
161
|
+
let r = Math.min(160, Math.max(0, t - m));
|
|
162
|
+
m = t;
|
|
163
|
+
let x = document.querySelector("dialog:modal"), S = x && !x.contains(d) || ["drawing", "preparing"].includes(d.dataset.revealMotion ?? ""), C = n();
|
|
164
|
+
if (S || C.activeGroups > 0 || !e(y)) {
|
|
165
|
+
d.dataset.revealAmbient = "paused", h = se(b, 250);
|
|
165
166
|
return;
|
|
166
167
|
}
|
|
167
168
|
try {
|
|
168
|
-
|
|
169
|
-
let e =
|
|
170
|
-
g?.setAttribute("d", e.outline), _?.setAttribute("d", e.outline), v?.setAttribute("d", e.ribbon),
|
|
169
|
+
u.current += r * Math.PI * 2 * l / 1e4;
|
|
170
|
+
let e = z(i, a, o, u.current, s);
|
|
171
|
+
g?.setAttribute("d", e.outline), _?.setAttribute("d", e.outline), v?.setAttribute("d", e.ribbon), d.dataset.revealAmbient = "flowing";
|
|
171
172
|
} finally {
|
|
172
173
|
c();
|
|
173
174
|
}
|
|
174
|
-
h =
|
|
175
|
+
h = se(b);
|
|
175
176
|
}, x = () => {
|
|
176
|
-
h(), m = performance.now(),
|
|
177
|
+
h(), m = performance.now(), d.dataset.revealAmbient = "paused", p && !document.hidden && (h = se(b));
|
|
177
178
|
}, S = typeof IntersectionObserver > "u" ? null : new IntersectionObserver((e) => {
|
|
178
179
|
p = e[0]?.isIntersecting ?? !1, x();
|
|
179
180
|
});
|
|
180
|
-
return S?.observe(
|
|
181
|
-
f = !1, h(), S?.disconnect(), document.removeEventListener("visibilitychange", x),
|
|
181
|
+
return S?.observe(d), document.addEventListener("visibilitychange", x), x(), () => {
|
|
182
|
+
f = !1, h(), S?.disconnect(), document.removeEventListener("visibilitychange", x), d.dataset.revealAmbient = "static";
|
|
182
183
|
};
|
|
183
184
|
}, [
|
|
184
|
-
e,
|
|
185
185
|
t,
|
|
186
|
-
n,
|
|
187
186
|
r,
|
|
188
187
|
i,
|
|
189
188
|
a,
|
|
189
|
+
o,
|
|
190
|
+
s,
|
|
190
191
|
l
|
|
191
|
-
]),
|
|
192
|
+
]), u;
|
|
192
193
|
}
|
|
193
194
|
//#endregion
|
|
194
195
|
//#region src/presence/LiquidReveal/entranceGeometry.ts
|
|
195
|
-
var
|
|
196
|
+
var K = (e) => {
|
|
196
197
|
let t = Math.min(1, Math.max(0, e));
|
|
197
198
|
return t * t * t * (10 + t * (-15 + 6 * t));
|
|
198
199
|
};
|
|
199
|
-
function
|
|
200
|
-
let c =
|
|
200
|
+
function ce(e, t, n, r, i, a, s = 1) {
|
|
201
|
+
let c = z(e, t, n, 0, s).outline;
|
|
201
202
|
return Array.from({ length: 49 }, (l, u) => {
|
|
202
|
-
let d = u / 48, f =
|
|
203
|
+
let d = u / 48, f = K((d - .08) / .34), p = I(r, i, f, a), m = K((d - .39) / .46), h = K((d - .47) / .46), g = K((d - .3) / .14) * (1 - m), _ = 8 + 20 * K(d / .15) + 10 * g, v = 1 + Math.sin(f * Math.PI) * .35, y = i.x - r.x, b = i.y - r.y, x = Math.abs(y) > Math.abs(b), S = _ * (x ? v : 1 / Math.sqrt(v)), C = _ * (x ? 1 / Math.sqrt(v) : v), w = S + (e - 12 - S) * m, T = C + (t - 12 - C) * h, E = (p.x - S / 2) * (1 - m) + 6 * m, D = (p.y - C / 2) * (1 - h) + 6 * h, O = Math.min(w / 2, T / 2, 28 + 12 * (1 - h));
|
|
203
204
|
return {
|
|
204
|
-
d: `path("${d >= .95 ? c :
|
|
205
|
+
d: `path("${d >= .95 ? c : o(E, D, w, T, [
|
|
205
206
|
O,
|
|
206
207
|
O,
|
|
207
208
|
O,
|
|
208
209
|
O
|
|
209
210
|
], {
|
|
210
|
-
amplitude: 1.2 + ((
|
|
211
|
+
amplitude: 1.2 + ((n ? 8 : 11) * s - 1.2) * h,
|
|
211
212
|
seed: 17,
|
|
212
213
|
lobes: 3,
|
|
213
214
|
phase: 0
|
|
@@ -218,16 +219,16 @@ function W(t, n, r, i, a, o, s = 1) {
|
|
|
218
219
|
}
|
|
219
220
|
//#endregion
|
|
220
221
|
//#region src/presence/LiquidReveal/useEntrance.ts
|
|
221
|
-
function
|
|
222
|
-
let d =
|
|
223
|
-
|
|
224
|
-
let f =
|
|
222
|
+
function le(t, n, r, i, a, o, s, l, u = 1) {
|
|
223
|
+
let d = y(null);
|
|
224
|
+
v(() => {
|
|
225
|
+
let f = t.current;
|
|
225
226
|
if (!f) return;
|
|
226
|
-
if (!
|
|
227
|
-
d.current =
|
|
227
|
+
if (!n || o || f.contains(document.activeElement) || window.matchMedia("(forced-colors: active)").matches) {
|
|
228
|
+
d.current = r, f.dataset.revealMotion = "static";
|
|
228
229
|
return;
|
|
229
230
|
}
|
|
230
|
-
if (d.current ===
|
|
231
|
+
if (d.current === r || (f.dataset.revealMotion = "preparing", !i || !a)) return;
|
|
231
232
|
let p = !0, m = !1, h = !1, g = 0, _ = 0, v = [], y = () => {
|
|
232
233
|
v.forEach((e) => e.cancel()), v.length = 0, m && c(), m = !1, f.dataset.revealMotion = h ? "settled" : "static";
|
|
233
234
|
}, b = () => {
|
|
@@ -240,26 +241,26 @@ function G(e, t, n, r, i, a, o, l, u = 1) {
|
|
|
240
241
|
y();
|
|
241
242
|
return;
|
|
242
243
|
}
|
|
243
|
-
let
|
|
244
|
-
if (d.current =
|
|
244
|
+
let t = n.current?.getBoundingClientRect(), o = f.getBoundingClientRect(), c = f.querySelector("[data-reveal-body]"), x = f.querySelector("[data-reveal-material]"), S = f.querySelector(".game-ui-liquid-reveal-content");
|
|
245
|
+
if (d.current = r, f.contains(document.activeElement) || !t || !P(t) || document.hidden || typeof f.animate != "function" || !e((i + 24) * (a + 24))) {
|
|
245
246
|
y();
|
|
246
247
|
return;
|
|
247
248
|
}
|
|
248
249
|
m = !0, h = !0, f.dataset.revealMotion = "drawing";
|
|
249
|
-
let C =
|
|
250
|
-
x: (
|
|
251
|
-
y: (
|
|
250
|
+
let C = o.width / i || 1, w = o.height / a || 1, T = {
|
|
251
|
+
x: (t.x + t.width / 2 - o.x) / C,
|
|
252
|
+
y: (t.y + t.height / 2 - o.y) / w
|
|
252
253
|
}, E = {
|
|
253
|
-
x: Math.min(
|
|
254
|
-
y: T.y >
|
|
254
|
+
x: Math.min(i - 28, Math.max(28, T.x)),
|
|
255
|
+
y: T.y > a / 2 ? a - 28 : 28
|
|
255
256
|
}, D = {
|
|
256
|
-
x: -
|
|
257
|
-
y: -
|
|
257
|
+
x: -o.x / C,
|
|
258
|
+
y: -o.y / w,
|
|
258
259
|
width: innerWidth / C,
|
|
259
260
|
height: innerHeight / w
|
|
260
261
|
};
|
|
261
|
-
if (
|
|
262
|
-
let e =
|
|
262
|
+
if (s && c && CSS.supports("d", "path(\"M0 0L1 1Z\")")) {
|
|
263
|
+
let e = ce(i, a, l, T, E, D, u);
|
|
263
264
|
v.push(c.animate(e, {
|
|
264
265
|
duration: 720,
|
|
265
266
|
fill: "both",
|
|
@@ -290,7 +291,7 @@ function G(e, t, n, r, i, a, o, l, u = 1) {
|
|
|
290
291
|
fill: "both"
|
|
291
292
|
}));
|
|
292
293
|
} else x && v.push(x.animate([{ opacity: .2 }, { opacity: 1 }], { duration: 180 }));
|
|
293
|
-
let O =
|
|
294
|
+
let O = n.current?.querySelector(".game-ui-liquid-presence > svg");
|
|
294
295
|
O && v.push(O.animate([
|
|
295
296
|
{ transform: "scale(1)" },
|
|
296
297
|
{
|
|
@@ -317,25 +318,25 @@ function G(e, t, n, r, i, a, o, l, u = 1) {
|
|
|
317
318
|
p = !1, x(), f.removeEventListener("focusin", x), f.removeEventListener("pointerdown", x, !0), document.removeEventListener("visibilitychange", S), window.removeEventListener("resize", x), window.removeEventListener("scroll", x, !0);
|
|
318
319
|
};
|
|
319
320
|
}, [
|
|
320
|
-
e,
|
|
321
321
|
t,
|
|
322
322
|
n,
|
|
323
323
|
r,
|
|
324
324
|
i,
|
|
325
325
|
a,
|
|
326
326
|
o,
|
|
327
|
+
s,
|
|
327
328
|
l,
|
|
328
329
|
u
|
|
329
330
|
]);
|
|
330
331
|
}
|
|
331
332
|
//#endregion
|
|
332
333
|
//#region src/presence/LiquidReveal/LiquidReveal.tsx
|
|
333
|
-
function
|
|
334
|
-
let
|
|
334
|
+
function q({ children: e, source: i, revealKey: a = "initial", variant: o = "content", reducedMotion: c, idleMotion: l = "still", colorFrom: u, colorTo: d, motionIntensity: f = 1, motionSpeed: p = 1, className: m = "" }) {
|
|
335
|
+
let h = t() || c === !0, g = N(f, .25, 1.25), x = N(p, .5, 1.5), w = y(null), [T, E] = b({
|
|
335
336
|
width: 0,
|
|
336
337
|
height: 0
|
|
337
|
-
}), D = `liquid-reveal-${
|
|
338
|
-
|
|
338
|
+
}), D = `liquid-reveal-${_().replace(/[^a-zA-Z0-9_-]/g, "")}`;
|
|
339
|
+
v(() => {
|
|
339
340
|
let e = w.current;
|
|
340
341
|
if (!e) return;
|
|
341
342
|
let t = () => {
|
|
@@ -348,67 +349,67 @@ function K({ children: e, source: n, revealKey: r = "initial", variant: s = "con
|
|
|
348
349
|
t();
|
|
349
350
|
let n = new ResizeObserver(t);
|
|
350
351
|
return n.observe(e), () => n.disconnect();
|
|
351
|
-
}, []),
|
|
352
|
-
let O = Math.max(44, T.width),
|
|
353
|
-
return /* @__PURE__ */
|
|
352
|
+
}, []), le(w, i, a, T.width, T.height, h, !0, o === "input", g);
|
|
353
|
+
let O = Math.max(44, T.width), k = Math.max(44, T.height), A = G(w, !h && l === "breathe", T.width, T.height, o === "input", g, x), ee = z(O, k, o === "input", A.current, g), te = (O + 24) * (k + 24) <= n().maxFilterArea;
|
|
354
|
+
return /* @__PURE__ */ C("div", {
|
|
354
355
|
ref: w,
|
|
355
|
-
className: `game-ui-liquid-reveal ${
|
|
356
|
+
className: `game-ui-liquid-reveal ${m}`,
|
|
356
357
|
style: {
|
|
357
358
|
...u ? { "--liquid-presence-from": u } : {},
|
|
358
|
-
...
|
|
359
|
+
...d ? { "--liquid-presence-to": d } : {}
|
|
359
360
|
},
|
|
360
|
-
"data-reveal-variant":
|
|
361
|
+
"data-reveal-variant": o,
|
|
361
362
|
"data-reveal-surface": "material",
|
|
362
|
-
"data-reveal-filter":
|
|
363
|
-
children: [/* @__PURE__ */
|
|
363
|
+
"data-reveal-filter": te ? "volume" : "flat",
|
|
364
|
+
children: [/* @__PURE__ */ S("div", {
|
|
364
365
|
className: "game-ui-liquid-reveal-content",
|
|
365
366
|
children: e
|
|
366
|
-
}), T.width > 0 && /* @__PURE__ */
|
|
367
|
+
}), T.width > 0 && /* @__PURE__ */ C("svg", {
|
|
367
368
|
className: "game-ui-liquid-reveal-ink",
|
|
368
369
|
width: O,
|
|
369
|
-
height:
|
|
370
|
-
viewBox: `0 0 ${O} ${
|
|
370
|
+
height: k,
|
|
371
|
+
viewBox: `0 0 ${O} ${k}`,
|
|
371
372
|
"aria-hidden": "true",
|
|
372
373
|
focusable: "false",
|
|
373
374
|
children: [
|
|
374
|
-
/* @__PURE__ */
|
|
375
|
+
/* @__PURE__ */ C("defs", { children: [/* @__PURE__ */ S("linearGradient", {
|
|
375
376
|
id: `${D}-fill`,
|
|
376
377
|
x1: "0",
|
|
377
378
|
y1: "0",
|
|
378
379
|
x2: "0",
|
|
379
380
|
y2: "1",
|
|
380
|
-
children:
|
|
381
|
+
children: ne.map(([e, t]) => /* @__PURE__ */ S("stop", {
|
|
381
382
|
offset: e,
|
|
382
383
|
style: { stopColor: t }
|
|
383
384
|
}, e))
|
|
384
|
-
}), /* @__PURE__ */
|
|
385
|
+
}), /* @__PURE__ */ S("filter", {
|
|
385
386
|
id: `${D}-finish`,
|
|
386
387
|
x: "-12",
|
|
387
388
|
y: "-12",
|
|
388
389
|
width: O + 24,
|
|
389
|
-
height:
|
|
390
|
+
height: k + 24,
|
|
390
391
|
filterUnits: "userSpaceOnUse",
|
|
391
392
|
colorInterpolationFilters: "sRGB",
|
|
392
|
-
children: /* @__PURE__ */
|
|
393
|
-
blur:
|
|
394
|
-
contrast:
|
|
395
|
-
gloss:
|
|
393
|
+
children: /* @__PURE__ */ S(r, {
|
|
394
|
+
blur: s.blur,
|
|
395
|
+
contrast: s.contrast,
|
|
396
|
+
gloss: s.gloss,
|
|
396
397
|
shadows: [],
|
|
397
398
|
stroke: null,
|
|
398
399
|
waviness: 0
|
|
399
400
|
})
|
|
400
401
|
})] }),
|
|
401
|
-
/* @__PURE__ */
|
|
402
|
+
/* @__PURE__ */ S("path", {
|
|
402
403
|
"data-reveal-body": "",
|
|
403
|
-
d:
|
|
404
|
+
d: ee.outline,
|
|
404
405
|
fill: `url(#${D}-fill)`
|
|
405
406
|
}),
|
|
406
|
-
/* @__PURE__ */
|
|
407
|
+
/* @__PURE__ */ S("g", {
|
|
407
408
|
"data-reveal-material": "",
|
|
408
|
-
filter:
|
|
409
|
-
children: /* @__PURE__ */
|
|
409
|
+
filter: te ? `url(#${D}-finish)` : void 0,
|
|
410
|
+
children: /* @__PURE__ */ S("path", {
|
|
410
411
|
"data-reveal-outline": "",
|
|
411
|
-
d:
|
|
412
|
+
d: ee.outline,
|
|
412
413
|
fill: `url(#${D}-fill)`
|
|
413
414
|
})
|
|
414
415
|
})
|
|
@@ -418,15 +419,15 @@ function K({ children: e, source: n, revealKey: r = "initial", variant: s = "con
|
|
|
418
419
|
}
|
|
419
420
|
//#endregion
|
|
420
421
|
//#region src/presence/motion.ts
|
|
421
|
-
var
|
|
422
|
-
function
|
|
422
|
+
var J = a("cubic-bezier(0.45, 0, 0.2, 1)");
|
|
423
|
+
function ue(e) {
|
|
423
424
|
let { source: t, destination: n, viewport: r, returning: i = !1, from: a, origin: o } = e, s = o?.seat == null ? 0 : 180;
|
|
424
425
|
if (s && e.elapsed < s) return {
|
|
425
426
|
...o,
|
|
426
427
|
phase: "gather",
|
|
427
|
-
seat: o.seat * (1 -
|
|
428
|
+
seat: o.seat * (1 - J(N(e.elapsed / s, 0, 1)))
|
|
428
429
|
};
|
|
429
|
-
let c = Math.max(0, e.elapsed - s), l =
|
|
430
|
+
let c = Math.max(0, e.elapsed - s), l = ie(t), u = F(l, n), d = Math.atan2(u.y, u.x) * 180 / Math.PI, f = t.width / 160, p = {
|
|
430
431
|
x: l.x + u.x * 112 * f,
|
|
431
432
|
y: l.y + u.y * 112 * f
|
|
432
433
|
}, m = {
|
|
@@ -441,7 +442,7 @@ function ae(e) {
|
|
|
441
442
|
};
|
|
442
443
|
if (i) {
|
|
443
444
|
if (o?.bud) {
|
|
444
|
-
let e =
|
|
445
|
+
let e = J(N(c / 320, 0, 1)), t = o.bud.x + (80 - o.bud.x) * e, n = o.bud.y + (80 - o.bud.y) * e;
|
|
445
446
|
return {
|
|
446
447
|
...m,
|
|
447
448
|
phase: e < 1 ? "merge" : "still",
|
|
@@ -457,9 +458,9 @@ function ae(e) {
|
|
|
457
458
|
} : null
|
|
458
459
|
};
|
|
459
460
|
}
|
|
460
|
-
let e =
|
|
461
|
+
let e = N(c / 620, 0, 1);
|
|
461
462
|
if (e < 1) {
|
|
462
|
-
let t =
|
|
463
|
+
let t = I(a ?? n, p, J(e), r);
|
|
463
464
|
return {
|
|
464
465
|
...m,
|
|
465
466
|
phase: "return",
|
|
@@ -469,11 +470,11 @@ function ae(e) {
|
|
|
469
470
|
stretch: 1 + .3 * Math.sin(e * Math.PI)
|
|
470
471
|
};
|
|
471
472
|
}
|
|
472
|
-
let t =
|
|
473
|
+
let t = N((c - 620) / 420, 0, 1), i = 112 - 78 * J(t);
|
|
473
474
|
return {
|
|
474
475
|
...m,
|
|
475
476
|
phase: t < 1 ? "merge" : "still",
|
|
476
|
-
separation: 1 -
|
|
477
|
+
separation: 1 - J(t),
|
|
477
478
|
point: {
|
|
478
479
|
x: l.x + u.x * i * f,
|
|
479
480
|
y: l.y + u.y * i * f
|
|
@@ -481,13 +482,13 @@ function ae(e) {
|
|
|
481
482
|
bud: t < 1 ? {
|
|
482
483
|
x: 80 + u.x * i,
|
|
483
484
|
y: 80 + u.y * i,
|
|
484
|
-
radius: 16 * (1 - .65 *
|
|
485
|
+
radius: 16 * (1 - .65 * J(t))
|
|
485
486
|
} : null
|
|
486
487
|
};
|
|
487
488
|
}
|
|
488
489
|
let h = o?.phase === "split" ? o.bud : null, g = h ? o.separation : 0, _ = h ? Math.max(180, 460 * (1 - g)) : a ? 0 : 460;
|
|
489
490
|
if (c < _) {
|
|
490
|
-
let e =
|
|
491
|
+
let e = J(c / _), t = 42 + 70 * e, n = h ? h.x + (80 + u.x * 112 - h.x) * e : 80 + u.x * t, r = h ? h.y + (80 + u.y * 112 - h.y) * e : 80 + u.y * t, i = h?.radius ?? 16 * .55;
|
|
491
492
|
return {
|
|
492
493
|
...m,
|
|
493
494
|
phase: "split",
|
|
@@ -503,9 +504,9 @@ function ae(e) {
|
|
|
503
504
|
}
|
|
504
505
|
};
|
|
505
506
|
}
|
|
506
|
-
let v = a ?? p, y = 560 + Math.min(260, Math.hypot(n.x - v.x, n.y - v.y) * .26), b =
|
|
507
|
+
let v = a ?? p, y = 560 + Math.min(260, Math.hypot(n.x - v.x, n.y - v.y) * .26), b = N((c - _) / y, 0, 1);
|
|
507
508
|
if (b < 1) {
|
|
508
|
-
let e =
|
|
509
|
+
let e = I(v, n, J(b), r);
|
|
509
510
|
return {
|
|
510
511
|
...m,
|
|
511
512
|
phase: "flight",
|
|
@@ -515,54 +516,54 @@ function ae(e) {
|
|
|
515
516
|
stretch: 1 + .35 * Math.sin(b * Math.PI)
|
|
516
517
|
};
|
|
517
518
|
}
|
|
518
|
-
let x =
|
|
519
|
+
let x = N((c - _ - y) / 380, 0, 1);
|
|
519
520
|
return {
|
|
520
521
|
...m,
|
|
521
522
|
phase: x < 1 ? "land" : "dock",
|
|
522
523
|
separation: 1,
|
|
523
524
|
point: n,
|
|
524
|
-
seat:
|
|
525
|
+
seat: J(x)
|
|
525
526
|
};
|
|
526
527
|
}
|
|
527
528
|
//#endregion
|
|
528
529
|
//#region src/presence/paint.ts
|
|
529
|
-
function
|
|
530
|
+
function Y(e, t) {
|
|
530
531
|
e.toggleAttribute("hidden", !t);
|
|
531
532
|
let n = e.style, r = t ? "" : "none";
|
|
532
533
|
n.display !== r && (n.display = r);
|
|
533
534
|
}
|
|
534
|
-
var
|
|
535
|
+
var X = (e, t, n) => {
|
|
535
536
|
let r = String(n);
|
|
536
537
|
e.getAttribute(t) !== r && e.setAttribute(t, r);
|
|
537
538
|
};
|
|
538
|
-
function
|
|
539
|
+
function de(e, t, n) {
|
|
539
540
|
let r = e.overlay.getBoundingClientRect(), i = r.width / (e.overlay.clientWidth || r.width || 1) || 1, a = r.height / (e.overlay.clientHeight || r.height || 1) || 1;
|
|
540
541
|
return {
|
|
541
542
|
x: (t - r.x) / i,
|
|
542
543
|
y: (n - r.y) / a
|
|
543
544
|
};
|
|
544
545
|
}
|
|
545
|
-
function
|
|
546
|
-
|
|
546
|
+
function fe(e, t, n, r, i = 0, a = 1, o = !1, s = 0) {
|
|
547
|
+
X(e.source, "data-liquid-phase", t.phase), X(e.overlay, "data-liquid-phase", t.phase), X(e.body, "d", L(r, i, t.separation, a, s));
|
|
547
548
|
let c = t.bud ? Math.sin(t.separation * Math.PI) * .045 : 0;
|
|
548
|
-
|
|
549
|
+
X(e.body, "transform", `translate(${((t.bud?.x ?? 80) - 80) * c} ${((t.bud?.y ?? 80) - 80) * c})`), Y(e.bud, !!t.bud), t.bud && (X(e.bud, "cx", t.bud.x), X(e.bud, "cy", t.bud.y), X(e.bud, "r", t.bud.radius));
|
|
549
550
|
let l = t.phase === "flight" || t.phase === "return";
|
|
550
|
-
|
|
551
|
-
let u =
|
|
551
|
+
Y(e.flight, l);
|
|
552
|
+
let u = de(e, t.point.x, t.point.y);
|
|
552
553
|
if (l) {
|
|
553
554
|
let n = t.diameter / 32;
|
|
554
|
-
e.flight.style.transform = `translate(${u.x - 48}px, ${u.y - 36}px)`,
|
|
555
|
+
e.flight.style.transform = `translate(${u.x - 48}px, ${u.y - 36}px)`, X(e.flightBody, "transform", `rotate(${t.angle}) scale(${n * t.stretch} ${n / Math.sqrt(t.stretch)})`), X(e.trail, "opacity", Math.min(.8, (t.stretch - 1) * 3));
|
|
555
556
|
}
|
|
556
|
-
|
|
557
|
+
Y(e.seat, t.seat !== null), t.seat !== null && (e.seat.style.transform = `translate(${u.x - 56}px, ${u.y - 28}px)`, X(e.seatBody, "d", R(t.seatWidth ?? n, t.seat, t.diameter))), Y(e.label, o || t.phase !== "gather" && t.seat !== null && t.seat > .45);
|
|
557
558
|
}
|
|
558
|
-
function
|
|
559
|
+
function pe(e, t, n, r) {
|
|
559
560
|
e.satellites.forEach((e, i) => {
|
|
560
|
-
if (
|
|
561
|
+
if (Y(e, n), !n) return;
|
|
561
562
|
let a = t * .7 + i * Math.PI * 2 / 3, o = 63 + Math.max(0, Math.sin(t * 1.6 + i * 2)) * (16 + r * 12);
|
|
562
|
-
|
|
563
|
+
X(e, "cx", 80 + Math.cos(a) * o), X(e, "cy", 80 + Math.sin(a) * o), X(e, "r", 7 + i * 1.5);
|
|
563
564
|
});
|
|
564
565
|
}
|
|
565
|
-
function
|
|
566
|
+
function Z() {
|
|
566
567
|
let e = window.visualViewport;
|
|
567
568
|
return {
|
|
568
569
|
x: e?.offsetLeft ?? 0,
|
|
@@ -573,23 +574,23 @@ function X() {
|
|
|
573
574
|
}
|
|
574
575
|
//#endregion
|
|
575
576
|
//#region src/presence/tracking.ts
|
|
576
|
-
function
|
|
577
|
+
function me(e) {
|
|
577
578
|
try {
|
|
578
579
|
let t = e.contextElement;
|
|
579
580
|
if (t && t.ownerDocument !== document || t && (!t.isConnected || t.closest("[hidden], [inert]")) || t && getComputedStyle(t).visibility === "hidden") return null;
|
|
580
581
|
let n = document.querySelector("dialog:modal");
|
|
581
582
|
if (n && (!t || !n.contains(t))) return null;
|
|
582
583
|
let r = e.getRect();
|
|
583
|
-
return
|
|
584
|
+
return P(r) && re(r, Z()) ? r : null;
|
|
584
585
|
} catch {
|
|
585
586
|
return null;
|
|
586
587
|
}
|
|
587
588
|
}
|
|
588
|
-
function
|
|
589
|
+
function he(e, t, n, r) {
|
|
589
590
|
let i = t.contextElement, a = {
|
|
590
591
|
...i ? { contextElement: i } : {},
|
|
591
592
|
getBoundingClientRect: () => {
|
|
592
|
-
let e =
|
|
593
|
+
let e = me(t) ?? {
|
|
593
594
|
x: 0,
|
|
594
595
|
y: 0,
|
|
595
596
|
width: 0,
|
|
@@ -626,7 +627,7 @@ function ue(e, t, n, r) {
|
|
|
626
627
|
attributeFilter: ["open", "inert"]
|
|
627
628
|
});
|
|
628
629
|
let l = () => {}, u = !1, d = /* @__PURE__ */ new Map(), f = (e) => {
|
|
629
|
-
l(), u = e, l =
|
|
630
|
+
l(), u = e, l = E(i ?? a, n, r, { animationFrame: !i || e });
|
|
630
631
|
}, p = (e) => {
|
|
631
632
|
if (!(e.target instanceof Element) || !o.has(e.target)) return;
|
|
632
633
|
let t = "propertyName" in e ? String(e.propertyName) : "animationName" in e ? String(e.animationName) : e.type, n = d.get(e.target) ?? /* @__PURE__ */ new Set();
|
|
@@ -647,35 +648,35 @@ function ue(e, t, n, r) {
|
|
|
647
648
|
}
|
|
648
649
|
//#endregion
|
|
649
650
|
//#region src/presence/shared/panelObstacles.ts
|
|
650
|
-
var
|
|
651
|
-
function
|
|
652
|
-
let n =
|
|
651
|
+
var Q = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Set();
|
|
652
|
+
function ge(e, t) {
|
|
653
|
+
let n = Q.get(e), r = t && P(t) ? {
|
|
653
654
|
x: t.x,
|
|
654
655
|
y: t.y,
|
|
655
656
|
width: t.width,
|
|
656
657
|
height: t.height
|
|
657
658
|
} : null;
|
|
658
659
|
if (!(!n && !r || n && r && n.x === r.x && n.y === r.y && n.width === r.width && n.height === r.height)) {
|
|
659
|
-
r ?
|
|
660
|
-
for (let e of [
|
|
660
|
+
r ? Q.set(e, r) : Q.delete(e);
|
|
661
|
+
for (let e of [...$]) try {
|
|
661
662
|
e();
|
|
662
663
|
} catch {}
|
|
663
664
|
}
|
|
664
665
|
}
|
|
665
|
-
function
|
|
666
|
-
return [...
|
|
666
|
+
function _e(e) {
|
|
667
|
+
return [...Q].filter(([t]) => t.isConnected && !t.contains(e) && !e.contains(t)).map(([, e]) => e);
|
|
667
668
|
}
|
|
668
|
-
function
|
|
669
|
-
return
|
|
670
|
-
|
|
669
|
+
function ve(e) {
|
|
670
|
+
return $.add(e), () => {
|
|
671
|
+
$.delete(e);
|
|
671
672
|
};
|
|
672
673
|
}
|
|
673
|
-
function
|
|
674
|
+
function ye(e, t, n, r) {
|
|
674
675
|
let { width: i, height: a } = t;
|
|
675
676
|
if (!Number.isFinite(i + a) || i <= 0 || a <= 0) return null;
|
|
676
677
|
let o = n.x + 12, s = n.y + 12, c = n.x + n.width - i - 12, l = n.y + n.height - a - 12;
|
|
677
678
|
if (c < o || l < s) return null;
|
|
678
|
-
let u = r.filter(
|
|
679
|
+
let u = r.filter(P), d = [
|
|
679
680
|
e.x,
|
|
680
681
|
o,
|
|
681
682
|
c
|
|
@@ -699,66 +700,66 @@ function me(e, t, n, r) {
|
|
|
699
700
|
}
|
|
700
701
|
//#endregion
|
|
701
702
|
//#region src/presence/LiquidPresence/useMotion.ts
|
|
702
|
-
function
|
|
703
|
-
let
|
|
704
|
-
|
|
705
|
-
let
|
|
706
|
-
|
|
707
|
-
let
|
|
708
|
-
if (!
|
|
709
|
-
let
|
|
710
|
-
source:
|
|
711
|
-
overlay:
|
|
712
|
-
body:
|
|
713
|
-
bud:
|
|
714
|
-
satellites: [...
|
|
715
|
-
flight:
|
|
716
|
-
flightBody:
|
|
717
|
-
trail:
|
|
718
|
-
seat:
|
|
719
|
-
seatBody:
|
|
720
|
-
label:
|
|
721
|
-
},
|
|
722
|
-
|
|
723
|
-
let
|
|
703
|
+
function be(t, r, i, a) {
|
|
704
|
+
let o = y(i);
|
|
705
|
+
o.current = i;
|
|
706
|
+
let s = !!i.guideContent, l = y(null), u = y(null), d = y(null), f = y(0), p = y(+(i.idleMotion === "breathe")), m = y(() => {});
|
|
707
|
+
g(() => {
|
|
708
|
+
let i = t.current, a = r.current;
|
|
709
|
+
if (!i || !a) return;
|
|
710
|
+
let s = {
|
|
711
|
+
source: i,
|
|
712
|
+
overlay: a,
|
|
713
|
+
body: i.querySelector("[data-presence-body]"),
|
|
714
|
+
bud: i.querySelector("[data-presence-bud]"),
|
|
715
|
+
satellites: [...i.querySelectorAll("[data-presence-satellite]")],
|
|
716
|
+
flight: a.querySelector(".game-ui-liquid-presence-flight"),
|
|
717
|
+
flightBody: a.querySelector("[data-presence-flight-body]"),
|
|
718
|
+
trail: a.querySelector("[data-presence-trail]"),
|
|
719
|
+
seat: a.querySelector(".game-ui-liquid-presence-seat"),
|
|
720
|
+
seatBody: a.querySelector("[data-presence-seat-body]"),
|
|
721
|
+
label: a.querySelector(".game-ui-liquid-presence-label")
|
|
722
|
+
}, h = o.current.target ?? null;
|
|
723
|
+
h || (u.current = null), h?.key === u.current && (h = null);
|
|
724
|
+
let g = l.current, _ = !h && !!(g && g.phase !== "still"), v = g && [
|
|
724
725
|
"flight",
|
|
725
726
|
"dock",
|
|
726
727
|
"land",
|
|
727
728
|
"gather",
|
|
728
729
|
"return"
|
|
729
|
-
].includes(
|
|
730
|
-
|
|
731
|
-
},
|
|
732
|
-
if (
|
|
733
|
-
|
|
730
|
+
].includes(g.phase) ? g.point : void 0, y = g?.point ?? ie(i.getBoundingClientRect()), b = g?.seatWidth ?? 48, x = g ?? void 0, S = i.getBoundingClientRect(), C = performance.now(), w = null, T = () => {}, E = !0, k = !1, j = !1, M = !0, ne = 0, P = f.current, F = performance.now(), I = 0, L = 0, R = null, z = () => {}, B, V = () => {
|
|
731
|
+
k && c(), k = !1;
|
|
732
|
+
}, H = (e) => {
|
|
733
|
+
if (h) {
|
|
734
|
+
u.current = h.key, h = null, _ = !!(l.current && l.current.phase !== "still"), x = l.current ?? void 0, v = l.current?.point, y = v ?? y, C = performance.now(), z(), clearTimeout(B), L++, Y(s.label, !1);
|
|
734
735
|
try {
|
|
735
|
-
|
|
736
|
+
o.current.onDismiss?.(e);
|
|
736
737
|
} catch {}
|
|
737
|
-
|
|
738
|
+
J();
|
|
738
739
|
}
|
|
739
|
-
},
|
|
740
|
-
if (!
|
|
741
|
-
let e =
|
|
742
|
-
|
|
740
|
+
}, U = () => {
|
|
741
|
+
if (!h) return null;
|
|
742
|
+
let e = s.label.style.pointerEvents;
|
|
743
|
+
o.current.guideContent && (s.label.style.pointerEvents = "none");
|
|
743
744
|
try {
|
|
744
|
-
return
|
|
745
|
+
return me(o.current.target?.key === h.key ? o.current.target : h);
|
|
745
746
|
} finally {
|
|
746
|
-
|
|
747
|
+
s.label.style.pointerEvents = e;
|
|
747
748
|
}
|
|
748
|
-
},
|
|
749
|
-
if (!
|
|
750
|
-
let e =
|
|
749
|
+
}, W = () => {
|
|
750
|
+
if (!h) return;
|
|
751
|
+
let e = U();
|
|
751
752
|
if (!e) {
|
|
752
|
-
|
|
753
|
+
H("unavailable");
|
|
753
754
|
return;
|
|
754
755
|
}
|
|
755
|
-
let t =
|
|
756
|
+
let t = oe(e, Z()), n = ae(e, Z()), r = (e) => N(e === "top" ? n.y - 10 : n.y + n.height + 10, Z().y + 18, Z().y + Z().height - 18);
|
|
756
757
|
y = {
|
|
757
758
|
x: t.x,
|
|
758
|
-
y: r(
|
|
759
|
+
y: r(R ?? t.side)
|
|
759
760
|
}, b = t.width;
|
|
760
|
-
let
|
|
761
|
-
...
|
|
761
|
+
let i = {
|
|
762
|
+
...h.contextElement ? { contextElement: h.contextElement } : {},
|
|
762
763
|
getBoundingClientRect: () => ({
|
|
763
764
|
...n,
|
|
764
765
|
top: n.y,
|
|
@@ -766,192 +767,192 @@ function $(e, t, n, r) {
|
|
|
766
767
|
bottom: n.y + n.height,
|
|
767
768
|
right: n.x + n.width
|
|
768
769
|
})
|
|
769
|
-
},
|
|
770
|
-
c || (
|
|
770
|
+
}, a = ++L, c = o.current.guideSize === "expanded";
|
|
771
|
+
c || (s.label.style.maxHeight = ""), o.current.guideContent && !s.label.style.transform && (s.label.style.visibility = "hidden", Y(s.label, !0)), D(i, s.label, {
|
|
771
772
|
strategy: "absolute",
|
|
772
|
-
placement: c &&
|
|
773
|
+
placement: c && Z().width >= 900 ? "right" : t.side,
|
|
773
774
|
middleware: [
|
|
774
|
-
|
|
775
|
-
|
|
775
|
+
A(26),
|
|
776
|
+
O({
|
|
776
777
|
padding: 16,
|
|
777
|
-
...c &&
|
|
778
|
+
...c && Z().width >= 900 ? { fallbackPlacements: [
|
|
778
779
|
"left",
|
|
779
780
|
"bottom",
|
|
780
781
|
"top"
|
|
781
782
|
] } : {}
|
|
782
783
|
}),
|
|
783
|
-
|
|
784
|
+
ee({
|
|
784
785
|
padding: 16,
|
|
785
786
|
crossAxis: !c
|
|
786
787
|
}),
|
|
787
|
-
...c ? [
|
|
788
|
+
...c ? [te({
|
|
788
789
|
padding: 16,
|
|
789
790
|
apply({ availableHeight: e, elements: t }) {
|
|
790
|
-
let n = `${Math.max(0, Math.min(560,
|
|
791
|
+
let n = `${Math.max(0, Math.min(560, Z().height * .65, e))}px`;
|
|
791
792
|
t.floating.style.maxHeight !== n && (t.floating.style.maxHeight = n);
|
|
792
793
|
}
|
|
793
794
|
})] : []
|
|
794
795
|
]
|
|
795
796
|
}).then(({ x: e, y: i, placement: o }) => {
|
|
796
|
-
if (
|
|
797
|
-
let
|
|
798
|
-
if (
|
|
799
|
-
let t =
|
|
797
|
+
if (E && a === L) {
|
|
798
|
+
let a = _e(s.label);
|
|
799
|
+
if (a.length && s.label.offsetWidth && s.label.offsetHeight) {
|
|
800
|
+
let t = ye({
|
|
800
801
|
x: e,
|
|
801
802
|
y: i
|
|
802
803
|
}, {
|
|
803
|
-
width:
|
|
804
|
-
height:
|
|
805
|
-
},
|
|
804
|
+
width: s.label.offsetWidth,
|
|
805
|
+
height: s.label.offsetHeight
|
|
806
|
+
}, Z(), [...a, n]);
|
|
806
807
|
if (!t) {
|
|
807
|
-
|
|
808
|
+
s.label.style.visibility = "hidden";
|
|
808
809
|
return;
|
|
809
810
|
}
|
|
810
811
|
e = t.x, i = t.y;
|
|
811
812
|
}
|
|
812
|
-
|
|
813
|
-
let c = r(
|
|
813
|
+
s.label.style.transform = `translate(${e}px, ${i}px)`, s.label.style.visibility = "", R = o.startsWith("top") ? "top" : o.startsWith("bottom") ? "bottom" : t.side;
|
|
814
|
+
let c = r(R);
|
|
814
815
|
y.y !== c && (y = {
|
|
815
816
|
x: t.x,
|
|
816
817
|
y: c
|
|
817
|
-
},
|
|
818
|
+
}, J());
|
|
818
819
|
}
|
|
819
820
|
}).catch(() => {});
|
|
820
|
-
},
|
|
821
|
+
}, G = () => [
|
|
821
822
|
"connecting",
|
|
822
823
|
"listening",
|
|
823
824
|
"thinking",
|
|
824
825
|
"speaking",
|
|
825
826
|
"working"
|
|
826
|
-
].includes(
|
|
827
|
-
if (
|
|
828
|
-
let
|
|
829
|
-
if (
|
|
830
|
-
let
|
|
831
|
-
if (
|
|
832
|
-
let
|
|
833
|
-
return
|
|
827
|
+
].includes(o.current.activity ?? "idle"), K = () => o.current.idleMotion === "breathe" && (o.current.activity ?? "idle") === "idle", ce = () => {
|
|
828
|
+
if (j = !1, o.current.reducedMotion || o.current.activity === "disabled" || document.hidden || !M || !re(i.getBoundingClientRect(), Z())) return !1;
|
|
829
|
+
let t = document.querySelector("dialog:modal");
|
|
830
|
+
if (t && !t.contains(i)) return !1;
|
|
831
|
+
let r = h?.contextElement?.closest("dialog") ?? null;
|
|
832
|
+
if (h && i.closest("dialog") !== r) return !1;
|
|
833
|
+
let a = 13184 + (i.getBoundingClientRect().width * 2) ** 2, s = n();
|
|
834
|
+
return s.maxAnimatedGroups === 0 || a > s.maxFilterArea ? (V(), !1) : !(h || _ || G()) && K() && !k && s.activeGroups > 0 ? (j = !0, !1) : (k ||= e(a), k);
|
|
834
835
|
};
|
|
835
|
-
function
|
|
836
|
-
if (!
|
|
837
|
-
let t =
|
|
838
|
-
if (!
|
|
839
|
-
_ = !1, l.current = null,
|
|
836
|
+
function le(e) {
|
|
837
|
+
if (!E || document.hidden) return;
|
|
838
|
+
let t = s.source.getBoundingClientRect();
|
|
839
|
+
if (!s.source.isConnected || s.source.closest("[hidden], [inert]") || t.width <= 0 || t.height <= 0) {
|
|
840
|
+
_ = !1, l.current = null, H("unavailable"), Y(s.label, !1), Y(s.flight, !1), Y(s.seat, !1), V();
|
|
840
841
|
return;
|
|
841
842
|
}
|
|
842
|
-
if (
|
|
843
|
-
|
|
843
|
+
if (h && !U()) {
|
|
844
|
+
H("unavailable");
|
|
844
845
|
return;
|
|
845
846
|
}
|
|
846
|
-
let n =
|
|
847
|
-
elapsed: e -
|
|
848
|
-
source: _ ? t :
|
|
847
|
+
let n = ce(), r = ue({
|
|
848
|
+
elapsed: e - C,
|
|
849
|
+
source: _ ? t : S,
|
|
849
850
|
destination: y,
|
|
850
|
-
viewport:
|
|
851
|
+
viewport: Z(),
|
|
851
852
|
returning: _,
|
|
852
853
|
...v ? { from: v } : {},
|
|
853
|
-
...
|
|
854
|
+
...x ? { origin: x } : {}
|
|
854
855
|
});
|
|
855
|
-
!
|
|
856
|
+
!h && !_ && (r = {
|
|
856
857
|
...r,
|
|
857
858
|
phase: "still",
|
|
858
859
|
separation: 0,
|
|
859
860
|
bud: null,
|
|
860
861
|
seat: null
|
|
861
|
-
}), (!n ||
|
|
862
|
+
}), (!n || h && d.current === h.key) && (r = {
|
|
862
863
|
...r,
|
|
863
|
-
phase:
|
|
864
|
+
phase: h ? "dock" : "still",
|
|
864
865
|
point: y,
|
|
865
866
|
bud: null,
|
|
866
|
-
seat:
|
|
867
|
-
separation: +!!
|
|
868
|
-
}), _ && r.phase === "still" && (_ = !1),
|
|
869
|
-
let
|
|
870
|
-
|
|
871
|
-
let
|
|
872
|
-
|
|
873
|
-
let g =
|
|
874
|
-
n && (
|
|
875
|
-
let
|
|
876
|
-
|
|
877
|
-
let
|
|
878
|
-
|
|
867
|
+
seat: h ? 1 : null,
|
|
868
|
+
separation: +!!h
|
|
869
|
+
}), _ && r.phase === "still" && (_ = !1), h && r.phase === "dock" && (d.current = h.key);
|
|
870
|
+
let i = !["still", "dock"].includes(r.phase), a = o.current.levelRef?.current, c = !i && K(), u = Math.max(0, Math.min(160, e - F));
|
|
871
|
+
F = e;
|
|
872
|
+
let m = typeof a == "number" ? N(a, 0, 1) : 0;
|
|
873
|
+
I += (m - I) * (1 - Math.exp(-u / (m > I ? 65 : 140)));
|
|
874
|
+
let g = N(o.current.motionSpeed ?? 1, .5, 1.5), D = N(o.current.motionIntensity ?? 1, .25, 1.25);
|
|
875
|
+
n && (i || G() || c) && (P += u * (c ? 84e-5 : .00105) * g), f.current = P, n && (i || G() || c) && (p.current += (+!!c - p.current) * (1 - Math.exp(-u / 500)));
|
|
876
|
+
let O = n && G() && !i ? .14 + I * .75 : i ? .2 : 0, k = s.label.hasAttribute("hidden");
|
|
877
|
+
fe(s, r, b, P, O, D, !!(o.current.guideContent && h), p.current), pe(s, P, n && o.current.splashes !== !1 && o.current.activity === "speaking" && r.phase === "still", I);
|
|
878
|
+
let A = n && (i || G()) ? "animated" : n && c ? "ambient" : "static";
|
|
879
|
+
s.source.dataset.liquidMotion !== A && (s.source.dataset.liquidMotion = A), l.current = {
|
|
879
880
|
...r,
|
|
880
|
-
seatWidth: r.phase === "gather" ?
|
|
881
|
-
},
|
|
882
|
-
|
|
883
|
-
},
|
|
881
|
+
seatWidth: r.phase === "gather" ? x?.seatWidth ?? b : b
|
|
882
|
+
}, h && k && !s.label.hasAttribute("hidden") && W(), n && (i || G()) ? w = requestAnimationFrame(q) : (V(), c && (n || j) && (T = se(() => {
|
|
883
|
+
T = () => {}, E && !document.hidden && M && q(performance.now());
|
|
884
|
+
}, j ? 250 : 1e3 / 12)));
|
|
884
885
|
}
|
|
885
|
-
function
|
|
886
|
-
if (
|
|
887
|
-
|
|
886
|
+
function q(e) {
|
|
887
|
+
if (w = null, !E || document.hidden) {
|
|
888
|
+
V();
|
|
888
889
|
return;
|
|
889
890
|
}
|
|
890
|
-
if ((l.current?.phase === "still" || l.current?.phase === "dock") && e -
|
|
891
|
-
|
|
891
|
+
if ((l.current?.phase === "still" || l.current?.phase === "dock") && e - ne < 32) {
|
|
892
|
+
w = requestAnimationFrame(q);
|
|
892
893
|
return;
|
|
893
894
|
}
|
|
894
|
-
|
|
895
|
+
ne = e, le(e);
|
|
895
896
|
}
|
|
896
|
-
function
|
|
897
|
-
!
|
|
897
|
+
function J() {
|
|
898
|
+
!E || w !== null || document.hidden || (T(), T = () => {}, le(performance.now()));
|
|
898
899
|
}
|
|
899
|
-
|
|
900
|
-
let
|
|
901
|
-
if (
|
|
902
|
-
let e =
|
|
903
|
-
|
|
900
|
+
m.current = J;
|
|
901
|
+
let X = () => {
|
|
902
|
+
if (z(), z = () => {}, !h || document.hidden) return;
|
|
903
|
+
let e = he(s.source, h, s.label, () => {
|
|
904
|
+
W(), J();
|
|
904
905
|
});
|
|
905
|
-
|
|
906
|
+
z = e, h || e();
|
|
906
907
|
};
|
|
907
|
-
|
|
908
|
-
let
|
|
909
|
-
if (e.key === "Escape" && !e.isComposing &&
|
|
910
|
-
if (
|
|
908
|
+
h && (W(), h && (X(), h && !o.current.guideContent && (B = setTimeout(() => H("expired"), 12e3))));
|
|
909
|
+
let de = (e) => {
|
|
910
|
+
if (e.key === "Escape" && !e.isComposing && h) {
|
|
911
|
+
if (o.current.guideContent && e.target instanceof Node && s.label.contains(e.target)) return;
|
|
911
912
|
let t = document.querySelector("dialog:modal");
|
|
912
|
-
if (t && !t.contains(
|
|
913
|
-
|
|
913
|
+
if (t && !t.contains(s.label)) return;
|
|
914
|
+
o.current.guideContent && e.preventDefault(), H("dismissed");
|
|
914
915
|
}
|
|
915
|
-
},
|
|
916
|
-
|
|
917
|
-
},
|
|
918
|
-
document.hidden ? (
|
|
919
|
-
},
|
|
920
|
-
|
|
916
|
+
}, Q = (e) => {
|
|
917
|
+
o.current.dismissOnTargetClick !== !1 && h?.contextElement && e.target instanceof Node && h.contextElement.contains(e.target) && H("dismissed");
|
|
918
|
+
}, $ = () => {
|
|
919
|
+
document.hidden ? (T(), T = () => {}, w !== null && cancelAnimationFrame(w), w = null, z(), L++, V()) : (F = performance.now(), X(), J());
|
|
920
|
+
}, ge = typeof IntersectionObserver > "u" ? null : new IntersectionObserver((e) => {
|
|
921
|
+
M = e[0]?.isIntersecting ?? !0, M || (T(), T = () => {}, w !== null && cancelAnimationFrame(w), w = null, V()), J();
|
|
921
922
|
});
|
|
922
|
-
|
|
923
|
-
let be =
|
|
924
|
-
|
|
923
|
+
ge?.observe(i), document.addEventListener("keydown", de, !0), document.addEventListener("click", Q), document.addEventListener("visibilitychange", $), document.addEventListener("close", J, !0), document.addEventListener("toggle", J, !0);
|
|
924
|
+
let be = ve(() => {
|
|
925
|
+
W(), J();
|
|
925
926
|
});
|
|
926
|
-
return
|
|
927
|
-
|
|
927
|
+
return J(), () => {
|
|
928
|
+
E = !1, m.current = () => {}, L++, w !== null && cancelAnimationFrame(w), clearTimeout(B), T(), z(), be(), ge?.disconnect(), V(), document.removeEventListener("keydown", de, !0), document.removeEventListener("click", Q), document.removeEventListener("visibilitychange", $), document.removeEventListener("close", J, !0), document.removeEventListener("toggle", J, !0);
|
|
928
929
|
};
|
|
929
930
|
}, [
|
|
930
|
-
e,
|
|
931
931
|
t,
|
|
932
932
|
r,
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
933
|
+
a,
|
|
934
|
+
i.target?.key,
|
|
935
|
+
i.reducedMotion,
|
|
936
|
+
i.size,
|
|
937
|
+
i.guideSize,
|
|
938
|
+
s
|
|
939
|
+
]), g(() => m.current(), [
|
|
940
|
+
i.activity,
|
|
941
|
+
i.idleMotion,
|
|
942
|
+
i.motionSpeed,
|
|
943
|
+
i.motionIntensity,
|
|
944
|
+
i.splashes
|
|
944
945
|
]);
|
|
945
946
|
}
|
|
946
947
|
//#endregion
|
|
947
948
|
//#region src/presence/LiquidPresence/LiquidPresence.tsx
|
|
948
|
-
function
|
|
949
|
-
let n =
|
|
950
|
-
|
|
949
|
+
function xe(e) {
|
|
950
|
+
let n = t() || e.reducedMotion === !0, i = N(e.size ?? 64, 32, 224), a = `presence-${_().replace(/[^a-zA-Z0-9_-]/g, "")}`, o = y(null), c = y(null), [l, u] = b(null);
|
|
951
|
+
g(() => {
|
|
951
952
|
let t = e.target?.contextElement?.closest("dialog");
|
|
952
|
-
|
|
953
|
-
}, [e.target?.contextElement]),
|
|
954
|
-
let e =
|
|
953
|
+
u(t ?? o.current?.closest("dialog") ?? document.body);
|
|
954
|
+
}, [e.target?.contextElement]), g(() => {
|
|
955
|
+
let e = o.current, t = c.current;
|
|
955
956
|
if (!e || !t) return;
|
|
956
957
|
let n = () => {
|
|
957
958
|
let n = getComputedStyle(e), r = e.closest("[data-game-ui-style]")?.getAttribute("data-game-ui-style"), i = e.closest("[data-game-ui-theme]")?.getAttribute("data-game-ui-theme");
|
|
@@ -975,68 +976,68 @@ function he(e) {
|
|
|
975
976
|
return n(), window.addEventListener("resize", n, { passive: !0 }), () => {
|
|
976
977
|
r.disconnect(), window.removeEventListener("resize", n);
|
|
977
978
|
};
|
|
978
|
-
}, [l]),
|
|
979
|
+
}, [l]), be(o, c, {
|
|
979
980
|
...e,
|
|
980
|
-
size:
|
|
981
|
+
size: i,
|
|
981
982
|
reducedMotion: n
|
|
982
983
|
}, l);
|
|
983
|
-
let
|
|
984
|
-
width:
|
|
985
|
-
height:
|
|
984
|
+
let d = {
|
|
985
|
+
width: i,
|
|
986
|
+
height: i,
|
|
986
987
|
...e.colorFrom ? { "--liquid-presence-from": e.colorFrom } : {},
|
|
987
988
|
...e.colorTo ? { "--liquid-presence-to": e.colorTo } : {},
|
|
988
989
|
...["error", "unknown"].includes(e.activity ?? "") ? {
|
|
989
990
|
"--liquid-presence-from": "var(--game-ui-warning)",
|
|
990
991
|
"--liquid-presence-to": "var(--game-ui-warning)"
|
|
991
992
|
} : {}
|
|
992
|
-
},
|
|
993
|
-
id: `${
|
|
993
|
+
}, f = (e, t) => /* @__PURE__ */ C("defs", { children: [/* @__PURE__ */ S("linearGradient", {
|
|
994
|
+
id: `${a}-${e}-fill`,
|
|
994
995
|
gradientUnits: "userSpaceOnUse",
|
|
995
996
|
x1: 0,
|
|
996
997
|
y1: e === "core" ? 16 : -18,
|
|
997
998
|
x2: 0,
|
|
998
999
|
y2: e === "core" ? 146 : 18,
|
|
999
|
-
children:
|
|
1000
|
+
children: ne.map(([e, t]) => /* @__PURE__ */ S("stop", {
|
|
1000
1001
|
offset: e,
|
|
1001
1002
|
style: { stopColor: t }
|
|
1002
1003
|
}, e))
|
|
1003
|
-
}), /* @__PURE__ */
|
|
1004
|
-
id: `${
|
|
1004
|
+
}), /* @__PURE__ */ S("filter", {
|
|
1005
|
+
id: `${a}-${e}-goo`,
|
|
1005
1006
|
filterUnits: "userSpaceOnUse",
|
|
1006
|
-
...
|
|
1007
|
+
...t,
|
|
1007
1008
|
colorInterpolationFilters: "sRGB",
|
|
1008
|
-
children: /* @__PURE__ */
|
|
1009
|
-
blur:
|
|
1010
|
-
contrast:
|
|
1011
|
-
gloss:
|
|
1009
|
+
children: /* @__PURE__ */ S(r, {
|
|
1010
|
+
blur: s.blur,
|
|
1011
|
+
contrast: s.contrast,
|
|
1012
|
+
gloss: s.gloss,
|
|
1012
1013
|
shadows: [],
|
|
1013
1014
|
stroke: null,
|
|
1014
1015
|
waviness: 0
|
|
1015
1016
|
})
|
|
1016
1017
|
})] });
|
|
1017
|
-
return /* @__PURE__ */
|
|
1018
|
-
ref:
|
|
1018
|
+
return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("span", {
|
|
1019
|
+
ref: o,
|
|
1019
1020
|
className: `game-ui-liquid-presence ${e.className ?? ""}`,
|
|
1020
|
-
style:
|
|
1021
|
+
style: d,
|
|
1021
1022
|
"data-activity": e.activity ?? "idle",
|
|
1022
1023
|
"aria-hidden": "true",
|
|
1023
|
-
children: /* @__PURE__ */
|
|
1024
|
+
children: /* @__PURE__ */ C("svg", {
|
|
1024
1025
|
viewBox: "0 0 160 160",
|
|
1025
1026
|
focusable: "false",
|
|
1026
|
-
children: [
|
|
1027
|
+
children: [f("core", {
|
|
1027
1028
|
x: -80,
|
|
1028
1029
|
y: -80,
|
|
1029
1030
|
width: 320,
|
|
1030
1031
|
height: 320
|
|
1031
|
-
}), /* @__PURE__ */
|
|
1032
|
-
fill: `url(#${
|
|
1033
|
-
filter: `url(#${
|
|
1032
|
+
}), /* @__PURE__ */ C("g", {
|
|
1033
|
+
fill: `url(#${a}-core-fill)`,
|
|
1034
|
+
filter: `url(#${a}-core-goo)`,
|
|
1034
1035
|
children: [
|
|
1035
|
-
/* @__PURE__ */
|
|
1036
|
+
/* @__PURE__ */ S("path", {
|
|
1036
1037
|
"data-presence-body": "",
|
|
1037
|
-
d:
|
|
1038
|
+
d: L()
|
|
1038
1039
|
}),
|
|
1039
|
-
/* @__PURE__ */
|
|
1040
|
+
/* @__PURE__ */ S("circle", {
|
|
1040
1041
|
"data-presence-bud": "",
|
|
1041
1042
|
cx: "80",
|
|
1042
1043
|
cy: "80",
|
|
@@ -1047,7 +1048,7 @@ function he(e) {
|
|
|
1047
1048
|
0,
|
|
1048
1049
|
1,
|
|
1049
1050
|
2
|
|
1050
|
-
].map((e) => /* @__PURE__ */
|
|
1051
|
+
].map((e) => /* @__PURE__ */ S("circle", {
|
|
1051
1052
|
"data-presence-satellite": "",
|
|
1052
1053
|
cx: "80",
|
|
1053
1054
|
cy: "80",
|
|
@@ -1057,39 +1058,39 @@ function he(e) {
|
|
|
1057
1058
|
]
|
|
1058
1059
|
})]
|
|
1059
1060
|
})
|
|
1060
|
-
}), l &&
|
|
1061
|
+
}), l && w(/* @__PURE__ */ C("div", {
|
|
1061
1062
|
ref: c,
|
|
1062
1063
|
className: "game-ui-liquid-presence-overlay",
|
|
1063
1064
|
style: {
|
|
1064
|
-
...
|
|
1065
|
+
...d,
|
|
1065
1066
|
width: void 0,
|
|
1066
1067
|
height: void 0
|
|
1067
1068
|
},
|
|
1068
1069
|
"data-presence-overlay": "",
|
|
1069
1070
|
children: [
|
|
1070
|
-
/* @__PURE__ */
|
|
1071
|
+
/* @__PURE__ */ C("svg", {
|
|
1071
1072
|
className: "game-ui-liquid-presence-flight",
|
|
1072
1073
|
viewBox: "-48 -36 96 72",
|
|
1073
1074
|
"aria-hidden": "true",
|
|
1074
1075
|
focusable: "false",
|
|
1075
1076
|
style: { display: "none" },
|
|
1076
|
-
children: [
|
|
1077
|
+
children: [f("flight", {
|
|
1077
1078
|
x: -48,
|
|
1078
1079
|
y: -36,
|
|
1079
1080
|
width: 96,
|
|
1080
1081
|
height: 72
|
|
1081
|
-
}), /* @__PURE__ */
|
|
1082
|
-
fill: `url(#${
|
|
1083
|
-
filter: `url(#${
|
|
1084
|
-
children: /* @__PURE__ */
|
|
1082
|
+
}), /* @__PURE__ */ S("g", {
|
|
1083
|
+
fill: `url(#${a}-flight-fill)`,
|
|
1084
|
+
filter: `url(#${a}-flight-goo)`,
|
|
1085
|
+
children: /* @__PURE__ */ C("g", {
|
|
1085
1086
|
"data-presence-flight-body": "",
|
|
1086
|
-
children: [/* @__PURE__ */
|
|
1087
|
+
children: [/* @__PURE__ */ S("circle", { r: "16" }), /* @__PURE__ */ C("g", {
|
|
1087
1088
|
"data-presence-trail": "",
|
|
1088
|
-
children: [/* @__PURE__ */
|
|
1089
|
+
children: [/* @__PURE__ */ S("circle", {
|
|
1089
1090
|
cx: "-27",
|
|
1090
1091
|
cy: "5",
|
|
1091
1092
|
r: "4.5"
|
|
1092
|
-
}), /* @__PURE__ */
|
|
1093
|
+
}), /* @__PURE__ */ S("circle", {
|
|
1093
1094
|
cx: "-36",
|
|
1094
1095
|
cy: "8",
|
|
1095
1096
|
r: "2.5"
|
|
@@ -1098,25 +1099,25 @@ function he(e) {
|
|
|
1098
1099
|
})
|
|
1099
1100
|
})]
|
|
1100
1101
|
}),
|
|
1101
|
-
/* @__PURE__ */
|
|
1102
|
+
/* @__PURE__ */ C("svg", {
|
|
1102
1103
|
className: "game-ui-liquid-presence-seat",
|
|
1103
1104
|
viewBox: "-56 -28 112 56",
|
|
1104
1105
|
"aria-hidden": "true",
|
|
1105
1106
|
focusable: "false",
|
|
1106
1107
|
style: { display: "none" },
|
|
1107
|
-
children: [
|
|
1108
|
+
children: [f("seat", {
|
|
1108
1109
|
x: -56,
|
|
1109
1110
|
y: -28,
|
|
1110
1111
|
width: 112,
|
|
1111
1112
|
height: 56
|
|
1112
|
-
}), /* @__PURE__ */
|
|
1113
|
+
}), /* @__PURE__ */ S("path", {
|
|
1113
1114
|
"data-presence-seat-body": "",
|
|
1114
|
-
d:
|
|
1115
|
-
fill: `url(#${
|
|
1116
|
-
filter: `url(#${
|
|
1115
|
+
d: R(48, 1),
|
|
1116
|
+
fill: `url(#${a}-seat-fill)`,
|
|
1117
|
+
filter: `url(#${a}-seat-goo)`
|
|
1117
1118
|
})]
|
|
1118
1119
|
}),
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
+
/* @__PURE__ */ S("div", {
|
|
1120
1121
|
className: `game-ui-liquid-presence-label${e.guideContent ? " game-ui-liquid-presence-label--guide" : ""}${e.guideContent && e.guideSize === "expanded" ? " game-ui-liquid-presence-label--expanded" : ""}`,
|
|
1121
1122
|
role: e.guideContent ? void 0 : "status",
|
|
1122
1123
|
"aria-atomic": !e.guideContent || void 0,
|
|
@@ -1126,7 +1127,7 @@ function he(e) {
|
|
|
1126
1127
|
e.stopPropagation(), e.key === "Escape" && e.preventDefault();
|
|
1127
1128
|
} : void 0,
|
|
1128
1129
|
hidden: !0,
|
|
1129
|
-
children: e.guideContent ? /* @__PURE__ */
|
|
1130
|
+
children: e.guideContent ? /* @__PURE__ */ S(q, {
|
|
1130
1131
|
reducedMotion: n,
|
|
1131
1132
|
children: e.guideContent
|
|
1132
1133
|
}) : e.target?.label.slice(0, 240)
|
|
@@ -1136,17 +1137,17 @@ function he(e) {
|
|
|
1136
1137
|
}
|
|
1137
1138
|
//#endregion
|
|
1138
1139
|
//#region src/presence/LiquidAnchor/LiquidAnchor.tsx
|
|
1139
|
-
function
|
|
1140
|
-
let [i, a] =
|
|
1140
|
+
function Se({ source: e, children: t, placement: n = "top-end", onBoundsChange: r }) {
|
|
1141
|
+
let [i, a] = b(null), o = y(r);
|
|
1141
1142
|
o.current = r;
|
|
1142
|
-
let [s, c] =
|
|
1143
|
-
return
|
|
1143
|
+
let [s, c] = b(null);
|
|
1144
|
+
return v(() => {
|
|
1144
1145
|
c(e.current?.closest("dialog") ?? document.body);
|
|
1145
|
-
}, [e]),
|
|
1146
|
+
}, [e]), v(() => {
|
|
1146
1147
|
let t = e.current, r = i;
|
|
1147
1148
|
if (!t || !r) return;
|
|
1148
1149
|
let a = (e) => {
|
|
1149
|
-
|
|
1150
|
+
ge(r, e), o.current?.(e);
|
|
1150
1151
|
}, s = !0, c = 0, l = null, u = null, d = () => {
|
|
1151
1152
|
let e = getComputedStyle(t);
|
|
1152
1153
|
for (let e of ["data-game-ui-theme", "data-game-ui-style"]) {
|
|
@@ -1176,23 +1177,23 @@ function ge({ source: e, children: t, placement: n = "top-end", onBoundsChange:
|
|
|
1176
1177
|
r.style.visibility = "hidden", a(null);
|
|
1177
1178
|
return;
|
|
1178
1179
|
}
|
|
1179
|
-
|
|
1180
|
+
D(t, r, {
|
|
1180
1181
|
strategy: "fixed",
|
|
1181
1182
|
placement: n,
|
|
1182
1183
|
middleware: [
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1184
|
+
A(14),
|
|
1185
|
+
O({ padding: 12 }),
|
|
1186
|
+
ee({
|
|
1186
1187
|
padding: 12,
|
|
1187
1188
|
crossAxis: !0
|
|
1188
1189
|
}),
|
|
1189
|
-
|
|
1190
|
+
te({
|
|
1190
1191
|
padding: 12,
|
|
1191
1192
|
apply({ availableHeight: e, availableWidth: t }) {
|
|
1192
1193
|
r.dataset.liquidCompact = e < 500 ? "true" : "false", r.style.setProperty("--liquid-outlet-height", `${Math.max(0, e)}px`), r.style.maxWidth = `${Math.max(0, t)}px`;
|
|
1193
1194
|
}
|
|
1194
1195
|
}),
|
|
1195
|
-
|
|
1196
|
+
k({ strategy: "referenceHidden" })
|
|
1196
1197
|
]
|
|
1197
1198
|
}).then(({ x: t, y: n, middlewareData: i }) => {
|
|
1198
1199
|
if (!s || e !== c) return;
|
|
@@ -1213,7 +1214,7 @@ function ge({ source: e, children: t, placement: n = "top-end", onBoundsChange:
|
|
|
1213
1214
|
});
|
|
1214
1215
|
};
|
|
1215
1216
|
d();
|
|
1216
|
-
let p =
|
|
1217
|
+
let p = E(t, r, f), m = new MutationObserver(() => {
|
|
1217
1218
|
d(), f();
|
|
1218
1219
|
});
|
|
1219
1220
|
for (let e = t; e; e = e.parentElement) m.observe(e, {
|
|
@@ -1243,10 +1244,10 @@ function ge({ source: e, children: t, placement: n = "top-end", onBoundsChange:
|
|
|
1243
1244
|
i,
|
|
1244
1245
|
n,
|
|
1245
1246
|
e
|
|
1246
|
-
]), s ? /* @__PURE__ */
|
|
1247
|
+
]), s ? /* @__PURE__ */ S(T, {
|
|
1247
1248
|
root: s,
|
|
1248
1249
|
preserveTabOrder: !1,
|
|
1249
|
-
children: /* @__PURE__ */
|
|
1250
|
+
children: /* @__PURE__ */ S("div", {
|
|
1250
1251
|
ref: a,
|
|
1251
1252
|
className: "game-ui-liquid-anchor",
|
|
1252
1253
|
style: {
|
|
@@ -1261,13 +1262,13 @@ function ge({ source: e, children: t, placement: n = "top-end", onBoundsChange:
|
|
|
1261
1262
|
}
|
|
1262
1263
|
//#endregion
|
|
1263
1264
|
//#region src/presence/LiquidPopover/LiquidPopover.tsx
|
|
1264
|
-
function
|
|
1265
|
-
return e ? /* @__PURE__ */
|
|
1265
|
+
function Ce({ open: e, ...t }) {
|
|
1266
|
+
return e ? /* @__PURE__ */ S(we, { ...t }) : null;
|
|
1266
1267
|
}
|
|
1267
|
-
function
|
|
1268
|
-
let o =
|
|
1269
|
-
|
|
1270
|
-
let
|
|
1268
|
+
function we({ source: e, onOpenChange: t, title: n, children: r, width: i = 440, placement: a = "bottom-end" }) {
|
|
1269
|
+
let o = _(), s = y(null), c = y(null), l = y(!1), u = y(t);
|
|
1270
|
+
u.current = t;
|
|
1271
|
+
let d = h((t) => {
|
|
1271
1272
|
s.current = t;
|
|
1272
1273
|
let n = e.current;
|
|
1273
1274
|
if (t) return () => {
|
|
@@ -1275,45 +1276,45 @@ function ve({ source: e, onOpenChange: t, title: n, children: r, width: i = 440,
|
|
|
1275
1276
|
!t.isConnected && n?.isConnected && n.focus({ preventScroll: !0 });
|
|
1276
1277
|
});
|
|
1277
1278
|
};
|
|
1278
|
-
}, [e]), [
|
|
1279
|
-
|
|
1280
|
-
let e = matchMedia("(max-width: 767px)"), t = () =>
|
|
1279
|
+
}, [e]), [f, p] = b(!1);
|
|
1280
|
+
v(() => {
|
|
1281
|
+
let e = matchMedia("(max-width: 767px)"), t = () => p(e.matches);
|
|
1281
1282
|
return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
|
|
1282
|
-
}, []),
|
|
1283
|
-
|
|
1283
|
+
}, []), v(() => {
|
|
1284
|
+
l.current = !1;
|
|
1284
1285
|
let t = (t) => {
|
|
1285
1286
|
let n = t.composedPath();
|
|
1286
|
-
s.current && !n.includes(s.current) && (!e.current || !n.includes(e.current)) &&
|
|
1287
|
+
s.current && !n.includes(s.current) && (!e.current || !n.includes(e.current)) && u.current(!1);
|
|
1287
1288
|
}, n = (e) => {
|
|
1288
1289
|
if (e.key !== "Escape" || e.defaultPrevented || e.isComposing) return;
|
|
1289
1290
|
let t = document.querySelector("dialog:modal");
|
|
1290
|
-
t && !t.contains(s.current) || (e.preventDefault(),
|
|
1291
|
+
t && !t.contains(s.current) || (e.preventDefault(), u.current(!1));
|
|
1291
1292
|
};
|
|
1292
1293
|
return document.addEventListener("pointerdown", t), document.addEventListener("keydown", n), () => {
|
|
1293
1294
|
document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", n);
|
|
1294
1295
|
};
|
|
1295
1296
|
}, [e]);
|
|
1296
|
-
let
|
|
1297
|
-
return /* @__PURE__ */
|
|
1297
|
+
let m = f ? "top" : a;
|
|
1298
|
+
return /* @__PURE__ */ S(Se, {
|
|
1298
1299
|
source: e,
|
|
1299
|
-
placement:
|
|
1300
|
+
placement: m,
|
|
1300
1301
|
onBoundsChange: (e) => {
|
|
1301
|
-
e && !
|
|
1302
|
+
e && !l.current && c.current && (c.current.focus({ preventScroll: !0 }), l.current = document.activeElement === c.current);
|
|
1302
1303
|
},
|
|
1303
|
-
children: /* @__PURE__ */
|
|
1304
|
-
ref:
|
|
1304
|
+
children: /* @__PURE__ */ S("div", {
|
|
1305
|
+
ref: d,
|
|
1305
1306
|
className: "game-ui-liquid-popover",
|
|
1306
1307
|
role: "dialog",
|
|
1307
1308
|
"aria-modal": "false",
|
|
1308
1309
|
"aria-labelledby": `${o}-title`,
|
|
1309
|
-
"data-popover-placement":
|
|
1310
|
+
"data-popover-placement": m,
|
|
1310
1311
|
style: { "--game-ui-popover-width": `${Number.isFinite(i) ? Math.max(24, i) : 440}px` },
|
|
1311
|
-
children: /* @__PURE__ */
|
|
1312
|
+
children: /* @__PURE__ */ S(q, {
|
|
1312
1313
|
source: e,
|
|
1313
1314
|
revealKey: o,
|
|
1314
|
-
children: /* @__PURE__ */
|
|
1315
|
+
children: /* @__PURE__ */ C("div", {
|
|
1315
1316
|
className: "game-ui-liquid-popover-content",
|
|
1316
|
-
children: [/* @__PURE__ */
|
|
1317
|
+
children: [/* @__PURE__ */ S("h2", {
|
|
1317
1318
|
ref: c,
|
|
1318
1319
|
id: `${o}-title`,
|
|
1319
1320
|
tabIndex: -1,
|
|
@@ -1325,4 +1326,174 @@ function ve({ source: e, onOpenChange: t, title: n, children: r, width: i = 440,
|
|
|
1325
1326
|
});
|
|
1326
1327
|
}
|
|
1327
1328
|
//#endregion
|
|
1328
|
-
|
|
1329
|
+
//#region src/game/GameAccountMenu/GameAccountMenu.tsx
|
|
1330
|
+
var Te = 12;
|
|
1331
|
+
function Ee(e) {
|
|
1332
|
+
let t = Array.from(e);
|
|
1333
|
+
return t.length > Te ? `${t.slice(0, Te).join("")}…` : e;
|
|
1334
|
+
}
|
|
1335
|
+
function De(e) {
|
|
1336
|
+
return e?.startsWith("https:") ? e : void 0;
|
|
1337
|
+
}
|
|
1338
|
+
function Oe({ user: e, labels: t, site: n, products: r = [], accountHref: i, onSignOut: a, signingOut: o = !1, defaultTab: s, className: c }) {
|
|
1339
|
+
let u = y(null), [d, f] = b(!1), p = n != null && typeof n != "boolean", h = [
|
|
1340
|
+
...p ? ["site"] : [],
|
|
1341
|
+
...r.length > 0 ? ["products"] : [],
|
|
1342
|
+
"account"
|
|
1343
|
+
], g = s && h.includes(s) ? s : h[0] ?? "account", _ = De(e.avatarUrl), v = _ ? { src: _ } : {};
|
|
1344
|
+
return /* @__PURE__ */ C("div", {
|
|
1345
|
+
className: ["game-ui-account-menu", c].filter(Boolean).join(" "),
|
|
1346
|
+
children: [/* @__PURE__ */ C(l, {
|
|
1347
|
+
ref: u,
|
|
1348
|
+
size: "sm",
|
|
1349
|
+
className: "game-ui-account-menu-trigger",
|
|
1350
|
+
"aria-haspopup": "dialog",
|
|
1351
|
+
"aria-expanded": d,
|
|
1352
|
+
"aria-label": t.trigger,
|
|
1353
|
+
onClick: () => f((e) => !e),
|
|
1354
|
+
children: [/* @__PURE__ */ S("span", {
|
|
1355
|
+
"aria-hidden": "true",
|
|
1356
|
+
className: "game-ui-account-menu-avatar",
|
|
1357
|
+
children: /* @__PURE__ */ S(m, {
|
|
1358
|
+
name: e.name,
|
|
1359
|
+
size: "sm",
|
|
1360
|
+
...v
|
|
1361
|
+
})
|
|
1362
|
+
}), /* @__PURE__ */ S("span", {
|
|
1363
|
+
className: "game-ui-account-menu-trigger-name",
|
|
1364
|
+
children: Ee(e.name)
|
|
1365
|
+
})]
|
|
1366
|
+
}), /* @__PURE__ */ S(Ce, {
|
|
1367
|
+
open: d,
|
|
1368
|
+
onOpenChange: f,
|
|
1369
|
+
source: u,
|
|
1370
|
+
title: /* @__PURE__ */ S("span", {
|
|
1371
|
+
className: "game-ui-account-menu-name",
|
|
1372
|
+
children: e.name
|
|
1373
|
+
}),
|
|
1374
|
+
width: 360,
|
|
1375
|
+
children: /* @__PURE__ */ S(ke, {
|
|
1376
|
+
avatarImage: v,
|
|
1377
|
+
initialTab: g,
|
|
1378
|
+
labels: t,
|
|
1379
|
+
products: r,
|
|
1380
|
+
accountHref: i,
|
|
1381
|
+
onSignOut: a,
|
|
1382
|
+
signingOut: o,
|
|
1383
|
+
site: p ? n : null,
|
|
1384
|
+
tabs: h,
|
|
1385
|
+
user: e
|
|
1386
|
+
})
|
|
1387
|
+
})]
|
|
1388
|
+
});
|
|
1389
|
+
}
|
|
1390
|
+
function ke({ avatarImage: e, initialTab: t, labels: n, products: r, accountHref: i, onSignOut: a, signingOut: o, site: s, tabs: c, user: u }) {
|
|
1391
|
+
let d = _(), [p, h] = b(t), v = y(!1);
|
|
1392
|
+
g(() => {
|
|
1393
|
+
o || (v.current = !1);
|
|
1394
|
+
}, [o]);
|
|
1395
|
+
let x = () => {
|
|
1396
|
+
o || v.current || (v.current = !0, new Promise((e) => e(a())).finally(() => {
|
|
1397
|
+
v.current = !1;
|
|
1398
|
+
}));
|
|
1399
|
+
}, w = c.length > 1, T = {
|
|
1400
|
+
site: n.siteTab,
|
|
1401
|
+
products: n.productsTab,
|
|
1402
|
+
account: n.accountTab
|
|
1403
|
+
}, E = c.map((e) => ({
|
|
1404
|
+
id: e,
|
|
1405
|
+
label: T[e],
|
|
1406
|
+
panelId: `${d}-panel-${e}`
|
|
1407
|
+
})), D = (e, t) => /* @__PURE__ */ S("div", {
|
|
1408
|
+
className: "game-ui-account-menu-section",
|
|
1409
|
+
hidden: w && p !== e,
|
|
1410
|
+
id: `${d}-panel-${e}`,
|
|
1411
|
+
role: w ? "tabpanel" : void 0,
|
|
1412
|
+
"aria-labelledby": w ? `${d}-tabs-${e}` : void 0,
|
|
1413
|
+
children: t
|
|
1414
|
+
});
|
|
1415
|
+
return /* @__PURE__ */ C("div", {
|
|
1416
|
+
className: "game-ui-account-menu-panel",
|
|
1417
|
+
children: [
|
|
1418
|
+
/* @__PURE__ */ C("div", {
|
|
1419
|
+
className: "game-ui-account-menu-identity",
|
|
1420
|
+
children: [/* @__PURE__ */ S("span", {
|
|
1421
|
+
"aria-hidden": "true",
|
|
1422
|
+
className: "game-ui-account-menu-avatar",
|
|
1423
|
+
children: /* @__PURE__ */ S(m, {
|
|
1424
|
+
name: u.name,
|
|
1425
|
+
size: "md",
|
|
1426
|
+
...e
|
|
1427
|
+
})
|
|
1428
|
+
}), u.email ? /* @__PURE__ */ S("p", {
|
|
1429
|
+
className: "game-ui-account-menu-email",
|
|
1430
|
+
children: u.email
|
|
1431
|
+
}) : null]
|
|
1432
|
+
}),
|
|
1433
|
+
w ? /* @__PURE__ */ S(f, {
|
|
1434
|
+
id: `${d}-tabs`,
|
|
1435
|
+
"aria-label": n.trigger,
|
|
1436
|
+
activeId: p,
|
|
1437
|
+
onSelect: (e) => h(e),
|
|
1438
|
+
tabs: E
|
|
1439
|
+
}) : null,
|
|
1440
|
+
c.includes("site") ? D("site", s) : null,
|
|
1441
|
+
c.includes("products") ? D("products", /* @__PURE__ */ S("ul", {
|
|
1442
|
+
className: "game-ui-account-menu-products",
|
|
1443
|
+
children: r.map((e) => /* @__PURE__ */ S("li", { children: /* @__PURE__ */ S(Ae, {
|
|
1444
|
+
currentLabel: n.current,
|
|
1445
|
+
product: e
|
|
1446
|
+
}) }, e.id))
|
|
1447
|
+
})) : null,
|
|
1448
|
+
D("account", /* @__PURE__ */ C("div", {
|
|
1449
|
+
className: "game-ui-account-menu-actions",
|
|
1450
|
+
children: [/* @__PURE__ */ S(l, {
|
|
1451
|
+
fullWidth: !0,
|
|
1452
|
+
href: i,
|
|
1453
|
+
variant: "secondary",
|
|
1454
|
+
children: n.manage
|
|
1455
|
+
}), /* @__PURE__ */ S(l, {
|
|
1456
|
+
fullWidth: !0,
|
|
1457
|
+
pending: o,
|
|
1458
|
+
onClick: x,
|
|
1459
|
+
variant: "secondary",
|
|
1460
|
+
children: n.signOut
|
|
1461
|
+
})]
|
|
1462
|
+
}))
|
|
1463
|
+
]
|
|
1464
|
+
});
|
|
1465
|
+
}
|
|
1466
|
+
function Ae({ currentLabel: e, product: t }) {
|
|
1467
|
+
let n = y(null), r = /* @__PURE__ */ C("span", {
|
|
1468
|
+
className: "game-ui-list-row-copy",
|
|
1469
|
+
children: [/* @__PURE__ */ S("span", {
|
|
1470
|
+
className: "game-ui-list-row-title",
|
|
1471
|
+
children: t.name
|
|
1472
|
+
}), t.description ? /* @__PURE__ */ S("span", {
|
|
1473
|
+
className: "game-ui-list-row-description",
|
|
1474
|
+
children: t.description
|
|
1475
|
+
}) : null]
|
|
1476
|
+
});
|
|
1477
|
+
return t.current ? /* @__PURE__ */ C("div", {
|
|
1478
|
+
className: "game-ui-list-row game-ui-account-menu-product",
|
|
1479
|
+
"data-game-ui-paint": "",
|
|
1480
|
+
style: d(),
|
|
1481
|
+
children: [/* @__PURE__ */ S(p, { static: !0 }), /* @__PURE__ */ C("div", {
|
|
1482
|
+
className: "game-ui-list-row-main",
|
|
1483
|
+
"aria-current": "true",
|
|
1484
|
+
children: [r, /* @__PURE__ */ S(u, { children: e })]
|
|
1485
|
+
})]
|
|
1486
|
+
}) : /* @__PURE__ */ C("div", {
|
|
1487
|
+
className: "game-ui-list-row game-ui-account-menu-product",
|
|
1488
|
+
"data-game-ui-paint": "",
|
|
1489
|
+
style: d(),
|
|
1490
|
+
children: [/* @__PURE__ */ S(p, { pressTarget: n }), /* @__PURE__ */ S("a", {
|
|
1491
|
+
className: "game-ui-list-row-main",
|
|
1492
|
+
href: t.href,
|
|
1493
|
+
ref: n,
|
|
1494
|
+
children: r
|
|
1495
|
+
})]
|
|
1496
|
+
});
|
|
1497
|
+
}
|
|
1498
|
+
//#endregion
|
|
1499
|
+
export { Oe as GameAccountMenu, Se as LiquidAnchor, Ce as LiquidPopover, xe as LiquidPresence, q as LiquidReveal };
|