tokengolf 0.4.2 → 0.5.0
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 +9 -0
- package/CLAUDE.md +10 -5
- package/LICENSE +21 -0
- package/README.md +228 -109
- package/dist/cli.js +97 -33
- package/docs/assets/banner.svg +45 -0
- package/docs/index.html +376 -197
- package/hooks/session-end.js +12 -27
- package/install.sh +69 -0
- package/package.json +3 -2
- package/scripts/update-homebrew.sh +39 -0
- package/src/components/ActiveRun.js +7 -3
- package/src/components/ScoreCard.js +7 -9
- package/src/components/StartRun.js +27 -8
- package/src/components/StatsView.js +31 -11
- package/src/lib/score.js +4 -4
- package/src/lib/ui.js +16 -0
- package/assets/demo-hud.png +0 -0
- package/assets/scorecard.png +0 -0
- package/docs/assets/demo-hud.png +0 -0
- package/docs/assets/scorecard.png +0 -0
package/docs/index.html
CHANGED
|
@@ -3,12 +3,17 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<script>
|
|
7
|
+
const stored = localStorage.getItem('tg-theme');
|
|
8
|
+
const theme = stored || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
|
9
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
10
|
+
</script>
|
|
6
11
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛳</text></svg>">
|
|
7
|
-
<title>TokenGolf
|
|
12
|
+
<title>TokenGolf | Every token matters.</title>
|
|
8
13
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
9
14
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
10
15
|
<link
|
|
11
|
-
href="https://fonts.googleapis.com/css2?family=
|
|
16
|
+
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Source+Sans+3:wght@400;600;700&display=swap"
|
|
12
17
|
rel="stylesheet"
|
|
13
18
|
/>
|
|
14
19
|
<meta
|
|
@@ -19,13 +24,13 @@
|
|
|
19
24
|
<!-- Open Graph -->
|
|
20
25
|
<meta property="og:type" content="website" />
|
|
21
26
|
<meta property="og:url" content="https://josheche.github.io/tokengolf/" />
|
|
22
|
-
<meta property="og:title" content="TokenGolf
|
|
27
|
+
<meta property="og:title" content="TokenGolf | Every token matters." />
|
|
23
28
|
<meta property="og:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
|
|
24
29
|
<meta property="og:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
|
|
25
30
|
|
|
26
31
|
<!-- Twitter Card -->
|
|
27
32
|
<meta name="twitter:card" content="summary_large_image" />
|
|
28
|
-
<meta name="twitter:title" content="TokenGolf
|
|
33
|
+
<meta name="twitter:title" content="TokenGolf | Every token matters." />
|
|
29
34
|
<meta name="twitter:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
|
|
30
35
|
<meta name="twitter:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
|
|
31
36
|
|
|
@@ -61,26 +66,69 @@
|
|
|
61
66
|
padding: 0;
|
|
62
67
|
}
|
|
63
68
|
|
|
69
|
+
/* ── Dark: painting at dusk — warm charcoal, not cold blue ── */
|
|
64
70
|
:root {
|
|
65
|
-
--bg: #
|
|
66
|
-
--card: #
|
|
67
|
-
--border: #
|
|
68
|
-
--text: #
|
|
69
|
-
--muted: #
|
|
70
|
-
--green: #
|
|
71
|
-
--green-dim: #
|
|
72
|
-
--cyan: #
|
|
73
|
-
--magenta: #
|
|
74
|
-
--yellow: #
|
|
75
|
-
--red: #
|
|
76
|
-
--orange: #
|
|
71
|
+
--bg: #1a1812;
|
|
72
|
+
--card: #23211a;
|
|
73
|
+
--border: #3d3828;
|
|
74
|
+
--text: #e8dcc4;
|
|
75
|
+
--muted: #9a9180;
|
|
76
|
+
--green: #6bb54a;
|
|
77
|
+
--green-dim: #4a8a32;
|
|
78
|
+
--cyan: #7cb8d4;
|
|
79
|
+
--magenta: #c8a0e0;
|
|
80
|
+
--yellow: #d4a840;
|
|
81
|
+
--red: #e05848;
|
|
82
|
+
--orange: #d4884a;
|
|
83
|
+
--hero-overlay-top: rgba(26,24,18,0.5);
|
|
84
|
+
--hero-overlay-mid: rgba(26,24,18,0.4);
|
|
85
|
+
--hero-overlay-bot: rgba(26,24,18,0.95);
|
|
86
|
+
--hero-text: #f2ead6;
|
|
87
|
+
--hero-eyebrow-color: #6bb54a;
|
|
88
|
+
--install-bg: rgba(26,24,18,0.5);
|
|
89
|
+
--install-border: rgba(232,220,196,0.18);
|
|
90
|
+
--term-bg: #161410;
|
|
91
|
+
--term-header-bg: #1e1c16;
|
|
92
|
+
--tab-bar-bg: #141210;
|
|
93
|
+
--badge-flow-bg: #1e2e1a;
|
|
94
|
+
--badge-rogue-bg: #2c1c30;
|
|
95
|
+
--death-border: #3d2020;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ── Light: golden hour — warm cream, ochre, sage ── */
|
|
99
|
+
[data-theme="light"] {
|
|
100
|
+
--bg: #f2ead6;
|
|
101
|
+
--card: #f8f4e8;
|
|
102
|
+
--border: #d4c8a8;
|
|
103
|
+
--text: #2a2618;
|
|
104
|
+
--muted: #6e6450;
|
|
105
|
+
--green: #4a7a2a;
|
|
106
|
+
--green-dim: #5a8a38;
|
|
107
|
+
--cyan: #2a6e9a;
|
|
108
|
+
--magenta: #7a4a9a;
|
|
109
|
+
--yellow: #8a6a10;
|
|
110
|
+
--red: #b03020;
|
|
111
|
+
--orange: #9a5a18;
|
|
112
|
+
--hero-overlay-top: rgba(242,234,214,0.15);
|
|
113
|
+
--hero-overlay-mid: rgba(242,234,214,0.08);
|
|
114
|
+
--hero-overlay-bot: rgba(242,234,214,0.93);
|
|
115
|
+
--hero-text: #2a2618;
|
|
116
|
+
--hero-eyebrow-color: #4a7a2a;
|
|
117
|
+
--install-bg: rgba(248,244,232,0.8);
|
|
118
|
+
--install-border: rgba(42,38,24,0.12);
|
|
119
|
+
--term-bg: #ece4d0;
|
|
120
|
+
--term-header-bg: #e2dac4;
|
|
121
|
+
--tab-bar-bg: #e2dac4;
|
|
122
|
+
--badge-flow-bg: #d4e8c8;
|
|
123
|
+
--badge-rogue-bg: #e4d4f0;
|
|
124
|
+
--death-border: #e8c0b8;
|
|
77
125
|
}
|
|
78
126
|
|
|
79
127
|
body {
|
|
80
128
|
background: var(--bg);
|
|
81
129
|
color: var(--text);
|
|
82
130
|
font-family:
|
|
83
|
-
-apple-system, BlinkMacSystemFont,
|
|
131
|
+
"Source Sans 3", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
84
132
|
line-height: 1.6;
|
|
85
133
|
}
|
|
86
134
|
|
|
@@ -166,9 +214,9 @@
|
|
|
166
214
|
inset: 0;
|
|
167
215
|
background: linear-gradient(
|
|
168
216
|
to bottom,
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
217
|
+
var(--hero-overlay-top) 0%,
|
|
218
|
+
var(--hero-overlay-mid) 40%,
|
|
219
|
+
var(--hero-overlay-bot) 100%
|
|
172
220
|
);
|
|
173
221
|
}
|
|
174
222
|
|
|
@@ -179,7 +227,7 @@
|
|
|
179
227
|
|
|
180
228
|
.hero-eyebrow {
|
|
181
229
|
font-family: "SF Mono", "Cascadia Mono", monospace;
|
|
182
|
-
color:
|
|
230
|
+
color: var(--hero-eyebrow-color);
|
|
183
231
|
font-size: 2.5rem;
|
|
184
232
|
letter-spacing: 0.1em;
|
|
185
233
|
text-transform: uppercase;
|
|
@@ -187,7 +235,7 @@
|
|
|
187
235
|
}
|
|
188
236
|
|
|
189
237
|
.hero h1 {
|
|
190
|
-
font-family: "
|
|
238
|
+
font-family: "Cormorant Garamond", Georgia, serif;
|
|
191
239
|
font-size: clamp(3rem, 10vw, 6rem);
|
|
192
240
|
font-weight: 700;
|
|
193
241
|
letter-spacing: 0.02em;
|
|
@@ -199,13 +247,13 @@
|
|
|
199
247
|
}
|
|
200
248
|
|
|
201
249
|
.hero h1 span {
|
|
202
|
-
color:
|
|
203
|
-
-webkit-text-fill-color:
|
|
250
|
+
color: var(--hero-text);
|
|
251
|
+
-webkit-text-fill-color: var(--hero-text);
|
|
204
252
|
}
|
|
205
253
|
|
|
206
254
|
.hero-tagline {
|
|
207
255
|
font-size: clamp(1rem, 3vw, 1.4rem);
|
|
208
|
-
color:
|
|
256
|
+
color: var(--hero-text);
|
|
209
257
|
font-style: italic;
|
|
210
258
|
margin-bottom: 1.25rem;
|
|
211
259
|
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
|
|
@@ -213,24 +261,59 @@
|
|
|
213
261
|
|
|
214
262
|
.hero-sub {
|
|
215
263
|
font-size: 1.05rem;
|
|
216
|
-
color:
|
|
264
|
+
color: var(--hero-text);
|
|
217
265
|
max-width: 540px;
|
|
218
266
|
margin-bottom: 2.5rem;
|
|
219
267
|
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
|
|
220
268
|
}
|
|
221
269
|
|
|
270
|
+
/* Install method picker — segmented control */
|
|
271
|
+
.install-tabs {
|
|
272
|
+
display: inline-flex;
|
|
273
|
+
background: var(--install-bg);
|
|
274
|
+
backdrop-filter: blur(12px) saturate(1.2);
|
|
275
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.2);
|
|
276
|
+
border: 1px solid var(--install-border);
|
|
277
|
+
border-radius: 9999px;
|
|
278
|
+
padding: 0.2rem;
|
|
279
|
+
margin-bottom: 0.6rem;
|
|
280
|
+
gap: 0.15rem;
|
|
281
|
+
}
|
|
282
|
+
.install-tab {
|
|
283
|
+
position: relative;
|
|
284
|
+
background: transparent;
|
|
285
|
+
border: none;
|
|
286
|
+
border-radius: 9999px;
|
|
287
|
+
padding: 0.35rem 1rem;
|
|
288
|
+
font-family: "SF Mono", "Cascadia Mono", monospace;
|
|
289
|
+
font-size: 0.78rem;
|
|
290
|
+
letter-spacing: 0.03em;
|
|
291
|
+
color: var(--muted);
|
|
292
|
+
cursor: pointer;
|
|
293
|
+
transition: color 0.2s, background 0.2s;
|
|
294
|
+
}
|
|
295
|
+
.install-tab:hover {
|
|
296
|
+
color: var(--hero-text);
|
|
297
|
+
}
|
|
298
|
+
.install-tab.active {
|
|
299
|
+
background: var(--green);
|
|
300
|
+
color: var(--bg);
|
|
301
|
+
font-weight: 600;
|
|
302
|
+
box-shadow: 0 1px 6px rgba(107, 181, 74, 0.3);
|
|
303
|
+
}
|
|
304
|
+
|
|
222
305
|
/* Install box */
|
|
223
306
|
.install-box {
|
|
224
307
|
display: flex;
|
|
225
308
|
align-items: center;
|
|
226
309
|
gap: 0;
|
|
227
|
-
background:
|
|
310
|
+
background: var(--install-bg);
|
|
228
311
|
backdrop-filter: blur(12px) saturate(1.2);
|
|
229
312
|
-webkit-backdrop-filter: blur(12px) saturate(1.2);
|
|
230
|
-
border: 1px solid
|
|
313
|
+
border: 1px solid var(--install-border);
|
|
231
314
|
border-radius: 9999px;
|
|
232
315
|
padding: 0.4rem 0.4rem 0.4rem 1.25rem;
|
|
233
|
-
max-width:
|
|
316
|
+
max-width: 520px;
|
|
234
317
|
width: 100%;
|
|
235
318
|
margin: 0 auto 1.5rem;
|
|
236
319
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
|
|
@@ -239,7 +322,7 @@
|
|
|
239
322
|
.install-cmd {
|
|
240
323
|
flex: 1;
|
|
241
324
|
font-family: "SF Mono", "Cascadia Mono", monospace;
|
|
242
|
-
font-size: 0.
|
|
325
|
+
font-size: 0.88rem;
|
|
243
326
|
color: var(--green);
|
|
244
327
|
white-space: nowrap;
|
|
245
328
|
overflow: hidden;
|
|
@@ -253,7 +336,7 @@
|
|
|
253
336
|
|
|
254
337
|
.copy-btn {
|
|
255
338
|
background: var(--green);
|
|
256
|
-
color:
|
|
339
|
+
color: var(--bg);
|
|
257
340
|
border: none;
|
|
258
341
|
border-radius: 9999px;
|
|
259
342
|
padding: 0.45rem 1rem;
|
|
@@ -267,14 +350,14 @@
|
|
|
267
350
|
}
|
|
268
351
|
|
|
269
352
|
.copy-btn:hover {
|
|
270
|
-
background: #
|
|
353
|
+
background: #7cc85a;
|
|
271
354
|
}
|
|
272
355
|
.copy-btn:active {
|
|
273
356
|
transform: scale(0.97);
|
|
274
357
|
}
|
|
275
358
|
.copy-btn.copied {
|
|
276
359
|
background: var(--green-dim);
|
|
277
|
-
color:
|
|
360
|
+
color: var(--hero-text);
|
|
278
361
|
}
|
|
279
362
|
|
|
280
363
|
.hero-links {
|
|
@@ -286,7 +369,7 @@
|
|
|
286
369
|
}
|
|
287
370
|
|
|
288
371
|
.hero-links a {
|
|
289
|
-
color:
|
|
372
|
+
color: var(--hero-text);
|
|
290
373
|
display: flex;
|
|
291
374
|
align-items: center;
|
|
292
375
|
gap: 0.4rem;
|
|
@@ -372,11 +455,11 @@
|
|
|
372
455
|
}
|
|
373
456
|
|
|
374
457
|
.badge-flow {
|
|
375
|
-
background:
|
|
458
|
+
background: var(--badge-flow-bg);
|
|
376
459
|
color: var(--green);
|
|
377
460
|
}
|
|
378
461
|
.badge-rogue {
|
|
379
|
-
background:
|
|
462
|
+
background: var(--badge-rogue-bg);
|
|
380
463
|
color: var(--magenta);
|
|
381
464
|
}
|
|
382
465
|
|
|
@@ -424,19 +507,19 @@
|
|
|
424
507
|
font-size: 1.4rem;
|
|
425
508
|
}
|
|
426
509
|
|
|
427
|
-
.difficulty-
|
|
510
|
+
.difficulty-nightmare {
|
|
428
511
|
color: var(--red);
|
|
429
512
|
font-weight: 600;
|
|
430
513
|
}
|
|
431
|
-
.difficulty-
|
|
514
|
+
.difficulty-standard {
|
|
432
515
|
color: var(--yellow);
|
|
433
516
|
font-weight: 600;
|
|
434
517
|
}
|
|
435
|
-
.difficulty-
|
|
518
|
+
.difficulty-casual {
|
|
436
519
|
color: var(--green);
|
|
437
520
|
font-weight: 600;
|
|
438
521
|
}
|
|
439
|
-
.difficulty-
|
|
522
|
+
.difficulty-tactical {
|
|
440
523
|
color: var(--magenta);
|
|
441
524
|
font-weight: 600;
|
|
442
525
|
}
|
|
@@ -474,38 +557,6 @@
|
|
|
474
557
|
}
|
|
475
558
|
|
|
476
559
|
/* ── CLI Commands ── */
|
|
477
|
-
.cli-block {
|
|
478
|
-
overflow: hidden;
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
.cli-block-header {
|
|
482
|
-
background: #1c2128;
|
|
483
|
-
padding: 0.6rem 1rem;
|
|
484
|
-
font-size: 0.78rem;
|
|
485
|
-
color: var(--muted);
|
|
486
|
-
font-family: "SF Mono", monospace;
|
|
487
|
-
border-bottom: 1px solid var(--border);
|
|
488
|
-
display: flex;
|
|
489
|
-
align-items: center;
|
|
490
|
-
gap: 0.5rem;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
.cli-block-header::before {
|
|
494
|
-
content: "● ● ●";
|
|
495
|
-
color: #30363d;
|
|
496
|
-
font-size: 0.65rem;
|
|
497
|
-
letter-spacing: 0.2em;
|
|
498
|
-
}
|
|
499
|
-
|
|
500
|
-
.cli-block pre {
|
|
501
|
-
padding: 1.5rem;
|
|
502
|
-
overflow-x: auto;
|
|
503
|
-
font-family:
|
|
504
|
-
"SF Mono", "Cascadia Mono", "Fira Code", "Consolas", monospace;
|
|
505
|
-
font-size: 0.88rem;
|
|
506
|
-
line-height: 1.8;
|
|
507
|
-
}
|
|
508
|
-
|
|
509
560
|
.cli-block .cmd {
|
|
510
561
|
color: var(--cyan);
|
|
511
562
|
}
|
|
@@ -542,19 +593,19 @@
|
|
|
542
593
|
.tier-amount {
|
|
543
594
|
color: var(--muted);
|
|
544
595
|
font-size: 0.82rem;
|
|
545
|
-
font-family: monospace;
|
|
546
596
|
}
|
|
547
597
|
|
|
548
598
|
.achievement-card.death {
|
|
549
|
-
border-color:
|
|
599
|
+
border-color: var(--death-border);
|
|
550
600
|
}
|
|
551
601
|
|
|
552
602
|
.tab-btn[aria-selected="true"].tab-death {
|
|
553
603
|
background: var(--red);
|
|
554
|
-
|
|
604
|
+
color: #f2ead6;
|
|
605
|
+
box-shadow: 0 2px 16px rgba(224, 88, 72, 0.3);
|
|
555
606
|
}
|
|
556
607
|
|
|
557
|
-
.tab-btn.tab-death:hover {
|
|
608
|
+
.tab-btn.tab-death:not([aria-selected="true"]):hover {
|
|
558
609
|
color: var(--red);
|
|
559
610
|
}
|
|
560
611
|
|
|
@@ -583,7 +634,7 @@
|
|
|
583
634
|
display: flex;
|
|
584
635
|
gap: 0.25rem;
|
|
585
636
|
margin-bottom: 2rem;
|
|
586
|
-
background:
|
|
637
|
+
background: var(--tab-bar-bg);
|
|
587
638
|
border: 1px solid var(--border);
|
|
588
639
|
border-radius: 10px;
|
|
589
640
|
padding: 0.3rem;
|
|
@@ -601,20 +652,20 @@
|
|
|
601
652
|
border-radius: 7px;
|
|
602
653
|
cursor: pointer;
|
|
603
654
|
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
|
|
604
|
-
font-family: "SF Mono", "Cascadia Mono", monospace;
|
|
605
655
|
white-space: nowrap;
|
|
606
|
-
letter-spacing:
|
|
656
|
+
letter-spacing: 0.02em;
|
|
657
|
+
text-transform: uppercase;
|
|
607
658
|
}
|
|
608
659
|
|
|
609
660
|
.tab-btn:hover {
|
|
610
661
|
color: var(--text);
|
|
611
|
-
background: rgba(
|
|
662
|
+
background: rgba(61, 56, 40, 0.25);
|
|
612
663
|
}
|
|
613
664
|
|
|
614
665
|
.tab-btn[aria-selected="true"] {
|
|
615
|
-
color: #
|
|
666
|
+
color: #f2ead6;
|
|
616
667
|
background: var(--cyan);
|
|
617
|
-
box-shadow: 0 2px 16px rgba(
|
|
668
|
+
box-shadow: 0 2px 16px rgba(124, 184, 212, 0.3);
|
|
618
669
|
}
|
|
619
670
|
|
|
620
671
|
.tab-panel {
|
|
@@ -668,7 +719,7 @@
|
|
|
668
719
|
/* ── Terminal chrome ── */
|
|
669
720
|
.term {
|
|
670
721
|
position: relative;
|
|
671
|
-
background:
|
|
722
|
+
background: var(--term-bg);
|
|
672
723
|
border: 1px solid var(--border);
|
|
673
724
|
border-radius: 10px;
|
|
674
725
|
overflow: hidden;
|
|
@@ -696,42 +747,42 @@
|
|
|
696
747
|
|
|
697
748
|
/* Glow variants */
|
|
698
749
|
.term[data-glow="cyan"] {
|
|
699
|
-
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(
|
|
750
|
+
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(124,184,212,0.06);
|
|
700
751
|
}
|
|
701
752
|
.term[data-glow="cyan"]:hover {
|
|
702
|
-
border-color: rgba(
|
|
703
|
-
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(
|
|
753
|
+
border-color: rgba(124,184,212,0.35);
|
|
754
|
+
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(124,184,212,0.12);
|
|
704
755
|
}
|
|
705
756
|
.term[data-glow="yellow"] {
|
|
706
|
-
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(
|
|
757
|
+
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(212,168,64,0.06);
|
|
707
758
|
}
|
|
708
759
|
.term[data-glow="yellow"]:hover {
|
|
709
|
-
border-color: rgba(
|
|
710
|
-
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(
|
|
760
|
+
border-color: rgba(212,168,64,0.35);
|
|
761
|
+
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(212,168,64,0.12);
|
|
711
762
|
}
|
|
712
763
|
.term[data-glow="red"] {
|
|
713
|
-
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(
|
|
764
|
+
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(224,88,72,0.06);
|
|
714
765
|
}
|
|
715
766
|
.term[data-glow="red"]:hover {
|
|
716
|
-
border-color: rgba(
|
|
717
|
-
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(
|
|
767
|
+
border-color: rgba(224,88,72,0.35);
|
|
768
|
+
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(224,88,72,0.12);
|
|
718
769
|
}
|
|
719
770
|
.term[data-glow="green"] {
|
|
720
|
-
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(
|
|
771
|
+
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(107,181,74,0.06);
|
|
721
772
|
}
|
|
722
773
|
.term[data-glow="green"]:hover {
|
|
723
|
-
border-color: rgba(
|
|
724
|
-
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(
|
|
774
|
+
border-color: rgba(107,181,74,0.35);
|
|
775
|
+
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(107,181,74,0.12);
|
|
725
776
|
}
|
|
726
777
|
|
|
727
778
|
/* Header bar */
|
|
728
779
|
.term-header {
|
|
729
|
-
background:
|
|
780
|
+
background: var(--term-header-bg);
|
|
730
781
|
padding: 0.6rem 0.9rem;
|
|
731
782
|
font-size: 0.75rem;
|
|
732
783
|
color: var(--muted);
|
|
733
784
|
font-family: "SF Mono", "Cascadia Mono", monospace;
|
|
734
|
-
border-bottom: 1px solid
|
|
785
|
+
border-bottom: 1px solid var(--border);
|
|
735
786
|
display: flex;
|
|
736
787
|
align-items: center;
|
|
737
788
|
gap: 0.65rem;
|
|
@@ -807,15 +858,146 @@
|
|
|
807
858
|
justify-content: center;
|
|
808
859
|
margin-top: 0.75rem;
|
|
809
860
|
}
|
|
861
|
+
|
|
862
|
+
/* ── Theme toggle ── */
|
|
863
|
+
.theme-toggle {
|
|
864
|
+
position: fixed;
|
|
865
|
+
top: 1rem;
|
|
866
|
+
right: 1rem;
|
|
867
|
+
z-index: 100;
|
|
868
|
+
width: 40px;
|
|
869
|
+
height: 40px;
|
|
870
|
+
border-radius: 50%;
|
|
871
|
+
border: 1px solid var(--border);
|
|
872
|
+
background: var(--card);
|
|
873
|
+
cursor: pointer;
|
|
874
|
+
display: flex;
|
|
875
|
+
align-items: center;
|
|
876
|
+
justify-content: center;
|
|
877
|
+
font-size: 1.1rem;
|
|
878
|
+
transition: background 0.2s, border-color 0.2s;
|
|
879
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
880
|
+
line-height: 1;
|
|
881
|
+
padding: 0;
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
.theme-toggle:hover {
|
|
885
|
+
border-color: var(--muted);
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
/* Sun visible in dark mode (click to go light) */
|
|
889
|
+
.theme-icon-moon { display: none; }
|
|
890
|
+
.theme-icon-sun { display: inline; }
|
|
891
|
+
[data-theme="light"] .theme-icon-sun { display: none; }
|
|
892
|
+
[data-theme="light"] .theme-icon-moon { display: inline; }
|
|
893
|
+
|
|
894
|
+
/* ── Light mode targeted overrides ── */
|
|
895
|
+
[data-theme="light"] .card {
|
|
896
|
+
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
[data-theme="light"] .term::after {
|
|
900
|
+
background: repeating-linear-gradient(
|
|
901
|
+
0deg,
|
|
902
|
+
transparent 0px,
|
|
903
|
+
transparent 2px,
|
|
904
|
+
rgba(0,0,0,0.018) 2px,
|
|
905
|
+
rgba(0,0,0,0.018) 4px
|
|
906
|
+
);
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
[data-theme="light"] .term {
|
|
910
|
+
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
[data-theme="light"] .term[data-glow="cyan"] {
|
|
914
|
+
box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(42,110,154,0.06);
|
|
915
|
+
}
|
|
916
|
+
[data-theme="light"] .term[data-glow="cyan"]:hover {
|
|
917
|
+
border-color: rgba(42,110,154,0.3);
|
|
918
|
+
box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(42,110,154,0.1);
|
|
919
|
+
}
|
|
920
|
+
[data-theme="light"] .term[data-glow="yellow"] {
|
|
921
|
+
box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(138,106,16,0.08);
|
|
922
|
+
}
|
|
923
|
+
[data-theme="light"] .term[data-glow="yellow"]:hover {
|
|
924
|
+
border-color: rgba(138,106,16,0.3);
|
|
925
|
+
box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(138,106,16,0.12);
|
|
926
|
+
}
|
|
927
|
+
[data-theme="light"] .term[data-glow="red"] {
|
|
928
|
+
box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(176,48,32,0.06);
|
|
929
|
+
}
|
|
930
|
+
[data-theme="light"] .term[data-glow="red"]:hover {
|
|
931
|
+
border-color: rgba(176,48,32,0.3);
|
|
932
|
+
box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(176,48,32,0.1);
|
|
933
|
+
}
|
|
934
|
+
[data-theme="light"] .term[data-glow="green"] {
|
|
935
|
+
box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(74,122,42,0.06);
|
|
936
|
+
}
|
|
937
|
+
[data-theme="light"] .term[data-glow="green"]:hover {
|
|
938
|
+
border-color: rgba(74,122,42,0.3);
|
|
939
|
+
box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(74,122,42,0.1);
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
[data-theme="light"] .hero h1 {
|
|
943
|
+
text-shadow:
|
|
944
|
+
0 2px 16px rgba(242,234,214,0.5),
|
|
945
|
+
0 1px 3px rgba(242,234,214,0.3);
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
[data-theme="light"] .hero-eyebrow {
|
|
949
|
+
text-shadow: 0 1px 8px rgba(242,234,214,0.6);
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
[data-theme="light"] .hero-tagline {
|
|
953
|
+
text-shadow: 0 1px 8px rgba(242,234,214,0.6);
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
[data-theme="light"] .hero-sub {
|
|
957
|
+
text-shadow: 0 1px 6px rgba(242,234,214,0.5);
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
[data-theme="light"] .copy-btn {
|
|
961
|
+
color: #f2ead6;
|
|
962
|
+
}
|
|
963
|
+
[data-theme="light"] .copy-btn:hover {
|
|
964
|
+
background: #5a8a38;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
[data-theme="light"] .install-box {
|
|
968
|
+
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
[data-theme="light"] .install-tabs {
|
|
972
|
+
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
973
|
+
}
|
|
974
|
+
[data-theme="light"] .install-tab.active {
|
|
975
|
+
color: var(--bg);
|
|
976
|
+
box-shadow: 0 1px 6px rgba(74, 122, 42, 0.25);
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
[data-theme="light"] .tab-btn[aria-selected="true"] {
|
|
980
|
+
color: #f2ead6;
|
|
981
|
+
}
|
|
810
982
|
</style>
|
|
811
983
|
</head>
|
|
812
984
|
<body>
|
|
985
|
+
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
|
|
986
|
+
<span class="theme-icon-sun">☀️</span>
|
|
987
|
+
<span class="theme-icon-moon">🌙</span>
|
|
988
|
+
</button>
|
|
989
|
+
|
|
813
990
|
<!-- ── Hero ── -->
|
|
814
991
|
<div class="hero">
|
|
815
992
|
<div class="hero-eyebrow">⛳</div>
|
|
816
993
|
<h1>Token<span>Golf</span></h1>
|
|
817
994
|
<p class="hero-tagline">Every token counts.</p>
|
|
818
995
|
|
|
996
|
+
<div class="install-tabs">
|
|
997
|
+
<button class="install-tab active" data-cmd="npm install -g tokengolf" onclick="switchInstall(this)">npm</button>
|
|
998
|
+
<button class="install-tab" data-cmd="brew tap josheche/tokengolf && brew install tokengolf" onclick="switchInstall(this)">brew</button>
|
|
999
|
+
<button class="install-tab" data-cmd="curl -fsSL https://raw.githubusercontent.com/josheche/tokengolf/main/install.sh | bash" onclick="switchInstall(this)">curl</button>
|
|
1000
|
+
</div>
|
|
819
1001
|
<div class="install-box">
|
|
820
1002
|
<input
|
|
821
1003
|
class="install-cmd mono"
|
|
@@ -910,32 +1092,32 @@
|
|
|
910
1092
|
<tbody>
|
|
911
1093
|
<tr>
|
|
912
1094
|
<td><span class="class-emoji">🏹</span> <strong>Rogue</strong></td>
|
|
913
|
-
<td
|
|
914
|
-
<td class="difficulty-
|
|
1095
|
+
<td>Haiku</td>
|
|
1096
|
+
<td class="difficulty-nightmare">Nightmare</td>
|
|
915
1097
|
<td>Glass cannon. Must prompt precisely.</td>
|
|
916
1098
|
</tr>
|
|
917
1099
|
<tr>
|
|
918
1100
|
<td>
|
|
919
1101
|
<span class="class-emoji">⚔️</span> <strong>Fighter</strong>
|
|
920
1102
|
</td>
|
|
921
|
-
<td
|
|
922
|
-
<td class="difficulty-
|
|
1103
|
+
<td>Sonnet</td>
|
|
1104
|
+
<td class="difficulty-standard">Standard</td>
|
|
923
1105
|
<td>Balanced. The default run.</td>
|
|
924
1106
|
</tr>
|
|
925
1107
|
<tr>
|
|
926
1108
|
<td>
|
|
927
1109
|
<span class="class-emoji">🧙</span> <strong>Warlock</strong>
|
|
928
1110
|
</td>
|
|
929
|
-
<td
|
|
930
|
-
<td class="difficulty-
|
|
1111
|
+
<td>Opus</td>
|
|
1112
|
+
<td class="difficulty-casual">Casual</td>
|
|
931
1113
|
<td>Powerful but expensive.</td>
|
|
932
1114
|
</tr>
|
|
933
1115
|
<tr>
|
|
934
1116
|
<td>
|
|
935
1117
|
<span class="class-emoji">⚜️</span> <strong>Paladin</strong>
|
|
936
1118
|
</td>
|
|
937
|
-
<td
|
|
938
|
-
<td class="difficulty-
|
|
1119
|
+
<td>Opusplan</td>
|
|
1120
|
+
<td class="difficulty-tactical">Tactical</td>
|
|
939
1121
|
<td>Strategic planner. Thinks before acting.</td>
|
|
940
1122
|
</tr>
|
|
941
1123
|
</tbody>
|
|
@@ -1004,32 +1186,27 @@
|
|
|
1004
1186
|
<div class="term" data-glow="yellow">
|
|
1005
1187
|
<div class="term-header">tokengolf scorecard — won</div>
|
|
1006
1188
|
<pre>
|
|
1007
|
-
<span class="border-yellow"
|
|
1008
|
-
<span class="border-yellow"
|
|
1009
|
-
<span class="border-yellow"
|
|
1010
|
-
<span class="border-yellow"
|
|
1011
|
-
<span class="border-yellow"
|
|
1012
|
-
<span class="border-yellow"
|
|
1013
|
-
<span class="border-yellow"
|
|
1014
|
-
<span class="border-yellow"
|
|
1015
|
-
<span class="border-yellow"
|
|
1016
|
-
<span class="border-yellow"
|
|
1017
|
-
<span class="border-yellow"
|
|
1018
|
-
<span class="border-yellow"
|
|
1019
|
-
<span class="border-yellow"
|
|
1020
|
-
<span class="border-yellow"
|
|
1021
|
-
<span class="border-yellow"
|
|
1022
|
-
<span class="border-yellow"
|
|
1023
|
-
<span class="border-yellow"
|
|
1024
|
-
<span class="border-yellow"
|
|
1025
|
-
<span class="border-yellow"
|
|
1026
|
-
<span class="border-yellow"
|
|
1027
|
-
<span class="border-yellow"
|
|
1028
|
-
<span class="border-yellow">║</span> <span class="border-yellow">║</span>
|
|
1029
|
-
<span class="border-yellow">║</span> <span class="t-dim">Tool calls:</span> <span class="border-yellow">║</span>
|
|
1030
|
-
<span class="border-yellow">║</span> <span class="t-white">Read</span> ×8 <span class="t-white">Edit</span> ×4 <span class="t-white">Bash</span> ×3 <span class="t-white">Grep</span> ×2 <span class="t-white">Glob</span> ×1 <span class="border-yellow">║</span>
|
|
1031
|
-
<span class="border-yellow">║</span> <span class="border-yellow">║</span>
|
|
1032
|
-
<span class="border-yellow">╚══════════════════════════════════════════════════════╝</span></pre>
|
|
1189
|
+
<span class="border-yellow">██</span> <span class="t-b t-yellow">🏆 SESSION COMPLETE</span>
|
|
1190
|
+
<span class="border-yellow">██</span> <span class="t-b t-white">add pagination to /users endpoint</span>
|
|
1191
|
+
<span class="border-yellow">██</span> <span class="t-dim">──────────────────────────────────────────────────</span>
|
|
1192
|
+
<span class="border-yellow">██</span> <span class="t-dim">SPENT</span> <span class="t-dim">BUDGET</span> <span class="t-dim">USED</span> <span class="t-dim">MODEL</span> <span class="t-dim">TIER</span>
|
|
1193
|
+
<span class="border-yellow">██</span> <span class="t-b t-green">$0.2300</span> $1.50 <span class="t-green">15%</span> <span class="t-cyan">⚔️ Sonnet</span> <span class="t-yellow">🥇 Gold</span>
|
|
1194
|
+
<span class="border-yellow">██</span>
|
|
1195
|
+
<span class="border-yellow">██</span> <span class="t-b t-magenta">🌟 LEGENDARY</span>
|
|
1196
|
+
<span class="border-yellow">██</span> <span class="t-dim">──────────────────────────────────────────────────</span>
|
|
1197
|
+
<span class="border-yellow">██</span> <span class="t-dim">Achievements unlocked:</span>
|
|
1198
|
+
<span class="border-yellow">██</span> <span class="t-yellow">🎯 Sniper — Under 25% budget</span>
|
|
1199
|
+
<span class="border-yellow">██</span> <span class="t-yellow">🥈 Silver — Completed with Sonnet</span>
|
|
1200
|
+
<span class="border-yellow">██</span> <span class="t-yellow">🔥 No Rest for the Wicked — One session</span>
|
|
1201
|
+
<span class="border-yellow">██</span> <span class="t-yellow">✅ Clean Run — Zero failed tool calls</span>
|
|
1202
|
+
<span class="border-yellow">██</span> <span class="t-yellow">🧰 Toolbox — 5+ distinct tool types</span>
|
|
1203
|
+
<span class="border-yellow">██</span> <span class="t-yellow">🤫 Silent Run — No extended thinking</span>
|
|
1204
|
+
<span class="border-yellow">██</span> <span class="t-dim">──────────────────────────────────────────────────</span>
|
|
1205
|
+
<span class="border-yellow">██</span> <span class="t-dim">Model usage:</span> <span class="t-cyan">🏹 17% Haiku</span>
|
|
1206
|
+
<span class="border-yellow">██</span> <span class="t-muted">Sonnet</span> <span class="t-white">83%</span> <span class="t-dim">$0.19</span> <span class="t-muted">Haiku</span> <span class="t-white">17%</span> <span class="t-dim">$0.04</span>
|
|
1207
|
+
<span class="border-yellow">██</span> <span class="t-dim">──────────────────────────────────────────────────</span>
|
|
1208
|
+
<span class="border-yellow">██</span> <span class="t-dim">Tool calls:</span>
|
|
1209
|
+
<span class="border-yellow">██</span> <span class="t-white">Read</span> ×8 <span class="t-white">Edit</span> ×4 <span class="t-white">Bash</span> ×3 <span class="t-white">Grep</span> ×2 <span class="t-white">Glob</span> ×1</pre>
|
|
1033
1210
|
</div>
|
|
1034
1211
|
<div class="demo-label">
|
|
1035
1212
|
<strong>ScoreCard (Won)</strong> appears on <code>/exit</code>. Budget, tier, efficiency, achievements, model breakdown, and tool usage.
|
|
@@ -1040,32 +1217,25 @@
|
|
|
1040
1217
|
<div class="term" data-glow="red">
|
|
1041
1218
|
<div class="term-header">tokengolf scorecard — died</div>
|
|
1042
1219
|
<pre>
|
|
1043
|
-
<span class="border-red"
|
|
1044
|
-
<span class="border-red"
|
|
1045
|
-
<span class="border-red"
|
|
1046
|
-
<span class="border-red"
|
|
1047
|
-
<span class="border-red"
|
|
1048
|
-
<span class="border-red"
|
|
1049
|
-
<span class="border-red"
|
|
1050
|
-
<span class="border-red"
|
|
1051
|
-
<span class="border-red"
|
|
1052
|
-
<span class="border-red"
|
|
1053
|
-
<span class="border-red"
|
|
1054
|
-
<span class="border-red"
|
|
1055
|
-
<span class="border-red"
|
|
1056
|
-
<span class="border-red"
|
|
1057
|
-
<span class="border-red"
|
|
1058
|
-
<span class="border-red"
|
|
1059
|
-
<span class="border-red"
|
|
1060
|
-
<span class="border-red"
|
|
1061
|
-
<span class="border-red"
|
|
1062
|
-
<span class="border-red">║</span> <span class="border-red">║</span>
|
|
1063
|
-
<span class="border-red">║</span> <span class="t-red">┌──────────────────────────────────────────────┐</span> <span class="border-red">║</span>
|
|
1064
|
-
<span class="border-red">║</span> <span class="t-red">│</span> <span class="t-b t-red">Cause of death:</span> Budget exceeded by $2.37 <span class="t-red">│</span> <span class="border-red">║</span>
|
|
1065
|
-
<span class="border-red">║</span> <span class="t-red">│</span> <span class="t-dim">Tip: Use Read with line ranges, not full.</span> <span class="t-red">│</span> <span class="border-red">║</span>
|
|
1066
|
-
<span class="border-red">║</span> <span class="t-red">└──────────────────────────────────────────────┘</span> <span class="border-red">║</span>
|
|
1067
|
-
<span class="border-red">║</span> <span class="border-red">║</span>
|
|
1068
|
-
<span class="border-red">╚══════════════════════════════════════════════════════╝</span></pre>
|
|
1220
|
+
<span class="border-red">██</span> <span class="t-b t-red">💀 BUDGET BUSTED</span>
|
|
1221
|
+
<span class="border-red">██</span> <span class="t-b t-white">migrate postgres schema to v3</span>
|
|
1222
|
+
<span class="border-red">██</span> <span class="t-dim">──────────────────────────────────────────────────</span>
|
|
1223
|
+
<span class="border-red">██</span> <span class="t-dim">SPENT</span> <span class="t-dim">BUDGET</span> <span class="t-dim">USED</span> <span class="t-dim">MODEL</span> <span class="t-dim">TIER</span>
|
|
1224
|
+
<span class="border-red">██</span> <span class="t-b t-red">$3.8700</span> $1.50 <span class="t-red">258%</span> <span class="t-cyan">⚔️ Sonnet</span> 💸 Reckless
|
|
1225
|
+
<span class="border-red">██</span>
|
|
1226
|
+
<span class="border-red">██</span> <span class="t-b t-red">💀 BUSTED</span>
|
|
1227
|
+
<span class="border-red">██</span> <span class="t-dim">──────────────────────────────────────────────────</span>
|
|
1228
|
+
<span class="border-red">██</span> <span class="t-dim">Achievements unlocked:</span>
|
|
1229
|
+
<span class="border-red">██</span> <span class="t-yellow">🤦 Hubris — Ultrathink, busted anyway</span>
|
|
1230
|
+
<span class="border-red">██</span> <span class="t-yellow">💥 Blowout — Spent 2× budget</span>
|
|
1231
|
+
<span class="border-red">██</span> <span class="t-yellow">🤡 Fumble — 5+ failed tool calls</span>
|
|
1232
|
+
<span class="border-red">██</span> <span class="t-yellow">🔨 Tool Happy — 30+ tool calls, died</span>
|
|
1233
|
+
<span class="border-red">██</span> <span class="t-yellow">🍷 Expensive Taste — $0.50+/prompt</span>
|
|
1234
|
+
<span class="border-red">██</span> <span class="t-dim">──────────────────────────────────────────────────</span>
|
|
1235
|
+
<span class="border-red">██</span> <span class="t-dim">Extended thinking:</span> <span class="t-magenta">🔮 2× invoked</span>
|
|
1236
|
+
<span class="border-red">██</span>
|
|
1237
|
+
<span class="border-red">██</span> <span class="t-b t-red">Cause of death:</span> Budget exceeded by $2.37
|
|
1238
|
+
<span class="border-red">██</span> <span class="t-dim">Tip: Use Read with line ranges, not full.</span></pre>
|
|
1069
1239
|
</div>
|
|
1070
1240
|
<div class="demo-label">
|
|
1071
1241
|
<strong>ScoreCard (Died)</strong> is permadeath. Budget exceeded = death marks. Hubris, Blowout, Fumble. Wear them with shame.
|
|
@@ -1082,27 +1252,21 @@
|
|
|
1082
1252
|
<pre>
|
|
1083
1253
|
<span class="t-b t-yellow">⛳ TokenGolf</span> <span class="t-muted">Active Run</span> <span class="t-dim">42m 18s</span>
|
|
1084
1254
|
|
|
1085
|
-
<span class="border-yellow"
|
|
1086
|
-
<span class="border-yellow"
|
|
1087
|
-
<span class="border-yellow"
|
|
1088
|
-
<span class="border-yellow"
|
|
1089
|
-
<span class="border-yellow"
|
|
1090
|
-
<span class="border-yellow"
|
|
1091
|
-
<span class="border-yellow"
|
|
1092
|
-
<span class="border-yellow"
|
|
1093
|
-
<span class="border-yellow"
|
|
1094
|
-
<span class="border-yellow"
|
|
1095
|
-
<span class="border-yellow"
|
|
1096
|
-
<span class="border-yellow"
|
|
1097
|
-
<span class="border-yellow"
|
|
1098
|
-
<span class="border-yellow"
|
|
1099
|
-
<span class="border-yellow"
|
|
1100
|
-
<span class="border-yellow">│</span> <span class="border-yellow">│</span>
|
|
1101
|
-
<span class="border-yellow">│</span> <span class="t-red">┌──────────────────────────────────────────────┐</span> <span class="border-yellow">│</span>
|
|
1102
|
-
<span class="border-yellow">│</span> <span class="t-red">│</span> <span class="t-b t-red">⚠️ BUDGET WARNING — $1.16 left</span> <span class="t-red">│</span> <span class="border-yellow">│</span>
|
|
1103
|
-
<span class="border-yellow">│</span> <span class="t-red">└──────────────────────────────────────────────┘</span> <span class="border-yellow">│</span>
|
|
1104
|
-
<span class="border-yellow">│</span> <span class="border-yellow">│</span>
|
|
1105
|
-
<span class="border-yellow">╰──────────────────────────────────────────────────────╯</span></pre>
|
|
1255
|
+
<span class="border-yellow">██</span> <span class="t-b t-white">refactor database connection pooling</span>
|
|
1256
|
+
<span class="border-yellow">██</span>
|
|
1257
|
+
<span class="border-yellow">██</span> 🧙 <span class="t-cyan">Opus</span> Budget <span class="t-green">$7.50</span> Spent <span class="t-red">$6.3400</span> <span class="t-yellow">😅 CLOSE CALL</span>
|
|
1258
|
+
<span class="border-yellow">██</span>
|
|
1259
|
+
<span class="border-yellow">██</span> 💰 <span class="t-red">████████████████████░░░░</span> <span class="t-red">85%</span>
|
|
1260
|
+
<span class="border-yellow">██</span>
|
|
1261
|
+
<span class="border-yellow">██</span> <span class="t-green">✓</span> <span class="t-green">Floor 1: Write the code</span>
|
|
1262
|
+
<span class="border-yellow">██</span> <span class="t-green">✓</span> <span class="t-green">Floor 2: Write the tests</span>
|
|
1263
|
+
<span class="border-yellow">██</span> <span class="t-yellow">▶</span> <span class="t-white">Floor 3: Fix failing tests</span>
|
|
1264
|
+
<span class="border-yellow">██</span> <span class="t-dim">○ Floor 4: Code review pass</span>
|
|
1265
|
+
<span class="border-yellow">██</span> <span class="t-dim">○ Floor 5: PR merged — BOSS 🏆</span>
|
|
1266
|
+
<span class="border-yellow">██</span>
|
|
1267
|
+
<span class="border-yellow">██</span> <span class="t-muted">Prompts</span> <span class="t-white">12</span> <span class="t-muted">Tools</span> <span class="t-white">35</span>
|
|
1268
|
+
<span class="border-yellow">██</span>
|
|
1269
|
+
<span class="border-yellow">██</span> <span class="t-b t-red">⚠️ BUDGET WARNING — $1.16 left</span></pre>
|
|
1106
1270
|
</div>
|
|
1107
1271
|
<div class="demo-label">
|
|
1108
1272
|
<strong>Active Run</strong> shows live status with progress bar, floor tracker, and budget warning at 80%+. Auto-refreshes every 2 seconds.
|
|
@@ -1118,18 +1282,12 @@
|
|
|
1118
1282
|
<pre>
|
|
1119
1283
|
<span class="t-b t-yellow">⛳ TokenGolf</span> <span class="t-muted">Career Stats</span>
|
|
1120
1284
|
|
|
1121
|
-
<span class="border-gray"
|
|
1122
|
-
<span class="border-gray"
|
|
1123
|
-
<span class="border-gray">│</span> <span class="t-dim">RUNS</span> <span class="t-dim">WINS</span> <span class="t-dim">DEATHS</span> <span class="t-dim">WIN RATE</span> <span class="t-dim">AVG SPEND</span> <span class="border-gray">│</span>
|
|
1124
|
-
<span class="border-gray">│</span> <span class="t-b t-white">24</span> <span class="t-b t-green">18</span> <span class="t-b t-red">6</span> <span class="t-b t-green">75%</span> <span class="t-b t-cyan">$1.4200</span> <span class="border-gray">│</span>
|
|
1125
|
-
<span class="border-gray">│</span> <span class="border-gray">│</span>
|
|
1126
|
-
<span class="border-gray">└──────────────────────────────────────────────────────┘</span>
|
|
1285
|
+
<span class="border-gray">██</span> <span class="t-dim">RUNS</span> <span class="t-dim">WINS</span> <span class="t-dim">DEATHS</span> <span class="t-dim">WIN RATE</span> <span class="t-dim">AVG SPEND</span>
|
|
1286
|
+
<span class="border-gray">██</span> <span class="t-b t-white">24</span> <span class="t-b t-green">18</span> <span class="t-b t-red">6</span> <span class="t-b t-green">75%</span> <span class="t-b t-cyan">$1.4200</span>
|
|
1127
1287
|
|
|
1128
1288
|
<span class="t-yellow">🏆 Personal Best</span>
|
|
1129
|
-
<span class="border-yellow"
|
|
1130
|
-
<span class="border-yellow"
|
|
1131
|
-
<span class="border-yellow">│</span> <span class="t-green">$0.0089</span> <span class="t-muted">of $0.15</span> 🏹 <span class="t-cyan">💎 Diamond</span> <span class="border-yellow">│</span>
|
|
1132
|
-
<span class="border-yellow">╰──────────────────────────────────────────────────────╯</span>
|
|
1289
|
+
<span class="border-yellow">██</span> fix typo in README badge URL
|
|
1290
|
+
<span class="border-yellow">██</span> <span class="t-green">$0.0089</span> <span class="t-muted">of $0.15</span> 🏹 <span class="t-cyan">💎 Diamond</span>
|
|
1133
1291
|
|
|
1134
1292
|
<span class="t-dim">Recent runs:</span>
|
|
1135
1293
|
<span class="t-green">✓</span> add pagination to /users <span class="t-green">$0.23</span> <span class="t-muted">/$1.50</span> ⚔️ <span class="t-yellow">🥇</span> <span class="t-dim">15%</span>
|
|
@@ -1142,12 +1300,8 @@
|
|
|
1142
1300
|
<span class="t-green">✓</span> add dark mode toggle <span class="t-green">$0.41</span> <span class="t-muted">/$1.50</span> ⚔️ <span class="t-white">🥈</span> <span class="t-dim">27%</span>
|
|
1143
1301
|
|
|
1144
1302
|
<span class="t-dim">Recent achievements:</span>
|
|
1145
|
-
<span class="
|
|
1146
|
-
|
|
1147
|
-
<span class="border-gray">└───────────┘</span> <span class="border-gray">└───────────┘</span> <span class="border-gray">└────────────┘</span> <span class="border-gray">└──────────────┘</span>
|
|
1148
|
-
<span class="border-gray">┌────────────┐</span> <span class="border-gray">┌─────────────┐</span> <span class="border-gray">┌──────────────────┐</span>
|
|
1149
|
-
<span class="border-gray">│</span> 💎 Diamond <span class="border-gray">│</span> <span class="border-gray">│</span> 🥊 One Shot <span class="border-gray">│</span> <span class="border-gray">│</span> 🪙 Penny Pincher <span class="border-gray">│</span>
|
|
1150
|
-
<span class="border-gray">└────────────┘</span> <span class="border-gray">└─────────────┘</span> <span class="border-gray">└──────────────────┘</span></pre>
|
|
1303
|
+
🎯 <span class="t-dim">Sniper</span> 🥈 <span class="t-dim">Silver</span> 🔥 <span class="t-dim">No Rest</span> ✅ <span class="t-dim">Clean Run</span>
|
|
1304
|
+
💎 <span class="t-dim">Diamond</span> 🥊 <span class="t-dim">One Shot</span> 🪙 <span class="t-dim">Penny Pincher</span></pre>
|
|
1151
1305
|
</div>
|
|
1152
1306
|
<div class="demo-label">
|
|
1153
1307
|
<strong>Career Stats</strong> is your lifetime dashboard. Wins, deaths, win rate, personal best, recent runs, and achievement collection.
|
|
@@ -1578,11 +1732,14 @@
|
|
|
1578
1732
|
<!-- ── CLI Commands ── -->
|
|
1579
1733
|
<section id="cli">
|
|
1580
1734
|
<h2><span>⌨️</span>CLI Commands</h2>
|
|
1581
|
-
<div class="
|
|
1582
|
-
<div class="
|
|
1735
|
+
<div class="term cli-block" data-glow="cyan">
|
|
1736
|
+
<div class="term-header">terminal</div>
|
|
1583
1737
|
<pre>
|
|
1584
|
-
<span class="comment"># Install</span>
|
|
1738
|
+
<span class="comment"># Install (pick one)</span>
|
|
1585
1739
|
<span class="dollar">$</span> <span class="cmd">npm install -g tokengolf</span>
|
|
1740
|
+
<span class="dollar">$</span> <span class="cmd">brew tap josheche/tokengolf && brew install tokengolf</span>
|
|
1741
|
+
<span class="dollar">$</span> <span class="cmd">curl -fsSL https://raw.githubusercontent.com/josheche/tokengolf/main/install.sh | bash</span>
|
|
1742
|
+
|
|
1586
1743
|
<span class="dollar">$</span> <span class="cmd">tokengolf install</span> <span class="comment"># patches ~/.claude/settings.json with hooks</span>
|
|
1587
1744
|
|
|
1588
1745
|
<span class="comment"># Roguelike — declare before you start</span>
|
|
@@ -1636,6 +1793,28 @@
|
|
|
1636
1793
|
});
|
|
1637
1794
|
});
|
|
1638
1795
|
|
|
1796
|
+
/* ── Theme toggle ── */
|
|
1797
|
+
document.getElementById('theme-toggle').addEventListener('click', () => {
|
|
1798
|
+
const next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
|
|
1799
|
+
document.documentElement.setAttribute('data-theme', next);
|
|
1800
|
+
localStorage.setItem('tg-theme', next);
|
|
1801
|
+
});
|
|
1802
|
+
matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => {
|
|
1803
|
+
if (!localStorage.getItem('tg-theme')) {
|
|
1804
|
+
document.documentElement.setAttribute('data-theme', e.matches ? 'light' : 'dark');
|
|
1805
|
+
}
|
|
1806
|
+
});
|
|
1807
|
+
|
|
1808
|
+
function switchInstall(tab) {
|
|
1809
|
+
document.querySelectorAll('.install-tab').forEach(t => t.classList.remove('active'));
|
|
1810
|
+
tab.classList.add('active');
|
|
1811
|
+
document.getElementById('install-cmd').value = tab.dataset.cmd;
|
|
1812
|
+
// Reset copy button
|
|
1813
|
+
const btn = document.getElementById('copy-btn');
|
|
1814
|
+
btn.textContent = 'Copy';
|
|
1815
|
+
btn.classList.remove('copied');
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1639
1818
|
function copyInstall() {
|
|
1640
1819
|
const cmd = document.getElementById("install-cmd").value;
|
|
1641
1820
|
const btn = document.getElementById("copy-btn");
|