79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { Modal } from 'web/components/layout/modal'
|
|
import { Col } from 'web/components/layout/col'
|
|
import {
|
|
BETTING_STREAK_BONUS_AMOUNT,
|
|
BETTING_STREAK_BONUS_MAX,
|
|
BETTING_STREAK_RESET_HOUR,
|
|
} from 'common/economy'
|
|
import { formatMoney } from 'common/util/format'
|
|
import { User } from 'common/user'
|
|
import dayjs from 'dayjs'
|
|
import clsx from 'clsx'
|
|
|
|
export function BettingStreakModal(props: {
|
|
isOpen: boolean
|
|
setOpen: (open: boolean) => void
|
|
currentUser?: User | null
|
|
}) {
|
|
const { isOpen, setOpen, currentUser } = props
|
|
const missingStreak = currentUser && !hasCompletedStreakToday(currentUser)
|
|
|
|
return (
|
|
<Modal open={isOpen} setOpen={setOpen}>
|
|
<Col className="items-center gap-4 rounded-md bg-white px-8 py-6">
|
|
<span
|
|
className={clsx(
|
|
'text-8xl',
|
|
missingStreak ? 'grayscale' : 'grayscale-0'
|
|
)}
|
|
>
|
|
🔥
|
|
</span>
|
|
{missingStreak && (
|
|
<Col className={' gap-2 text-center'}>
|
|
<span className={'font-bold'}>
|
|
You haven't predicted yet today!
|
|
</span>
|
|
<span className={'ml-2'}>
|
|
If the fire icon is gray, this means you haven't predicted yet
|
|
today to get your streak bonus. Get out there and make a
|
|
prediction!
|
|
</span>
|
|
</Col>
|
|
)}
|
|
<span className="text-xl">Daily prediction streaks</span>
|
|
<Col className={'gap-2'}>
|
|
<span className={'text-indigo-700'}>• What are they?</span>
|
|
<span className={'ml-2'}>
|
|
You get {formatMoney(BETTING_STREAK_BONUS_AMOUNT)} more for each day
|
|
of consecutive predicting up to{' '}
|
|
{formatMoney(BETTING_STREAK_BONUS_MAX)}. The more days you predict
|
|
in a row, the more you earn!
|
|
</span>
|
|
<span className={'text-indigo-700'}>
|
|
• Where can I check my streak?
|
|
</span>
|
|
<span className={'ml-2'}>
|
|
You can see your current streak on the top right of your profile
|
|
page.
|
|
</span>
|
|
</Col>
|
|
</Col>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export function hasCompletedStreakToday(user: User) {
|
|
const now = dayjs().utc()
|
|
const utcTodayAtResetHour = now
|
|
.hour(BETTING_STREAK_RESET_HOUR)
|
|
.minute(0)
|
|
.second(0)
|
|
const utcYesterdayAtResetHour = utcTodayAtResetHour.subtract(1, 'day')
|
|
let resetTime = utcTodayAtResetHour.valueOf()
|
|
if (now.isBefore(utcTodayAtResetHour)) {
|
|
resetTime = utcYesterdayAtResetHour.valueOf()
|
|
}
|
|
return (user?.lastBetTime ?? 0) > resetTime
|
|
}
|