@gamepark/react-game 6.0.0-alpha.0

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { SpeechBubbleProps } from './SpeechBubble';
+type Props = {
+    playerId: any;
+    speechBubbleProps?: SpeechBubbleProps;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Avatar: ({ playerId, speechBubbleProps, ...props }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,63 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var avataaars_1 = __importDefault(require("@gamepark/avataaars"));
+var react_client_1 = require("@gamepark/react-client");
+var GameProvider_1 = require("../GameProvider");
+var react_2 = require("react");
+var ChatSpeechBubble_1 = require("./ChatSpeechBubble");
+var SpeechBubble_1 = require("./SpeechBubble");
+var hooks_1 = require("../../hooks");
+var Avatar = function (_a) {
+    var _b, _c;
+    var playerId = _a.playerId, speechBubbleProps = _a.speechBubbleProps, props = __rest(_a, ["playerId", "speechBubbleProps"]);
+    var player = (0, hooks_1.usePlayer)(playerId);
+    var tutorial = (0, react_client_1.useTutorial)();
+    var context = (0, react_2.useContext)(GameProvider_1.gameContext);
+    var tutorialAvatar = tutorial && ((_b = context === null || context === void 0 ? void 0 : context.tutorial) === null || _b === void 0 ? void 0 : _b.avatars);
+    var me = (0, react_client_1.useMe)();
+    var myPlayerId = (0, hooks_1.usePlayerId)();
+    var avatar = myPlayerId === playerId ? (_c = me === null || me === void 0 ? void 0 : me.user) === null || _c === void 0 ? void 0 : _c.avatar : tutorialAvatar ? tutorialAvatar(playerId) : player === null || player === void 0 ? void 0 : player.avatar;
+    var query = new URLSearchParams(window.location.search);
+    var gameId = query.get('game');
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ css: style }, props, { children: [(0, jsx_runtime_1.jsx)(avataaars_1.default, __assign({ circle: true }, avatar, { css: avatarCss })), (speechBubbleProps === null || speechBubbleProps === void 0 ? void 0 : speechBubbleProps.children) ?
+                (0, jsx_runtime_1.jsx)(SpeechBubble_1.SpeechBubble, __assign({}, speechBubbleProps, { children: speechBubbleProps.children })) :
+                gameId && player && (0, jsx_runtime_1.jsx)(ChatSpeechBubble_1.ChatSpeechBubble, __assign({ gameId: gameId, player: player }, speechBubbleProps))] })));
+};
+exports.Avatar = Avatar;
+var style = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  box-shadow: 0 0 0.4em black;\n"], ["\n  border-radius: 50%;\n  box-shadow: 0 0 0.4em black;\n"])));
+var avatarCss = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: -6%;\n  width: 112%;\n  height: 117%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: -6%;\n  width: 112%;\n  height: 117%;\n"])));
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,kEAA0C;AAC1C,uDAA2D;AAC3D,gDAA6C;AAC7C,+BAAkD;AAClD,uDAAqD;AACrD,+CAAgE;AAChE,qCAAoD;AAO7C,IAAM,MAAM,GAAG,UAAC,EAAgD;;IAA9C,IAAA,QAAQ,cAAA,EAAE,iBAAiB,uBAAA,EAAK,KAAK,cAAvC,iCAAyC,CAAF;IAC5D,IAAM,MAAM,GAAG,IAAA,iBAAS,EAAC,QAAQ,CAAC,CAAA;IAClC,IAAM,QAAQ,GAAG,IAAA,0BAAW,GAAE,CAAA;IAC9B,IAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,0BAAW,CAAC,CAAA;IACvC,IAAM,cAAc,GAAG,QAAQ,KAAI,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,0CAAE,OAAO,CAAA,CAAA;IAC7D,IAAM,EAAE,GAAG,IAAA,oBAAK,GAAE,CAAA;IAClB,IAAM,UAAU,GAAG,IAAA,mBAAW,GAAE,CAAA;IAChC,IAAM,MAAM,GAAG,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,0CAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAA;IACtH,IAAM,KAAK,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IACzD,IAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAChC,OAAO,CACL,0CAAK,GAAG,EAAE,KAAK,IAAM,KAAK,eACxB,uBAAC,mBAAQ,aAAC,MAAM,UAAK,MAAM,IAAE,GAAG,EAAE,SAAS,IAAG,EAC7C,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,QAAQ,EAAC,CAAC;gBAC5B,uBAAC,2BAAY,eAAK,iBAAiB,cAAG,iBAAiB,CAAC,QAAQ,IAAgB,CAAC,CAAC;gBAClF,MAAM,IAAI,MAAM,IAAI,uBAAC,mCAAgB,aAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,IAAM,iBAAiB,EAAG,KAE5F,CACP,CAAA;AACH,CAAC,CAAA;AAnBY,QAAA,MAAM,UAmBlB;AAED,IAAM,KAAK,OAAG,WAAG,+HAAA,2DAGhB,IAAA,CAAA;AAED,IAAM,SAAS,OAAG,WAAG,4JAAA,wFAMpB,IAAA,CAAA"}

package/dist/components/Avatar/ChatSpeechBubble.d.ts

@@ -0,0 +1,8 @@
+import { Player } from '@gamepark/react-client';
+import { SpeechBubbleProps } from './SpeechBubble';
+type Props = {
+    gameId: string;
+    player: Player;
+} & SpeechBubbleProps;
+export declare const ChatSpeechBubble: ({ gameId, player, ...props }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Avatar/ChatSpeechBubble.js

@@ -0,0 +1,62 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatSpeechBubble = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var use_pusher_1 = require("@harelpls/use-pusher");
+var react_2 = require("react");
+var SpeechBubble_1 = require("./SpeechBubble");
+var ChatSpeechBubble = function (_a) {
+    var gameId = _a.gameId, player = _a.player, props = __rest(_a, ["gameId", "player"]);
+    var channel = (0, use_pusher_1.useChannel)("game=".concat(gameId));
+    var _b = (0, react_2.useState)(''), message = _b[0], setMessage = _b[1];
+    (0, use_pusher_1.useEvent)(channel, 'message', function (message) {
+        if (message && player.userId === message.userId) {
+            setMessage(message.text);
+        }
+    });
+    var hideMessage = function () { return setMessage(''); };
+    (0, react_2.useEffect)(function () {
+        if (message) {
+            var timeout_1 = setTimeout(hideMessage, 3000);
+            return function () { return clearTimeout(timeout_1); };
+        }
+    }, [message]);
+    var onClick = function (event) {
+        hideMessage();
+        event.stopPropagation();
+    };
+    return message ? (0, jsx_runtime_1.jsx)(SpeechBubble_1.SpeechBubble, __assign({ css: chatSpeechBubbleCss, onClick: onClick }, props, { children: message })) : null;
+};
+exports.ChatSpeechBubble = ChatSpeechBubble;
+var fadeOut = (0, react_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  to {\n    opacity: 0\n  }\n"], ["\n  to {\n    opacity: 0\n  }\n"])));
+var chatSpeechBubbleCss = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: 1s ", " 2s forwards;\n"], ["\n  animation: 1s ", " 2s forwards;\n"])), fadeOut);
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=ChatSpeechBubble.js.map

package/dist/components/Avatar/ChatSpeechBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSpeechBubble.js","sourceRoot":"","sources":["../../../src/components/Avatar/ChatSpeechBubble.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAA+C;AAE/C,mDAA2D;AAC3D,+BAAuD;AACvD,+CAAgE;AAOzD,IAAM,gBAAgB,GAAG,UAAC,EAAmC;IAAjC,IAAA,MAAM,YAAA,EAAE,MAAM,YAAA,EAAK,KAAK,cAA1B,oBAA4B,CAAF;IACzD,IAAM,OAAO,GAAG,IAAA,uBAAU,EAAC,eAAQ,MAAM,CAAE,CAAC,CAAA;IACtC,IAAA,KAAwB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAAnC,OAAO,QAAA,EAAE,UAAU,QAAgB,CAAA;IAC1C,IAAA,qBAAQ,EAAU,OAAO,EAAE,SAAS,EAAE,UAAA,OAAO;QAC3C,IAAI,OAAO,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;YAC/C,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;SACzB;IACH,CAAC,CAAC,CAAA;IACF,IAAM,WAAW,GAAG,cAAM,OAAA,UAAU,CAAC,EAAE,CAAC,EAAd,CAAc,CAAA;IACxC,IAAA,iBAAS,EAAC;QACR,IAAI,OAAO,EAAE;YACX,IAAM,SAAO,GAAG,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA;YAC7C,OAAO,cAAM,OAAA,YAAY,CAAC,SAAO,CAAC,EAArB,CAAqB,CAAA;SACnC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,IAAM,OAAO,GAAG,UAAC,KAAiB;QAChC,WAAW,EAAE,CAAA;QACb,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IACD,OAAO,OAAO,CAAC,CAAC,CAAC,uBAAC,2BAAY,aAAC,GAAG,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,cAAG,OAAO,IAAgB,CAAC,CAAC,CAAC,IAAI,CAAA;AACvH,CAAC,CAAA;AApBY,QAAA,gBAAgB,oBAoB5B;AAED,IAAM,OAAO,OAAG,iBAAS,qGAAA,iCAIxB,IAAA,CAAA;AAED,IAAM,mBAAmB,OAAG,WAAG,2GAAA,oBACb,EAAO,iBACxB,KADiB,OAAO,CACxB,CAAA"}

package/dist/components/Avatar/SpeechBubble.d.ts

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { Interpolation, Theme } from '@emotion/react';
+import { FC, HTMLAttributes } from 'react';
+export declare enum SpeechBubbleDirection {
+    TOP_LEFT = 0,
+    TOP_RIGHT = 1,
+    BOTTOM_LEFT = 2,
+    BOTTOM_RIGHT = 3
+}
+export type SpeechBubbleProps = {
+    direction?: SpeechBubbleDirection;
+    parent?: string;
+    css?: Interpolation<Theme>;
+} & HTMLAttributes<HTMLParagraphElement>;
+export declare const SpeechBubble: FC<SpeechBubbleProps>;

package/dist/components/Avatar/SpeechBubble.js

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpeechBubble = exports.SpeechBubbleDirection = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var react_dom_1 = require("react-dom");
+var SpeechBubbleDirection;
+(function (SpeechBubbleDirection) {
+    SpeechBubbleDirection[SpeechBubbleDirection["TOP_LEFT"] = 0] = "TOP_LEFT";
+    SpeechBubbleDirection[SpeechBubbleDirection["TOP_RIGHT"] = 1] = "TOP_RIGHT";
+    SpeechBubbleDirection[SpeechBubbleDirection["BOTTOM_LEFT"] = 2] = "BOTTOM_LEFT";
+    SpeechBubbleDirection[SpeechBubbleDirection["BOTTOM_RIGHT"] = 3] = "BOTTOM_RIGHT";
+})(SpeechBubbleDirection = exports.SpeechBubbleDirection || (exports.SpeechBubbleDirection = {}));
+var SpeechBubble = function (_a) {
+    var children = _a.children, _b = _a.direction, direction = _b === void 0 ? SpeechBubbleDirection.TOP_LEFT : _b, parent = _a.parent, css = _a.css, props = __rest(_a, ["children", "direction", "parent", "css"]);
+    var speechBubble = (0, jsx_runtime_1.jsx)("p", __assign({ css: [speechBubbleCss, getDirectionStyle(direction), css] }, props, { children: children }));
+    if (parent) {
+        var parentElement = document.getElementById(parent);
+        if (parentElement) {
+            return (0, react_dom_1.createPortal)(speechBubble, parentElement);
+        }
+    }
+    return speechBubble;
+};
+exports.SpeechBubble = SpeechBubble;
+var speechBubbleCss = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: max-content;\n  max-width: 20em;\n  background: white;\n  border-radius: .4em;\n  font-size: 3em;\n  padding: 0.2em 0.4em;\n  margin: 0;\n  z-index: 500;\n  pointer-events: none;\n\n  :after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-color: transparent;\n  }\n"], ["\n  position: absolute;\n  width: max-content;\n  max-width: 20em;\n  background: white;\n  border-radius: .4em;\n  font-size: 3em;\n  padding: 0.2em 0.4em;\n  margin: 0;\n  z-index: 500;\n  pointer-events: none;\n\n  :after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-color: transparent;\n  }\n"])));
+var getDirectionStyle = function (direction) {
+    switch (direction) {
+        case SpeechBubbleDirection.TOP_LEFT:
+            return [topBubble, leftBubble, rotateArrow];
+        case SpeechBubbleDirection.TOP_RIGHT:
+            return [topBubble, rightBubble, reverseRotateArrow];
+        case SpeechBubbleDirection.BOTTOM_LEFT:
+            return [bottomBubble, leftBubble, reverseRotateArrow];
+        case SpeechBubbleDirection.BOTTOM_RIGHT:
+            return [bottomBubble, rightBubble, rotateArrow];
+    }
+};
+var topBubble = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: 45%;\n\n  :after {\n    bottom: 0;\n    border-top-width: 0.4em;\n    border-bottom: 0;\n    margin-bottom: 0.3em;\n  }\n"], ["\n  bottom: 45%;\n\n  :after {\n    bottom: 0;\n    border-top-width: 0.4em;\n    border-bottom: 0;\n    margin-bottom: 0.3em;\n  }\n"])));
+var bottomBubble = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  top: 45%;\n\n  :after {\n    top: 0;\n    border-bottom-width: 0.4em;\n    border-top: 0;\n    margin-top: 0.3em;\n  }\n"], ["\n  top: 45%;\n\n  :after {\n    top: 0;\n    border-bottom-width: 0.4em;\n    border-top: 0;\n    margin-top: 0.3em;\n  }\n"])));
+var leftBubble = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  left: -0.3em;\n  transform: translateX(-100%);\n\n  :after {\n    right: 0;\n    border-left-color: white;\n    border-left-width: 0.6em;\n    border-right: 0;\n    margin-right: -0.5em;\n  }\n"], ["\n  left: -0.3em;\n  transform: translateX(-100%);\n\n  :after {\n    right: 0;\n    border-left-color: white;\n    border-left-width: 0.6em;\n    border-right: 0;\n    margin-right: -0.5em;\n  }\n"])));
+var rightBubble = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  right: -0.3em;\n  transform: translateX(100%);\n\n  :after {\n    left: 0;\n    border-right-color: white;\n    border-right-width: 0.6em;\n    border-left: 0;\n    margin-left: -0.5em;\n  }\n"], ["\n  right: -0.3em;\n  transform: translateX(100%);\n\n  :after {\n    left: 0;\n    border-right-color: white;\n    border-right-width: 0.6em;\n    border-left: 0;\n    margin-left: -0.5em;\n  }\n"])));
+var rotateArrow = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  :after {\n    transform: rotate(15deg);\n  }\n"], ["\n  :after {\n    transform: rotate(15deg);\n  }\n"])));
+var reverseRotateArrow = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  :after {\n    transform: rotate(-15deg);\n  }\n"], ["\n  :after {\n    transform: rotate(-15deg);\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=SpeechBubble.js.map

package/dist/components/Avatar/SpeechBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeechBubble.js","sourceRoot":"","sources":["../../../src/components/Avatar/SpeechBubble.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAA0D;AAE1D,uCAAwC;AAExC,IAAY,qBAEX;AAFD,WAAY,qBAAqB;IAC/B,yEAAQ,CAAA;IAAE,2EAAS,CAAA;IAAE,+EAAW,CAAA;IAAE,iFAAY,CAAA;AAChD,CAAC,EAFW,qBAAqB,GAArB,6BAAqB,KAArB,6BAAqB,QAEhC;AAQM,IAAM,YAAY,GAA0B,UAAC,EAA+E;IAA7E,IAAA,QAAQ,cAAA,EAAE,iBAA0C,EAA1C,SAAS,mBAAG,qBAAqB,CAAC,QAAQ,KAAA,EAAE,MAAM,YAAA,EAAE,GAAG,SAAA,EAAK,KAAK,cAA7E,0CAA+E,CAAF;IAC/H,IAAM,YAAY,GAAG,uCAAG,GAAG,EAAE,CAAC,eAAe,EAAE,iBAAiB,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC,IAAM,KAAK,cAAG,QAAQ,IAAK,CAAA;IAC5G,IAAI,MAAM,EAAE;QACV,IAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QACrD,IAAI,aAAa,EAAE;YACjB,OAAO,IAAA,wBAAY,EAAC,YAAY,EAAE,aAAa,CAAC,CAAA;SACjD;KACF;IACD,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA;AATY,QAAA,YAAY,gBASxB;AAED,IAAM,eAAe,OAAG,WAAG,mbAAA,+WAoB1B,IAAA,CAAA;AAED,IAAM,iBAAiB,GAAG,UAAC,SAAgC;IACzD,QAAQ,SAAS,EAAE;QACjB,KAAK,qBAAqB,CAAC,QAAQ;YACjC,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,CAAA;QAC7C,KAAK,qBAAqB,CAAC,SAAS;YAClC,OAAO,CAAC,SAAS,EAAE,WAAW,EAAE,kBAAkB,CAAC,CAAA;QACrD,KAAK,qBAAqB,CAAC,WAAW;YACpC,OAAO,CAAC,YAAY,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAA;QACvD,KAAK,qBAAqB,CAAC,YAAY;YACrC,OAAO,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,CAAC,CAAA;KAClD;AACH,CAAC,CAAA;AAED,IAAM,SAAS,OAAG,WAAG,2MAAA,uIASpB,IAAA,CAAA;AAED,IAAM,YAAY,OAAG,WAAG,kMAAA,8HASvB,IAAA,CAAA;AAED,IAAM,UAAU,OAAG,WAAG,2QAAA,uMAWrB,IAAA,CAAA;AAED,IAAM,WAAW,OAAG,WAAG,0QAAA,sMAWtB,IAAA,CAAA;AAED,IAAM,WAAW,OAAG,WAAG,wHAAA,oDAItB,IAAA,CAAA;AAED,IAAM,kBAAkB,OAAG,WAAG,yHAAA,qDAI7B,IAAA,CAAA"}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Avatar';
+export * from './ChatSpeechBubble';
+export * from './SpeechBubble';

package/dist/components/Avatar/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Avatar"), exports);
+__exportStar(require("./ChatSpeechBubble"), exports);
+__exportStar(require("./SpeechBubble"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAwB;AACxB,qDAAkC;AAClC,iDAA8B"}

package/dist/components/Chat/Chat.d.ts

@@ -0,0 +1,3 @@
+export declare const Chat: ({ gameId }: {
+    gameId: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Chat/Chat.js

@@ -0,0 +1,81 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
+var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+var react_client_1 = require("@gamepark/react-client");
+var react_2 = require("react");
+var react_i18next_1 = require("react-i18next");
+var react_infinite_scroller_1 = __importDefault(require("react-infinite-scroller"));
+var hooks_1 = require("../../hooks");
+var menus_1 = require("../menus");
+var ChatMessage_1 = require("./ChatMessage");
+var ChatTextInput_1 = require("./ChatTextInput");
+var SignInToChat_1 = require("./SignInToChat");
+var menuCss_1 = require("../menus/menuCss");
+var Chat = function (_a) {
+    var _b;
+    var gameId = _a.gameId;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _c = (0, react_2.useState)(false), isOpen = _c[0], setOpen = _c[1];
+    var me = (0, react_client_1.useMe)();
+    var playerId = (0, hooks_1.usePlayerId)();
+    var inputRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(function () {
+        if (isOpen && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isOpen]);
+    (0, hooks_1.useKeyDown)('Enter', function () { return setOpen(true); });
+    (0, hooks_1.useKeyDown)('Escape', function () { return setOpen(false); });
+    var _d = (0, react_client_1.useChatMessages)(gameId, function () {
+        if (!scrollRef.current)
+            return;
+        var _a = scrollRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight, scrollTop = _a.scrollTop;
+        if (clientHeight + scrollTop === scrollHeight) {
+            shouldScroll.current = true;
+        }
+    }), messages = _d.messages, hasMoreMessages = _d.hasMoreMessages, loading = _d.loading, fetchMore = _d.fetchMore;
+    var scrollRef = (0, react_2.useRef)(null);
+    var shouldScroll = (0, react_2.useRef)(false);
+    (0, react_2.useEffect)(function () {
+        if (!scrollRef.current || !shouldScroll.current)
+            return;
+        var _a = scrollRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        scrollRef.current.scrollTo({ top: scrollHeight - clientHeight, behavior: 'smooth' });
+        shouldScroll.current = false;
+    }, [messages]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: [menus_1.backdrop, isOpen && menus_1.displayBackdrop], onClick: function () { return setOpen(false); } }), (0, jsx_runtime_1.jsxs)("div", __assign({ css: [menuCss_1.menuBaseCss, chatCss, !isOpen && menuCss_1.hide] }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ ref: scrollRef, id: "fui", css: scrollCss }, { children: (0, jsx_runtime_1.jsx)(react_infinite_scroller_1.default, __assign({ css: scrollContentCss, useWindow: false, isReverse: true, getScrollParent: function () { return scrollRef.current; }, hasMore: !loading && hasMoreMessages && messages.length > 0, loadMore: function () { return fetchMore({ variables: { channel: "game=".concat(gameId), maxDate: messages[0].date } }); } }, { children: messages.map(function (message, index) {
+                                return (0, jsx_runtime_1.jsx)(ChatMessage_1.ChatMessage, { message: message, showAuthor: index === 0 || messages[index - 1].userId !== message.userId }, message.id);
+                            }) })) })), playerId || ((_b = me === null || me === void 0 ? void 0 : me.user) === null || _b === void 0 ? void 0 : _b.id) ? (0, jsx_runtime_1.jsx)(ChatTextInput_1.ChatTextInput, { channel: "game=".concat(gameId), inputRef: inputRef }) : (0, jsx_runtime_1.jsx)(SignInToChat_1.SignInToChat, {})] })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": t('Discuss'), title: t('Discuss'), css: [menuCss_1.floatingButtonCss, chatButtonCss], onClick: function () { return setOpen(!isOpen); } }, { children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: isOpen ? free_solid_svg_icons_1.faTimes : free_regular_svg_icons_1.faComments, css: iconStyle }) }))] }));
+};
+exports.Chat = Chat;
+var chatButtonCss = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  border-bottom-right-radius: 25%;\n  background: #28B8CE;\n  height: 2.5em;\n  width: 2.5em;\n  min-width: 38px;\n  min-height: 38px;\n\n  &:focus, &:hover {\n    background: #24a5b9;\n  }\n\n  &:active {\n    background: #2092a3;\n  }\n\n  svg {\n    position: relative;\n    width: 70%;\n    height: 60%;\n  }\n"], ["\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  border-bottom-right-radius: 25%;\n  background: #28B8CE;\n  height: 2.5em;\n  width: 2.5em;\n  min-width: 38px;\n  min-height: 38px;\n\n  &:focus, &:hover {\n    background: #24a5b9;\n  }\n\n  &:active {\n    background: #2092a3;\n  }\n\n  svg {\n    position: relative;\n    width: 70%;\n    height: 60%;\n  }\n"])));
+var iconStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: white;\n  font-size: 1.5em;\n  @media (max-height: 300px) {\n    font-size: 20px;\n  }\n"], ["\n  color: white;\n  font-size: 1.5em;\n  @media (max-height: 300px) {\n    font-size: 20px;\n  }\n"])));
+var chatCss = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 16px;\n  left: 0;\n  height: 100vh;\n  width: 360px;\n  max-width: 100vw;\n  border-bottom-right-radius: 0.5em;\n  transform-origin: top left;\n  justify-content: flex-end;\n"], ["\n  font-size: 16px;\n  left: 0;\n  height: 100vh;\n  width: 360px;\n  max-width: 100vw;\n  border-bottom-right-radius: 0.5em;\n  transform-origin: top left;\n  justify-content: flex-end;\n"])));
+var scrollCss = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: scroll;\n  scrollbar-color: rgba(74, 74, 74, 0.3) transparent;\n  scrollbar-width: thin;\n  margin-left: 16px;\n  margin-right: 8px;\n\n  &::-webkit-scrollbar {\n    width: 6px\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 7px;\n    background-color: rgba(74, 74, 74, 0.3);\n  }\n\n  align-self: stretch;\n  display: flex;\n  flex-direction: column;\n"], ["\n  overflow-x: hidden;\n  overflow-y: scroll;\n  scrollbar-color: rgba(74, 74, 74, 0.3) transparent;\n  scrollbar-width: thin;\n  margin-left: 16px;\n  margin-right: 8px;\n\n  &::-webkit-scrollbar {\n    width: 6px\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 7px;\n    background-color: rgba(74, 74, 74, 0.3);\n  }\n\n  align-self: stretch;\n  display: flex;\n  flex-direction: column;\n"])));
+var scrollContentCss = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 3em;\n"], ["\n  position: relative;\n  padding-left: 3em;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=Chat.js.map

package/dist/components/Chat/Chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"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"}

package/dist/components/Chat/ChatMessage.d.ts

@@ -0,0 +1,7 @@
+import { Message } from '@gamepark/react-client';
+type Props = {
+    message: Message;
+    showAuthor: boolean;
+};
+export declare const ChatMessage: ({ message, showAuthor }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chat/ChatMessage.js

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessage = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var ChatMessageAuthor_1 = require("./ChatMessageAuthor");
+var ChatMessage = function (_a) {
+    var message = _a.message, showAuthor = _a.showAuthor;
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showAuthor && (0, jsx_runtime_1.jsx)(ChatMessageAuthor_1.ChatMessageAuthor, { author: message.userId }), (0, jsx_runtime_1.jsx)("p", __assign({ css: textCss }, { children: message.text }))] });
+};
+exports.ChatMessage = ChatMessage;
+var textCss = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1.5;\n  margin: 0;\n"], ["\n  line-height: 1.5;\n  margin: 0;\n"])));
+var templateObject_1;
+//# sourceMappingURL=ChatMessage.js.map

package/dist/components/Chat/ChatMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AAEpC,yDAAuD;AAOhD,IAAM,WAAW,GAAG,UAAC,EAA8B;QAA5B,OAAO,aAAA,EAAE,UAAU,gBAAA;IAAc,OAAA,6DAC5D,UAAU,IAAI,uBAAC,qCAAiB,IAAC,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,EAC3D,uCAAG,GAAG,EAAE,OAAO,gBAAG,OAAO,CAAC,IAAI,IAAK,IAClC;AAH4D,CAG5D,CAAA;AAHU,QAAA,WAAW,eAGrB;AAEH,IAAM,OAAO,OAAG,WAAG,2GAAA,uCAGlB,IAAA,CAAA"}

package/dist/components/Chat/ChatMessageAuthor.d.ts

@@ -0,0 +1,3 @@
+export declare const ChatMessageAuthor: ({ author }: {
+    author: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Chat/ChatMessageAuthor.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessageAuthor = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var avataaars_1 = __importDefault(require("@gamepark/avataaars"));
+var react_client_1 = require("@gamepark/react-client");
+var ChatMessageAuthor = function (_a) {
+    var author = _a.author;
+    var _b = (0, react_client_1.useMessageAuthor)(author), avatar = _b.avatar, name = _b.name;
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(avataaars_1.default, __assign({ style: { width: '48px', height: '48px', position: 'absolute', left: '-3px' }, circle: true }, avatar)), (0, jsx_runtime_1.jsx)("p", __assign({ css: authorCss }, { children: name }))] });
+};
+exports.ChatMessageAuthor = ChatMessageAuthor;
+var authorCss = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: bold;\n  line-height: 1.5;\n  margin: 4px 0 0;\n"], ["\n  font-weight: bold;\n  line-height: 1.5;\n  margin: 4px 0 0;\n"])));
+var templateObject_1;
+//# sourceMappingURL=ChatMessageAuthor.js.map

package/dist/components/Chat/ChatMessageAuthor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageAuthor.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatMessageAuthor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,kEAAwC;AACxC,uDAAyD;AAElD,IAAM,iBAAiB,GAAG,UAAC,EAA8B;QAA5B,MAAM,YAAA;IAClC,IAAA,KAAmB,IAAA,+BAAgB,EAAC,MAAM,CAAC,EAAzC,MAAM,YAAA,EAAE,IAAI,UAA6B,CAAA;IAEjD,OAAO,6DACL,uBAAC,mBAAM,aAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,UAAK,MAAM,EAAG,EAC1G,uCAAG,GAAG,EAAE,SAAS,gBAAG,IAAI,IAAK,IAC5B,CAAA;AACL,CAAC,CAAA;AAPY,QAAA,iBAAiB,qBAO7B;AAED,IAAM,SAAS,OAAG,WAAG,uIAAA,mEAIpB,IAAA,CAAA"}

package/dist/components/Chat/ChatTextInput.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Props = {
+    channel: string;
+    inputRef: RefObject<HTMLInputElement>;
+};
+export declare const ChatTextInput: ({ channel, inputRef }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chat/ChatTextInput.js

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatTextInput = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
+var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+var react_client_1 = require("@gamepark/react-client");
+var react_2 = require("react");
+var react_i18next_1 = require("react-i18next");
+var css_1 = require("../../css");
+var ChatTextInput = function (_a) {
+    var channel = _a.channel, inputRef = _a.inputRef;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _b = (0, react_2.useState)(''), text = _b[0], setText = _b[1];
+    var sendMessage = (0, react_client_1.useSendMessage)()[0];
+    var onSubmit = function (event) {
+        event.preventDefault();
+        sendMessage({ variables: { channel: channel, text: text } }).catch(console.error);
+        setText('');
+    };
+    return ((0, jsx_runtime_1.jsxs)("form", __assign({ css: messageBar, onSubmit: onSubmit }, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", placeholder: t('Type a message'), css: textInputCss, value: text, onChange: function (event) { return setText(event.target.value); } }), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": t('Send'), title: t('Send'), css: [css_1.buttonResetCss, sendButtonStyle] }, { children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_regular_svg_icons_1.faPaperPlane }) }))] })));
+};
+exports.ChatTextInput = ChatTextInput;
+var messageBar = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0.5em;\n  background: #28B8CE;\n  display: flex;\n"], ["\n  width: 100%;\n  padding: 0.5em;\n  background: #28B8CE;\n  display: flex;\n"])));
+var textInputCss = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-grow: 1;\n  border: none;\n  border-radius: 1em;\n  padding: 0.2em 0.5em;\n\n  &:focus-visible {\n    outline: none;\n  }\n"], ["\n  flex-grow: 1;\n  border: none;\n  border-radius: 1em;\n  padding: 0.2em 0.5em;\n\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var sendButtonStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: none;\n  color: white;\n"], ["\n  background: none;\n  color: white;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=ChatTextInput.js.map

package/dist/components/Chat/ChatTextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTextInput.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatTextInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,8EAAkE;AAClE,oEAAgE;AAChE,uDAAuD;AACvD,+BAAsD;AACtD,+CAA8C;AAC9C,iCAA0C;AAOnC,IAAM,aAAa,GAAG,UAAC,EAA4B;QAA1B,OAAO,aAAA,EAAE,QAAQ,cAAA;IACvC,IAAA,CAAC,GAAK,IAAA,8BAAc,GAAE,EAArB,CAAqB;IACxB,IAAA,KAAkB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA7B,IAAI,QAAA,EAAE,OAAO,QAAgB,CAAA;IAC7B,IAAA,WAAW,GAAI,IAAA,6BAAc,GAAE,GAApB,CAAoB;IACtC,IAAM,QAAQ,GAAG,UAAC,KAA6B;QAC7C,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO,SAAA,EAAE,IAAI,MAAA,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAClE,OAAO,CAAC,EAAE,CAAC,CAAA;IACb,CAAC,CAAA;IACD,OAAO,CACL,2CAAM,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,iBACvC,kCAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,CAAC,CAAC,gBAAgB,CAAE,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAA3B,CAA2B,GAAG,EACtJ,0DAAoB,CAAC,CAAC,MAAM,CAAE,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAE,EAAE,GAAG,EAAE,CAAC,oBAAc,EAAE,eAAe,CAAC,gBAAE,uBAAC,mCAAe,IAAC,IAAI,EAAE,qCAAY,GAAG,IAAS,KACrI,CACR,CAAA;AACH,CAAC,CAAA;AAfY,QAAA,aAAa,iBAezB;AAED,IAAM,UAAU,OAAG,WAAG,qJAAA,iFAKrB,IAAA,CAAA;AAED,IAAM,YAAY,OAAG,WAAG,0MAAA,sIASvB,IAAA,CAAA;AAED,IAAM,eAAe,OAAG,WAAG,8GAAA,0CAG1B,IAAA,CAAA"}

package/dist/components/Chat/SignInToChat.d.ts

@@ -0,0 +1 @@
+export declare const SignInToChat: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Chat/SignInToChat.js

@@ -0,0 +1,36 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignInToChat = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var react_client_1 = require("@gamepark/react-client");
+var react_i18next_1 = require("react-i18next");
+var css_1 = require("../../css");
+var SignInToChat = function () {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var query = new URLSearchParams(window.location.search);
+    var locale = query.get('locale') || 'en';
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ css: style }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ css: textCss }, { children: t('sign-in-to-chat') })), (0, jsx_runtime_1.jsx)("button", __assign({ css: [css_1.buttonResetCss, signInButtonCss], onClick: function () { return window.location.href = "".concat(react_client_1.PLATFORM_URI, "/").concat(locale, "/auth/sign-in?callbackUrl=").concat(encodeURIComponent(window.location.href)); } }, { children: t('Sign in') }))] })));
+};
+exports.SignInToChat = SignInToChat;
+var style = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  padding: 8px 16px;\n  text-align: center;\n"], ["\n  width: 100%;\n  padding: 8px 16px;\n  text-align: center;\n"])));
+var textCss = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  line-height: 1.5;\n  margin: 0;\n  font-weight: bold;\n"], ["\n  line-height: 1.5;\n  margin: 0;\n  font-weight: bold;\n"])));
+var signInButtonCss = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0.2em 0.5em;\n  border-radius: 2em;\n  border: 0.05em solid #002448;\n  color: #002448;\n  background: transparent;\n  font-size: 1.25em;\n\n  &:focus, &:hover {\n    background: #c2ebf1;\n  }\n\n  &:active {\n    background: #ade4ec;\n  }\n"], ["\n  padding: 0.2em 0.5em;\n  border-radius: 2em;\n  border: 0.05em solid #002448;\n  color: #002448;\n  background: transparent;\n  font-size: 1.25em;\n\n  &:focus, &:hover {\n    background: #c2ebf1;\n  }\n\n  &:active {\n    background: #ade4ec;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SignInToChat.js.map

package/dist/components/Chat/SignInToChat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInToChat.js","sourceRoot":"","sources":["../../../src/components/Chat/SignInToChat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,uDAAqD;AACrD,+CAA8C;AAC9C,iCAA0C;AAEnC,IAAM,YAAY,GAAG;IAClB,IAAA,CAAC,GAAK,IAAA,8BAAc,GAAE,EAArB,CAAqB;IAC9B,IAAM,KAAK,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IACzD,IAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;IAC1C,OAAO,CACL,0CAAK,GAAG,EAAE,KAAK,iBACb,uCAAG,GAAG,EAAE,OAAO,gBAAG,CAAC,CAAC,iBAAiB,CAAC,IAAK,EAC3C,4CAAQ,GAAG,EAAE,CAAC,oBAAc,EAAE,eAAe,CAAC,EACtC,OAAO,EAAE,cAAM,OAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,UAAG,2BAAY,cAAI,MAAM,uCAA6B,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAE,EAAvH,CAAuH,gBAC3I,CAAC,CAAC,SAAS,CAAC,IACN,KACL,CACP,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,YAAY,gBAaxB;AAED,IAAM,KAAK,OAAG,WAAG,qIAAA,iEAIhB,IAAA,CAAA;AAED,IAAM,OAAO,OAAG,WAAG,iIAAA,6DAIlB,IAAA,CAAA;AAED,IAAM,eAAe,OAAG,WAAG,oUAAA,gQAe1B,IAAA,CAAA"}

package/dist/components/Chat/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Chat';
+export * from './ChatMessage';
+export * from './ChatMessageAuthor';
+export * from './ChatTextInput';
+export * from './SignInToChat';

package/dist/components/Chat/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Chat"), exports);
+__exportStar(require("./ChatMessage"), exports);
+__exportStar(require("./ChatMessageAuthor"), exports);
+__exportStar(require("./ChatTextInput"), exports);
+__exportStar(require("./SignInToChat"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Chat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAsB;AACtB,gDAA6B;AAC7B,sDAAmC;AACnC,kDAA+B;AAC/B,iDAA8B"}