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

package/dist/components/PlayerPanel/StyledPlayerPanel.js

@@ -1,94 +1,158 @@
-"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 () {
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css, keyframes } from '@emotion/react';
+import { useCallback, useRef } from 'react';
+import { usePlayerName, useRules } from '../../hooks';
+import { Avatar, SpeechBubbleDirection } from '../Avatar';
+import { useFocusContext } from '../material';
+import { blinkOnRunningTimeout, PlayerTimer } from '../PlayerTimer';
+import { Counters } from './Counters';
+export const StyledPlayerPanel = (props) => {
+    const { player, activeRing, timerOnRight, playerFocus, backgroundImage, counters = [], countersPerLine = 3, mainCounter, speak, ...rest } = props;
+    const { setFocus } = useFocusContext();
+    const playerName = usePlayerName(player.id);
+    const gameOver = useRules()?.isOver();
+    const rules = useRules();
+    const isTurnToPlay = rules?.isTurnToPlay(player.id) ?? false;
+    const panelRef = useRef(null);
+    const focusPlayer = useCallback(() => {
         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 }) }))] })));
+    const main = mainCounter ? mainCounter : counters.length === 1 ? counters[0] : undefined;
+    const secondaryCounters = !mainCounter && counters.length === 1 ? [] : counters;
+    const hasCounter = counters.length > 0 || !!mainCounter;
+    return (_jsxs("div", { ref: panelRef, css: [panelPlayerStyle, panelStyle, backgroundImage && backgroundCss(backgroundImage), playerFocus && pointable, !hasCounter && noCounterCss], onClick: focusPlayer, ...rest, children: [_jsx(Avatar, { css: avatarStyle, playerId: player.id, speechBubbleProps: { direction: getSpeechBubbleDirection(panelRef), children: typeof speak === 'string' ? _jsx(_Fragment, { children: speak }) : speak } }), activeRing && isTurnToPlay && _jsx("div", { css: isPlaying, children: _jsx("div", { css: isTurnToPlay && circle }) }), _jsx("h2", { css: [nameStyle, data], children: playerName }), !main && !gameOver && (_jsx(PlayerTimer, { playerId: player.id, css: [timerStyle, data, rightAlignment], customStyle: [halfOpacityOnPause, blinkOnRunningTimeout] })), main && (_jsxs("div", { css: groupTimerAndCounter, children: [!gameOver && (_jsx(PlayerTimer, { playerId: player.id, css: [timerStyle, data, rightAlignment], customStyle: [halfOpacityOnPause, blinkOnRunningTimeout] })), _jsx(Counters, { counters: [main], lineSize: 1 })] })), secondaryCounters.length > 0 && (_jsx("div", { css: groupTimerAndCounters, children: _jsx(Counters, { counters: secondaryCounters, lineSize: countersPerLine }) }))] }));
 };
-exports.StyledPlayerPanel = StyledPlayerPanel;
-var getSpeechBubbleDirection = function (element) {
-    var _a, _b, _c, _d;
+const getSpeechBubbleDirection = (element) => {
     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;
+        const rect = element.current.getBoundingClientRect();
+        const left = rect.left / (window.visualViewport?.width ?? window.innerWidth);
+        const top = rect.top / (window.visualViewport?.height ?? window.innerHeight);
+        const isLeft = (left > 0.2 && left < 0.5) || left > 0.8;
+        const isTop = (top > 0.2 && top < 0.5) || top > 0.8;
         if (isLeft) {
-            return isTop ? Avatar_1.SpeechBubbleDirection.TOP_LEFT : Avatar_1.SpeechBubbleDirection.BOTTOM_LEFT;
+            return isTop ? SpeechBubbleDirection.TOP_LEFT : SpeechBubbleDirection.BOTTOM_LEFT;
         }
         else {
-            return isTop ? Avatar_1.SpeechBubbleDirection.TOP_RIGHT : Avatar_1.SpeechBubbleDirection.BOTTOM_RIGHT;
+            return isTop ? SpeechBubbleDirection.TOP_RIGHT : SpeechBubbleDirection.BOTTOM_RIGHT;
         }
     }
-    return Avatar_1.SpeechBubbleDirection.BOTTOM_RIGHT;
+    return 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;
+const noCounterCss = css `
+  min-height: 8.1em;
+`;
+const groupTimerAndCounter = css `
+  display: flex;
+  flex-direction: row;
+  align-self: flex-end;
+  gap: 0.5em;
+`;
+const groupTimerAndCounters = css `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+const halfOpacityOnPause = (playing) => !playing && css `
+  opacity: 0.8;
+`;
+const rightAlignment = css `
+  left: initial;
+  right: 0.2em;
+  font-size: 2.5em;
+`;
+const panelPlayerStyle = css `
+  color: black;
+  border-radius: 3em 1.5em 1.5em 1.5em;
+  box-shadow: 0 0 0.5em black, 0 0 0.5em black;
+  width: 28em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4em;
+  padding: 0.5em;
+`;
+const avatarStyle = css `
+  position: absolute;
+  top: -0.1em;
+  left: 0;
+  border-radius: 100%;
+  height: 6em;
+  width: 6em;
+  color: black;
+  z-index: 3;
+`;
+const nameStyle = css `
+  align-self: end;
+  max-width: 8em;
+  margin: 0;
+  font-size: 2.4em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+const backgroundCss = (backgroundImage) => css `
+  background: rgba(0, 0, 0, 0.8) url(${backgroundImage});
+  background-size: cover;
+  background-repeat: no-repeat;
+`;
+const pointable = css `
+  cursor: pointer;
+`;
+const panelStyle = css `
+  background-color: white;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    border-radius: 1em;
+  }
+`;
+const data = css `
+  color: white;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 0.1em 0.3em;
+  border-radius: 0.4em;
+  z-index: 1;
+`;
+const timerStyle = css `
+  align-self: end;
+  font-size: 2.5em;
+`;
+const isPlaying = css `
+  position: absolute;
+  top: -0.1em;
+  left: 0;
+  border-radius: 50%;
+  height: 6em;
+  width: 6em;
+  color: black;
+  z-index: 2;
+`;
+const circleAnimation = keyframes `
+  to {
+    transform: rotateZ(0);
+  }
+  from {
+    transform: rotateZ(360deg);
+  }
+`;
+const inset = 0.8;
+const circle = css `
+  background-image: linear-gradient(
+          to bottom, gold 0%,
+          rgb(40, 184, 206) 100%);
+  position: absolute;
+  top: -${inset}em;
+  bottom: -${inset}em;
+  right: -${inset}em;
+  left: -${inset}em;
+  border-radius: inherit;
+  animation: ${circleAnimation} 1s infinite linear;
+`;
 //# 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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"}

package/dist/components/PlayerPanel/index.js

@@ -1,20 +1,4 @@
-"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("./PlayerPanel"), exports);
-__exportStar(require("./StyledPlayerPanel"), exports);
-__exportStar(require("./Counters"), exports);
+export * from './PlayerPanel';
+export * from './StyledPlayerPanel';
+export * from './Counters';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PlayerPanel/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA6B;AAC7B,sDAAmC;AACnC,6CAA0B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PlayerPanel/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA"}

package/dist/components/PlayerTimer/PlayerTimer.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Interpolation, Theme } from '@emotion/react';
 import { HTMLAttributes } from 'react';
 export type PlayerTimerProps<PlayerId> = {
@@ -10,4 +9,4 @@ export type PlayerTimerDisplayProps<PlayerId> = PlayerTimerProps<PlayerId> & {
     playerTime: number;
 };
 export declare const PlayerTimerDisplay: <PlayerId extends any>({ playerTime, playerId, customStyle, ...props }: PlayerTimerDisplayProps<PlayerId>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const blinkOnRunningTimeout: (playing: boolean, timeLeft: number) => false | import("@emotion/utils").SerializedStyles;
+export declare const blinkOnRunningTimeout: (playing: boolean, timeLeft: number) => false | import("@emotion/react").SerializedStyles;

package/dist/components/PlayerTimer/PlayerTimer.js

@@ -1,74 +1,44 @@
-"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.blinkOnRunningTimeout = exports.PlayerTimerDisplay = exports.PlayerTimer = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var react_redux_1 = require("react-redux");
-var dayjs_1 = __importDefault(require("dayjs"));
-var duration_1 = __importDefault(require("dayjs/plugin/duration"));
-var utc_1 = __importDefault(require("dayjs/plugin/utc"));
-var hooks_1 = require("../../hooks");
-dayjs_1.default.extend(duration_1.default);
-dayjs_1.default.extend(utc_1.default);
-var PlayerTimer = function (props) {
-    var playerTime = (0, hooks_1.usePlayerTime)(props.playerId);
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css, keyframes } from '@emotion/react';
+import { useGameSelector } from '@gamepark/react-client';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import utc from 'dayjs/plugin/utc';
+import { usePlayerTime } from '../../hooks';
+dayjs.extend(duration);
+dayjs.extend(utc);
+export const PlayerTimer = (props) => {
+    const playerTime = usePlayerTime(props.playerId);
     if (!playerTime)
         return null;
-    return (0, jsx_runtime_1.jsx)(exports.PlayerTimerDisplay, __assign({ playerTime: playerTime }, props));
+    return _jsx(PlayerTimerDisplay, { playerTime: playerTime, ...props });
 };
-exports.PlayerTimer = PlayerTimer;
-var PlayerTimerDisplay = function (_a) {
-    var playerTime = _a.playerTime, playerId = _a.playerId, _b = _a.customStyle, customStyle = _b === void 0 ? [halfOpacityOnPause, exports.blinkOnRunningTimeout] : _b, props = __rest(_a, ["playerTime", "playerId", "customStyle"]);
-    var playing = (0, react_redux_1.useSelector)(function (state) { var _a, _b, _c; return (_c = (_b = (_a = state.players.find(function (p) { return p.id === playerId; })) === null || _a === void 0 ? void 0 : _a.time) === null || _b === void 0 ? void 0 : _b.playing) !== null && _c !== void 0 ? _c : false; });
-    return ((0, jsx_runtime_1.jsxs)("span", __assign({}, props, { css: customStyle.map(function (fc) { return fc(playing, playerTime); }), children: [playerTime < 0 && '-', humanizeTimer(Math.abs(playerTime))] })));
+export const PlayerTimerDisplay = ({ playerTime, playerId, customStyle = [halfOpacityOnPause, blinkOnRunningTimeout], ...props }) => {
+    const playing = useGameSelector((state) => state.players.find(p => p.id === playerId)?.time?.playing ?? false);
+    return (_jsxs("span", { ...props, css: customStyle.map(fc => fc(playing, playerTime)), children: [playerTime < 0 && '-', humanizeTimer(Math.abs(playerTime))] }));
 };
-exports.PlayerTimerDisplay = PlayerTimerDisplay;
-var halfOpacityOnPause = function (playing) { return !playing && (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0.5;\n"], ["\n  opacity: 0.5;\n"]))); };
-var blinkKeyframes = (0, react_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  to {\n    visibility: hidden;\n  }\n"], ["\n  to {\n    visibility: hidden;\n  }\n"])));
-var blinkOnRunningTimeout = function (playing, timeLeft) { return playing && timeLeft < 0 && (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation: ", " 1s steps(8, start) infinite;\n"], ["\n  animation: ", " 1s steps(8, start) infinite;\n"])), blinkKeyframes); };
-exports.blinkOnRunningTimeout = blinkOnRunningTimeout;
-var oneDay = dayjs_1.default.duration(1, 'day');
-var oneHour = dayjs_1.default.duration(1, 'hour');
-var humanizeTimer = function (duration) {
+const halfOpacityOnPause = (playing) => !playing && css `
+  opacity: 0.5;
+`;
+const blinkKeyframes = keyframes `
+  to {
+    visibility: hidden;
+  }
+`;
+export const blinkOnRunningTimeout = (playing, timeLeft) => playing && timeLeft < 0 && css `
+  animation: ${blinkKeyframes} 1s steps(8, start) infinite;
+`;
+const oneDay = dayjs.duration(1, 'day');
+const oneHour = dayjs.duration(1, 'hour');
+const humanizeTimer = (duration) => {
     if (duration >= oneDay.asMilliseconds()) {
-        return dayjs_1.default.duration(duration).humanize();
+        return dayjs.duration(duration).humanize();
     }
     else if (duration >= oneHour.asMilliseconds()) {
-        return dayjs_1.default.utc(duration).format('HH:mm:ss');
+        return dayjs.utc(duration).format('HH:mm:ss');
     }
     else {
-        return dayjs_1.default.utc(duration).format('mm:ss');
+        return dayjs.utc(duration).format('mm:ss');
     }
 };
-var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=PlayerTimer.js.map

package/dist/components/PlayerTimer/PlayerTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayerTimer.js","sourceRoot":"","sources":["../../../src/components/PlayerTimer/PlayerTimer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAqE;AAErE,2CAAyC;AACzC,gDAAyB;AACzB,mEAA4C;AAC5C,yDAAkC;AAClC,qCAA2C;AAG3C,eAAK,CAAC,MAAM,CAAC,kBAAQ,CAAC,CAAA;AACtB,eAAK,CAAC,MAAM,CAAC,aAAG,CAAC,CAAA;AAOV,IAAM,WAAW,GAAG,UAAuB,KAAiC;IACjF,IAAM,UAAU,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAChD,IAAI,CAAC,UAAU;QAAE,OAAO,IAAI,CAAA;IAC5B,OAAO,uBAAC,0BAAkB,aAAC,UAAU,EAAE,UAAU,IAAM,KAAK,EAAG,CAAA;AACjE,CAAC,CAAA;AAJY,QAAA,WAAW,eAIvB;AAMM,IAAM,kBAAkB,GAAG,UAChC,EAAgI;IAA9H,IAAA,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,mBAAyD,EAAzD,WAAW,mBAAG,CAAC,kBAAkB,EAAE,6BAAqB,CAAC,KAAA,EAAK,KAAK,cAA3F,yCAA6F,CAAF;IAE3F,IAAM,OAAO,GAAG,IAAA,yBAAW,EAAC,UAAC,KAAoB,oBAAK,OAAA,MAAA,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,EAAE,KAAK,QAAQ,EAAjB,CAAiB,CAAC,0CAAE,IAAI,0CAAE,OAAO,mCAAI,KAAK,CAAA,EAAA,CAAC,CAAA;IACzH,OAAO,CACL,6CAAU,KAAK,IAAE,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,UAAA,EAAE,IAAI,OAAA,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAvB,CAAuB,CAAC,aACjE,UAAU,GAAG,CAAC,IAAI,GAAG,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,KACtD,CACR,CAAA;AACH,CAAC,CAAA;AATY,QAAA,kBAAkB,sBAS9B;AAED,IAAM,kBAAkB,GAAG,UAAC,OAAgB,IAAK,OAAA,CAAC,OAAO,QAAI,WAAG,yFAAA,qBAE/D,IAAA,EAFgD,CAEhD,CAAA;AAED,IAAM,cAAc,OAAG,iBAAS,8GAAA,0CAI/B,IAAA,CAAA;AAEM,IAAM,qBAAqB,GAAG,UAAC,OAAgB,EAAE,QAAgB,IAAK,OAAA,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAI,WAAG,wHAAA,iBAC5F,EAAc,iCAC5B,KADc,cAAc,CAC5B,EAF4E,CAE5E,CAAA;AAFY,QAAA,qBAAqB,yBAEjC;AAED,IAAM,MAAM,GAAG,eAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;AACvC,IAAM,OAAO,GAAG,eAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;AAEzC,IAAM,aAAa,GAAG,UAAC,QAAgB;IACrC,IAAI,QAAQ,IAAI,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;QACxC,OAAO,eAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAA;IAC5C,CAAC;SAAM,IAAI,QAAQ,IAAI,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;QAChD,OAAO,eAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,eAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC5C,CAAC;AACH,CAAC,CAAA"}
+{"version":3,"file":"PlayerTimer.js","sourceRoot":"","sources":["../../../src/components/PlayerTimer/PlayerTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAiB,SAAS,EAAS,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,uBAAuB,CAAA;AAC5C,OAAO,GAAG,MAAM,kBAAkB,CAAA;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;AACtB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;AAOjB,MAAM,CAAC,MAAM,WAAW,GAAG,CAAuB,KAAiC,EAAE,EAAE;IACrF,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAChD,IAAI,CAAC,UAAU;QAAE,OAAO,IAAI,CAAA;IAC5B,OAAO,KAAC,kBAAkB,IAAC,UAAU,EAAE,UAAU,KAAM,KAAK,GAAG,CAAA;AACjE,CAAC,CAAA;AAMD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,GAAG,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAqC,EAChI,EAAE;IACF,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,IAAI,KAAK,CAAC,CAAA;IAC9G,OAAO,CACL,mBAAU,KAAK,EAAE,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,aACjE,UAAU,GAAG,CAAC,IAAI,GAAG,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,IACtD,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,OAAO,IAAI,GAAG,CAAA;;CAE/D,CAAA;AAED,MAAM,cAAc,GAAG,SAAS,CAAA;;;;CAI/B,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,OAAgB,EAAE,QAAgB,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,GAAG,CAAC,IAAI,GAAG,CAAA;eAC5F,cAAc;CAC5B,CAAA;AAED,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;AACvC,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;AAEzC,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAE,EAAE;IACzC,IAAI,QAAQ,IAAI,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;QACxC,OAAO,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAA;IAC5C,CAAC;SAAM,IAAI,QAAQ,IAAI,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;QAChD,OAAO,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC5C,CAAC;AACH,CAAC,CAAA"}

package/dist/components/PlayerTimer/index.js

@@ -1,18 +1,2 @@
-"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("./PlayerTimer"), exports);
+export * from './PlayerTimer';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PlayerTimer/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PlayerTimer/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/components/Scoring/ScoringDescription.js

@@ -1,3 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};
 //# sourceMappingURL=ScoringDescription.js.map

package/dist/components/Scoring/index.js

@@ -1,18 +1,2 @@
-"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("./ScoringDescription"), exports);
+export * from './ScoringDescription';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scoring/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scoring/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}