@maestro_io/maestro-web-sdk 2.1.1 → 2.1.2

package/dist/modules/stats/view/MatchPredictor/DonutChart/DonutChart.d.ts

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+export interface DonutChartProps {
+    awayPercentage: number;
+    homePercentage: number;
+    size?: number;
+    strokeWidth?: number;
+}
+declare class DonutChart extends Component<DonutChartProps> {
+    static defaultProps: {
+        size: number;
+        strokeWidth: number;
+    };
+    private patternId;
+    constructor(props: DonutChartProps);
+    render(): React.JSX.Element;
+}
+export default DonutChart;

package/dist/modules/stats/view/MatchPredictor/DonutChart/DonutChart.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { createArcPath, percentageToAngle } from '../../../utils';
+class DonutChart extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "patternId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.patternId = `homeStripes-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    render() {
+        const { awayPercentage, size = 280, strokeWidth = 32 } = this.props;
+        const radius = (size - strokeWidth) / 2;
+        const centerX = size / 2;
+        const centerY = size / 2;
+        // Calculate angles with equal gaps between sections
+        const awayAngle = percentageToAngle(awayPercentage);
+        const homeAngle = percentageToAngle(100 - awayPercentage);
+        const gapAngle = 3; // 3 degree gap between sections
+        const totalGaps = gapAngle * 2; // Two gaps total
+        // Adjust angles to account for gaps
+        const adjustedAwayAngle = (awayAngle * (360 - totalGaps)) / 360;
+        const adjustedHomeAngle = (homeAngle * (360 - totalGaps)) / 360;
+        const startAngle = 270; // Start from top
+        const awayEndAngle = startAngle + adjustedAwayAngle; // Away team section
+        const homeStartAngle = awayEndAngle + gapAngle; // Gap after away team
+        const homeEndAngle = homeStartAngle + adjustedHomeAngle; // Home team section
+        // Use consistent text-100 color for both teams
+        const chartColor = 'var(--sdk-text100)';
+        return (React.createElement("svg", { width: size, height: size, className: "donut-svg" },
+            React.createElement("defs", null,
+                React.createElement("pattern", { id: this.patternId, patternUnits: "userSpaceOnUse", width: "6", height: "6", patternTransform: "rotate(45)" },
+                    React.createElement("rect", { width: "1", height: "6", fill: chartColor }),
+                    React.createElement("rect", { x: "1", width: "2", height: "6", fill: "transparent" }),
+                    React.createElement("rect", { x: "3", width: "1", height: "6", fill: chartColor }),
+                    React.createElement("rect", { x: "4", width: "2", height: "6", fill: "transparent" }))),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, startAngle, awayEndAngle), fill: "transparent", stroke: chartColor, strokeWidth: strokeWidth, strokeLinecap: "butt" }),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, homeStartAngle, homeEndAngle), fill: "transparent", stroke: `url(#${this.patternId})`, strokeWidth: strokeWidth, strokeLinecap: "butt" }),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, awayEndAngle, homeStartAngle), fill: "transparent", stroke: "var(--sdk-surface4)", strokeWidth: strokeWidth, strokeLinecap: "butt" }),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, homeEndAngle, startAngle + 360), fill: "transparent", stroke: "var(--sdk-surface4)", strokeWidth: strokeWidth, strokeLinecap: "butt" })));
+    }
+}
+Object.defineProperty(DonutChart, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        size: 280,
+        strokeWidth: 32,
+    }
+});
+export default DonutChart;

package/dist/modules/stats/view/MatchPredictor/DonutChart/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DonutChart';
+export { DonutChartProps } from './DonutChart';

package/dist/modules/stats/view/MatchPredictor/DonutChart/index.js

@@ -0,0 +1 @@
+export { default } from './DonutChart';

package/dist/modules/stats/view/MatchPredictor/MatchPredictorView.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './MatchPredictorView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { Predictor, EntityMap, Team } from '../../interfaces/IStats';
+export interface MatchPredictorProps {
+    predictor: Predictor;
+    teams: EntityMap<Team>;
+}
+declare const _default: {
+    new (props?: (MatchPredictorProps & WithFocusableProps) | undefined, context?: any): {
+        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../external/spatial-navigation/utils").Direction, details: import("../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<MatchPredictorProps & WithFocusableProps>;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: MatchPredictorProps & WithFocusableProps) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
+        forceUpdate(callBack?: (() => any) | undefined): void;
+        props: Readonly<{
+            children?: React.ReactNode;
+        }> & Readonly<MatchPredictorProps & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;

package/dist/modules/stats/view/MatchPredictor/MatchPredictorView.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import './MatchPredictorView.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import DonutChart from './DonutChart/DonutChart';
+import Image from '@/components/atoms/Image';
+class MatchPredictorView extends Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                shouldRenderPredictorImage: Boolean(this.props.predictor.imageUrl),
+            }
+        });
+        Object.defineProperty(this, "handleImageError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ shouldRenderPredictorImage: false });
+            }
+        });
+    }
+    render() {
+        const { predictor, teams } = this.props;
+        const { shouldRenderPredictorImage } = this.state;
+        // Get team data
+        const homeTeam = teams[predictor.homeTeam.team.$key];
+        const awayTeam = teams[predictor.awayTeam.team.$key];
+        // Parse percentages
+        const homePercentage = parseFloat(predictor.homeTeam.gameProjection);
+        const awayPercentage = parseFloat(predictor.awayTeam.gameProjection);
+        return (React.createElement("section", { className: "match-predictor-view focus-ring", "data-focused": this.props.focused },
+            React.createElement("div", { className: "match-predictor-header" },
+                React.createElement("h2", { className: "T05_ALT" }, predictor.header)),
+            React.createElement("div", { className: "match-predictor-percentages" },
+                React.createElement("div", { className: "team-percentage away-team" },
+                    React.createElement("span", { className: "percentage-value T70" },
+                        awayPercentage,
+                        "%"),
+                    React.createElement("div", { className: "team-info" },
+                        React.createElement("div", { className: "legend-item away" },
+                            React.createElement("div", { className: "legend-pattern away-pattern" }),
+                            React.createElement("span", { className: "T02" }, awayTeam?.abbreviation)))),
+                React.createElement("div", { className: "team-percentage home-team" },
+                    React.createElement("span", { className: "percentage-value T70" },
+                        homePercentage,
+                        "%"),
+                    React.createElement("div", { className: "team-info" },
+                        React.createElement("div", { className: "legend-item home" },
+                            React.createElement("div", { className: "legend-pattern home-pattern" }),
+                            React.createElement("span", { className: "T02" }, homeTeam?.abbreviation))))),
+            React.createElement("div", { className: "donut-chart-container" }, shouldRenderPredictorImage && predictor.imageUrl ? (React.createElement("div", { className: "actual-chart" },
+                React.createElement(Image, { src: predictor.imageUrl, alt: "Match Predictor Chart", className: "predictor-chart-image", onError: this.handleImageError }))) : (React.createElement("div", { className: "svg-chart-fallback" },
+                React.createElement("div", { className: "svg-donut-container" },
+                    React.createElement(DonutChart, { awayPercentage: awayPercentage, homePercentage: homePercentage }),
+                    React.createElement("div", { className: "donut-center" },
+                        React.createElement("div", { className: "center-team-logos" },
+                            React.createElement("div", { className: "center-logo away-center-logo" }, awayTeam?.logo ? (React.createElement(Image, { src: awayTeam.logo, alt: awayTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, awayTeam?.abbreviation))),
+                            React.createElement("div", { className: "center-divider" }),
+                            React.createElement("div", { className: "center-logo home-center-logo" }, homeTeam?.logo ? (React.createElement(Image, { src: homeTeam.logo, alt: homeTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, homeTeam?.abbreviation)))))))))));
+    }
+}
+export default withFocusable()(MatchPredictorView);

package/dist/modules/stats/view/MatchPredictor/index.d.ts

@@ -0,0 +1,3 @@
+import MatchPredictorView from './MatchPredictorView';
+export default MatchPredictorView;
+export { MatchPredictorProps } from './MatchPredictorView';

package/dist/modules/stats/view/MatchPredictor/index.js

@@ -0,0 +1,2 @@
+import MatchPredictorView from './MatchPredictorView';
+export default MatchPredictorView;

package/dist/modules/stats/view/RecentGames/RecentGames.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="prop-types" />
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import React from 'react';
+import './RecentGames.styles.css';
+type PreviousGame = {
+    score: string;
+    gameResult: string;
+    teamLogo: string;
+    homeAway: string;
+};
+type Team = {
+    logo: string;
+    name?: string;
+    events: PreviousGame[];
+};
+export type RecentGamesStatsItem = {
+    awayTeam: Team;
+    homeTeam: Team;
+};
+declare const _default: {
+    new (props?: (RecentGamesStatsItem & WithFocusableProps) | undefined, context?: any): {
+        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../external/spatial-navigation/utils").Direction, details: import("../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<RecentGamesStatsItem & WithFocusableProps>;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: RecentGamesStatsItem & WithFocusableProps) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
+        forceUpdate(callBack?: (() => any) | undefined): void;
+        props: Readonly<{
+            children?: React.ReactNode;
+        }> & Readonly<RecentGamesStatsItem & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<RecentGamesStatsItem & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<RecentGamesStatsItem & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<RecentGamesStatsItem & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;

package/dist/modules/stats/view/RecentGames/RecentGames.js

@@ -0,0 +1,22 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import './RecentGames.styles.css';
+import Image from '@/components/atoms/Image';
+const RecentGames = (props) => {
+    return (React.createElement("section", { className: "recent-games focus-ring", "data-focused": props.focused },
+        React.createElement("h5", { className: "T05_ALT" }, "Recent Games"),
+        React.createElement("div", { className: "recent-games-teams" }, [props.awayTeam, props.homeTeam].map((team, index) => (React.createElement("div", { className: "team-container", key: team.name || team.logo || index },
+            React.createElement(Image, { src: team.logo, alt: team.name || '', crossOrigin: "anonymous" }),
+            React.createElement("span", { className: "T05_ALT" }, team.name))))),
+        React.createElement("div", { className: "recent-games-list-group" }, [props.awayTeam, props.homeTeam].map((team, index) => (React.createElement("div", { className: "recent-games-list", key: team.name || team.logo || index }, team.events.map((event) => (React.createElement("div", { className: "recent-game-item T10", key: event.teamLogo +
+                event.score +
+                event.gameResult +
+                event.homeAway },
+            React.createElement("div", { className: "recent-game-item-team" },
+                React.createElement("span", null, event.homeAway === 'home' ? 'VS' : '@'),
+                React.createElement(Image, { src: event.teamLogo, alt: `${team.name} event ${event.score}`, crossOrigin: "anonymous" })),
+            React.createElement("div", { className: "recent-game-item-result" },
+                React.createElement("span", { "data-result": event.gameResult }, event.gameResult),
+                event.score))))))))));
+};
+export default withFocusable()(RecentGames);

package/dist/modules/stats/view/RecentGames/index.d.ts

@@ -0,0 +1,2 @@
+import RecentGames from './RecentGames';
+export default RecentGames;

package/dist/modules/stats/view/RecentGames/index.js

@@ -0,0 +1,2 @@
+import RecentGames from './RecentGames';
+export default RecentGames;

package/dist/modules/stats/view/StatsQRCode/StatsQRCodeView.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { StatsPromotion } from '../../interfaces/IStats';
+export interface StatsQRCodeViewProps extends WithFocusableProps {
+    promotion: StatsPromotion;
+}
+declare const _default: {
+    new (props?: (StatsQRCodeViewProps & WithFocusableProps) | undefined, context?: any): {
+        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../external/spatial-navigation/utils").Direction, details: import("../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<StatsQRCodeViewProps & WithFocusableProps>;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: StatsQRCodeViewProps & WithFocusableProps) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
+        forceUpdate(callBack?: (() => any) | undefined): void;
+        props: Readonly<{
+            children?: React.ReactNode;
+        }> & Readonly<StatsQRCodeViewProps & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;

package/dist/modules/stats/view/StatsQRCode/StatsQRCodeView.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import Image from '@/components/atoms/Image';
+const StatsQRCodeView = (props) => {
+    const { focused, promotion } = props;
+    return (React.createElement(FocusableItem, null,
+        React.createElement("div", { className: "stats-qr-code-view focus-ring", "data-focused": focused, style: {
+                backgroundImage: `url(${promotion.backgroundImage})`,
+            } },
+            React.createElement("table", { className: "stats-qr-table" },
+                React.createElement("tbody", null,
+                    React.createElement("tr", null,
+                        React.createElement("td", { className: "stats-qr-header-cell" },
+                            React.createElement("table", { className: "stats-qr-logo-table" },
+                                React.createElement("tbody", null,
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-logo-cell" },
+                                            React.createElement(Image, { src: promotion.logo, alt: "ESPN Logo", crossOrigin: "anonymous", className: "stats-qr-logo" }))),
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-tagline-cell" },
+                                            React.createElement("div", { className: "stats-qr-tagline" },
+                                                React.createElement("p", { className: "T20" }, promotion.title)))))))),
+                    React.createElement("tr", null,
+                        React.createElement("td", { className: "stats-qr-content-cell" },
+                            React.createElement("table", { className: "stats-qr-content-table" },
+                                React.createElement("tbody", null,
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-code-cell" },
+                                            React.createElement("div", { className: "stats-qr-code-container" },
+                                                React.createElement(Image, { src: promotion.qrCode, alt: "QR Code", crossOrigin: "anonymous", className: "stats-qr-code" })))),
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-description-cell" },
+                                            React.createElement("div", { className: "stats-qr-description" },
+                                                React.createElement("p", { className: "T02" }, promotion.description)))))))))))));
+};
+export default withFocusable()(StatsQRCodeView);

package/dist/modules/stats/view/StatsQRCode/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './StatsQRCodeView';
+export { StatsQRCodeViewProps } from './StatsQRCodeView';

package/dist/modules/stats/view/StatsQRCode/index.js

@@ -0,0 +1 @@
+export { default } from './StatsQRCodeView';

package/dist/modules/stats/view/StatsView.d.ts

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import './StatsView.styles.css';
+import { StatsApiResponse } from '../interfaces/IStats';
+interface StatsViewState {
+    container: HTMLDivElement | null;
+    statsData: StatsApiResponse | null;
+    isDataLoading: boolean;
+}
+declare class StatsView extends Component<{}, StatsViewState> {
+    private container;
+    private statsDataUnsub;
+    private isDataLoadingUnsub;
+    private vm;
+    constructor(props: {});
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    renderStatsComponents: () => React.JSX.Element | null;
+    render(): React.JSX.Element;
+}
+export default StatsView;

package/dist/modules/stats/view/StatsView.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import './StatsView.styles.css';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import MatchPredictorView from './MatchPredictor';
+import SDK from '@/index';
+import StatsQRCodeView from './StatsQRCode';
+class StatsView extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statsDataUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isDataLoadingUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "renderStatsComponents", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { statsData } = this.state;
+                if (!statsData) {
+                    return React.createElement("div", { className: "stats-loading T02" }, "Loading...");
+                }
+                try {
+                    return (React.createElement("div", null,
+                        statsData.predictor && (React.createElement(MatchPredictorView, { predictor: statsData.predictor, teams: statsData.entities.teams })),
+                        statsData.promotion && (React.createElement(StatsQRCodeView, { promotion: statsData.promotion }))));
+                }
+                catch (error) {
+                    console.error('Error rendering stats components:', error);
+                    return null;
+                }
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel().statsViewModel;
+        this.state = {
+            container: null,
+            statsData: this.vm.statsData.value,
+            isDataLoading: this.vm.isDataLoading.value,
+        };
+    }
+    componentDidMount() {
+        this.setState({
+            container: this.container,
+        });
+        this.statsDataUnsub = this.vm.statsData.subscribe((value) => {
+            this.setState({ statsData: value });
+        });
+        this.isDataLoadingUnsub = this.vm.isDataLoading.subscribe((value) => {
+            this.setState({ isDataLoading: value });
+        });
+        // Initialize the view model
+        this.vm.init();
+    }
+    componentWillUnmount() {
+        this.statsDataUnsub && this.statsDataUnsub();
+        this.isDataLoadingUnsub && this.isDataLoadingUnsub();
+        // Clean up the view model
+        this.vm.cleanup();
+    }
+    render() {
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.state.container, containerTopOffset: 40 },
+            React.createElement("div", { className: "stats-view", ref: (e) => (this.container = e) },
+                this.renderStatsComponents(),
+                React.createElement("div", { className: "stats-bottom-padding" }))));
+    }
+}
+export default StatsView;

package/dist/modules/stats/view/Teams/StatsCarousel.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+type Props = {
+    itemsLength: number;
+    children: ReactNode;
+};
+declare const StatsCarousel: (props: Props) => React.JSX.Element;
+declare const CarouselSlider: (props: Props) => React.JSX.Element;
+export { StatsCarousel, CarouselSlider };

package/dist/modules/stats/view/Teams/StatsCarousel.js

@@ -0,0 +1,14 @@
+import React from 'react';
+const StatsCarousel = (props) => {
+    return (React.createElement("div", { className: "carousel" },
+        React.createElement("div", { className: "carousel-track", style: {
+                width: `${props.itemsLength * 100}%`,
+                animation: `carousel-slide ${props.itemsLength * 6}s steps(${props.itemsLength}) infinite`,
+            } }, props.children)));
+};
+const CarouselSlider = (props) => {
+    return (React.createElement("div", { className: "carousel-slide", style: {
+            width: `${100 / props.itemsLength}%`,
+        } }, props.children));
+};
+export { StatsCarousel, CarouselSlider };

package/dist/modules/stats/view/Teams/StatsProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    awayTeamValue: number;
+    homeTeamValue: number;
+};
+declare const StatsProgressBar: (props: Props) => React.JSX.Element;
+export default StatsProgressBar;

package/dist/modules/stats/view/Teams/StatsProgressBar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+const StatsProgressBar = (props) => {
+    const total = props.homeTeamValue + props.awayTeamValue;
+    const awayTeamPercentage = total === 0 ? 0 : Math.round((props.awayTeamValue / total) * 100);
+    return (React.createElement("div", { className: "progress-bar" },
+        React.createElement("div", { className: "progress-fill" },
+            React.createElement("div", { className: "progress-divider", style: {
+                    right: `${awayTeamPercentage}%`,
+                } }),
+            React.createElement("div", { className: "progress-stripes", style: {
+                    width: `${awayTeamPercentage}%`,
+                } }))));
+};
+export default StatsProgressBar;