Round History
Recent results as a strip. It carries an explicit note that past rounds do not predict the next one, because a row of results is read as a pattern whether or not one exists.
src/components/ui/round-history.tsxAbout
From the component's own source, where it was written.
Recent round outcomes as a strip of chips.
Newest first, left to right. Game histories are read the way a ticker is — the most recent result is the one being reacted to — and appending to the end buries it off the right edge on a phone.
The thresholds that colour a chip are props, because "high" means 2× in one game and 100× in another. Hard-coding them produces a strip that is all one colour on half the games it is used for.
A note about what this cannot tell you is included deliberately: past rounds carry no information about the next one, and a history strip is the single most common surface for the gambler's fallacy.
Install
npx astralyx-ui add round-history
Usage
import { RoundHistory } from '@/components/ui/round-history'
<RoundHistory rounds={rounds} lowBelow={2} highAbove={10} />Composer
Change the props and the source below follows.
Past rounds do not affect future ones.
<RoundHistory rounds={rounds} lowBelow={2} highAbove={10} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
RoundHistory
Recent round outcomes as a strip of chips.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| rounds | Round[] | required | { id, value, at?, played?, detail? }, newest first. |
| lowBelow | number | 2 | Thresholds for the low and high tones. Game-specific, so they are props rather than baked in — 2× is a loss in one game and a win in another. |
| highAbove | number | 10 | Thresholds for the low and high tones. Game-specific, so they are props rather than baked in — 2× is a loss in one game and a win in another. |
| format | (value: number) => ReactNode | DEFAULT_FORMAT | For scores or currency instead of a multiplier. |
| now | Date | — | — |
| locale | string | 'en-GB' | — |
| note | ReactNode | 'Past rounds do not affect future ones.' | Overrides the default independence notice. It is rendered by default rather than opt-in. |
Types
Round
| Field | Type | Description |
|---|---|---|
| id | string | — |
| value | number | The result — a multiplier, a score, a number. |
| at? | Date | — |
| played? | boolean | Rings the rounds the player took part in, which is the only way to read your own run out of a shared strip. |
| detail? | ReactNode | — |