when-am-i / commit
Color-code answer cards by calendar, with a border and corner wash
.../calendars/aztec/01-aztec-xiuhp-hualli.png | Bin 844544 -> 929482 bytes .../aztec/02-aztec-mexica-year-bearer.png | Bin 844544 -> 929482 bytes screenshots/calendars/aztec/03-t-nalp-hualli.png | Bin 845017 -> 930204 bytes .../china/01-chinese-sexagenary-cycle.png | Bin 549928 -> 593474 bytes .../calendars/colonial-america/01-julian.png | Bin 402319 -> 445405 bytes .../calendars/colonial-america/02-gregorian.png | Bin 389321 -> 420008 bytes screenshots/calendars/ethiopia/01-ethiopian.png | Bin 469812 -> 514140 bytes screenshots/calendars/india/01-indian.png | Bin 434842 -> 479443 bytes screenshots/calendars/iran/01-islamic.png | Bin 484743 -> 526803 bytes screenshots/calendars/iran/02-persian.png | Bin 578626 -> 636971 bytes .../japan/01-japanese-lunisolar-calendar.png | Bin 410043 -> 458446 bytes screenshots/calendars/japan/02-japanese.png | Bin 391869 -> 440592 bytes screenshots/calendars/judea/01-hebrew.png | Bin 860351 -> 906390 bytes .../korea/01-korean-lunisolar-calendar.png | Bin 726517 -> 771577 bytes screenshots/calendars/korea/02-gregorian.png | Bin 658195 -> 689142 bytes screenshots/calendars/korea/03-gregorian.png | Bin 656650 -> 687343 bytes screenshots/calendars/korea/04-gregorian.png | Bin 632984 -> 662467 bytes screenshots/calendars/korea/05-gregorian.png | Bin 639440 -> 669181 bytes screenshots/calendars/korea/06-dangi.png | Bin 739927 -> 808473 bytes .../maori/01-maramataka-m-ori-lunar-calendar.png | Bin 422504 -> 466677 bytes .../massachusett/01-algonquian-lunar-calendar.png | Bin 1197401 -> 1288101 bytes screenshots/calendars/maya/01-maya-long-count.png | Bin 862417 -> 947763 bytes .../maya/02-tzolk-in-and-haab-calendar-round.png | Bin 681807 -> 727921 bytes screenshots/calendars/north-korea/01-dangi.png | Bin 709205 -> 775072 bytes screenshots/calendars/north-korea/02-juche.png | Bin 746821 -> 819135 bytes screenshots/calendars/north-korea/03-gregorian.png | Bin 700565 -> 760351 bytes .../calendars/oregon-country/01-gregorian.png | Bin 447893 -> 480402 bytes screenshots/calendars/ottoman/01-islamic.png | Bin 457037 -> 503685 bytes screenshots/calendars/ottoman/02-rumi.png | Bin 651517 -> 740422 bytes screenshots/calendars/ottoman/03-gregorian.png | Bin 402711 -> 433803 bytes .../revolutionary-france/01-gregorian.png | Bin 431031 -> 461267 bytes .../02-french-republican-calendar.png | Bin 500559 -> 547422 bytes .../03-french-republican-calendar.png | Bin 423313 -> 453541 bytes .../revolutionary-france/04-gregorian.png | Bin 426242 -> 456593 bytes .../calendars/russian-america/01-julian.png | Bin 457950 -> 502372 bytes .../calendars/russian-america/02-gregorian.png | Bin 448183 -> 478101 bytes screenshots/calendars/thailand/01-buddhist.png | Bin 463416 -> 510288 bytes .../vietnam/01-vietnamese-lunisolar-calendar.png | Bin 683649 -> 755581 bytes screenshots/calendars/vietnam/02-gregorian.png | Bin 663628 -> 736812 bytes .../vietnam/03-vietnamese-lunisolar-calendar.png | Bin 663628 -> 736812 bytes src/App.tsx | 2 +- src/components/ResultPanel.tsx | 40 ++++++++++++++++++--- 42 files changed, 36 insertions(+), 6 deletions(-) diff --git a/screenshots/calendars/aztec/01-aztec-xiuhp-hualli.png b/screenshots/calendars/aztec/01-aztec-xiuhp-hualli.png index 2bd4829..f37cfa3 100644 Binary files a/screenshots/calendars/aztec/01-aztec-xiuhp-hualli.png and b/screenshots/calendars/aztec/01-aztec-xiuhp-hualli.png differ diff --git a/screenshots/calendars/aztec/02-aztec-mexica-year-bearer.png b/screenshots/calendars/aztec/02-aztec-mexica-year-bearer.png index 2bd4829..f37cfa3 100644 Binary files a/screenshots/calendars/aztec/02-aztec-mexica-year-bearer.png and b/screenshots/calendars/aztec/02-aztec-mexica-year-bearer.png differ diff --git a/screenshots/calendars/aztec/03-t-nalp-hualli.png b/screenshots/calendars/aztec/03-t-nalp-hualli.png index fc23553..22ec325 100644 Binary files a/screenshots/calendars/aztec/03-t-nalp-hualli.png and b/screenshots/calendars/aztec/03-t-nalp-hualli.png differ diff --git a/screenshots/calendars/china/01-chinese-sexagenary-cycle.png b/screenshots/calendars/china/01-chinese-sexagenary-cycle.png index 6613670..a169a0e 100644 Binary files a/screenshots/calendars/china/01-chinese-sexagenary-cycle.png and b/screenshots/calendars/china/01-chinese-sexagenary-cycle.png differ diff --git a/screenshots/calendars/colonial-america/01-julian.png b/screenshots/calendars/colonial-america/01-julian.png index f5878b4..acd3592 100644 Binary files a/screenshots/calendars/colonial-america/01-julian.png and b/screenshots/calendars/colonial-america/01-julian.png differ diff --git a/screenshots/calendars/colonial-america/02-gregorian.png b/screenshots/calendars/colonial-america/02-gregorian.png index e5b5047..eb79d46 100644 Binary files a/screenshots/calendars/colonial-america/02-gregorian.png and b/screenshots/calendars/colonial-america/02-gregorian.png differ diff --git a/screenshots/calendars/ethiopia/01-ethiopian.png b/screenshots/calendars/ethiopia/01-ethiopian.png index 04e541c..757afc7 100644 Binary files a/screenshots/calendars/ethiopia/01-ethiopian.png and b/screenshots/calendars/ethiopia/01-ethiopian.png differ diff --git a/screenshots/calendars/india/01-indian.png b/screenshots/calendars/india/01-indian.png index 7b2fe01..949d37e 100644 Binary files a/screenshots/calendars/india/01-indian.png and b/screenshots/calendars/india/01-indian.png differ diff --git a/screenshots/calendars/iran/01-islamic.png b/screenshots/calendars/iran/01-islamic.png index a770d25..3713c88 100644 Binary files a/screenshots/calendars/iran/01-islamic.png and b/screenshots/calendars/iran/01-islamic.png differ diff --git a/screenshots/calendars/iran/02-persian.png b/screenshots/calendars/iran/02-persian.png index 3c30bbd..494fbb0 100644 Binary files a/screenshots/calendars/iran/02-persian.png and b/screenshots/calendars/iran/02-persian.png differ diff --git a/screenshots/calendars/japan/01-japanese-lunisolar-calendar.png b/screenshots/calendars/japan/01-japanese-lunisolar-calendar.png index 17d6324..72391fc 100644 Binary files a/screenshots/calendars/japan/01-japanese-lunisolar-calendar.png and b/screenshots/calendars/japan/01-japanese-lunisolar-calendar.png differ diff --git a/screenshots/calendars/japan/02-japanese.png b/screenshots/calendars/japan/02-japanese.png index 4fcecd7..dbcd570 100644 Binary files a/screenshots/calendars/japan/02-japanese.png and b/screenshots/calendars/japan/02-japanese.png differ diff --git a/screenshots/calendars/judea/01-hebrew.png b/screenshots/calendars/judea/01-hebrew.png index b9c305a..915b157 100644 Binary files a/screenshots/calendars/judea/01-hebrew.png and b/screenshots/calendars/judea/01-hebrew.png differ diff --git a/screenshots/calendars/korea/01-korean-lunisolar-calendar.png b/screenshots/calendars/korea/01-korean-lunisolar-calendar.png index 8194ad4..f1247d8 100644 Binary files a/screenshots/calendars/korea/01-korean-lunisolar-calendar.png and b/screenshots/calendars/korea/01-korean-lunisolar-calendar.png differ diff --git a/screenshots/calendars/korea/02-gregorian.png b/screenshots/calendars/korea/02-gregorian.png index 7783fde..49abd65 100644 Binary files a/screenshots/calendars/korea/02-gregorian.png and b/screenshots/calendars/korea/02-gregorian.png differ diff --git a/screenshots/calendars/korea/03-gregorian.png b/screenshots/calendars/korea/03-gregorian.png index 160dae5..cd822c2 100644 Binary files a/screenshots/calendars/korea/03-gregorian.png and b/screenshots/calendars/korea/03-gregorian.png differ diff --git a/screenshots/calendars/korea/04-gregorian.png b/screenshots/calendars/korea/04-gregorian.png index 7678caf..6194bab 100644 Binary files a/screenshots/calendars/korea/04-gregorian.png and b/screenshots/calendars/korea/04-gregorian.png differ diff --git a/screenshots/calendars/korea/05-gregorian.png b/screenshots/calendars/korea/05-gregorian.png index 49571c5..04a9427 100644 Binary files a/screenshots/calendars/korea/05-gregorian.png and b/screenshots/calendars/korea/05-gregorian.png differ diff --git a/screenshots/calendars/korea/06-dangi.png b/screenshots/calendars/korea/06-dangi.png index 914dc92..f76a7ca 100644 Binary files a/screenshots/calendars/korea/06-dangi.png and b/screenshots/calendars/korea/06-dangi.png differ diff --git a/screenshots/calendars/maori/01-maramataka-m-ori-lunar-calendar.png b/screenshots/calendars/maori/01-maramataka-m-ori-lunar-calendar.png index 80e7524..9978a2f 100644 Binary files a/screenshots/calendars/maori/01-maramataka-m-ori-lunar-calendar.png and b/screenshots/calendars/maori/01-maramataka-m-ori-lunar-calendar.png differ diff --git a/screenshots/calendars/massachusett/01-algonquian-lunar-calendar.png b/screenshots/calendars/massachusett/01-algonquian-lunar-calendar.png index 0c4aeb8..0181dd4 100644 Binary files a/screenshots/calendars/massachusett/01-algonquian-lunar-calendar.png and b/screenshots/calendars/massachusett/01-algonquian-lunar-calendar.png differ diff --git a/screenshots/calendars/maya/01-maya-long-count.png b/screenshots/calendars/maya/01-maya-long-count.png index 8af5266..e1837ce 100644 Binary files a/screenshots/calendars/maya/01-maya-long-count.png and b/screenshots/calendars/maya/01-maya-long-count.png differ diff --git a/screenshots/calendars/maya/02-tzolk-in-and-haab-calendar-round.png b/screenshots/calendars/maya/02-tzolk-in-and-haab-calendar-round.png index dbe6e7b..b426f75 100644 Binary files a/screenshots/calendars/maya/02-tzolk-in-and-haab-calendar-round.png and b/screenshots/calendars/maya/02-tzolk-in-and-haab-calendar-round.png differ diff --git a/screenshots/calendars/north-korea/01-dangi.png b/screenshots/calendars/north-korea/01-dangi.png index 43983fa..945ec01 100644 Binary files a/screenshots/calendars/north-korea/01-dangi.png and b/screenshots/calendars/north-korea/01-dangi.png differ diff --git a/screenshots/calendars/north-korea/02-juche.png b/screenshots/calendars/north-korea/02-juche.png index f44dd33..c0e07db 100644 Binary files a/screenshots/calendars/north-korea/02-juche.png and b/screenshots/calendars/north-korea/02-juche.png differ diff --git a/screenshots/calendars/north-korea/03-gregorian.png b/screenshots/calendars/north-korea/03-gregorian.png index a4849ba..c68bc97 100644 Binary files a/screenshots/calendars/north-korea/03-gregorian.png and b/screenshots/calendars/north-korea/03-gregorian.png differ diff --git a/screenshots/calendars/oregon-country/01-gregorian.png b/screenshots/calendars/oregon-country/01-gregorian.png index 8a4e3ae..3975e4c 100644 Binary files a/screenshots/calendars/oregon-country/01-gregorian.png and b/screenshots/calendars/oregon-country/01-gregorian.png differ diff --git a/screenshots/calendars/ottoman/01-islamic.png b/screenshots/calendars/ottoman/01-islamic.png index 3e01734..1129b36 100644 Binary files a/screenshots/calendars/ottoman/01-islamic.png and b/screenshots/calendars/ottoman/01-islamic.png differ diff --git a/screenshots/calendars/ottoman/02-rumi.png b/screenshots/calendars/ottoman/02-rumi.png index 15e4625..53dcd70 100644 Binary files a/screenshots/calendars/ottoman/02-rumi.png and b/screenshots/calendars/ottoman/02-rumi.png differ diff --git a/screenshots/calendars/ottoman/03-gregorian.png b/screenshots/calendars/ottoman/03-gregorian.png index fe47361..7317caf 100644 Binary files a/screenshots/calendars/ottoman/03-gregorian.png and b/screenshots/calendars/ottoman/03-gregorian.png differ diff --git a/screenshots/calendars/revolutionary-france/01-gregorian.png b/screenshots/calendars/revolutionary-france/01-gregorian.png index acbf024..fc73317 100644 Binary files a/screenshots/calendars/revolutionary-france/01-gregorian.png and b/screenshots/calendars/revolutionary-france/01-gregorian.png differ diff --git a/screenshots/calendars/revolutionary-france/02-french-republican-calendar.png b/screenshots/calendars/revolutionary-france/02-french-republican-calendar.png index 4635e64..3e9687a 100644 Binary files a/screenshots/calendars/revolutionary-france/02-french-republican-calendar.png and b/screenshots/calendars/revolutionary-france/02-french-republican-calendar.png differ diff --git a/screenshots/calendars/revolutionary-france/03-french-republican-calendar.png b/screenshots/calendars/revolutionary-france/03-french-republican-calendar.png index d366aea..771f14d 100644 Binary files a/screenshots/calendars/revolutionary-france/03-french-republican-calendar.png and b/screenshots/calendars/revolutionary-france/03-french-republican-calendar.png differ diff --git a/screenshots/calendars/revolutionary-france/04-gregorian.png b/screenshots/calendars/revolutionary-france/04-gregorian.png index c102187..8e79eba 100644 Binary files a/screenshots/calendars/revolutionary-france/04-gregorian.png and b/screenshots/calendars/revolutionary-france/04-gregorian.png differ diff --git a/screenshots/calendars/russian-america/01-julian.png b/screenshots/calendars/russian-america/01-julian.png index 9e8cb27..dd0d761 100644 Binary files a/screenshots/calendars/russian-america/01-julian.png and b/screenshots/calendars/russian-america/01-julian.png differ diff --git a/screenshots/calendars/russian-america/02-gregorian.png b/screenshots/calendars/russian-america/02-gregorian.png index 7c82c7e..eac278a 100644 Binary files a/screenshots/calendars/russian-america/02-gregorian.png and b/screenshots/calendars/russian-america/02-gregorian.png differ diff --git a/screenshots/calendars/thailand/01-buddhist.png b/screenshots/calendars/thailand/01-buddhist.png index 84a879c..66c73ee 100644 Binary files a/screenshots/calendars/thailand/01-buddhist.png and b/screenshots/calendars/thailand/01-buddhist.png differ diff --git a/screenshots/calendars/vietnam/01-vietnamese-lunisolar-calendar.png b/screenshots/calendars/vietnam/01-vietnamese-lunisolar-calendar.png index 63614ef..976391f 100644 Binary files a/screenshots/calendars/vietnam/01-vietnamese-lunisolar-calendar.png and b/screenshots/calendars/vietnam/01-vietnamese-lunisolar-calendar.png differ diff --git a/screenshots/calendars/vietnam/02-gregorian.png b/screenshots/calendars/vietnam/02-gregorian.png index 98f8dfe..415fdf2 100644 Binary files a/screenshots/calendars/vietnam/02-gregorian.png and b/screenshots/calendars/vietnam/02-gregorian.png differ diff --git a/screenshots/calendars/vietnam/03-vietnamese-lunisolar-calendar.png b/screenshots/calendars/vietnam/03-vietnamese-lunisolar-calendar.png index 98f8dfe..415fdf2 100644 Binary files a/screenshots/calendars/vietnam/03-vietnamese-lunisolar-calendar.png and b/screenshots/calendars/vietnam/03-vietnamese-lunisolar-calendar.png differ diff --git a/src/App.tsx b/src/App.tsx index 8de9cdd..1ceed45 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -259,7 +259,7 @@ function App() { </div> <div className="app-answers"> - <ResultPanel picked={picked} date={date} resolution={resolution} /> + <ResultPanel picked={picked} date={date} resolution={resolution} colorFor={colorFor} /> </div> </div> diff --git a/src/components/ResultPanel.tsx b/src/components/ResultPanel.tsx index 823fb66..60a1a2e 100644 --- a/src/components/ResultPanel.tsx +++ b/src/components/ResultPanel.tsx @@ -6,6 +6,8 @@ interface ResultPanelProps { picked: { lat: number; lng: number } | null; date: HistoricalDate; resolution: Resolution | null; + /** Same calendar→color mapping used by the map overlays and year timeline. */ + colorFor: (calendarName: string) => string; } function yearText(date: HistoricalDate): string { @@ -82,13 +84,37 @@ function Reckoning({ reckoning }: { reckoning?: { label: string; sources: string ); } -function AnswerCard({ answer }: { answer: Answer }) { +function AnswerCard({ answer, color }: { answer: Answer; color: string }) { const { era, conversion } = answer; const who = era.usedBy ?? 'a local'; return ( - <li style={{ ...cardStyle, listStyle: 'none' }}> - <div style={{ fontSize: '0.85em', color: '#555', marginBottom: 4 }}> + <li + style={{ + ...cardStyle, + listStyle: 'none', + position: 'relative', + overflow: 'hidden', + border: `3px solid ${color}`, + }} + > + {/* A faint wash of the calendar's color in the top-left corner, fading to + transparent — a quiet hint of which calendar this card belongs to, + echoing the map/timeline legend without tinting the body text. */} + <div + aria-hidden + style={{ + position: 'absolute', + top: 0, + left: 0, + width: 280, + height: 90, + background: `radial-gradient(circle at top left, ${color} 0%, transparent 70%)`, + opacity: 0.35, + pointerEvents: 'none', + }} + /> + <div style={{ position: 'relative', fontSize: '0.85em', color: '#555', marginBottom: 4 }}> Ask <strong>{who}</strong>: </div> @@ -139,7 +165,7 @@ function AnswerCard({ answer }: { answer: Answer }) { ); } -const ResultPanel: React.FC<ResultPanelProps> = ({ picked, date, resolution }) => { +const ResultPanel: React.FC<ResultPanelProps> = ({ picked, date, resolution, colorFor }) => { if (!picked || !resolution) { return ( <p style={{ color: '#666', marginTop: 16 }}> @@ -180,7 +206,11 @@ const ResultPanel: React.FC<ResultPanelProps> = ({ picked, date, resolution }) = </p> <ul style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 0, margin: 0 }}> {resolution.answers.map((answer, i) => ( - <AnswerCard key={`${answer.region.name}-${answer.era.name}-${i}`} answer={answer} /> + <AnswerCard + key={`${answer.region.name}-${answer.era.name}-${i}`} + answer={answer} + color={colorFor(answer.era.calendar)} + /> ))} </ul> </div>