Skip to content

Commit e6cf488

Browse files
S1M0N38S1M0N38
committed
refactor: improve code organization and accessibility
- Extract inline SVGs to icons.svg using <use> references for better maintainability - Add buildRequestPath() and buildRequestBasePath() helper functions to centralize path construction logic - Improve accessibility with skip-to-main-content links and semantic HTML (role="main") - Fix dark mode border color consistency (zinc-800 → zinc-600) - Add explanatory comments for magic numbers and error handling - Add test-results/ to .gitignore
1 parent d72e555 commit e6cf488

14 files changed

Lines changed: 1861 additions & 111 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,4 @@ dist-ssr
2424
*.sw?
2525
.playwright-mcp
2626
benchmarks
27+
test-results

‎RESPONSIVE_DESIGN.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
# Responsive Design Documentation
2+
3+
This document details the responsive behavior of the BalatroBench leaderboard tables across different screen sizes.
4+
5+
## Tailwind CSS Breakpoints
6+
7+
The application uses standard Tailwind CSS breakpoints:
8+
9+
| Breakpoint | Min Width | Description |
10+
|------------|-----------|-------------|
11+
| (default) | 0px | Mobile devices |
12+
| `sm` | 640px | Small tablets |
13+
| `md` | 768px | Tablets |
14+
| `lg` | 1024px | Laptops |
15+
| `xl` | 1280px | Desktops |
16+
17+
## Index.html - Main Leaderboard
18+
19+
### Column Visibility by Screen Size
20+
21+
| Column | Icon | Mobile | sm (640px+) | md (768px+) | lg (1024px+) | xl (1280px+) |
22+
|--------|------|--------|-------------|-------------|--------------|--------------|
23+
| Rank (#) | - | ✓ | ✓ | ✓ | ✓ | ✓ |
24+
| Model | - | ✓ | ✓ | ✓ | ✓ | ✓ |
25+
| Vendor | - | ✗ | ✗ | ✗ | ✗ | ✓ |
26+
| Round | - | ✓ | ✓ | ✓ | ✓ | ✓ |
27+
| Valid tool calls | ✓🔧 | ✗ | ✓ | ✓ | ✓ | ✓ |
28+
| Invalid tool calls | ⚠️🔧 | ✗ | ✓ | ✓ | ✓ | ✓ |
29+
| Error responses | ❌🔧 | ✗ | ✓ | ✓ | ✓ | ✓ |
30+
| Input tokens | In💾/🔧 | ✗ | ✗ | ✗ | ✓ | ✓ |
31+
| Output tokens | Out💾/🔧 | ✗ | ✗ | ✗ | ✓ | ✓ |
32+
| Time per call | ⏰/🔧 [s] | ✗ | ✗ | ✓ | ✓ | ✓ |
33+
| Cost per call | 💲/🔧 [m$] | ✗ | ✗ | ✓ | ✓ | ✓ |
34+
35+
### Responsive Behavior Summary
36+
37+
**Mobile (< 640px):**
38+
- Shows only essential columns: Rank, Model, Round
39+
- Minimal view for quick performance comparison
40+
41+
**Small tablets (640px - 767px):**
42+
- Adds tool call reliability metrics (3 columns)
43+
- Users can assess model reliability
44+
45+
**Tablets (768px - 1023px):**
46+
- Adds performance metrics: Time and Cost per tool call
47+
- Comprehensive view of model efficiency
48+
49+
**Laptops (1024px - 1279px):**
50+
- Adds token usage metrics (Input/Output tokens)
51+
- Full performance and resource usage visibility
52+
53+
**Desktops (1280px+):**
54+
- Adds Vendor column
55+
- Complete dataset with all available information
56+
57+
## Community.html - Community Strategies
58+
59+
### Column Visibility by Screen Size
60+
61+
| Column | Icon | Mobile | sm (640px+) | md (768px+) | lg (1024px+) | xl (1280px+) |
62+
|--------|------|--------|-------------|-------------|--------------|--------------|
63+
| Rank (#) | - | ✓ | ✓ | ✓ | ✓ | ✓ |
64+
| Author | - | ✗ | ✗ | ✗ | ✓ | ✓ |
65+
| Strategy | - | ✓ | ✓ | ✓ | ✓ | ✓ |
66+
| Round | - | ✓ | ✓ | ✓ | ✓ | ✓ |
67+
| Valid tool calls | ✓🔧 | ✗ | ✓ | ✓ | ✓ | ✓ |
68+
| Invalid tool calls | ⚠️🔧 | ✗ | ✓ | ✓ | ✓ | ✓ |
69+
| Error responses | ❌🔧 | ✗ | ✓ | ✓ | ✓ | ✓ |
70+
| Input tokens | In💾/🔧 | ✗ | ✗ | ✗ | ✓ | ✓ |
71+
| Output tokens | Out💾/🔧 | ✗ | ✗ | ✗ | ✓ | ✓ |
72+
| Time per call | ⏰/🔧 [s] | ✗ | ✗ | ✓ | ✓ | ✓ |
73+
| Cost per call | 💲/🔧 [m$] | ✗ | ✗ | ✓ | ✓ | ✓ |
74+
75+
### Responsive Behavior Summary
76+
77+
**Mobile (< 640px):**
78+
- Shows only essential columns: Rank, Strategy, Round
79+
- Focus on strategy name and performance
80+
81+
**Small tablets (640px - 767px):**
82+
- Adds tool call reliability metrics (3 columns)
83+
- Strategy reliability assessment enabled
84+
85+
**Tablets (768px - 1023px):**
86+
- Adds performance metrics: Time and Cost per tool call
87+
- Efficiency comparison between strategies
88+
89+
**Laptops (1024px - 1279px):**
90+
- Adds Author column and token usage metrics
91+
- Full attribution and resource usage visibility
92+
93+
**Desktops (1280px+):**
94+
- No additional columns (same as laptop view)
95+
- Complete dataset with all available information
96+
97+
## Key Differences Between Pages
98+
99+
| Feature | Index.html | Community.html |
100+
|---------|------------|----------------|
101+
| Secondary identifier | Vendor (xl+ only) | Author (lg+ only) |
102+
| Vendor column threshold | 1280px+ | N/A |
103+
| Author column threshold | N/A | 1024px+ |
104+
| Additional chart | Performance bar chart (lg+) | None |
105+
106+
## Design Patterns
107+
108+
### Progressive Disclosure
109+
Both pages follow a mobile-first approach with progressive disclosure:
110+
1. **Core metrics first**: Rank and performance (Round) always visible
111+
2. **Reliability next**: Tool call metrics at small screens
112+
3. **Efficiency follows**: Performance metrics at medium screens
113+
4. **Resources last**: Token usage at large screens
114+
5. **Attribution finally**: Vendor/Author at largest screens
115+
116+
### Visual Hierarchy
117+
- **Border separators** (`border-l-2`): Used to visually group column sections
118+
- Stats section (Round)
119+
- Tool calls section
120+
- Tokens section
121+
- Performance section
122+
123+
### Accessibility
124+
- All columns use `aria-label` attributes for icon-based headers
125+
- Screen reader text provided via `.sr-only` class
126+
- Semantic HTML with proper `scope` attributes on table headers
127+
128+
## Additional Responsive Features
129+
130+
### Performance Bar Chart (index.html only)
131+
- Hidden on mobile/tablet: `hidden lg:block`
132+
- Visible from 1024px+
133+
- Height: 250px fixed
134+
- Shows model comparison with rounds reached
135+
136+
### Interactive Row Expansion
137+
- Available on desktop sizes (lg+)
138+
- Shows detailed statistics including:
139+
- Round distribution histogram
140+
- Provider usage pie chart
141+
- Per-game statistics table
142+
- Total aggregated metrics
143+
144+
### Navigation
145+
- Responsive navigation bar on all pages
146+
- Adjustable button widths: `w-28 sm:w-32 md:w-36 lg:w-40`
147+
- Horizontal padding adjusts: `px-2 xl:px-4`

‎about.html‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,11 @@
3131
</head>
3232

3333
<body class="bg-zinc-50 dark:bg-zinc-800 min-h-screen pb-8">
34+
<a href="#main"
35+
class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-white dark:bg-zinc-700 text-zinc-800 dark:text-zinc-100 px-3 py-2 rounded">Skip
36+
to main content</a>
3437
<nav
35-
class="w-full bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-800 shadow-sm dark:shadow-md dark:ring-1 dark:ring-white/5 mb-8">
38+
class="w-full bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-600 shadow-sm dark:shadow-md dark:ring-1 dark:ring-white/5 mb-8">
3639
<div class="container mx-auto px-2 xl:px-4">
3740
<div class="flex items-center justify-center space-x-8 py-4">
3841
<a href="index.html"
@@ -45,7 +48,7 @@
4548
</div>
4649
</nav>
4750

48-
<div class="container mx-auto px-4">
51+
<div id="main" class="container mx-auto px-4" role="main">
4952

5053
<div class="max-w-4xl mx-auto">
5154
<div
@@ -312,24 +315,9 @@ <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-200 mb-2">
312315
<span class="text-sm">Brought to you by</span>
313316
<a href="https://coder.com/" target="_blank" rel="noopener"
314317
class="inline-block transition-colors hover:opacity-75">
315-
<?xml version="1.0" encoding="UTF-8"?>
316-
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1320.81 200"
317-
viewBox="0 0 1200 200" class="h-3 fill-zinc-400 dark:fill-zinc-500">
318-
<g id="Layer_1-2" data-name="Layer 1">
319-
<g>
320-
<rect class="cls-1" x="1158.63" y="5.41" width="162.18" height="189.24" />
321-
<polygon class="cls-1"
322-
points="745.18 194.59 905.99 194.59 905.99 154.05 806.8 154.05 806.8 116.76 891.93 116.76 891.93 80.81 806.8 80.81 806.8 44.59 904.1 44.59 904.1 5.4 745.18 5.4 745.18 194.59" />
323-
<path class="cls-1"
324-
d="M236.49,115.13l-61.62-1.35c-2.7,27.57-26.57,44.86-51.62,44.86-34.33,0-59.73-22.97-59.73-58.65s25.41-58.99,59.73-59.73c25.05-.54,49.46,17.57,51.08,45.14l61.62-1.89C234.6,33.78,192.16,0,123.25,0S0,38.92,0,100s51.89,100,123.25,100,111.62-34.32,113.24-84.87Z" />
325-
<path class="cls-1"
326-
d="M496.14,100c0-60.27-48.83-100-118.92-100s-118.92,39.73-118.92,100,48.83,100,118.92,100,118.92-39.46,118.92-100ZM377.22,39.73c32.77,0,55.41,24.59,55.41,60.27s-22.63,59.19-55.41,59.19-55.4-24.06-55.4-59.19,22.87-60.27,55.4-60.27Z" />
327-
<path class="cls-1"
328-
d="M517.95,194.59h78.38c75.95,0,127.03-35.4,127.03-94.59S672.28,5.4,596.33,5.4h-78.38v189.19ZM660.39,100c0,36.22-26.76,56.76-66.76,56.76h-13.51V42.97h13.51c40,0,66.76,20.27,66.76,57.03Z" />
329-
<path class="cls-1"
330-
d="M933.25,194.59h62.16v-63.51h16.49c19.73,0,37.29,7.84,42.43,29.73l5.95,33.78h71.08l-7.57-36.49c-7.33-29.56-25.05-48.96-62.43-51.36v-1.61c38.38,0,61.89-17.3,61.89-45.13,0-33.78-34.59-54.6-91.35-54.6h-98.65v189.19ZM1061.09,69.73c0,17.57-13.24,28.11-34.59,28.11h-31.08v-55.95h31.08c21.35,0,34.59,10.54,34.59,27.84Z" />
331-
</g>
332-
</g>
318+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1320.81 200"
319+
class="h-3 fill-zinc-400 dark:fill-zinc-500">
320+
<use href="icons.svg#icon-coder-logo"></use>
333321
</svg>
334322
</a>
335323
</div>

‎community.html‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -218,10 +218,8 @@
218218
rel="noopener"
219219
class="px-6 py-3 bg-zinc-300 hover:bg-zinc-400 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors inline-flex items-center space-x-2">
220220
<span>Contribute Your Strategy</span>
221-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
222-
<path fill-rule="evenodd"
223-
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
224-
clip-rule="evenodd" />
221+
<svg fill="currentColor" class="w-4 h-4">
222+
<use href="icons.svg#icon-arrow-top-right"></use>
225223
</svg>
226224
</a>
227225
</div>
@@ -240,24 +238,9 @@
240238
<span class="text-sm">Brought to you by</span>
241239
<a href="https://coder.com/" target="_blank" rel="noopener"
242240
class="inline-block transition-colors hover:opacity-75">
243-
<?xml version="1.0" encoding="UTF-8"?>
244-
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1320.81 200"
245-
viewBox="0 0 1200 200" class="h-3 fill-zinc-400 dark:fill-zinc-500">
246-
<g id="Layer_1-2" data-name="Layer 1">
247-
<g>
248-
<rect class="cls-1" x="1158.63" y="5.41" width="162.18" height="189.24" />
249-
<polygon class="cls-1"
250-
points="745.18 194.59 905.99 194.59 905.99 154.05 806.8 154.05 806.8 116.76 891.93 116.76 891.93 80.81 806.8 80.81 806.8 44.59 904.1 44.59 904.1 5.4 745.18 5.4 745.18 194.59" />
251-
<path class="cls-1"
252-
d="M236.49,115.13l-61.62-1.35c-2.7,27.57-26.57,44.86-51.62,44.86-34.33,0-59.73-22.97-59.73-58.65s25.41-58.99,59.73-59.73c25.05-.54,49.46,17.57,51.08,45.14l61.62-1.89C234.6,33.78,192.16,0,123.25,0S0,38.92,0,100s51.89,100,123.25,100,111.62-34.32,113.24-84.87Z" />
253-
<path class="cls-1"
254-
d="M496.14,100c0-60.27-48.83-100-118.92-100s-118.92,39.73-118.92,100,48.83,100,118.92,100,118.92-39.46,118.92-100ZM377.22,39.73c32.77,0,55.41,24.59,55.41,60.27s-22.63,59.19-55.41,59.19-55.4-24.06-55.4-59.19,22.87-60.27,55.4-60.27Z" />
255-
<path class="cls-1"
256-
d="M517.95,194.59h78.38c75.95,0,127.03-35.4,127.03-94.59S672.28,5.4,596.33,5.4h-78.38v189.19ZM660.39,100c0,36.22-26.76,56.76-66.76,56.76h-13.51V42.97h13.51c40,0,66.76,20.27,66.76,57.03Z" />
257-
<path class="cls-1"
258-
d="M933.25,194.59h62.16v-63.51h16.49c19.73,0,37.29,7.84,42.43,29.73l5.95,33.78h71.08l-7.57-36.49c-7.33-29.56-25.05-48.96-62.43-51.36v-1.61c38.38,0,61.89-17.3,61.89-45.13,0-33.78-34.59-54.6-91.35-54.6h-98.65v189.19ZM1061.09,69.73c0,17.57-13.24,28.11-34.59,28.11h-31.08v-55.95h31.08c21.35,0,34.59,10.54,34.59,27.84Z" />
259-
</g>
260-
</g>
241+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1320.81 200"
242+
class="h-3 fill-zinc-400 dark:fill-zinc-500">
243+
<use href="icons.svg#icon-coder-logo"></use>
261244
</svg>
262245
</a>
263246
</div>

‎icons.svg‎

Lines changed: 80 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -237,24 +237,9 @@ <h2 class="text-3xl font-semibold text-zinc-800 dark:text-zinc-100 mb-4 text-cen
237237
<span class="text-sm">Brought to you by</span>
238238
<a href="https://coder.com/" target="_blank" rel="noopener"
239239
class="inline-block transition-colors hover:opacity-75">
240-
<?xml version="1.0" encoding="UTF-8"?>
241-
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1320.81 200"
242-
viewBox="0 0 1200 200" class="h-3 fill-zinc-400 dark:fill-zinc-500">
243-
<g id="Layer_1-2" data-name="Layer 1">
244-
<g>
245-
<rect class="cls-1" x="1158.63" y="5.41" width="162.18" height="189.24" />
246-
<polygon class="cls-1"
247-
points="745.18 194.59 905.99 194.59 905.99 154.05 806.8 154.05 806.8 116.76 891.93 116.76 891.93 80.81 806.8 80.81 806.8 44.59 904.1 44.59 904.1 5.4 745.18 5.4 745.18 194.59" />
248-
<path class="cls-1"
249-
d="M236.49,115.13l-61.62-1.35c-2.7,27.57-26.57,44.86-51.62,44.86-34.33,0-59.73-22.97-59.73-58.65s25.41-58.99,59.73-59.73c25.05-.54,49.46,17.57,51.08,45.14l61.62-1.89C234.6,33.78,192.16,0,123.25,0S0,38.92,0,100s51.89,100,123.25,100,111.62-34.32,113.24-84.87Z" />
250-
<path class="cls-1"
251-
d="M496.14,100c0-60.27-48.83-100-118.92-100s-118.92,39.73-118.92,100,48.83,100,118.92,100,118.92-39.46,118.92-100ZM377.22,39.73c32.77,0,55.41,24.59,55.41,60.27s-22.63,59.19-55.41,59.19-55.4-24.06-55.4-59.19,22.87-60.27,55.4-60.27Z" />
252-
<path class="cls-1"
253-
d="M517.95,194.59h78.38c75.95,0,127.03-35.4,127.03-94.59S672.28,5.4,596.33,5.4h-78.38v189.19ZM660.39,100c0,36.22-26.76,56.76-66.76,56.76h-13.51V42.97h13.51c40,0,66.76,20.27,66.76,57.03Z" />
254-
<path class="cls-1"
255-
d="M933.25,194.59h62.16v-63.51h16.49c19.73,0,37.29,7.84,42.43,29.73l5.95,33.78h71.08l-7.57-36.49c-7.33-29.56-25.05-48.96-62.43-51.36v-1.61c38.38,0,61.89-17.3,61.89-45.13,0-33.78-34.59-54.6-91.35-54.6h-98.65v189.19ZM1061.09,69.73c0,17.57-13.24,28.11-34.59,28.11h-31.08v-55.95h31.08c21.35,0,34.59,10.54,34.59,27.84Z" />
256-
</g>
257-
</g>
240+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1320.81 200"
241+
class="h-3 fill-zinc-400 dark:fill-zinc-500">
242+
<use href="icons.svg#icon-coder-logo"></use>
258243
</svg>
259244
</a>
260245
</div>

‎package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "balatrobench",
3+
"version": "1.0.0",
4+
"description": "Performance leaderboards for LLMs playing Balatro",
5+
"scripts": {
6+
"test": "playwright test",
7+
"test:headed": "playwright test --headed",
8+
"test:debug": "playwright test --debug",
9+
"test:ui": "playwright test --ui",
10+
"serve": "python3 -m http.server 8000"
11+
},
12+
"keywords": [
13+
"balatro",
14+
"llm",
15+
"benchmark",
16+
"leaderboard"
17+
],
18+
"author": "",
19+
"license": "MIT",
20+
"devDependencies": {
21+
"@playwright/test": "^1.48.0"
22+
}
23+
}

0 commit comments

Comments
 (0)
⚡