Play Limits

Usage

import { PlayLimits } from '@wdzyi/ui';

<PlayLimits
  limits={account.limits}
  used={account.deposited}
  onSave={(period, amount) => saveLimit(period, amount)}
  onBreak={(length) => startBreak(length)}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

limitsRecord<PlayLimitsPeriod, number | null>

Each period’s limit as it stands, daily, weekly and monthly, or null for none.

usedRecord<PlayLimitsPeriod, number>

What’s been deposited so far in each period.

period, defaultPeriod'daily' | 'weekly' | 'monthly' = 'daily'

Which period is showing, when you hold it, or where it starts.

onPeriodChange(period: PlayLimitsPeriod) => void

Called with the period picked on the switch.

presetsRecord<PlayLimitsPeriod, number[]>

The amounts offered for each period, beside the field for any other.

resetsRecord<PlayLimitsPeriod, string>

When each period starts again, as it should read, such as Resets Monday.

onSave(period: PlayLimitsPeriod, amount: number) => Promise<void>

Saves a new limit. Resolve once it’s saved, or reject and it can be tried again. Left out, it stands in for a moment.

onBreak(length: 'day' | 'week' | 'month') => Promise<void>

Starts a break of the length chosen, once it’s confirmed.

coolingOffstring = '24 hours'

How long a higher limit waits before it takes effect, as it should read.

currencystring = 'AUD'

The currency of the limits, written the Australian way.

classNamestring

Added to the card. It’s 360px wide at most, and narrows with the space it’s in.

Notes

• The bar is ink, and turns orange in 300ms only once 80% of the limit has gone: the casino pieces’ colour for something to mind, where pink would say a loss. While a lower limit is picked, a mark shows where it will sit on the bar as it is, and once it’s saved the bar eases to its new share over 700ms.
• The line under the field says when a change takes effect: a lower limit now, and a higher one after the cooling-off period, with a clock beside it. A raise is saved as waiting rather than applied.
• Saving takes a moment in the foil, then the button settles on Limit set with a green tick. Take a break sits quietly at the foot, and opens a choice of 24 hours, a week or a month, with when it would end and that it can’t be ended early, before it starts.
• Enter in the field saves, and focus moves to the card once it has. It sends select for a period, a preset or a break’s length, key and erase as an amount is typed, open and close for the break, success once a limit is set or a break has started, and error if either fails. On a card narrower than about 300px, the period switch goes below the title.
• Saving and starting a break are announced. With reduced motion, the bar and the mark move at once, and the words change in place.