@gamepark/react-game 6.38.4 → 7.0.0-beta.0

package/dist/components/PlayerPanel/Counters.js

@@ -1,45 +1,51 @@
-"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.Counters = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var Counters = function (props) {
-    var counters = props.counters, _a = props.lineSize, lineSize = _a === void 0 ? 2 : _a;
-    if (!counters.length)
-        return null;
-    if (counters.length === 1)
-        return (0, jsx_runtime_1.jsx)(Counter, __assign({}, counters[0], { unique: true }));
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ css: counterGridCss(Math.min(counters.length, lineSize)) }, { children: counters.map(function (counter, i) { return ((0, jsx_runtime_1.jsx)(Counter, __assign({}, counter), i)); }) })));
-};
-exports.Counters = Counters;
-var Counter = function (props) {
-    var image = props.image, value = props.value, imageCss = props.imageCss, unique = props.unique;
-    if (image === undefined && value === undefined)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)("span", __assign({ css: [data, unique && uniqCounterCss, !unique && counterCss] }, { children: [(0, jsx_runtime_1.jsx)("div", { css: [mini, mainIconBackground(image), imageCss] }), (0, jsx_runtime_1.jsx)("span", { children: value })] })));
-};
-var counterGridCss = function (size) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  gap: 0.5em;\n  margin-top: 1em;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  gap: 0.5em;\n  margin-top: 1em;\n"])), size); };
-var mainIconBackground = function (image) { return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: contain;\n"], ["\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: contain;\n"])), image); };
-var mini = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 1em;\n  width: 1em;\n  align-self: center;\n"], ["\n  height: 1em;\n  width: 1em;\n  align-self: center;\n"])));
-var data = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 2;\n"], ["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 2;\n"])));
-var rightAlignment = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"], ["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"])));
-var uniqCounterCss = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 3.5em;\n  font-size: 2.5em;\n  top: 1.7em;\n  left: initial;\n  right: 0.25em;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  ", ";\n\n  > span {\n    text-align: right;\n    width: 1.7em;\n    bottom: 0.2em;\n  }\n"], ["\n  width: 3.5em;\n  font-size: 2.5em;\n  top: 1.7em;\n  left: initial;\n  right: 0.25em;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  ", ";\n\n  > span {\n    text-align: right;\n    width: 1.7em;\n    bottom: 0.2em;\n  }\n"])), rightAlignment);
-var counterCss = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 3.5em;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n\n  > span {\n    text-align: right;\n    bottom: 0.2em;\n  }\n"], ["\n  font-size: 3.5em;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n\n  > span {\n    text-align: right;\n    bottom: 0.2em;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+"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.Counters = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var compat_1 = require("es-toolkit/compat");
+var Counters = function (props) {
+    var counters = props.counters, lineSize = props.lineSize;
+    if (!counters.length)
+        return null;
+    if (counters.length === 1)
+        return (0, jsx_runtime_1.jsx)(Counter, __assign({}, counters[0], { unique: true }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: counterGridCss(lineSize), children: [(0, compat_1.times)(Math.max(lineSize - counters.length), function () { return (0, jsx_runtime_1.jsx)("span", {}); }), counters.map(function (counter, i) { return ((0, jsx_runtime_1.jsx)(Counter, __assign({}, counter), i)); })] }));
+};
+exports.Counters = Counters;
+var Counter = function (props) {
+    var image = props.image, value = props.value, imageCss = props.imageCss, unique = props.unique;
+    if (image === undefined && value === undefined)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("span", { css: [
+            data,
+            rightAlignment,
+            unique && uniqCounterCss,
+            !unique && counterCss
+        ], children: [(0, jsx_runtime_1.jsx)("div", { css: [mini, mainIconBackground(image), imageCss] }), (0, jsx_runtime_1.jsx)("span", { children: value })] }));
+};
+var counterGridCss = function (size) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  gap: 0.4em;\n  align-items: flex-end;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  gap: 0.4em;\n  align-items: flex-end;\n"])), size); };
+var mainIconBackground = function (image) { return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center;\n"], ["\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center;\n"])), image); };
+var mini = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 1em;\n  width: 1em;\n  align-self: center;\n"], ["\n  height: 1em;\n  width: 1em;\n  align-self: center;\n"])));
+var data = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 2;\n"], ["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 2;\n"])));
+var rightAlignment = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"], ["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"])));
+var uniqCounterCss = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 3.5em;\n  font-size: 2.5em;\n  top: 1.7em;\n  left: initial;\n  right: 0.25em;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  ", ";\n\n  > span {\n    text-align: right;\n    width: 1.7em;\n    bottom: 0.2em;\n  }\n"], ["\n  width: 3.5em;\n  font-size: 2.5em;\n  top: 1.7em;\n  left: initial;\n  right: 0.25em;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  ", ";\n\n  > span {\n    text-align: right;\n    width: 1.7em;\n    bottom: 0.2em;\n  }\n"])), rightAlignment);
+var counterCss = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n\n  > span {\n    text-align: right;\n    bottom: 0.2em;\n  }\n"], ["\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n\n  > span {\n    text-align: right;\n    bottom: 0.2em;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 //# sourceMappingURL=Counters.js.map

package/dist/components/PlayerPanel/Counters.js.map

@@ -1 +1 @@
-{"version":3,"file":"Counters.js","sourceRoot":"","sources":["../../../src/components/PlayerPanel/Counters.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAA0D;AAanD,IAAM,QAAQ,GAAsB,UAAC,KAAK;IACvC,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,KAAiB,KAAK,SAAV,EAAZ,QAAQ,mBAAG,CAAC,KAAA,CAAU;IACxC,IAAI,CAAC,QAAQ,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IACjC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,uBAAC,OAAO,eAAK,QAAQ,CAAC,CAAC,CAAC,IAAE,MAAM,UAAG,CAAA;IAErE,OAAO,CACL,yCAAK,GAAG,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,gBAC1D,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC,IAAK,OAAA,CAC5B,uBAAC,OAAO,eAAa,OAAO,GAAd,CAAC,CAAiB,CACjC,EAF6B,CAE7B,CAAC,IACE,CACP,CAAA;AACH,CAAC,CAAA;AAZY,QAAA,QAAQ,YAYpB;AAED,IAAM,OAAO,GAA4C,UAAC,KAAK;IACrD,IAAA,KAAK,GAA8B,KAAK,MAAnC,EAAE,KAAK,GAAuB,KAAK,MAA5B,EAAE,QAAQ,GAAa,KAAK,SAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAU;IAChD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAA;IAC3D,OAAO,CACL,2CAAM,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,MAAM,IAAI,UAAU,CAAC,iBAChE,gCAAK,GAAG,EAAE,CAAC,IAAI,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,GAAG,EACxD,2CAAO,KAAK,GAAQ,KACf,CACR,CAAA;AACH,CAAC,CAAA;AAED,IAAM,cAAc,GAAG,UAAC,IAAY,IAAK,WAAA,WAAG,0KAAA,sDAEV,EAAI,8CAGrC,KAHiC,IAAI,GAFG,CAKxC,CAAA;AAED,IAAM,kBAAkB,GAAG,UAAC,KAAa,IAAK,WAAA,WAAG,sKAAA,4BACvB,EAAK,oEAG9B,KAHyB,KAAK,GADe,CAI7C,CAAA;AACD,IAAM,IAAI,OAAG,WAAG,8HAAA,0DAIf,IAAA,CAAA;AAGD,IAAM,IAAI,OAAG,WAAG,mMAAA,+HAMf,IAAA,CAAA;AAED,IAAM,cAAc,OAAG,WAAG,gIAAA,4DAIzB,IAAA,CAAA;AAED,IAAM,cAAc,OAAG,WAAG,yUAAA,4KAStB,EAAc,uFAOjB,KAPG,cAAc,CAOjB,CAAA;AAED,IAAM,UAAU,OAAG,WAAG,+QAAA,2MAYrB,IAAA,CAAA"}
+{"version":3,"file":"Counters.js","sourceRoot":"","sources":["../../../src/components/PlayerPanel/Counters.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAA0D;AAC1D,4CAAyC;AAalC,IAAM,QAAQ,GAAsB,UAAC,KAAK;IACvC,IAAA,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAU;IACpC,IAAI,CAAC,QAAQ,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IACjC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,uBAAC,OAAO,eAAK,QAAQ,CAAC,CAAC,CAAC,IAAE,MAAM,UAAE,CAAA;IAEpE,OAAO,CACL,iCAAK,GAAG,EAAE,cAAc,CAAC,QAAQ,CAAC,aAC/B,IAAA,cAAK,EAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAM,OAAA,kCAAQ,EAAR,CAAQ,CAAC,EAC3D,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC,IAAK,OAAA,CAC5B,uBAAC,OAAO,eAAa,OAAO,GAAd,CAAC,CAAiB,CACjC,EAF6B,CAE7B,CAAC,IACE,CACP,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,QAAQ,YAapB;AAED,IAAM,OAAO,GAA4C,UAAC,KAAK;IACrD,IAAA,KAAK,GAA8B,KAAK,MAAnC,EAAE,KAAK,GAAuB,KAAK,MAA5B,EAAE,QAAQ,GAAa,KAAK,SAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAU;IAChD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAA;IAC3D,OAAO,CACL,kCACE,GAAG,EAAE;YACH,IAAI;YACJ,cAAc;YACd,MAAM,IAAI,cAAc;YACxB,CAAC,MAAM,IAAI,UAAU;SACtB,aAED,gCAAK,GAAG,EAAE,CAAC,IAAI,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,GAAG,EACxD,2CAAO,KAAK,GAAQ,IACf,CACR,CAAA;AACH,CAAC,CAAA;AAED,IAAM,cAAc,GAAG,UAAC,IAAY,IAAK,WAAA,WAAG,gLAAA,sDAEV,EAAI,oDAGrC,KAHiC,IAAI,GAFG,CAKxC,CAAA;AAED,IAAM,kBAAkB,GAAG,UAAC,KAAa,IAAK,WAAA,WAAG,sMAAA,4BACvB,EAAK,oGAI9B,KAJyB,KAAK,GADe,CAK7C,CAAA;AACD,IAAM,IAAI,OAAG,WAAG,8HAAA,0DAIf,IAAA,CAAA;AAED,IAAM,IAAI,OAAG,WAAG,mMAAA,+HAMf,IAAA,CAAA;AAED,IAAM,cAAc,OAAG,WAAG,gIAAA,4DAIzB,IAAA,CAAA;AAED,IAAM,cAAc,OAAG,WAAG,yUAAA,4KAStB,EAAc,uFAOjB,KAPG,cAAc,CAOjB,CAAA;AAED,IAAM,UAAU,OAAG,WAAG,0PAAA,sLAWrB,IAAA,CAAA"}

package/dist/components/PlayerPanel/PlayerPanel.d.ts

@@ -1,8 +1,8 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-export type PlayerPanelProps<PlayerId extends number = number> = {
-    playerId: PlayerId;
-    color?: string;
-    activeRing?: boolean;
-    speak?: string | ReactNode;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const PlayerPanel: FC<PlayerPanelProps>;
+import { FC, HTMLAttributes, ReactNode } from 'react';
+export type PlayerPanelProps<PlayerId extends number = number> = {
+    playerId: PlayerId;
+    color?: string;
+    activeRing?: boolean;
+    speak?: string | ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const PlayerPanel: FC<PlayerPanelProps>;

package/dist/components/PlayerPanel/PlayerPanel.js

@@ -1,56 +1,56 @@
-"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.PlayerPanel = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var hooks_1 = require("../../hooks");
-var Avatar_1 = require("../Avatar");
-var GamePoints_1 = require("../GamePoints");
-var PlayerTimer_1 = require("../PlayerTimer");
-var PlayerPanel = function (p) {
-    var _a;
-    var playerId = p.playerId, activeRing = p.activeRing, _b = p.color, color = _b === void 0 ? '#28B8CE' : _b, children = p.children, speak = p.speak, props = __rest(p, ["playerId", "activeRing", "color", "children", "speak"]);
-    var playerName = (0, hooks_1.usePlayerName)(playerId);
-    var rules = (0, hooks_1.useRules)();
-    var isTurnToPlay = (_a = rules === null || rules === void 0 ? void 0 : rules.isTurnToPlay(playerId)) !== null && _a !== void 0 ? _a : false;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ css: panelPlayerStyle(color, isTurnToPlay) }, props, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { css: avatarStyle, playerId: playerId, speechBubbleProps: { direction: Avatar_1.SpeechBubbleDirection.BOTTOM_LEFT, children: typeof speak === 'string' ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: speak }) : speak } }), activeRing && isTurnToPlay && (0, jsx_runtime_1.jsx)("div", __assign({ css: isPlaying }, { children: (0, jsx_runtime_1.jsx)("div", { css: isTurnToPlay && circle }) })), (0, jsx_runtime_1.jsx)("h2", __assign({ css: nameStyle }, { children: playerName })), !(rules === null || rules === void 0 ? void 0 : rules.isOver()) && (0, jsx_runtime_1.jsx)(PlayerTimer_1.PlayerTimer, { playerId: playerId, css: timerStyle }), (0, jsx_runtime_1.jsx)(GamePoints_1.GamePoints, { playerId: playerId, css: gamePointCss }), children] })));
-};
-exports.PlayerPanel = PlayerPanel;
-var panelPlayerStyle = function (color, active) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: black;\n  border: 0.5em solid ", ";\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n"], ["\n  background-color: ", ";\n  color: black;\n  border: 0.5em solid ", ";\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n"])), active ? '#f0fbfc' : '#dddddd', color); };
-var avatarStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 1;\n"])));
-var isPlaying = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 0;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 0;\n"])));
-var circleAnimation = (0, react_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"], ["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"])));
-var inset = 0.8;
-var circle = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: linear-gradient(\n          to bottom, gold 0%,\n          rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"], ["\n  background-image: linear-gradient(\n          to bottom, gold 0%,\n          rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"])), inset, inset, inset, inset, circleAnimation);
-var nameStyle = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.3em;\n  left: 3.1em;\n  max-width: 7.3em;\n  font-size: 2.4em;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"], ["\n  position: absolute;\n  top: 0.3em;\n  left: 3.1em;\n  max-width: 7.3em;\n  font-size: 2.4em;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
-var timerStyle = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"], ["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"])));
-var gamePointCss = (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"], ["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+"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.PlayerPanel = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var hooks_1 = require("../../hooks");
+var Avatar_1 = require("../Avatar");
+var GamePoints_1 = require("../GamePoints");
+var PlayerTimer_1 = require("../PlayerTimer");
+var PlayerPanel = function (p) {
+    var _a;
+    var playerId = p.playerId, activeRing = p.activeRing, _b = p.color, color = _b === void 0 ? '#28B8CE' : _b, children = p.children, speak = p.speak, props = __rest(p, ["playerId", "activeRing", "color", "children", "speak"]);
+    var playerName = (0, hooks_1.usePlayerName)(playerId);
+    var rules = (0, hooks_1.useRules)();
+    var isTurnToPlay = (_a = rules === null || rules === void 0 ? void 0 : rules.isTurnToPlay(playerId)) !== null && _a !== void 0 ? _a : false;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ css: panelPlayerStyle(color, isTurnToPlay) }, props, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { css: avatarStyle, playerId: playerId, speechBubbleProps: { direction: Avatar_1.SpeechBubbleDirection.BOTTOM_LEFT, children: typeof speak === 'string' ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: speak }) : speak } }), activeRing && isTurnToPlay && (0, jsx_runtime_1.jsx)("div", { css: isPlaying, children: (0, jsx_runtime_1.jsx)("div", { css: isTurnToPlay && circle }) }), (0, jsx_runtime_1.jsx)("h2", { css: nameStyle, children: playerName }), !(rules === null || rules === void 0 ? void 0 : rules.isOver()) && (0, jsx_runtime_1.jsx)(PlayerTimer_1.PlayerTimer, { playerId: playerId, css: timerStyle }), (0, jsx_runtime_1.jsx)(GamePoints_1.GamePoints, { playerId: playerId, css: gamePointCss }), children] })));
+};
+exports.PlayerPanel = PlayerPanel;
+var panelPlayerStyle = function (color, active) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: black;\n  border: 0.5em solid ", ";\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n"], ["\n  background-color: ", ";\n  color: black;\n  border: 0.5em solid ", ";\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n"])), active ? '#f0fbfc' : '#dddddd', color); };
+var avatarStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 1;\n"])));
+var isPlaying = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 0;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 0;\n"])));
+var circleAnimation = (0, react_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"], ["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"])));
+var inset = 0.8;
+var circle = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: linear-gradient(\n          to bottom, gold 0%,\n          rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"], ["\n  background-image: linear-gradient(\n          to bottom, gold 0%,\n          rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"])), inset, inset, inset, inset, circleAnimation);
+var nameStyle = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.3em;\n  left: 3.1em;\n  max-width: 7.3em;\n  font-size: 2.4em;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"], ["\n  position: absolute;\n  top: 0.3em;\n  left: 3.1em;\n  max-width: 7.3em;\n  font-size: 2.4em;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
+var timerStyle = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"], ["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"])));
+var gamePointCss = (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"], ["\n  position: absolute;\n  top: 1.6em;\n  left: 3.1em;\n  font-size: 2.5em;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 //# sourceMappingURL=PlayerPanel.js.map

package/dist/components/PlayerPanel/PlayerPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayerPanel.js","sourceRoot":"","sources":["../../../src/components/PlayerPanel/PlayerPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAA+C;AAG/C,qCAAqD;AACrD,oCAAyD;AACzD,4CAA0C;AAC1C,8CAA4C;AASrC,IAAM,WAAW,GAAyB,UAAC,CAAC;;IACzC,IAAA,QAAQ,GAA+D,CAAC,SAAhE,EAAE,UAAU,GAAmD,CAAC,WAApD,EAAE,KAAiD,CAAC,MAAjC,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,QAAQ,GAAsB,CAAC,SAAvB,EAAE,KAAK,GAAe,CAAC,MAAhB,EAAK,KAAK,UAAK,CAAC,EAA1E,wDAAsE,CAAF,CAAM;IAChF,IAAM,UAAU,GAAG,IAAA,qBAAa,EAAC,QAAQ,CAAC,CAAA;IAC1C,IAAM,KAAK,GAAG,IAAA,gBAAQ,GAAiB,CAAA;IACvC,IAAM,YAAY,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,QAAQ,CAAC,mCAAI,KAAK,CAAA;IAC3D,OAAO,CACL,0CAAK,GAAG,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,IAAM,KAAK,eACxD,uBAAC,eAAM,IAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EACpC,iBAAiB,EAAE,EAAE,SAAS,EAAE,8BAAqB,CAAC,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,2DAAG,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EACzI,UAAU,IAAI,YAAY,IAAI,yCAAK,GAAG,EAAE,SAAS,gBAChD,gCAAK,GAAG,EAAE,YAAY,IAAI,MAAM,GAAG,IAC/B,EACN,wCAAI,GAAG,EAAE,SAAS,gBAAG,UAAU,IAAM,EACpC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE,CAAA,IAAI,uBAAC,yBAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,GAAG,EACxE,uBAAC,uBAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,YAAY,GAAG,EACnD,QAAQ,KACL,CACP,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,WAAW,eAkBvB;AAED,IAAM,gBAAgB,GAAG,UAAC,KAAa,EAAE,MAAgB,IAAK,WAAA,WAAG,2OAAA,wBAC3C,EAA8B,4CAE5B,EAAK,+FAG5B,KALqB,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAE5B,KAAK,GAHiC,CAM7D,CAAA;AAED,IAAM,WAAW,OAAG,WAAG,kNAAA,8IAStB,IAAA,CAAA;AAED,IAAM,SAAS,OAAG,WAAG,iNAAA,6IASpB,IAAA,CAAA;AAED,IAAM,eAAe,OAAG,iBAAS,iKAAA,6FAOhC,IAAA,CAAA;AAED,IAAM,KAAK,GAAG,GAAG,CAAA;AACjB,IAAM,MAAM,OAAG,WAAG,oVAAA,4IAKR,EAAK,kBACF,EAAK,iBACN,EAAK,gBACN,EAAK,+CAED,EAAe,wBAC7B,KANS,KAAK,EACF,KAAK,EACN,KAAK,EACN,KAAK,EAED,eAAe,CAC7B,CAAA;AAGD,IAAM,SAAS,OAAG,WAAG,+PAAA,2LAUpB,IAAA,CAAA;AAED,IAAM,UAAU,OAAG,WAAG,mJAAA,+EAKrB,IAAA,CAAA;AAED,IAAM,YAAY,OAAG,WAAG,mJAAA,+EAKvB,IAAA,CAAA"}
+{"version":3,"file":"PlayerPanel.js","sourceRoot":"","sources":["../../../src/components/PlayerPanel/PlayerPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAA+C;AAG/C,qCAAqD;AACrD,oCAAyD;AACzD,4CAA0C;AAC1C,8CAA4C;AASrC,IAAM,WAAW,GAAyB,UAAC,CAAC;;IACzC,IAAA,QAAQ,GAA+D,CAAC,SAAhE,EAAE,UAAU,GAAmD,CAAC,WAApD,EAAE,KAAiD,CAAC,MAAjC,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,QAAQ,GAAsB,CAAC,SAAvB,EAAE,KAAK,GAAe,CAAC,MAAhB,EAAK,KAAK,UAAK,CAAC,EAA1E,wDAAsE,CAAF,CAAM;IAChF,IAAM,UAAU,GAAG,IAAA,qBAAa,EAAC,QAAQ,CAAC,CAAA;IAC1C,IAAM,KAAK,GAAG,IAAA,gBAAQ,GAAiB,CAAA;IACvC,IAAM,YAAY,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,QAAQ,CAAC,mCAAI,KAAK,CAAA;IAC3D,OAAO,CACL,0CAAK,GAAG,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,IAAM,KAAK,eACxD,uBAAC,eAAM,IAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EACpC,iBAAiB,EAAE,EAAE,SAAS,EAAE,8BAAqB,CAAC,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,2DAAG,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EACzI,UAAU,IAAI,YAAY,IAAI,gCAAK,GAAG,EAAE,SAAS,YAChD,gCAAK,GAAG,EAAE,YAAY,IAAI,MAAM,GAAG,GAC/B,EACN,+BAAI,GAAG,EAAE,SAAS,YAAG,UAAU,GAAM,EACpC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE,CAAA,IAAI,uBAAC,yBAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,GAAG,EACxE,uBAAC,uBAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,YAAY,GAAG,EACnD,QAAQ,KACL,CACP,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,WAAW,eAkBvB;AAED,IAAM,gBAAgB,GAAG,UAAC,KAAa,EAAE,MAAgB,IAAK,WAAA,WAAG,2OAAA,wBAC3C,EAA8B,4CAE5B,EAAK,+FAG5B,KALqB,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAE5B,KAAK,GAHiC,CAM7D,CAAA;AAED,IAAM,WAAW,OAAG,WAAG,kNAAA,8IAStB,IAAA,CAAA;AAED,IAAM,SAAS,OAAG,WAAG,iNAAA,6IASpB,IAAA,CAAA;AAED,IAAM,eAAe,OAAG,iBAAS,iKAAA,6FAOhC,IAAA,CAAA;AAED,IAAM,KAAK,GAAG,GAAG,CAAA;AACjB,IAAM,MAAM,OAAG,WAAG,oVAAA,4IAKR,EAAK,kBACF,EAAK,iBACN,EAAK,gBACN,EAAK,+CAED,EAAe,wBAC7B,KANS,KAAK,EACF,KAAK,EACN,KAAK,EACN,KAAK,EAED,eAAe,CAC7B,CAAA;AAGD,IAAM,SAAS,OAAG,WAAG,+PAAA,2LAUpB,IAAA,CAAA;AAED,IAAM,UAAU,OAAG,WAAG,mJAAA,+EAKrB,IAAA,CAAA;AAED,IAAM,YAAY,OAAG,WAAG,mJAAA,+EAKvB,IAAA,CAAA"}

package/dist/components/PlayerPanel/StyledPlayerPanel.d.ts

@@ -1,24 +1,24 @@
-/** @jsxImportSource @emotion/react */
-import { Interpolation, Theme } from '@emotion/react';
-import { Player } from '@gamepark/react-client';
-import { FC, HTMLAttributes, ReactNode } from 'react';
-import { MaterialFocus } from '../material';
-type CountersProps = {
-    image: string;
-    value: number | string;
-} & {
-    imageCss?: Interpolation<Theme>;
-};
-type StyledPlayerPanelProps = {
-    player: Player;
-    mainCounter?: CountersProps;
-    counters?: CountersProps[];
-    countersPerLine?: number;
-    backgroundImage?: string;
-    playerFocus?: MaterialFocus;
-    activeRing?: boolean;
-    timerOnRight?: boolean;
-    speak?: string | ReactNode;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const StyledPlayerPanel: FC<StyledPlayerPanelProps>;
-export {};
+/** @jsxImportSource @emotion/react */
+import { Interpolation, Theme } from '@emotion/react';
+import { Player } from '@gamepark/react-client';
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { MaterialFocus } from '../material';
+type CountersProps = {
+    image: string;
+    value: number | string;
+} & {
+    imageCss?: Interpolation<Theme>;
+};
+type StyledPlayerPanelProps = {
+    player: Player;
+    mainCounter?: CountersProps;
+    counters?: CountersProps[];
+    countersPerLine?: number;
+    backgroundImage?: string;
+    playerFocus?: MaterialFocus;
+    activeRing?: boolean;
+    timerOnRight?: boolean;
+    speak?: string | ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const StyledPlayerPanel: FC<StyledPlayerPanelProps>;
+export {};

package/dist/components/PlayerPanel/StyledPlayerPanel.js

@@ -1,118 +1,94 @@
-"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 __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledPlayerPanel = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var react_2 = require("react");
-var hooks_1 = require("../../hooks");
-var Avatar_1 = require("../Avatar");
-var material_1 = require("../material");
-var PlayerTimer_1 = require("../PlayerTimer");
-var Counters_1 = require("./Counters");
-var StyledPlayerPanel = function (props) {
-    var _a, _b;
-    var player = props.player, activeRing = props.activeRing, timerOnRight = props.timerOnRight, playerFocus = props.playerFocus, backgroundImage = props.backgroundImage, _c = props.counters, counters = _c === void 0 ? [] : _c, _d = props.countersPerLine, countersPerLine = _d === void 0 ? 2 : _d, mainCounter = props.mainCounter, speak = props.speak, rest = __rest(props, ["player", "activeRing", "timerOnRight", "playerFocus", "backgroundImage", "counters", "countersPerLine", "mainCounter", "speak"]);
-    var allCounter = mainCounter ? __spreadArray([mainCounter], __read(counters), false) : counters !== null && counters !== void 0 ? counters : [];
-    var setFocus = (0, material_1.useFocusContext)().setFocus;
-    var playerName = (0, hooks_1.usePlayerName)(player.id);
-    var gameOver = (_a = (0, hooks_1.useRules)()) === null || _a === void 0 ? void 0 : _a.isOver();
-    var rules = (0, hooks_1.useRules)();
-    var isTurnToPlay = (_b = rules === null || rules === void 0 ? void 0 : rules.isTurnToPlay(player.id)) !== null && _b !== void 0 ? _b : false;
-    var panelRef = (0, react_2.useRef)(null);
-    var focusPlayer = (0, react_2.useCallback)(function () {
-        if (!playerFocus)
-            return;
-        setFocus(playerFocus);
-    }, [playerFocus]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: panelRef, css: [panelPlayerStyle, panelStyle, backgroundImage && backgroundCss(backgroundImage), playerFocus && pointable, !allCounter.length && noCounterCss], onClick: focusPlayer }, rest, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { css: avatarStyle, playerId: player.id, speechBubbleProps: { direction: getSpeechBubbleDirection(panelRef), children: typeof speak === 'string' ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: speak }) : speak } }), activeRing && isTurnToPlay && (0, jsx_runtime_1.jsx)("div", __assign({ css: isPlaying }, { children: (0, jsx_runtime_1.jsx)("div", { css: isTurnToPlay && circle }) })), (0, jsx_runtime_1.jsx)("h2", __assign({ css: [nameStyle, data] }, { children: playerName })), !allCounter.length && !gameOver &&
-                ((0, jsx_runtime_1.jsx)(PlayerTimer_1.PlayerTimer, { playerId: player.id, css: [timerStyle, data, rightAlignment], customStyle: [halfOpacityOnPause, PlayerTimer_1.blinkOnRunningTimeout] })), allCounter.length === 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ css: groupTimerAndCounter }, { children: [!gameOver && (0, jsx_runtime_1.jsx)(PlayerTimer_1.PlayerTimer, { playerId: player.id, css: [timerStyle, data, rightAlignment], customStyle: [halfOpacityOnPause, PlayerTimer_1.blinkOnRunningTimeout] }), (0, jsx_runtime_1.jsx)(Counters_1.Counters, { counters: allCounter, lineSize: countersPerLine })] }))), allCounter.length > 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ css: groupTimerAndCounters }, { children: [!gameOver && (0, jsx_runtime_1.jsx)(PlayerTimer_1.PlayerTimer, { playerId: player.id, css: [timerStyle, data, rightAlignment], customStyle: [halfOpacityOnPause, PlayerTimer_1.blinkOnRunningTimeout] }), (0, jsx_runtime_1.jsx)(Counters_1.Counters, { counters: allCounter, lineSize: countersPerLine })] })))] })));
-};
-exports.StyledPlayerPanel = StyledPlayerPanel;
-var getSpeechBubbleDirection = function (element) {
-    var _a, _b, _c, _d;
-    if (element.current) {
-        var rect = element.current.getBoundingClientRect();
-        var left = rect.left / ((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : window.innerWidth);
-        var top_1 = rect.top / ((_d = (_c = window.visualViewport) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : window.innerHeight);
-        var isLeft = (left > 0.2 && left < 0.5) || left > 0.8;
-        var isTop = (top_1 > 0.2 && top_1 < 0.5) || top_1 > 0.8;
-        if (isLeft) {
-            return isTop ? Avatar_1.SpeechBubbleDirection.TOP_LEFT : Avatar_1.SpeechBubbleDirection.BOTTOM_LEFT;
-        }
-        else {
-            return isTop ? Avatar_1.SpeechBubbleDirection.TOP_RIGHT : Avatar_1.SpeechBubbleDirection.BOTTOM_RIGHT;
-        }
-    }
-    return Avatar_1.SpeechBubbleDirection.BOTTOM_RIGHT;
-};
-var noCounterCss = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 8.1em;\n"], ["\n  min-height: 8.1em;\n"])));
-var groupTimerAndCounter = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-self: flex-end;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-self: flex-end;\n  gap: 0.5em;\n"])));
-var groupTimerAndCounters = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 7.6em;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"], ["\n  min-height: 7.6em;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"])));
-var halfOpacityOnPause = function (playing) { return !playing && (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  opacity: 0.8;\n"], ["\n  opacity: 0.8;\n"]))); };
-var rightAlignment = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"], ["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"])));
-var panelPlayerStyle = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: black;\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n  width: 28em;\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding: 0.5em;\n"], ["\n  color: black;\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n  width: 28em;\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding: 0.5em;\n"])));
-var avatarStyle = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 3;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 3;\n"])));
-var nameStyle = (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: end;\n  max-width: 8em;\n  margin: 0;\n  font-size: 2.4em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"], ["\n  align-self: end;\n  max-width: 8em;\n  margin: 0;\n  font-size: 2.4em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
-var backgroundCss = function (backgroundImage) { return (0, react_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.8) url(", ");\n  background-size: cover;\n  background-repeat: no-repeat;\n"], ["\n  background: rgba(0, 0, 0, 0.8) url(", ");\n  background-size: cover;\n  background-repeat: no-repeat;\n"])), backgroundImage); };
-var pointable = (0, react_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var panelStyle = (0, react_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: white;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    left: 0;\n    border-radius: 1em;\n  }\n"], ["\n  background-color: white;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    left: 0;\n    border-radius: 1em;\n  }\n"])));
-var data = (0, react_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 1;\n"], ["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 1;\n"])));
-var timerStyle = (0, react_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-self: end;\n  font-size: 2.5em;\n"], ["\n  align-self: end;\n  font-size: 2.5em;\n"])));
-var isPlaying = (0, react_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 2;\n"])));
-var circleAnimation = (0, react_1.keyframes)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"], ["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"])));
-var inset = 0.8;
-var circle = (0, react_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-image: linear-gradient(\n      to bottom, gold 0%,\n      rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"], ["\n  background-image: linear-gradient(\n      to bottom, gold 0%,\n      rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"])), inset, inset, inset, inset, circleAnimation);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+"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.StyledPlayerPanel = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var hooks_1 = require("../../hooks");
+var Avatar_1 = require("../Avatar");
+var material_1 = require("../material");
+var PlayerTimer_1 = require("../PlayerTimer");
+var Counters_1 = require("./Counters");
+var StyledPlayerPanel = function (props) {
+    var _a, _b;
+    var player = props.player, activeRing = props.activeRing, timerOnRight = props.timerOnRight, playerFocus = props.playerFocus, backgroundImage = props.backgroundImage, _c = props.counters, counters = _c === void 0 ? [] : _c, _d = props.countersPerLine, countersPerLine = _d === void 0 ? 3 : _d, mainCounter = props.mainCounter, speak = props.speak, rest = __rest(props, ["player", "activeRing", "timerOnRight", "playerFocus", "backgroundImage", "counters", "countersPerLine", "mainCounter", "speak"]);
+    var setFocus = (0, material_1.useFocusContext)().setFocus;
+    var playerName = (0, hooks_1.usePlayerName)(player.id);
+    var gameOver = (_a = (0, hooks_1.useRules)()) === null || _a === void 0 ? void 0 : _a.isOver();
+    var rules = (0, hooks_1.useRules)();
+    var isTurnToPlay = (_b = rules === null || rules === void 0 ? void 0 : rules.isTurnToPlay(player.id)) !== null && _b !== void 0 ? _b : false;
+    var panelRef = (0, react_2.useRef)(null);
+    var focusPlayer = (0, react_2.useCallback)(function () {
+        if (!playerFocus)
+            return;
+        setFocus(playerFocus);
+    }, [playerFocus]);
+    var main = mainCounter ? mainCounter : counters.length === 1 ? counters[0] : undefined;
+    var secondaryCounters = !mainCounter && counters.length === 1 ? [] : counters;
+    var hasCounter = counters.length > 0 || !!mainCounter;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: panelRef, css: [panelPlayerStyle, panelStyle, backgroundImage && backgroundCss(backgroundImage), playerFocus && pointable, !hasCounter && noCounterCss], onClick: focusPlayer }, rest, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { css: avatarStyle, playerId: player.id, speechBubbleProps: { direction: getSpeechBubbleDirection(panelRef), children: typeof speak === 'string' ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: speak }) : speak } }), activeRing && isTurnToPlay && (0, jsx_runtime_1.jsx)("div", { css: isPlaying, children: (0, jsx_runtime_1.jsx)("div", { css: isTurnToPlay && circle }) }), (0, jsx_runtime_1.jsx)("h2", { css: [nameStyle, data], children: playerName }), !main && !gameOver && ((0, jsx_runtime_1.jsx)(PlayerTimer_1.PlayerTimer, { playerId: player.id, css: [timerStyle, data, rightAlignment], customStyle: [halfOpacityOnPause, PlayerTimer_1.blinkOnRunningTimeout] })), main && !gameOver && ((0, jsx_runtime_1.jsxs)("div", { css: groupTimerAndCounter, children: [!gameOver && ((0, jsx_runtime_1.jsx)(PlayerTimer_1.PlayerTimer, { playerId: player.id, css: [timerStyle, data, rightAlignment], customStyle: [halfOpacityOnPause, PlayerTimer_1.blinkOnRunningTimeout] })), (0, jsx_runtime_1.jsx)(Counters_1.Counters, { counters: [main], lineSize: 1 })] })), secondaryCounters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { css: groupTimerAndCounters, children: (0, jsx_runtime_1.jsx)(Counters_1.Counters, { counters: secondaryCounters, lineSize: countersPerLine }) }))] })));
+};
+exports.StyledPlayerPanel = StyledPlayerPanel;
+var getSpeechBubbleDirection = function (element) {
+    var _a, _b, _c, _d;
+    if (element.current) {
+        var rect = element.current.getBoundingClientRect();
+        var left = rect.left / ((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : window.innerWidth);
+        var top_1 = rect.top / ((_d = (_c = window.visualViewport) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : window.innerHeight);
+        var isLeft = (left > 0.2 && left < 0.5) || left > 0.8;
+        var isTop = (top_1 > 0.2 && top_1 < 0.5) || top_1 > 0.8;
+        if (isLeft) {
+            return isTop ? Avatar_1.SpeechBubbleDirection.TOP_LEFT : Avatar_1.SpeechBubbleDirection.BOTTOM_LEFT;
+        }
+        else {
+            return isTop ? Avatar_1.SpeechBubbleDirection.TOP_RIGHT : Avatar_1.SpeechBubbleDirection.BOTTOM_RIGHT;
+        }
+    }
+    return Avatar_1.SpeechBubbleDirection.BOTTOM_RIGHT;
+};
+var noCounterCss = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 8.1em;\n"], ["\n  min-height: 8.1em;\n"])));
+var groupTimerAndCounter = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-self: flex-end;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-self: flex-end;\n  gap: 0.5em;\n"])));
+var groupTimerAndCounters = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"])));
+var halfOpacityOnPause = function (playing) { return !playing && (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  opacity: 0.8;\n"], ["\n  opacity: 0.8;\n"]))); };
+var rightAlignment = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"], ["\n  left: initial;\n  right: 0.2em;\n  font-size: 2.5em;\n"])));
+var panelPlayerStyle = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: black;\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n  width: 28em;\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding: 0.5em;\n"], ["\n  color: black;\n  border-radius: 3em 1.5em 1.5em 1.5em;\n  box-shadow: 0 0 0.5em black, 0 0 0.5em black;\n  width: 28em;\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding: 0.5em;\n"])));
+var avatarStyle = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 3;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 100%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 3;\n"])));
+var nameStyle = (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: end;\n  max-width: 8em;\n  margin: 0;\n  font-size: 2.4em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"], ["\n  align-self: end;\n  max-width: 8em;\n  margin: 0;\n  font-size: 2.4em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
+var backgroundCss = function (backgroundImage) { return (0, react_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.8) url(", ");\n  background-size: cover;\n  background-repeat: no-repeat;\n"], ["\n  background: rgba(0, 0, 0, 0.8) url(", ");\n  background-size: cover;\n  background-repeat: no-repeat;\n"])), backgroundImage); };
+var pointable = (0, react_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var panelStyle = (0, react_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: white;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    left: 0;\n    border-radius: 1em;\n  }\n"], ["\n  background-color: white;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    left: 0;\n    border-radius: 1em;\n  }\n"])));
+var data = (0, react_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 1;\n"], ["\n  color: white;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 0.1em 0.3em;\n  border-radius: 0.4em;\n  z-index: 1;\n"])));
+var timerStyle = (0, react_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-self: end;\n  font-size: 2.5em;\n"], ["\n  align-self: end;\n  font-size: 2.5em;\n"])));
+var isPlaying = (0, react_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: -0.1em;\n  left: 0;\n  border-radius: 50%;\n  height: 6em;\n  width: 6em;\n  color: black;\n  z-index: 2;\n"])));
+var circleAnimation = (0, react_1.keyframes)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"], ["\n  to {\n    transform: rotateZ(0);\n  }\n  from {\n    transform: rotateZ(360deg);\n  }\n"])));
+var inset = 0.8;
+var circle = (0, react_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-image: linear-gradient(\n          to bottom, gold 0%,\n          rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"], ["\n  background-image: linear-gradient(\n          to bottom, gold 0%,\n          rgb(40, 184, 206) 100%);\n  position: absolute;\n  top: -", "em;\n  bottom: -", "em;\n  right: -", "em;\n  left: -", "em;\n  border-radius: inherit;\n  animation: ", " 1s infinite linear;\n"])), inset, inset, inset, inset, circleAnimation);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 //# sourceMappingURL=StyledPlayerPanel.js.map

package/dist/components/PlayerPanel/StyledPlayerPanel.js.map

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