@sensiblestats/widget-react 0.50.1 → 0.50.2
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 +6 -0
- package/dist/index.cjs +355 -256
- 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 +364 -265
- package/dist/index.js.map +1 -1
- package/dist/styles.css +110 -86
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -4209,6 +4209,13 @@ var ATTR_KEYS = [
|
|
|
4209
4209
|
"shirtNumber",
|
|
4210
4210
|
"apps"
|
|
4211
4211
|
];
|
|
4212
|
+
function verdictGlyph(v) {
|
|
4213
|
+
if (v.verdict === "exact") return "\u2713";
|
|
4214
|
+
if (v.verdict === "miss") return "\u2717";
|
|
4215
|
+
if (v.direction === "up") return "\u2191";
|
|
4216
|
+
if (v.direction === "down") return "\u2193";
|
|
4217
|
+
return "\u2248";
|
|
4218
|
+
}
|
|
4212
4219
|
function MysteryTigerGame({
|
|
4213
4220
|
config,
|
|
4214
4221
|
result,
|
|
@@ -4218,16 +4225,15 @@ function MysteryTigerGame({
|
|
|
4218
4225
|
const [query, setQuery] = (0, import_react29.useState)("");
|
|
4219
4226
|
const inputId = (0, import_react29.useId)();
|
|
4220
4227
|
const clientState = parseClientState(result?.clientStateJson);
|
|
4221
|
-
const
|
|
4222
|
-
|
|
4223
|
-
);
|
|
4228
|
+
const guessResults = clientState?.guessResults ?? [];
|
|
4229
|
+
const alreadyGuessedIds = new Set(guessResults.map((g) => g.playerId));
|
|
4224
4230
|
const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
|
|
4225
4231
|
const filtered = config && !isOver ? config.squadPlayers.filter(
|
|
4226
4232
|
(p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
|
|
4227
4233
|
) : [];
|
|
4228
4234
|
function handleSelect(playerId) {
|
|
4229
4235
|
if (!config || isOver || submitting) return;
|
|
4230
|
-
const prevGuesses =
|
|
4236
|
+
const prevGuesses = guessResults.map((g) => g.playerId);
|
|
4231
4237
|
const newGuesses = [...prevGuesses, playerId];
|
|
4232
4238
|
setQuery("");
|
|
4233
4239
|
onSubmit(JSON.stringify({ guesses: newGuesses }));
|
|
@@ -4235,9 +4241,46 @@ function MysteryTigerGame({
|
|
|
4235
4241
|
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt", "data-testid": "game-screen-mystery-tiger", children: [
|
|
4236
4242
|
!config && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
|
|
4237
4243
|
config && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
|
|
4238
|
-
|
|
4239
|
-
/* @__PURE__ */ (0, import_jsx_runtime55.
|
|
4240
|
-
|
|
4244
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-head", children: [
|
|
4245
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { children: [
|
|
4246
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-title", children: "Mystery Tiger" }),
|
|
4247
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-sub", children: "Guess today's squad player" })
|
|
4248
|
+
] }),
|
|
4249
|
+
clientState && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "ss-w-gt-left", children: [
|
|
4250
|
+
clientState.guessesRemaining,
|
|
4251
|
+
" left"
|
|
4252
|
+
] })
|
|
4253
|
+
] }),
|
|
4254
|
+
guessResults.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrows", children: guessResults.map((gr, i) => {
|
|
4255
|
+
const player = config.squadPlayers.find((p) => p.id === gr.playerId);
|
|
4256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtguess", children: [
|
|
4257
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtguess-nm", children: [
|
|
4258
|
+
i + 1,
|
|
4259
|
+
" \xB7 ",
|
|
4260
|
+
player?.name ?? `#${gr.playerId}`
|
|
4261
|
+
] }),
|
|
4262
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrow", children: ATTR_KEYS.map((key) => {
|
|
4263
|
+
const v = gr[key];
|
|
4264
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
4265
|
+
"div",
|
|
4266
|
+
{
|
|
4267
|
+
className: `ss-w-gtile ss-w-gtile--${v.verdict}`,
|
|
4268
|
+
"data-testid": `verdict-${key}-${i}`,
|
|
4269
|
+
"data-verdict": v.verdict,
|
|
4270
|
+
"aria-label": `${ATTR_LABELS[key]}: ${v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
|
|
4271
|
+
children: [
|
|
4272
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-lab", children: ATTR_LABELS[key] }),
|
|
4273
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-v", "aria-hidden": "true", children: verdictGlyph(v) })
|
|
4274
|
+
]
|
|
4275
|
+
},
|
|
4276
|
+
key
|
|
4277
|
+
);
|
|
4278
|
+
}) })
|
|
4279
|
+
] }, gr.playerId);
|
|
4280
|
+
}) }),
|
|
4281
|
+
clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-hint", children: [
|
|
4282
|
+
"\u{1F4A1} ",
|
|
4283
|
+
clientState.hintLine
|
|
4241
4284
|
] }),
|
|
4242
4285
|
!isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtta", children: [
|
|
4243
4286
|
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
@@ -4272,38 +4315,15 @@ function MysteryTigerGame({
|
|
|
4272
4315
|
p.id
|
|
4273
4316
|
)) })
|
|
4274
4317
|
] }),
|
|
4275
|
-
|
|
4276
|
-
/* @__PURE__ */ (0, import_jsx_runtime55.
|
|
4277
|
-
|
|
4278
|
-
|
|
4279
|
-
|
|
4280
|
-
|
|
4281
|
-
|
|
4282
|
-
|
|
4283
|
-
|
|
4284
|
-
ATTR_KEYS.map((key) => {
|
|
4285
|
-
const v = gr[key];
|
|
4286
|
-
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4287
|
-
"div",
|
|
4288
|
-
{
|
|
4289
|
-
className: `ss-w-gtile ss-w-gtile--${v.verdict}`,
|
|
4290
|
-
"data-testid": `verdict-${key}-${i}`,
|
|
4291
|
-
"data-verdict": v.verdict,
|
|
4292
|
-
"aria-label": `${ATTR_LABELS[key]}: ${v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
|
|
4293
|
-
children: v.direction && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-dir", "aria-hidden": "true", children: v.direction === "up" ? "\u2191" : "\u2193" })
|
|
4294
|
-
},
|
|
4295
|
-
key
|
|
4296
|
-
);
|
|
4297
|
-
})
|
|
4298
|
-
] }, gr.playerId);
|
|
4299
|
-
}) })
|
|
4300
|
-
] }),
|
|
4301
|
-
clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-hint", children: clientState.hintLine }),
|
|
4302
|
-
!isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-hint", children: [
|
|
4303
|
-
clientState.guessesRemaining,
|
|
4304
|
-
" guess",
|
|
4305
|
-
clientState.guessesRemaining !== 1 ? "es" : "",
|
|
4306
|
-
" remaining"
|
|
4318
|
+
isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `ss-w-gt-banner ss-w-gt-banner--${clientState.solved ? "solved" : "failed"}`, children: [
|
|
4319
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-banner-label", children: clientState.solved ? "\u{1F42F} You found them!" : "\u{1F614} Out of guesses" }),
|
|
4320
|
+
clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-banner-name", children: clientState.revealedPlayerName }),
|
|
4321
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-banner-sub", children: [
|
|
4322
|
+
clientState.guessesUsed,
|
|
4323
|
+
" guess",
|
|
4324
|
+
clientState.guessesUsed === 1 ? "" : "es",
|
|
4325
|
+
" \xB7 come back tomorrow"
|
|
4326
|
+
] })
|
|
4307
4327
|
] })
|
|
4308
4328
|
] })
|
|
4309
4329
|
] });
|
|
@@ -4319,22 +4339,6 @@ function parseClientState2(json) {
|
|
|
4319
4339
|
return null;
|
|
4320
4340
|
}
|
|
4321
4341
|
}
|
|
4322
|
-
function AnsweredRow({
|
|
4323
|
-
answered,
|
|
4324
|
-
pair
|
|
4325
|
-
}) {
|
|
4326
|
-
const cls = `ss-w-hlrrow ss-w-hlrrow--${answered.wasCorrect ? "correct" : "wrong"}`;
|
|
4327
|
-
const icon = answered.wasCorrect ? "\u2713" : "\u2717";
|
|
4328
|
-
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cls, children: [
|
|
4329
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "ss-w-hlrrow-names", children: [
|
|
4330
|
-
pair?.playerAName ?? "?",
|
|
4331
|
-
" vs ",
|
|
4332
|
-
pair?.playerBName ?? "?"
|
|
4333
|
-
] }),
|
|
4334
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlrrow-pick", children: answered.pick }),
|
|
4335
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlrrow-icon", children: icon })
|
|
4336
|
-
] });
|
|
4337
|
-
}
|
|
4338
4342
|
function HigherOrLowerGame({
|
|
4339
4343
|
config,
|
|
4340
4344
|
result,
|
|
@@ -4342,74 +4346,114 @@ function HigherOrLowerGame({
|
|
|
4342
4346
|
onSubmit
|
|
4343
4347
|
}) {
|
|
4344
4348
|
const clientState = parseClientState2(result?.clientStateJson);
|
|
4345
|
-
const
|
|
4346
|
-
const
|
|
4349
|
+
const answeredPairs = clientState?.answeredPairs ?? [];
|
|
4350
|
+
const answeredCount = answeredPairs.length;
|
|
4351
|
+
const runEndedWrong = answeredPairs.some((p) => !p.wasCorrect);
|
|
4347
4352
|
const allPairsAnswered = config != null && answeredCount >= config.pairs.length;
|
|
4348
4353
|
const isOver = result?.alreadyPlayed === true || runEndedWrong || allPairsAnswered;
|
|
4349
4354
|
const currentPair = config && !isOver ? config.pairs[answeredCount] ?? null : null;
|
|
4355
|
+
const correctCount = answeredPairs.filter((p) => p.wasCorrect).length;
|
|
4356
|
+
const score = clientState?.score ?? correctCount;
|
|
4357
|
+
const runLength = clientState?.runLength ?? 0;
|
|
4350
4358
|
function handlePick(pick) {
|
|
4351
4359
|
if (!config || isOver || submitting || !currentPair) return;
|
|
4352
|
-
const prevAnswers =
|
|
4360
|
+
const prevAnswers = answeredPairs.map((p) => ({ pairIndex: p.pairIndex, pick: p.pick }));
|
|
4353
4361
|
const newAnswers = [...prevAnswers, { pairIndex: currentPair.pairIndex, pick }];
|
|
4354
4362
|
onSubmit(JSON.stringify({ answers: newAnswers }));
|
|
4355
4363
|
}
|
|
4356
4364
|
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl", "data-testid": "game-screen-higher-or-lower", children: [
|
|
4357
4365
|
!config && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
|
|
4358
4366
|
config && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
4359
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-
|
|
4360
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.
|
|
4361
|
-
|
|
4367
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl-head", children: [
|
|
4368
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
|
|
4369
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hl-title", children: "Higher or Lower" }),
|
|
4370
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl-sub", children: [
|
|
4371
|
+
config.statLabel,
|
|
4372
|
+
" \xB7 ",
|
|
4373
|
+
config.seasonLabel
|
|
4374
|
+
] })
|
|
4375
|
+
] }),
|
|
4376
|
+
runLength > 0 && !isOver && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "ss-w-hl-streak", children: [
|
|
4377
|
+
"\u{1F525} ",
|
|
4378
|
+
runLength
|
|
4379
|
+
] })
|
|
4362
4380
|
] }),
|
|
4363
|
-
currentPair && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4364
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-
|
|
4365
|
-
|
|
4366
|
-
|
|
4381
|
+
currentPair && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
4382
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl-q", children: [
|
|
4383
|
+
"Who has more ",
|
|
4384
|
+
config.statLabel.toLowerCase(),
|
|
4385
|
+
"?"
|
|
4367
4386
|
] }),
|
|
4368
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-
|
|
4369
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.
|
|
4370
|
-
|
|
4387
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpair", children: [
|
|
4388
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpc", children: [
|
|
4389
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-av", "aria-hidden": "true", children: "\u26BD" }),
|
|
4390
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-name", children: currentPair.playerAName }),
|
|
4391
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-stat", children: config.statLabel }),
|
|
4392
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-val", children: currentPair.playerAValue })
|
|
4393
|
+
] }),
|
|
4394
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlbtns", children: [
|
|
4395
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4396
|
+
"button",
|
|
4397
|
+
{
|
|
4398
|
+
type: "button",
|
|
4399
|
+
className: "ss-w-hlbtn ss-w-hlbtn--up",
|
|
4400
|
+
disabled: submitting,
|
|
4401
|
+
onClick: () => handlePick("higher"),
|
|
4402
|
+
children: "Higher \u25B2"
|
|
4403
|
+
}
|
|
4404
|
+
),
|
|
4405
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hl-or", children: "or" }),
|
|
4406
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4407
|
+
"button",
|
|
4408
|
+
{
|
|
4409
|
+
type: "button",
|
|
4410
|
+
className: "ss-w-hlbtn ss-w-hlbtn--dn",
|
|
4411
|
+
disabled: submitting,
|
|
4412
|
+
onClick: () => handlePick("lower"),
|
|
4413
|
+
children: "Lower \u25BC"
|
|
4414
|
+
}
|
|
4415
|
+
)
|
|
4416
|
+
] }),
|
|
4417
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
|
|
4418
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-av", "aria-hidden": "true", children: "\u26BD" }),
|
|
4419
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-name", children: currentPair.playerBName }),
|
|
4420
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-stat", children: config.statLabel }),
|
|
4421
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-val ss-w-hlpc-val--hidden", children: "?" })
|
|
4422
|
+
] })
|
|
4371
4423
|
] })
|
|
4372
4424
|
] }),
|
|
4373
|
-
|
|
4374
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
}
|
|
4383
|
-
),
|
|
4384
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4385
|
-
"button",
|
|
4386
|
-
{
|
|
4387
|
-
type: "button",
|
|
4388
|
-
className: "ss-w-hlbtn",
|
|
4389
|
-
disabled: submitting,
|
|
4390
|
-
onClick: () => handlePick("lower"),
|
|
4391
|
-
children: "Lower"
|
|
4392
|
-
}
|
|
4393
|
-
)
|
|
4425
|
+
isOver && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl-over", children: [
|
|
4426
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hl-over-title", children: runEndedWrong ? "Run over" : "Nice run!" }),
|
|
4427
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hl-over-score", children: score }),
|
|
4428
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl-over-sub", children: [
|
|
4429
|
+
correctCount,
|
|
4430
|
+
" correct",
|
|
4431
|
+
correctCount === 1 ? "" : "",
|
|
4432
|
+
" \xB7 come back tomorrow for a new run"
|
|
4433
|
+
] })
|
|
4394
4434
|
] }),
|
|
4395
|
-
|
|
4435
|
+
answeredPairs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlresults", children: answeredPairs.map((answered) => {
|
|
4396
4436
|
const pair = config.pairs.find((p) => p.pairIndex === answered.pairIndex);
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
|
|
4402
|
-
/* @__PURE__ */ (0, import_jsx_runtime56.
|
|
4403
|
-
|
|
4404
|
-
|
|
4405
|
-
|
|
4406
|
-
|
|
4407
|
-
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4438
|
+
"div",
|
|
4439
|
+
{
|
|
4440
|
+
className: `ss-w-hlrrow ss-w-hlrrow--${answered.wasCorrect ? "correct" : "wrong"}`,
|
|
4441
|
+
children: [
|
|
4442
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "ss-w-hlrrow-names", children: [
|
|
4443
|
+
pair?.playerAName ?? "?",
|
|
4444
|
+
" ",
|
|
4445
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("b", { className: "ss-w-hlrrow-val", children: pair?.playerAValue }),
|
|
4446
|
+
" vs ",
|
|
4447
|
+
pair?.playerBName ?? "?",
|
|
4448
|
+
" ",
|
|
4449
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("b", { className: "ss-w-hlrrow-val", children: answered.playerBValue })
|
|
4450
|
+
] }),
|
|
4451
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlrrow-pick", children: answered.pick }),
|
|
4452
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlrrow-icon", children: answered.wasCorrect ? "\u2713" : "\u2717" })
|
|
4453
|
+
]
|
|
4454
|
+
},
|
|
4455
|
+
answered.pairIndex
|
|
4456
|
+
);
|
|
4413
4457
|
}) })
|
|
4414
4458
|
] })
|
|
4415
4459
|
] });
|
|
@@ -4426,29 +4470,19 @@ function parseClientState3(json) {
|
|
|
4426
4470
|
return null;
|
|
4427
4471
|
}
|
|
4428
4472
|
}
|
|
4429
|
-
function
|
|
4473
|
+
function spellYears(spell) {
|
|
4430
4474
|
const parts = [];
|
|
4431
4475
|
if (spell.startYear) parts.push(String(spell.startYear));
|
|
4432
4476
|
if (spell.endYear) parts.push(String(spell.endYear));
|
|
4433
|
-
|
|
4434
|
-
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-spell-yr", children: parts.join(" \u2013 ") });
|
|
4477
|
+
return parts.join("\u2013");
|
|
4435
4478
|
}
|
|
4436
4479
|
function ClubSpellCard({ spell }) {
|
|
4480
|
+
const years = spellYears(spell);
|
|
4437
4481
|
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ss-w-cpath-club${spell.isLoan ? " ss-w-cpath-club--loan" : ""}`, children: [
|
|
4438
|
-
spell.crestUrl ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4439
|
-
|
|
4440
|
-
|
|
4441
|
-
|
|
4442
|
-
alt: spell.clubName,
|
|
4443
|
-
className: "ss-w-cpath-crest",
|
|
4444
|
-
loading: "lazy"
|
|
4445
|
-
}
|
|
4446
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-crest ss-w-cpath-crest--fallback", "aria-hidden": "true" }),
|
|
4447
|
-
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-club-info", children: [
|
|
4448
|
-
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-club-name", children: spell.clubName }),
|
|
4449
|
-
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SpellYear, { spell }),
|
|
4450
|
-
spell.isLoan && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-loan-badge", children: "Loan" })
|
|
4451
|
-
] })
|
|
4482
|
+
spell.crestUrl ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("img", { src: spell.crestUrl, alt: "", className: "ss-w-cpath-crest", loading: "lazy" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-crest ss-w-cpath-crest--fallback", "aria-hidden": "true", children: spell.clubName.slice(0, 3).toUpperCase() }),
|
|
4483
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-club-name", children: spell.clubName }),
|
|
4484
|
+
years && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-spell-yr", children: years }),
|
|
4485
|
+
spell.isLoan && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-loan-badge", children: "Loan" })
|
|
4452
4486
|
] });
|
|
4453
4487
|
}
|
|
4454
4488
|
function CareerPathGame({
|
|
@@ -4460,11 +4494,11 @@ function CareerPathGame({
|
|
|
4460
4494
|
const [query, setQuery] = (0, import_react30.useState)("");
|
|
4461
4495
|
const inputId = (0, import_react30.useId)();
|
|
4462
4496
|
const clientState = parseClientState3(result?.clientStateJson);
|
|
4463
|
-
const alreadyGuessedIds = new Set(
|
|
4464
|
-
clientState?.guessResults.map((g) => g.playerId) ?? []
|
|
4465
|
-
);
|
|
4497
|
+
const alreadyGuessedIds = new Set(clientState?.guessResults.map((g) => g.playerId) ?? []);
|
|
4466
4498
|
const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
|
|
4467
4499
|
const visiblePath = clientState?.visiblePath ?? config?.initialPath ?? [];
|
|
4500
|
+
const totalClubs = clientState?.totalClubs ?? config?.totalClubs ?? visiblePath.length;
|
|
4501
|
+
const hiddenCount = Math.max(0, totalClubs - visiblePath.length);
|
|
4468
4502
|
const filtered = config && !isOver ? config.typeaheadPool.filter(
|
|
4469
4503
|
(p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
|
|
4470
4504
|
) : [];
|
|
@@ -4478,24 +4512,33 @@ function CareerPathGame({
|
|
|
4478
4512
|
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath", "data-testid": "game-screen-career-path", children: [
|
|
4479
4513
|
!config && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
|
|
4480
4514
|
config && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
4481
|
-
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-
|
|
4482
|
-
/* @__PURE__ */ (0, import_jsx_runtime57.
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4515
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-head", children: [
|
|
4516
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
4517
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-title", children: "Career Path" }),
|
|
4518
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-sub", children: "Which player had this career?" })
|
|
4519
|
+
] }),
|
|
4520
|
+
clientState && !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "ss-w-cpath-left", children: [
|
|
4521
|
+
clientState.guessesRemaining,
|
|
4522
|
+
" left"
|
|
4486
4523
|
] })
|
|
4487
4524
|
] }),
|
|
4488
|
-
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-
|
|
4489
|
-
visiblePath.map((spell, i) => /* @__PURE__ */ (0, import_jsx_runtime57.
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4525
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-seq", children: [
|
|
4526
|
+
visiblePath.map((spell, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react30.Fragment, { children: [
|
|
4527
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-arrow", "aria-hidden": "true", children: "\u2192" }),
|
|
4528
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ClubSpellCard, { spell })
|
|
4529
|
+
] }, `${spell.clubName}-${i}`)),
|
|
4530
|
+
hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
4531
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-arrow", "aria-hidden": "true", children: "\u2192" }),
|
|
4532
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-hidden", children: [
|
|
4533
|
+
"+",
|
|
4534
|
+
hiddenCount,
|
|
4535
|
+
" more"
|
|
4536
|
+
] })
|
|
4494
4537
|
] })
|
|
4495
4538
|
] }),
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
clientState.
|
|
4539
|
+
clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-hint", children: [
|
|
4540
|
+
"\u{1F4A1} ",
|
|
4541
|
+
clientState.hintLine
|
|
4499
4542
|
] }),
|
|
4500
4543
|
!isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-gtta", children: [
|
|
4501
4544
|
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
@@ -4505,7 +4548,7 @@ function CareerPathGame({
|
|
|
4505
4548
|
type: "text",
|
|
4506
4549
|
role: "textbox",
|
|
4507
4550
|
className: "ss-w-gtta-i",
|
|
4508
|
-
placeholder: "
|
|
4551
|
+
placeholder: "Name the player\u2026",
|
|
4509
4552
|
value: query,
|
|
4510
4553
|
disabled: submitting || isOver,
|
|
4511
4554
|
onChange: (e) => setQuery(e.target.value),
|
|
@@ -4530,12 +4573,15 @@ function CareerPathGame({
|
|
|
4530
4573
|
p.id
|
|
4531
4574
|
)) })
|
|
4532
4575
|
] }),
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
clientState.
|
|
4536
|
-
"
|
|
4537
|
-
|
|
4538
|
-
|
|
4576
|
+
isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ss-w-cpath-banner ss-w-cpath-banner--${clientState.solved ? "solved" : "failed"}`, children: [
|
|
4577
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-banner-label", children: clientState.solved ? "\u2705 Career traced!" : "\u{1F614} Out of guesses" }),
|
|
4578
|
+
clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-banner-name", children: clientState.revealedPlayerName }),
|
|
4579
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-banner-sub", children: [
|
|
4580
|
+
clientState.guessesUsed,
|
|
4581
|
+
" guess",
|
|
4582
|
+
clientState.guessesUsed === 1 ? "" : "es",
|
|
4583
|
+
" \xB7 come back tomorrow"
|
|
4584
|
+
] })
|
|
4539
4585
|
] })
|
|
4540
4586
|
] })
|
|
4541
4587
|
] });
|
|
@@ -4589,7 +4635,7 @@ function SearchSheet({
|
|
|
4589
4635
|
}
|
|
4590
4636
|
)
|
|
4591
4637
|
] }),
|
|
4592
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-gtta", children: [
|
|
4638
|
+
playerPool.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-sheet-empty", children: "No players available to search yet." }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-gtta", children: [
|
|
4593
4639
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4594
4640
|
"input",
|
|
4595
4641
|
{
|
|
@@ -4654,18 +4700,23 @@ function BeatTheGridGame({
|
|
|
4654
4700
|
const rows = config.rows;
|
|
4655
4701
|
const cols = config.cols;
|
|
4656
4702
|
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg", "data-testid": "game-screen-beat-the-grid", children: [
|
|
4657
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-
|
|
4658
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("
|
|
4659
|
-
"
|
|
4660
|
-
|
|
4703
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-head", children: [
|
|
4704
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { children: [
|
|
4705
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-title", children: "Beat the Grid" }),
|
|
4706
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-sub", children: "Fill each cell with a player who fits" })
|
|
4661
4707
|
] }),
|
|
4662
|
-
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
|
|
4666
|
-
|
|
4667
|
-
|
|
4668
|
-
|
|
4708
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-ctx", children: [
|
|
4709
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "ss-w-btg-ctx-score", children: [
|
|
4710
|
+
clientState?.totalScore ?? 0,
|
|
4711
|
+
" pts"
|
|
4712
|
+
] }),
|
|
4713
|
+
!isLocked2 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "ss-w-btg-ctx-left", children: [
|
|
4714
|
+
config.maxGuesses - filledCells.length,
|
|
4715
|
+
" cell",
|
|
4716
|
+
config.maxGuesses - filledCells.length !== 1 ? "s" : "",
|
|
4717
|
+
" left"
|
|
4718
|
+
] })
|
|
4719
|
+
] })
|
|
4669
4720
|
] }),
|
|
4670
4721
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
4671
4722
|
"div",
|
|
@@ -4706,6 +4757,16 @@ function BeatTheGridGame({
|
|
|
4706
4757
|
]
|
|
4707
4758
|
}
|
|
4708
4759
|
),
|
|
4760
|
+
isLocked2 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-done", children: [
|
|
4761
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-done-label", children: "\u{1F532} Grid complete" }),
|
|
4762
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-done-score", children: clientState?.totalScore ?? 0 }),
|
|
4763
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-done-sub", children: [
|
|
4764
|
+
filledCells.filter((c) => c.isCorrect).length,
|
|
4765
|
+
"/",
|
|
4766
|
+
filledCells.length,
|
|
4767
|
+
" correct \xB7 come back tomorrow"
|
|
4768
|
+
] })
|
|
4769
|
+
] }),
|
|
4709
4770
|
activeCell !== null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4710
4771
|
SearchSheet,
|
|
4711
4772
|
{
|
|
@@ -4746,6 +4807,7 @@ function GuessTheXiGame({
|
|
|
4746
4807
|
}) {
|
|
4747
4808
|
const clientState = parseClientState5(result?.clientStateJson);
|
|
4748
4809
|
const isOver = result?.alreadyPlayed === true || clientState?.status === "solved" || clientState?.status === "failed";
|
|
4810
|
+
const solved = clientState?.status === "solved";
|
|
4749
4811
|
function handlePick(teamId) {
|
|
4750
4812
|
if (!config || isOver || submitting) return;
|
|
4751
4813
|
const prevGuesses = clientState?.guessHistory.map((g) => ({ teamId: g.teamId })) ?? [];
|
|
@@ -4755,14 +4817,23 @@ function GuessTheXiGame({
|
|
|
4755
4817
|
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi", "data-testid": "game-screen-guess-the-xi", children: [
|
|
4756
4818
|
!config && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
|
|
4757
4819
|
config && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
|
|
4758
|
-
/* @__PURE__ */ (0, import_jsx_runtime59.
|
|
4759
|
-
|
|
4820
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-head", children: [
|
|
4821
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
|
|
4822
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-title", children: "Guess the XI" }),
|
|
4823
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-sub", children: config.poolLabel })
|
|
4824
|
+
] }),
|
|
4825
|
+
clientState && !isOver && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "ss-w-gxi-left", children: [
|
|
4826
|
+
"Guess ",
|
|
4827
|
+
clientState.guessesUsed + 1,
|
|
4828
|
+
"/6"
|
|
4829
|
+
] })
|
|
4830
|
+
] }),
|
|
4831
|
+
config.positions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pitch", children: config.positions.map((pos, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-pslot", children: [
|
|
4760
4832
|
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-pslot-pos", children: pos.slot }),
|
|
4761
4833
|
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-pslot-nat", children: pos.nationality })
|
|
4762
|
-
] }, pos.slot)) }),
|
|
4834
|
+
] }, `${pos.slot}-${i}`)) }),
|
|
4763
4835
|
clientState && clientState.earnedReveals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-reveals", children: clientState.earnedReveals.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RevealCard, { reveal: r }, i)) }),
|
|
4764
|
-
isOver
|
|
4765
|
-
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pool", children: config.teamPool.map((team) => {
|
|
4836
|
+
!isOver ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pool", children: config.teamPool.map((team) => {
|
|
4766
4837
|
const guessRecord = clientState?.guessHistory.find((g) => g.teamId === team.teamId);
|
|
4767
4838
|
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
4768
4839
|
"button",
|
|
@@ -4772,17 +4843,21 @@ function GuessTheXiGame({
|
|
|
4772
4843
|
"ss-w-gxi-team-btn",
|
|
4773
4844
|
guessRecord ? guessRecord.wasCorrect ? "ss-w-gxi-team-btn--correct" : "ss-w-gxi-team-btn--wrong" : ""
|
|
4774
4845
|
].filter(Boolean).join(" "),
|
|
4775
|
-
disabled:
|
|
4846
|
+
disabled: submitting,
|
|
4776
4847
|
onClick: () => handlePick(team.teamId),
|
|
4777
4848
|
children: team.teamName
|
|
4778
4849
|
},
|
|
4779
4850
|
team.teamId
|
|
4780
4851
|
);
|
|
4781
|
-
}) }),
|
|
4782
|
-
|
|
4783
|
-
"
|
|
4784
|
-
|
|
4785
|
-
|
|
4852
|
+
}) }) : clientState && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${solved ? "solved" : "failed"}`, children: [
|
|
4853
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-banner-label", children: solved ? "\u2705 Solved!" : "\u{1F614} Out of guesses" }),
|
|
4854
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-banner-score", children: clientState.score }),
|
|
4855
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-banner-sub", children: [
|
|
4856
|
+
clientState.guessesUsed,
|
|
4857
|
+
" guess",
|
|
4858
|
+
clientState.guessesUsed === 1 ? "" : "es",
|
|
4859
|
+
" \xB7 come back tomorrow"
|
|
4860
|
+
] })
|
|
4786
4861
|
] })
|
|
4787
4862
|
] })
|
|
4788
4863
|
] });
|
|
@@ -6637,101 +6712,121 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
6637
6712
|
.ss-w-gtta-opt { padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ss-w-ink); border-bottom: 1px solid var(--ss-w-line); }
|
|
6638
6713
|
.ss-w-gtta-opt:last-child { border-bottom: none; }
|
|
6639
6714
|
.ss-w-gtta-opt:hover { background: var(--ss-w-bubble); }
|
|
6640
|
-
/*
|
|
6641
|
-
.ss-w-
|
|
6642
|
-
.ss-w-
|
|
6643
|
-
.ss-w-
|
|
6644
|
-
|
|
6645
|
-
|
|
6646
|
-
.ss-w-
|
|
6647
|
-
.ss-w-
|
|
6648
|
-
|
|
6649
|
-
.ss-w-
|
|
6650
|
-
|
|
6651
|
-
.ss-w-gtile
|
|
6715
|
+
/* Header: title + sub + remaining chip */
|
|
6716
|
+
.ss-w-gt-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
6717
|
+
.ss-w-gt-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
6718
|
+
.ss-w-gt-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
6719
|
+
.ss-w-gt-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
|
|
6720
|
+
/* Guess rows \u2014 one labelled block per guess */
|
|
6721
|
+
.ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
|
|
6722
|
+
.ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
|
|
6723
|
+
.ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
|
|
6724
|
+
.ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
|
|
6725
|
+
/* Verdict tiles: label on top, verdict glyph below */
|
|
6726
|
+
.ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; gap: 2px; min-width: 0; }
|
|
6727
|
+
.ss-w-gtile-lab { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
|
|
6728
|
+
.ss-w-gtile-v { font-size: 15px; font-weight: 800; line-height: 1; }
|
|
6729
|
+
.ss-w-gtile--exact { background: var(--ss-w-correct); color: #062611; }
|
|
6730
|
+
.ss-w-gtile--near { background: var(--ss-w-accent); color: #241700; }
|
|
6652
6731
|
.ss-w-gtile--miss { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
|
|
6653
|
-
.ss-w-gtile-dir { font-size: 11px; line-height: 1; }
|
|
6654
6732
|
/* Hint line */
|
|
6655
|
-
.ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding:
|
|
6656
|
-
/*
|
|
6657
|
-
.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap:
|
|
6733
|
+
.ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
|
|
6734
|
+
/* Terminal outcome banner */
|
|
6735
|
+
.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
6658
6736
|
.ss-w-gt-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
|
|
6659
|
-
.ss-w-gt-banner--failed { background:
|
|
6660
|
-
.ss-w-gt-banner-name { font-size:
|
|
6661
|
-
.ss-w-gt-banner-label { font-size:
|
|
6737
|
+
.ss-w-gt-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
6738
|
+
.ss-w-gt-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
|
|
6739
|
+
.ss-w-gt-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
6740
|
+
.ss-w-gt-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
6662
6741
|
|
|
6663
|
-
/* ---- Higher or Lower game screen (D3) ---- */
|
|
6742
|
+
/* ---- Higher or Lower game screen (D3) \u2014 artifact hl-pair/pcard/hlb layout ---- */
|
|
6664
6743
|
.ss-w-hl { display: flex; flex-direction: column; gap: 12px; }
|
|
6665
|
-
/*
|
|
6666
|
-
.ss-w-
|
|
6667
|
-
.ss-w-
|
|
6668
|
-
.ss-w-
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
|
|
6673
|
-
|
|
6674
|
-
.ss-w-hlpc {
|
|
6675
|
-
.ss-w-hlpc
|
|
6676
|
-
.ss-w-hlpc-name { font-size: 12.5px; font-weight:
|
|
6677
|
-
.ss-w-hlpc-
|
|
6678
|
-
.ss-w-hlpc-val
|
|
6679
|
-
.ss-w-hlpc-val--
|
|
6680
|
-
|
|
6681
|
-
.ss-w-
|
|
6682
|
-
.ss-w-
|
|
6683
|
-
.ss-w-
|
|
6684
|
-
|
|
6685
|
-
.ss-w-
|
|
6686
|
-
.ss-w-hlbtn
|
|
6687
|
-
.ss-w-hlbtn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); color: var(--ss-w-accent); }
|
|
6744
|
+
/* Header: title + sub + streak chip */
|
|
6745
|
+
.ss-w-hl-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
6746
|
+
.ss-w-hl-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
6747
|
+
.ss-w-hl-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
6748
|
+
.ss-w-hl-streak { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
|
|
6749
|
+
/* Question line */
|
|
6750
|
+
.ss-w-hl-q { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-faint); }
|
|
6751
|
+
/* Pair: player A | Higher/Lower | player B */
|
|
6752
|
+
.ss-w-hlpair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
|
|
6753
|
+
.ss-w-hlpc { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; text-align: center; min-width: 0; }
|
|
6754
|
+
.ss-w-hlpc-av { width: 42px; height: 42px; border-radius: 50%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 20px; flex: none; }
|
|
6755
|
+
.ss-w-hlpc-name { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); line-height: 1.15; }
|
|
6756
|
+
.ss-w-hlpc-stat { font-size: 8.5px; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
|
|
6757
|
+
.ss-w-hlpc-val { font-size: 30px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
|
|
6758
|
+
.ss-w-hlpc-val--hidden { color: var(--ss-w-faint); }
|
|
6759
|
+
/* Higher / Lower \u2014 middle column */
|
|
6760
|
+
.ss-w-hlbtns { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
|
|
6761
|
+
.ss-w-hl-or { text-align: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); }
|
|
6762
|
+
.ss-w-hlbtn { font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 9px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--ss-w-line); white-space: nowrap; transition: border-color .1s, background .1s; }
|
|
6763
|
+
.ss-w-hlbtn--up { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); color: var(--ss-w-accent); border-color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
|
|
6764
|
+
.ss-w-hlbtn--dn { background: var(--ss-w-panel); color: var(--ss-w-ink); }
|
|
6765
|
+
.ss-w-hlbtn:hover:not(:disabled) { border-color: var(--ss-w-accent); }
|
|
6688
6766
|
.ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
|
|
6689
|
-
/*
|
|
6690
|
-
.ss-w-
|
|
6691
|
-
.ss-w-
|
|
6692
|
-
.ss-w-
|
|
6767
|
+
/* Run-over terminal panel */
|
|
6768
|
+
.ss-w-hl-over { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; }
|
|
6769
|
+
.ss-w-hl-over-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); }
|
|
6770
|
+
.ss-w-hl-over-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
6771
|
+
.ss-w-hl-over-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
6772
|
+
/* Answered history \u2014 clean single-line rows with the revealed value */
|
|
6773
|
+
.ss-w-hlresults { display: flex; flex-direction: column; gap: 5px; }
|
|
6774
|
+
.ss-w-hlrrow { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
|
|
6775
|
+
.ss-w-hlrrow--correct { background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 30%, var(--ss-w-line)); }
|
|
6693
6776
|
.ss-w-hlrrow--wrong { background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); }
|
|
6694
6777
|
.ss-w-hlrrow-names { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
6695
|
-
.ss-w-hlrrow-
|
|
6778
|
+
.ss-w-hlrrow-val { font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
6779
|
+
.ss-w-hlrrow-pick { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); flex: none; }
|
|
6696
6780
|
.ss-w-hlrrow-icon { font-size: 14px; flex: none; }
|
|
6781
|
+
.ss-w-hlrrow--correct .ss-w-hlrrow-icon { color: var(--ss-w-correct); }
|
|
6782
|
+
.ss-w-hlrrow--wrong .ss-w-hlrrow-icon { color: var(--ss-w-cta); }
|
|
6697
6783
|
|
|
6698
|
-
/* ---- Career Path game screen (D3) ---- */
|
|
6784
|
+
/* ---- Career Path game screen (D3) \u2014 artifact cpath/club/cto layout ---- */
|
|
6699
6785
|
.ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
|
|
6700
|
-
/*
|
|
6701
|
-
.ss-w-cpath-
|
|
6702
|
-
.ss-w-cpath-
|
|
6703
|
-
.ss-w-cpath-
|
|
6704
|
-
|
|
6705
|
-
|
|
6706
|
-
|
|
6707
|
-
.ss-w-cpath-
|
|
6708
|
-
|
|
6709
|
-
|
|
6710
|
-
.ss-w-cpath-crest { width:
|
|
6711
|
-
.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line);
|
|
6712
|
-
|
|
6713
|
-
.ss-w-cpath-
|
|
6714
|
-
.ss-w-cpath-
|
|
6715
|
-
.ss-w-cpath-
|
|
6716
|
-
|
|
6717
|
-
|
|
6718
|
-
.ss-w-cpath-hidden { font-size: 11.5px; color: var(--ss-w-faint); font-style: italic; text-align: center; padding: 6px 0 2px; }
|
|
6786
|
+
/* Header */
|
|
6787
|
+
.ss-w-cpath-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
6788
|
+
.ss-w-cpath-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
6789
|
+
.ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
6790
|
+
.ss-w-cpath-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
|
|
6791
|
+
/* Career sequence \u2014 horizontal crests with arrows */
|
|
6792
|
+
.ss-w-cpath-seq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 13px 11px; }
|
|
6793
|
+
.ss-w-cpath-arrow { align-self: center; color: var(--ss-w-faint); font-size: 13px; padding-top: 10px; }
|
|
6794
|
+
/* Single club \u2014 small vertical card */
|
|
6795
|
+
.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
|
|
6796
|
+
.ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
|
|
6797
|
+
.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-faint); }
|
|
6798
|
+
.ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
|
|
6799
|
+
.ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
6800
|
+
.ss-w-cpath-loan-badge { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-accent) 15%, var(--ss-w-panel)); color: var(--ss-w-accent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
|
|
6801
|
+
.ss-w-cpath-club--loan .ss-w-cpath-crest { border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
|
|
6802
|
+
/* Hidden clubs chip */
|
|
6803
|
+
.ss-w-cpath-hidden { align-self: center; font-size: 9px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }
|
|
6719
6804
|
/* Hint line */
|
|
6720
|
-
.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding:
|
|
6721
|
-
/*
|
|
6722
|
-
.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap:
|
|
6805
|
+
.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
|
|
6806
|
+
/* Terminal outcome */
|
|
6807
|
+
.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
6723
6808
|
.ss-w-cpath-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
|
|
6724
|
-
.ss-w-cpath-banner--failed { background:
|
|
6725
|
-
.ss-w-cpath-banner-name { font-size:
|
|
6726
|
-
.ss-w-cpath-banner-label { font-size:
|
|
6809
|
+
.ss-w-cpath-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
6810
|
+
.ss-w-cpath-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
|
|
6811
|
+
.ss-w-cpath-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
6812
|
+
.ss-w-cpath-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
6727
6813
|
|
|
6728
|
-
/* ---- Beat the Grid game screen (D3) ---- */
|
|
6814
|
+
/* ---- Beat the Grid game screen (D3) \u2014 artifact grid/gc layout ---- */
|
|
6729
6815
|
.ss-w-btg { display: flex; flex-direction: column; gap: 10px; }
|
|
6730
|
-
/*
|
|
6731
|
-
.ss-w-btg-
|
|
6732
|
-
.ss-w-btg-
|
|
6733
|
-
.ss-w-btg-
|
|
6734
|
-
.ss-w-btg-ctx
|
|
6816
|
+
/* Header */
|
|
6817
|
+
.ss-w-btg-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
6818
|
+
.ss-w-btg-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
6819
|
+
.ss-w-btg-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
6820
|
+
.ss-w-btg-ctx { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
|
|
6821
|
+
.ss-w-btg-ctx-score { font-size: 13px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
6822
|
+
.ss-w-btg-ctx-left { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
6823
|
+
/* Terminal summary */
|
|
6824
|
+
.ss-w-btg-done { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
6825
|
+
.ss-w-btg-done-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
6826
|
+
.ss-w-btg-done-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
6827
|
+
.ss-w-btg-done-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
6828
|
+
/* Empty search pool note */
|
|
6829
|
+
.ss-w-btg-sheet-empty { font-size: 12px; color: var(--ss-w-faint); text-align: center; padding: 14px 8px; }
|
|
6735
6830
|
/* Grid layout \u2014 col count driven inline via style */
|
|
6736
6831
|
.ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
|
|
6737
6832
|
/* Generic grid cell */
|
|
@@ -6764,9 +6859,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
6764
6859
|
|
|
6765
6860
|
/* ---- Guess the XI game screen (D3) ---- */
|
|
6766
6861
|
.ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
|
|
6767
|
-
/*
|
|
6768
|
-
.ss-w-gxi-
|
|
6769
|
-
.ss-w-gxi-
|
|
6862
|
+
/* Header */
|
|
6863
|
+
.ss-w-gxi-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
6864
|
+
.ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
6865
|
+
.ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
6866
|
+
.ss-w-gxi-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
|
|
6770
6867
|
/* Positions pitch: compact slot grid */
|
|
6771
6868
|
.ss-w-gxi-pitch { display: flex; flex-wrap: wrap; gap: 5px; }
|
|
6772
6869
|
.ss-w-gxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 10px; min-width: 52px; }
|
|
@@ -6784,11 +6881,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
6784
6881
|
.ss-w-gxi-team-btn:disabled { opacity: .5; cursor: not-allowed; }
|
|
6785
6882
|
.ss-w-gxi-team-btn--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); color: var(--ss-w-correct); }
|
|
6786
6883
|
.ss-w-gxi-team-btn--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); text-decoration: line-through; opacity: .65; }
|
|
6787
|
-
/*
|
|
6788
|
-
.ss-w-gxi-banner { display: flex; align-items: center;
|
|
6884
|
+
/* Terminal outcome banner */
|
|
6885
|
+
.ss-w-gxi-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
6789
6886
|
.ss-w-gxi-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
|
|
6790
|
-
.ss-w-gxi-banner--failed { background:
|
|
6887
|
+
.ss-w-gxi-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
6791
6888
|
.ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
6889
|
+
.ss-w-gxi-banner-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
6890
|
+
.ss-w-gxi-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
6792
6891
|
/* Hint line */
|
|
6793
6892
|
.ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
|
|
6794
6893
|
|