Skip to content

Commit 24f6686

Browse files
thomasasenthomasasen
committed
Add player card part restoration and cricket theme responsiveness
- Implemented `markPlayerCardParts` function to restore truncated player names from avatar metadata. - Added tests for `markPlayerCardParts` to ensure correct functionality for both truncated and non-truncated names. - Introduced `createSharedPlayerCardWithAvatarName` helper function for creating player card elements in tests. - Enhanced cricket theme CSS to scale player columns and active player parts responsively, including avatar and score sizes. - Updated shared common layout CSS to maintain responsive design across player cards.
1 parent 3803021 commit 24f6686

16 files changed

Lines changed: 878 additions & 242 deletions

‎CHANGELOG.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,22 @@ zum nächsten Release-Commit vorübergehend auf `HEAD` zeigen.
1212
Dieses Repository führt keine `Unreleased`-Sektion. Jeder dokumentierte Eintrag gehört
1313
direkt zu einer versionierten Release-Sektion.
1414

15+
## [2.4.1] - 2026-06-17
16+
17+
### Changed
18+
19+
- Nutzerwirkung: X01-artige Themes, Bermuda, Gotcha, Cricket/Tactics und X01 2Player nutzen große Bildschirme besser aus; aktive Spieler bleiben sichtbar größer, während inaktive Spieler kompakter bleiben.
20+
Technik: Die Theme-CSS-Verträge verwenden gemeinsame responsive Player-Größenvariablen, Cricket- und X01-2Player-spezifische Skalen sowie aktualisierte Template-Regressionen.
21+
- Nutzerwirkung: Profil-Badges wie `40+` wirken in den Spieleranzeigen konsistenter und entsprechen auch in Cricket/Tactics und X01 2Player stärker der X01-Darstellung.
22+
Technik: Gemeinsame Badge-Styles, Cricket-Wins-Badges und X01-2Player-Profil-Badges wurden vereinheitlicht und über CSS-Vertragstests abgesichert.
23+
24+
### Fixed
25+
26+
- Nutzerwirkung: Spieler-Namen nutzen im Mehrspielermodus den vorhandenen Platz besser aus und werden nicht schon von Autodarts vorzeitig als `..`-Text übernommen, wenn vollständige Avatar-Metadaten verfügbar sind.
27+
Technik: Die gemeinsame Player-Card-Part-Erkennung stellt gekürzte Namen aus `title`, `aria-label` oder Avatar-`alt` wieder her, bevor CSS-Ellipsis angewendet wird.
28+
- Nutzerwirkung: Die Punkteanzeige ist bündig zur Namens-/Badge-Zeile ausgerichtet und wird unten nicht mehr abgeschnitten.
29+
Technik: Der Score-Wrapper wird im Shared-Player-Grid semantisch positioniert; Line-Height, Overflow und Alignment-Anker wurden für aktive und inaktive Karten getrennt stabilisiert.
30+
1531
## [2.4.0] - 2026-06-17
1632

1733
### Changed
@@ -1696,7 +1712,8 @@ direkt zu einer versionierten Release-Sektion.
16961712
und Regressionstests eingeführt und die generierten README-/FEATURES-Texte wurden
16971713
entsprechend synchronisiert.
16981714

1699-
[2.4.0]: https://github.com/thomasasen/autodarts-xconfig/compare/55a936b...HEAD
1715+
[2.4.1]: https://github.com/thomasasen/autodarts-xconfig/compare/3803021...HEAD
1716+
[2.4.0]: https://github.com/thomasasen/autodarts-xconfig/compare/55a936b...3803021
17001717
[2.3.21]: https://github.com/thomasasen/autodarts-xconfig/compare/09ae6b2...55a936b
17011718
[2.3.20]: https://github.com/thomasasen/autodarts-xconfig/compare/09ae6b2...d86349d
17021719
[2.3.19]: https://github.com/thomasasen/autodarts-xconfig/compare/d48730f...09ae6b2

‎dist/autodarts-xconfig.meta.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// ==UserScript==
22
// @name autodarts-xconfig
33
// @namespace https://github.com/thomasasen/autodarts-xconfig
4-
// @version 2.4.0
4+
// @version 2.4.1
55
// @description Modular, side-effect resistant Tampermonkey runtime for Autodarts enhancements.
66
// @author Thomas Asen
77
// @license MIT

‎dist/autodarts-xconfig.user.js‎

Lines changed: 353 additions & 133 deletions
Large diffs are not rendered by default.

‎loader/autodarts-xconfig.user.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// ==UserScript==
22
// @name autodarts-xconfig
33
// @namespace https://github.com/thomasasen/autodarts-xconfig
4-
// @version 2.4.0
4+
// @version 2.4.1
55
// @description Modular, side-effect resistant Tampermonkey runtime for Autodarts enhancements.
66
// @author Thomas Asen
77
// @license MIT

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "autodarts-xconfig",
3-
"version": "2.4.0",
3+
"version": "2.4.1",
44
"description": "Clean successor architecture for autodarts xConfig userscript modules",
55
"type": "module",
66
"imports": {

‎src/core/bootstrap.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { createListenerRegistry } from "./listener-registry.js";
1313
import { createObserverRegistry } from "./observer-registry.js";
1414

1515
const GLOBAL_NAMESPACE_KEY = "__adXConfig";
16-
const API_VERSION = "2.4.0";
16+
const API_VERSION = "2.4.1";
1717
const STARTUP_DEFER_INTERVAL_MS = 16;
1818

1919
function getWindowTimerApi(windowRef) {

‎src/features/shared/player-card-parts.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,139 @@ function hasAnyClass(node, classNames) {
4242
return classNames.some((className) => node.classList.contains(className));
4343
}
4444

45+
function getTrimmedText(node) {
46+
if (!node || typeof node !== "object") {
47+
return "";
48+
}
49+
50+
return String(node.textContent || "").trim();
51+
}
52+
53+
function getAttributeText(node, attributeName) {
54+
if (!node || typeof node.getAttribute !== "function" || !attributeName) {
55+
return "";
56+
}
57+
58+
return String(node.getAttribute(attributeName) || "").trim();
59+
}
60+
61+
function normalizePlayerNameText(value) {
62+
return String(value || "")
63+
.trim()
64+
.replaceAll(/\s+/g, " ");
65+
}
66+
67+
function normalizeComparablePlayerName(value) {
68+
return normalizePlayerNameText(value)
69+
.toLowerCase()
70+
.replaceAll(/[\s.]+/g, "");
71+
}
72+
73+
function isLikelyTruncatedPlayerName(value) {
74+
const normalized = normalizePlayerNameText(value);
75+
return normalized.endsWith("..") || normalized.includes("\u2026");
76+
}
77+
78+
function findClosestDescendant(rootNode, selector) {
79+
if (!rootNode || typeof rootNode.querySelector !== "function") {
80+
return null;
81+
}
82+
83+
try {
84+
return rootNode.querySelector(selector);
85+
} catch (_) {
86+
return null;
87+
}
88+
}
89+
90+
function getElementChildren(node) {
91+
return Array.from(node?.children || []).filter((child) => child?.nodeType === 1);
92+
}
93+
94+
function hasMeaningfulText(node) {
95+
return getTrimmedText(node).length > 0;
96+
}
97+
98+
function resolvePlayerNameTextNode(nameNode) {
99+
if (!nameNode) {
100+
return null;
101+
}
102+
103+
return (
104+
getElementChildren(nameNode).find((child) => hasMeaningfulText(child)) ||
105+
findClosestDescendant(nameNode, "p") ||
106+
nameNode
107+
);
108+
}
109+
110+
function resolvePlayerAvatarAltText(avatarNode) {
111+
if (!avatarNode) {
112+
return "";
113+
}
114+
115+
const avatarImage =
116+
(avatarNode.matches?.("img") ? avatarNode : null) ||
117+
findClosestDescendant(avatarNode, "img");
118+
return normalizePlayerNameText(getAttributeText(avatarImage, "alt"));
119+
}
120+
121+
function formatResolvedPlayerDisplayName(value) {
122+
const normalized = normalizePlayerNameText(value);
123+
return normalized ? normalized.toLocaleUpperCase() : "";
124+
}
125+
126+
function setAttributeIfChanged(node, attributeName, value) {
127+
if (!node || typeof node.setAttribute !== "function" || !attributeName) {
128+
return;
129+
}
130+
131+
if (node.getAttribute?.(attributeName) !== value) {
132+
node.setAttribute(attributeName, value);
133+
}
134+
}
135+
136+
function maybeRestorePlayerDisplayName(nameNode, avatarNode) {
137+
if (!nameNode) {
138+
return;
139+
}
140+
141+
const nameTextNode = resolvePlayerNameTextNode(nameNode);
142+
const visibleName = normalizePlayerNameText(getTrimmedText(nameTextNode));
143+
if (!visibleName || !isLikelyTruncatedPlayerName(visibleName)) {
144+
return;
145+
}
146+
147+
const sourceCandidates = [
148+
getAttributeText(nameNode, "title"),
149+
getAttributeText(nameNode, "aria-label"),
150+
getAttributeText(nameTextNode, "title"),
151+
getAttributeText(nameTextNode, "aria-label"),
152+
resolvePlayerAvatarAltText(avatarNode),
153+
]
154+
.map((value) => normalizePlayerNameText(value))
155+
.filter(Boolean);
156+
157+
const visibleComparable = normalizeComparablePlayerName(visibleName);
158+
const resolvedSource = sourceCandidates.find((candidate) => {
159+
const comparableCandidate = normalizeComparablePlayerName(candidate);
160+
return comparableCandidate.length > visibleComparable.length;
161+
});
162+
if (!resolvedSource) {
163+
return;
164+
}
165+
166+
const resolvedDisplayName = formatResolvedPlayerDisplayName(resolvedSource);
167+
if (!resolvedDisplayName) {
168+
return;
169+
}
170+
171+
nameTextNode.textContent = resolvedDisplayName;
172+
setAttributeIfChanged(nameNode, "title", resolvedDisplayName);
173+
if (nameTextNode !== nameNode) {
174+
setAttributeIfChanged(nameTextNode, "title", resolvedDisplayName);
175+
}
176+
}
177+
45178
function isRoundBadgeNode(node) {
46179
if (!node?.classList?.contains?.("css-3fr5p8")) {
47180
return false;
@@ -131,6 +264,7 @@ export function markPlayerCardParts(cardNode) {
131264
cardNode.querySelector(".chakra-avatar") || cardNode.querySelector(".chakra-avatar__img"),
132265
PLAYER_CARD_PARTS.avatar
133266
);
267+
maybeRestorePlayerDisplayName(nameNode, avatarNode);
134268
const flagNode = setPart(cardNode.querySelector(".chakra-image"), PLAYER_CARD_PARTS.flag);
135269
const identityMediaNode = setPart(
136270
findIdentityMediaNode(cardNode, avatarNode, flagNode),

‎src/features/themes/bermuda/style.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { buildThemeCssBundle } from "../shared/theme-style-builder.js";
2+
import { buildSharedPlayerDisplayCss } from "../shared/player-card-layout.js";
23
import { buildPreviewPlacementCss } from "../shared/theme-utils.js";
34

45
export const STYLE_ID = "ad-ext-theme-bermuda-style";
@@ -13,7 +14,8 @@ const PREVIEW_PLACEMENT = Object.freeze({
1314
export function buildBermudaThemeCss(featureConfig = {}, options = {}) {
1415
const visualConfig = options.visualConfig || featureConfig;
1516
const previewCss = buildPreviewPlacementCss(PREVIEW_PLACEMENT);
16-
return buildThemeCssBundle(featureConfig, previewCss, visualConfig);
17+
const playerDisplayCss = buildSharedPlayerDisplayCss();
18+
return buildThemeCssBundle(featureConfig, `${previewCss}${playerDisplayCss}`, visualConfig);
1719
}
1820

1921
export { PREVIEW_PLACEMENT };

‎src/features/themes/cricket/style.js‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const cricketThemeCss = `
7171
--ad-ext-cricket-board-shell: rgba(6, 12, 22, 0.92);
7272
--ad-ext-cricket-board-rail: rgba(91, 133, 170, 0.3);
7373
--ad-ext-theme-cricket-player-column-min-width: 14.25rem;
74-
--ad-ext-theme-cricket-player-column-max-width: 15.5rem;
74+
--ad-ext-theme-cricket-player-column-max-width: 18.5rem;
7575
--ad-ext-theme-cricket-player-column-width: clamp(
7676
var(--ad-ext-theme-cricket-player-column-min-width),
7777
15vw,
@@ -97,18 +97,23 @@ const cricketThemeCss = `
9797
--ad-ext-theme-cricket-matches-badge-radius: 0.56rem;
9898
--ad-ext-theme-cricket-matches-font-size: var(--ad-ext-theme-cricket-matches-badge-height);
9999
--ad-ext-theme-cricket-left-stat-inset: calc(var(--ad-ext-theme-cricket-score-end-inset) + 0.05rem);
100-
--ad-ext-theme-cricket-player-avatar-size: 2.2rem;
101-
--ad-ext-theme-cricket-name-size-active: clamp(1.488rem, 1.644vw, 1.764rem);
102-
--ad-ext-theme-cricket-name-size-inactive: clamp(1.188rem, 1.272vw, 1.368rem);
100+
--ad-ext-theme-cricket-player-avatar-size-active: clamp(2.32rem, 2.6vw, 3rem);
101+
--ad-ext-theme-cricket-player-avatar-size-inactive: clamp(2.05rem, 2.2vw, 2.55rem);
102+
--ad-ext-theme-cricket-player-avatar-size: var(--ad-ext-theme-cricket-player-avatar-size-inactive);
103+
--ad-ext-theme-cricket-name-size-active: clamp(1.488rem, min(1.95vw, 8cqi), 2.05rem);
104+
--ad-ext-theme-cricket-name-size-inactive: clamp(1.188rem, min(1.5vw, 6.4cqi), 1.58rem);
103105
--ad-ext-theme-cricket-score-active-color: var(--theme-text-highlight-color);
104106
--ad-ext-theme-cricket-score-inactive-color: rgba(214, 229, 245, 0.84);
105-
--ad-ext-theme-cricket-score-size-active: clamp(3.35rem, 4.08vw, 4.48rem);
106-
--ad-ext-theme-cricket-score-size-inactive: clamp(2.26rem, 2.72vw, 3.08rem);
107+
--ad-ext-theme-cricket-score-size-active: clamp(3.35rem, min(4.7vw, 25cqi), 5.6rem);
108+
--ad-ext-theme-cricket-score-size-inactive: clamp(2.26rem, min(3.2vw, 19cqi), 3.72rem);
107109
--ad-ext-theme-cricket-score-shadow:
108110
0 1px 0 rgba(4, 10, 20, 0.92),
109111
0 0 16px rgba(4, 10, 20, 0.46);
110112
--ad-ext-theme-cricket-score-end-inset: 0.38rem;
111113
--ad-ext-theme-cricket-player-gap: 0rem;
114+
--ad-ext-theme-cricket-wins-font-size-active: 30px;
115+
--ad-ext-theme-cricket-wins-font-size-inactive: 30px;
116+
--ad-ext-theme-cricket-wins-font-size: var(--ad-ext-theme-cricket-wins-font-size-inactive);
112117
--ad-ext-theme-cricket-content-gap: 0.5rem;
113118
--ad-ext-theme-cricket-player-grid-gap: 0.35rem;
114119
--ad-ext-theme-cricket-left-padding-width: 1.25rem;
@@ -165,7 +170,9 @@ const cricketThemeCss = `
165170
--ad-ext-theme-cricket-name-size: var(--ad-ext-theme-cricket-name-size-inactive);
166171
--ad-ext-theme-cricket-score-size: var(--ad-ext-theme-cricket-score-size-inactive);
167172
--ad-ext-theme-cricket-score-color: var(--ad-ext-theme-cricket-score-inactive-color);
168-
--ad-ext-theme-cricket-wins-scale: 0.92;
173+
--ad-ext-theme-cricket-player-avatar-size: var(--ad-ext-theme-cricket-player-avatar-size-inactive);
174+
--ad-ext-theme-cricket-wins-font-size: var(--ad-ext-theme-cricket-wins-font-size-inactive);
175+
--ad-ext-theme-cricket-wins-scale: 1;
169176
}
170177
171178
#ad-ext-player-display .ad-ext-player.ad-ext-player-active,
@@ -175,9 +182,11 @@ const cricketThemeCss = `
175182
--ad-ext-theme-cricket-name-size: var(--ad-ext-theme-cricket-name-size-active);
176183
--ad-ext-theme-cricket-score-size: var(--ad-ext-theme-cricket-score-size-active);
177184
--ad-ext-theme-cricket-score-color: var(--ad-ext-theme-cricket-score-active-color);
185+
--ad-ext-theme-cricket-player-avatar-size: var(--ad-ext-theme-cricket-player-avatar-size-active);
178186
--ad-ext-theme-cricket-matches-badge-min-width: 2.55rem;
179187
--ad-ext-theme-cricket-matches-badge-padding-inline: 0.54rem;
180188
--ad-ext-theme-cricket-matches-badge-radius: 0.56rem;
189+
--ad-ext-theme-cricket-wins-font-size: var(--ad-ext-theme-cricket-wins-font-size-active);
181190
--ad-ext-theme-cricket-wins-scale: 1;
182191
}
183192
@@ -342,11 +351,13 @@ const cricketThemeCss = `
342351
justify-self: end !important;
343352
align-self: center !important;
344353
min-width: 0 !important;
345-
min-height: 1.05rem !important;
346-
padding-inline: 0.3rem !important;
347-
font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
348-
line-height: 1.05 !important;
349-
border-radius: 999px !important;
354+
width: auto !important;
355+
height: auto !important;
356+
min-height: 0 !important;
357+
padding: 0 4px !important;
358+
font-size: var(--ad-ext-theme-cricket-wins-font-size) !important;
359+
line-height: 1.2 !important;
360+
border-radius: 2px !important;
350361
transform: scale(var(--ad-ext-theme-cricket-wins-scale)) !important;
351362
transform-origin: right center !important;
352363
}
@@ -517,18 +528,20 @@ div.css-nfhdnc {
517528
518529
@supports (font-size: 1cqi) {
519530
#ad-ext-player-display .ad-ext-player{
520-
--ad-ext-theme-cricket-score-size: clamp(2.18rem, 18.8cqi, 4.72rem);
531+
--ad-ext-theme-cricket-score-size: clamp(2.26rem, min(19cqi, 31cqb), 3.72rem);
521532
}
522533
523534
#ad-ext-player-display .ad-ext-player.ad-ext-player-active,
524535
#ad-ext-player-display .ad-ext-player.ad-ext-player-winner,
525536
#ad-ext-player-display .ad-ext-player[${CRICKET_ACTIVE_PLAYER_ATTRIBUTE}="true"]{
526-
--ad-ext-theme-cricket-score-size: clamp(3rem, 23.2cqi, 5.88rem);
537+
--ad-ext-theme-cricket-score-size: clamp(3.35rem, min(25cqi, 42cqb), 5.6rem);
538+
--ad-ext-theme-cricket-player-avatar-size: clamp(2.32rem, min(12cqi, 18cqb), 3rem);
527539
}
528540
529541
#ad-ext-player-display .ad-ext-player.ad-ext-player-inactive,
530542
#ad-ext-player-display .ad-ext-player[${CRICKET_ACTIVE_PLAYER_ATTRIBUTE}="false"]{
531-
--ad-ext-theme-cricket-score-size: clamp(2.18rem, 18.8cqi, 4.72rem);
543+
--ad-ext-theme-cricket-score-size: clamp(2.26rem, min(19cqi, 31cqb), 3.72rem);
544+
--ad-ext-theme-cricket-player-avatar-size: clamp(2.05rem, min(10cqi, 15cqb), 2.55rem);
532545
}
533546
}
534547
@@ -556,7 +569,7 @@ div.css-nfhdnc {
556569
}
557570
558571
#ad-ext-player-display .ad-ext-player > ${STACK_SELECTOR} > ${ROW_SELECTOR} > ${SLOT_IDENTITY_SELECTOR} ${META_WINS_SELECTOR} {
559-
font-size: 0.62rem !important;
572+
font-size: var(--ad-ext-theme-cricket-wins-font-size) !important;
560573
}
561574
562575
#ad-ext-player-display .ad-ext-player > ${STACK_SELECTOR} > ${SLOT_STATS_SELECTOR} > p {

‎src/features/themes/gotcha/style.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function resolveBelowDeltaLayout(deltaAlignment) {
7474
scoreAlignSelf: "auto",
7575
minInlineSize: "max-content",
7676
marginBlockStart: "clamp(0.12rem,0.28vh,0.22rem) !important",
77-
fontSize: "clamp(0.9rem,2.1vw,1.15rem)",
77+
fontSize: "clamp(0.9rem,min(2.1vw,4.2cqi,4.8cqb),1.3rem)",
7878
lineHeight: "1",
7979
opacity: "0.65",
8080
inlineFlexCss: "",
@@ -112,7 +112,7 @@ function resolveInlineDeltaLayout(deltaAlignment) {
112112
scoreAlignSelf: "end",
113113
minInlineSize: "auto",
114114
marginBlockStart: "0 !important",
115-
fontSize: "clamp(1rem,2.25vw,1.24rem)",
115+
fontSize: "clamp(1rem,min(2.25vw,4.8cqi,5.4cqb),1.42rem)",
116116
lineHeight: "0.94",
117117
opacity: "0.70",
118118
inlineFlexCss: INLINE_FLEX_CSS,

0 commit comments

Comments
 (0)