@sensiblestats/widget-react 0.80.0 → 0.81.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/index.cjs +1436 -1010
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1436 -1010
- package/dist/index.js.map +1 -1
- package/dist/styles.css +63 -8
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/StatsWidget.tsx
|
|
2
|
-
import { useCallback as
|
|
2
|
+
import { useCallback as useCallback18, useEffect as useEffect29, useMemo as useMemo6, useRef as useRef25, useState as useState48 } from "react";
|
|
3
3
|
import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
|
|
4
4
|
|
|
5
5
|
// src/kickoff.ts
|
|
@@ -114,6 +114,20 @@ var STRINGS = {
|
|
|
114
114
|
accordionSuspended: "Suspended",
|
|
115
115
|
tabToday: "Today",
|
|
116
116
|
sectionLive: "Live",
|
|
117
|
+
yourLeagues: "Your leagues",
|
|
118
|
+
topLeagues: "Top leagues",
|
|
119
|
+
topLeaguesSub: "Popular today.",
|
|
120
|
+
allLeagues: "All leagues",
|
|
121
|
+
searchLeaguesPlaceholder: "Search leagues or teams",
|
|
122
|
+
noLeagueResults: "No league or team matches that search.",
|
|
123
|
+
clearSearchLabel: "Clear search",
|
|
124
|
+
starOnLabel: "Add to Your leagues",
|
|
125
|
+
starOffLabel: "Remove from Your leagues",
|
|
126
|
+
starredToast: "Added to Your leagues.",
|
|
127
|
+
unstarredToast: "Removed from Your leagues.",
|
|
128
|
+
leagueDetailPosition: (index, total) => `${index} of ${total}`,
|
|
129
|
+
prevLeagueLabel: "Previous league",
|
|
130
|
+
nextLeagueLabel: "Next league",
|
|
117
131
|
halfTime: "HT",
|
|
118
132
|
staleStates: "Live scores can't be updated \u2014 showing the last known state.",
|
|
119
133
|
tabGames: "Games",
|
|
@@ -466,6 +480,20 @@ var STRINGS = {
|
|
|
466
480
|
accordionSuspended: "Ask\u0131da",
|
|
467
481
|
tabToday: "Bug\xFCn",
|
|
468
482
|
sectionLive: "Canl\u0131",
|
|
483
|
+
yourLeagues: "Liglerin",
|
|
484
|
+
topLeagues: "\xD6ne \xE7\u0131kan ligler",
|
|
485
|
+
topLeaguesSub: "Bug\xFCn pop\xFCler.",
|
|
486
|
+
allLeagues: "T\xFCm ligler",
|
|
487
|
+
searchLeaguesPlaceholder: "Lig veya tak\u0131m ara",
|
|
488
|
+
noLeagueResults: "Aramana uyan lig veya tak\u0131m yok.",
|
|
489
|
+
clearSearchLabel: "Aramay\u0131 temizle",
|
|
490
|
+
starOnLabel: "Liglerine ekle",
|
|
491
|
+
starOffLabel: "Liglerinden \xE7\u0131kar",
|
|
492
|
+
starredToast: "Liglerin b\xF6l\xFCm\xFCne eklendi.",
|
|
493
|
+
unstarredToast: "Liglerin b\xF6l\xFCm\xFCnden \xE7\u0131kar\u0131ld\u0131.",
|
|
494
|
+
leagueDetailPosition: (index, total) => `${index} / ${total}`,
|
|
495
|
+
prevLeagueLabel: "\xD6nceki lig",
|
|
496
|
+
nextLeagueLabel: "Sonraki lig",
|
|
469
497
|
halfTime: "\u0130Y",
|
|
470
498
|
staleStates: "Canl\u0131 skorlar g\xFCncellenemiyor \u2014 son bilinen durum g\xF6steriliyor.",
|
|
471
499
|
tabGames: "Oyunlar",
|
|
@@ -815,6 +843,20 @@ function normalizeUi(cfg) {
|
|
|
815
843
|
tabOdds: strings.tabOdds,
|
|
816
844
|
tabToday: strings.tabToday,
|
|
817
845
|
sectionLive: strings.sectionLive,
|
|
846
|
+
yourLeagues: strings.yourLeagues,
|
|
847
|
+
topLeagues: strings.topLeagues,
|
|
848
|
+
topLeaguesSub: strings.topLeaguesSub,
|
|
849
|
+
allLeagues: strings.allLeagues,
|
|
850
|
+
searchLeaguesPlaceholder: strings.searchLeaguesPlaceholder,
|
|
851
|
+
noLeagueResults: strings.noLeagueResults,
|
|
852
|
+
clearSearchLabel: strings.clearSearchLabel,
|
|
853
|
+
starOnLabel: strings.starOnLabel,
|
|
854
|
+
starOffLabel: strings.starOffLabel,
|
|
855
|
+
starredToast: strings.starredToast,
|
|
856
|
+
unstarredToast: strings.unstarredToast,
|
|
857
|
+
leagueDetailPosition: strings.leagueDetailPosition,
|
|
858
|
+
prevLeagueLabel: strings.prevLeagueLabel,
|
|
859
|
+
nextLeagueLabel: strings.nextLeagueLabel,
|
|
818
860
|
halfTime: strings.halfTime,
|
|
819
861
|
staleStates: strings.staleStates,
|
|
820
862
|
pinLabel: strings.pinLabel,
|
|
@@ -2716,14 +2758,14 @@ import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMem
|
|
|
2716
2758
|
|
|
2717
2759
|
// src/scheduleCache.ts
|
|
2718
2760
|
var PREFIX = "ss-w-schedule:";
|
|
2719
|
-
var SCHEMA_VERSION =
|
|
2761
|
+
var SCHEMA_VERSION = 2;
|
|
2720
2762
|
var TTL_MS2 = 6 * 36e5;
|
|
2721
|
-
function scheduleCacheKey(operatorId, localDate) {
|
|
2722
|
-
return `${PREFIX}${operatorId}:${localDate}`;
|
|
2763
|
+
function scheduleCacheKey(operatorId, encodedUserKey2, localDate) {
|
|
2764
|
+
return `${PREFIX}${operatorId}:${encodedUserKey2}:${localDate}`;
|
|
2723
2765
|
}
|
|
2724
|
-
function read(operatorId, localDate) {
|
|
2766
|
+
function read(operatorId, encodedUserKey2, localDate) {
|
|
2725
2767
|
try {
|
|
2726
|
-
const raw = localStorage.getItem(scheduleCacheKey(operatorId, localDate));
|
|
2768
|
+
const raw = localStorage.getItem(scheduleCacheKey(operatorId, encodedUserKey2, localDate));
|
|
2727
2769
|
if (!raw) return null;
|
|
2728
2770
|
const entry = JSON.parse(raw);
|
|
2729
2771
|
if (entry.v !== SCHEMA_VERSION || !entry.payload) return null;
|
|
@@ -2732,13 +2774,13 @@ function read(operatorId, localDate) {
|
|
|
2732
2774
|
return null;
|
|
2733
2775
|
}
|
|
2734
2776
|
}
|
|
2735
|
-
function readSchedule(operatorId, localDate, nowMs) {
|
|
2736
|
-
const entry = read(operatorId, localDate);
|
|
2777
|
+
function readSchedule(operatorId, encodedUserKey2, localDate, nowMs) {
|
|
2778
|
+
const entry = read(operatorId, encodedUserKey2, localDate);
|
|
2737
2779
|
if (!entry) return null;
|
|
2738
2780
|
return nowMs - entry.at > TTL_MS2 ? null : entry.payload;
|
|
2739
2781
|
}
|
|
2740
|
-
function readScheduleIgnoringTtl(operatorId, localDate) {
|
|
2741
|
-
return read(operatorId, localDate)?.payload ?? null;
|
|
2782
|
+
function readScheduleIgnoringTtl(operatorId, encodedUserKey2, localDate) {
|
|
2783
|
+
return read(operatorId, encodedUserKey2, localDate)?.payload ?? null;
|
|
2742
2784
|
}
|
|
2743
2785
|
function skeletonOnly(payload) {
|
|
2744
2786
|
return {
|
|
@@ -2746,9 +2788,13 @@ function skeletonOnly(payload) {
|
|
|
2746
2788
|
groups: payload.groups.map((g) => ({
|
|
2747
2789
|
competitionId: g.competitionId,
|
|
2748
2790
|
competitionName: g.competitionName,
|
|
2791
|
+
competitionCountry: g.competitionCountry ?? null,
|
|
2749
2792
|
competitionImagePath: g.competitionImagePath ?? null,
|
|
2750
2793
|
rank: g.rank,
|
|
2751
2794
|
expandedByDefault: g.expandedByDefault,
|
|
2795
|
+
isStarred: g.isStarred,
|
|
2796
|
+
isLearned: g.isLearned,
|
|
2797
|
+
learnedRank: g.learnedRank,
|
|
2752
2798
|
matches: g.matches.map((m) => ({
|
|
2753
2799
|
matchId: m.matchId,
|
|
2754
2800
|
homeTeamName: m.homeTeamName,
|
|
@@ -2760,9 +2806,9 @@ function skeletonOnly(payload) {
|
|
|
2760
2806
|
}))
|
|
2761
2807
|
};
|
|
2762
2808
|
}
|
|
2763
|
-
function writeSchedule(operatorId, localDate, payload, nowMs) {
|
|
2764
|
-
const keep = scheduleCacheKey(operatorId, localDate);
|
|
2765
|
-
const mine = `${PREFIX}${operatorId}:`;
|
|
2809
|
+
function writeSchedule(operatorId, encodedUserKey2, localDate, payload, nowMs) {
|
|
2810
|
+
const keep = scheduleCacheKey(operatorId, encodedUserKey2, localDate);
|
|
2811
|
+
const mine = `${PREFIX}${operatorId}:${encodedUserKey2}:`;
|
|
2766
2812
|
try {
|
|
2767
2813
|
for (let i = localStorage.length - 1; i >= 0; i--) {
|
|
2768
2814
|
const key = localStorage.key(i);
|
|
@@ -2773,6 +2819,12 @@ function writeSchedule(operatorId, localDate, payload, nowMs) {
|
|
|
2773
2819
|
} catch {
|
|
2774
2820
|
}
|
|
2775
2821
|
}
|
|
2822
|
+
function patchScheduleStar(operatorId, encodedUserKey2, localDate, competitionId, star) {
|
|
2823
|
+
const entry = read(operatorId, encodedUserKey2, localDate);
|
|
2824
|
+
if (!entry) return;
|
|
2825
|
+
const groups = entry.payload.groups.map((g) => g.competitionId === competitionId ? { ...g, ...star } : g);
|
|
2826
|
+
writeSchedule(operatorId, encodedUserKey2, localDate, { ...entry.payload, groups }, entry.at);
|
|
2827
|
+
}
|
|
2776
2828
|
|
|
2777
2829
|
// src/dueSet.ts
|
|
2778
2830
|
var TERMINAL_PHASES = /* @__PURE__ */ new Set(["fullTime", "postponed"]);
|
|
@@ -2793,6 +2845,9 @@ function dueMatchIds(groups, states, nowMs) {
|
|
|
2793
2845
|
var POLL_MS = 6e4;
|
|
2794
2846
|
var ROLLOVER_CHECK_MS = 6e4;
|
|
2795
2847
|
var STALE_AFTER_FAILURES = 2;
|
|
2848
|
+
function encodedUserKey(operatorUserId, anonymousUserId) {
|
|
2849
|
+
return encodeURIComponent(operatorUserId || anonymousUserId || "none");
|
|
2850
|
+
}
|
|
2796
2851
|
function localDateOf(now) {
|
|
2797
2852
|
const y = now.getFullYear();
|
|
2798
2853
|
const m = `${now.getMonth() + 1}`.padStart(2, "0");
|
|
@@ -2803,15 +2858,12 @@ function useMatchDiscovery(opts) {
|
|
|
2803
2858
|
const [groups, setGroups] = useState4([]);
|
|
2804
2859
|
const [states, setStates] = useState4({});
|
|
2805
2860
|
const [failures, setFailures] = useState4(0);
|
|
2806
|
-
const [expanded, setExpanded] = useState4({});
|
|
2807
|
-
const [touched, setTouched] = useState4({});
|
|
2808
2861
|
const groupsRef = useRef5(groups);
|
|
2809
2862
|
groupsRef.current = groups;
|
|
2810
2863
|
const statesRef = useRef5(states);
|
|
2811
2864
|
statesRef.current = states;
|
|
2812
2865
|
const getStatesRef = useRef5(opts.getStates);
|
|
2813
2866
|
getStatesRef.current = opts.getStates;
|
|
2814
|
-
const pinnedKey = opts.pinnedMatchIds.join(",");
|
|
2815
2867
|
const [localDate, setLocalDate] = useState4(() => localDateOf(/* @__PURE__ */ new Date()));
|
|
2816
2868
|
useEffect5(() => {
|
|
2817
2869
|
const id = setInterval(() => {
|
|
@@ -2823,7 +2875,8 @@ function useMatchDiscovery(opts) {
|
|
|
2823
2875
|
useEffect5(() => {
|
|
2824
2876
|
let cancelled = false;
|
|
2825
2877
|
const utcOffsetMinutes = -(/* @__PURE__ */ new Date()).getTimezoneOffset();
|
|
2826
|
-
const
|
|
2878
|
+
const key = encodedUserKey(opts.operatorUserId, opts.anonymousUserId);
|
|
2879
|
+
const cached = readSchedule(opts.operatorId, key, localDate, Date.now());
|
|
2827
2880
|
if (cached) {
|
|
2828
2881
|
if (!cancelled) setGroups(cached.groups);
|
|
2829
2882
|
return () => {
|
|
@@ -2834,28 +2887,17 @@ function useMatchDiscovery(opts) {
|
|
|
2834
2887
|
try {
|
|
2835
2888
|
const payload = await opts.getSchedule(localDate, utcOffsetMinutes);
|
|
2836
2889
|
if (cancelled || !payload) return;
|
|
2837
|
-
writeSchedule(opts.operatorId, localDate, payload, Date.now());
|
|
2890
|
+
writeSchedule(opts.operatorId, key, localDate, payload, Date.now());
|
|
2838
2891
|
setGroups(payload.groups);
|
|
2839
2892
|
} catch {
|
|
2840
|
-
const fallback = readScheduleIgnoringTtl(opts.operatorId, localDate);
|
|
2893
|
+
const fallback = readScheduleIgnoringTtl(opts.operatorId, key, localDate);
|
|
2841
2894
|
if (!cancelled && fallback) setGroups(fallback.groups);
|
|
2842
2895
|
}
|
|
2843
2896
|
})();
|
|
2844
2897
|
return () => {
|
|
2845
2898
|
cancelled = true;
|
|
2846
2899
|
};
|
|
2847
|
-
}, [opts.operatorId, localDate]);
|
|
2848
|
-
useEffect5(() => {
|
|
2849
|
-
setExpanded((prev) => {
|
|
2850
|
-
const next = {};
|
|
2851
|
-
for (const group of groups) {
|
|
2852
|
-
const hasPin = group.matches.some((m) => opts.pinnedMatchIds.includes(m.matchId));
|
|
2853
|
-
const seeded = group.expandedByDefault || hasPin;
|
|
2854
|
-
next[group.competitionId] = touched[group.competitionId] ? prev[group.competitionId] ?? seeded : seeded;
|
|
2855
|
-
}
|
|
2856
|
-
return next;
|
|
2857
|
-
});
|
|
2858
|
-
}, [groups, pinnedKey, touched]);
|
|
2900
|
+
}, [opts.operatorId, opts.operatorUserId, opts.anonymousUserId, localDate]);
|
|
2859
2901
|
const tick = useCallback4(async () => {
|
|
2860
2902
|
const ids = dueMatchIds(groupsRef.current, statesRef.current, Date.now());
|
|
2861
2903
|
if (ids.length === 0) return;
|
|
@@ -2885,11 +2927,20 @@ function useMatchDiscovery(opts) {
|
|
|
2885
2927
|
() => stale ? 0 : Object.values(states).filter((s) => s.phase === "live").length,
|
|
2886
2928
|
[states, stale]
|
|
2887
2929
|
);
|
|
2888
|
-
const
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2930
|
+
const starLeague = useCallback4(async (competitionId, starred) => {
|
|
2931
|
+
let result;
|
|
2932
|
+
try {
|
|
2933
|
+
result = await opts.postLeagueStar(competitionId, starred);
|
|
2934
|
+
} catch {
|
|
2935
|
+
return false;
|
|
2936
|
+
}
|
|
2937
|
+
if (!result) return false;
|
|
2938
|
+
const patch = { isStarred: result.starred, isLearned: false, learnedRank: null };
|
|
2939
|
+
setGroups((prev) => prev.map((g) => g.competitionId === competitionId ? { ...g, ...patch } : g));
|
|
2940
|
+
patchScheduleStar(opts.operatorId, encodedUserKey(opts.operatorUserId, opts.anonymousUserId), localDate, competitionId, patch);
|
|
2941
|
+
return true;
|
|
2942
|
+
}, [opts.postLeagueStar, opts.operatorId, opts.operatorUserId, opts.anonymousUserId, localDate]);
|
|
2943
|
+
return { groups, states, liveCount, stale, starLeague, _tick: tick };
|
|
2893
2944
|
}
|
|
2894
2945
|
|
|
2895
2946
|
// src/useGames.ts
|
|
@@ -3363,7 +3414,7 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
|
|
|
3363
3414
|
}
|
|
3364
3415
|
|
|
3365
3416
|
// src/components/ChatPanel.tsx
|
|
3366
|
-
import { useCallback as
|
|
3417
|
+
import { useCallback as useCallback17, useEffect as useEffect28, useMemo as useMemo5, useRef as useRef24, useState as useState47 } from "react";
|
|
3367
3418
|
|
|
3368
3419
|
// src/components/ChatHeader.tsx
|
|
3369
3420
|
import { useEffect as useEffect12, useRef as useRef12, useState as useState10 } from "react";
|
|
@@ -3768,7 +3819,8 @@ function PinToggle({ pin, monitor, ui, market }) {
|
|
|
3768
3819
|
const key = pinKey(pin);
|
|
3769
3820
|
const pinned = monitor.isPinned(key);
|
|
3770
3821
|
const labels = pin.kind === "match" ? { pin: ui.matchPinLabel, unpin: ui.matchUnpinLabel } : { pin: ui.pinLabel, unpin: ui.unpinLabel };
|
|
3771
|
-
const onClick = () => {
|
|
3822
|
+
const onClick = (e) => {
|
|
3823
|
+
e.stopPropagation();
|
|
3772
3824
|
if (pin.kind === "match" && !monitor.isPinned(key)) {
|
|
3773
3825
|
if (monitor.pinMatch({ matchId: pin.matchId, marketDeveloperName: market }) === "added") {
|
|
3774
3826
|
log?.log({ name: "pin_add", entityType: "match", entityId: String(pin.matchId), marketDeveloperName: pin.marketDeveloperName });
|
|
@@ -5871,16 +5923,135 @@ function OddsPanel({ monitor, ui, slip }) {
|
|
|
5871
5923
|
}) });
|
|
5872
5924
|
}
|
|
5873
5925
|
|
|
5874
|
-
// src/components/
|
|
5926
|
+
// src/components/TodayPanel.tsx
|
|
5927
|
+
import { useEffect as useEffect21, useId as useId2, useMemo as useMemo4, useState as useState29 } from "react";
|
|
5928
|
+
|
|
5929
|
+
// src/placement.ts
|
|
5930
|
+
function placeLeagues(visible, pinnedMatchIds) {
|
|
5931
|
+
const candidates = [];
|
|
5932
|
+
const candidateIds = /* @__PURE__ */ new Set();
|
|
5933
|
+
for (const g of visible) {
|
|
5934
|
+
if (g.isStarred) {
|
|
5935
|
+
candidates.push(g);
|
|
5936
|
+
candidateIds.add(g.competitionId);
|
|
5937
|
+
}
|
|
5938
|
+
}
|
|
5939
|
+
let budget = 4;
|
|
5940
|
+
const pinned = visible.find(
|
|
5941
|
+
(g) => !candidateIds.has(g.competitionId) && g.matches.some((m) => pinnedMatchIds.includes(m.matchId))
|
|
5942
|
+
) ?? null;
|
|
5943
|
+
if (pinned && budget > 0) {
|
|
5944
|
+
candidates.push(pinned);
|
|
5945
|
+
candidateIds.add(pinned.competitionId);
|
|
5946
|
+
budget -= 1;
|
|
5947
|
+
}
|
|
5948
|
+
const learned = visible.filter((g) => g.isLearned && !candidateIds.has(g.competitionId)).sort((a, b) => (a.learnedRank ?? Number.MAX_SAFE_INTEGER) - (b.learnedRank ?? Number.MAX_SAFE_INTEGER));
|
|
5949
|
+
for (const g of learned) {
|
|
5950
|
+
if (budget <= 0) break;
|
|
5951
|
+
candidates.push(g);
|
|
5952
|
+
candidateIds.add(g.competitionId);
|
|
5953
|
+
budget -= 1;
|
|
5954
|
+
}
|
|
5955
|
+
const personal = candidates.length > 0;
|
|
5956
|
+
const pool = personal ? candidates : visible.slice(0, 4);
|
|
5957
|
+
const poolIds = personal ? candidateIds : new Set(pool.map((g) => g.competitionId));
|
|
5958
|
+
const others = visible.filter((g) => !poolIds.has(g.competitionId));
|
|
5959
|
+
return { personal, candidates: pool, others, order: [...pool, ...others], pinnedCompetitionId: pinned?.competitionId ?? null };
|
|
5960
|
+
}
|
|
5961
|
+
function starClickable(group, pinnedCompetitionId) {
|
|
5962
|
+
return group.isStarred || group.competitionId !== pinnedCompetitionId;
|
|
5963
|
+
}
|
|
5964
|
+
|
|
5965
|
+
// src/search.ts
|
|
5966
|
+
function foldSearchText(s) {
|
|
5967
|
+
return s.replace(/İ/g, "I").replace(/ı/g, "i").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
|
|
5968
|
+
}
|
|
5969
|
+
function matchesQuery(group, query) {
|
|
5970
|
+
const q = foldSearchText(query.trim());
|
|
5971
|
+
if (!q) return true;
|
|
5972
|
+
if (foldSearchText(group.competitionName).includes(q)) return true;
|
|
5973
|
+
if (group.competitionCountry && foldSearchText(group.competitionCountry).includes(q)) return true;
|
|
5974
|
+
return group.matches.some(
|
|
5975
|
+
(m) => foldSearchText(m.homeTeamName).includes(q) || foldSearchText(m.awayTeamName).includes(q)
|
|
5976
|
+
);
|
|
5977
|
+
}
|
|
5978
|
+
|
|
5979
|
+
// src/useStarTap.ts
|
|
5980
|
+
import { useCallback as useCallback13, useRef as useRef17, useState as useState27 } from "react";
|
|
5981
|
+
function useStarTap(starLeague) {
|
|
5982
|
+
const [pendingId, setPendingId] = useState27(null);
|
|
5983
|
+
const pendingRef = useRef17(null);
|
|
5984
|
+
const tap = useCallback13(async (competitionId, next) => {
|
|
5985
|
+
if (pendingRef.current !== null) return false;
|
|
5986
|
+
pendingRef.current = competitionId;
|
|
5987
|
+
setPendingId(competitionId);
|
|
5988
|
+
try {
|
|
5989
|
+
return await starLeague(competitionId, next);
|
|
5990
|
+
} finally {
|
|
5991
|
+
pendingRef.current = null;
|
|
5992
|
+
setPendingId(null);
|
|
5993
|
+
}
|
|
5994
|
+
}, [starLeague]);
|
|
5995
|
+
return { pendingId, tap };
|
|
5996
|
+
}
|
|
5997
|
+
|
|
5998
|
+
// src/components/LeagueTile.tsx
|
|
5875
5999
|
import { jsx as jsx55, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
6000
|
+
var STAR_PATH = "M12 2.5l2.9 5.9 6.5.95-4.7 4.58 1.1 6.47L12 17.35 6.1 20.4l1.1-6.47L2.5 9.35l6.5-.95z";
|
|
6001
|
+
function LeagueTile({ group, starClickable: starClickable2, disambiguate, onOpen, starTap, ui }) {
|
|
6002
|
+
const onStarClick = () => {
|
|
6003
|
+
void starTap.tap(group.competitionId, !group.isStarred);
|
|
6004
|
+
};
|
|
6005
|
+
return /* @__PURE__ */ jsxs50("div", { className: "ss-w-today-tile", children: [
|
|
6006
|
+
/* @__PURE__ */ jsxs50("button", { type: "button", className: "ss-w-today-tile-body", onClick: onOpen, children: [
|
|
6007
|
+
/* @__PURE__ */ jsx55(Crest2, { url: group.competitionImagePath ?? void 0, name: group.competitionName, kind: "comp" }),
|
|
6008
|
+
/* @__PURE__ */ jsxs50("span", { className: "ss-w-today-tile-name", children: [
|
|
6009
|
+
group.competitionName,
|
|
6010
|
+
disambiguate && group.competitionCountry ? /* @__PURE__ */ jsxs50("span", { className: "ss-w-today-tile-country", children: [
|
|
6011
|
+
" (",
|
|
6012
|
+
group.competitionCountry,
|
|
6013
|
+
")"
|
|
6014
|
+
] }) : null
|
|
6015
|
+
] })
|
|
6016
|
+
] }),
|
|
6017
|
+
/* @__PURE__ */ jsx55(
|
|
6018
|
+
"button",
|
|
6019
|
+
{
|
|
6020
|
+
type: "button",
|
|
6021
|
+
className: "ss-w-today-tile-star",
|
|
6022
|
+
"aria-pressed": group.isStarred,
|
|
6023
|
+
"aria-label": group.isStarred ? ui.starOffLabel : ui.starOnLabel,
|
|
6024
|
+
disabled: !starClickable2 || starTap.pendingId !== null,
|
|
6025
|
+
onClick: onStarClick,
|
|
6026
|
+
children: /* @__PURE__ */ jsx55("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx55(
|
|
6027
|
+
"path",
|
|
6028
|
+
{
|
|
6029
|
+
d: STAR_PATH,
|
|
6030
|
+
fill: group.isStarred ? "currentColor" : "none",
|
|
6031
|
+
stroke: group.isStarred ? "none" : "currentColor",
|
|
6032
|
+
strokeWidth: 2,
|
|
6033
|
+
strokeLinejoin: "round",
|
|
6034
|
+
strokeLinecap: "round"
|
|
6035
|
+
}
|
|
6036
|
+
) })
|
|
6037
|
+
}
|
|
6038
|
+
)
|
|
6039
|
+
] });
|
|
6040
|
+
}
|
|
6041
|
+
|
|
6042
|
+
// src/components/LeagueDetail.tsx
|
|
6043
|
+
import { useEffect as useEffect20, useState as useState28 } from "react";
|
|
6044
|
+
|
|
6045
|
+
// src/components/FixtureRow.tsx
|
|
6046
|
+
import { jsx as jsx56, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
5876
6047
|
function kickoffLabel(kickoffUnix) {
|
|
5877
6048
|
const d = new Date(kickoffUnix * 1e3);
|
|
5878
6049
|
return `${`${d.getHours()}`.padStart(2, "0")}:${`${d.getMinutes()}`.padStart(2, "0")}`;
|
|
5879
6050
|
}
|
|
5880
6051
|
function Side({ name, crest, away = false }) {
|
|
5881
|
-
return /* @__PURE__ */
|
|
5882
|
-
crest ? /* @__PURE__ */
|
|
5883
|
-
/* @__PURE__ */
|
|
6052
|
+
return /* @__PURE__ */ jsxs51("span", { className: away ? "ss-w-drow-side ss-w-drow-side--away" : "ss-w-drow-side", children: [
|
|
6053
|
+
crest ? /* @__PURE__ */ jsx56("img", { className: "ss-w-drow-crest", src: crest, alt: "" }) : null,
|
|
6054
|
+
/* @__PURE__ */ jsx56("span", { className: "ss-w-drow-nm", children: name })
|
|
5884
6055
|
] });
|
|
5885
6056
|
}
|
|
5886
6057
|
function FixtureRow({ match, state, stale, ui, monitor }) {
|
|
@@ -5889,100 +6060,352 @@ function FixtureRow({ match, state, stale, ui, monitor }) {
|
|
|
5889
6060
|
const score = hasScore ? `${state.homeScore}\u2013${state.awayScore}` : void 0;
|
|
5890
6061
|
const ticked = state?.phase === "live" ? state.minuteLabel ?? null : null;
|
|
5891
6062
|
const when = state?.isHalfTime && !stale ? ui.halfTime : isLive ? ticked ?? "\u2014" : state?.phase === "live" ? "\u2014" : kickoffLabel(match.kickoffUnix);
|
|
5892
|
-
return /* @__PURE__ */
|
|
5893
|
-
/* @__PURE__ */
|
|
5894
|
-
/* @__PURE__ */
|
|
5895
|
-
/* @__PURE__ */
|
|
5896
|
-
/* @__PURE__ */
|
|
5897
|
-
/* @__PURE__ */
|
|
6063
|
+
return /* @__PURE__ */ jsxs51("div", { className: isLive || state?.isHalfTime ? "ss-w-drow ss-w-drow--live" : "ss-w-drow", children: [
|
|
6064
|
+
/* @__PURE__ */ jsx56("span", { className: isLive || state?.isHalfTime ? "ss-w-drow-when ss-w-drow-when--live" : "ss-w-drow-when", children: when }),
|
|
6065
|
+
/* @__PURE__ */ jsxs51("span", { className: "ss-w-drow-fx", children: [
|
|
6066
|
+
/* @__PURE__ */ jsx56(Side, { name: match.homeTeamName, crest: match.homeTeamImagePath }),
|
|
6067
|
+
/* @__PURE__ */ jsx56("span", { className: hasScore ? "ss-w-drow-sc" : "ss-w-drow-sc ss-w-drow-sc--idle", children: score ?? "\u2013" }),
|
|
6068
|
+
/* @__PURE__ */ jsx56(Side, { name: match.awayTeamName, crest: match.awayTeamImagePath, away: true })
|
|
5898
6069
|
] }),
|
|
5899
|
-
/* @__PURE__ */
|
|
6070
|
+
/* @__PURE__ */ jsx56(PinToggle, { ui, monitor, pin: { kind: "match", matchId: match.matchId } })
|
|
5900
6071
|
] });
|
|
5901
6072
|
}
|
|
5902
6073
|
|
|
5903
|
-
// src/components/
|
|
5904
|
-
import { jsx as
|
|
5905
|
-
|
|
6074
|
+
// src/components/LeagueDetail.tsx
|
|
6075
|
+
import { jsx as jsx57, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
6076
|
+
var STAR_PATH2 = "M12 2.5l2.9 5.9 6.5.95-4.7 4.58 1.1 6.47L12 17.35 6.1 20.4l1.1-6.47L2.5 9.35l6.5-.95z";
|
|
6077
|
+
function LeagueDetail({ group, position, states, stale, ui, monitor, starTap, onBack, onPrev, onNext }) {
|
|
6078
|
+
const [toast, setToast] = useState28(null);
|
|
6079
|
+
useEffect20(() => {
|
|
6080
|
+
setToast(null);
|
|
6081
|
+
}, [group.competitionId]);
|
|
6082
|
+
useEffect20(() => {
|
|
6083
|
+
if (toast === null) return;
|
|
6084
|
+
const id = setTimeout(() => setToast(null), 4e3);
|
|
6085
|
+
return () => clearTimeout(id);
|
|
6086
|
+
}, [toast]);
|
|
5906
6087
|
const own = group.matches.filter((m) => !isTreatedLive(states[m.matchId], stale));
|
|
5907
|
-
const
|
|
5908
|
-
|
|
5909
|
-
|
|
5910
|
-
|
|
5911
|
-
|
|
5912
|
-
|
|
5913
|
-
|
|
5914
|
-
|
|
5915
|
-
/* @__PURE__ */
|
|
5916
|
-
|
|
5917
|
-
|
|
5918
|
-
|
|
5919
|
-
|
|
5920
|
-
|
|
5921
|
-
|
|
5922
|
-
|
|
5923
|
-
|
|
6088
|
+
const onStarClick = () => {
|
|
6089
|
+
const next = !group.isStarred;
|
|
6090
|
+
void starTap.tap(group.competitionId, next).then((ok) => {
|
|
6091
|
+
if (ok) setToast(next ? ui.starredToast : ui.unstarredToast);
|
|
6092
|
+
});
|
|
6093
|
+
};
|
|
6094
|
+
return /* @__PURE__ */ jsxs52("div", { className: "ss-w-today-detail", children: [
|
|
6095
|
+
/* @__PURE__ */ jsxs52("div", { className: "ss-w-today-detail-head", children: [
|
|
6096
|
+
/* @__PURE__ */ jsx57("button", { type: "button", className: "ss-w-today-detail-back", "aria-label": ui.back, onClick: onBack, children: /* @__PURE__ */ jsx57(ChevronIcon, {}) }),
|
|
6097
|
+
/* @__PURE__ */ jsx57(Crest2, { url: group.competitionImagePath ?? void 0, name: group.competitionName, kind: "comp" }),
|
|
6098
|
+
/* @__PURE__ */ jsx57("span", { className: "ss-w-today-detail-name", children: group.competitionName }),
|
|
6099
|
+
/* @__PURE__ */ jsx57(
|
|
6100
|
+
"button",
|
|
6101
|
+
{
|
|
6102
|
+
type: "button",
|
|
6103
|
+
className: "ss-w-today-detail-star",
|
|
6104
|
+
"aria-pressed": group.isStarred,
|
|
6105
|
+
"aria-label": group.isStarred ? ui.starOffLabel : ui.starOnLabel,
|
|
6106
|
+
disabled: starTap.pendingId !== null,
|
|
6107
|
+
onClick: onStarClick,
|
|
6108
|
+
children: /* @__PURE__ */ jsx57("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx57(
|
|
6109
|
+
"path",
|
|
6110
|
+
{
|
|
6111
|
+
d: STAR_PATH2,
|
|
6112
|
+
fill: group.isStarred ? "currentColor" : "none",
|
|
6113
|
+
stroke: group.isStarred ? "none" : "currentColor",
|
|
6114
|
+
strokeWidth: 2,
|
|
6115
|
+
strokeLinejoin: "round",
|
|
6116
|
+
strokeLinecap: "round"
|
|
6117
|
+
}
|
|
6118
|
+
) })
|
|
6119
|
+
}
|
|
6120
|
+
)
|
|
6121
|
+
] }),
|
|
6122
|
+
/* @__PURE__ */ jsxs52("div", { className: "ss-w-today-detail-nav", children: [
|
|
6123
|
+
/* @__PURE__ */ jsx57(
|
|
6124
|
+
"button",
|
|
6125
|
+
{
|
|
6126
|
+
type: "button",
|
|
6127
|
+
className: "ss-w-today-detail-prev",
|
|
6128
|
+
"aria-label": ui.prevLeagueLabel,
|
|
6129
|
+
disabled: position.index <= 1,
|
|
6130
|
+
onClick: onPrev,
|
|
6131
|
+
children: /* @__PURE__ */ jsx57(ChevronIcon, {})
|
|
6132
|
+
}
|
|
6133
|
+
),
|
|
6134
|
+
/* @__PURE__ */ jsx57("span", { className: "ss-w-today-detail-pos", children: ui.leagueDetailPosition(position.index, position.total) }),
|
|
6135
|
+
/* @__PURE__ */ jsx57(
|
|
6136
|
+
"button",
|
|
6137
|
+
{
|
|
6138
|
+
type: "button",
|
|
6139
|
+
className: "ss-w-today-detail-next",
|
|
6140
|
+
"aria-label": ui.nextLeagueLabel,
|
|
6141
|
+
disabled: position.index >= position.total,
|
|
6142
|
+
onClick: onNext,
|
|
6143
|
+
children: /* @__PURE__ */ jsx57(ChevronIcon, {})
|
|
6144
|
+
}
|
|
6145
|
+
)
|
|
6146
|
+
] }),
|
|
6147
|
+
/* @__PURE__ */ jsxs52("div", { className: "ss-w-today-detail-body", children: [
|
|
6148
|
+
/* @__PURE__ */ jsx57("span", { className: "ss-w-today-detail-count", children: own.length }),
|
|
6149
|
+
own.map((m) => /* @__PURE__ */ jsx57(FixtureRow, { match: m, state: states[m.matchId], stale, ui, monitor }, m.matchId))
|
|
5924
6150
|
] }),
|
|
5925
|
-
|
|
6151
|
+
toast !== null && /* @__PURE__ */ jsx57("p", { className: "ss-w-today-toast", role: "status", "aria-live": "polite", children: toast })
|
|
6152
|
+
] });
|
|
6153
|
+
}
|
|
6154
|
+
|
|
6155
|
+
// src/components/games/ui/SearchField.tsx
|
|
6156
|
+
import { useCallback as useCallback14, useRef as useRef18 } from "react";
|
|
6157
|
+
|
|
6158
|
+
// src/components/games/ui/icons.tsx
|
|
6159
|
+
import { jsx as jsx58 } from "react/jsx-runtime";
|
|
6160
|
+
var svg = (size, children, fill = false) => /* @__PURE__ */ jsx58(
|
|
6161
|
+
"svg",
|
|
6162
|
+
{
|
|
6163
|
+
width: size,
|
|
6164
|
+
height: size,
|
|
6165
|
+
viewBox: "0 0 24 24",
|
|
6166
|
+
fill: fill ? "currentColor" : "none",
|
|
6167
|
+
stroke: fill ? "none" : "currentColor",
|
|
6168
|
+
strokeWidth: 2.2,
|
|
6169
|
+
strokeLinecap: "round",
|
|
6170
|
+
strokeLinejoin: "round",
|
|
6171
|
+
"aria-hidden": "true",
|
|
6172
|
+
children
|
|
6173
|
+
}
|
|
6174
|
+
);
|
|
6175
|
+
var IconChevronLeft = ({ size = 20 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M15 18l-6-6 6-6" }));
|
|
6176
|
+
var IconLock = ({ size = 14 }) => svg(size, [/* @__PURE__ */ jsx58("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }, "a"), /* @__PURE__ */ jsx58("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" }, "b")]);
|
|
6177
|
+
var IconCheck = ({ size = 14 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M5 12l5 5 9-10" }));
|
|
6178
|
+
var IconClose = ({ size = 16 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M6 6l12 12M18 6L6 18" }));
|
|
6179
|
+
var IconSearch = ({ size = 18 }) => svg(size, [/* @__PURE__ */ jsx58("circle", { cx: "11", cy: "11", r: "7" }, "a"), /* @__PURE__ */ jsx58("path", { d: "M20 20l-3.5-3.5" }, "b")]);
|
|
6180
|
+
var IconPlus = ({ size = 20 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M12 5v14M5 12h14" }));
|
|
6181
|
+
var IconBulb = ({ size = 16 }) => svg(size, [/* @__PURE__ */ jsx58("path", { d: "M9 18h6M10 21h4" }, "a"), /* @__PURE__ */ jsx58("path", { d: "M12 3a6 6 0 0 0-3.5 10.9V16h7v-2.1A6 6 0 0 0 12 3z" }, "b")]);
|
|
6182
|
+
var IconArrowUp = ({ size = 12 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M12 19V5M5 12l7-7 7 7" }));
|
|
6183
|
+
var IconArrowDown = ({ size = 12 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M12 5v14M19 12l-7 7-7-7" }));
|
|
6184
|
+
var IconCalendar = ({ size = 18 }) => svg(size, [/* @__PURE__ */ jsx58("rect", { x: "4", y: "5", width: "16", height: "15", rx: "2" }, "a"), /* @__PURE__ */ jsx58("path", { d: "M4 10h16M9 3v4M15 3v4" }, "b")]);
|
|
6185
|
+
var IconShield = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M12 3l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V6z" }));
|
|
6186
|
+
var IconFlag = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M5 21V4M5 4h12l-2 4 2 4H5" }));
|
|
6187
|
+
var IconBall = ({ size = 18 }) => svg(size, [/* @__PURE__ */ jsx58("circle", { cx: "12", cy: "12", r: "9" }, "a"), /* @__PURE__ */ jsx58("path", { d: "M12 7l4 3-1.5 4.5h-5L8 10z" }, "b")]);
|
|
6188
|
+
var IconBoot = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M4 6h6l1 6 8 3v3H4z" }));
|
|
6189
|
+
var IconGloves = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M7 21v-8l-2-3V6a1.5 1.5 0 0 1 3 0v3V4a1.5 1.5 0 0 1 3 0v5V3.5a1.5 1.5 0 0 1 3 0V9V5a1.5 1.5 0 0 1 3 0v9l-2 3v4z" }));
|
|
6190
|
+
var IconFlame = ({ size = 16 }) => svg(size, /* @__PURE__ */ jsx58("path", { d: "M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-3 2-4 2-7 1.5 1 2 2 2 3 1-2 1-4 1-6z" }), true);
|
|
6191
|
+
|
|
6192
|
+
// src/components/games/ui/SearchField.tsx
|
|
6193
|
+
import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
6194
|
+
function SearchField({ id, label, labelHidden = false, placeholder, value, onChange, disabled, inputRef, onKeyDown, clearLabel }) {
|
|
6195
|
+
const localRef = useRef18(null);
|
|
6196
|
+
const setInputRef = useCallback14((node) => {
|
|
6197
|
+
localRef.current = node;
|
|
6198
|
+
if (typeof inputRef === "function") inputRef(node);
|
|
6199
|
+
else if (inputRef) inputRef.current = node;
|
|
6200
|
+
}, [inputRef]);
|
|
6201
|
+
return /* @__PURE__ */ jsxs53("div", { className: "ss-g-search", children: [
|
|
6202
|
+
/* @__PURE__ */ jsx59("label", { htmlFor: id, className: labelHidden ? "ss-g-sr" : "ss-g-search-label", children: label }),
|
|
6203
|
+
/* @__PURE__ */ jsxs53("div", { className: "ss-g-search-box", children: [
|
|
6204
|
+
/* @__PURE__ */ jsx59(IconSearch, {}),
|
|
6205
|
+
/* @__PURE__ */ jsx59(
|
|
6206
|
+
"input",
|
|
6207
|
+
{
|
|
6208
|
+
id,
|
|
6209
|
+
ref: setInputRef,
|
|
6210
|
+
type: "text",
|
|
6211
|
+
autoComplete: "off",
|
|
6212
|
+
placeholder,
|
|
6213
|
+
value,
|
|
6214
|
+
disabled,
|
|
6215
|
+
onKeyDown,
|
|
6216
|
+
onChange: (e) => onChange(e.target.value)
|
|
6217
|
+
}
|
|
6218
|
+
),
|
|
6219
|
+
clearLabel && value.length > 0 ? /* @__PURE__ */ jsx59(
|
|
6220
|
+
"button",
|
|
6221
|
+
{
|
|
6222
|
+
type: "button",
|
|
6223
|
+
className: "ss-g-search-clear",
|
|
6224
|
+
"aria-label": clearLabel,
|
|
6225
|
+
onClick: () => {
|
|
6226
|
+
onChange("");
|
|
6227
|
+
localRef.current?.focus();
|
|
6228
|
+
},
|
|
6229
|
+
children: /* @__PURE__ */ jsx59(IconClose, { size: 11 })
|
|
6230
|
+
}
|
|
6231
|
+
) : null
|
|
6232
|
+
] })
|
|
5926
6233
|
] });
|
|
5927
6234
|
}
|
|
5928
6235
|
|
|
5929
6236
|
// src/components/TodayPanel.tsx
|
|
5930
|
-
import { Fragment as Fragment7, jsx as
|
|
6237
|
+
import { Fragment as Fragment7, jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
5931
6238
|
function TodayPanel({ discovery, ui, monitor }) {
|
|
5932
|
-
const { groups, states, stale,
|
|
6239
|
+
const { groups, states, stale, starLeague } = discovery;
|
|
6240
|
+
const searchId = useId2();
|
|
6241
|
+
const [query, setQuery] = useState29("");
|
|
6242
|
+
const [selectedCompetitionId, setSelectedCompetitionId] = useState29(null);
|
|
6243
|
+
const [toast, setToast] = useState29(null);
|
|
6244
|
+
useEffect21(() => {
|
|
6245
|
+
if (toast === null) return;
|
|
6246
|
+
const id = setTimeout(() => setToast(null), 4e3);
|
|
6247
|
+
return () => clearTimeout(id);
|
|
6248
|
+
}, [toast]);
|
|
5933
6249
|
const visibleGroups = visibleGroupsOf(groups, states);
|
|
5934
|
-
const
|
|
6250
|
+
const pinnedMatchIds = useMemo4(
|
|
6251
|
+
() => monitor.pins.filter((p) => p.kind === "match").map((p) => p.matchId),
|
|
6252
|
+
[monitor.pins]
|
|
6253
|
+
);
|
|
6254
|
+
const placement = useMemo4(() => placeLeagues(visibleGroups, pinnedMatchIds), [visibleGroups, pinnedMatchIds]);
|
|
6255
|
+
const starTap = useStarTap(starLeague);
|
|
6256
|
+
const gridStarTap = useMemo4(() => ({
|
|
6257
|
+
pendingId: starTap.pendingId,
|
|
6258
|
+
tap: async (competitionId, next) => {
|
|
6259
|
+
const ok = await starTap.tap(competitionId, next);
|
|
6260
|
+
if (ok) setToast(next ? "starred" : "unstarred");
|
|
6261
|
+
return ok;
|
|
6262
|
+
}
|
|
6263
|
+
}), [starTap, starTap.pendingId]);
|
|
5935
6264
|
const nameCounts = visibleGroups.reduce((acc, g) => {
|
|
5936
6265
|
acc[g.competitionName] = (acc[g.competitionName] ?? 0) + 1;
|
|
5937
6266
|
return acc;
|
|
5938
6267
|
}, {});
|
|
5939
|
-
|
|
5940
|
-
|
|
5941
|
-
|
|
5942
|
-
|
|
5943
|
-
|
|
5944
|
-
|
|
5945
|
-
|
|
5946
|
-
|
|
5947
|
-
|
|
5948
|
-
|
|
5949
|
-
match,
|
|
5950
|
-
state: states[match.matchId],
|
|
5951
|
-
stale,
|
|
5952
|
-
ui,
|
|
5953
|
-
monitor
|
|
5954
|
-
},
|
|
5955
|
-
match.matchId
|
|
5956
|
-
)) })
|
|
6268
|
+
const openIndex = selectedCompetitionId === null ? -1 : placement.order.findIndex((g) => g.competitionId === selectedCompetitionId);
|
|
6269
|
+
const openGroup = openIndex === -1 ? void 0 : placement.order[openIndex];
|
|
6270
|
+
useEffect21(() => {
|
|
6271
|
+
if (selectedCompetitionId !== null && openGroup === void 0) setSelectedCompetitionId(null);
|
|
6272
|
+
}, [selectedCompetitionId, openGroup]);
|
|
6273
|
+
const liveRows = stale ? [] : visibleGroups.flatMap((group) => group.matches.filter((m) => isTreatedLive(states[m.matchId], stale)).map((match) => ({ match, rank: group.rank }))).sort((a, b) => a.rank - b.rank);
|
|
6274
|
+
const liveBand = liveRows.length > 0 && /* @__PURE__ */ jsxs54(Fragment7, { children: [
|
|
6275
|
+
/* @__PURE__ */ jsxs54("div", { className: "ss-w-sec-head", children: [
|
|
6276
|
+
/* @__PURE__ */ jsx60("span", { className: "ss-w-sec-dot", "aria-hidden": "true" }),
|
|
6277
|
+
ui.sectionLive
|
|
5957
6278
|
] }),
|
|
5958
|
-
|
|
5959
|
-
|
|
6279
|
+
/* @__PURE__ */ jsx60("div", { className: "ss-w-today-live", children: liveRows.map(({ match }) => /* @__PURE__ */ jsx60(
|
|
6280
|
+
FixtureRow,
|
|
5960
6281
|
{
|
|
5961
|
-
|
|
5962
|
-
|
|
5963
|
-
onToggle: () => toggleGroup(group.competitionId),
|
|
5964
|
-
disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
|
|
5965
|
-
states,
|
|
6282
|
+
match,
|
|
6283
|
+
state: states[match.matchId],
|
|
5966
6284
|
stale,
|
|
5967
6285
|
ui,
|
|
5968
6286
|
monitor
|
|
5969
6287
|
},
|
|
5970
|
-
|
|
5971
|
-
))
|
|
6288
|
+
match.matchId
|
|
6289
|
+
)) })
|
|
6290
|
+
] });
|
|
6291
|
+
if (openGroup !== void 0) {
|
|
6292
|
+
return /* @__PURE__ */ jsx60("div", { className: "ss-w-today-root", children: /* @__PURE__ */ jsxs54("div", { className: "ss-w-mon-list", children: [
|
|
6293
|
+
stale && /* @__PURE__ */ jsx60("div", { className: "ss-w-stale", children: ui.staleStates }),
|
|
6294
|
+
liveBand,
|
|
6295
|
+
/* @__PURE__ */ jsx60(
|
|
6296
|
+
LeagueDetail,
|
|
6297
|
+
{
|
|
6298
|
+
group: openGroup,
|
|
6299
|
+
position: { index: openIndex + 1, total: placement.order.length },
|
|
6300
|
+
states,
|
|
6301
|
+
stale,
|
|
6302
|
+
ui,
|
|
6303
|
+
monitor,
|
|
6304
|
+
starTap,
|
|
6305
|
+
onBack: () => setSelectedCompetitionId(null),
|
|
6306
|
+
onPrev: () => setSelectedCompetitionId(placement.order[Math.max(0, openIndex - 1)].competitionId),
|
|
6307
|
+
onNext: () => setSelectedCompetitionId(
|
|
6308
|
+
placement.order[Math.min(placement.order.length - 1, openIndex + 1)].competitionId
|
|
6309
|
+
)
|
|
6310
|
+
}
|
|
6311
|
+
)
|
|
6312
|
+
] }) });
|
|
6313
|
+
}
|
|
6314
|
+
const searching = query.trim().length > 0;
|
|
6315
|
+
const searchResults = searching ? placement.order.filter((g) => matchesQuery(g, query)) : [];
|
|
6316
|
+
return /* @__PURE__ */ jsxs54("div", { className: "ss-w-today-root", children: [
|
|
6317
|
+
/* @__PURE__ */ jsxs54("div", { className: "ss-w-mon-list", children: [
|
|
6318
|
+
stale && /* @__PURE__ */ jsx60("div", { className: "ss-w-stale", children: ui.staleStates }),
|
|
6319
|
+
!searching && liveBand,
|
|
6320
|
+
/* @__PURE__ */ jsx60(
|
|
6321
|
+
SearchField,
|
|
6322
|
+
{
|
|
6323
|
+
id: searchId,
|
|
6324
|
+
label: ui.searchLeaguesPlaceholder,
|
|
6325
|
+
labelHidden: true,
|
|
6326
|
+
placeholder: ui.searchLeaguesPlaceholder,
|
|
6327
|
+
value: query,
|
|
6328
|
+
onChange: setQuery,
|
|
6329
|
+
clearLabel: ui.clearSearchLabel
|
|
6330
|
+
}
|
|
6331
|
+
),
|
|
6332
|
+
searching ? searchResults.length === 0 ? /* @__PURE__ */ jsx60("div", { className: "ss-w-today-empty", children: ui.noLeagueResults }) : /* @__PURE__ */ jsx60(Fragment7, { children: searchResults.map((group) => /* @__PURE__ */ jsxs54("div", { className: "ss-w-today-search-block", children: [
|
|
6333
|
+
/* @__PURE__ */ jsxs54("div", { className: "ss-w-today-search-group", children: [
|
|
6334
|
+
/* @__PURE__ */ jsx60(Crest2, { url: group.competitionImagePath ?? void 0, name: group.competitionName, kind: "comp" }),
|
|
6335
|
+
/* @__PURE__ */ jsxs54("span", { className: "ss-w-today-search-group-name", children: [
|
|
6336
|
+
group.competitionName,
|
|
6337
|
+
(nameCounts[group.competitionName] ?? 0) > 1 && group.competitionCountry ? /* @__PURE__ */ jsxs54("span", { className: "ss-w-today-tile-country", children: [
|
|
6338
|
+
" (",
|
|
6339
|
+
group.competitionCountry,
|
|
6340
|
+
")"
|
|
6341
|
+
] }) : null
|
|
6342
|
+
] })
|
|
6343
|
+
] }),
|
|
6344
|
+
group.matches.map((match) => /* @__PURE__ */ jsx60(
|
|
6345
|
+
"div",
|
|
6346
|
+
{
|
|
6347
|
+
role: "button",
|
|
6348
|
+
tabIndex: 0,
|
|
6349
|
+
className: "ss-w-today-search-row",
|
|
6350
|
+
onClick: () => setSelectedCompetitionId(group.competitionId),
|
|
6351
|
+
onKeyDown: (e) => {
|
|
6352
|
+
if (e.target !== e.currentTarget) return;
|
|
6353
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
6354
|
+
e.preventDefault();
|
|
6355
|
+
setSelectedCompetitionId(group.competitionId);
|
|
6356
|
+
}
|
|
6357
|
+
},
|
|
6358
|
+
children: /* @__PURE__ */ jsx60(FixtureRow, { match, state: states[match.matchId], stale, ui, monitor })
|
|
6359
|
+
},
|
|
6360
|
+
match.matchId
|
|
6361
|
+
))
|
|
6362
|
+
] }, group.competitionId)) }) : /* @__PURE__ */ jsxs54(Fragment7, { children: [
|
|
6363
|
+
/* @__PURE__ */ jsxs54("div", { className: "ss-w-today-sec", children: [
|
|
6364
|
+
placement.personal ? ui.yourLeagues : ui.topLeagues,
|
|
6365
|
+
!placement.personal && /* @__PURE__ */ jsx60("span", { className: "ss-w-today-sec-sub", children: ui.topLeaguesSub })
|
|
6366
|
+
] }),
|
|
6367
|
+
/* @__PURE__ */ jsx60("div", { className: "ss-w-today-tiles", children: placement.candidates.map((group) => /* @__PURE__ */ jsx60(
|
|
6368
|
+
LeagueTile,
|
|
6369
|
+
{
|
|
6370
|
+
group,
|
|
6371
|
+
starClickable: starClickable(group, placement.pinnedCompetitionId),
|
|
6372
|
+
disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
|
|
6373
|
+
onOpen: () => setSelectedCompetitionId(group.competitionId),
|
|
6374
|
+
starTap: gridStarTap,
|
|
6375
|
+
ui
|
|
6376
|
+
},
|
|
6377
|
+
group.competitionId
|
|
6378
|
+
)) }),
|
|
6379
|
+
/* @__PURE__ */ jsx60("div", { className: "ss-w-today-sec", children: ui.allLeagues }),
|
|
6380
|
+
/* @__PURE__ */ jsx60("div", { className: "ss-w-today-tiles", children: placement.others.map((group) => /* @__PURE__ */ jsx60(
|
|
6381
|
+
LeagueTile,
|
|
6382
|
+
{
|
|
6383
|
+
group,
|
|
6384
|
+
starClickable: starClickable(group, placement.pinnedCompetitionId),
|
|
6385
|
+
disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
|
|
6386
|
+
onOpen: () => setSelectedCompetitionId(group.competitionId),
|
|
6387
|
+
starTap: gridStarTap,
|
|
6388
|
+
ui
|
|
6389
|
+
},
|
|
6390
|
+
group.competitionId
|
|
6391
|
+
)) })
|
|
6392
|
+
] })
|
|
6393
|
+
] }),
|
|
6394
|
+
toast !== null && /* @__PURE__ */ jsx60("p", { className: "ss-w-today-toast", role: "status", "aria-live": "polite", children: toast === "starred" ? ui.starredToast : ui.unstarredToast })
|
|
5972
6395
|
] });
|
|
5973
6396
|
}
|
|
5974
6397
|
|
|
5975
6398
|
// src/components/GamesPanel.tsx
|
|
5976
|
-
import { useEffect as
|
|
6399
|
+
import { useEffect as useEffect25, useState as useState43 } from "react";
|
|
5977
6400
|
|
|
5978
6401
|
// src/components/GamesLoginWall.tsx
|
|
5979
|
-
import { jsx as
|
|
6402
|
+
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
5980
6403
|
function GamesLoginWall({ ui }) {
|
|
5981
|
-
return /* @__PURE__ */
|
|
6404
|
+
return /* @__PURE__ */ jsx61("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx61("div", { className: "ss-w-games-wall", children: /* @__PURE__ */ jsx61("p", { children: ui.gamesLoginRequired }) }) });
|
|
5982
6405
|
}
|
|
5983
6406
|
|
|
5984
6407
|
// src/components/GamesHub.tsx
|
|
5985
|
-
import { useEffect as
|
|
6408
|
+
import { useEffect as useEffect22, useState as useState30 } from "react";
|
|
5986
6409
|
|
|
5987
6410
|
// src/components/games/ui/gameMeta.ts
|
|
5988
6411
|
function prettifyGameId(gameId) {
|
|
@@ -5998,108 +6421,74 @@ function splitName(full) {
|
|
|
5998
6421
|
}
|
|
5999
6422
|
|
|
6000
6423
|
// src/components/GameTileArt.tsx
|
|
6001
|
-
import { Fragment as Fragment8, jsx as
|
|
6424
|
+
import { Fragment as Fragment8, jsx as jsx62, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
6002
6425
|
function GameTileArt({ gameId }) {
|
|
6003
|
-
return /* @__PURE__ */
|
|
6426
|
+
return /* @__PURE__ */ jsx62("svg", { className: "ss-g-art", viewBox: "0 0 120 74", "aria-hidden": "true", children: ART[gameId] ?? ART.default });
|
|
6004
6427
|
}
|
|
6005
|
-
var head = (cx, cy, r, cls = "ss-g-art-fg") => /* @__PURE__ */
|
|
6006
|
-
/* @__PURE__ */
|
|
6007
|
-
/* @__PURE__ */
|
|
6428
|
+
var head = (cx, cy, r, cls = "ss-g-art-fg") => /* @__PURE__ */ jsxs55("g", { className: cls, children: [
|
|
6429
|
+
/* @__PURE__ */ jsx62("circle", { cx, cy: cy - r * 0.3, r: r * 0.45 }),
|
|
6430
|
+
/* @__PURE__ */ jsx62("path", { d: `M${cx - r} ${cy + r}c0-${r * 0.8} ${r * 0.45}-${r * 1.1} ${r}-${r * 1.1}s${r} ${r * 0.3} ${r} ${r * 1.1}z` })
|
|
6008
6431
|
] });
|
|
6009
6432
|
var ART = {
|
|
6010
|
-
"mystery-tiger": /* @__PURE__ */
|
|
6433
|
+
"mystery-tiger": /* @__PURE__ */ jsxs55(Fragment8, { children: [
|
|
6011
6434
|
head(60, 38, 26, "ss-g-art-fg"),
|
|
6012
|
-
/* @__PURE__ */
|
|
6435
|
+
/* @__PURE__ */ jsx62("text", { x: "60", y: "36", className: "ss-g-art-q", textAnchor: "middle", children: "?" })
|
|
6013
6436
|
] }),
|
|
6014
|
-
"higher-or-lower": /* @__PURE__ */
|
|
6437
|
+
"higher-or-lower": /* @__PURE__ */ jsxs55(Fragment8, { children: [
|
|
6015
6438
|
head(32, 38, 20),
|
|
6016
6439
|
head(88, 38, 20),
|
|
6017
|
-
/* @__PURE__ */
|
|
6018
|
-
/* @__PURE__ */
|
|
6440
|
+
/* @__PURE__ */ jsx62("circle", { cx: "60", cy: "37", r: "11", className: "ss-g-art-accent" }),
|
|
6441
|
+
/* @__PURE__ */ jsx62("path", { d: "M57 33l3-3 3 3M57 41l3 3 3-3", className: "ss-g-art-ink" })
|
|
6019
6442
|
] }),
|
|
6020
|
-
"guess-the-xi": /* @__PURE__ */
|
|
6021
|
-
/* @__PURE__ */
|
|
6022
|
-
[[60, 60, "a"], [24, 46], [48, 46], [72, 46], [96, 46], [36, 30], [60, 30], [84, 30], [40, 14], [60, 14], [80, 14]].map(([x, y, a], i) => /* @__PURE__ */
|
|
6443
|
+
"guess-the-xi": /* @__PURE__ */ jsxs55(Fragment8, { children: [
|
|
6444
|
+
/* @__PURE__ */ jsx62("rect", { x: "8", y: "4", width: "104", height: "66", rx: "6", className: "ss-g-art-pitch" }),
|
|
6445
|
+
[[60, 60, "a"], [24, 46], [48, 46], [72, 46], [96, 46], [36, 30], [60, 30], [84, 30], [40, 14], [60, 14], [80, 14]].map(([x, y, a], i) => /* @__PURE__ */ jsx62("circle", { cx: x, cy: y, r: "4", className: a ? "ss-g-art-accent" : "ss-g-art-dot" }, i))
|
|
6023
6446
|
] }),
|
|
6024
|
-
"daily-quiz": /* @__PURE__ */
|
|
6025
|
-
"career-path": /* @__PURE__ */
|
|
6026
|
-
/* @__PURE__ */
|
|
6027
|
-
/* @__PURE__ */
|
|
6028
|
-
/* @__PURE__ */
|
|
6029
|
-
/* @__PURE__ */
|
|
6030
|
-
/* @__PURE__ */
|
|
6447
|
+
"daily-quiz": /* @__PURE__ */ jsx62(Fragment8, { children: [[14, 8], [62, 8], [14, 40], [62, 40]].map(([x, y], i) => /* @__PURE__ */ jsx62("rect", { x, y, width: "44", height: "26", rx: "5", className: i === 1 ? "ss-g-art-correct" : "ss-g-art-block" }, i)) }),
|
|
6448
|
+
"career-path": /* @__PURE__ */ jsxs55(Fragment8, { children: [
|
|
6449
|
+
/* @__PURE__ */ jsx62("path", { d: "M18 22h24v10c0 7-5 11-12 13-7-2-12-6-12-13z", className: "ss-g-art-fg" }),
|
|
6450
|
+
/* @__PURE__ */ jsx62("path", { d: "M48 37h8M84 37h8", className: "ss-g-art-line" }),
|
|
6451
|
+
/* @__PURE__ */ jsx62("path", { d: "M60 22h24v10c0 7-5 11-12 13-7-2-12-6-12-13z", className: "ss-g-art-fg" }),
|
|
6452
|
+
/* @__PURE__ */ jsx62("rect", { x: "96", y: "22", width: "18", height: "26", rx: "4", className: "ss-g-art-dash" }),
|
|
6453
|
+
/* @__PURE__ */ jsx62("text", { x: "105", y: "40", className: "ss-g-art-q", textAnchor: "middle", children: "?" })
|
|
6031
6454
|
] }),
|
|
6032
|
-
"beat-the-grid": /* @__PURE__ */
|
|
6033
|
-
"matchday-predictor": /* @__PURE__ */
|
|
6034
|
-
/* @__PURE__ */
|
|
6035
|
-
/* @__PURE__ */
|
|
6036
|
-
/* @__PURE__ */
|
|
6037
|
-
/* @__PURE__ */
|
|
6455
|
+
"beat-the-grid": /* @__PURE__ */ jsx62(Fragment8, { children: [0, 1, 2].flatMap((r) => [0, 1, 2].map((c) => /* @__PURE__ */ jsx62("rect", { x: 33 + c * 19, y: 10 + r * 19, width: "16", height: "16", rx: "3", className: (r + c) % 3 === 0 ? "ss-g-art-accent" : "ss-g-art-block" }, `${r}${c}`))) }),
|
|
6456
|
+
"matchday-predictor": /* @__PURE__ */ jsxs55(Fragment8, { children: [
|
|
6457
|
+
/* @__PURE__ */ jsx62("path", { d: "M10 20h20v9c0 6-4 9-10 11-6-2-10-5-10-11z", className: "ss-g-art-fg" }),
|
|
6458
|
+
/* @__PURE__ */ jsx62("rect", { x: "38", y: "22", width: "18", height: "24", rx: "4", className: "ss-g-art-accent-stroke" }),
|
|
6459
|
+
/* @__PURE__ */ jsx62("rect", { x: "64", y: "22", width: "18", height: "24", rx: "4", className: "ss-g-art-dash" }),
|
|
6460
|
+
/* @__PURE__ */ jsx62("path", { d: "M90 20h20v9c0 6-4 9-10 11-6-2-10-5-10-11z", className: "ss-g-art-fg" })
|
|
6038
6461
|
] }),
|
|
6039
|
-
"starting-xi": /* @__PURE__ */
|
|
6040
|
-
/* @__PURE__ */
|
|
6041
|
-
[[60, 60], [30, 46], [50, 46], [70, 46], [90, 46], [45, 30], [75, 30], [30, 16], [60, 16], [90, 16]].map(([x, y], i) => /* @__PURE__ */
|
|
6462
|
+
"starting-xi": /* @__PURE__ */ jsxs55(Fragment8, { children: [
|
|
6463
|
+
/* @__PURE__ */ jsx62("rect", { x: "8", y: "4", width: "104", height: "66", rx: "6", className: "ss-g-art-pitch" }),
|
|
6464
|
+
[[60, 60], [30, 46], [50, 46], [70, 46], [90, 46], [45, 30], [75, 30], [30, 16], [60, 16], [90, 16]].map(([x, y], i) => /* @__PURE__ */ jsx62("circle", { cx: x, cy: y, r: "5", className: i < 7 ? "ss-g-art-accent" : "ss-g-art-dash" }, i))
|
|
6042
6465
|
] }),
|
|
6043
|
-
"stat-ladder": /* @__PURE__ */
|
|
6044
|
-
"fan-motm": /* @__PURE__ */
|
|
6045
|
-
/* @__PURE__ */
|
|
6466
|
+
"stat-ladder": /* @__PURE__ */ jsx62(Fragment8, { children: [[20, 70], [34, 52], [48, 34]].map(([y, w], i) => /* @__PURE__ */ jsx62("rect", { x: "24", y, width: w, height: "12", rx: "3", className: i === 1 ? "ss-g-art-accent" : "ss-g-art-block" }, i)) }),
|
|
6467
|
+
"fan-motm": /* @__PURE__ */ jsxs55(Fragment8, { children: [
|
|
6468
|
+
/* @__PURE__ */ jsx62("circle", { cx: "60", cy: "37", r: "26", className: "ss-g-art-accent-stroke" }),
|
|
6046
6469
|
head(60, 40, 18),
|
|
6047
|
-
/* @__PURE__ */
|
|
6470
|
+
/* @__PURE__ */ jsx62("path", { d: "M84 8l2.4 5 5.4.6-4 3.7 1.1 5.4-4.9-2.7-4.9 2.7 1.1-5.4-4-3.7 5.4-.6z", className: "ss-g-art-accent" })
|
|
6048
6471
|
] }),
|
|
6049
|
-
default: /* @__PURE__ */
|
|
6472
|
+
default: /* @__PURE__ */ jsx62("circle", { cx: "60", cy: "37", r: "22", className: "ss-g-art-fg" })
|
|
6050
6473
|
};
|
|
6051
6474
|
|
|
6052
6475
|
// src/components/games/ui/Chip.tsx
|
|
6053
|
-
import { jsx as
|
|
6476
|
+
import { jsx as jsx63, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
6054
6477
|
function Chip({ variant = "neutral", icon, children, className }) {
|
|
6055
|
-
return /* @__PURE__ */
|
|
6478
|
+
return /* @__PURE__ */ jsxs56("span", { className: `ss-g-chip ss-g-chip--${variant}${className ? ` ${className}` : ""}`, children: [
|
|
6056
6479
|
icon,
|
|
6057
6480
|
children
|
|
6058
6481
|
] });
|
|
6059
6482
|
}
|
|
6060
6483
|
function StatStack({ value, label }) {
|
|
6061
|
-
return /* @__PURE__ */
|
|
6062
|
-
/* @__PURE__ */
|
|
6063
|
-
/* @__PURE__ */
|
|
6484
|
+
return /* @__PURE__ */ jsxs56("span", { className: "ss-g-statstack", children: [
|
|
6485
|
+
/* @__PURE__ */ jsx63("span", { className: "ss-g-statstack-v", children: value }),
|
|
6486
|
+
/* @__PURE__ */ jsx63("span", { className: "ss-g-statstack-l", children: label })
|
|
6064
6487
|
] });
|
|
6065
6488
|
}
|
|
6066
6489
|
|
|
6067
|
-
// src/components/games/ui/icons.tsx
|
|
6068
|
-
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
6069
|
-
var svg = (size, children, fill = false) => /* @__PURE__ */ jsx61(
|
|
6070
|
-
"svg",
|
|
6071
|
-
{
|
|
6072
|
-
width: size,
|
|
6073
|
-
height: size,
|
|
6074
|
-
viewBox: "0 0 24 24",
|
|
6075
|
-
fill: fill ? "currentColor" : "none",
|
|
6076
|
-
stroke: fill ? "none" : "currentColor",
|
|
6077
|
-
strokeWidth: 2.2,
|
|
6078
|
-
strokeLinecap: "round",
|
|
6079
|
-
strokeLinejoin: "round",
|
|
6080
|
-
"aria-hidden": "true",
|
|
6081
|
-
children
|
|
6082
|
-
}
|
|
6083
|
-
);
|
|
6084
|
-
var IconChevronLeft = ({ size = 20 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M15 18l-6-6 6-6" }));
|
|
6085
|
-
var IconLock = ({ size = 14 }) => svg(size, [/* @__PURE__ */ jsx61("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }, "a"), /* @__PURE__ */ jsx61("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" }, "b")]);
|
|
6086
|
-
var IconCheck = ({ size = 14 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M5 12l5 5 9-10" }));
|
|
6087
|
-
var IconClose = ({ size = 16 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M6 6l12 12M18 6L6 18" }));
|
|
6088
|
-
var IconSearch = ({ size = 18 }) => svg(size, [/* @__PURE__ */ jsx61("circle", { cx: "11", cy: "11", r: "7" }, "a"), /* @__PURE__ */ jsx61("path", { d: "M20 20l-3.5-3.5" }, "b")]);
|
|
6089
|
-
var IconPlus = ({ size = 20 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M12 5v14M5 12h14" }));
|
|
6090
|
-
var IconBulb = ({ size = 16 }) => svg(size, [/* @__PURE__ */ jsx61("path", { d: "M9 18h6M10 21h4" }, "a"), /* @__PURE__ */ jsx61("path", { d: "M12 3a6 6 0 0 0-3.5 10.9V16h7v-2.1A6 6 0 0 0 12 3z" }, "b")]);
|
|
6091
|
-
var IconArrowUp = ({ size = 12 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M12 19V5M5 12l7-7 7 7" }));
|
|
6092
|
-
var IconArrowDown = ({ size = 12 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M12 5v14M19 12l-7 7-7-7" }));
|
|
6093
|
-
var IconCalendar = ({ size = 18 }) => svg(size, [/* @__PURE__ */ jsx61("rect", { x: "4", y: "5", width: "16", height: "15", rx: "2" }, "a"), /* @__PURE__ */ jsx61("path", { d: "M4 10h16M9 3v4M15 3v4" }, "b")]);
|
|
6094
|
-
var IconShield = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M12 3l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V6z" }));
|
|
6095
|
-
var IconFlag = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M5 21V4M5 4h12l-2 4 2 4H5" }));
|
|
6096
|
-
var IconBall = ({ size = 18 }) => svg(size, [/* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "9" }, "a"), /* @__PURE__ */ jsx61("path", { d: "M12 7l4 3-1.5 4.5h-5L8 10z" }, "b")]);
|
|
6097
|
-
var IconBoot = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M4 6h6l1 6 8 3v3H4z" }));
|
|
6098
|
-
var IconGloves = ({ size = 18 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M7 21v-8l-2-3V6a1.5 1.5 0 0 1 3 0v3V4a1.5 1.5 0 0 1 3 0v5V3.5a1.5 1.5 0 0 1 3 0V9V5a1.5 1.5 0 0 1 3 0v9l-2 3v4z" }));
|
|
6099
|
-
var IconFlame = ({ size = 16 }) => svg(size, /* @__PURE__ */ jsx61("path", { d: "M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-3 2-4 2-7 1.5 1 2 2 2 3 1-2 1-4 1-6z" }), true);
|
|
6100
|
-
|
|
6101
6490
|
// src/components/GameTile.tsx
|
|
6102
|
-
import { Fragment as Fragment9, jsx as
|
|
6491
|
+
import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
6103
6492
|
function tileStatus(game, ui) {
|
|
6104
6493
|
switch (game.status) {
|
|
6105
6494
|
case "locked":
|
|
@@ -6123,38 +6512,38 @@ function GameTile({ game, onOpen, ui, variant = "tile" }) {
|
|
|
6123
6512
|
const status = tileStatus(game, ui);
|
|
6124
6513
|
const disabled = DISABLED.has(game.status);
|
|
6125
6514
|
const title = gameTitle(game, ui.games.titles);
|
|
6126
|
-
const body = variant === "hero" ? /* @__PURE__ */
|
|
6127
|
-
/* @__PURE__ */
|
|
6128
|
-
/* @__PURE__ */
|
|
6129
|
-
status.tone === "new" && /* @__PURE__ */
|
|
6130
|
-
/* @__PURE__ */
|
|
6131
|
-
/* @__PURE__ */
|
|
6132
|
-
status.tone === "success" ? /* @__PURE__ */
|
|
6515
|
+
const body = variant === "hero" ? /* @__PURE__ */ jsxs57(Fragment9, { children: [
|
|
6516
|
+
/* @__PURE__ */ jsxs57("span", { className: "ss-g-hero-text", children: [
|
|
6517
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-hero-eyebrow", children: ui.games.dailyChallenge }),
|
|
6518
|
+
status.tone === "new" && /* @__PURE__ */ jsx64(Chip, { variant: "badge", children: ui.games.newToday }),
|
|
6519
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-hero-title", children: title }),
|
|
6520
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-hero-sub", children: ui.games.taglines[game.gameId] ?? "" }),
|
|
6521
|
+
status.tone === "success" ? /* @__PURE__ */ jsx64("span", { className: "ss-g-tile-status", "data-tone": "success", children: status.text }) : /* @__PURE__ */ jsxs57("span", { className: "ss-g-hero-cta", children: [
|
|
6133
6522
|
status.tone === "accent" ? ui.games.resume : ui.games.playNow,
|
|
6134
6523
|
" \u2192"
|
|
6135
6524
|
] })
|
|
6136
6525
|
] }),
|
|
6137
|
-
/* @__PURE__ */
|
|
6138
|
-
] }) : variant === "wide" ? /* @__PURE__ */
|
|
6139
|
-
/* @__PURE__ */
|
|
6140
|
-
/* @__PURE__ */
|
|
6141
|
-
/* @__PURE__ */
|
|
6142
|
-
/* @__PURE__ */
|
|
6143
|
-
status.tone === "new" && /* @__PURE__ */
|
|
6526
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-hero-art", children: /* @__PURE__ */ jsx64(GameTileArt, { gameId: game.gameId }) })
|
|
6527
|
+
] }) : variant === "wide" ? /* @__PURE__ */ jsxs57(Fragment9, { children: [
|
|
6528
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-wide-art", children: /* @__PURE__ */ jsx64(GameTileArt, { gameId: game.gameId }) }),
|
|
6529
|
+
/* @__PURE__ */ jsxs57("span", { className: "ss-g-wide-text", children: [
|
|
6530
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-tile-title", children: title }),
|
|
6531
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-tile-status", "data-tone": status.tone, children: status.text }),
|
|
6532
|
+
status.tone === "new" && /* @__PURE__ */ jsx64(Chip, { variant: "badge", children: ui.games.newToday })
|
|
6144
6533
|
] }),
|
|
6145
|
-
/* @__PURE__ */
|
|
6146
|
-
] }) : /* @__PURE__ */
|
|
6147
|
-
/* @__PURE__ */
|
|
6148
|
-
/* @__PURE__ */
|
|
6149
|
-
/* @__PURE__ */
|
|
6534
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-wide-chev", children: /* @__PURE__ */ jsx64(IconChevronLeft, { size: 18 }) })
|
|
6535
|
+
] }) : /* @__PURE__ */ jsxs57(Fragment9, { children: [
|
|
6536
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-tile-art", children: /* @__PURE__ */ jsx64(GameTileArt, { gameId: game.gameId }) }),
|
|
6537
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-tile-title", children: title }),
|
|
6538
|
+
/* @__PURE__ */ jsx64("span", { className: "ss-g-tile-status", "data-tone": status.tone, children: status.text })
|
|
6150
6539
|
] });
|
|
6151
6540
|
const cls = `ss-g-tile ss-g-tile--${variant}`;
|
|
6152
|
-
if (disabled) return /* @__PURE__ */
|
|
6153
|
-
return /* @__PURE__ */
|
|
6541
|
+
if (disabled) return /* @__PURE__ */ jsx64("div", { className: cls, "data-disabled": true, "aria-disabled": "true", children: body });
|
|
6542
|
+
return /* @__PURE__ */ jsx64("button", { type: "button", className: cls, "aria-label": `${title} \u2014 ${status.text}`, onClick: () => onOpen(game), children: body });
|
|
6154
6543
|
}
|
|
6155
6544
|
|
|
6156
6545
|
// src/components/GamesHub.tsx
|
|
6157
|
-
import { Fragment as Fragment10, jsx as
|
|
6546
|
+
import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
6158
6547
|
var PLAYABLE = /* @__PURE__ */ new Set(["available", "in_progress"]);
|
|
6159
6548
|
var DONE = /* @__PURE__ */ new Set(["played", "graded"]);
|
|
6160
6549
|
function pickHeroGame(games) {
|
|
@@ -6167,8 +6556,8 @@ function pickHeroGame(games) {
|
|
|
6167
6556
|
}
|
|
6168
6557
|
var tileKey = (g) => `${g.gameId}-${g.gameDay}-${g.fixtureId}`;
|
|
6169
6558
|
function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
|
|
6170
|
-
const [, setTick] =
|
|
6171
|
-
|
|
6559
|
+
const [, setTick] = useState30(0);
|
|
6560
|
+
useEffect22(() => {
|
|
6172
6561
|
const id = setInterval(() => setTick((t) => t + 1), 6e4);
|
|
6173
6562
|
return () => clearInterval(id);
|
|
6174
6563
|
}, []);
|
|
@@ -6180,58 +6569,58 @@ function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
|
|
|
6180
6569
|
const kickoffs = fixtures.map((g) => g.kickoffUtc).filter((k) => !!k).sort();
|
|
6181
6570
|
const todayPts = games.filter((g) => DONE.has(g.status)).reduce((s, g) => s + (g.score ?? 0), 0);
|
|
6182
6571
|
const dash = "\u2014";
|
|
6183
|
-
return /* @__PURE__ */
|
|
6184
|
-
/* @__PURE__ */
|
|
6185
|
-
/* @__PURE__ */
|
|
6186
|
-
/* @__PURE__ */
|
|
6187
|
-
/* @__PURE__ */
|
|
6188
|
-
myWeeklyRow ? /* @__PURE__ */
|
|
6189
|
-
/* @__PURE__ */
|
|
6572
|
+
return /* @__PURE__ */ jsxs58("div", { className: "ss-g-hub", children: [
|
|
6573
|
+
/* @__PURE__ */ jsxs58("div", { className: "ss-g-stats", children: [
|
|
6574
|
+
/* @__PURE__ */ jsxs58("div", { className: "ss-g-stat", children: [
|
|
6575
|
+
/* @__PURE__ */ jsx65("span", { className: "ss-g-stat-l", children: ui.games.statStreak }),
|
|
6576
|
+
/* @__PURE__ */ jsxs58("span", { className: "ss-g-stat-v", "data-testid": "stat-streak", children: [
|
|
6577
|
+
myWeeklyRow ? /* @__PURE__ */ jsxs58(Fragment10, { children: [
|
|
6578
|
+
/* @__PURE__ */ jsx65(IconFlame, {}),
|
|
6190
6579
|
myWeeklyRow.currentStreak
|
|
6191
6580
|
] }) : dash,
|
|
6192
|
-
myWeeklyRow && /* @__PURE__ */
|
|
6581
|
+
myWeeklyRow && /* @__PURE__ */ jsx65("small", { children: ui.games.unitDays })
|
|
6193
6582
|
] })
|
|
6194
6583
|
] }),
|
|
6195
|
-
/* @__PURE__ */
|
|
6196
|
-
/* @__PURE__ */
|
|
6197
|
-
/* @__PURE__ */
|
|
6584
|
+
/* @__PURE__ */ jsxs58("div", { className: "ss-g-stat", children: [
|
|
6585
|
+
/* @__PURE__ */ jsx65("span", { className: "ss-g-stat-l", children: ui.games.statToday }),
|
|
6586
|
+
/* @__PURE__ */ jsxs58("span", { className: "ss-g-stat-v ss-g-stat-v--accent", "data-testid": "stat-today", children: [
|
|
6198
6587
|
ui.games.formatPts(todayPts),
|
|
6199
|
-
/* @__PURE__ */
|
|
6588
|
+
/* @__PURE__ */ jsx65("small", { children: ui.games.unitPts })
|
|
6200
6589
|
] })
|
|
6201
6590
|
] }),
|
|
6202
|
-
/* @__PURE__ */
|
|
6203
|
-
/* @__PURE__ */
|
|
6204
|
-
/* @__PURE__ */
|
|
6591
|
+
/* @__PURE__ */ jsxs58("div", { className: "ss-g-stat", children: [
|
|
6592
|
+
/* @__PURE__ */ jsx65("span", { className: "ss-g-stat-l", children: ui.games.statRank }),
|
|
6593
|
+
/* @__PURE__ */ jsxs58("span", { className: "ss-g-stat-v", "data-testid": "stat-rank", children: [
|
|
6205
6594
|
myWeeklyRow ? `#${myWeeklyRow.rank}` : dash,
|
|
6206
|
-
myWeeklyRow && /* @__PURE__ */
|
|
6595
|
+
myWeeklyRow && /* @__PURE__ */ jsx65("small", { children: ui.games.thisWeek })
|
|
6207
6596
|
] })
|
|
6208
6597
|
] })
|
|
6209
6598
|
] }),
|
|
6210
|
-
weeklyPrize && /* @__PURE__ */
|
|
6211
|
-
hero && /* @__PURE__ */
|
|
6212
|
-
(grid.length > 0 || wide) && /* @__PURE__ */
|
|
6213
|
-
/* @__PURE__ */
|
|
6214
|
-
/* @__PURE__ */
|
|
6215
|
-
/* @__PURE__ */
|
|
6599
|
+
weeklyPrize && /* @__PURE__ */ jsx65(Chip, { variant: "accent", className: "ss-g-prize", children: weeklyPrize }),
|
|
6600
|
+
hero && /* @__PURE__ */ jsx65(GameTile, { game: hero, onOpen, ui, variant: "hero" }),
|
|
6601
|
+
(grid.length > 0 || wide) && /* @__PURE__ */ jsxs58("section", { className: "ss-g-sec", children: [
|
|
6602
|
+
/* @__PURE__ */ jsxs58("div", { className: "ss-g-sec-head", children: [
|
|
6603
|
+
/* @__PURE__ */ jsx65("h3", { children: ui.games.dailyGames }),
|
|
6604
|
+
/* @__PURE__ */ jsx65("span", { children: ui.games.newSetAtMidnight })
|
|
6216
6605
|
] }),
|
|
6217
|
-
grid.length > 0 && /* @__PURE__ */
|
|
6218
|
-
wide && /* @__PURE__ */
|
|
6606
|
+
grid.length > 0 && /* @__PURE__ */ jsx65("div", { className: "ss-g-grid", children: grid.map((g) => /* @__PURE__ */ jsx65(GameTile, { game: g, onOpen, ui }, tileKey(g))) }),
|
|
6607
|
+
wide && /* @__PURE__ */ jsx65(GameTile, { game: wide, onOpen, ui, variant: "wide" })
|
|
6219
6608
|
] }),
|
|
6220
|
-
fixtures.length > 0 && /* @__PURE__ */
|
|
6221
|
-
/* @__PURE__ */
|
|
6222
|
-
/* @__PURE__ */
|
|
6223
|
-
kickoffs[0] && /* @__PURE__ */
|
|
6609
|
+
fixtures.length > 0 && /* @__PURE__ */ jsxs58("section", { className: "ss-g-sec", children: [
|
|
6610
|
+
/* @__PURE__ */ jsxs58("div", { className: "ss-g-sec-head", children: [
|
|
6611
|
+
/* @__PURE__ */ jsx65("h3", { children: ui.games.matchdayGames }),
|
|
6612
|
+
kickoffs[0] && /* @__PURE__ */ jsx65("span", { children: ui.games.kickoffAt(ui.games.formatDayTime(kickoffs[0])) })
|
|
6224
6613
|
] }),
|
|
6225
|
-
/* @__PURE__ */
|
|
6614
|
+
/* @__PURE__ */ jsx65("div", { className: "ss-g-grid", children: fixtures.map((g) => /* @__PURE__ */ jsx65(GameTile, { game: g, onOpen, ui }, tileKey(g))) })
|
|
6226
6615
|
] })
|
|
6227
6616
|
] });
|
|
6228
6617
|
}
|
|
6229
6618
|
|
|
6230
6619
|
// src/components/GameScreenHost.tsx
|
|
6231
|
-
import { useEffect as
|
|
6620
|
+
import { useEffect as useEffect24, useRef as useRef21, useState as useState42 } from "react";
|
|
6232
6621
|
|
|
6233
6622
|
// src/useGamePlay.ts
|
|
6234
|
-
import { useCallback as
|
|
6623
|
+
import { useCallback as useCallback15, useRef as useRef19, useState as useState31 } from "react";
|
|
6235
6624
|
function toSubmitResult(payload) {
|
|
6236
6625
|
return {
|
|
6237
6626
|
// 'pending' means the play is recorded but awaiting resolution (fixture games)
|
|
@@ -6243,17 +6632,17 @@ function toSubmitResult(payload) {
|
|
|
6243
6632
|
};
|
|
6244
6633
|
}
|
|
6245
6634
|
function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh }) {
|
|
6246
|
-
const [result, setResult] =
|
|
6247
|
-
const [submitting, setSubmitting] =
|
|
6248
|
-
const [rawStatus, setRawStatus] =
|
|
6249
|
-
const inFlightRef =
|
|
6250
|
-
const convRef =
|
|
6635
|
+
const [result, setResult] = useState31(null);
|
|
6636
|
+
const [submitting, setSubmitting] = useState31(false);
|
|
6637
|
+
const [rawStatus, setRawStatus] = useState31(null);
|
|
6638
|
+
const inFlightRef = useRef19(false);
|
|
6639
|
+
const convRef = useRef19(conversation);
|
|
6251
6640
|
convRef.current = conversation;
|
|
6252
|
-
const optsRef =
|
|
6641
|
+
const optsRef = useRef19({ gameId, gameDay, fixtureId, locale, refresh });
|
|
6253
6642
|
optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
|
|
6254
|
-
const resultRef =
|
|
6643
|
+
const resultRef = useRef19(null);
|
|
6255
6644
|
resultRef.current = result;
|
|
6256
|
-
const refetch =
|
|
6645
|
+
const refetch = useCallback15(async () => {
|
|
6257
6646
|
const conv = convRef.current;
|
|
6258
6647
|
if (!conv) return;
|
|
6259
6648
|
const opts = optsRef.current;
|
|
@@ -6269,7 +6658,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
|
|
|
6269
6658
|
} catch {
|
|
6270
6659
|
}
|
|
6271
6660
|
}, []);
|
|
6272
|
-
const submit =
|
|
6661
|
+
const submit = useCallback15(async (answerJson) => {
|
|
6273
6662
|
const conv = convRef.current;
|
|
6274
6663
|
if (!conv || inFlightRef.current) return;
|
|
6275
6664
|
inFlightRef.current = true;
|
|
@@ -6296,14 +6685,14 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
|
|
|
6296
6685
|
setSubmitting(false);
|
|
6297
6686
|
}
|
|
6298
6687
|
}, [refetch]);
|
|
6299
|
-
const hydrate =
|
|
6688
|
+
const hydrate = useCallback15(() => {
|
|
6300
6689
|
void refetch();
|
|
6301
6690
|
}, [refetch]);
|
|
6302
6691
|
return { result, submitting, submit, hydrate, rawStatus };
|
|
6303
6692
|
}
|
|
6304
6693
|
|
|
6305
6694
|
// src/components/games/MysteryTigerGame.tsx
|
|
6306
|
-
import { useState as
|
|
6695
|
+
import { useState as useState33, useId as useId3 } from "react";
|
|
6307
6696
|
|
|
6308
6697
|
// src/components/games/nationFlags.ts
|
|
6309
6698
|
var FLAGS = {
|
|
@@ -6514,8 +6903,8 @@ function isNationCode(flag) {
|
|
|
6514
6903
|
}
|
|
6515
6904
|
|
|
6516
6905
|
// src/components/games/PlayerAvatar.tsx
|
|
6517
|
-
import { useState as
|
|
6518
|
-
import { jsx as
|
|
6906
|
+
import { useState as useState32 } from "react";
|
|
6907
|
+
import { jsx as jsx66 } from "react/jsx-runtime";
|
|
6519
6908
|
function initialsOf(name) {
|
|
6520
6909
|
const parts = name.trim().split(/\s+/).filter(Boolean);
|
|
6521
6910
|
const first = parts[0];
|
|
@@ -6532,41 +6921,41 @@ function PlayerAvatar({
|
|
|
6532
6921
|
imagePath,
|
|
6533
6922
|
className
|
|
6534
6923
|
}) {
|
|
6535
|
-
const [failed, setFailed] =
|
|
6924
|
+
const [failed, setFailed] = useState32(false);
|
|
6536
6925
|
const showImage = Boolean(imagePath) && !isPlaceholderImage(imagePath) && !failed;
|
|
6537
|
-
return /* @__PURE__ */
|
|
6926
|
+
return /* @__PURE__ */ jsx66("div", { className, "aria-hidden": "true", children: showImage ? /* @__PURE__ */ jsx66("img", { src: imagePath, alt: "", loading: "lazy", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx66("span", { className: "ss-w-av-initials", children: initialsOf(name) }) });
|
|
6538
6927
|
}
|
|
6539
6928
|
|
|
6540
6929
|
// src/components/games/ui/GameHeader.tsx
|
|
6541
|
-
import { jsx as
|
|
6930
|
+
import { jsx as jsx67, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
6542
6931
|
function GameHeader({ title, eyebrow, right, onBack, backLabel }) {
|
|
6543
|
-
return /* @__PURE__ */
|
|
6544
|
-
onBack && /* @__PURE__ */
|
|
6545
|
-
/* @__PURE__ */
|
|
6546
|
-
eyebrow && /* @__PURE__ */
|
|
6547
|
-
/* @__PURE__ */
|
|
6932
|
+
return /* @__PURE__ */ jsxs59("div", { className: "ss-g-head", children: [
|
|
6933
|
+
onBack && /* @__PURE__ */ jsx67("button", { type: "button", className: "ss-g-back", "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx67(IconChevronLeft, {}) }),
|
|
6934
|
+
/* @__PURE__ */ jsxs59("div", { className: "ss-g-head-text", children: [
|
|
6935
|
+
eyebrow && /* @__PURE__ */ jsx67("span", { className: "ss-g-eyebrow", children: eyebrow }),
|
|
6936
|
+
/* @__PURE__ */ jsx67("h2", { className: "ss-g-title", children: title })
|
|
6548
6937
|
] }),
|
|
6549
|
-
right && /* @__PURE__ */
|
|
6938
|
+
right && /* @__PURE__ */ jsx67("div", { className: "ss-g-head-right", children: right })
|
|
6550
6939
|
] });
|
|
6551
6940
|
}
|
|
6552
6941
|
|
|
6553
6942
|
// src/components/games/ui/SegmentProgress.tsx
|
|
6554
|
-
import { jsx as
|
|
6943
|
+
import { jsx as jsx68, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
6555
6944
|
function SegmentProgress({ segments, ariaLabel, leftLabel, rightLabel, right }) {
|
|
6556
|
-
return /* @__PURE__ */
|
|
6557
|
-
/* @__PURE__ */
|
|
6558
|
-
(leftLabel || rightLabel) && /* @__PURE__ */
|
|
6559
|
-
/* @__PURE__ */
|
|
6560
|
-
/* @__PURE__ */
|
|
6945
|
+
return /* @__PURE__ */ jsxs60("div", { className: "ss-g-progress", children: [
|
|
6946
|
+
/* @__PURE__ */ jsxs60("div", { className: "ss-g-progress-main", children: [
|
|
6947
|
+
(leftLabel || rightLabel) && /* @__PURE__ */ jsxs60("div", { className: "ss-g-progress-labels", children: [
|
|
6948
|
+
/* @__PURE__ */ jsx68("span", { children: leftLabel }),
|
|
6949
|
+
/* @__PURE__ */ jsx68("span", { className: "ss-g-progress-rl", children: rightLabel })
|
|
6561
6950
|
] }),
|
|
6562
|
-
/* @__PURE__ */
|
|
6951
|
+
/* @__PURE__ */ jsx68(
|
|
6563
6952
|
"div",
|
|
6564
6953
|
{
|
|
6565
6954
|
className: "ss-g-segs",
|
|
6566
6955
|
role: "img",
|
|
6567
6956
|
"aria-label": ariaLabel,
|
|
6568
6957
|
style: { gridTemplateColumns: `repeat(${segments.length}, minmax(0, 1fr))` },
|
|
6569
|
-
children: segments.map((s, i) => /* @__PURE__ */
|
|
6958
|
+
children: segments.map((s, i) => /* @__PURE__ */ jsx68("span", { className: "ss-g-seg", "data-state": s }, i))
|
|
6570
6959
|
}
|
|
6571
6960
|
)
|
|
6572
6961
|
] }),
|
|
@@ -6574,38 +6963,13 @@ function SegmentProgress({ segments, ariaLabel, leftLabel, rightLabel, right })
|
|
|
6574
6963
|
] });
|
|
6575
6964
|
}
|
|
6576
6965
|
|
|
6577
|
-
// src/components/games/ui/SearchField.tsx
|
|
6578
|
-
import { jsx as jsx67, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
6579
|
-
function SearchField({ id, label, labelHidden = false, placeholder, value, onChange, disabled, inputRef, onKeyDown }) {
|
|
6580
|
-
return /* @__PURE__ */ jsxs59("div", { className: "ss-g-search", children: [
|
|
6581
|
-
/* @__PURE__ */ jsx67("label", { htmlFor: id, className: labelHidden ? "ss-g-sr" : "ss-g-search-label", children: label }),
|
|
6582
|
-
/* @__PURE__ */ jsxs59("div", { className: "ss-g-search-box", children: [
|
|
6583
|
-
/* @__PURE__ */ jsx67(IconSearch, {}),
|
|
6584
|
-
/* @__PURE__ */ jsx67(
|
|
6585
|
-
"input",
|
|
6586
|
-
{
|
|
6587
|
-
id,
|
|
6588
|
-
ref: inputRef,
|
|
6589
|
-
type: "text",
|
|
6590
|
-
autoComplete: "off",
|
|
6591
|
-
placeholder,
|
|
6592
|
-
value,
|
|
6593
|
-
disabled,
|
|
6594
|
-
onKeyDown,
|
|
6595
|
-
onChange: (e) => onChange(e.target.value)
|
|
6596
|
-
}
|
|
6597
|
-
)
|
|
6598
|
-
] })
|
|
6599
|
-
] });
|
|
6600
|
-
}
|
|
6601
|
-
|
|
6602
6966
|
// src/components/games/ui/AnswerTray.tsx
|
|
6603
|
-
import { Fragment as Fragment11, jsx as
|
|
6967
|
+
import { Fragment as Fragment11, jsx as jsx69, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
6604
6968
|
function AnswerTray({ id, label, placeholder, optionsLabel, options, query, onQuery, onPick, disabled, minQuery = 0 }) {
|
|
6605
6969
|
const needle = query.trim().toLowerCase();
|
|
6606
6970
|
const shown = needle.length < minQuery ? [] : needle ? options.filter((o) => o.name.toLowerCase().includes(needle)) : options;
|
|
6607
|
-
return /* @__PURE__ */
|
|
6608
|
-
/* @__PURE__ */
|
|
6971
|
+
return /* @__PURE__ */ jsxs61(Fragment11, { children: [
|
|
6972
|
+
/* @__PURE__ */ jsx69(
|
|
6609
6973
|
SearchField,
|
|
6610
6974
|
{
|
|
6611
6975
|
id,
|
|
@@ -6617,9 +6981,9 @@ function AnswerTray({ id, label, placeholder, optionsLabel, options, query, onQu
|
|
|
6617
6981
|
disabled
|
|
6618
6982
|
}
|
|
6619
6983
|
),
|
|
6620
|
-
shown.length > 0 && /* @__PURE__ */
|
|
6984
|
+
shown.length > 0 && /* @__PURE__ */ jsx69("div", { className: "ss-g-tray", role: "listbox", "aria-label": optionsLabel, children: shown.map((o) => {
|
|
6621
6985
|
const { first, last } = splitName(o.name);
|
|
6622
|
-
return /* @__PURE__ */
|
|
6986
|
+
return /* @__PURE__ */ jsxs61(
|
|
6623
6987
|
"button",
|
|
6624
6988
|
{
|
|
6625
6989
|
type: "button",
|
|
@@ -6630,10 +6994,10 @@ function AnswerTray({ id, label, placeholder, optionsLabel, options, query, onQu
|
|
|
6630
6994
|
disabled,
|
|
6631
6995
|
onClick: () => onPick(o.id),
|
|
6632
6996
|
children: [
|
|
6633
|
-
/* @__PURE__ */
|
|
6634
|
-
/* @__PURE__ */
|
|
6635
|
-
first && /* @__PURE__ */
|
|
6636
|
-
/* @__PURE__ */
|
|
6997
|
+
/* @__PURE__ */ jsx69(PlayerAvatar, { className: "ss-g-tray-av", name: o.name, imagePath: o.imagePath }),
|
|
6998
|
+
/* @__PURE__ */ jsxs61("span", { className: "ss-g-tray-name", "aria-hidden": "true", children: [
|
|
6999
|
+
first && /* @__PURE__ */ jsx69("span", { className: "ss-g-tray-first", children: first }),
|
|
7000
|
+
/* @__PURE__ */ jsx69("span", { className: "ss-g-tray-last", children: last })
|
|
6637
7001
|
] })
|
|
6638
7002
|
]
|
|
6639
7003
|
},
|
|
@@ -6644,59 +7008,59 @@ function AnswerTray({ id, label, placeholder, optionsLabel, options, query, onQu
|
|
|
6644
7008
|
}
|
|
6645
7009
|
|
|
6646
7010
|
// src/components/games/ui/FooterBar.tsx
|
|
6647
|
-
import { jsx as
|
|
7011
|
+
import { jsx as jsx70 } from "react/jsx-runtime";
|
|
6648
7012
|
function FooterBar({ children }) {
|
|
6649
|
-
return /* @__PURE__ */
|
|
7013
|
+
return /* @__PURE__ */ jsx70("div", { className: "ss-g-footer", children });
|
|
6650
7014
|
}
|
|
6651
7015
|
|
|
6652
7016
|
// src/components/games/ui/Silhouette.tsx
|
|
6653
|
-
import { jsx as
|
|
7017
|
+
import { jsx as jsx71, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
6654
7018
|
function Silhouette({ size, variant = "default" }) {
|
|
6655
|
-
return /* @__PURE__ */
|
|
6656
|
-
/* @__PURE__ */
|
|
6657
|
-
/* @__PURE__ */
|
|
6658
|
-
/* @__PURE__ */
|
|
7019
|
+
return /* @__PURE__ */ jsxs62("span", { className: `ss-g-sil ss-g-sil--${variant}`, style: { width: size, height: size }, "aria-hidden": "true", children: [
|
|
7020
|
+
/* @__PURE__ */ jsxs62("svg", { width: size * 0.86, height: size * 0.86, viewBox: "0 0 100 100", children: [
|
|
7021
|
+
/* @__PURE__ */ jsx71("circle", { cx: "50", cy: "40", r: "19", fill: "currentColor" }),
|
|
7022
|
+
/* @__PURE__ */ jsx71("path", { d: "M12 100c0-23 17-38 38-38s38 15 38 38z", fill: "currentColor" })
|
|
6659
7023
|
] }),
|
|
6660
|
-
variant === "mystery" && /* @__PURE__ */
|
|
7024
|
+
variant === "mystery" && /* @__PURE__ */ jsx71("span", { className: "ss-g-sil-q", children: "?" })
|
|
6661
7025
|
] });
|
|
6662
7026
|
}
|
|
6663
7027
|
|
|
6664
7028
|
// src/components/games/ui/GameButton.tsx
|
|
6665
|
-
import { jsx as
|
|
7029
|
+
import { jsx as jsx72 } from "react/jsx-runtime";
|
|
6666
7030
|
function GameButton({ variant = "primary", block = false, className, type = "button", ...rest }) {
|
|
6667
7031
|
const cls = `ss-g-btn ss-g-btn--${variant}${block ? " ss-g-btn--block" : ""}${className ? ` ${className}` : ""}`;
|
|
6668
|
-
return /* @__PURE__ */
|
|
7032
|
+
return /* @__PURE__ */ jsx72("button", { type, className: cls, ...rest });
|
|
6669
7033
|
}
|
|
6670
7034
|
|
|
6671
7035
|
// src/components/games/ui/ResultCard.tsx
|
|
6672
|
-
import { jsx as
|
|
7036
|
+
import { jsx as jsx73, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
6673
7037
|
function ResultCard({ tone, title, score, detail, onBack, ui }) {
|
|
6674
|
-
return /* @__PURE__ */
|
|
6675
|
-
/* @__PURE__ */
|
|
6676
|
-
score !== void 0 && /* @__PURE__ */
|
|
6677
|
-
/* @__PURE__ */
|
|
7038
|
+
return /* @__PURE__ */ jsxs63("div", { className: "ss-g-result", "data-tone": tone, role: "status", children: [
|
|
7039
|
+
/* @__PURE__ */ jsx73("span", { className: "ss-g-result-title", children: title }),
|
|
7040
|
+
score !== void 0 && /* @__PURE__ */ jsxs63("span", { className: "ss-g-result-score", children: [
|
|
7041
|
+
/* @__PURE__ */ jsx73("span", { className: "ss-g-result-num", children: score }),
|
|
6678
7042
|
ui.games.unitPts
|
|
6679
7043
|
] }),
|
|
6680
|
-
detail && /* @__PURE__ */
|
|
6681
|
-
onBack && /* @__PURE__ */
|
|
7044
|
+
detail && /* @__PURE__ */ jsx73("span", { className: "ss-g-result-detail", children: detail }),
|
|
7045
|
+
onBack && /* @__PURE__ */ jsx73(GameButton, { variant: "outline", onClick: onBack, children: ui.games.backToGames })
|
|
6682
7046
|
] });
|
|
6683
7047
|
}
|
|
6684
7048
|
|
|
6685
7049
|
// src/components/games/ui/PointsLadderRow.tsx
|
|
6686
|
-
import { jsx as
|
|
7050
|
+
import { jsx as jsx74, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
6687
7051
|
function PointsLadderRow({ ladder, guessesUsed, ui }) {
|
|
6688
7052
|
if (!ladder || ladder.length === 0) return null;
|
|
6689
7053
|
const now = ladder[Math.min(guessesUsed, ladder.length - 1)];
|
|
6690
7054
|
const next = ladder[guessesUsed + 1];
|
|
6691
7055
|
if (now === void 0) return null;
|
|
6692
|
-
return /* @__PURE__ */
|
|
6693
|
-
/* @__PURE__ */
|
|
6694
|
-
next !== void 0 && next !== now && /* @__PURE__ */
|
|
7056
|
+
return /* @__PURE__ */ jsxs64("div", { className: "ss-g-worth", "data-testid": "points-ladder", children: [
|
|
7057
|
+
/* @__PURE__ */ jsx74("span", { className: "ss-g-worth-now", children: ui.games.worthNow(now) }),
|
|
7058
|
+
next !== void 0 && next !== now && /* @__PURE__ */ jsx74("span", { className: "ss-g-worth-next", children: ui.games.worthAfterMiss(next) })
|
|
6695
7059
|
] });
|
|
6696
7060
|
}
|
|
6697
7061
|
|
|
6698
7062
|
// src/components/games/MysteryTigerGame.tsx
|
|
6699
|
-
import { Fragment as Fragment12, jsx as
|
|
7063
|
+
import { Fragment as Fragment12, jsx as jsx75, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
6700
7064
|
function parseClientState(json) {
|
|
6701
7065
|
if (!json) return null;
|
|
6702
7066
|
try {
|
|
@@ -6798,8 +7162,8 @@ function MysteryTigerGame({
|
|
|
6798
7162
|
onBack
|
|
6799
7163
|
}) {
|
|
6800
7164
|
const t = ui.games.mysteryTiger;
|
|
6801
|
-
const [query, setQuery] =
|
|
6802
|
-
const inputId =
|
|
7165
|
+
const [query, setQuery] = useState33("");
|
|
7166
|
+
const inputId = useId3();
|
|
6803
7167
|
const clientState = parseClientState(result?.clientStateJson);
|
|
6804
7168
|
const guessResults = clientState?.guessResults ?? [];
|
|
6805
7169
|
const alreadyGuessedIds = new Set(guessResults.map((g) => g.playerId));
|
|
@@ -6818,22 +7182,22 @@ function MysteryTigerGame({
|
|
|
6818
7182
|
setQuery("");
|
|
6819
7183
|
onSubmit(JSON.stringify({ guesses: newGuesses }));
|
|
6820
7184
|
}
|
|
6821
|
-
const headerRight = !config ? void 0 : isOver ? /* @__PURE__ */
|
|
7185
|
+
const headerRight = !config ? void 0 : isOver ? /* @__PURE__ */ jsxs65(Chip, { variant: "accent", children: [
|
|
6822
7186
|
score,
|
|
6823
7187
|
" ",
|
|
6824
7188
|
ui.games.unitPts
|
|
6825
|
-
] }) : /* @__PURE__ */
|
|
7189
|
+
] }) : /* @__PURE__ */ jsx75("span", { "data-testid": "mt-chip", children: /* @__PURE__ */ jsxs65(Chip, { children: [
|
|
6826
7190
|
ui.games.guess,
|
|
6827
7191
|
" ",
|
|
6828
|
-
/* @__PURE__ */
|
|
7192
|
+
/* @__PURE__ */ jsx75("span", { className: "ss-g-num", children: guessesUsed + 1 }),
|
|
6829
7193
|
" / ",
|
|
6830
7194
|
totalGuesses
|
|
6831
7195
|
] }) });
|
|
6832
7196
|
const segments = Array.from({ length: totalGuesses }, (_, i) => i < guessesUsed ? "done" : i === guessesUsed ? "current" : "todo");
|
|
6833
7197
|
const cols = { gridTemplateColumns: `minmax(0, 1fr) repeat(${keys.length}, 42px)` };
|
|
6834
7198
|
const known = deriveKnownAttributes(guessResults, keys);
|
|
6835
|
-
return /* @__PURE__ */
|
|
6836
|
-
/* @__PURE__ */
|
|
7199
|
+
return /* @__PURE__ */ jsxs65("div", { className: "ss-g-screen ss-g-mt", "data-game": "mystery-tiger", "data-testid": "game-screen-mystery-tiger", children: [
|
|
7200
|
+
/* @__PURE__ */ jsx75(
|
|
6837
7201
|
GameHeader,
|
|
6838
7202
|
{
|
|
6839
7203
|
title: gameTitle({ gameId: "mystery-tiger" }, ui.games.titles),
|
|
@@ -6843,41 +7207,41 @@ function MysteryTigerGame({
|
|
|
6843
7207
|
backLabel: ui.back
|
|
6844
7208
|
}
|
|
6845
7209
|
),
|
|
6846
|
-
!config && /* @__PURE__ */
|
|
6847
|
-
config && /* @__PURE__ */
|
|
6848
|
-
/* @__PURE__ */
|
|
6849
|
-
!isOver && /* @__PURE__ */
|
|
6850
|
-
/* @__PURE__ */
|
|
6851
|
-
/* @__PURE__ */
|
|
6852
|
-
revealName ? /* @__PURE__ */
|
|
6853
|
-
revealName && /* @__PURE__ */
|
|
7210
|
+
!config && /* @__PURE__ */ jsx75("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
|
|
7211
|
+
config && /* @__PURE__ */ jsxs65(Fragment12, { children: [
|
|
7212
|
+
/* @__PURE__ */ jsxs65("div", { className: "ss-g-body", children: [
|
|
7213
|
+
!isOver && /* @__PURE__ */ jsx75(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed, ui }),
|
|
7214
|
+
/* @__PURE__ */ jsxs65("div", { className: `ss-g-mt-card${isOver ? " ss-g-mt-card--reveal" : ""}`, children: [
|
|
7215
|
+
/* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-portrait", children: [
|
|
7216
|
+
revealName ? /* @__PURE__ */ jsx75(PlayerAvatar, { className: "ss-g-mt-photo", name: revealName, imagePath: clientState?.revealedPlayerImagePath }) : /* @__PURE__ */ jsx75(Silhouette, { size: 150, variant: "mystery" }),
|
|
7217
|
+
revealName && /* @__PURE__ */ jsx75("span", { className: "ss-g-mt-reveal-name", children: revealName })
|
|
6854
7218
|
] }),
|
|
6855
|
-
/* @__PURE__ */
|
|
6856
|
-
/* @__PURE__ */
|
|
6857
|
-
/* @__PURE__ */
|
|
7219
|
+
/* @__PURE__ */ jsx75("div", { className: "ss-g-mt-known", style: { gridTemplateColumns: `repeat(${keys.length}, minmax(0, 1fr))` }, children: known.map((k) => /* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-known-cell", children: [
|
|
7220
|
+
/* @__PURE__ */ jsx75("span", { className: "ss-g-mt-lab", children: t.labels[k.key] }),
|
|
7221
|
+
/* @__PURE__ */ jsx75("span", { className: "ss-g-mt-known-v", "data-state": k.state, "data-testid": `known-${k.key}`, children: k.text })
|
|
6858
7222
|
] }, k.key)) })
|
|
6859
7223
|
] }),
|
|
6860
|
-
!isOver && /* @__PURE__ */
|
|
6861
|
-
guessResults.length > 0 && /* @__PURE__ */
|
|
6862
|
-
/* @__PURE__ */
|
|
6863
|
-
/* @__PURE__ */
|
|
6864
|
-
keys.map((k) => /* @__PURE__ */
|
|
7224
|
+
!isOver && /* @__PURE__ */ jsx75(SegmentProgress, { segments, ariaLabel: t.progress(guessesUsed, totalGuesses) }),
|
|
7225
|
+
guessResults.length > 0 && /* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-table", children: [
|
|
7226
|
+
/* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-thead", style: cols, children: [
|
|
7227
|
+
/* @__PURE__ */ jsx75("span", { children: t.yourGuesses }),
|
|
7228
|
+
keys.map((k) => /* @__PURE__ */ jsx75("span", { children: t.labels[k] }, k))
|
|
6865
7229
|
] }),
|
|
6866
7230
|
guessResults.map((gr, i) => {
|
|
6867
7231
|
const name = config.squadPlayers.find((p) => p.id === gr.playerId)?.name ?? `#${gr.playerId}`;
|
|
6868
7232
|
const { first, last } = splitName(name);
|
|
6869
|
-
return /* @__PURE__ */
|
|
6870
|
-
/* @__PURE__ */
|
|
6871
|
-
/* @__PURE__ */
|
|
6872
|
-
/* @__PURE__ */
|
|
6873
|
-
first && /* @__PURE__ */
|
|
6874
|
-
/* @__PURE__ */
|
|
7233
|
+
return /* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-row", style: cols, children: [
|
|
7234
|
+
/* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-who", children: [
|
|
7235
|
+
/* @__PURE__ */ jsx75(PlayerAvatar, { className: "ss-g-mt-av", name }),
|
|
7236
|
+
/* @__PURE__ */ jsxs65("span", { className: "ss-g-mt-names", children: [
|
|
7237
|
+
first && /* @__PURE__ */ jsx75("span", { className: "ss-g-mt-first", children: first }),
|
|
7238
|
+
/* @__PURE__ */ jsx75("span", { className: "ss-g-mt-last", children: last })
|
|
6875
7239
|
] })
|
|
6876
7240
|
] }),
|
|
6877
7241
|
keys.map((key) => {
|
|
6878
7242
|
const v = gr[key];
|
|
6879
7243
|
const arrow = directionArrow(v);
|
|
6880
|
-
return /* @__PURE__ */
|
|
7244
|
+
return /* @__PURE__ */ jsxs65(
|
|
6881
7245
|
"div",
|
|
6882
7246
|
{
|
|
6883
7247
|
className: "ss-g-mt-cell",
|
|
@@ -6885,8 +7249,8 @@ function MysteryTigerGame({
|
|
|
6885
7249
|
"data-verdict": v.verdict,
|
|
6886
7250
|
"aria-label": `${t.labels[key]}: ${v.value ?? v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
|
|
6887
7251
|
children: [
|
|
6888
|
-
/* @__PURE__ */
|
|
6889
|
-
arrow && /* @__PURE__ */
|
|
7252
|
+
/* @__PURE__ */ jsx75("span", { className: "ss-g-mt-cell-v", "aria-hidden": "true", children: tileFace(key, v) }),
|
|
7253
|
+
arrow && /* @__PURE__ */ jsx75("span", { className: "ss-g-mt-cell-dir", "aria-hidden": "true", children: arrow })
|
|
6890
7254
|
]
|
|
6891
7255
|
},
|
|
6892
7256
|
key
|
|
@@ -6895,25 +7259,25 @@ function MysteryTigerGame({
|
|
|
6895
7259
|
] }, gr.playerId);
|
|
6896
7260
|
})
|
|
6897
7261
|
] }),
|
|
6898
|
-
!isOver && /* @__PURE__ */
|
|
6899
|
-
/* @__PURE__ */
|
|
6900
|
-
/* @__PURE__ */
|
|
7262
|
+
!isOver && /* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-legend", children: [
|
|
7263
|
+
/* @__PURE__ */ jsxs65("span", { children: [
|
|
7264
|
+
/* @__PURE__ */ jsx75("i", { className: "ss-g-mt-sw", "data-verdict": "exact" }),
|
|
6901
7265
|
t.legendMatch
|
|
6902
7266
|
] }),
|
|
6903
|
-
/* @__PURE__ */
|
|
6904
|
-
/* @__PURE__ */
|
|
7267
|
+
/* @__PURE__ */ jsxs65("span", { children: [
|
|
7268
|
+
/* @__PURE__ */ jsx75("i", { className: "ss-g-mt-sw", "data-verdict": "near" }),
|
|
6905
7269
|
t.legendClose
|
|
6906
7270
|
] }),
|
|
6907
|
-
/* @__PURE__ */
|
|
7271
|
+
/* @__PURE__ */ jsxs65("span", { children: [
|
|
6908
7272
|
"\u25B2 ",
|
|
6909
7273
|
t.legendHigher
|
|
6910
7274
|
] })
|
|
6911
7275
|
] }),
|
|
6912
|
-
clientState?.hintLine && !isOver && /* @__PURE__ */
|
|
6913
|
-
/* @__PURE__ */
|
|
6914
|
-
/* @__PURE__ */
|
|
7276
|
+
clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs65("div", { className: "ss-g-mt-hint", children: [
|
|
7277
|
+
/* @__PURE__ */ jsx75(IconBulb, {}),
|
|
7278
|
+
/* @__PURE__ */ jsx75("span", { children: clientState.hintLine })
|
|
6915
7279
|
] }),
|
|
6916
|
-
isOver && /* @__PURE__ */
|
|
7280
|
+
isOver && /* @__PURE__ */ jsx75(
|
|
6917
7281
|
ResultCard,
|
|
6918
7282
|
{
|
|
6919
7283
|
tone: clientState?.solved ? "win" : clientState?.failed ? "lose" : "neutral",
|
|
@@ -6925,7 +7289,7 @@ function MysteryTigerGame({
|
|
|
6925
7289
|
}
|
|
6926
7290
|
)
|
|
6927
7291
|
] }),
|
|
6928
|
-
!isOver && /* @__PURE__ */
|
|
7292
|
+
!isOver && /* @__PURE__ */ jsx75(FooterBar, { children: /* @__PURE__ */ jsx75(
|
|
6929
7293
|
AnswerTray,
|
|
6930
7294
|
{
|
|
6931
7295
|
id: inputId,
|
|
@@ -6944,7 +7308,7 @@ function MysteryTigerGame({
|
|
|
6944
7308
|
}
|
|
6945
7309
|
|
|
6946
7310
|
// src/components/games/HigherOrLowerGame.tsx
|
|
6947
|
-
import { Fragment as Fragment13, jsx as
|
|
7311
|
+
import { Fragment as Fragment13, jsx as jsx76, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
6948
7312
|
var POINTS_PER_CORRECT = 10;
|
|
6949
7313
|
function parseClientState2(json) {
|
|
6950
7314
|
if (!json) return null;
|
|
@@ -6956,11 +7320,11 @@ function parseClientState2(json) {
|
|
|
6956
7320
|
}
|
|
6957
7321
|
function PlayerCard({ name, imagePath, highlight, children }) {
|
|
6958
7322
|
const { first, last } = splitName(name);
|
|
6959
|
-
return /* @__PURE__ */
|
|
6960
|
-
/* @__PURE__ */
|
|
6961
|
-
/* @__PURE__ */
|
|
6962
|
-
first && /* @__PURE__ */
|
|
6963
|
-
/* @__PURE__ */
|
|
7323
|
+
return /* @__PURE__ */ jsxs66("div", { className: `ss-g-hl-card${highlight ? " ss-g-hl-card--b" : ""}`, children: [
|
|
7324
|
+
/* @__PURE__ */ jsx76("div", { className: "ss-g-hl-photo-wrap", children: imagePath ? /* @__PURE__ */ jsx76(PlayerAvatar, { className: "ss-g-hl-photo", name, imagePath }) : /* @__PURE__ */ jsx76(Silhouette, { size: 150 }) }),
|
|
7325
|
+
/* @__PURE__ */ jsxs66("div", { className: "ss-g-hl-info", children: [
|
|
7326
|
+
first && /* @__PURE__ */ jsx76("span", { className: "ss-g-hl-first", children: first }),
|
|
7327
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-surname", children: last }),
|
|
6964
7328
|
children
|
|
6965
7329
|
] })
|
|
6966
7330
|
] });
|
|
@@ -6992,47 +7356,47 @@ function HigherOrLowerGame({
|
|
|
6992
7356
|
const newAnswers = [...prevAnswers, { pairIndex: currentPair.pairIndex, pick }];
|
|
6993
7357
|
onSubmit(JSON.stringify({ answers: newAnswers }));
|
|
6994
7358
|
}
|
|
6995
|
-
return /* @__PURE__ */
|
|
6996
|
-
/* @__PURE__ */
|
|
7359
|
+
return /* @__PURE__ */ jsxs66("div", { className: "ss-g-screen ss-g-hl", "data-game": "higher-or-lower", "data-testid": "game-screen-higher-or-lower", children: [
|
|
7360
|
+
/* @__PURE__ */ jsx76(
|
|
6997
7361
|
GameHeader,
|
|
6998
7362
|
{
|
|
6999
7363
|
title: gameTitle({ gameId: "higher-or-lower" }, ui.games.titles),
|
|
7000
7364
|
eyebrow: t.eyebrow(POINTS_PER_CORRECT),
|
|
7001
|
-
right: config ? /* @__PURE__ */
|
|
7365
|
+
right: config ? /* @__PURE__ */ jsx76(StatStack, { value: runLength, label: t.streak }) : void 0,
|
|
7002
7366
|
onBack,
|
|
7003
7367
|
backLabel: ui.back
|
|
7004
7368
|
}
|
|
7005
7369
|
),
|
|
7006
|
-
!config && /* @__PURE__ */
|
|
7007
|
-
config && /* @__PURE__ */
|
|
7008
|
-
/* @__PURE__ */
|
|
7009
|
-
/* @__PURE__ */
|
|
7010
|
-
/* @__PURE__ */
|
|
7011
|
-
/* @__PURE__ */
|
|
7012
|
-
/* @__PURE__ */
|
|
7370
|
+
!config && /* @__PURE__ */ jsx76("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
|
|
7371
|
+
config && /* @__PURE__ */ jsxs66(Fragment13, { children: [
|
|
7372
|
+
/* @__PURE__ */ jsxs66("div", { className: "ss-g-body", children: [
|
|
7373
|
+
/* @__PURE__ */ jsxs66("div", { className: "ss-g-hl-prompt", "data-testid": "hol-prompt", children: [
|
|
7374
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-prompt-q", children: t.whoHadMore }),
|
|
7375
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-prompt-stat", children: config.statLabel }),
|
|
7376
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-prompt-season", children: t.season(config.seasonLabel) })
|
|
7013
7377
|
] }),
|
|
7014
|
-
currentPair && /* @__PURE__ */
|
|
7015
|
-
/* @__PURE__ */
|
|
7016
|
-
/* @__PURE__ */
|
|
7017
|
-
/* @__PURE__ */
|
|
7378
|
+
currentPair && /* @__PURE__ */ jsxs66("div", { className: "ss-g-hl-pair", children: [
|
|
7379
|
+
/* @__PURE__ */ jsxs66(PlayerCard, { name: currentPair.playerAName, imagePath: currentPair.playerAImagePath, children: [
|
|
7380
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-value", children: currentPair.playerAValue }),
|
|
7381
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-stat", children: config.statLabel })
|
|
7018
7382
|
] }),
|
|
7019
|
-
/* @__PURE__ */
|
|
7020
|
-
/* @__PURE__ */
|
|
7021
|
-
/* @__PURE__ */
|
|
7022
|
-
/* @__PURE__ */
|
|
7383
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-vs", "aria-hidden": "true", children: t.vs }),
|
|
7384
|
+
/* @__PURE__ */ jsx76(PlayerCard, { name: currentPair.playerBName, imagePath: currentPair.playerBImagePath, highlight: true, children: /* @__PURE__ */ jsxs66("div", { className: "ss-g-hl-btns", children: [
|
|
7385
|
+
/* @__PURE__ */ jsxs66(GameButton, { variant: "primary", disabled: submitting, onClick: () => handlePick("higher"), children: [
|
|
7386
|
+
/* @__PURE__ */ jsx76(IconArrowUp, { size: 16 }),
|
|
7023
7387
|
t.higher
|
|
7024
7388
|
] }),
|
|
7025
|
-
/* @__PURE__ */
|
|
7026
|
-
/* @__PURE__ */
|
|
7389
|
+
/* @__PURE__ */ jsxs66(GameButton, { variant: "outline", disabled: submitting, onClick: () => handlePick("lower"), children: [
|
|
7390
|
+
/* @__PURE__ */ jsx76(IconArrowDown, { size: 16 }),
|
|
7027
7391
|
t.lower
|
|
7028
7392
|
] })
|
|
7029
7393
|
] }) })
|
|
7030
7394
|
] }),
|
|
7031
|
-
lastAnswer && lastAnswerPair && /* @__PURE__ */
|
|
7032
|
-
lastAnswer.wasCorrect ? /* @__PURE__ */
|
|
7395
|
+
lastAnswer && lastAnswerPair && /* @__PURE__ */ jsxs66("p", { className: "ss-g-hl-feedback", "data-testid": "hol-last", "data-correct": lastAnswer.wasCorrect ? "true" : "false", children: [
|
|
7396
|
+
lastAnswer.wasCorrect ? /* @__PURE__ */ jsx76(IconCheck, {}) : /* @__PURE__ */ jsx76(IconClose, {}),
|
|
7033
7397
|
t.lastAnswer(splitName(lastAnswerPair.playerBName).last, lastAnswer.playerBValue)
|
|
7034
7398
|
] }),
|
|
7035
|
-
isOver && /* @__PURE__ */
|
|
7399
|
+
isOver && /* @__PURE__ */ jsx76(
|
|
7036
7400
|
ResultCard,
|
|
7037
7401
|
{
|
|
7038
7402
|
tone: runEndedWrong ? "lose" : allPairsAnswered ? "win" : "neutral",
|
|
@@ -7044,15 +7408,15 @@ function HigherOrLowerGame({
|
|
|
7044
7408
|
}
|
|
7045
7409
|
)
|
|
7046
7410
|
] }),
|
|
7047
|
-
!isOver && /* @__PURE__ */
|
|
7048
|
-
/* @__PURE__ */
|
|
7411
|
+
!isOver && /* @__PURE__ */ jsx76(FooterBar, { children: /* @__PURE__ */ jsxs66("div", { className: "ss-g-hl-foot", children: [
|
|
7412
|
+
/* @__PURE__ */ jsx76("div", { className: "ss-g-hl-dots", role: "img", "aria-label": t.answersSoFar(answeredCount, config.pairs.length), children: config.pairs.map((p, i) => {
|
|
7049
7413
|
const a = answeredPairs[i];
|
|
7050
|
-
return /* @__PURE__ */
|
|
7414
|
+
return /* @__PURE__ */ jsx76("span", { className: "ss-g-hl-dot", "data-state": a ? a.wasCorrect ? "correct" : "wrong" : "todo" }, p.pairIndex);
|
|
7051
7415
|
}) }),
|
|
7052
|
-
/* @__PURE__ */
|
|
7053
|
-
/* @__PURE__ */
|
|
7416
|
+
/* @__PURE__ */ jsxs66("span", { className: "ss-g-hl-pts", children: [
|
|
7417
|
+
/* @__PURE__ */ jsx76("span", { "data-testid": "hol-score", children: score }),
|
|
7054
7418
|
" ",
|
|
7055
|
-
/* @__PURE__ */
|
|
7419
|
+
/* @__PURE__ */ jsx76("span", { className: "ss-g-hl-pts-unit", children: ui.games.unitPts })
|
|
7056
7420
|
] })
|
|
7057
7421
|
] }) })
|
|
7058
7422
|
] })
|
|
@@ -7060,21 +7424,21 @@ function HigherOrLowerGame({
|
|
|
7060
7424
|
}
|
|
7061
7425
|
|
|
7062
7426
|
// src/components/games/CareerPathGame.tsx
|
|
7063
|
-
import { useState as
|
|
7427
|
+
import { useState as useState35, useId as useId4 } from "react";
|
|
7064
7428
|
|
|
7065
7429
|
// src/components/games/ui/CrestShield.tsx
|
|
7066
|
-
import { useState as
|
|
7067
|
-
import { jsx as
|
|
7430
|
+
import { useState as useState34 } from "react";
|
|
7431
|
+
import { jsx as jsx77 } from "react/jsx-runtime";
|
|
7068
7432
|
function CrestShield({ src, name, size = 28 }) {
|
|
7069
|
-
const [failed, setFailed] =
|
|
7433
|
+
const [failed, setFailed] = useState34(false);
|
|
7070
7434
|
if (src && !isPlaceholderImage(src) && !failed) {
|
|
7071
|
-
return /* @__PURE__ */
|
|
7435
|
+
return /* @__PURE__ */ jsx77("img", { className: "ss-g-crest", src, alt: name, width: size, height: size, loading: "lazy", onError: () => setFailed(true) });
|
|
7072
7436
|
}
|
|
7073
|
-
return /* @__PURE__ */
|
|
7437
|
+
return /* @__PURE__ */ jsx77("svg", { className: "ss-g-crest ss-g-crest--ph", width: size, height: size * 32 / 28, viewBox: "0 0 28 32", role: "img", "aria-label": name, children: /* @__PURE__ */ jsx77("path", { d: "M2 3h24v12c0 9-6 14-12 17C8 29 2 24 2 15z", fill: "currentColor" }) });
|
|
7074
7438
|
}
|
|
7075
7439
|
|
|
7076
7440
|
// src/components/games/CareerPathGame.tsx
|
|
7077
|
-
import { Fragment as Fragment14, jsx as
|
|
7441
|
+
import { Fragment as Fragment14, jsx as jsx78, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
7078
7442
|
function parseClientState3(json) {
|
|
7079
7443
|
if (!json) return null;
|
|
7080
7444
|
try {
|
|
@@ -7098,15 +7462,15 @@ function CareerPathGame({
|
|
|
7098
7462
|
}) {
|
|
7099
7463
|
const s = ui.games.careerPath;
|
|
7100
7464
|
const title = gameTitle({ gameId: "career-path" }, ui.games.titles);
|
|
7101
|
-
const [query, setQuery] =
|
|
7102
|
-
const inputId =
|
|
7465
|
+
const [query, setQuery] = useState35("");
|
|
7466
|
+
const inputId = useId4();
|
|
7103
7467
|
const clientState = parseClientState3(result?.clientStateJson);
|
|
7104
7468
|
const alreadyGuessedIds = new Set(clientState?.guessResults.map((g) => g.playerId) ?? []);
|
|
7105
7469
|
const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
|
|
7106
7470
|
if (!config) {
|
|
7107
|
-
return /* @__PURE__ */
|
|
7108
|
-
/* @__PURE__ */
|
|
7109
|
-
/* @__PURE__ */
|
|
7471
|
+
return /* @__PURE__ */ jsxs67("div", { className: "ss-g-screen", "data-game": "career-path", "data-testid": "game-screen-career-path", children: [
|
|
7472
|
+
/* @__PURE__ */ jsx78(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
|
|
7473
|
+
/* @__PURE__ */ jsx78("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
|
|
7110
7474
|
] });
|
|
7111
7475
|
}
|
|
7112
7476
|
const visiblePath = clientState?.visiblePath ?? config.initialPath;
|
|
@@ -7120,61 +7484,61 @@ function CareerPathGame({
|
|
|
7120
7484
|
setQuery("");
|
|
7121
7485
|
onSubmit(JSON.stringify({ guesses: newGuesses }));
|
|
7122
7486
|
}
|
|
7123
|
-
const right = !isOver && clientState ? /* @__PURE__ */
|
|
7487
|
+
const right = !isOver && clientState ? /* @__PURE__ */ jsx78("span", { "data-testid": "cp-guess-chip", children: /* @__PURE__ */ jsxs67(Chip, { variant: "neutral", children: [
|
|
7124
7488
|
ui.games.guess,
|
|
7125
7489
|
" ",
|
|
7126
|
-
/* @__PURE__ */
|
|
7490
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-num", children: clientState.guessesUsed + 1 }),
|
|
7127
7491
|
" / ",
|
|
7128
7492
|
clientState.guessesUsed + clientState.guessesRemaining
|
|
7129
7493
|
] }) }) : void 0;
|
|
7130
7494
|
const outcome = clientState?.solved ? s.solved : clientState?.failed ? s.failed : ui.games.done;
|
|
7131
|
-
return /* @__PURE__ */
|
|
7132
|
-
/* @__PURE__ */
|
|
7133
|
-
/* @__PURE__ */
|
|
7134
|
-
!isOver && /* @__PURE__ */
|
|
7135
|
-
/* @__PURE__ */
|
|
7136
|
-
isOver && clientState?.revealedPlayerName ? /* @__PURE__ */
|
|
7137
|
-
/* @__PURE__ */
|
|
7138
|
-
/* @__PURE__ */
|
|
7139
|
-
clientState?.hintLine ? /* @__PURE__ */
|
|
7140
|
-
/* @__PURE__ */
|
|
7141
|
-
/* @__PURE__ */
|
|
7495
|
+
return /* @__PURE__ */ jsxs67("div", { className: "ss-g-screen", "data-game": "career-path", "data-testid": "game-screen-career-path", children: [
|
|
7496
|
+
/* @__PURE__ */ jsx78(GameHeader, { title, eyebrow: s.eyebrow, right, onBack, backLabel: ui.back }),
|
|
7497
|
+
/* @__PURE__ */ jsxs67("div", { className: "ss-g-body", children: [
|
|
7498
|
+
!isOver && /* @__PURE__ */ jsx78(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed: clientState?.guessesUsed ?? 0, ui }),
|
|
7499
|
+
/* @__PURE__ */ jsxs67("div", { className: "ss-g-cp-card", children: [
|
|
7500
|
+
isOver && clientState?.revealedPlayerName ? /* @__PURE__ */ jsx78(PlayerAvatar, { className: "ss-g-cp-photo", name: clientState.revealedPlayerName, imagePath: clientState.revealedPlayerImagePath }) : /* @__PURE__ */ jsx78(Silhouette, { size: 64, variant: isOver ? "default" : "mystery" }),
|
|
7501
|
+
/* @__PURE__ */ jsxs67("div", { className: "ss-g-cp-card-text", children: [
|
|
7502
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-card-title", children: isOver && clientState?.revealedPlayerName ? clientState.revealedPlayerName : s.mysteryPlayer }),
|
|
7503
|
+
clientState?.hintLine ? /* @__PURE__ */ jsx78("span", { className: "ss-g-cp-hint", children: clientState.hintLine }) : !isOver ? /* @__PURE__ */ jsxs67("span", { className: "ss-g-cp-locks", children: [
|
|
7504
|
+
/* @__PURE__ */ jsx78(Chip, { variant: "lock", icon: /* @__PURE__ */ jsx78(IconLock, { size: 11 }), children: s.lockPosition }),
|
|
7505
|
+
/* @__PURE__ */ jsx78(Chip, { variant: "lock", icon: /* @__PURE__ */ jsx78(IconLock, { size: 11 }), children: s.lockNationality })
|
|
7142
7506
|
] }) : null
|
|
7143
7507
|
] })
|
|
7144
7508
|
] }),
|
|
7145
|
-
/* @__PURE__ */
|
|
7509
|
+
/* @__PURE__ */ jsxs67("ol", { className: "ss-g-cp-line", children: [
|
|
7146
7510
|
visiblePath.map((spell, i) => {
|
|
7147
7511
|
const years = i === 0 ? s.firstClub : spellYears(spell);
|
|
7148
|
-
return /* @__PURE__ */
|
|
7149
|
-
/* @__PURE__ */
|
|
7150
|
-
/* @__PURE__ */
|
|
7151
|
-
/* @__PURE__ */
|
|
7512
|
+
return /* @__PURE__ */ jsxs67("li", { className: "ss-g-cp-step", children: [
|
|
7513
|
+
/* @__PURE__ */ jsxs67("span", { className: "ss-g-cp-rail", children: [
|
|
7514
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-tile", children: /* @__PURE__ */ jsx78(CrestShield, { src: spell.crestUrl, name: spell.clubName, size: 30 }) }),
|
|
7515
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-conn", "aria-hidden": "true" })
|
|
7152
7516
|
] }),
|
|
7153
|
-
/* @__PURE__ */
|
|
7154
|
-
/* @__PURE__ */
|
|
7155
|
-
/* @__PURE__ */
|
|
7156
|
-
/* @__PURE__ */
|
|
7157
|
-
spell.isLoan && /* @__PURE__ */
|
|
7517
|
+
/* @__PURE__ */ jsxs67("span", { className: "ss-g-cp-step-text", children: [
|
|
7518
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-club", children: spell.clubName }),
|
|
7519
|
+
/* @__PURE__ */ jsxs67("span", { className: "ss-g-cp-sub", children: [
|
|
7520
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-years", children: years }),
|
|
7521
|
+
spell.isLoan && /* @__PURE__ */ jsxs67(Fragment14, { children: [
|
|
7158
7522
|
years ? " \xB7 " : "",
|
|
7159
|
-
/* @__PURE__ */
|
|
7523
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-loan", children: s.loan })
|
|
7160
7524
|
] })
|
|
7161
7525
|
] })
|
|
7162
7526
|
] })
|
|
7163
7527
|
] }, `${spell.clubName}-${i}`);
|
|
7164
7528
|
}),
|
|
7165
|
-
hidden > 0 && /* @__PURE__ */
|
|
7166
|
-
/* @__PURE__ */
|
|
7167
|
-
/* @__PURE__ */
|
|
7168
|
-
hidden > 1 && /* @__PURE__ */
|
|
7529
|
+
hidden > 0 && /* @__PURE__ */ jsxs67("li", { className: "ss-g-cp-step ss-g-cp-step--hidden", children: [
|
|
7530
|
+
/* @__PURE__ */ jsxs67("span", { className: "ss-g-cp-rail", children: [
|
|
7531
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-tile ss-g-cp-tile--locked", children: /* @__PURE__ */ jsx78(IconLock, { size: 18 }) }),
|
|
7532
|
+
hidden > 1 && /* @__PURE__ */ jsx78("span", { className: "ss-g-cp-conn ss-g-cp-conn--faint", "aria-hidden": "true" })
|
|
7169
7533
|
] }),
|
|
7170
|
-
/* @__PURE__ */
|
|
7534
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-step-text", children: /* @__PURE__ */ jsx78("span", { className: "ss-g-cp-sub", children: s.nextClubHidden }) })
|
|
7171
7535
|
] }),
|
|
7172
|
-
hidden > 1 && /* @__PURE__ */
|
|
7173
|
-
/* @__PURE__ */
|
|
7174
|
-
/* @__PURE__ */
|
|
7536
|
+
hidden > 1 && /* @__PURE__ */ jsxs67("li", { className: "ss-g-cp-step ss-g-cp-step--more", children: [
|
|
7537
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-rail", children: /* @__PURE__ */ jsx78("span", { className: "ss-g-cp-tile ss-g-cp-tile--faint", children: /* @__PURE__ */ jsx78(IconLock, { size: 18 }) }) }),
|
|
7538
|
+
/* @__PURE__ */ jsx78("span", { className: "ss-g-cp-step-text", children: /* @__PURE__ */ jsx78("span", { className: "ss-g-cp-sub", children: s.moreClubs(hidden - 1) }) })
|
|
7175
7539
|
] })
|
|
7176
7540
|
] }),
|
|
7177
|
-
isOver && /* @__PURE__ */
|
|
7541
|
+
isOver && /* @__PURE__ */ jsx78(
|
|
7178
7542
|
ResultCard,
|
|
7179
7543
|
{
|
|
7180
7544
|
tone: clientState?.solved ? "win" : clientState?.failed ? "lose" : "neutral",
|
|
@@ -7186,7 +7550,7 @@ function CareerPathGame({
|
|
|
7186
7550
|
}
|
|
7187
7551
|
)
|
|
7188
7552
|
] }),
|
|
7189
|
-
!isOver && /* @__PURE__ */
|
|
7553
|
+
!isOver && /* @__PURE__ */ jsx78(FooterBar, { children: /* @__PURE__ */ jsx78(
|
|
7190
7554
|
AnswerTray,
|
|
7191
7555
|
{
|
|
7192
7556
|
id: inputId,
|
|
@@ -7205,16 +7569,16 @@ function CareerPathGame({
|
|
|
7205
7569
|
}
|
|
7206
7570
|
|
|
7207
7571
|
// src/components/games/BeatTheGridGame.tsx
|
|
7208
|
-
import React, { useEffect as
|
|
7572
|
+
import React, { useEffect as useEffect23, useId as useId5, useRef as useRef20, useState as useState36 } from "react";
|
|
7209
7573
|
|
|
7210
7574
|
// src/components/games/ui/OptionList.tsx
|
|
7211
|
-
import { jsx as
|
|
7575
|
+
import { jsx as jsx79 } from "react/jsx-runtime";
|
|
7212
7576
|
function OptionList({ label, options, onPick }) {
|
|
7213
|
-
return /* @__PURE__ */
|
|
7577
|
+
return /* @__PURE__ */ jsx79("div", { className: "ss-g-opts", role: "listbox", "aria-label": label, children: options.map((o) => /* @__PURE__ */ jsx79("button", { type: "button", role: "option", "aria-selected": false, className: "ss-g-opt", onClick: () => onPick(o.key), children: o.content }, o.key)) });
|
|
7214
7578
|
}
|
|
7215
7579
|
|
|
7216
7580
|
// src/components/games/BeatTheGridGame.tsx
|
|
7217
|
-
import { Fragment as Fragment15, jsx as
|
|
7581
|
+
import { Fragment as Fragment15, jsx as jsx80, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
7218
7582
|
function criterionIconKind(label, key) {
|
|
7219
7583
|
const l = (key ?? label).toLowerCase();
|
|
7220
7584
|
if (l.includes("app")) return "calendar";
|
|
@@ -7232,34 +7596,34 @@ function rowAbbrev(label, map, key) {
|
|
|
7232
7596
|
function CriterionIcon({ kind }) {
|
|
7233
7597
|
switch (kind) {
|
|
7234
7598
|
case "calendar":
|
|
7235
|
-
return /* @__PURE__ */
|
|
7599
|
+
return /* @__PURE__ */ jsx80(IconCalendar, {});
|
|
7236
7600
|
case "ball":
|
|
7237
|
-
return /* @__PURE__ */
|
|
7601
|
+
return /* @__PURE__ */ jsx80(IconBall, {});
|
|
7238
7602
|
case "boot":
|
|
7239
|
-
return /* @__PURE__ */
|
|
7603
|
+
return /* @__PURE__ */ jsx80(IconBoot, {});
|
|
7240
7604
|
case "gloves":
|
|
7241
|
-
return /* @__PURE__ */
|
|
7605
|
+
return /* @__PURE__ */ jsx80(IconGloves, {});
|
|
7242
7606
|
case "shield":
|
|
7243
|
-
return /* @__PURE__ */
|
|
7607
|
+
return /* @__PURE__ */ jsx80(IconShield, {});
|
|
7244
7608
|
default:
|
|
7245
|
-
return /* @__PURE__ */
|
|
7609
|
+
return /* @__PURE__ */ jsx80(IconFlag, {});
|
|
7246
7610
|
}
|
|
7247
7611
|
}
|
|
7248
7612
|
function HeaderVisual({ label, textKey: iKey, meta }) {
|
|
7249
7613
|
if (!meta) {
|
|
7250
|
-
return /* @__PURE__ */
|
|
7614
|
+
return /* @__PURE__ */ jsx80(CriterionIcon, { kind: criterionIconKind(label, iKey) });
|
|
7251
7615
|
}
|
|
7252
7616
|
switch (meta.kind) {
|
|
7253
7617
|
case "club":
|
|
7254
|
-
return /* @__PURE__ */
|
|
7618
|
+
return /* @__PURE__ */ jsx80(CrestShield, { src: meta.imageUrl, name: label, size: 24 });
|
|
7255
7619
|
case "coach":
|
|
7256
|
-
return /* @__PURE__ */
|
|
7620
|
+
return /* @__PURE__ */ jsx80(PlayerAvatar, { name: label, imagePath: meta.imageUrl, className: "ss-g-btg-coach-av" });
|
|
7257
7621
|
case "country":
|
|
7258
|
-
return /* @__PURE__ */
|
|
7622
|
+
return /* @__PURE__ */ jsx80("span", { className: "ss-g-btg-hdr-flag", "aria-hidden": "true", children: nationalityFlag(meta.country ?? label) });
|
|
7259
7623
|
case "position":
|
|
7260
|
-
return /* @__PURE__ */
|
|
7624
|
+
return /* @__PURE__ */ jsx80(Fragment15, {});
|
|
7261
7625
|
default:
|
|
7262
|
-
return /* @__PURE__ */
|
|
7626
|
+
return /* @__PURE__ */ jsx80(CriterionIcon, { kind: criterionIconKind(label, iKey) });
|
|
7263
7627
|
}
|
|
7264
7628
|
}
|
|
7265
7629
|
function parseClientState4(json) {
|
|
@@ -7294,21 +7658,21 @@ function SearchSheet({
|
|
|
7294
7658
|
ui
|
|
7295
7659
|
}) {
|
|
7296
7660
|
const s = ui.games.beatTheGrid;
|
|
7297
|
-
const [query, setQuery] =
|
|
7298
|
-
const inputId =
|
|
7299
|
-
const inputRef =
|
|
7300
|
-
|
|
7661
|
+
const [query, setQuery] = useState36("");
|
|
7662
|
+
const inputId = useId5();
|
|
7663
|
+
const inputRef = useRef20(null);
|
|
7664
|
+
useEffect23(() => {
|
|
7301
7665
|
inputRef.current?.focus();
|
|
7302
7666
|
}, [row, col]);
|
|
7303
7667
|
const filtered = playerPool.filter(
|
|
7304
7668
|
(p) => !alreadyFilledIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
|
|
7305
7669
|
);
|
|
7306
|
-
return /* @__PURE__ */
|
|
7307
|
-
/* @__PURE__ */
|
|
7308
|
-
/* @__PURE__ */
|
|
7309
|
-
/* @__PURE__ */
|
|
7310
|
-
/* @__PURE__ */
|
|
7311
|
-
/* @__PURE__ */
|
|
7670
|
+
return /* @__PURE__ */ jsxs68("div", { className: "ss-g-btg-sheet", "data-testid": "btg-search-sheet", children: [
|
|
7671
|
+
/* @__PURE__ */ jsxs68("div", { className: "ss-g-btg-sheet-hdr", children: [
|
|
7672
|
+
/* @__PURE__ */ jsx80(Chip, { variant: "neutral", children: rowLabel }),
|
|
7673
|
+
/* @__PURE__ */ jsx80("span", { className: "ss-g-btg-sheet-x", "aria-hidden": "true", children: /* @__PURE__ */ jsx80(IconClose, { size: 12 }) }),
|
|
7674
|
+
/* @__PURE__ */ jsx80(Chip, { variant: "accent", children: colLabel }),
|
|
7675
|
+
/* @__PURE__ */ jsx80(
|
|
7312
7676
|
"button",
|
|
7313
7677
|
{
|
|
7314
7678
|
type: "button",
|
|
@@ -7316,12 +7680,12 @@ function SearchSheet({
|
|
|
7316
7680
|
"data-testid": "btg-sheet-dismiss",
|
|
7317
7681
|
"aria-label": s.closeSearch,
|
|
7318
7682
|
onClick: onDismiss,
|
|
7319
|
-
children: /* @__PURE__ */
|
|
7683
|
+
children: /* @__PURE__ */ jsx80(IconClose, {})
|
|
7320
7684
|
}
|
|
7321
7685
|
)
|
|
7322
7686
|
] }),
|
|
7323
|
-
playerPool.length === 0 ? /* @__PURE__ */
|
|
7324
|
-
/* @__PURE__ */
|
|
7687
|
+
playerPool.length === 0 ? /* @__PURE__ */ jsx80("div", { className: "ss-g-btg-sheet-empty", children: s.emptyPool }) : /* @__PURE__ */ jsxs68(Fragment15, { children: [
|
|
7688
|
+
/* @__PURE__ */ jsx80(
|
|
7325
7689
|
SearchField,
|
|
7326
7690
|
{
|
|
7327
7691
|
id: inputId,
|
|
@@ -7333,16 +7697,16 @@ function SearchSheet({
|
|
|
7333
7697
|
inputRef
|
|
7334
7698
|
}
|
|
7335
7699
|
),
|
|
7336
|
-
query.length > 0 && filtered.length > 0 && /* @__PURE__ */
|
|
7700
|
+
query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx80(
|
|
7337
7701
|
OptionList,
|
|
7338
7702
|
{
|
|
7339
7703
|
label: s.searchLabel(rowLabel, colLabel),
|
|
7340
7704
|
options: filtered.map((p) => ({
|
|
7341
7705
|
key: p.id,
|
|
7342
|
-
content: /* @__PURE__ */
|
|
7343
|
-
/* @__PURE__ */
|
|
7344
|
-
/* @__PURE__ */
|
|
7345
|
-
/* @__PURE__ */
|
|
7706
|
+
content: /* @__PURE__ */ jsxs68(Fragment15, { children: [
|
|
7707
|
+
/* @__PURE__ */ jsx80(PlayerAvatar, { name: p.name, imagePath: p.imagePath, className: "ss-g-opt-av" }),
|
|
7708
|
+
/* @__PURE__ */ jsx80("span", { className: "ss-g-btg-result-name", children: p.name }),
|
|
7709
|
+
/* @__PURE__ */ jsx80("span", { className: "ss-g-btg-result-plus", "aria-hidden": "true", children: /* @__PURE__ */ jsx80(IconPlus, { size: 18 }) })
|
|
7346
7710
|
] })
|
|
7347
7711
|
})),
|
|
7348
7712
|
onPick: (k) => onPick(row, col, Number(k))
|
|
@@ -7362,7 +7726,7 @@ function BeatTheGridGame({
|
|
|
7362
7726
|
}) {
|
|
7363
7727
|
const s = ui.games.beatTheGrid;
|
|
7364
7728
|
const title = gameTitle({ gameId: "beat-the-grid" }, ui.games.titles);
|
|
7365
|
-
const [activeCell, setActiveCell] =
|
|
7729
|
+
const [activeCell, setActiveCell] = useState36(null);
|
|
7366
7730
|
const clientState = parseClientState4(result?.clientStateJson);
|
|
7367
7731
|
const filledCells = clientState?.cells ?? [];
|
|
7368
7732
|
const isLocked2 = result?.alreadyPlayed === true || clientState?.isComplete === true;
|
|
@@ -7380,9 +7744,9 @@ function BeatTheGridGame({
|
|
|
7380
7744
|
onSubmit(JSON.stringify({ cells: newCells }));
|
|
7381
7745
|
}
|
|
7382
7746
|
if (!config) {
|
|
7383
|
-
return /* @__PURE__ */
|
|
7384
|
-
/* @__PURE__ */
|
|
7385
|
-
/* @__PURE__ */
|
|
7747
|
+
return /* @__PURE__ */ jsxs68("div", { className: "ss-g-screen", "data-game": "beat-the-grid", "data-testid": "game-screen-beat-the-grid", children: [
|
|
7748
|
+
/* @__PURE__ */ jsx80(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
|
|
7749
|
+
/* @__PURE__ */ jsx80("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
|
|
7386
7750
|
] });
|
|
7387
7751
|
}
|
|
7388
7752
|
const rows = config.rows;
|
|
@@ -7395,20 +7759,20 @@ function BeatTheGridGame({
|
|
|
7395
7759
|
(_, i) => i < correctCount ? "correct" : i < correctCount + wrongCount ? "wrong" : "todo"
|
|
7396
7760
|
);
|
|
7397
7761
|
const totalScore = clientState?.totalScore ?? result?.score ?? 0;
|
|
7398
|
-
return /* @__PURE__ */
|
|
7399
|
-
/* @__PURE__ */
|
|
7400
|
-
/* @__PURE__ */
|
|
7762
|
+
return /* @__PURE__ */ jsxs68("div", { className: "ss-g-screen", "data-game": "beat-the-grid", "data-testid": "game-screen-beat-the-grid", children: [
|
|
7763
|
+
/* @__PURE__ */ jsx80(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
|
|
7764
|
+
/* @__PURE__ */ jsx80(
|
|
7401
7765
|
SegmentProgress,
|
|
7402
7766
|
{
|
|
7403
7767
|
segments,
|
|
7404
7768
|
ariaLabel: s.progressAria(filledCells.length, total),
|
|
7405
7769
|
leftLabel: s.filled(filledCells.length, total),
|
|
7406
7770
|
rightLabel: s.toGo(Math.max(0, total - filledCells.length)),
|
|
7407
|
-
right: /* @__PURE__ */
|
|
7771
|
+
right: /* @__PURE__ */ jsx80(Chip, { variant: "accent", children: `${totalScore} ${ui.games.unitPts}` })
|
|
7408
7772
|
}
|
|
7409
7773
|
),
|
|
7410
|
-
/* @__PURE__ */
|
|
7411
|
-
/* @__PURE__ */
|
|
7774
|
+
/* @__PURE__ */ jsxs68("div", { className: "ss-g-body", children: [
|
|
7775
|
+
/* @__PURE__ */ jsxs68(
|
|
7412
7776
|
"div",
|
|
7413
7777
|
{
|
|
7414
7778
|
className: activeCell !== null ? "ss-g-btg-grid ss-g-btg-grid--fit" : "ss-g-btg-grid",
|
|
@@ -7418,31 +7782,31 @@ function BeatTheGridGame({
|
|
|
7418
7782
|
},
|
|
7419
7783
|
role: "grid",
|
|
7420
7784
|
children: [
|
|
7421
|
-
/* @__PURE__ */
|
|
7785
|
+
/* @__PURE__ */ jsx80("div", { className: "ss-g-btg-corner" }),
|
|
7422
7786
|
cols.map((col, colIdx) => {
|
|
7423
7787
|
const colMeta = config.colsMeta?.[colIdx];
|
|
7424
|
-
return /* @__PURE__ */
|
|
7425
|
-
/* @__PURE__ */
|
|
7426
|
-
/* @__PURE__ */
|
|
7788
|
+
return /* @__PURE__ */ jsxs68("div", { className: "ss-g-btg-colhdr", "data-meta": colMeta ? "true" : void 0, children: [
|
|
7789
|
+
/* @__PURE__ */ jsx80(HeaderVisual, { label: col, textKey: config.colsI18n?.[colIdx]?.key, meta: colMeta }),
|
|
7790
|
+
/* @__PURE__ */ jsx80("span", { children: col })
|
|
7427
7791
|
] }, col);
|
|
7428
7792
|
}),
|
|
7429
7793
|
rows.map((rowLabel, rowIdx) => {
|
|
7430
7794
|
const rowMeta = config.rowsMeta?.[rowIdx];
|
|
7431
7795
|
const abbr = rowAbbrev(rowLabel, s.rowAbbrev, config.rowsI18n?.[rowIdx]?.key);
|
|
7432
|
-
const rowHeaderContent = rowMeta ? /* @__PURE__ */
|
|
7433
|
-
/* @__PURE__ */
|
|
7434
|
-
/* @__PURE__ */
|
|
7435
|
-
] }) : abbr === rowLabel ? /* @__PURE__ */
|
|
7436
|
-
/* @__PURE__ */
|
|
7437
|
-
/* @__PURE__ */
|
|
7796
|
+
const rowHeaderContent = rowMeta ? /* @__PURE__ */ jsxs68(Fragment15, { children: [
|
|
7797
|
+
/* @__PURE__ */ jsx80(HeaderVisual, { label: rowLabel, textKey: config.rowsI18n?.[rowIdx]?.key, meta: rowMeta }),
|
|
7798
|
+
/* @__PURE__ */ jsx80("span", { children: rowLabel })
|
|
7799
|
+
] }) : abbr === rowLabel ? /* @__PURE__ */ jsx80("span", { children: rowLabel }) : /* @__PURE__ */ jsxs68(Fragment15, { children: [
|
|
7800
|
+
/* @__PURE__ */ jsx80("span", { "aria-hidden": "true", children: abbr }),
|
|
7801
|
+
/* @__PURE__ */ jsx80("span", { className: "ss-g-sr", children: rowLabel })
|
|
7438
7802
|
] });
|
|
7439
|
-
return /* @__PURE__ */
|
|
7440
|
-
/* @__PURE__ */
|
|
7803
|
+
return /* @__PURE__ */ jsxs68(React.Fragment, { children: [
|
|
7804
|
+
/* @__PURE__ */ jsx80("div", { className: "ss-g-btg-rowhdr", "data-meta": rowMeta ? "true" : void 0, children: rowHeaderContent }),
|
|
7441
7805
|
cols.map((colLabel, colIdx) => {
|
|
7442
7806
|
const filled = findCellResult(filledCells, rowIdx, colIdx);
|
|
7443
7807
|
const isActive = activeCell?.row === rowIdx && activeCell?.col === colIdx;
|
|
7444
7808
|
const state = filled ? filled.isCorrect ? "correct" : "wrong" : isActive ? "active" : "empty";
|
|
7445
|
-
return /* @__PURE__ */
|
|
7809
|
+
return /* @__PURE__ */ jsx80(
|
|
7446
7810
|
"button",
|
|
7447
7811
|
{
|
|
7448
7812
|
type: "button",
|
|
@@ -7453,20 +7817,20 @@ function BeatTheGridGame({
|
|
|
7453
7817
|
className: "ss-g-btg-cell",
|
|
7454
7818
|
disabled: isLocked2 || submitting,
|
|
7455
7819
|
onClick: () => handleCellClick(rowIdx, colIdx),
|
|
7456
|
-
children: filled ? /* @__PURE__ */
|
|
7457
|
-
/* @__PURE__ */
|
|
7820
|
+
children: filled ? /* @__PURE__ */ jsxs68(Fragment15, { children: [
|
|
7821
|
+
/* @__PURE__ */ jsx80(
|
|
7458
7822
|
"span",
|
|
7459
7823
|
{
|
|
7460
7824
|
className: `ss-g-btg-badge ss-g-btg-badge--${filled.isCorrect ? "correct" : "wrong"}`,
|
|
7461
7825
|
role: "img",
|
|
7462
7826
|
"aria-label": filled.isCorrect ? s.correct : s.wrong,
|
|
7463
|
-
children: filled.isCorrect ? /* @__PURE__ */
|
|
7827
|
+
children: filled.isCorrect ? /* @__PURE__ */ jsx80(IconCheck, { size: 11 }) : /* @__PURE__ */ jsx80(IconClose, { size: 11 })
|
|
7464
7828
|
}
|
|
7465
7829
|
),
|
|
7466
|
-
/* @__PURE__ */
|
|
7830
|
+
/* @__PURE__ */ jsx80("span", { className: "ss-g-btg-rarity", children: filled.rarityScore }),
|
|
7467
7831
|
(() => {
|
|
7468
7832
|
const entry = playerPool.find((p) => p.id === filled.playerId);
|
|
7469
|
-
return /* @__PURE__ */
|
|
7833
|
+
return /* @__PURE__ */ jsx80(
|
|
7470
7834
|
PlayerAvatar,
|
|
7471
7835
|
{
|
|
7472
7836
|
name: entry?.name ?? "",
|
|
@@ -7475,8 +7839,8 @@ function BeatTheGridGame({
|
|
|
7475
7839
|
}
|
|
7476
7840
|
);
|
|
7477
7841
|
})(),
|
|
7478
|
-
/* @__PURE__ */
|
|
7479
|
-
] }) : /* @__PURE__ */
|
|
7842
|
+
/* @__PURE__ */ jsx80("span", { className: "ss-g-btg-name", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) })
|
|
7843
|
+
] }) : /* @__PURE__ */ jsx80("span", { className: "ss-g-btg-plus", "aria-hidden": "true", children: /* @__PURE__ */ jsx80(IconPlus, { size: 22 }) })
|
|
7480
7844
|
},
|
|
7481
7845
|
`cell-${rowIdx}-${colIdx}`
|
|
7482
7846
|
);
|
|
@@ -7486,7 +7850,7 @@ function BeatTheGridGame({
|
|
|
7486
7850
|
]
|
|
7487
7851
|
}
|
|
7488
7852
|
),
|
|
7489
|
-
isLocked2 && /* @__PURE__ */
|
|
7853
|
+
isLocked2 && /* @__PURE__ */ jsx80(
|
|
7490
7854
|
ResultCard,
|
|
7491
7855
|
{
|
|
7492
7856
|
tone: "neutral",
|
|
@@ -7498,7 +7862,7 @@ function BeatTheGridGame({
|
|
|
7498
7862
|
}
|
|
7499
7863
|
)
|
|
7500
7864
|
] }),
|
|
7501
|
-
activeCell !== null && /* @__PURE__ */
|
|
7865
|
+
activeCell !== null && /* @__PURE__ */ jsx80("div", { className: "ss-g-btg-pin", children: /* @__PURE__ */ jsx80(
|
|
7502
7866
|
SearchSheet,
|
|
7503
7867
|
{
|
|
7504
7868
|
row: activeCell.row,
|
|
@@ -7517,21 +7881,21 @@ function BeatTheGridGame({
|
|
|
7517
7881
|
}
|
|
7518
7882
|
|
|
7519
7883
|
// src/components/games/GuessTheXiGame.tsx
|
|
7520
|
-
import { useState as
|
|
7884
|
+
import { useState as useState37, useId as useId6 } from "react";
|
|
7521
7885
|
|
|
7522
7886
|
// src/components/games/ui/PitchSvg.tsx
|
|
7523
|
-
import { Fragment as Fragment16, jsx as
|
|
7887
|
+
import { Fragment as Fragment16, jsx as jsx81, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
7524
7888
|
function PitchSvg({ variant }) {
|
|
7525
|
-
return /* @__PURE__ */
|
|
7526
|
-
/* @__PURE__ */
|
|
7527
|
-
variant === "full" ? /* @__PURE__ */
|
|
7528
|
-
/* @__PURE__ */
|
|
7529
|
-
/* @__PURE__ */
|
|
7530
|
-
/* @__PURE__ */
|
|
7531
|
-
/* @__PURE__ */
|
|
7532
|
-
] }) : /* @__PURE__ */
|
|
7533
|
-
/* @__PURE__ */
|
|
7534
|
-
/* @__PURE__ */
|
|
7889
|
+
return /* @__PURE__ */ jsxs69("svg", { className: "ss-g-pitch-svg", viewBox: variant === "full" ? "0 0 100 150" : "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [
|
|
7890
|
+
/* @__PURE__ */ jsx81("rect", { x: "4", y: "4", width: "92", height: variant === "full" ? 142 : 92, fill: "none" }),
|
|
7891
|
+
variant === "full" ? /* @__PURE__ */ jsxs69(Fragment16, { children: [
|
|
7892
|
+
/* @__PURE__ */ jsx81("line", { x1: "4", y1: "75", x2: "96", y2: "75" }),
|
|
7893
|
+
/* @__PURE__ */ jsx81("circle", { cx: "50", cy: "75", r: "12", fill: "none" }),
|
|
7894
|
+
/* @__PURE__ */ jsx81("rect", { x: "26", y: "4", width: "48", height: "20", fill: "none" }),
|
|
7895
|
+
/* @__PURE__ */ jsx81("rect", { x: "26", y: "126", width: "48", height: "20", fill: "none" })
|
|
7896
|
+
] }) : /* @__PURE__ */ jsxs69(Fragment16, { children: [
|
|
7897
|
+
/* @__PURE__ */ jsx81("path", { d: "M38 4a12 12 0 0 0 24 0", fill: "none" }),
|
|
7898
|
+
/* @__PURE__ */ jsx81("rect", { x: "26", y: "76", width: "48", height: "20", fill: "none" })
|
|
7535
7899
|
] })
|
|
7536
7900
|
] });
|
|
7537
7901
|
}
|
|
@@ -7587,7 +7951,7 @@ function positionsBySlot(formation, rowsAttackFirst) {
|
|
|
7587
7951
|
}
|
|
7588
7952
|
|
|
7589
7953
|
// src/components/games/GuessTheXiGame.tsx
|
|
7590
|
-
import { Fragment as Fragment17, jsx as
|
|
7954
|
+
import { Fragment as Fragment17, jsx as jsx82, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
7591
7955
|
var MAX_GUESSES2 = 3;
|
|
7592
7956
|
function parseClientState5(json) {
|
|
7593
7957
|
if (!json) return null;
|
|
@@ -7606,8 +7970,8 @@ function GuessTheXiGame({
|
|
|
7606
7970
|
onBack
|
|
7607
7971
|
}) {
|
|
7608
7972
|
const t = ui.games.guessTheXi;
|
|
7609
|
-
const [query, setQuery] =
|
|
7610
|
-
const inputId =
|
|
7973
|
+
const [query, setQuery] = useState37("");
|
|
7974
|
+
const inputId = useId6();
|
|
7611
7975
|
const clientState = parseClientState5(result?.clientStateJson);
|
|
7612
7976
|
const isOver = result?.alreadyPlayed === true || clientState?.status === "solved" || clientState?.status === "failed";
|
|
7613
7977
|
const solved = clientState?.status === "solved";
|
|
@@ -7637,31 +8001,31 @@ function GuessTheXiGame({
|
|
|
7637
8001
|
const wrongGuesses = (clientState?.guessHistory ?? []).filter((g) => !g.wasCorrect);
|
|
7638
8002
|
const guessesLeft = Math.max(0, MAX_GUESSES2 - (clientState?.guessesUsed ?? 0));
|
|
7639
8003
|
const teamName = (id) => config?.teamPool.find((tm) => tm.teamId === id)?.teamName ?? `#${id}`;
|
|
7640
|
-
return /* @__PURE__ */
|
|
7641
|
-
/* @__PURE__ */
|
|
8004
|
+
return /* @__PURE__ */ jsxs70("div", { className: "ss-g-screen ss-g-gxi", "data-game": "guess-the-xi", "data-testid": "game-screen-guess-the-xi", children: [
|
|
8005
|
+
/* @__PURE__ */ jsx82(
|
|
7642
8006
|
GameHeader,
|
|
7643
8007
|
{
|
|
7644
8008
|
title: gameTitle({ gameId: "guess-the-xi" }, ui.games.titles),
|
|
7645
8009
|
eyebrow: config?.poolLabel,
|
|
7646
|
-
right: formation ? /* @__PURE__ */
|
|
8010
|
+
right: formation ? /* @__PURE__ */ jsx82(Chip, { variant: "accent", children: formation }) : void 0,
|
|
7647
8011
|
onBack,
|
|
7648
8012
|
backLabel: ui.back
|
|
7649
8013
|
}
|
|
7650
8014
|
),
|
|
7651
|
-
!config && /* @__PURE__ */
|
|
7652
|
-
config && /* @__PURE__ */
|
|
7653
|
-
/* @__PURE__ */
|
|
7654
|
-
!isOver && /* @__PURE__ */
|
|
7655
|
-
rows.length > 0 && /* @__PURE__ */
|
|
7656
|
-
/* @__PURE__ */
|
|
7657
|
-
/* @__PURE__ */
|
|
8015
|
+
!config && /* @__PURE__ */ jsx82("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
|
|
8016
|
+
config && /* @__PURE__ */ jsxs70(Fragment17, { children: [
|
|
8017
|
+
/* @__PURE__ */ jsxs70("div", { className: "ss-g-body", children: [
|
|
8018
|
+
!isOver && /* @__PURE__ */ jsx82(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed: clientState?.guessHistory.length ?? 0, ui }),
|
|
8019
|
+
rows.length > 0 && /* @__PURE__ */ jsxs70("div", { className: "ss-g-gxi-pitch", role: "group", "aria-label": t.pitchLabel, children: [
|
|
8020
|
+
/* @__PURE__ */ jsx82(PitchSvg, { variant: "full" }),
|
|
8021
|
+
/* @__PURE__ */ jsx82("div", { className: "ss-g-gxi-rows", children: rows.map((row, r) => /* @__PURE__ */ jsx82("div", { className: "ss-g-gxi-row", children: row.map((pos, c) => {
|
|
7658
8022
|
const posLabel = pos.slot ? posBySlot.get(pos.slot) ?? "" : "";
|
|
7659
8023
|
const name = pos.slot ? nameBySlot.get(pos.slot) : void 0;
|
|
7660
8024
|
const lineupEntry = pos.slot ? lineupBySlot.get(pos.slot) : void 0;
|
|
7661
8025
|
const flag = nationalityFlag(pos.nationality);
|
|
7662
8026
|
if (lineupEntry) {
|
|
7663
|
-
return /* @__PURE__ */
|
|
7664
|
-
/* @__PURE__ */
|
|
8027
|
+
return /* @__PURE__ */ jsxs70("div", { className: "ss-g-gxi-node", "data-revealed": "true", children: [
|
|
8028
|
+
/* @__PURE__ */ jsx82(
|
|
7665
8029
|
PlayerAvatar,
|
|
7666
8030
|
{
|
|
7667
8031
|
name: lineupEntry.name,
|
|
@@ -7669,11 +8033,11 @@ function GuessTheXiGame({
|
|
|
7669
8033
|
className: "ss-g-gxi-disc ss-g-gxi-disc--photo"
|
|
7670
8034
|
}
|
|
7671
8035
|
),
|
|
7672
|
-
/* @__PURE__ */
|
|
8036
|
+
/* @__PURE__ */ jsx82("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(lineupEntry.name).last })
|
|
7673
8037
|
] }, `${pos.slot}-${c}`);
|
|
7674
8038
|
}
|
|
7675
|
-
return /* @__PURE__ */
|
|
7676
|
-
/* @__PURE__ */
|
|
8039
|
+
return /* @__PURE__ */ jsxs70("div", { className: "ss-g-gxi-node", "data-revealed": name ? "true" : void 0, children: [
|
|
8040
|
+
/* @__PURE__ */ jsx82(
|
|
7677
8041
|
"span",
|
|
7678
8042
|
{
|
|
7679
8043
|
className: "ss-g-gxi-disc",
|
|
@@ -7684,22 +8048,22 @@ function GuessTheXiGame({
|
|
|
7684
8048
|
children: flag
|
|
7685
8049
|
}
|
|
7686
8050
|
),
|
|
7687
|
-
name ? /* @__PURE__ */
|
|
8051
|
+
name ? /* @__PURE__ */ jsx82("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(name).last }) : posLabel && /* @__PURE__ */ jsx82("span", { className: "ss-g-gxi-pos", children: posLabel })
|
|
7688
8052
|
] }, `${pos.slot}-${c}`);
|
|
7689
8053
|
}) }, r)) })
|
|
7690
8054
|
] }),
|
|
7691
|
-
!isOver && wrongGuesses.length > 0 && /* @__PURE__ */
|
|
7692
|
-
/* @__PURE__ */
|
|
8055
|
+
!isOver && wrongGuesses.length > 0 && /* @__PURE__ */ jsxs70("div", { className: "ss-g-gxi-wrong", children: [
|
|
8056
|
+
/* @__PURE__ */ jsx82("span", { className: "ss-g-gxi-wrong-l", children: t.notThem }),
|
|
7693
8057
|
wrongGuesses.map((g) => {
|
|
7694
8058
|
const crestUrl = config?.teamPool.find((tm) => tm.teamId === g.teamId)?.crestUrl;
|
|
7695
|
-
return /* @__PURE__ */
|
|
7696
|
-
/* @__PURE__ */
|
|
7697
|
-
/* @__PURE__ */
|
|
8059
|
+
return /* @__PURE__ */ jsxs70("span", { className: "ss-g-gxi-wrong-chip", children: [
|
|
8060
|
+
/* @__PURE__ */ jsx82(CrestShield, { src: crestUrl, name: teamName(g.teamId), size: 18 }),
|
|
8061
|
+
/* @__PURE__ */ jsx82("s", { children: teamName(g.teamId) })
|
|
7698
8062
|
] }, g.teamId);
|
|
7699
8063
|
})
|
|
7700
8064
|
] }),
|
|
7701
|
-
isOver && /* @__PURE__ */
|
|
7702
|
-
/* @__PURE__ */
|
|
8065
|
+
isOver && /* @__PURE__ */ jsxs70(Fragment17, { children: [
|
|
8066
|
+
/* @__PURE__ */ jsx82(
|
|
7703
8067
|
ResultCard,
|
|
7704
8068
|
{
|
|
7705
8069
|
tone: solved ? "win" : failed ? "lose" : "neutral",
|
|
@@ -7710,29 +8074,29 @@ function GuessTheXiGame({
|
|
|
7710
8074
|
ui
|
|
7711
8075
|
}
|
|
7712
8076
|
),
|
|
7713
|
-
(solved || failed) && clientState?.answer && /* @__PURE__ */
|
|
7714
|
-
/* @__PURE__ */
|
|
7715
|
-
/* @__PURE__ */
|
|
7716
|
-
/* @__PURE__ */
|
|
8077
|
+
(solved || failed) && clientState?.answer && /* @__PURE__ */ jsxs70("div", { className: "ss-g-gxi-answer", "data-testid": "gxi-answer-reveal", children: [
|
|
8078
|
+
/* @__PURE__ */ jsx82("span", { className: "ss-g-gxi-answer-label", children: t.theAnswer }),
|
|
8079
|
+
/* @__PURE__ */ jsx82(CrestShield, { src: clientState.answer.crestUrl, name: clientState.answer.teamName, size: 32 }),
|
|
8080
|
+
/* @__PURE__ */ jsx82("span", { className: "ss-g-gxi-answer-name", children: clientState.answer.teamName })
|
|
7717
8081
|
] })
|
|
7718
8082
|
] })
|
|
7719
8083
|
] }),
|
|
7720
|
-
!isOver && /* @__PURE__ */
|
|
7721
|
-
query.length > 0 && filtered.length > 0 && /* @__PURE__ */
|
|
8084
|
+
!isOver && /* @__PURE__ */ jsxs70(FooterBar, { children: [
|
|
8085
|
+
query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx82(
|
|
7722
8086
|
OptionList,
|
|
7723
8087
|
{
|
|
7724
8088
|
label: t.optionsLabel,
|
|
7725
8089
|
options: filtered.map((tm) => ({
|
|
7726
8090
|
key: tm.teamId,
|
|
7727
|
-
content: /* @__PURE__ */
|
|
7728
|
-
/* @__PURE__ */
|
|
7729
|
-
/* @__PURE__ */
|
|
8091
|
+
content: /* @__PURE__ */ jsxs70(Fragment17, { children: [
|
|
8092
|
+
/* @__PURE__ */ jsx82(CrestShield, { src: tm.crestUrl, name: tm.teamName, size: 28 }),
|
|
8093
|
+
/* @__PURE__ */ jsx82("span", { children: tm.teamName })
|
|
7730
8094
|
] })
|
|
7731
8095
|
})),
|
|
7732
8096
|
onPick: (k) => handlePick(Number(k))
|
|
7733
8097
|
}
|
|
7734
8098
|
),
|
|
7735
|
-
/* @__PURE__ */
|
|
8099
|
+
/* @__PURE__ */ jsx82(
|
|
7736
8100
|
SearchField,
|
|
7737
8101
|
{
|
|
7738
8102
|
id: inputId,
|
|
@@ -7749,8 +8113,8 @@ function GuessTheXiGame({
|
|
|
7749
8113
|
}
|
|
7750
8114
|
|
|
7751
8115
|
// src/components/games/DailyQuizGame.tsx
|
|
7752
|
-
import { useState as
|
|
7753
|
-
import { Fragment as Fragment18, jsx as
|
|
8116
|
+
import { useState as useState38 } from "react";
|
|
8117
|
+
import { Fragment as Fragment18, jsx as jsx83, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
7754
8118
|
function parseClientState6(json) {
|
|
7755
8119
|
if (!json) return null;
|
|
7756
8120
|
try {
|
|
@@ -7771,13 +8135,13 @@ function OptionName({ text }) {
|
|
|
7771
8135
|
const tokens = base.split(/\s+/).filter(Boolean);
|
|
7772
8136
|
const isPlainName = tokens.length >= 1 && tokens.length <= 4 && tokens.every((t) => NAME_TOKEN.test(t));
|
|
7773
8137
|
if (!isPlainName || base === "") {
|
|
7774
|
-
return /* @__PURE__ */
|
|
8138
|
+
return /* @__PURE__ */ jsx83("span", { className: "ss-g-dq-opt-name", children: /* @__PURE__ */ jsx83("span", { className: "ss-g-dq-opt-full", children: text }) });
|
|
7775
8139
|
}
|
|
7776
8140
|
const { first, last } = splitName(base);
|
|
7777
|
-
return /* @__PURE__ */
|
|
7778
|
-
first && /* @__PURE__ */
|
|
7779
|
-
/* @__PURE__ */
|
|
7780
|
-
suffix && /* @__PURE__ */
|
|
8141
|
+
return /* @__PURE__ */ jsxs71("span", { className: "ss-g-dq-opt-name", children: [
|
|
8142
|
+
first && /* @__PURE__ */ jsx83("span", { className: "ss-g-dq-opt-first", children: first }),
|
|
8143
|
+
/* @__PURE__ */ jsx83("span", { className: "ss-g-dq-opt-last", children: last }),
|
|
8144
|
+
suffix && /* @__PURE__ */ jsx83("span", { className: "ss-g-dq-opt-suffix", children: suffix })
|
|
7781
8145
|
] });
|
|
7782
8146
|
}
|
|
7783
8147
|
function DailyQuizGame({
|
|
@@ -7790,15 +8154,15 @@ function DailyQuizGame({
|
|
|
7790
8154
|
}) {
|
|
7791
8155
|
const s = ui.games.dailyQuiz;
|
|
7792
8156
|
const title = gameTitle({ gameId: "daily-quiz" }, ui.games.titles);
|
|
7793
|
-
const [selections, setSelections] =
|
|
7794
|
-
const [page, setPage] =
|
|
8157
|
+
const [selections, setSelections] = useState38(/* @__PURE__ */ new Map());
|
|
8158
|
+
const [page, setPage] = useState38(0);
|
|
7795
8159
|
const clientState = parseClientState6(result?.clientStateJson);
|
|
7796
8160
|
const results = clientState?.results ?? [];
|
|
7797
8161
|
const isRevealed = results.length > 0 || result?.alreadyPlayed === true;
|
|
7798
8162
|
if (!config) {
|
|
7799
|
-
return /* @__PURE__ */
|
|
7800
|
-
/* @__PURE__ */
|
|
7801
|
-
/* @__PURE__ */
|
|
8163
|
+
return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-game": "daily-quiz", "data-testid": "game-screen-daily-quiz", children: [
|
|
8164
|
+
/* @__PURE__ */ jsx83(GameHeader, { title, onBack, backLabel: ui.back }),
|
|
8165
|
+
/* @__PURE__ */ jsx83("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
|
|
7802
8166
|
] });
|
|
7803
8167
|
}
|
|
7804
8168
|
const questions = config.questions;
|
|
@@ -7833,11 +8197,11 @@ function DailyQuizGame({
|
|
|
7833
8197
|
return r.isCorrect ? "correct" : "wrong";
|
|
7834
8198
|
});
|
|
7835
8199
|
const correctCount = results.filter((r) => r.isCorrect).length;
|
|
7836
|
-
return /* @__PURE__ */
|
|
7837
|
-
/* @__PURE__ */
|
|
7838
|
-
/* @__PURE__ */
|
|
7839
|
-
/* @__PURE__ */
|
|
7840
|
-
/* @__PURE__ */
|
|
8200
|
+
return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-game": "daily-quiz", "data-testid": "game-screen-daily-quiz", children: [
|
|
8201
|
+
/* @__PURE__ */ jsx83(GameHeader, { title, eyebrow: s.results, onBack, backLabel: ui.back }),
|
|
8202
|
+
/* @__PURE__ */ jsx83(SegmentProgress, { segments: segments2, ariaLabel: s.results }),
|
|
8203
|
+
/* @__PURE__ */ jsxs71("div", { className: "ss-g-body", children: [
|
|
8204
|
+
/* @__PURE__ */ jsx83(
|
|
7841
8205
|
ResultCard,
|
|
7842
8206
|
{
|
|
7843
8207
|
tone: "neutral",
|
|
@@ -7850,15 +8214,15 @@ function DailyQuizGame({
|
|
|
7850
8214
|
questions.map((q) => {
|
|
7851
8215
|
const r = findResult(results, q.index);
|
|
7852
8216
|
const picked = selections.get(q.index);
|
|
7853
|
-
return /* @__PURE__ */
|
|
7854
|
-
/* @__PURE__ */
|
|
7855
|
-
r && /* @__PURE__ */
|
|
8217
|
+
return /* @__PURE__ */ jsxs71("div", { className: "ss-g-dq-rq", children: [
|
|
8218
|
+
/* @__PURE__ */ jsx83("div", { className: "ss-g-dq-rq-stem", children: q.stem }),
|
|
8219
|
+
r && /* @__PURE__ */ jsx83("div", { className: "ss-g-dq-rq-opts", children: q.options.map((opt, optIdx) => {
|
|
7856
8220
|
let cls = "ss-g-dq-rq-opt";
|
|
7857
8221
|
if (optIdx === r.correctOptionIndex) cls += " ss-g-dq-rq-opt--correct";
|
|
7858
8222
|
else if (optIdx === picked && !r.isCorrect) cls += " ss-g-dq-rq-opt--wrong";
|
|
7859
|
-
return /* @__PURE__ */
|
|
8223
|
+
return /* @__PURE__ */ jsx83("span", { className: cls, children: opt }, optIdx);
|
|
7860
8224
|
}) }),
|
|
7861
|
-
r?.revealText && /* @__PURE__ */
|
|
8225
|
+
r?.revealText && /* @__PURE__ */ jsx83("div", { className: "ss-g-dq-why", children: r.revealText })
|
|
7862
8226
|
] }, q.index);
|
|
7863
8227
|
})
|
|
7864
8228
|
] })
|
|
@@ -7866,16 +8230,16 @@ function DailyQuizGame({
|
|
|
7866
8230
|
}
|
|
7867
8231
|
const segments = questions.map((_, i) => i < page ? "done" : i === page ? "current" : "todo");
|
|
7868
8232
|
const selectedIdx = current ? selections.get(current.index) : void 0;
|
|
7869
|
-
return /* @__PURE__ */
|
|
7870
|
-
/* @__PURE__ */
|
|
7871
|
-
/* @__PURE__ */
|
|
7872
|
-
/* @__PURE__ */
|
|
7873
|
-
/* @__PURE__ */
|
|
7874
|
-
/* @__PURE__ */
|
|
8233
|
+
return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-game": "daily-quiz", "data-testid": "game-screen-daily-quiz", children: [
|
|
8234
|
+
/* @__PURE__ */ jsx83(GameHeader, { title, eyebrow: s.questionOf(page + 1, total), onBack, backLabel: ui.back }),
|
|
8235
|
+
/* @__PURE__ */ jsx83(SegmentProgress, { segments, ariaLabel: s.progressAria(page + 1, total) }),
|
|
8236
|
+
/* @__PURE__ */ jsx83("div", { className: "ss-g-body", children: current && /* @__PURE__ */ jsxs71(Fragment18, { children: [
|
|
8237
|
+
/* @__PURE__ */ jsx83("h3", { className: "ss-g-dq-stem", children: current.stem }),
|
|
8238
|
+
/* @__PURE__ */ jsx83("div", { className: "ss-g-dq-opts", children: current.options.map((opt, optIdx) => {
|
|
7875
8239
|
const selected = optIdx === selectedIdx;
|
|
7876
8240
|
const imagePath = current.optionImagePaths?.[optIdx] ?? void 0;
|
|
7877
8241
|
const playerName = opt;
|
|
7878
|
-
return /* @__PURE__ */
|
|
8242
|
+
return /* @__PURE__ */ jsxs71(
|
|
7879
8243
|
"button",
|
|
7880
8244
|
{
|
|
7881
8245
|
type: "button",
|
|
@@ -7884,25 +8248,25 @@ function DailyQuizGame({
|
|
|
7884
8248
|
disabled: submitting,
|
|
7885
8249
|
onClick: () => handleSelect(current.index, optIdx),
|
|
7886
8250
|
children: [
|
|
7887
|
-
current.optionImagePaths && /* @__PURE__ */
|
|
7888
|
-
/* @__PURE__ */
|
|
7889
|
-
/* @__PURE__ */
|
|
8251
|
+
current.optionImagePaths && /* @__PURE__ */ jsx83(PlayerAvatar, { name: playerName, imagePath, className: "ss-g-dq-opt-av" }),
|
|
8252
|
+
/* @__PURE__ */ jsx83("span", { className: "ss-g-dq-badge", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx83(IconCheck, {}) : String.fromCharCode(65 + optIdx) }),
|
|
8253
|
+
/* @__PURE__ */ jsx83(OptionName, { text: opt })
|
|
7890
8254
|
]
|
|
7891
8255
|
},
|
|
7892
8256
|
optIdx
|
|
7893
8257
|
);
|
|
7894
8258
|
}) })
|
|
7895
8259
|
] }) }),
|
|
7896
|
-
/* @__PURE__ */
|
|
7897
|
-
page > 0 && /* @__PURE__ */
|
|
7898
|
-
isLast ? /* @__PURE__ */
|
|
8260
|
+
/* @__PURE__ */ jsx83(FooterBar, { children: /* @__PURE__ */ jsxs71("div", { className: "ss-g-dq-nav", children: [
|
|
8261
|
+
page > 0 && /* @__PURE__ */ jsx83(GameButton, { variant: "outline", onClick: goPrev, disabled: submitting, children: s.previous }),
|
|
8262
|
+
isLast ? /* @__PURE__ */ jsx83(GameButton, { variant: "primary", block: true, onClick: handleSubmit, disabled: !currentAnswered || !allAnswered || submitting, children: submitting ? s.submitting : s.submit }) : /* @__PURE__ */ jsx83(GameButton, { variant: "primary", block: true, onClick: goNext, disabled: !currentAnswered || submitting, children: s.next })
|
|
7899
8263
|
] }) })
|
|
7900
8264
|
] });
|
|
7901
8265
|
}
|
|
7902
8266
|
|
|
7903
8267
|
// src/components/games/MatchdayPredictorGame.tsx
|
|
7904
|
-
import { useId as
|
|
7905
|
-
import { jsx as
|
|
8268
|
+
import { useId as useId7, useState as useState39 } from "react";
|
|
8269
|
+
import { jsx as jsx84, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
7906
8270
|
var SCORER_SEARCH_THRESHOLD = 9;
|
|
7907
8271
|
function parseClientState7(json) {
|
|
7908
8272
|
if (!json) return null;
|
|
@@ -7920,7 +8284,7 @@ function isLocked(kickoffUtc) {
|
|
|
7920
8284
|
}
|
|
7921
8285
|
}
|
|
7922
8286
|
function IconMinus() {
|
|
7923
|
-
return /* @__PURE__ */
|
|
8287
|
+
return /* @__PURE__ */ jsx84(
|
|
7924
8288
|
"svg",
|
|
7925
8289
|
{
|
|
7926
8290
|
width: 18,
|
|
@@ -7931,20 +8295,20 @@ function IconMinus() {
|
|
|
7931
8295
|
strokeWidth: 2.2,
|
|
7932
8296
|
strokeLinecap: "round",
|
|
7933
8297
|
"aria-hidden": "true",
|
|
7934
|
-
children: /* @__PURE__ */
|
|
8298
|
+
children: /* @__PURE__ */ jsx84("path", { d: "M5 12h14" })
|
|
7935
8299
|
}
|
|
7936
8300
|
);
|
|
7937
8301
|
}
|
|
7938
8302
|
function TeamBadge({ team, label }) {
|
|
7939
|
-
return /* @__PURE__ */
|
|
7940
|
-
/* @__PURE__ */
|
|
7941
|
-
/* @__PURE__ */
|
|
7942
|
-
/* @__PURE__ */
|
|
8303
|
+
return /* @__PURE__ */ jsxs72("div", { className: "ss-g-mp-team", children: [
|
|
8304
|
+
/* @__PURE__ */ jsx84(CrestShield, { name: team.name, size: 44 }),
|
|
8305
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-mp-team-name", children: team.name }),
|
|
8306
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-mp-team-side", children: label })
|
|
7943
8307
|
] });
|
|
7944
8308
|
}
|
|
7945
8309
|
function ScoreCard({ home, away, h, a, t, edit }) {
|
|
7946
|
-
const col = (side, team, value) => /* @__PURE__ */
|
|
7947
|
-
edit && /* @__PURE__ */
|
|
8310
|
+
const col = (side, team, value) => /* @__PURE__ */ jsxs72("div", { className: "ss-g-mp-col", children: [
|
|
8311
|
+
edit && /* @__PURE__ */ jsx84(
|
|
7948
8312
|
"button",
|
|
7949
8313
|
{
|
|
7950
8314
|
type: "button",
|
|
@@ -7952,11 +8316,11 @@ function ScoreCard({ home, away, h, a, t, edit }) {
|
|
|
7952
8316
|
"aria-label": t.goalsUp(team.name),
|
|
7953
8317
|
disabled: edit.disabled,
|
|
7954
8318
|
onClick: () => edit.onStep(side, 1),
|
|
7955
|
-
children: /* @__PURE__ */
|
|
8319
|
+
children: /* @__PURE__ */ jsx84(IconPlus, { size: 18 })
|
|
7956
8320
|
}
|
|
7957
8321
|
),
|
|
7958
|
-
/* @__PURE__ */
|
|
7959
|
-
edit && /* @__PURE__ */
|
|
8322
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-mp-digit", "data-testid": "mp-digit", "data-active": edit ? String(edit.active === side) : "false", children: value }),
|
|
8323
|
+
edit && /* @__PURE__ */ jsx84(
|
|
7960
8324
|
"button",
|
|
7961
8325
|
{
|
|
7962
8326
|
type: "button",
|
|
@@ -7964,27 +8328,27 @@ function ScoreCard({ home, away, h, a, t, edit }) {
|
|
|
7964
8328
|
"aria-label": t.goalsDown(team.name),
|
|
7965
8329
|
disabled: edit.disabled || value <= 0,
|
|
7966
8330
|
onClick: () => edit.onStep(side, -1),
|
|
7967
|
-
children: /* @__PURE__ */
|
|
8331
|
+
children: /* @__PURE__ */ jsx84(IconMinus, {})
|
|
7968
8332
|
}
|
|
7969
8333
|
)
|
|
7970
8334
|
] });
|
|
7971
|
-
return /* @__PURE__ */
|
|
7972
|
-
/* @__PURE__ */
|
|
7973
|
-
/* @__PURE__ */
|
|
8335
|
+
return /* @__PURE__ */ jsxs72("div", { className: "ss-g-mp-card", children: [
|
|
8336
|
+
/* @__PURE__ */ jsx84(TeamBadge, { team: home, label: t.home }),
|
|
8337
|
+
/* @__PURE__ */ jsxs72("div", { className: "ss-g-mp-scores", children: [
|
|
7974
8338
|
col("home", home, h),
|
|
7975
|
-
/* @__PURE__ */
|
|
8339
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-mp-dash", "aria-hidden": "true", children: "\u2013" }),
|
|
7976
8340
|
col("away", away, a)
|
|
7977
8341
|
] }),
|
|
7978
|
-
/* @__PURE__ */
|
|
8342
|
+
/* @__PURE__ */ jsx84(TeamBadge, { team: away, label: t.away })
|
|
7979
8343
|
] });
|
|
7980
8344
|
}
|
|
7981
8345
|
function OutcomeRow({ label, ok, detail, t }) {
|
|
7982
|
-
return /* @__PURE__ */
|
|
7983
|
-
/* @__PURE__ */
|
|
7984
|
-
/* @__PURE__ */
|
|
7985
|
-
ok ? /* @__PURE__ */
|
|
7986
|
-
/* @__PURE__ */
|
|
7987
|
-
detail ? /* @__PURE__ */
|
|
8346
|
+
return /* @__PURE__ */ jsxs72("li", { className: "ss-g-mp-row", "data-testid": "mp-row", "data-ok": String(ok), children: [
|
|
8347
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-mp-row-k", children: label }),
|
|
8348
|
+
/* @__PURE__ */ jsxs72("span", { className: "ss-g-mp-row-v", children: [
|
|
8349
|
+
ok ? /* @__PURE__ */ jsx84(IconCheck, {}) : /* @__PURE__ */ jsx84(IconClose, { size: 14 }),
|
|
8350
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-sr", children: ok ? t.correct : t.incorrect }),
|
|
8351
|
+
detail ? /* @__PURE__ */ jsx84("span", { className: "ss-g-mp-row-d", children: detail }) : null
|
|
7988
8352
|
] })
|
|
7989
8353
|
] });
|
|
7990
8354
|
}
|
|
@@ -7997,20 +8361,20 @@ function MatchdayPredictorGame({
|
|
|
7997
8361
|
onBack
|
|
7998
8362
|
}) {
|
|
7999
8363
|
const t = ui.games.predictor;
|
|
8000
|
-
const [homeScore, setHomeScore] =
|
|
8001
|
-
const [awayScore, setAwayScore] =
|
|
8002
|
-
const [firstScorerPlayerId, setFirstScorerPlayerId] =
|
|
8003
|
-
const [lastEdited, setLastEdited] =
|
|
8004
|
-
const [query, setQuery] =
|
|
8005
|
-
const searchId =
|
|
8364
|
+
const [homeScore, setHomeScore] = useState39(0);
|
|
8365
|
+
const [awayScore, setAwayScore] = useState39(0);
|
|
8366
|
+
const [firstScorerPlayerId, setFirstScorerPlayerId] = useState39(null);
|
|
8367
|
+
const [lastEdited, setLastEdited] = useState39("home");
|
|
8368
|
+
const [query, setQuery] = useState39("");
|
|
8369
|
+
const searchId = useId7();
|
|
8006
8370
|
const clientState = parseClientState7(result?.clientStateJson);
|
|
8007
8371
|
const alreadyPlayed = result?.alreadyPlayed === true;
|
|
8008
|
-
const header = /* @__PURE__ */
|
|
8372
|
+
const header = /* @__PURE__ */ jsx84(
|
|
8009
8373
|
GameHeader,
|
|
8010
8374
|
{
|
|
8011
8375
|
title: gameTitle({ gameId: "matchday-predictor" }, ui.games.titles),
|
|
8012
8376
|
eyebrow: config ? t.eyebrow(config.homeTeam.name, config.awayTeam.name) : void 0,
|
|
8013
|
-
right: config ? /* @__PURE__ */
|
|
8377
|
+
right: config ? /* @__PURE__ */ jsx84(Chip, { icon: /* @__PURE__ */ jsx84(IconLock, {}), children: ui.games.formatDayTime(config.kickoffUtc) }) : void 0,
|
|
8014
8378
|
onBack,
|
|
8015
8379
|
backLabel: ui.back
|
|
8016
8380
|
}
|
|
@@ -8018,10 +8382,10 @@ function MatchdayPredictorGame({
|
|
|
8018
8382
|
if (alreadyPlayed && clientState) {
|
|
8019
8383
|
if (!clientState.graded) {
|
|
8020
8384
|
const scorer = config?.scorerPool.find((p) => p.playerId === clientState.predictedFirstScorerPlayerId) ?? null;
|
|
8021
|
-
return /* @__PURE__ */
|
|
8385
|
+
return /* @__PURE__ */ jsxs72("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
|
|
8022
8386
|
header,
|
|
8023
|
-
/* @__PURE__ */
|
|
8024
|
-
config && /* @__PURE__ */
|
|
8387
|
+
/* @__PURE__ */ jsxs72("div", { className: "ss-g-body", children: [
|
|
8388
|
+
config && /* @__PURE__ */ jsx84(
|
|
8025
8389
|
ScoreCard,
|
|
8026
8390
|
{
|
|
8027
8391
|
home: config.homeTeam,
|
|
@@ -8031,7 +8395,7 @@ function MatchdayPredictorGame({
|
|
|
8031
8395
|
t
|
|
8032
8396
|
}
|
|
8033
8397
|
),
|
|
8034
|
-
/* @__PURE__ */
|
|
8398
|
+
/* @__PURE__ */ jsx84(
|
|
8035
8399
|
ResultCard,
|
|
8036
8400
|
{
|
|
8037
8401
|
tone: "neutral",
|
|
@@ -8048,28 +8412,28 @@ function MatchdayPredictorGame({
|
|
|
8048
8412
|
}
|
|
8049
8413
|
)
|
|
8050
8414
|
] }),
|
|
8051
|
-
/* @__PURE__ */
|
|
8415
|
+
/* @__PURE__ */ jsx84(FooterBar, { children: /* @__PURE__ */ jsx84("p", { className: "ss-g-mp-fun", children: t.forFun }) })
|
|
8052
8416
|
] });
|
|
8053
8417
|
}
|
|
8054
8418
|
const r = clientState.result;
|
|
8055
|
-
return /* @__PURE__ */
|
|
8419
|
+
return /* @__PURE__ */ jsxs72("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
|
|
8056
8420
|
header,
|
|
8057
|
-
/* @__PURE__ */
|
|
8058
|
-
config && /* @__PURE__ */
|
|
8059
|
-
/* @__PURE__ */
|
|
8060
|
-
/* @__PURE__ */
|
|
8061
|
-
/* @__PURE__ */
|
|
8062
|
-
/* @__PURE__ */
|
|
8063
|
-
!clientState.firstScorerVoid && /* @__PURE__ */
|
|
8421
|
+
/* @__PURE__ */ jsxs72("div", { className: "ss-g-body", children: [
|
|
8422
|
+
config && /* @__PURE__ */ jsx84(ScoreCard, { home: config.homeTeam, away: config.awayTeam, h: r.homeScore, a: r.awayScore, t }),
|
|
8423
|
+
/* @__PURE__ */ jsx84(ResultCard, { tone: "neutral", title: t.fullTime(r.homeScore, r.awayScore), onBack, ui }),
|
|
8424
|
+
/* @__PURE__ */ jsxs72("ul", { className: "ss-g-mp-rows", children: [
|
|
8425
|
+
/* @__PURE__ */ jsx84(OutcomeRow, { label: t.exactScore, ok: clientState.exactScoreCorrect, t }),
|
|
8426
|
+
/* @__PURE__ */ jsx84(OutcomeRow, { label: t.outcome, ok: clientState.outcomeCorrect, t }),
|
|
8427
|
+
!clientState.firstScorerVoid && /* @__PURE__ */ jsx84(OutcomeRow, { label: t.firstScorerRow, ok: clientState.firstScorerCorrect, detail: r.firstScorerName, t })
|
|
8064
8428
|
] })
|
|
8065
8429
|
] }),
|
|
8066
|
-
/* @__PURE__ */
|
|
8430
|
+
/* @__PURE__ */ jsx84(FooterBar, { children: /* @__PURE__ */ jsx84("p", { className: "ss-g-mp-fun", children: t.forFun }) })
|
|
8067
8431
|
] });
|
|
8068
8432
|
}
|
|
8069
8433
|
if (!config) {
|
|
8070
|
-
return /* @__PURE__ */
|
|
8434
|
+
return /* @__PURE__ */ jsxs72("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
|
|
8071
8435
|
header,
|
|
8072
|
-
/* @__PURE__ */
|
|
8436
|
+
/* @__PURE__ */ jsx84("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
|
|
8073
8437
|
] });
|
|
8074
8438
|
}
|
|
8075
8439
|
const locked = isLocked(config.kickoffUtc);
|
|
@@ -8093,10 +8457,10 @@ function MatchdayPredictorGame({
|
|
|
8093
8457
|
const showSearch = pool.length > SCORER_SEARCH_THRESHOLD;
|
|
8094
8458
|
const q = query.trim().toLowerCase();
|
|
8095
8459
|
const visible = showSearch && q ? pool.filter((p) => p.playerName.toLowerCase().includes(q)) : pool;
|
|
8096
|
-
return /* @__PURE__ */
|
|
8460
|
+
return /* @__PURE__ */ jsxs72("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
|
|
8097
8461
|
header,
|
|
8098
|
-
/* @__PURE__ */
|
|
8099
|
-
/* @__PURE__ */
|
|
8462
|
+
/* @__PURE__ */ jsxs72("div", { className: "ss-g-body", children: [
|
|
8463
|
+
/* @__PURE__ */ jsx84(
|
|
8100
8464
|
ScoreCard,
|
|
8101
8465
|
{
|
|
8102
8466
|
home: config.homeTeam,
|
|
@@ -8107,12 +8471,12 @@ function MatchdayPredictorGame({
|
|
|
8107
8471
|
edit: { disabled, active: lastEdited, onStep: step }
|
|
8108
8472
|
}
|
|
8109
8473
|
),
|
|
8110
|
-
pool.length > 0 && /* @__PURE__ */
|
|
8111
|
-
/* @__PURE__ */
|
|
8112
|
-
/* @__PURE__ */
|
|
8113
|
-
/* @__PURE__ */
|
|
8474
|
+
pool.length > 0 && /* @__PURE__ */ jsxs72("section", { className: "ss-g-mp-scorer", children: [
|
|
8475
|
+
/* @__PURE__ */ jsxs72("div", { className: "ss-g-mp-sec-head", children: [
|
|
8476
|
+
/* @__PURE__ */ jsx84("h3", { children: t.firstScorer }),
|
|
8477
|
+
/* @__PURE__ */ jsx84("span", { children: t.optional })
|
|
8114
8478
|
] }),
|
|
8115
|
-
showSearch && /* @__PURE__ */
|
|
8479
|
+
showSearch && /* @__PURE__ */ jsx84(
|
|
8116
8480
|
SearchField,
|
|
8117
8481
|
{
|
|
8118
8482
|
id: searchId,
|
|
@@ -8124,9 +8488,9 @@ function MatchdayPredictorGame({
|
|
|
8124
8488
|
disabled
|
|
8125
8489
|
}
|
|
8126
8490
|
),
|
|
8127
|
-
/* @__PURE__ */
|
|
8491
|
+
/* @__PURE__ */ jsx84("div", { className: "ss-g-mp-grid", children: visible.map((p) => {
|
|
8128
8492
|
const selected = firstScorerPlayerId === p.playerId;
|
|
8129
|
-
return /* @__PURE__ */
|
|
8493
|
+
return /* @__PURE__ */ jsxs72(
|
|
8130
8494
|
"button",
|
|
8131
8495
|
{
|
|
8132
8496
|
type: "button",
|
|
@@ -8136,15 +8500,15 @@ function MatchdayPredictorGame({
|
|
|
8136
8500
|
disabled,
|
|
8137
8501
|
onClick: () => setFirstScorerPlayerId((id) => id === p.playerId ? null : p.playerId),
|
|
8138
8502
|
children: [
|
|
8139
|
-
selected && /* @__PURE__ */
|
|
8140
|
-
/* @__PURE__ */
|
|
8141
|
-
/* @__PURE__ */
|
|
8503
|
+
selected && /* @__PURE__ */ jsx84("span", { className: "ss-g-mp-pcheck", children: /* @__PURE__ */ jsx84(IconCheck, { size: 12 }) }),
|
|
8504
|
+
/* @__PURE__ */ jsx84(Silhouette, { size: 52, variant: selected ? "selected" : "default" }),
|
|
8505
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-mp-pname", children: splitName(p.playerName).last })
|
|
8142
8506
|
]
|
|
8143
8507
|
},
|
|
8144
8508
|
p.playerId
|
|
8145
8509
|
);
|
|
8146
8510
|
}) }),
|
|
8147
|
-
/* @__PURE__ */
|
|
8511
|
+
/* @__PURE__ */ jsxs72(
|
|
8148
8512
|
"button",
|
|
8149
8513
|
{
|
|
8150
8514
|
type: "button",
|
|
@@ -8153,24 +8517,24 @@ function MatchdayPredictorGame({
|
|
|
8153
8517
|
disabled,
|
|
8154
8518
|
onClick: () => setFirstScorerPlayerId(null),
|
|
8155
8519
|
children: [
|
|
8156
|
-
/* @__PURE__ */
|
|
8520
|
+
/* @__PURE__ */ jsx84("span", { className: "ss-g-mp-radio", "aria-hidden": "true" }),
|
|
8157
8521
|
t.noScorer
|
|
8158
8522
|
]
|
|
8159
8523
|
}
|
|
8160
8524
|
)
|
|
8161
8525
|
] }),
|
|
8162
|
-
locked && /* @__PURE__ */
|
|
8526
|
+
locked && /* @__PURE__ */ jsx84("p", { className: "ss-g-mp-closed", children: t.closed })
|
|
8163
8527
|
] }),
|
|
8164
|
-
/* @__PURE__ */
|
|
8165
|
-
/* @__PURE__ */
|
|
8166
|
-
/* @__PURE__ */
|
|
8528
|
+
/* @__PURE__ */ jsxs72(FooterBar, { children: [
|
|
8529
|
+
/* @__PURE__ */ jsx84(GameButton, { variant: "primary", block: true, disabled, onClick: handleSubmit, children: submitting ? t.saving : t.save }),
|
|
8530
|
+
/* @__PURE__ */ jsx84("p", { className: "ss-g-mp-fun", children: t.forFun })
|
|
8167
8531
|
] })
|
|
8168
8532
|
] });
|
|
8169
8533
|
}
|
|
8170
8534
|
|
|
8171
8535
|
// src/components/games/StartingXiGame.tsx
|
|
8172
|
-
import { useId as
|
|
8173
|
-
import { Fragment as Fragment19, jsx as
|
|
8536
|
+
import { useId as useId8, useState as useState40 } from "react";
|
|
8537
|
+
import { Fragment as Fragment19, jsx as jsx85, jsxs as jsxs73 } from "react/jsx-runtime";
|
|
8174
8538
|
var POINTS_PER_STARTER = 8;
|
|
8175
8539
|
var XI_SIZE = 11;
|
|
8176
8540
|
var DEFAULT_FORMATION = "4-3-3";
|
|
@@ -8213,26 +8577,26 @@ function StartingXiGame({
|
|
|
8213
8577
|
lockAtUtc
|
|
8214
8578
|
}) {
|
|
8215
8579
|
const t = ui.games.startingXi;
|
|
8216
|
-
const [slotPlayers, setSlotPlayers] =
|
|
8217
|
-
const [active, setActive] =
|
|
8218
|
-
const [query, setQuery] =
|
|
8219
|
-
const searchId =
|
|
8580
|
+
const [slotPlayers, setSlotPlayers] = useState40(() => Array(XI_SIZE).fill(null));
|
|
8581
|
+
const [active, setActive] = useState40(0);
|
|
8582
|
+
const [query, setQuery] = useState40("");
|
|
8583
|
+
const searchId = useId8();
|
|
8220
8584
|
const clientState = parseClientState8(result?.clientStateJson);
|
|
8221
8585
|
const alreadyPlayed = result?.alreadyPlayed === true;
|
|
8222
|
-
const header = /* @__PURE__ */
|
|
8586
|
+
const header = /* @__PURE__ */ jsx85(
|
|
8223
8587
|
GameHeader,
|
|
8224
8588
|
{
|
|
8225
8589
|
title: gameTitle({ gameId: "starting-xi" }, ui.games.titles),
|
|
8226
8590
|
eyebrow: t.eyebrow,
|
|
8227
|
-
right: /* @__PURE__ */
|
|
8591
|
+
right: /* @__PURE__ */ jsx85(Chip, { variant: "accent", children: t.perStarter(POINTS_PER_STARTER) }),
|
|
8228
8592
|
onBack,
|
|
8229
8593
|
backLabel: ui.back
|
|
8230
8594
|
}
|
|
8231
8595
|
);
|
|
8232
8596
|
function statusScreen(title, score) {
|
|
8233
|
-
return /* @__PURE__ */
|
|
8597
|
+
return /* @__PURE__ */ jsxs73("div", { className: "ss-g-screen", "data-game": "starting-xi", "data-testid": "game-screen-starting-xi", children: [
|
|
8234
8598
|
header,
|
|
8235
|
-
/* @__PURE__ */
|
|
8599
|
+
/* @__PURE__ */ jsx85("div", { className: "ss-g-body", children: /* @__PURE__ */ jsx85(ResultCard, { tone: "neutral", title, score, onBack, ui }) })
|
|
8236
8600
|
] });
|
|
8237
8601
|
}
|
|
8238
8602
|
if (alreadyPlayed) {
|
|
@@ -8241,9 +8605,9 @@ function StartingXiGame({
|
|
|
8241
8605
|
if (clientState.status === "graded") return statusScreen(t.gradedLine(clientState.correctCount), clientState.score);
|
|
8242
8606
|
}
|
|
8243
8607
|
if (!config) {
|
|
8244
|
-
return /* @__PURE__ */
|
|
8608
|
+
return /* @__PURE__ */ jsxs73("div", { className: "ss-g-screen", "data-game": "starting-xi", "data-testid": "game-screen-starting-xi", children: [
|
|
8245
8609
|
header,
|
|
8246
|
-
/* @__PURE__ */
|
|
8610
|
+
/* @__PURE__ */ jsx85("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
|
|
8247
8611
|
] });
|
|
8248
8612
|
}
|
|
8249
8613
|
const { formation, slots } = formationSlots(config.formation);
|
|
@@ -8278,27 +8642,27 @@ function StartingXiGame({
|
|
|
8278
8642
|
onSubmit(JSON.stringify({ predictedPlayerIds: slotPlayers }));
|
|
8279
8643
|
}
|
|
8280
8644
|
const segments = slotPlayers.map((p) => p !== null ? "current" : "todo");
|
|
8281
|
-
return /* @__PURE__ */
|
|
8645
|
+
return /* @__PURE__ */ jsxs73("div", { className: "ss-g-screen", "data-game": "starting-xi", "data-testid": "game-screen-starting-xi", children: [
|
|
8282
8646
|
header,
|
|
8283
|
-
/* @__PURE__ */
|
|
8647
|
+
/* @__PURE__ */ jsx85(
|
|
8284
8648
|
SegmentProgress,
|
|
8285
8649
|
{
|
|
8286
8650
|
segments,
|
|
8287
8651
|
ariaLabel: t.picked(pickedCount),
|
|
8288
8652
|
leftLabel: t.picked(pickedCount),
|
|
8289
8653
|
rightLabel: t.toGo(XI_SIZE - pickedCount),
|
|
8290
|
-
right: /* @__PURE__ */
|
|
8654
|
+
right: /* @__PURE__ */ jsx85(Chip, { children: formation })
|
|
8291
8655
|
}
|
|
8292
8656
|
),
|
|
8293
|
-
/* @__PURE__ */
|
|
8294
|
-
/* @__PURE__ */
|
|
8295
|
-
/* @__PURE__ */
|
|
8657
|
+
/* @__PURE__ */ jsxs73("div", { className: "ss-g-body", children: [
|
|
8658
|
+
/* @__PURE__ */ jsxs73("div", { className: "ss-g-xi-pitch", children: [
|
|
8659
|
+
/* @__PURE__ */ jsx85(PitchSvg, { variant: "half" }),
|
|
8296
8660
|
slots.map((s) => {
|
|
8297
8661
|
const playerId = slotPlayers[s.index] ?? null;
|
|
8298
8662
|
const player = playerId !== null ? byId.get(playerId) ?? null : null;
|
|
8299
8663
|
const name = player?.playerName ?? "";
|
|
8300
8664
|
const state = player ? "filled" : active === s.index ? "active" : "empty";
|
|
8301
|
-
return /* @__PURE__ */
|
|
8665
|
+
return /* @__PURE__ */ jsxs73(
|
|
8302
8666
|
"button",
|
|
8303
8667
|
{
|
|
8304
8668
|
type: "button",
|
|
@@ -8310,21 +8674,21 @@ function StartingXiGame({
|
|
|
8310
8674
|
disabled: submitting,
|
|
8311
8675
|
onClick: () => tapSlot(s.index),
|
|
8312
8676
|
children: [
|
|
8313
|
-
/* @__PURE__ */
|
|
8314
|
-
/* @__PURE__ */
|
|
8677
|
+
/* @__PURE__ */ jsx85("span", { className: "ss-g-xi-ring", "aria-hidden": "true", children: player ? player.jerseyNumber ?? "" : /* @__PURE__ */ jsx85(IconPlus, { size: 18 }) }),
|
|
8678
|
+
/* @__PURE__ */ jsx85("span", { className: "ss-g-xi-tag", "aria-hidden": "true", children: player ? splitName(name).last : s.label })
|
|
8315
8679
|
]
|
|
8316
8680
|
},
|
|
8317
8681
|
s.index
|
|
8318
8682
|
);
|
|
8319
8683
|
})
|
|
8320
8684
|
] }),
|
|
8321
|
-
/* @__PURE__ */
|
|
8322
|
-
/* @__PURE__ */
|
|
8323
|
-
/* @__PURE__ */
|
|
8324
|
-
/* @__PURE__ */
|
|
8325
|
-
] }) : /* @__PURE__ */
|
|
8326
|
-
activeSlot && /* @__PURE__ */
|
|
8327
|
-
/* @__PURE__ */
|
|
8685
|
+
/* @__PURE__ */ jsxs73("div", { className: "ss-g-xi-picker", children: [
|
|
8686
|
+
/* @__PURE__ */ jsx85("div", { className: "ss-g-xi-picker-head", children: activeSlot ? /* @__PURE__ */ jsxs73(Fragment19, { children: [
|
|
8687
|
+
/* @__PURE__ */ jsx85(Chip, { variant: "badge", children: activeSlot.label }),
|
|
8688
|
+
/* @__PURE__ */ jsx85("strong", { children: t.pickFor(activeSlot.label) })
|
|
8689
|
+
] }) : /* @__PURE__ */ jsx85("strong", { children: t.allPicked }) }),
|
|
8690
|
+
activeSlot && /* @__PURE__ */ jsxs73(Fragment19, { children: [
|
|
8691
|
+
/* @__PURE__ */ jsx85(
|
|
8328
8692
|
SearchField,
|
|
8329
8693
|
{
|
|
8330
8694
|
id: searchId,
|
|
@@ -8336,18 +8700,18 @@ function StartingXiGame({
|
|
|
8336
8700
|
disabled: submitting
|
|
8337
8701
|
}
|
|
8338
8702
|
),
|
|
8339
|
-
/* @__PURE__ */
|
|
8340
|
-
/* @__PURE__ */
|
|
8341
|
-
/* @__PURE__ */
|
|
8342
|
-
/* @__PURE__ */
|
|
8703
|
+
/* @__PURE__ */ jsx85("ul", { className: "ss-g-xi-list", children: available.map((p) => /* @__PURE__ */ jsx85("li", { children: /* @__PURE__ */ jsxs73("button", { type: "button", className: "ss-g-xi-opt", disabled: submitting, onClick: () => pick(p.playerId), children: [
|
|
8704
|
+
/* @__PURE__ */ jsx85("span", { className: "ss-g-xi-opt-no", "aria-hidden": "true", children: p.jerseyNumber ?? "" }),
|
|
8705
|
+
/* @__PURE__ */ jsx85("span", { className: "ss-g-xi-opt-name", children: p.playerName }),
|
|
8706
|
+
/* @__PURE__ */ jsx85("span", { className: "ss-g-xi-opt-pos", children: p.positionName })
|
|
8343
8707
|
] }) }, p.playerId)) })
|
|
8344
8708
|
] })
|
|
8345
8709
|
] })
|
|
8346
8710
|
] }),
|
|
8347
|
-
/* @__PURE__ */
|
|
8348
|
-
/* @__PURE__ */
|
|
8349
|
-
/* @__PURE__ */
|
|
8350
|
-
/* @__PURE__ */
|
|
8711
|
+
/* @__PURE__ */ jsxs73(FooterBar, { children: [
|
|
8712
|
+
/* @__PURE__ */ jsx85(GameButton, { variant: "primary", block: true, disabled: !canSubmit, onClick: handleSubmit, children: submitting ? t.submitting : t.submit }),
|
|
8713
|
+
/* @__PURE__ */ jsxs73("p", { className: "ss-g-xi-lock", children: [
|
|
8714
|
+
/* @__PURE__ */ jsx85(IconLock, {}),
|
|
8351
8715
|
lockAtUtc ? t.locksAt(ui.games.formatDayTime(lockAtUtc)) : t.locksSoon
|
|
8352
8716
|
] })
|
|
8353
8717
|
] })
|
|
@@ -8355,8 +8719,8 @@ function StartingXiGame({
|
|
|
8355
8719
|
}
|
|
8356
8720
|
|
|
8357
8721
|
// src/components/games/StatLadderGame.tsx
|
|
8358
|
-
import { useId as
|
|
8359
|
-
import { jsx as
|
|
8722
|
+
import { useId as useId9, useState as useState41 } from "react";
|
|
8723
|
+
import { jsx as jsx86, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
8360
8724
|
function ladderClue(ladder) {
|
|
8361
8725
|
const mystery = ladder.find((r) => r.rank === 2);
|
|
8362
8726
|
if (!mystery) return null;
|
|
@@ -8378,9 +8742,9 @@ function parseClientState9(json) {
|
|
|
8378
8742
|
}
|
|
8379
8743
|
function NameStack({ name }) {
|
|
8380
8744
|
const { first, last } = splitName(name);
|
|
8381
|
-
return /* @__PURE__ */
|
|
8382
|
-
first && /* @__PURE__ */
|
|
8383
|
-
/* @__PURE__ */
|
|
8745
|
+
return /* @__PURE__ */ jsxs74("span", { className: "ss-g-sl-name", children: [
|
|
8746
|
+
first && /* @__PURE__ */ jsx86("small", { children: `${first[0]}.` }),
|
|
8747
|
+
/* @__PURE__ */ jsx86("b", { children: last })
|
|
8384
8748
|
] });
|
|
8385
8749
|
}
|
|
8386
8750
|
function StatLadderGame({
|
|
@@ -8392,16 +8756,16 @@ function StatLadderGame({
|
|
|
8392
8756
|
onBack
|
|
8393
8757
|
}) {
|
|
8394
8758
|
const t = ui.games.statLadder;
|
|
8395
|
-
const [query, setQuery] =
|
|
8396
|
-
const [selectedId, setSelectedId] =
|
|
8397
|
-
const searchId =
|
|
8759
|
+
const [query, setQuery] = useState41("");
|
|
8760
|
+
const [selectedId, setSelectedId] = useState41(null);
|
|
8761
|
+
const searchId = useId9();
|
|
8398
8762
|
const clientState = parseClientState9(result?.clientStateJson);
|
|
8399
8763
|
const revealed = clientState != null;
|
|
8400
|
-
const header = /* @__PURE__ */
|
|
8764
|
+
const header = /* @__PURE__ */ jsx86(GameHeader, { title: gameTitle({ gameId: "stat-ladder" }, ui.games.titles), eyebrow: t.eyebrow, onBack, backLabel: ui.back });
|
|
8401
8765
|
if (!config) {
|
|
8402
|
-
return /* @__PURE__ */
|
|
8766
|
+
return /* @__PURE__ */ jsxs74("div", { className: "ss-g-screen", "data-game": "stat-ladder", "data-testid": "game-screen-stat-ladder", children: [
|
|
8403
8767
|
header,
|
|
8404
|
-
/* @__PURE__ */
|
|
8768
|
+
/* @__PURE__ */ jsx86("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
|
|
8405
8769
|
] });
|
|
8406
8770
|
}
|
|
8407
8771
|
const question = t.question(config.statLabel);
|
|
@@ -8413,45 +8777,45 @@ function StatLadderGame({
|
|
|
8413
8777
|
if (selectedId === null || submitting || revealed) return;
|
|
8414
8778
|
onSubmit(JSON.stringify({ guessedPlayerId: selectedId }));
|
|
8415
8779
|
}
|
|
8416
|
-
return /* @__PURE__ */
|
|
8780
|
+
return /* @__PURE__ */ jsxs74("div", { className: "ss-g-screen", "data-game": "stat-ladder", "data-testid": "game-screen-stat-ladder", children: [
|
|
8417
8781
|
header,
|
|
8418
|
-
/* @__PURE__ */
|
|
8419
|
-
!revealed && /* @__PURE__ */
|
|
8420
|
-
/* @__PURE__ */
|
|
8421
|
-
/* @__PURE__ */
|
|
8422
|
-
/* @__PURE__ */
|
|
8782
|
+
/* @__PURE__ */ jsxs74("div", { className: "ss-g-body", children: [
|
|
8783
|
+
!revealed && /* @__PURE__ */ jsx86(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed: 0, ui }),
|
|
8784
|
+
/* @__PURE__ */ jsxs74("div", { className: "ss-g-sl-prompt", children: [
|
|
8785
|
+
/* @__PURE__ */ jsx86(Chip, { variant: "accent", icon: /* @__PURE__ */ jsx86(IconShield, { size: 14 }), className: "ss-g-sl-stat", children: config.statLabel }),
|
|
8786
|
+
/* @__PURE__ */ jsxs74("h3", { className: "ss-g-sl-q", children: [
|
|
8423
8787
|
question.pre,
|
|
8424
|
-
/* @__PURE__ */
|
|
8788
|
+
/* @__PURE__ */ jsx86("em", { children: question.emph }),
|
|
8425
8789
|
question.post
|
|
8426
8790
|
] })
|
|
8427
8791
|
] }),
|
|
8428
|
-
/* @__PURE__ */
|
|
8429
|
-
(rung) => rung.rank === 2 ? /* @__PURE__ */
|
|
8792
|
+
/* @__PURE__ */ jsx86("ol", { className: "ss-g-sl-rungs", children: rungs.map(
|
|
8793
|
+
(rung) => rung.rank === 2 ? /* @__PURE__ */ jsxs74(
|
|
8430
8794
|
"li",
|
|
8431
8795
|
{
|
|
8432
8796
|
className: "ss-g-sl-rung ss-g-sl-rung--mystery",
|
|
8433
8797
|
"data-testid": "sl-mystery-rung",
|
|
8434
8798
|
"data-result": revealed ? clientState.isCorrect ? "correct" : "wrong" : void 0,
|
|
8435
8799
|
children: [
|
|
8436
|
-
/* @__PURE__ */
|
|
8437
|
-
revealed ? /* @__PURE__ */
|
|
8438
|
-
revealed ? /* @__PURE__ */
|
|
8439
|
-
/* @__PURE__ */
|
|
8800
|
+
/* @__PURE__ */ jsx86("span", { className: "ss-g-sl-rank", children: "2" }),
|
|
8801
|
+
revealed ? /* @__PURE__ */ jsx86(PlayerAvatar, { name: clientState.revealedRank2.playerName, className: "ss-g-sl-av" }) : /* @__PURE__ */ jsx86(Silhouette, { size: 52, variant: "mystery" }),
|
|
8802
|
+
revealed ? /* @__PURE__ */ jsx86(NameStack, { name: clientState.revealedRank2.playerName }) : /* @__PURE__ */ jsx86("span", { className: "ss-g-sl-who", children: t.whoSecond }),
|
|
8803
|
+
/* @__PURE__ */ jsx86("span", { className: "ss-g-sl-val ss-g-sl-val--mystery", children: rung.statValue })
|
|
8440
8804
|
]
|
|
8441
8805
|
},
|
|
8442
8806
|
rung.rank
|
|
8443
|
-
) : /* @__PURE__ */
|
|
8444
|
-
/* @__PURE__ */
|
|
8445
|
-
/* @__PURE__ */
|
|
8446
|
-
/* @__PURE__ */
|
|
8447
|
-
/* @__PURE__ */
|
|
8807
|
+
) : /* @__PURE__ */ jsxs74("li", { className: "ss-g-sl-rung", children: [
|
|
8808
|
+
/* @__PURE__ */ jsx86("span", { className: "ss-g-sl-rank", children: rung.rank }),
|
|
8809
|
+
/* @__PURE__ */ jsx86(PlayerAvatar, { name: rung.playerName ?? "?", className: "ss-g-sl-av" }),
|
|
8810
|
+
/* @__PURE__ */ jsx86(NameStack, { name: rung.playerName ?? "?" }),
|
|
8811
|
+
/* @__PURE__ */ jsx86("span", { className: "ss-g-sl-val", children: rung.statValue })
|
|
8448
8812
|
] }, rung.rank)
|
|
8449
8813
|
) }),
|
|
8450
|
-
clue && /* @__PURE__ */
|
|
8451
|
-
/* @__PURE__ */
|
|
8452
|
-
/* @__PURE__ */
|
|
8814
|
+
clue && /* @__PURE__ */ jsxs74("p", { className: "ss-g-sl-clue", children: [
|
|
8815
|
+
/* @__PURE__ */ jsx86(IconBulb, {}),
|
|
8816
|
+
/* @__PURE__ */ jsx86("span", { children: t.clue(clue, config.statLabel) })
|
|
8453
8817
|
] }),
|
|
8454
|
-
!revealed && /* @__PURE__ */
|
|
8818
|
+
!revealed && /* @__PURE__ */ jsx86("ul", { className: "ss-g-sl-pool", children: pool.map((p) => /* @__PURE__ */ jsx86("li", { children: /* @__PURE__ */ jsxs74(
|
|
8455
8819
|
"button",
|
|
8456
8820
|
{
|
|
8457
8821
|
type: "button",
|
|
@@ -8464,13 +8828,13 @@ function StatLadderGame({
|
|
|
8464
8828
|
setQuery(p.playerName);
|
|
8465
8829
|
},
|
|
8466
8830
|
children: [
|
|
8467
|
-
/* @__PURE__ */
|
|
8468
|
-
/* @__PURE__ */
|
|
8469
|
-
selectedId === p.playerId && /* @__PURE__ */
|
|
8831
|
+
/* @__PURE__ */ jsx86(PlayerAvatar, { name: p.playerName, className: "ss-g-sl-opt-av" }),
|
|
8832
|
+
/* @__PURE__ */ jsx86("span", { className: "ss-g-sl-opt-name", children: p.playerName }),
|
|
8833
|
+
selectedId === p.playerId && /* @__PURE__ */ jsx86(IconCheck, {})
|
|
8470
8834
|
]
|
|
8471
8835
|
}
|
|
8472
8836
|
) }, p.playerId)) }),
|
|
8473
|
-
revealed && /* @__PURE__ */
|
|
8837
|
+
revealed && /* @__PURE__ */ jsx86(
|
|
8474
8838
|
ResultCard,
|
|
8475
8839
|
{
|
|
8476
8840
|
tone: clientState.isCorrect ? "win" : "lose",
|
|
@@ -8481,8 +8845,8 @@ function StatLadderGame({
|
|
|
8481
8845
|
}
|
|
8482
8846
|
)
|
|
8483
8847
|
] }),
|
|
8484
|
-
!revealed && /* @__PURE__ */
|
|
8485
|
-
/* @__PURE__ */
|
|
8848
|
+
!revealed && /* @__PURE__ */ jsx86(FooterBar, { children: /* @__PURE__ */ jsxs74("div", { className: "ss-g-sl-guess", children: [
|
|
8849
|
+
/* @__PURE__ */ jsx86(
|
|
8486
8850
|
SearchField,
|
|
8487
8851
|
{
|
|
8488
8852
|
id: searchId,
|
|
@@ -8497,13 +8861,13 @@ function StatLadderGame({
|
|
|
8497
8861
|
disabled: submitting
|
|
8498
8862
|
}
|
|
8499
8863
|
),
|
|
8500
|
-
/* @__PURE__ */
|
|
8864
|
+
/* @__PURE__ */ jsx86(GameButton, { variant: "primary", disabled: selectedId === null || submitting, onClick: guess, children: t.guess })
|
|
8501
8865
|
] }) })
|
|
8502
8866
|
] });
|
|
8503
8867
|
}
|
|
8504
8868
|
|
|
8505
8869
|
// src/components/games/FanMotmGame.tsx
|
|
8506
|
-
import { jsx as
|
|
8870
|
+
import { jsx as jsx87, jsxs as jsxs75 } from "react/jsx-runtime";
|
|
8507
8871
|
function parseClientState10(json) {
|
|
8508
8872
|
if (!json) return null;
|
|
8509
8873
|
try {
|
|
@@ -8524,20 +8888,20 @@ function FanMotmGame({
|
|
|
8524
8888
|
const clientState = parseClientState10(result?.clientStateJson);
|
|
8525
8889
|
const alreadyVoted = result?.alreadyPlayed === true;
|
|
8526
8890
|
const pickedId = clientState?.pickedPlayerId ?? null;
|
|
8527
|
-
const header = /* @__PURE__ */
|
|
8891
|
+
const header = /* @__PURE__ */ jsx87(
|
|
8528
8892
|
GameHeader,
|
|
8529
8893
|
{
|
|
8530
8894
|
title: t.title,
|
|
8531
8895
|
eyebrow: t.eyebrow,
|
|
8532
|
-
right: alreadyVoted ? /* @__PURE__ */
|
|
8896
|
+
right: alreadyVoted ? /* @__PURE__ */ jsx87(Chip, { variant: "success", icon: /* @__PURE__ */ jsx87(IconCheck, {}), children: t.voted }) : void 0,
|
|
8533
8897
|
onBack,
|
|
8534
8898
|
backLabel: ui.back
|
|
8535
8899
|
}
|
|
8536
8900
|
);
|
|
8537
8901
|
if (!config) {
|
|
8538
|
-
return /* @__PURE__ */
|
|
8902
|
+
return /* @__PURE__ */ jsxs75("div", { className: "ss-g-screen", "data-game": "fan-motm", "data-testid": "game-screen-fan-motm", children: [
|
|
8539
8903
|
header,
|
|
8540
|
-
/* @__PURE__ */
|
|
8904
|
+
/* @__PURE__ */ jsx87("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
|
|
8541
8905
|
] });
|
|
8542
8906
|
}
|
|
8543
8907
|
const picked = config.candidates.find((c) => c.playerId === pickedId) ?? null;
|
|
@@ -8545,12 +8909,12 @@ function FanMotmGame({
|
|
|
8545
8909
|
if (alreadyVoted || submitting) return;
|
|
8546
8910
|
onSubmit(JSON.stringify({ pickedPlayerId: candidateId }));
|
|
8547
8911
|
}
|
|
8548
|
-
return /* @__PURE__ */
|
|
8912
|
+
return /* @__PURE__ */ jsxs75("div", { className: "ss-g-screen", "data-game": "fan-motm", "data-testid": "game-screen-fan-motm", children: [
|
|
8549
8913
|
header,
|
|
8550
|
-
/* @__PURE__ */
|
|
8551
|
-
/* @__PURE__ */
|
|
8914
|
+
/* @__PURE__ */ jsxs75("div", { className: "ss-g-body", children: [
|
|
8915
|
+
/* @__PURE__ */ jsx87("ul", { className: "ss-g-motm-list", children: config.candidates.map((c) => {
|
|
8552
8916
|
const isVoted = alreadyVoted && pickedId === c.playerId;
|
|
8553
|
-
return /* @__PURE__ */
|
|
8917
|
+
return /* @__PURE__ */ jsx87("li", { children: /* @__PURE__ */ jsxs75(
|
|
8554
8918
|
"button",
|
|
8555
8919
|
{
|
|
8556
8920
|
type: "button",
|
|
@@ -8559,24 +8923,24 @@ function FanMotmGame({
|
|
|
8559
8923
|
disabled: alreadyVoted || submitting,
|
|
8560
8924
|
onClick: () => handleVote(c.playerId),
|
|
8561
8925
|
children: [
|
|
8562
|
-
/* @__PURE__ */
|
|
8563
|
-
/* @__PURE__ */
|
|
8564
|
-
isVoted && /* @__PURE__ */
|
|
8926
|
+
/* @__PURE__ */ jsx87(PlayerAvatar, { name: c.playerName, className: "ss-g-motm-av" }),
|
|
8927
|
+
/* @__PURE__ */ jsx87("span", { className: "ss-g-motm-name", children: c.playerName }),
|
|
8928
|
+
isVoted && /* @__PURE__ */ jsx87(Chip, { variant: "accent", className: "ss-g-motm-pill", children: t.yourVote })
|
|
8565
8929
|
]
|
|
8566
8930
|
}
|
|
8567
8931
|
) }, c.playerId);
|
|
8568
8932
|
}) }),
|
|
8569
|
-
alreadyVoted && picked && /* @__PURE__ */
|
|
8933
|
+
alreadyVoted && picked && /* @__PURE__ */ jsx87(ResultCard, { tone: "neutral", title: t.youVoted(picked.playerName), detail: t.thanks, onBack, ui })
|
|
8570
8934
|
] }),
|
|
8571
|
-
/* @__PURE__ */
|
|
8572
|
-
!alreadyVoted && /* @__PURE__ */
|
|
8573
|
-
/* @__PURE__ */
|
|
8935
|
+
/* @__PURE__ */ jsxs75(FooterBar, { children: [
|
|
8936
|
+
!alreadyVoted && /* @__PURE__ */ jsx87("p", { className: "ss-g-motm-foot", children: t.tapToVote }),
|
|
8937
|
+
/* @__PURE__ */ jsx87("p", { className: "ss-g-motm-fun", children: t.forFun })
|
|
8574
8938
|
] })
|
|
8575
8939
|
] });
|
|
8576
8940
|
}
|
|
8577
8941
|
|
|
8578
8942
|
// src/components/GameScreenHost.tsx
|
|
8579
|
-
import { jsx as
|
|
8943
|
+
import { jsx as jsx88 } from "react/jsx-runtime";
|
|
8580
8944
|
var FIXTURE_GAME_IDS = /* @__PURE__ */ new Set([
|
|
8581
8945
|
"matchday-predictor",
|
|
8582
8946
|
"starting-xi",
|
|
@@ -8600,8 +8964,8 @@ function GameScreenHost({
|
|
|
8600
8964
|
ui
|
|
8601
8965
|
}) {
|
|
8602
8966
|
const { gameId, fixtureId, gameDay = "", lockAtUtc = null } = selected;
|
|
8603
|
-
const [configJson, setConfigJson] =
|
|
8604
|
-
|
|
8967
|
+
const [configJson, setConfigJson] = useState42(null);
|
|
8968
|
+
useEffect24(() => {
|
|
8605
8969
|
setConfigJson(null);
|
|
8606
8970
|
if (!conversation) return;
|
|
8607
8971
|
let cancelled = false;
|
|
@@ -8624,12 +8988,12 @@ function GameScreenHost({
|
|
|
8624
8988
|
fixtureId: fixtureId || void 0,
|
|
8625
8989
|
locale: ui.games.lang
|
|
8626
8990
|
});
|
|
8627
|
-
|
|
8991
|
+
useEffect24(() => {
|
|
8628
8992
|
if (conversation) hydrate();
|
|
8629
8993
|
}, [conversation, gameId]);
|
|
8630
|
-
const hydrateRef =
|
|
8994
|
+
const hydrateRef = useRef21(hydrate);
|
|
8631
8995
|
hydrateRef.current = hydrate;
|
|
8632
|
-
|
|
8996
|
+
useEffect24(() => {
|
|
8633
8997
|
if (!FIXTURE_GAME_IDS.has(gameId)) return;
|
|
8634
8998
|
if (rawStatus !== "pending") return;
|
|
8635
8999
|
const timerId = setInterval(() => {
|
|
@@ -8652,7 +9016,7 @@ function GameScreenHost({
|
|
|
8652
9016
|
function renderScreen() {
|
|
8653
9017
|
switch (gameId) {
|
|
8654
9018
|
case "mystery-tiger":
|
|
8655
|
-
return /* @__PURE__ */
|
|
9019
|
+
return /* @__PURE__ */ jsx88(
|
|
8656
9020
|
MysteryTigerGame,
|
|
8657
9021
|
{
|
|
8658
9022
|
...sharedProps,
|
|
@@ -8660,7 +9024,7 @@ function GameScreenHost({
|
|
|
8660
9024
|
}
|
|
8661
9025
|
);
|
|
8662
9026
|
case "higher-or-lower":
|
|
8663
|
-
return /* @__PURE__ */
|
|
9027
|
+
return /* @__PURE__ */ jsx88(
|
|
8664
9028
|
HigherOrLowerGame,
|
|
8665
9029
|
{
|
|
8666
9030
|
...sharedProps,
|
|
@@ -8668,7 +9032,7 @@ function GameScreenHost({
|
|
|
8668
9032
|
}
|
|
8669
9033
|
);
|
|
8670
9034
|
case "career-path":
|
|
8671
|
-
return /* @__PURE__ */
|
|
9035
|
+
return /* @__PURE__ */ jsx88(
|
|
8672
9036
|
CareerPathGame,
|
|
8673
9037
|
{
|
|
8674
9038
|
...sharedProps,
|
|
@@ -8677,7 +9041,7 @@ function GameScreenHost({
|
|
|
8677
9041
|
);
|
|
8678
9042
|
case "beat-the-grid": {
|
|
8679
9043
|
const btgConfig = safeParseConfig(configJson);
|
|
8680
|
-
return /* @__PURE__ */
|
|
9044
|
+
return /* @__PURE__ */ jsx88(
|
|
8681
9045
|
BeatTheGridGame,
|
|
8682
9046
|
{
|
|
8683
9047
|
...sharedProps,
|
|
@@ -8687,7 +9051,7 @@ function GameScreenHost({
|
|
|
8687
9051
|
);
|
|
8688
9052
|
}
|
|
8689
9053
|
case "guess-the-xi":
|
|
8690
|
-
return /* @__PURE__ */
|
|
9054
|
+
return /* @__PURE__ */ jsx88(
|
|
8691
9055
|
GuessTheXiGame,
|
|
8692
9056
|
{
|
|
8693
9057
|
...sharedProps,
|
|
@@ -8695,7 +9059,7 @@ function GameScreenHost({
|
|
|
8695
9059
|
}
|
|
8696
9060
|
);
|
|
8697
9061
|
case "daily-quiz":
|
|
8698
|
-
return /* @__PURE__ */
|
|
9062
|
+
return /* @__PURE__ */ jsx88(
|
|
8699
9063
|
DailyQuizGame,
|
|
8700
9064
|
{
|
|
8701
9065
|
...sharedProps,
|
|
@@ -8703,7 +9067,7 @@ function GameScreenHost({
|
|
|
8703
9067
|
}
|
|
8704
9068
|
);
|
|
8705
9069
|
case "matchday-predictor":
|
|
8706
|
-
return /* @__PURE__ */
|
|
9070
|
+
return /* @__PURE__ */ jsx88(
|
|
8707
9071
|
MatchdayPredictorGame,
|
|
8708
9072
|
{
|
|
8709
9073
|
...sharedProps,
|
|
@@ -8711,7 +9075,7 @@ function GameScreenHost({
|
|
|
8711
9075
|
}
|
|
8712
9076
|
);
|
|
8713
9077
|
case "starting-xi":
|
|
8714
|
-
return /* @__PURE__ */
|
|
9078
|
+
return /* @__PURE__ */ jsx88(
|
|
8715
9079
|
StartingXiGame,
|
|
8716
9080
|
{
|
|
8717
9081
|
...sharedProps,
|
|
@@ -8719,7 +9083,7 @@ function GameScreenHost({
|
|
|
8719
9083
|
}
|
|
8720
9084
|
);
|
|
8721
9085
|
case "stat-ladder":
|
|
8722
|
-
return /* @__PURE__ */
|
|
9086
|
+
return /* @__PURE__ */ jsx88(
|
|
8723
9087
|
StatLadderGame,
|
|
8724
9088
|
{
|
|
8725
9089
|
...sharedProps,
|
|
@@ -8727,7 +9091,7 @@ function GameScreenHost({
|
|
|
8727
9091
|
}
|
|
8728
9092
|
);
|
|
8729
9093
|
case "fan-motm":
|
|
8730
|
-
return /* @__PURE__ */
|
|
9094
|
+
return /* @__PURE__ */ jsx88(
|
|
8731
9095
|
FanMotmGame,
|
|
8732
9096
|
{
|
|
8733
9097
|
...sharedProps,
|
|
@@ -8735,10 +9099,10 @@ function GameScreenHost({
|
|
|
8735
9099
|
}
|
|
8736
9100
|
);
|
|
8737
9101
|
default:
|
|
8738
|
-
return /* @__PURE__ */
|
|
9102
|
+
return /* @__PURE__ */ jsx88("div", { className: "ss-g-screen", "data-testid": `game-screen-${gameId}`, children: /* @__PURE__ */ jsx88(GameHeader, { title: gameTitle({ gameId }, ui.games.titles), onBack, backLabel: ui.back }) });
|
|
8739
9103
|
}
|
|
8740
9104
|
}
|
|
8741
|
-
return /* @__PURE__ */
|
|
9105
|
+
return /* @__PURE__ */ jsx88("div", { className: "ss-w-gscreen", "data-testid": "gscreen", "data-lock-at": lockAtUtc ?? void 0, children: renderScreen() });
|
|
8742
9106
|
}
|
|
8743
9107
|
|
|
8744
9108
|
// src/components/games/ui/fonts.ts
|
|
@@ -8755,7 +9119,7 @@ function ensureGamesFonts(doc = document) {
|
|
|
8755
9119
|
}
|
|
8756
9120
|
|
|
8757
9121
|
// src/components/GamesPanel.tsx
|
|
8758
|
-
import { jsx as
|
|
9122
|
+
import { jsx as jsx89 } from "react/jsx-runtime";
|
|
8759
9123
|
function GamesPanel({
|
|
8760
9124
|
loggedIn,
|
|
8761
9125
|
games,
|
|
@@ -8764,13 +9128,13 @@ function GamesPanel({
|
|
|
8764
9128
|
leaderboard,
|
|
8765
9129
|
refreshHub
|
|
8766
9130
|
}) {
|
|
8767
|
-
const [selected, setSelected] =
|
|
8768
|
-
|
|
9131
|
+
const [selected, setSelected] = useState43(null);
|
|
9132
|
+
useEffect25(() => {
|
|
8769
9133
|
ensureGamesFonts();
|
|
8770
9134
|
}, []);
|
|
8771
|
-
if (!loggedIn) return /* @__PURE__ */
|
|
9135
|
+
if (!loggedIn) return /* @__PURE__ */ jsx89(GamesLoginWall, { ui });
|
|
8772
9136
|
if (selected !== null) {
|
|
8773
|
-
return /* @__PURE__ */
|
|
9137
|
+
return /* @__PURE__ */ jsx89("div", { className: "ss-w-gscreen-wrap", lang: ui.games.lang, children: /* @__PURE__ */ jsx89(
|
|
8774
9138
|
GameScreenHost,
|
|
8775
9139
|
{
|
|
8776
9140
|
selected,
|
|
@@ -8784,7 +9148,7 @@ function GamesPanel({
|
|
|
8784
9148
|
}
|
|
8785
9149
|
) });
|
|
8786
9150
|
}
|
|
8787
|
-
return /* @__PURE__ */
|
|
9151
|
+
return /* @__PURE__ */ jsx89("div", { className: "ss-g-hub-wrap", "data-testid": "games-hub", lang: ui.games.lang, children: /* @__PURE__ */ jsx89(
|
|
8788
9152
|
GamesHub,
|
|
8789
9153
|
{
|
|
8790
9154
|
games,
|
|
@@ -8796,10 +9160,10 @@ function GamesPanel({
|
|
|
8796
9160
|
}
|
|
8797
9161
|
|
|
8798
9162
|
// src/components/Leaderboard.tsx
|
|
8799
|
-
import { useState as
|
|
9163
|
+
import { useState as useState44 } from "react";
|
|
8800
9164
|
|
|
8801
9165
|
// src/components/LeaderboardRow.tsx
|
|
8802
|
-
import { jsx as
|
|
9166
|
+
import { jsx as jsx90, jsxs as jsxs76 } from "react/jsx-runtime";
|
|
8803
9167
|
function formatPoints(n) {
|
|
8804
9168
|
return n.toLocaleString("en");
|
|
8805
9169
|
}
|
|
@@ -8808,14 +9172,14 @@ function LeaderboardWeeklyRow({
|
|
|
8808
9172
|
isMe
|
|
8809
9173
|
}) {
|
|
8810
9174
|
const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
|
|
8811
|
-
return /* @__PURE__ */
|
|
8812
|
-
/* @__PURE__ */
|
|
9175
|
+
return /* @__PURE__ */ jsxs76("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
|
|
9176
|
+
/* @__PURE__ */ jsxs76("span", { className: rankClass, children: [
|
|
8813
9177
|
"#",
|
|
8814
9178
|
row.rank
|
|
8815
9179
|
] }),
|
|
8816
|
-
/* @__PURE__ */
|
|
8817
|
-
/* @__PURE__ */
|
|
8818
|
-
row.currentStreak > 0 && /* @__PURE__ */
|
|
9180
|
+
/* @__PURE__ */ jsx90("span", { className: "ss-w-lb2-handle", children: row.handle }),
|
|
9181
|
+
/* @__PURE__ */ jsx90("span", { className: "ss-w-lb2-points", children: formatPoints(row.points) }),
|
|
9182
|
+
row.currentStreak > 0 && /* @__PURE__ */ jsxs76("span", { className: "ss-w-lb2-streak", children: [
|
|
8819
9183
|
"\u{1F525} ",
|
|
8820
9184
|
row.currentStreak
|
|
8821
9185
|
] })
|
|
@@ -8826,18 +9190,18 @@ function LeaderboardAllTimeRow({
|
|
|
8826
9190
|
isMe
|
|
8827
9191
|
}) {
|
|
8828
9192
|
const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
|
|
8829
|
-
return /* @__PURE__ */
|
|
8830
|
-
/* @__PURE__ */
|
|
9193
|
+
return /* @__PURE__ */ jsxs76("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
|
|
9194
|
+
/* @__PURE__ */ jsxs76("span", { className: rankClass, children: [
|
|
8831
9195
|
"#",
|
|
8832
9196
|
row.rank
|
|
8833
9197
|
] }),
|
|
8834
|
-
/* @__PURE__ */
|
|
8835
|
-
/* @__PURE__ */
|
|
9198
|
+
/* @__PURE__ */ jsx90("span", { className: "ss-w-lb2-handle", children: row.handle }),
|
|
9199
|
+
/* @__PURE__ */ jsx90("span", { className: "ss-w-lb2-points", children: formatPoints(row.allTimePoints) })
|
|
8836
9200
|
] });
|
|
8837
9201
|
}
|
|
8838
9202
|
|
|
8839
9203
|
// src/components/LeaderboardEmpty.tsx
|
|
8840
|
-
import { jsx as
|
|
9204
|
+
import { jsx as jsx91, jsxs as jsxs77 } from "react/jsx-runtime";
|
|
8841
9205
|
function LeaderboardEmpty({
|
|
8842
9206
|
segment,
|
|
8843
9207
|
lastWeek,
|
|
@@ -8846,48 +9210,48 @@ function LeaderboardEmpty({
|
|
|
8846
9210
|
ui
|
|
8847
9211
|
}) {
|
|
8848
9212
|
if (segment === "alltime") {
|
|
8849
|
-
return /* @__PURE__ */
|
|
8850
|
-
/* @__PURE__ */
|
|
8851
|
-
/* @__PURE__ */
|
|
9213
|
+
return /* @__PURE__ */ jsxs77("div", { className: "ss-w-lb-empty ss-w-lb-empty--alltime", children: [
|
|
9214
|
+
/* @__PURE__ */ jsx91("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: "\u{1F4CA}" }),
|
|
9215
|
+
/* @__PURE__ */ jsx91("p", { className: "ss-w-lb-empty-body", children: ui.leaderboardAllTimeEmpty })
|
|
8852
9216
|
] });
|
|
8853
9217
|
}
|
|
8854
9218
|
const fresh = lastWeek != null;
|
|
8855
9219
|
const title = fresh ? ui.leaderboardEmptyFreshTitle : ui.leaderboardEmptyColdTitle;
|
|
8856
9220
|
const body = fresh ? ui.leaderboardEmptyFreshBody : ui.leaderboardEmptyColdBody;
|
|
8857
|
-
return /* @__PURE__ */
|
|
8858
|
-
weeklyPrize && /* @__PURE__ */
|
|
8859
|
-
/* @__PURE__ */
|
|
8860
|
-
/* @__PURE__ */
|
|
9221
|
+
return /* @__PURE__ */ jsxs77("div", { className: "ss-w-lb-empty", children: [
|
|
9222
|
+
weeklyPrize && /* @__PURE__ */ jsxs77("div", { className: "ss-w-prize", children: [
|
|
9223
|
+
/* @__PURE__ */ jsx91("span", { className: "ss-w-prize-icon", "aria-hidden": "true", children: "\u{1F3C6}" }),
|
|
9224
|
+
/* @__PURE__ */ jsx91("div", { className: "ss-w-prize-body", children: /* @__PURE__ */ jsx91("span", { className: "ss-w-prize-text", children: weeklyPrize }) })
|
|
8861
9225
|
] }),
|
|
8862
|
-
/* @__PURE__ */
|
|
8863
|
-
/* @__PURE__ */
|
|
8864
|
-
/* @__PURE__ */
|
|
8865
|
-
/* @__PURE__ */
|
|
8866
|
-
onPlay && /* @__PURE__ */
|
|
9226
|
+
/* @__PURE__ */ jsxs77("div", { className: "ss-w-lb-empty-hero", children: [
|
|
9227
|
+
/* @__PURE__ */ jsx91("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: fresh ? "\u{1F3C6}" : "\u{1F3AE}" }),
|
|
9228
|
+
/* @__PURE__ */ jsx91("h4", { className: "ss-w-lb-empty-title", children: title }),
|
|
9229
|
+
/* @__PURE__ */ jsx91("p", { className: "ss-w-lb-empty-body", children: body }),
|
|
9230
|
+
onPlay && /* @__PURE__ */ jsx91("button", { type: "button", className: "ss-w-lb-empty-cta", onClick: onPlay, children: ui.leaderboardEmptyCta })
|
|
8867
9231
|
] }),
|
|
8868
|
-
fresh && lastWeek && /* @__PURE__ */
|
|
8869
|
-
/* @__PURE__ */
|
|
8870
|
-
/* @__PURE__ */
|
|
8871
|
-
/* @__PURE__ */
|
|
8872
|
-
/* @__PURE__ */
|
|
9232
|
+
fresh && lastWeek && /* @__PURE__ */ jsxs77("div", { className: "ss-w-lb-last", children: [
|
|
9233
|
+
/* @__PURE__ */ jsx91("span", { className: "ss-w-lb-last-label", children: ui.leaderboardLastWeekLabel }),
|
|
9234
|
+
/* @__PURE__ */ jsx91("span", { className: "ss-w-lb-last-champ", "aria-hidden": "true", children: "\u{1F947}" }),
|
|
9235
|
+
/* @__PURE__ */ jsx91("span", { className: "ss-w-lb-last-handle", children: lastWeek.handle }),
|
|
9236
|
+
/* @__PURE__ */ jsx91("span", { className: "ss-w-lb-last-points", children: formatPoints(lastWeek.points) })
|
|
8873
9237
|
] })
|
|
8874
9238
|
] });
|
|
8875
9239
|
}
|
|
8876
9240
|
|
|
8877
9241
|
// src/components/Leaderboard.tsx
|
|
8878
|
-
import { Fragment as Fragment20, jsx as
|
|
9242
|
+
import { Fragment as Fragment20, jsx as jsx92, jsxs as jsxs78 } from "react/jsx-runtime";
|
|
8879
9243
|
function Leaderboard({
|
|
8880
9244
|
data,
|
|
8881
9245
|
ui,
|
|
8882
9246
|
onPlay
|
|
8883
9247
|
}) {
|
|
8884
|
-
const [segment, setSegment] =
|
|
9248
|
+
const [segment, setSegment] = useState44("weekly");
|
|
8885
9249
|
const myRow = segment === "weekly" ? data.myWeeklyRow : data.myAllTimeRow;
|
|
8886
9250
|
const offBoard = myRow !== null && myRow !== void 0 && myRow.rank === -1;
|
|
8887
9251
|
const isEmpty = segment === "weekly" ? data.weeklyTop.length === 0 : data.allTimeTop.length === 0;
|
|
8888
|
-
return /* @__PURE__ */
|
|
8889
|
-
/* @__PURE__ */
|
|
8890
|
-
/* @__PURE__ */
|
|
9252
|
+
return /* @__PURE__ */ jsxs78("div", { className: "ss-w-lb2", children: [
|
|
9253
|
+
/* @__PURE__ */ jsxs78("div", { className: "ss-w-seg", children: [
|
|
9254
|
+
/* @__PURE__ */ jsx92(
|
|
8891
9255
|
"button",
|
|
8892
9256
|
{
|
|
8893
9257
|
type: "button",
|
|
@@ -8897,7 +9261,7 @@ function Leaderboard({
|
|
|
8897
9261
|
children: ui.leaderboardThisWeek
|
|
8898
9262
|
}
|
|
8899
9263
|
),
|
|
8900
|
-
/* @__PURE__ */
|
|
9264
|
+
/* @__PURE__ */ jsx92(
|
|
8901
9265
|
"button",
|
|
8902
9266
|
{
|
|
8903
9267
|
type: "button",
|
|
@@ -8908,7 +9272,7 @@ function Leaderboard({
|
|
|
8908
9272
|
}
|
|
8909
9273
|
)
|
|
8910
9274
|
] }),
|
|
8911
|
-
isEmpty ? /* @__PURE__ */
|
|
9275
|
+
isEmpty ? /* @__PURE__ */ jsx92(
|
|
8912
9276
|
LeaderboardEmpty,
|
|
8913
9277
|
{
|
|
8914
9278
|
segment,
|
|
@@ -8917,15 +9281,15 @@ function Leaderboard({
|
|
|
8917
9281
|
onPlay,
|
|
8918
9282
|
ui
|
|
8919
9283
|
}
|
|
8920
|
-
) : /* @__PURE__ */
|
|
8921
|
-
/* @__PURE__ */
|
|
9284
|
+
) : /* @__PURE__ */ jsxs78(Fragment20, { children: [
|
|
9285
|
+
/* @__PURE__ */ jsx92("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ jsx92(
|
|
8922
9286
|
LeaderboardWeeklyRow,
|
|
8923
9287
|
{
|
|
8924
9288
|
row,
|
|
8925
9289
|
isMe: row.operatorUserId === data.myWeeklyRow?.operatorUserId
|
|
8926
9290
|
},
|
|
8927
9291
|
row.operatorUserId
|
|
8928
|
-
)) : data.allTimeTop.map((row) => /* @__PURE__ */
|
|
9292
|
+
)) : data.allTimeTop.map((row) => /* @__PURE__ */ jsx92(
|
|
8929
9293
|
LeaderboardAllTimeRow,
|
|
8930
9294
|
{
|
|
8931
9295
|
row,
|
|
@@ -8933,18 +9297,18 @@ function Leaderboard({
|
|
|
8933
9297
|
},
|
|
8934
9298
|
row.operatorUserId
|
|
8935
9299
|
)) }),
|
|
8936
|
-
/* @__PURE__ */
|
|
8937
|
-
myRow != null && (offBoard ? /* @__PURE__ */
|
|
8938
|
-
segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */
|
|
8939
|
-
segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */
|
|
9300
|
+
/* @__PURE__ */ jsx92("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
|
|
9301
|
+
myRow != null && (offBoard ? /* @__PURE__ */ jsx92("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ jsxs78("div", { className: "ss-w-lb2-rows", children: [
|
|
9302
|
+
segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ jsx92(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
|
|
9303
|
+
segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ jsx92(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
|
|
8940
9304
|
] })),
|
|
8941
|
-
segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */
|
|
9305
|
+
segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */ jsx92("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ jsx92("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ jsx92("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
|
|
8942
9306
|
] })
|
|
8943
9307
|
] });
|
|
8944
9308
|
}
|
|
8945
9309
|
|
|
8946
9310
|
// src/components/LeaderboardPanel.tsx
|
|
8947
|
-
import { jsx as
|
|
9311
|
+
import { jsx as jsx93 } from "react/jsx-runtime";
|
|
8948
9312
|
var EMPTY_PAYLOAD = {
|
|
8949
9313
|
week: "",
|
|
8950
9314
|
weeklyTop: [],
|
|
@@ -8955,19 +9319,19 @@ var EMPTY_PAYLOAD = {
|
|
|
8955
9319
|
lastWeek: null
|
|
8956
9320
|
};
|
|
8957
9321
|
function LeaderboardPanel({ loggedIn, data, loading, onPlay, ui }) {
|
|
8958
|
-
if (!loggedIn) return /* @__PURE__ */
|
|
8959
|
-
if (data === null && loading) return /* @__PURE__ */
|
|
8960
|
-
return /* @__PURE__ */
|
|
9322
|
+
if (!loggedIn) return /* @__PURE__ */ jsx93(GamesLoginWall, { ui });
|
|
9323
|
+
if (data === null && loading) return /* @__PURE__ */ jsx93("div", { className: "ss-w-mon-list" });
|
|
9324
|
+
return /* @__PURE__ */ jsx93("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx93(Leaderboard, { data: data ?? EMPTY_PAYLOAD, ui, onPlay }) });
|
|
8961
9325
|
}
|
|
8962
9326
|
|
|
8963
9327
|
// src/components/PresetSpeedDial.tsx
|
|
8964
|
-
import { useId as
|
|
8965
|
-
import { jsx as
|
|
9328
|
+
import { useId as useId10 } from "react";
|
|
9329
|
+
import { jsx as jsx94, jsxs as jsxs79 } from "react/jsx-runtime";
|
|
8966
9330
|
function PresetSpeedDial({ expanded, showDot, strings, onToggle, onOpen, rootRef, buttonRef }) {
|
|
8967
|
-
const pillsId =
|
|
9331
|
+
const pillsId = useId10();
|
|
8968
9332
|
const tabIndex = expanded ? 0 : -1;
|
|
8969
|
-
return /* @__PURE__ */
|
|
8970
|
-
/* @__PURE__ */
|
|
9333
|
+
return /* @__PURE__ */ jsxs79("div", { ref: rootRef, className: "ss-w-dial", children: [
|
|
9334
|
+
/* @__PURE__ */ jsxs79(
|
|
8971
9335
|
"button",
|
|
8972
9336
|
{
|
|
8973
9337
|
ref: buttonRef,
|
|
@@ -8978,36 +9342,36 @@ function PresetSpeedDial({ expanded, showDot, strings, onToggle, onOpen, rootRef
|
|
|
8978
9342
|
"aria-label": strings.dialName,
|
|
8979
9343
|
onClick: onToggle,
|
|
8980
9344
|
children: [
|
|
8981
|
-
/* @__PURE__ */
|
|
8982
|
-
/* @__PURE__ */
|
|
8983
|
-
showDot && !expanded ? /* @__PURE__ */
|
|
9345
|
+
/* @__PURE__ */ jsx94("span", { className: "ss-w-dial-icon ss-w-dial-icon--open", children: /* @__PURE__ */ jsx94(SlidersIcon, {}) }),
|
|
9346
|
+
/* @__PURE__ */ jsx94("span", { className: "ss-w-dial-icon ss-w-dial-icon--close", children: /* @__PURE__ */ jsx94(CloseIcon, {}) }),
|
|
9347
|
+
showDot && !expanded ? /* @__PURE__ */ jsx94("span", { className: "ss-w-dial-dot", "aria-hidden": "true" }) : null
|
|
8984
9348
|
]
|
|
8985
9349
|
}
|
|
8986
9350
|
),
|
|
8987
|
-
/* @__PURE__ */
|
|
8988
|
-
/* @__PURE__ */
|
|
8989
|
-
/* @__PURE__ */
|
|
8990
|
-
/* @__PURE__ */
|
|
9351
|
+
/* @__PURE__ */ jsxs79("div", { id: pillsId, className: "ss-w-dial-pills", "data-open": expanded ? "" : void 0, children: [
|
|
9352
|
+
/* @__PURE__ */ jsxs79("button", { type: "button", className: "ss-w-dial-pill", tabIndex, onClick: () => onOpen("numbers"), children: [
|
|
9353
|
+
/* @__PURE__ */ jsx94(SlidersIcon, {}),
|
|
9354
|
+
/* @__PURE__ */ jsx94("span", { className: "ss-w-dial-pill-label", children: strings.setNumbers })
|
|
8991
9355
|
] }),
|
|
8992
|
-
/* @__PURE__ */
|
|
8993
|
-
/* @__PURE__ */
|
|
8994
|
-
/* @__PURE__ */
|
|
9356
|
+
/* @__PURE__ */ jsxs79("button", { type: "button", className: "ss-w-dial-pill", tabIndex, onClick: () => onOpen("combo"), children: [
|
|
9357
|
+
/* @__PURE__ */ jsx94(ComboIcon, {}),
|
|
9358
|
+
/* @__PURE__ */ jsx94("span", { className: "ss-w-dial-pill-label", children: strings.buildCombo })
|
|
8995
9359
|
] })
|
|
8996
9360
|
] })
|
|
8997
9361
|
] });
|
|
8998
9362
|
}
|
|
8999
9363
|
|
|
9000
9364
|
// src/components/PresetTools.tsx
|
|
9001
|
-
import { Fragment as Fragment21, useEffect as
|
|
9002
|
-
import { Fragment as Fragment22, jsx as
|
|
9365
|
+
import { Fragment as Fragment21, useEffect as useEffect26, useId as useId11, useRef as useRef22, useState as useState45 } from "react";
|
|
9366
|
+
import { Fragment as Fragment22, jsx as jsx95, jsxs as jsxs80 } from "react/jsx-runtime";
|
|
9003
9367
|
var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
9004
9368
|
function PresetToolModal({ title, closeLabel, onClose, children, footer }) {
|
|
9005
|
-
const dialogRef =
|
|
9006
|
-
const titleId =
|
|
9007
|
-
|
|
9369
|
+
const dialogRef = useRef22(null);
|
|
9370
|
+
const titleId = useId11();
|
|
9371
|
+
useEffect26(() => {
|
|
9008
9372
|
dialogRef.current?.focus();
|
|
9009
9373
|
}, []);
|
|
9010
|
-
|
|
9374
|
+
useEffect26(() => {
|
|
9011
9375
|
const onKey = (e) => {
|
|
9012
9376
|
if (e.key !== "Escape") return;
|
|
9013
9377
|
e.stopPropagation();
|
|
@@ -9037,79 +9401,79 @@ function PresetToolModal({ title, closeLabel, onClose, children, footer }) {
|
|
|
9037
9401
|
first.focus();
|
|
9038
9402
|
}
|
|
9039
9403
|
};
|
|
9040
|
-
return /* @__PURE__ */
|
|
9041
|
-
/* @__PURE__ */
|
|
9042
|
-
/* @__PURE__ */
|
|
9043
|
-
/* @__PURE__ */
|
|
9404
|
+
return /* @__PURE__ */ jsx95("div", { className: "ss-w-tool-backdrop", children: /* @__PURE__ */ jsxs80("div", { ref: dialogRef, className: "ss-w-tool", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, onKeyDown: trapTab, children: [
|
|
9405
|
+
/* @__PURE__ */ jsxs80("div", { className: "ss-w-tool-head", children: [
|
|
9406
|
+
/* @__PURE__ */ jsx95("h2", { id: titleId, className: "ss-w-tool-title", children: title }),
|
|
9407
|
+
/* @__PURE__ */ jsx95("button", { type: "button", className: "ss-w-tool-close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx95(CloseIcon, {}) })
|
|
9044
9408
|
] }),
|
|
9045
|
-
/* @__PURE__ */
|
|
9046
|
-
footer ? /* @__PURE__ */
|
|
9409
|
+
/* @__PURE__ */ jsx95("div", { className: "ss-w-tool-body", children }),
|
|
9410
|
+
footer ? /* @__PURE__ */ jsx95("div", { className: "ss-w-tool-foot", children: footer }) : null
|
|
9047
9411
|
] }) });
|
|
9048
9412
|
}
|
|
9049
9413
|
function fillTemplate(template, slots) {
|
|
9050
9414
|
return template.split(/(\{[a-z]+\})/).filter((part) => part !== "").map((part, i) => {
|
|
9051
9415
|
const key = /^\{([a-z]+)\}$/.exec(part)?.[1];
|
|
9052
|
-
return /* @__PURE__ */
|
|
9416
|
+
return /* @__PURE__ */ jsx95(Fragment21, { children: key !== void 0 && key in slots ? slots[key] : part }, i);
|
|
9053
9417
|
});
|
|
9054
9418
|
}
|
|
9055
9419
|
function NumberSelect({ current, choices: choices2, label, notToday, lockEmpty = true, onChoose }) {
|
|
9056
9420
|
const selected = Math.max(0, choices2.findIndex((c) => c.text === current));
|
|
9057
|
-
return /* @__PURE__ */
|
|
9058
|
-
/* @__PURE__ */
|
|
9059
|
-
/* @__PURE__ */
|
|
9421
|
+
return /* @__PURE__ */ jsxs80("span", { className: "ss-w-tool-num", children: [
|
|
9422
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: current }),
|
|
9423
|
+
/* @__PURE__ */ jsx95("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(selected), onChange: (e) => {
|
|
9060
9424
|
const c = choices2[Number(e.target.value)];
|
|
9061
9425
|
if (c) onChoose(c.value);
|
|
9062
|
-
}, children: choices2.map((c, i) => /* @__PURE__ */
|
|
9426
|
+
}, children: choices2.map((c, i) => /* @__PURE__ */ jsx95("option", { value: String(i), disabled: lockEmpty && !c.available && i !== selected, children: c.available ? c.text : `${c.text}${notToday}` }, i)) })
|
|
9063
9427
|
] });
|
|
9064
9428
|
}
|
|
9065
9429
|
function ChoiceSelect({ currentIdx, sizeLabels, optionLabels, label, onChoose }) {
|
|
9066
9430
|
const sizeText = sizeLabels[currentIdx] ?? "";
|
|
9067
|
-
return /* @__PURE__ */
|
|
9068
|
-
/* @__PURE__ */
|
|
9069
|
-
/* @__PURE__ */
|
|
9431
|
+
return /* @__PURE__ */ jsxs80("span", { className: "ss-w-tool-num", children: [
|
|
9432
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: sizeText }),
|
|
9433
|
+
/* @__PURE__ */ jsx95("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(currentIdx), onChange: (e) => onChoose(Number(e.target.value)), children: optionLabels.map((opt, i) => /* @__PURE__ */ jsx95("option", { value: String(i), children: opt }, i)) })
|
|
9070
9434
|
] });
|
|
9071
9435
|
}
|
|
9072
9436
|
function SendButton({ label, display, disabled, onClick }) {
|
|
9073
|
-
return /* @__PURE__ */
|
|
9437
|
+
return /* @__PURE__ */ jsx95("button", { type: "button", className: "ss-w-tool-send", "aria-label": `${label}: ${display}`, disabled, onClick, children: label });
|
|
9074
9438
|
}
|
|
9075
9439
|
function PickList({ picks, formatKickoff }) {
|
|
9076
|
-
return /* @__PURE__ */
|
|
9077
|
-
/* @__PURE__ */
|
|
9440
|
+
return /* @__PURE__ */ jsx95("ul", { className: "ss-w-tool-picks", role: "list", children: picks.map((p) => /* @__PURE__ */ jsxs80("li", { className: "ss-w-tool-pick", children: [
|
|
9441
|
+
/* @__PURE__ */ jsxs80("span", { className: "ss-w-tool-pick-match", children: [
|
|
9078
9442
|
p.homeTeamName,
|
|
9079
9443
|
" \u2013 ",
|
|
9080
9444
|
p.awayTeamName
|
|
9081
9445
|
] }),
|
|
9082
|
-
/* @__PURE__ */
|
|
9446
|
+
/* @__PURE__ */ jsxs80("span", { className: "ss-w-tool-pick-sel", children: [
|
|
9083
9447
|
p.marketLabel,
|
|
9084
9448
|
": ",
|
|
9085
9449
|
p.selectionLabel,
|
|
9086
9450
|
p.line ? ` ${p.line}` : ""
|
|
9087
9451
|
] }),
|
|
9088
|
-
/* @__PURE__ */
|
|
9089
|
-
/* @__PURE__ */
|
|
9452
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-pick-kick", children: formatKickoff(p.kickoffUtc) }),
|
|
9453
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-pick-price", children: p.price.toFixed(2) })
|
|
9090
9454
|
] }, p.matchOddsId)) });
|
|
9091
9455
|
}
|
|
9092
9456
|
function ComboPreview({ cell, formatKickoff }) {
|
|
9093
|
-
return /* @__PURE__ */
|
|
9094
|
-
/* @__PURE__ */
|
|
9095
|
-
/* @__PURE__ */
|
|
9457
|
+
return /* @__PURE__ */ jsxs80(Fragment22, { children: [
|
|
9458
|
+
/* @__PURE__ */ jsx95(PickList, { picks: cell.combo.legs, formatKickoff }),
|
|
9459
|
+
/* @__PURE__ */ jsx95("div", { className: "ss-w-tool-math", children: cell.combo.multiplication })
|
|
9096
9460
|
] });
|
|
9097
9461
|
}
|
|
9098
9462
|
function Unavailable({ text }) {
|
|
9099
|
-
return /* @__PURE__ */
|
|
9463
|
+
return /* @__PURE__ */ jsx95("p", { className: "ss-w-tool-unavailable", children: text });
|
|
9100
9464
|
}
|
|
9101
9465
|
function AskRow({ icon, ask, ready, send }) {
|
|
9102
|
-
return /* @__PURE__ */
|
|
9103
|
-
/* @__PURE__ */
|
|
9104
|
-
/* @__PURE__ */
|
|
9105
|
-
/* @__PURE__ */
|
|
9106
|
-
ready ? /* @__PURE__ */
|
|
9466
|
+
return /* @__PURE__ */ jsxs80("section", { className: "ss-w-tool-row ss-w-tool-row--ask", children: [
|
|
9467
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-icon", "aria-hidden": "true", children: icon }),
|
|
9468
|
+
/* @__PURE__ */ jsxs80("div", { className: "ss-w-tool-main", children: [
|
|
9469
|
+
/* @__PURE__ */ jsx95("p", { className: "ss-w-tool-ask", children: ask }),
|
|
9470
|
+
ready ? /* @__PURE__ */ jsx95("span", { className: "ss-w-tool-ready", children: ready }) : null
|
|
9107
9471
|
] }),
|
|
9108
9472
|
send
|
|
9109
9473
|
] });
|
|
9110
9474
|
}
|
|
9111
9475
|
function RoundSend({ label, display, disabled, onClick }) {
|
|
9112
|
-
return /* @__PURE__ */
|
|
9476
|
+
return /* @__PURE__ */ jsx95("button", { type: "button", className: "ss-w-tool-go", "aria-label": `${label}: ${display}`, disabled, onClick, children: /* @__PURE__ */ jsx95(SendIcon, {}) });
|
|
9113
9477
|
}
|
|
9114
9478
|
var BIG_COMBO = { total: 50, legs: 6 };
|
|
9115
9479
|
function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
|
|
@@ -9118,15 +9482,15 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
|
|
|
9118
9482
|
const totals = comboTotals(grid);
|
|
9119
9483
|
const legChoices = comboLegChoices(grid);
|
|
9120
9484
|
const count = FIXED_SINGLES_COUNT;
|
|
9121
|
-
const [maxPrice, setMaxPrice] =
|
|
9122
|
-
const [minPrice, setMinPrice] =
|
|
9123
|
-
const [start] =
|
|
9124
|
-
const [total, setTotal] =
|
|
9125
|
-
const [legs, setLegs] =
|
|
9126
|
-
const [bigStart] =
|
|
9127
|
-
const [bigTotal, setBigTotal] =
|
|
9128
|
-
const [bigLegs, setBigLegs] =
|
|
9129
|
-
const [announcement, setAnnouncement] =
|
|
9485
|
+
const [maxPrice, setMaxPrice] = useState45(() => startSingles(grid.singles, limits, START.maxPrice, count));
|
|
9486
|
+
const [minPrice, setMinPrice] = useState45(() => startSingles(grid.singlesFrom, floors, START.minPrice, count));
|
|
9487
|
+
const [start] = useState45(() => startCombo(grid, totals, legChoices, START.comboTotal, START.comboLegs));
|
|
9488
|
+
const [total, setTotal] = useState45(start.total);
|
|
9489
|
+
const [legs, setLegs] = useState45(start.legs);
|
|
9490
|
+
const [bigStart] = useState45(() => startCombo(grid, totals, legChoices, BIG_COMBO.total, BIG_COMBO.legs));
|
|
9491
|
+
const [bigTotal, setBigTotal] = useState45(bigStart.total);
|
|
9492
|
+
const [bigLegs, setBigLegs] = useState45(bigStart.legs);
|
|
9493
|
+
const [announcement, setAnnouncement] = useState45("");
|
|
9130
9494
|
const maxCell = findSingles(grid.singles, maxPrice, count);
|
|
9131
9495
|
const minCell = findSingles(grid.singlesFrom, minPrice, count);
|
|
9132
9496
|
const comboCell = findCombo(grid, total, legs);
|
|
@@ -9170,95 +9534,95 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
|
|
|
9170
9534
|
const totalChoices = totals.map((v) => ({ value: v, text: v.toFixed(1), available: legChoices.some((n) => !!findCombo(grid, v, n)) }));
|
|
9171
9535
|
const legChoicesFor = (t) => legChoices.map((n) => ({ value: n, text: String(n), available: !!findCombo(grid, t, n) }));
|
|
9172
9536
|
const markets = grid.markets ?? [];
|
|
9173
|
-
const [marketIdx, setMarketIdx] =
|
|
9537
|
+
const [marketIdx, setMarketIdx] = useState45(0);
|
|
9174
9538
|
const marketCell = markets[marketIdx] ?? null;
|
|
9175
9539
|
const marketLabels = markets.map((c) => strings.marketShort(c.marketDeveloperName, c.marketLabel, c.selectionLabel ?? null));
|
|
9176
9540
|
const singlesReady = (cell) => cell ? strings.readyCount(cell.picks.length) : strings.unavailable;
|
|
9177
9541
|
const comboReady = (cell) => cell ? strings.readyAt(cell.combo.total) : strings.unavailable;
|
|
9178
|
-
return /* @__PURE__ */
|
|
9179
|
-
/* @__PURE__ */
|
|
9542
|
+
return /* @__PURE__ */ jsxs80(PresetToolModal, { title: strings.setNumbers, closeLabel: strings.close, onClose, children: [
|
|
9543
|
+
/* @__PURE__ */ jsx95(
|
|
9180
9544
|
AskRow,
|
|
9181
9545
|
{
|
|
9182
9546
|
icon: "\u{1F3AF}",
|
|
9183
9547
|
ask: fillTemplate(strings.maxPriceRow, {
|
|
9184
9548
|
count: String(count),
|
|
9185
|
-
price: /* @__PURE__ */
|
|
9549
|
+
price: /* @__PURE__ */ jsx95(NumberSelect, { current: maxPrice.toFixed(2), choices: maxChoices, label: strings.maxPriceName, notToday: strings.notToday, onChoose: chooseMax })
|
|
9186
9550
|
}),
|
|
9187
9551
|
ready: singlesReady(maxCell),
|
|
9188
|
-
send: /* @__PURE__ */
|
|
9552
|
+
send: /* @__PURE__ */ jsx95(RoundSend, { label: strings.send, display: strings.maxPriceDisplay(count, maxPrice), disabled: !maxCell || streaming, onClick: () => {
|
|
9189
9553
|
if (maxCell) onSend(maxPriceAsk(maxCell, strings));
|
|
9190
9554
|
} })
|
|
9191
9555
|
}
|
|
9192
9556
|
),
|
|
9193
|
-
/* @__PURE__ */
|
|
9557
|
+
/* @__PURE__ */ jsx95(
|
|
9194
9558
|
AskRow,
|
|
9195
9559
|
{
|
|
9196
9560
|
icon: "\u{1F4C8}",
|
|
9197
9561
|
ask: fillTemplate(strings.minPriceRow, {
|
|
9198
9562
|
count: String(count),
|
|
9199
|
-
price: /* @__PURE__ */
|
|
9563
|
+
price: /* @__PURE__ */ jsx95(NumberSelect, { current: minPrice.toFixed(2), choices: minChoices, label: strings.minPriceName, notToday: strings.notToday, onChoose: chooseMin })
|
|
9200
9564
|
}),
|
|
9201
9565
|
ready: singlesReady(minCell),
|
|
9202
|
-
send: /* @__PURE__ */
|
|
9566
|
+
send: /* @__PURE__ */ jsx95(RoundSend, { label: strings.send, display: strings.minPriceDisplay(count, minPrice), disabled: !minCell || streaming, onClick: () => {
|
|
9203
9567
|
if (minCell) onSend(minPriceAsk(minCell, strings));
|
|
9204
9568
|
} })
|
|
9205
9569
|
}
|
|
9206
9570
|
),
|
|
9207
|
-
/* @__PURE__ */
|
|
9571
|
+
/* @__PURE__ */ jsx95(
|
|
9208
9572
|
AskRow,
|
|
9209
9573
|
{
|
|
9210
9574
|
icon: "\u2728",
|
|
9211
9575
|
ask: fillTemplate(strings.comboRow, {
|
|
9212
|
-
legs: /* @__PURE__ */
|
|
9213
|
-
total: /* @__PURE__ */
|
|
9576
|
+
legs: /* @__PURE__ */ jsx95(NumberSelect, { current: String(legs), choices: legChoicesFor(total), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseLegs }),
|
|
9577
|
+
total: /* @__PURE__ */ jsx95(NumberSelect, { current: total.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseTotal })
|
|
9214
9578
|
}),
|
|
9215
9579
|
ready: comboReady(comboCell),
|
|
9216
|
-
send: /* @__PURE__ */
|
|
9580
|
+
send: /* @__PURE__ */ jsx95(RoundSend, { label: strings.send, display: strings.comboDisplay(legs, total), disabled: !comboCell || streaming, onClick: () => {
|
|
9217
9581
|
if (comboCell) onSend(comboAsk(comboCell, strings));
|
|
9218
9582
|
} })
|
|
9219
9583
|
}
|
|
9220
9584
|
),
|
|
9221
|
-
/* @__PURE__ */
|
|
9585
|
+
/* @__PURE__ */ jsx95(
|
|
9222
9586
|
AskRow,
|
|
9223
9587
|
{
|
|
9224
9588
|
icon: "\u{1F3C6}",
|
|
9225
9589
|
ask: fillTemplate(strings.bigComboRow, {
|
|
9226
|
-
legs: /* @__PURE__ */
|
|
9227
|
-
total: /* @__PURE__ */
|
|
9590
|
+
legs: /* @__PURE__ */ jsx95(NumberSelect, { current: String(bigLegs), choices: legChoicesFor(bigTotal), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseBigLegs }),
|
|
9591
|
+
total: /* @__PURE__ */ jsx95(NumberSelect, { current: bigTotal.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseBigTotal })
|
|
9228
9592
|
}),
|
|
9229
9593
|
ready: comboReady(bigCell),
|
|
9230
|
-
send: /* @__PURE__ */
|
|
9594
|
+
send: /* @__PURE__ */ jsx95(RoundSend, { label: strings.send, display: strings.comboDisplay(bigLegs, bigTotal), disabled: !bigCell || streaming, onClick: () => {
|
|
9231
9595
|
if (bigCell) onSend(comboAsk(bigCell, strings));
|
|
9232
9596
|
} })
|
|
9233
9597
|
}
|
|
9234
9598
|
),
|
|
9235
|
-
markets.length > 0 && /* @__PURE__ */
|
|
9599
|
+
markets.length > 0 && /* @__PURE__ */ jsx95(
|
|
9236
9600
|
AskRow,
|
|
9237
9601
|
{
|
|
9238
9602
|
icon: "\u26BD",
|
|
9239
9603
|
ask: fillTemplate(strings.marketRow, {
|
|
9240
|
-
market: /* @__PURE__ */
|
|
9604
|
+
market: /* @__PURE__ */ jsx95(ChoiceSelect, { currentIdx: marketIdx, sizeLabels: marketLabels, optionLabels: marketLabels, label: strings.marketName, onChoose: chooseMarket })
|
|
9241
9605
|
}),
|
|
9242
9606
|
ready: marketCell ? strings.readyCount(marketCell.count) : null,
|
|
9243
|
-
send: /* @__PURE__ */
|
|
9607
|
+
send: /* @__PURE__ */ jsx95(RoundSend, { label: strings.send, display: marketCell ? marketDisplay(marketCell, strings) : "", disabled: !marketCell || streaming, onClick: () => {
|
|
9244
9608
|
if (marketCell) onSend(marketAsk(marketCell, strings));
|
|
9245
9609
|
} })
|
|
9246
9610
|
}
|
|
9247
9611
|
),
|
|
9248
|
-
/* @__PURE__ */
|
|
9612
|
+
/* @__PURE__ */ jsx95("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
|
|
9249
9613
|
] });
|
|
9250
9614
|
}
|
|
9251
9615
|
function BuildComboTool({ grid, strings, streaming, formatKickoff, initialTotal, initialLegs, onSend, onClose }) {
|
|
9252
9616
|
const totals = comboTotals(grid);
|
|
9253
9617
|
const legChoices = comboLegChoices(grid);
|
|
9254
|
-
const [start] =
|
|
9255
|
-
const [total, setTotal] =
|
|
9256
|
-
const [legs, setLegs] =
|
|
9618
|
+
const [start] = useState45(() => initialTotal === void 0 ? startCombo(grid, totals, legChoices, START.comboTotal, START.comboLegs) : null);
|
|
9619
|
+
const [total, setTotal] = useState45(() => initialTotal !== void 0 ? nearest(totals, initialTotal) : start.total);
|
|
9620
|
+
const [legs, setLegs] = useState45(() => {
|
|
9257
9621
|
if (initialTotal === void 0) return initialLegs !== void 0 ? clampLegs(legChoices, initialLegs) : start.legs;
|
|
9258
9622
|
const from = initialLegs !== void 0 ? clampLegs(legChoices, initialLegs) : startValue(legChoices, START.comboLegs);
|
|
9259
9623
|
return legsForTotal(grid, nearest(totals, initialTotal), from);
|
|
9260
9624
|
});
|
|
9261
|
-
const [announcement, setAnnouncement] =
|
|
9625
|
+
const [announcement, setAnnouncement] = useState45("");
|
|
9262
9626
|
const cell = findCombo(grid, total, legs);
|
|
9263
9627
|
const minLegs = legChoices[0] ?? legs;
|
|
9264
9628
|
const maxLegs = legChoices[legChoices.length - 1] ?? legs;
|
|
@@ -9269,29 +9633,29 @@ function BuildComboTool({ grid, strings, streaming, formatKickoff, initialTotal,
|
|
|
9269
9633
|
const d = strings.comboDisplay(nextLegs, nextTotal);
|
|
9270
9634
|
setAnnouncement(findCombo(grid, nextTotal, nextLegs) ? d : `${d}. ${strings.unavailable}`);
|
|
9271
9635
|
};
|
|
9272
|
-
const footer = /* @__PURE__ */
|
|
9636
|
+
const footer = /* @__PURE__ */ jsx95(SendButton, { label: strings.send, display, disabled: !cell || streaming, onClick: () => {
|
|
9273
9637
|
if (cell) onSend(comboAsk(cell, strings));
|
|
9274
9638
|
} });
|
|
9275
|
-
return /* @__PURE__ */
|
|
9276
|
-
/* @__PURE__ */
|
|
9277
|
-
/* @__PURE__ */
|
|
9278
|
-
/* @__PURE__ */
|
|
9639
|
+
return /* @__PURE__ */ jsxs80(PresetToolModal, { title: strings.buildCombo, closeLabel: strings.close, onClose, footer, children: [
|
|
9640
|
+
/* @__PURE__ */ jsxs80("div", { className: "ss-w-tool-section", role: "group", "aria-label": strings.totalLabel, children: [
|
|
9641
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-label", "aria-hidden": "true", children: strings.totalLabel }),
|
|
9642
|
+
/* @__PURE__ */ jsx95("div", { className: "ss-w-tool-chips", children: totals.map((t) => /* @__PURE__ */ jsx95("button", { type: "button", className: "ss-w-tool-chip", "aria-pressed": samePrice(t, total), onClick: () => choose(t, samePrice(t, total) ? legs : legsForTotal(grid, t, legs)), children: t.toFixed(1) }, t)) })
|
|
9279
9643
|
] }),
|
|
9280
|
-
/* @__PURE__ */
|
|
9281
|
-
/* @__PURE__ */
|
|
9282
|
-
/* @__PURE__ */
|
|
9283
|
-
/* @__PURE__ */
|
|
9284
|
-
/* @__PURE__ */
|
|
9285
|
-
/* @__PURE__ */
|
|
9644
|
+
/* @__PURE__ */ jsxs80("div", { className: "ss-w-tool-section", role: "group", "aria-label": strings.matchesLabel, children: [
|
|
9645
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-label", "aria-hidden": "true", children: strings.matchesLabel }),
|
|
9646
|
+
/* @__PURE__ */ jsxs80("div", { className: "ss-w-tool-stepper", children: [
|
|
9647
|
+
/* @__PURE__ */ jsx95("button", { type: "button", className: "ss-w-tool-step", "aria-label": strings.fewerMatches, disabled: legs <= minLegs, onClick: () => choose(total, legs - 1), children: "\u2212" }),
|
|
9648
|
+
/* @__PURE__ */ jsx95("span", { className: "ss-w-tool-count", children: legs }),
|
|
9649
|
+
/* @__PURE__ */ jsx95("button", { type: "button", className: "ss-w-tool-step", "aria-label": strings.moreMatches, disabled: legs >= maxLegs, onClick: () => choose(total, legs + 1), children: "+" })
|
|
9286
9650
|
] })
|
|
9287
9651
|
] }),
|
|
9288
|
-
cell ? /* @__PURE__ */
|
|
9289
|
-
/* @__PURE__ */
|
|
9652
|
+
cell ? /* @__PURE__ */ jsx95(ComboPreview, { cell, formatKickoff }) : /* @__PURE__ */ jsx95(Unavailable, { text: strings.unavailable }),
|
|
9653
|
+
/* @__PURE__ */ jsx95("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
|
|
9290
9654
|
] });
|
|
9291
9655
|
}
|
|
9292
9656
|
|
|
9293
9657
|
// src/usePresetDial.ts
|
|
9294
|
-
import { useCallback as
|
|
9658
|
+
import { useCallback as useCallback16, useEffect as useEffect27, useRef as useRef23, useState as useState46 } from "react";
|
|
9295
9659
|
function sendInFlight(messages, isStreaming) {
|
|
9296
9660
|
const last = messages[messages.length - 1];
|
|
9297
9661
|
return isStreaming && !!last && last.role === "assistant" && !last.done && !last.isGreeting;
|
|
@@ -9305,25 +9669,25 @@ function lastUserId(messages) {
|
|
|
9305
9669
|
}
|
|
9306
9670
|
var SCROLL_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
|
|
9307
9671
|
function usePresetDial({ layerRef, dialRef, dialButtonRef, messages, isStreaming, activeTab }) {
|
|
9308
|
-
const [expanded, setExpanded] =
|
|
9309
|
-
const fold =
|
|
9310
|
-
const toggle =
|
|
9672
|
+
const [expanded, setExpanded] = useState46(() => !sendInFlight(messages, isStreaming));
|
|
9673
|
+
const fold = useCallback16(() => setExpanded(false), []);
|
|
9674
|
+
const toggle = useCallback16(() => setExpanded((e) => !e), []);
|
|
9311
9675
|
const currentUserId = lastUserId(messages);
|
|
9312
|
-
const userIdRef =
|
|
9313
|
-
|
|
9676
|
+
const userIdRef = useRef23(currentUserId);
|
|
9677
|
+
useEffect27(() => {
|
|
9314
9678
|
if (currentUserId === userIdRef.current) return;
|
|
9315
9679
|
userIdRef.current = currentUserId;
|
|
9316
9680
|
setExpanded(false);
|
|
9317
9681
|
}, [currentUserId]);
|
|
9318
|
-
const tabRef =
|
|
9319
|
-
|
|
9682
|
+
const tabRef = useRef23(activeTab);
|
|
9683
|
+
useEffect27(() => {
|
|
9320
9684
|
if (activeTab === tabRef.current) return;
|
|
9321
9685
|
tabRef.current = activeTab;
|
|
9322
9686
|
setExpanded(false);
|
|
9323
9687
|
}, [activeTab]);
|
|
9324
|
-
const expandedRef =
|
|
9688
|
+
const expandedRef = useRef23(expanded);
|
|
9325
9689
|
expandedRef.current = expanded;
|
|
9326
|
-
|
|
9690
|
+
useEffect27(() => {
|
|
9327
9691
|
const onEscape = (e) => {
|
|
9328
9692
|
const dial = dialRef.current;
|
|
9329
9693
|
if (e.key !== "Escape" || !dial || !e.composedPath().includes(dial)) return;
|
|
@@ -9336,7 +9700,7 @@ function usePresetDial({ layerRef, dialRef, dialButtonRef, messages, isStreaming
|
|
|
9336
9700
|
window.addEventListener("keydown", onEscape, true);
|
|
9337
9701
|
return () => window.removeEventListener("keydown", onEscape, true);
|
|
9338
9702
|
}, [dialRef, dialButtonRef]);
|
|
9339
|
-
|
|
9703
|
+
useEffect27(() => {
|
|
9340
9704
|
if (!expanded) return;
|
|
9341
9705
|
const layer = layerRef.current;
|
|
9342
9706
|
const inDial = (e) => {
|
|
@@ -9388,11 +9752,11 @@ function markToolSeen() {
|
|
|
9388
9752
|
}
|
|
9389
9753
|
|
|
9390
9754
|
// src/components/ChatPanel.tsx
|
|
9391
|
-
import { Fragment as Fragment23, jsx as
|
|
9755
|
+
import { Fragment as Fragment23, jsx as jsx96, jsxs as jsxs81 } from "react/jsx-runtime";
|
|
9392
9756
|
var FULLSCREEN_QUERY = "(max-width: 639px)";
|
|
9393
9757
|
function useIsModal() {
|
|
9394
|
-
const [modal, setModal] =
|
|
9395
|
-
|
|
9758
|
+
const [modal, setModal] = useState47(false);
|
|
9759
|
+
useEffect28(() => {
|
|
9396
9760
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
|
|
9397
9761
|
const mql = window.matchMedia(FULLSCREEN_QUERY);
|
|
9398
9762
|
const sync = () => setModal(mql.matches);
|
|
@@ -9406,7 +9770,7 @@ var HIDDEN_LAYER_STYLE = { position: "absolute", inset: 0, visibility: "hidden",
|
|
|
9406
9770
|
function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, gamesResult, leaderboardResult, loggedIn, conversation, presetGrid }) {
|
|
9407
9771
|
const { state, close, stop, send, reset } = controller;
|
|
9408
9772
|
const isModal = useIsModal();
|
|
9409
|
-
|
|
9773
|
+
useEffect28(() => {
|
|
9410
9774
|
const onKey = (e) => {
|
|
9411
9775
|
if (e.key === "Escape") close();
|
|
9412
9776
|
};
|
|
@@ -9422,19 +9786,19 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9422
9786
|
monitor?.setActiveTab("chat");
|
|
9423
9787
|
send(text, { grounding });
|
|
9424
9788
|
};
|
|
9425
|
-
|
|
9789
|
+
useEffect28(() => {
|
|
9426
9790
|
if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
|
|
9427
9791
|
}, [monitor, state.isStreaming, state.messages.length]);
|
|
9428
9792
|
const onChatTab = !monitor || monitor.activeTab === "chat";
|
|
9429
|
-
const layerRef =
|
|
9430
|
-
const dialRef =
|
|
9431
|
-
const dialButtonRef =
|
|
9432
|
-
const inputRef =
|
|
9433
|
-
const limitRef =
|
|
9434
|
-
const typedSendRef =
|
|
9435
|
-
const focusAfterCloseRef =
|
|
9436
|
-
const [tool, setTool] =
|
|
9437
|
-
const [toolSeen, setToolSeen] =
|
|
9793
|
+
const layerRef = useRef24(null);
|
|
9794
|
+
const dialRef = useRef24(null);
|
|
9795
|
+
const dialButtonRef = useRef24(null);
|
|
9796
|
+
const inputRef = useRef24(null);
|
|
9797
|
+
const limitRef = useRef24(null);
|
|
9798
|
+
const typedSendRef = useRef24(false);
|
|
9799
|
+
const focusAfterCloseRef = useRef24(null);
|
|
9800
|
+
const [tool, setTool] = useState47(null);
|
|
9801
|
+
const [toolSeen, setToolSeen] = useState47(readToolSeen);
|
|
9438
9802
|
const dial = usePresetDial({
|
|
9439
9803
|
layerRef,
|
|
9440
9804
|
dialRef,
|
|
@@ -9446,53 +9810,53 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9446
9810
|
const { fold } = dial;
|
|
9447
9811
|
const paused = isPaused(state.limit);
|
|
9448
9812
|
const showDial = !!presetGrid && onChatTab && !tool && !paused;
|
|
9449
|
-
|
|
9813
|
+
useEffect28(() => {
|
|
9450
9814
|
if (paused) setTool(null);
|
|
9451
9815
|
}, [paused]);
|
|
9452
|
-
|
|
9816
|
+
useEffect28(() => {
|
|
9453
9817
|
if (!paused) return;
|
|
9454
9818
|
if (typedSendRef.current) limitRef.current?.focus();
|
|
9455
9819
|
typedSendRef.current = false;
|
|
9456
9820
|
}, [paused]);
|
|
9457
|
-
const openTool =
|
|
9821
|
+
const openTool = useCallback17((next) => {
|
|
9458
9822
|
fold();
|
|
9459
9823
|
markToolSeen();
|
|
9460
9824
|
setToolSeen(true);
|
|
9461
9825
|
setTool(next);
|
|
9462
9826
|
}, [fold]);
|
|
9463
|
-
const onPill =
|
|
9464
|
-
const toolsValue =
|
|
9827
|
+
const onPill = useCallback17((kind) => openTool(kind === "numbers" ? { kind: "numbers" } : { kind: "combo" }), [openTool]);
|
|
9828
|
+
const toolsValue = useMemo5(
|
|
9465
9829
|
() => presetGrid && !paused ? { openBuilder: (total, legs) => openTool({ kind: "combo", total, legs }), changeLabel: ui.presets.changeCombo } : null,
|
|
9466
9830
|
[presetGrid, paused, openTool, ui.presets.changeCombo]
|
|
9467
9831
|
);
|
|
9468
|
-
const closeTool =
|
|
9832
|
+
const closeTool = useCallback17(() => {
|
|
9469
9833
|
focusAfterCloseRef.current = "dial";
|
|
9470
9834
|
setTool(null);
|
|
9471
9835
|
}, []);
|
|
9472
|
-
const sendAsk =
|
|
9836
|
+
const sendAsk = useCallback17((ask) => {
|
|
9473
9837
|
focusAfterCloseRef.current = "composer";
|
|
9474
9838
|
setTool(null);
|
|
9475
9839
|
monitor?.setActiveTab("chat");
|
|
9476
9840
|
send(ask.message, { displayText: ask.displayText, preset: ask.preset });
|
|
9477
9841
|
}, [monitor, send]);
|
|
9478
|
-
const formatKickoff =
|
|
9842
|
+
const formatKickoff = useCallback17((kickoffUtc) => {
|
|
9479
9843
|
const k = ui.bettingKickoff(kickoffUtc);
|
|
9480
9844
|
return `${k.dayLabel} ${k.time}`;
|
|
9481
9845
|
}, [ui]);
|
|
9482
|
-
|
|
9846
|
+
useEffect28(() => {
|
|
9483
9847
|
if (tool) return;
|
|
9484
9848
|
const target = focusAfterCloseRef.current;
|
|
9485
9849
|
focusAfterCloseRef.current = null;
|
|
9486
9850
|
if (target === "dial") dialButtonRef.current?.focus();
|
|
9487
9851
|
else if (target === "composer") inputRef.current?.focus();
|
|
9488
9852
|
}, [tool]);
|
|
9489
|
-
|
|
9853
|
+
useEffect28(() => {
|
|
9490
9854
|
if (!tool || onChatTab && presetGrid) return;
|
|
9491
9855
|
focusAfterCloseRef.current = "composer";
|
|
9492
9856
|
setTool(null);
|
|
9493
9857
|
}, [tool, onChatTab, presetGrid]);
|
|
9494
|
-
return /* @__PURE__ */
|
|
9495
|
-
/* @__PURE__ */
|
|
9858
|
+
return /* @__PURE__ */ jsxs81("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
|
|
9859
|
+
/* @__PURE__ */ jsx96(
|
|
9496
9860
|
ChatHeader,
|
|
9497
9861
|
{
|
|
9498
9862
|
onClose: close,
|
|
@@ -9505,7 +9869,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9505
9869
|
moreOptionsLabel: ui.moreOptions
|
|
9506
9870
|
}
|
|
9507
9871
|
),
|
|
9508
|
-
monitor && /* @__PURE__ */
|
|
9872
|
+
monitor && /* @__PURE__ */ jsx96(
|
|
9509
9873
|
TabBar,
|
|
9510
9874
|
{
|
|
9511
9875
|
monitor,
|
|
@@ -9517,9 +9881,9 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9517
9881
|
gamesEnabled: gamesResult?.enabled ?? false
|
|
9518
9882
|
}
|
|
9519
9883
|
),
|
|
9520
|
-
/* @__PURE__ */
|
|
9521
|
-
/* @__PURE__ */
|
|
9522
|
-
showDial ? /* @__PURE__ */
|
|
9884
|
+
/* @__PURE__ */ jsxs81("div", { ref: layerRef, className: "ss-w-chat-layer", "data-dial": presetGrid ? "" : void 0, style: onChatTab ? void 0 : HIDDEN_LAYER_STYLE, children: [
|
|
9885
|
+
/* @__PURE__ */ jsx96(PresetToolsContext.Provider, { value: toolsValue, children: /* @__PURE__ */ jsx96(MessageList, { controller, ui, slip, onDashboardTap, monitor }) }),
|
|
9886
|
+
showDial ? /* @__PURE__ */ jsx96(
|
|
9523
9887
|
PresetSpeedDial,
|
|
9524
9888
|
{
|
|
9525
9889
|
expanded: dial.expanded,
|
|
@@ -9531,12 +9895,12 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9531
9895
|
buttonRef: dialButtonRef
|
|
9532
9896
|
}
|
|
9533
9897
|
) : null,
|
|
9534
|
-
tool && presetGrid && onChatTab && !paused ? tool.kind === "numbers" ? /* @__PURE__ */
|
|
9898
|
+
tool && presetGrid && onChatTab && !paused ? tool.kind === "numbers" ? /* @__PURE__ */ jsx96(SetNumbersTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, onSend: sendAsk, onClose: closeTool }) : /* @__PURE__ */ jsx96(BuildComboTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, formatKickoff, initialTotal: tool.total, initialLegs: tool.legs, onSend: sendAsk, onClose: closeTool }) : null
|
|
9535
9899
|
] }),
|
|
9536
|
-
monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */
|
|
9537
|
-
monitor && monitor.activeTab === "following" && /* @__PURE__ */
|
|
9538
|
-
monitor && monitor.activeTab === "odds" && /* @__PURE__ */
|
|
9539
|
-
monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */
|
|
9900
|
+
monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ jsx96(TodayPanel, { discovery, ui, monitor }),
|
|
9901
|
+
monitor && monitor.activeTab === "following" && /* @__PURE__ */ jsx96(MatchesPanel, { monitor, ui, slip, onAsk: paused ? void 0 : handleAsk }),
|
|
9902
|
+
monitor && monitor.activeTab === "odds" && /* @__PURE__ */ jsx96(OddsPanel, { monitor, ui, slip }),
|
|
9903
|
+
monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ jsx96(
|
|
9540
9904
|
GamesPanel,
|
|
9541
9905
|
{
|
|
9542
9906
|
loggedIn: !!loggedIn,
|
|
@@ -9550,7 +9914,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9550
9914
|
}
|
|
9551
9915
|
}
|
|
9552
9916
|
),
|
|
9553
|
-
monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */
|
|
9917
|
+
monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ jsx96(
|
|
9554
9918
|
LeaderboardPanel,
|
|
9555
9919
|
{
|
|
9556
9920
|
loggedIn: !!loggedIn,
|
|
@@ -9560,9 +9924,9 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9560
9924
|
ui
|
|
9561
9925
|
}
|
|
9562
9926
|
),
|
|
9563
|
-
(!monitor || monitor.activeTab !== "games" && monitor.activeTab !== "leaderboard") && /* @__PURE__ */
|
|
9564
|
-
/* @__PURE__ */
|
|
9565
|
-
paused ? null : /* @__PURE__ */
|
|
9927
|
+
(!monitor || monitor.activeTab !== "games" && monitor.activeTab !== "leaderboard") && /* @__PURE__ */ jsxs81(Fragment23, { children: [
|
|
9928
|
+
/* @__PURE__ */ jsx96("div", { ref: limitRef, className: "ss-w-limit", role: "status", tabIndex: -1, children: state.limit ? limitText(state.limit, ui) : null }),
|
|
9929
|
+
paused ? null : /* @__PURE__ */ jsx96(
|
|
9566
9930
|
ChatInput,
|
|
9567
9931
|
{
|
|
9568
9932
|
ref: inputRef,
|
|
@@ -9581,9 +9945,9 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
|
|
|
9581
9945
|
}
|
|
9582
9946
|
|
|
9583
9947
|
// src/components/HostEventsProvider.tsx
|
|
9584
|
-
import { jsx as
|
|
9948
|
+
import { jsx as jsx97 } from "react/jsx-runtime";
|
|
9585
9949
|
function HostEventsProvider({ value, children }) {
|
|
9586
|
-
return /* @__PURE__ */
|
|
9950
|
+
return /* @__PURE__ */ jsx97(SlipStateContext.Provider, { value: value.slipState, children });
|
|
9587
9951
|
}
|
|
9588
9952
|
|
|
9589
9953
|
// src/styles/css.generated.ts
|
|
@@ -9705,6 +10069,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
9705
10069
|
.ss-g-search-box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1.5px solid var(--ss-g-line); color: var(--ss-g-muted); }
|
|
9706
10070
|
.ss-g-search-box:focus-within { border-color: var(--ss-w-accent); }
|
|
9707
10071
|
.ss-g-search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ss-g-ink); font: 500 15px var(--ss-g-font-body); }
|
|
10072
|
+
.ss-g-search-clear { flex: none; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--ss-g-line); color: var(--ss-g-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
|
10073
|
+
.ss-g-search-clear:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
|
|
9708
10074
|
.ss-g-footer { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--ss-g-line); display: flex; flex-direction: column; gap: 10px; background: var(--ss-g-ground); }
|
|
9709
10075
|
.ss-g-sil { position: relative; flex: none; display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--ss-g-raised); color: var(--ss-g-strong-line); }
|
|
9710
10076
|
.ss-g-sil--selected { background: var(--ss-g-accent-tint); color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-g-raised)); }
|
|
@@ -10776,14 +11142,67 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
10776
11142
|
.ss-w-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }
|
|
10777
11143
|
.ss-w-today-live { display: flex; flex-direction: column; gap: 2px; }
|
|
10778
11144
|
|
|
10779
|
-
|
|
10780
|
-
|
|
10781
|
-
.ss-w-
|
|
10782
|
-
|
|
10783
|
-
|
|
10784
|
-
|
|
10785
|
-
|
|
10786
|
-
.ss-w-
|
|
11145
|
+
/* Today tab root (Task 7): position: relative so the grid's own star/unstar toast (absolute,
|
|
11146
|
+
top-centre) anchors here rather than to some unrelated positioned ancestor. */
|
|
11147
|
+
/* Non-scrolling anchor for .ss-w-today-toast (position: absolute; top: 0): .ss-w-mon-list below is
|
|
11148
|
+
the overflow-y: auto scroller, so a toast parented to IT would scroll out of view with the
|
|
11149
|
+
content that moved it. This wrapper sits outside that scroller, inside .ss-w-panel's fixed-size
|
|
11150
|
+
flex column, so top: 0 always lands at the visible top of the Today tab. min-height: 0 is
|
|
11151
|
+
required: without it this flex item defaults to min-height: auto (its content height), .ss-w-panel's
|
|
11152
|
+
overflow: hidden then clips it, and .ss-w-mon-list inside never gets a bounded height to scroll within. */
|
|
11153
|
+
.ss-w-today-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
|
|
11154
|
+
|
|
11155
|
+
/* Section header for "Your leagues"/"Top leagues"/"All leagues" (Task 7) -- same visual
|
|
11156
|
+
treatment as .ss-w-sec-head (the live-band header), kept as a separate class so a kept test
|
|
11157
|
+
asserting .ss-w-sec-head is absent when nothing is live cannot see this header too. */
|
|
11158
|
+
.ss-w-today-sec { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
|
|
11159
|
+
.ss-w-today-sec::after { content: ""; flex: 1; height: 1px; background: var(--ss-w-line); }
|
|
11160
|
+
.ss-w-today-sec-sub { text-transform: none; letter-spacing: normal; font-weight: 600; }
|
|
11161
|
+
.ss-w-today-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
11162
|
+
.ss-w-today-empty { font-size: 12px; color: var(--ss-w-faint); padding: 10px 2px; }
|
|
11163
|
+
.ss-w-today-search-block { display: flex; flex-direction: column; }
|
|
11164
|
+
.ss-w-today-search-group { display: flex; align-items: center; gap: 7px; padding: 2px 2px 6px; }
|
|
11165
|
+
.ss-w-today-search-group::after { content: ""; flex: 1; height: 1px; background: var(--ss-w-line); }
|
|
11166
|
+
.ss-w-today-search-group .ss-w-bi-comp-logo { width: 16px; height: 16px; }
|
|
11167
|
+
.ss-w-today-search-group-name { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
11168
|
+
.ss-w-today-search-row { cursor: pointer; border-radius: 10px; }
|
|
11169
|
+
.ss-w-today-search-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
|
|
11170
|
+
|
|
11171
|
+
/* League tile (Task 5): a flat row (crest + name as the open target, star as a separate sibling
|
|
11172
|
+
button) rather than a disclosure header -- opening is Task 6's LeagueDetail, not an inline
|
|
11173
|
+
expansion. Same border/radius language .ss-w-grp used to carry, before Task 7 deleted it. */
|
|
11174
|
+
.ss-w-today-tile { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; background: var(--ss-w-bubble); }
|
|
11175
|
+
.ss-w-today-tile-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: none; border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }
|
|
11176
|
+
.ss-w-today-tile-body:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
|
|
11177
|
+
.ss-w-today-tile-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
11178
|
+
.ss-w-today-tile-country { font-weight: 600; color: var(--ss-w-faint); }
|
|
11179
|
+
.ss-w-today-tile-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 6px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }
|
|
11180
|
+
.ss-w-today-tile-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
|
|
11181
|
+
.ss-w-today-tile-star[aria-pressed="true"] { color: var(--ss-w-accent); }
|
|
11182
|
+
.ss-w-today-tile-star:disabled { cursor: default; opacity: .4; }
|
|
11183
|
+
.ss-w-today-tile-star svg { width: 18px; height: 18px; }
|
|
11184
|
+
|
|
11185
|
+
/* League detail (Task 6): the drill-in view opened from a tile. Its header star is always
|
|
11186
|
+
enabled (spec \xA73/\xA77's one exception to the tile rule), so it carries no :disabled styling. */
|
|
11187
|
+
.ss-w-today-detail { position: relative; display: flex; flex-direction: column; gap: 10px; }
|
|
11188
|
+
.ss-w-today-detail-head { display: flex; align-items: center; gap: 8px; }
|
|
11189
|
+
.ss-w-today-detail-back { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); cursor: pointer; transform: scaleX(-1); }
|
|
11190
|
+
.ss-w-today-detail-back:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
|
|
11191
|
+
.ss-w-today-detail-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
11192
|
+
.ss-w-today-detail-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }
|
|
11193
|
+
.ss-w-today-detail-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
|
|
11194
|
+
.ss-w-today-detail-star[aria-pressed="true"] { color: var(--ss-w-accent); }
|
|
11195
|
+
.ss-w-today-detail-star svg { width: 18px; height: 18px; }
|
|
11196
|
+
.ss-w-today-detail-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
|
|
11197
|
+
.ss-w-today-detail-prev, .ss-w-today-detail-next { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }
|
|
11198
|
+
.ss-w-today-detail-prev:focus-visible, .ss-w-today-detail-next:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
|
|
11199
|
+
.ss-w-today-detail-prev { transform: scaleX(-1); }
|
|
11200
|
+
.ss-w-today-detail-pos { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }
|
|
11201
|
+
.ss-w-today-detail-body { display: flex; flex-direction: column; }
|
|
11202
|
+
.ss-w-today-detail-count { align-self: flex-end; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
|
|
11203
|
+
/* aria-live status region, not a modal -- pointer-events: none so the header/nav above stay
|
|
11204
|
+
clickable while it is showing. */
|
|
11205
|
+
.ss-w-today-toast { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; width: max-content; max-width: 220px; font-size: 11px; font-weight: 560; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 5px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
|
|
10787
11206
|
|
|
10788
11207
|
.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }
|
|
10789
11208
|
.ss-w-drow:last-child { border-bottom: none; }
|
|
@@ -11269,7 +11688,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
11269
11688
|
`;
|
|
11270
11689
|
|
|
11271
11690
|
// src/StatsWidget.tsx
|
|
11272
|
-
import { jsx as
|
|
11691
|
+
import { jsx as jsx98 } from "react/jsx-runtime";
|
|
11273
11692
|
function buildClient(props) {
|
|
11274
11693
|
try {
|
|
11275
11694
|
if ("client" in props && props.client) {
|
|
@@ -11294,24 +11713,24 @@ function injectStyles(root) {
|
|
|
11294
11713
|
function StatsWidget(props) {
|
|
11295
11714
|
const injectedClient = "client" in props ? props.client : void 0;
|
|
11296
11715
|
const cfg = props.config;
|
|
11297
|
-
const built =
|
|
11298
|
-
const logger =
|
|
11716
|
+
const built = useMemo6(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
|
|
11717
|
+
const logger = useMemo6(
|
|
11299
11718
|
() => built ? built.client.createEventLogger({
|
|
11300
11719
|
operatorUserId: cfg?.userContext?.operatorUserId,
|
|
11301
11720
|
anonymousUserId: cfg?.userContext?.anonymousUserId
|
|
11302
11721
|
}) : null,
|
|
11303
11722
|
[built?.client]
|
|
11304
11723
|
);
|
|
11305
|
-
const ui =
|
|
11306
|
-
const rootRef =
|
|
11307
|
-
const introDoneRef =
|
|
11308
|
-
const markIntroDone =
|
|
11724
|
+
const ui = useMemo6(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
|
|
11725
|
+
const rootRef = useRef25(null);
|
|
11726
|
+
const introDoneRef = useRef25(false);
|
|
11727
|
+
const markIntroDone = useCallback18(() => {
|
|
11309
11728
|
introDoneRef.current = true;
|
|
11310
11729
|
}, []);
|
|
11311
11730
|
const convStorageKey = `ss-w-conv:${cfg?.operatorId ?? ""}:${cfg?.userContext?.operatorUserId ?? "anon"}`;
|
|
11312
11731
|
const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0, convStorageKey);
|
|
11313
|
-
const [hasToday, setHasToday] =
|
|
11314
|
-
const liveCardWatches =
|
|
11732
|
+
const [hasToday, setHasToday] = useState48(false);
|
|
11733
|
+
const liveCardWatches = useMemo6(() => {
|
|
11315
11734
|
const seen = /* @__PURE__ */ new Set();
|
|
11316
11735
|
const out = [];
|
|
11317
11736
|
for (const msg of controller.state.messages) {
|
|
@@ -11333,31 +11752,40 @@ function StatsWidget(props) {
|
|
|
11333
11752
|
hasToday,
|
|
11334
11753
|
watches: liveCardWatches
|
|
11335
11754
|
});
|
|
11336
|
-
const
|
|
11337
|
-
|
|
11338
|
-
|
|
11755
|
+
const operatorUserId = cfg?.userContext?.operatorUserId;
|
|
11756
|
+
const anonymousUserId = cfg?.userContext?.anonymousUserId;
|
|
11757
|
+
const getSchedule = useCallback18(
|
|
11758
|
+
(localDate, utcOffsetMinutes) => built ? built.conversation.getSchedule(localDate, utcOffsetMinutes, operatorUserId, anonymousUserId) : Promise.resolve(null),
|
|
11759
|
+
[built, operatorUserId, anonymousUserId]
|
|
11760
|
+
);
|
|
11761
|
+
const postLeagueStar = useCallback18(
|
|
11762
|
+
(competitionId, starred) => built ? built.conversation.starLeague(competitionId, starred, operatorUserId, anonymousUserId) : Promise.resolve(null),
|
|
11763
|
+
[built, operatorUserId, anonymousUserId]
|
|
11339
11764
|
);
|
|
11340
|
-
const getStates =
|
|
11765
|
+
const getStates = useCallback18(
|
|
11341
11766
|
(matchIds) => built ? built.conversation.getStates(matchIds) : Promise.resolve(null),
|
|
11342
11767
|
[built]
|
|
11343
11768
|
);
|
|
11344
|
-
const pinnedMatchIds =
|
|
11769
|
+
const pinnedMatchIds = useMemo6(
|
|
11345
11770
|
() => monitor.pins.filter((p) => p.kind === "match").map((p) => p.matchId),
|
|
11346
11771
|
[monitor.pins]
|
|
11347
11772
|
);
|
|
11348
11773
|
const discovery = useMatchDiscovery({
|
|
11349
11774
|
getSchedule,
|
|
11350
11775
|
getStates,
|
|
11776
|
+
postLeagueStar,
|
|
11351
11777
|
operatorId: cfg?.operatorId ?? "",
|
|
11778
|
+
operatorUserId,
|
|
11779
|
+
anonymousUserId,
|
|
11352
11780
|
isOpen: controller.state.isOpen,
|
|
11353
11781
|
pinnedMatchIds
|
|
11354
11782
|
});
|
|
11355
11783
|
const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
|
|
11356
|
-
|
|
11784
|
+
useEffect29(() => {
|
|
11357
11785
|
setHasToday(todayHasContent);
|
|
11358
11786
|
}, [todayHasContent]);
|
|
11359
|
-
const prevLiveSnapshotRef =
|
|
11360
|
-
|
|
11787
|
+
const prevLiveSnapshotRef = useRef25(monitor.snapshot);
|
|
11788
|
+
useEffect29(() => {
|
|
11361
11789
|
const snap = monitor.snapshot;
|
|
11362
11790
|
if (!snap || snap === prevLiveSnapshotRef.current) return;
|
|
11363
11791
|
prevLiveSnapshotRef.current = snap;
|
|
@@ -11393,14 +11821,14 @@ function StatsWidget(props) {
|
|
|
11393
11821
|
}, [monitor.snapshot]);
|
|
11394
11822
|
const gamesResult = useGames(built?.conversation ?? null, { activeTab: monitor.activeTab });
|
|
11395
11823
|
const leaderboardResult = useLeaderboard(built?.conversation ?? null, { activeTab: monitor.activeTab });
|
|
11396
|
-
const getPricePresets =
|
|
11824
|
+
const getPricePresets = useCallback18(
|
|
11397
11825
|
(locale2) => built ? built.conversation.getPricePresets(locale2, { pool: "open" }) : Promise.resolve(null),
|
|
11398
11826
|
[built]
|
|
11399
11827
|
);
|
|
11400
11828
|
const presetGrid = usePresetGrid({ getPricePresets, isOpen: controller.state.isOpen, locale: ui.presets.lang });
|
|
11401
11829
|
const markTodayActivity = monitor.markTodayActivity;
|
|
11402
|
-
const prevLiveCountRef =
|
|
11403
|
-
|
|
11830
|
+
const prevLiveCountRef = useRef25(0);
|
|
11831
|
+
useEffect29(() => {
|
|
11404
11832
|
const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
|
|
11405
11833
|
prevLiveCountRef.current = discovery.liveCount;
|
|
11406
11834
|
if (rose) markTodayActivity();
|
|
@@ -11414,7 +11842,7 @@ function StatsWidget(props) {
|
|
|
11414
11842
|
closePanel: controller.close
|
|
11415
11843
|
});
|
|
11416
11844
|
const markAdded = hostEvents.markAdded;
|
|
11417
|
-
const slip =
|
|
11845
|
+
const slip = useMemo6(
|
|
11418
11846
|
() => {
|
|
11419
11847
|
const handler = props.config?.onAddToSlip;
|
|
11420
11848
|
return {
|
|
@@ -11433,7 +11861,7 @@ function StatsWidget(props) {
|
|
|
11433
11861
|
},
|
|
11434
11862
|
[props.config?.onAddToSlip, controller.state.conversationId, markAdded]
|
|
11435
11863
|
);
|
|
11436
|
-
const onDashboardTap =
|
|
11864
|
+
const onDashboardTap = useMemo6(
|
|
11437
11865
|
() => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input), logger) : void 0,
|
|
11438
11866
|
[built, logger]
|
|
11439
11867
|
);
|
|
@@ -11449,14 +11877,12 @@ function StatsWidget(props) {
|
|
|
11449
11877
|
log: logger
|
|
11450
11878
|
})
|
|
11451
11879
|
}));
|
|
11452
|
-
const operatorUserId = cfg?.userContext?.operatorUserId;
|
|
11453
|
-
const anonymousUserId = cfg?.userContext?.anonymousUserId;
|
|
11454
11880
|
const conversationId = controller.state.conversationId ?? void 0;
|
|
11455
|
-
|
|
11881
|
+
useEffect29(() => {
|
|
11456
11882
|
if (!logger) return;
|
|
11457
11883
|
logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
|
|
11458
11884
|
}, [logger, operatorUserId, anonymousUserId, conversationId]);
|
|
11459
|
-
|
|
11885
|
+
useEffect29(() => {
|
|
11460
11886
|
if (!logger) return;
|
|
11461
11887
|
logger.resume();
|
|
11462
11888
|
const onHide = () => {
|
|
@@ -11474,14 +11900,14 @@ function StatsWidget(props) {
|
|
|
11474
11900
|
logger.dispose();
|
|
11475
11901
|
};
|
|
11476
11902
|
}, [logger]);
|
|
11477
|
-
|
|
11903
|
+
useEffect29(() => {
|
|
11478
11904
|
if (!built || !ui.injectStyles) return;
|
|
11479
11905
|
const node = rootRef.current?.getRootNode();
|
|
11480
11906
|
if (node) injectStyles(node);
|
|
11481
11907
|
}, [built, ui.injectStyles]);
|
|
11482
11908
|
if (!built) return null;
|
|
11483
11909
|
const attrs = themeAttrs(ui);
|
|
11484
|
-
return /* @__PURE__ */
|
|
11910
|
+
return /* @__PURE__ */ jsx98(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ jsx98(HostEventsProvider, { value: hostEvents, children: /* @__PURE__ */ jsx98("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ jsx98(
|
|
11485
11911
|
ChatPanel,
|
|
11486
11912
|
{
|
|
11487
11913
|
controller,
|
|
@@ -11496,7 +11922,7 @@ function StatsWidget(props) {
|
|
|
11496
11922
|
conversation: built?.conversation ?? null,
|
|
11497
11923
|
presetGrid
|
|
11498
11924
|
}
|
|
11499
|
-
) : /* @__PURE__ */
|
|
11925
|
+
) : /* @__PURE__ */ jsx98(
|
|
11500
11926
|
ChatFab,
|
|
11501
11927
|
{
|
|
11502
11928
|
label: ui.launcherLabel,
|