Skip to content

Commit 647046c

Browse files
thomasasenthomasasen
committed
feat: implement CSS variable support for average trend arrow styling and add related tests
1 parent da19cb3 commit 647046c

6 files changed

Lines changed: 85 additions & 35 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ direkt zu einer versionierten Release-Sektion.
2424
- Nutzerwirkung: Die Inline-Darstellung der Gotcha-Differenz bleibt in der Score-Zeile jetzt sauber an der Punkteanzeige ausgerichtet und wirkt etwas zurückhaltender; je nach Ausrichtung erscheint sie als `Differenz | Score` oder `Score | Differenz`, ohne an Badge- oder Namensblöcke anzudocken.
2525
Technik: Das Inline-Layout des neuen Themes nutzt feste Grid-Slots für Identität, Meta, Score-Zone und X01-Progress statt impliziter Auto-Placement-Reihenfolge, die Delta-Zeile arbeitet mit angepasster Opacity und eigener Trenner-Logik, und die Theme-Parity- sowie Lifecycle-Regressionen sichern Reihenfolge, Slot-Aufteilung und Stilwerte gegen Drift ab.
2626

27+
- Nutzerwirkung: `Average Trend Arrow` respektiert die konfigurierte Pfeilgröße im normalen Shared-Player-Card-Layout jetzt wieder sichtbar, statt durch das Theme immer auf eine feste Basisgröße gezogen zu werden.
28+
Technik: Das Feature exportiert seine Preset-Größen jetzt als CSS-Variablen direkt am Pfeil, und das Shared-Player-Card-Layout skaliert diese Basiswerte nur noch weiter über `--ad-ext-stat-scale`, statt Margin- und Border-Geometrie mit eigenen festen Pixelwerten zu überschreiben; neue Runtime-Regressionen sichern Variablenübergabe und Theme-Skalierung gegen Drift ab.
29+
2730
## [2.1.31] - 2026-04-20
2831

2932
### Added

‎dist/autodarts-xconfig.user.js‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11645,6 +11645,9 @@
1164511645
var UP_CLASS = "ad-ext-avg-trend-up";
1164611646
var DOWN_CLASS = "ad-ext-avg-trend-down";
1164711647
var ANIMATE_CLASS = "ad-ext-avg-trend-animate";
11648+
var ARROW_MARGIN_LEFT_VAR = "--ad-ext-avg-trend-margin-left-base";
11649+
var ARROW_HALF_WIDTH_VAR = "--ad-ext-avg-trend-arrow-half-width-base";
11650+
var ARROW_HEIGHT_VAR = "--ad-ext-avg-trend-arrow-height-base";
1164811651
var SIZE_PRESETS = Object.freeze({
1164911652
klein: {
1165011653
marginLeftPx: 4,
@@ -11678,10 +11681,13 @@
1167811681
const size = resolveSize(options.size);
1167911682
return `
1168011683
.${ARROW_CLASS} {
11684+
${ARROW_MARGIN_LEFT_VAR}: ${size.marginLeftPx}px;
11685+
${ARROW_HALF_WIDTH_VAR}: ${size.arrowHalfWidthPx}px;
11686+
${ARROW_HEIGHT_VAR}: ${size.arrowHeightPx}px;
1168111687
display: inline-block;
1168211688
width: 0;
1168311689
height: 0;
11684-
margin-left: ${size.marginLeftPx}px;
11690+
margin-left: var(${ARROW_MARGIN_LEFT_VAR});
1168511691
vertical-align: middle;
1168611692
opacity: 0;
1168711693
transition: opacity 120ms ease-out;
@@ -11692,15 +11698,15 @@
1169211698
}
1169311699

1169411700
.${UP_CLASS} {
11695-
border-left: ${size.arrowHalfWidthPx}px solid transparent;
11696-
border-right: ${size.arrowHalfWidthPx}px solid transparent;
11697-
border-bottom: ${size.arrowHeightPx}px solid #9fdb58;
11701+
border-left: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
11702+
border-right: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
11703+
border-bottom: var(${ARROW_HEIGHT_VAR}) solid #9fdb58;
1169811704
}
1169911705

1170011706
.${DOWN_CLASS} {
11701-
border-left: ${size.arrowHalfWidthPx}px solid transparent;
11702-
border-right: ${size.arrowHalfWidthPx}px solid transparent;
11703-
border-top: ${size.arrowHeightPx}px solid #f87171;
11707+
border-left: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
11708+
border-right: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
11709+
border-top: var(${ARROW_HEIGHT_VAR}) solid #f87171;
1170411710
}
1170511711

1170611712
.${ANIMATE_CLASS} {
@@ -32233,9 +32239,6 @@ div.css-y3hfdd:not([data-ad-ext-cricket-stack="true"]) > .css-1igwmid{
3223332239

3223432240
// src/features/themes/shared/player-card-layout.js
3223532241
var STAT_AVG_LINE_HEIGHT = 1.15;
32236-
var STAT_AVG_ARROW_WIDTH_PX = 12;
32237-
var STAT_AVG_ARROW_HEIGHT_PX = 23;
32238-
var STAT_AVG_ARROW_MARGIN_LEFT_PX = 8;
3223932242
var INACTIVE_STAT_SCALE = 1.2;
3224032243
var ACTIVE_STAT_SCALE = 1.6;
3224132244
var ACTIVE_PLAYER_RATIO = 1.333333;
@@ -32439,19 +32442,19 @@ span.chakra-badge.css-1c4630i {
3243932442
}
3244032443

3244132444
.ad-ext-avg-trend-arrow {
32442-
margin-left: calc(${STAT_AVG_ARROW_MARGIN_LEFT_PX}px * var(--ad-ext-stat-scale));
32445+
margin-left: calc(var(--ad-ext-avg-trend-margin-left-base, 8px) * var(--ad-ext-stat-scale));
3244332446
}
3244432447

3244532448
.ad-ext-avg-trend-arrow.ad-ext-avg-trend-up {
32446-
border-left: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
32447-
border-right: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
32448-
border-bottom: calc(${STAT_AVG_ARROW_HEIGHT_PX}px * var(--ad-ext-stat-scale)) solid #9fdb58;
32449+
border-left: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
32450+
border-right: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
32451+
border-bottom: calc(var(--ad-ext-avg-trend-arrow-height-base, 23px) * var(--ad-ext-stat-scale)) solid #9fdb58;
3244932452
}
3245032453

3245132454
.ad-ext-avg-trend-arrow.ad-ext-avg-trend-down {
32452-
border-left: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
32453-
border-right: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
32454-
border-top: calc(${STAT_AVG_ARROW_HEIGHT_PX}px * var(--ad-ext-stat-scale)) solid #f87171;
32455+
border-left: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
32456+
border-right: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
32457+
border-top: calc(var(--ad-ext-avg-trend-arrow-height-base, 23px) * var(--ad-ext-stat-scale)) solid #f87171;
3245532458
}
3245632459

3245732460
#ad-ext-turn .ad-ext-turn-points,

‎src/features/average-trend-arrow/style.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ export const VISIBLE_CLASS = "ad-ext-avg-trend-visible";
44
export const UP_CLASS = "ad-ext-avg-trend-up";
55
export const DOWN_CLASS = "ad-ext-avg-trend-down";
66
export const ANIMATE_CLASS = "ad-ext-avg-trend-animate";
7+
export const ARROW_MARGIN_LEFT_VAR = "--ad-ext-avg-trend-margin-left-base";
8+
export const ARROW_HALF_WIDTH_VAR = "--ad-ext-avg-trend-arrow-half-width-base";
9+
export const ARROW_HEIGHT_VAR = "--ad-ext-avg-trend-arrow-height-base";
710

811
const SIZE_PRESETS = Object.freeze({
912
klein: {
@@ -42,10 +45,13 @@ export function buildStyleText(options = {}) {
4245

4346
return `
4447
.${ARROW_CLASS} {
48+
${ARROW_MARGIN_LEFT_VAR}: ${size.marginLeftPx}px;
49+
${ARROW_HALF_WIDTH_VAR}: ${size.arrowHalfWidthPx}px;
50+
${ARROW_HEIGHT_VAR}: ${size.arrowHeightPx}px;
4551
display: inline-block;
4652
width: 0;
4753
height: 0;
48-
margin-left: ${size.marginLeftPx}px;
54+
margin-left: var(${ARROW_MARGIN_LEFT_VAR});
4955
vertical-align: middle;
5056
opacity: 0;
5157
transition: opacity 120ms ease-out;
@@ -56,15 +62,15 @@ export function buildStyleText(options = {}) {
5662
}
5763
5864
.${UP_CLASS} {
59-
border-left: ${size.arrowHalfWidthPx}px solid transparent;
60-
border-right: ${size.arrowHalfWidthPx}px solid transparent;
61-
border-bottom: ${size.arrowHeightPx}px solid #9fdb58;
65+
border-left: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
66+
border-right: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
67+
border-bottom: var(${ARROW_HEIGHT_VAR}) solid #9fdb58;
6268
}
6369
6470
.${DOWN_CLASS} {
65-
border-left: ${size.arrowHalfWidthPx}px solid transparent;
66-
border-right: ${size.arrowHalfWidthPx}px solid transparent;
67-
border-top: ${size.arrowHeightPx}px solid #f87171;
71+
border-left: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
72+
border-right: var(${ARROW_HALF_WIDTH_VAR}) solid transparent;
73+
border-top: var(${ARROW_HEIGHT_VAR}) solid #f87171;
6874
}
6975
7076
.${ANIMATE_CLASS} {

‎src/features/themes/shared/player-card-layout.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
const STAT_AVG_LINE_HEIGHT = 1.15;
2-
const STAT_AVG_ARROW_WIDTH_PX = 12;
3-
const STAT_AVG_ARROW_HEIGHT_PX = 23;
4-
const STAT_AVG_ARROW_MARGIN_LEFT_PX = 8;
52
const INACTIVE_STAT_SCALE = 1.2;
63
const ACTIVE_STAT_SCALE = 1.6;
74
const ACTIVE_PLAYER_RATIO = 1.333333;
@@ -204,19 +201,19 @@ span.chakra-badge.css-1c4630i {
204201
}
205202
206203
.ad-ext-avg-trend-arrow {
207-
margin-left: calc(${STAT_AVG_ARROW_MARGIN_LEFT_PX}px * var(--ad-ext-stat-scale));
204+
margin-left: calc(var(--ad-ext-avg-trend-margin-left-base, 8px) * var(--ad-ext-stat-scale));
208205
}
209206
210207
.ad-ext-avg-trend-arrow.ad-ext-avg-trend-up {
211-
border-left: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
212-
border-right: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
213-
border-bottom: calc(${STAT_AVG_ARROW_HEIGHT_PX}px * var(--ad-ext-stat-scale)) solid #9fdb58;
208+
border-left: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
209+
border-right: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
210+
border-bottom: calc(var(--ad-ext-avg-trend-arrow-height-base, 23px) * var(--ad-ext-stat-scale)) solid #9fdb58;
214211
}
215212
216213
.ad-ext-avg-trend-arrow.ad-ext-avg-trend-down {
217-
border-left: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
218-
border-right: calc(${STAT_AVG_ARROW_WIDTH_PX}px * var(--ad-ext-stat-scale)) solid transparent;
219-
border-top: calc(${STAT_AVG_ARROW_HEIGHT_PX}px * var(--ad-ext-stat-scale)) solid #f87171;
214+
border-left: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
215+
border-right: calc(var(--ad-ext-avg-trend-arrow-half-width-base, 12px) * var(--ad-ext-stat-scale)) solid transparent;
216+
border-top: calc(var(--ad-ext-avg-trend-arrow-height-base, 23px) * var(--ad-ext-stat-scale)) solid #f87171;
220217
}
221218
222219
#ad-ext-turn .ad-ext-turn-points,

‎tests/runtime/average-trend-arrow-style.test.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import test from "node:test";
2+
import assert from "node:assert/strict";
3+
4+
import {
5+
ARROW_HALF_WIDTH_VAR,
6+
ARROW_HEIGHT_VAR,
7+
ARROW_MARGIN_LEFT_VAR,
8+
buildStyleText,
9+
} from "../../src/features/average-trend-arrow/style.js";
10+
import { buildSharedPlayerDisplayCss } from "../../src/features/themes/shared/player-card-layout.js";
11+
12+
test("average trend arrow size presets define CSS variables for theme scaling", () => {
13+
const css = buildStyleText({
14+
durationMs: 320,
15+
size: "klein",
16+
});
17+
18+
assert.match(css, new RegExp(`${ARROW_MARGIN_LEFT_VAR}: 4px;`));
19+
assert.match(css, new RegExp(`${ARROW_HALF_WIDTH_VAR}: 4px;`));
20+
assert.match(css, new RegExp(`${ARROW_HEIGHT_VAR}: 6px;`));
21+
assert.match(css, new RegExp(`margin-left: var\\(${ARROW_MARGIN_LEFT_VAR}\\);`));
22+
assert.match(css, new RegExp(`border-left: var\\(${ARROW_HALF_WIDTH_VAR}\\) solid transparent;`));
23+
assert.match(css, new RegExp(`border-bottom: var\\(${ARROW_HEIGHT_VAR}\\) solid #9fdb58;`));
24+
});
25+
26+
test("shared player card layout scales average trend arrow from feature-defined base variables", () => {
27+
const css = buildSharedPlayerDisplayCss();
28+
29+
assert.match(
30+
css,
31+
/margin-left:\s*calc\(var\(--ad-ext-avg-trend-margin-left-base,\s*8px\)\s*\*\s*var\(--ad-ext-stat-scale\)\);/s
32+
);
33+
assert.match(
34+
css,
35+
/border-left:\s*calc\(var\(--ad-ext-avg-trend-arrow-half-width-base,\s*12px\)\s*\*\s*var\(--ad-ext-stat-scale\)\)\s*solid\s*transparent;/s
36+
);
37+
assert.match(
38+
css,
39+
/border-bottom:\s*calc\(var\(--ad-ext-avg-trend-arrow-height-base,\s*23px\)\s*\*\s*var\(--ad-ext-stat-scale\)\)\s*solid\s*#9fdb58;/s
40+
);
41+
});

‎tests/runtime/theme-template-parity.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ test("x01 theme keeps oldrepo preview and stat scaling anchors", () => {
6767
);
6868
assert.match(
6969
css,
70-
/ad-ext-avg-trend-arrow\.ad-ext-avg-trend-up\s*\{[^}]*border-bottom:\s*calc\(23px \* var\(--ad-ext-stat-scale\)\)\s*solid\s*#9fdb58;/s
70+
/ad-ext-avg-trend-arrow\.ad-ext-avg-trend-up\s*\{[^}]*border-bottom:\s*calc\(var\(--ad-ext-avg-trend-arrow-height-base,\s*23px\)\s*\*\s*var\(--ad-ext-stat-scale\)\)\s*solid\s*#9fdb58;/s
7171
);
7272
assert.match(
7373
css,

0 commit comments

Comments
 (0)