@opexa/portal-components 0.0.27 → 0.0.29

package/dist/components/JackpotCounter/JackpotCounterItem.jsx

@@ -0,0 +1,317 @@
+'use client';
+import { Progress } from '@ark-ui/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocaleInfo } from '../../client/hooks/index.js';
+import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
+import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, } from '../../icons/index.js';
+import { StarIcon } from '../../icons/StarIcon';
+import closeChest from '../../images/close-chest.png';
+import firstPlace from '../../images/first-place.png';
+import leaderboard from '../../images/leaderboard.png';
+import openChest from '../../images/open-chest.png';
+import { formatNumber } from '../../utils/index.js';
+import styles from './JackpotCounterItem.module.css';
+export function JackpotCounterItem({ jackpot, className, viewAllUrl, }) {
+    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
+        first: 30,
+        filter: {
+            jackpot: {
+                equal: jackpot.id,
+            },
+        },
+        sort: {
+            cursor: 'AMOUNT',
+            order: 'DESC',
+        },
+    });
+    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    const topJackpotPayout = jackpotPayouts[0] ?? [];
+    const localeInfo = useLocaleInfo();
+    const isPayingOut = jackpot.drawing;
+    const jackpotAmount = isPayingOut
+        ? jackpot.maximumJackpotPoolLimit
+        : jackpot.pool;
+    const Arrow = useCallback(({ index }) => {
+        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
+        return (<Icon className={twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
+                ? styles['animate-wave-color-error']
+                : styles['animate-wave-color-success'])} style={{
+                animationDelay: isPayingOut
+                    ? `${(40 - index - 1) * 0.1}s`
+                    : `${index * 0.1}s`,
+            }}/>);
+    }, [isPayingOut]);
+    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (<Arrow key={i} isFirst={i === 0} index={i}/>)), [Arrow]);
+    return (<div className={twMerge('bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-4 lg:p-5', className)}>
+      <div className="z-1 relative flex flex-1 flex-col">
+        <div className="flex h-full flex-col justify-between">
+          <div className="flex w-full justify-between">
+            <div className="flex w-full flex-col">
+              <div className="relative flex w-full justify-between">
+                <div>
+                  {/* Badge */}
+
+                  {isPayingOut ? (<div className="border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
+                      <span className="full bg-utility-success-500 size-1.5 animate-pulse rounded"/>
+                      Paying Out
+                    </div>) : (<div className="border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
+                      <ArrowNarrowUpRightIcon className="text-utility-blue-500 size-3.5"/>
+                      Accumulating
+                    </div>)}
+
+                  <div className="text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl">
+                    {jackpot.name}
+                  </div>
+
+                  <div className="bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl">
+                    {formatNumber(jackpotAmount, {
+            currency: localeInfo.currency.code,
+            minDecimalPlaces: 2,
+            maxDecimalPlaces: 2,
+        })}
+                  </div>
+                </div>
+                <div className="z-1 bottom-[-60] right-0 lg:absolute">
+                  <Image width={150} height={150} src={isPayingOut ? openChest : closeChest} alt="closeChest" quality={100} className="h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2"/>
+                </div>
+              </div>
+
+              {/* Top Payout */}
+
+              {topJackpotPayout.amount ? (<div>
+                  <div className="bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex">
+                    <div className="border-yellow-400 relative h-18 w-18 rounded-full border">
+                      <div className="bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold">
+                        1st
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-1 text-left">
+                      <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
+                        <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
+                        Top Payout
+                      </div>
+
+                      <div className="font-semibold">
+                        {maskName(topJackpotPayout.member.name)}
+                      </div>
+                      <div className="text-brand-400 text-2xl">
+                        {formatNumber(topJackpotPayout.amount, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}
+                      </div>
+                    </div>
+                  </div>
+                </div>) : (<div className="bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex">
+                  <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full h-auto w-[66px] mix-blend-luminosity"/>
+
+                  <div className="flex flex-col gap-1 text-left">
+                    <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
+                      <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
+                      Top Payout
+                    </div>
+
+                    <div className="font-semibold">No winners yet</div>
+                    <div className="text-text-secondary-700 text-xs">
+                      You could be the first to win the tournament!
+                    </div>
+                  </div>
+                </div>)}
+            </div>
+          </div>
+        </div>
+
+        {/* Progress Bar */}
+
+        <div className="mt-3 lg:mt-4">
+          <div className="mb-1 flex justify-between">
+            <div className="text-text-primary-900 text-xs font-semibold">
+              {formatNumber(0, {
+            currency: localeInfo.currency.code,
+            compact: true,
+        })}
+            </div>
+
+            <div className="relative flex items-center justify-end gap-1.5">
+              {isPayingOut ? (<div className="flex w-6 items-center">
+                  <div className={twMerge('absolute left-0', styles['animate-arrow-red-flash-1'])}>
+                    <ChevronLeftIcon className="size-4.5"/>
+                  </div>
+                  <div className={twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2'])}>
+                    <ChevronLeftIcon className="size-4.5"/>
+                  </div>
+                  <div className={twMerge('absolute left-3', styles['animate-arrow-red-flash-3'])}>
+                    <ChevronLeftIcon className="size-4.5"/>
+                  </div>
+                </div>) : (<div className="flex w-6 items-center">
+                  <div className={twMerge('absolute left-0', styles['animate-arrow-green-flash-1'])}>
+                    <ChevronRightIcon className="size-4.5"/>
+                  </div>
+                  <div className={twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2'])}>
+                    <ChevronRightIcon className="size-4.5"/>
+                  </div>
+                  <div className={twMerge('absolute left-3', styles['animate-arrow-green-flash-3'])}>
+                    <ChevronRightIcon className="size-4.5"/>
+                  </div>
+                </div>)}
+
+              <div className="text-text-primary-900 text-xs font-semibold">
+                {formatNumber(jackpot?.maximumJackpotPoolLimit, {
+            currency: localeInfo.currency.code,
+            compact: true,
+        })}
+              </div>
+            </div>
+          </div>
+
+          <Progress.Root className="bg-bg-primary h-2 w-full rounded-full lg:h-4" max={100} value={calculatePercentage(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit))}>
+            <Progress.Track className="bg-bg-primary h-full overflow-hidden rounded-full">
+              <Progress.Range className="bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5">
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5" aria-hidden="true">
+                  {arrowImages}
+                </div>
+              </Progress.Range>
+            </Progress.Track>
+          </Progress.Root>
+
+          <div className="mt-1 block text-start text-2xs lg:hidden">
+            {isPayingOut
+            ? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
+                currency: localeInfo.currency.code,
+                compact: true,
+            })} Play now for your chance to win big! 🔥`
+            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0)}
+          </div>
+        </div>
+      </div>
+
+      {/* Leaderboard */}
+
+      <div className="z-1 hidden flex-1 space-y-4 lg:block">
+        <div className="flex items-center justify-between">
+          <div className="flex gap-2">
+            <Image width={24} height={24} src={leaderboard} quality={100} alt="leaderboardIcon" className="size-full h-auto w-6"/>
+            <div className="text-text-primary-900 text-lg font-semibold">
+              {jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!'}
+            </div>
+          </div>
+          <Link className="text-button-tertiary-fg flex text-sm font-semibold" href={viewAllUrl ?? '/jackpots'}>
+            See details
+            <ChevronRightIcon className="size-5"/>
+          </Link>
+        </div>
+
+        <div className={twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea'])}>
+          <div className="border-gray-200 overflow-hidden rounded-xl">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium">
+                  <th className="w-[52px]">#</th>
+                  <th>Player</th>
+                  <th>Multiplier</th>
+                  <th>Prize</th>
+                </tr>
+              </thead>
+              <tbody>
+                {jackpotPayouts.length ? (<>
+                    {jackpotPayouts.map((jackpotPayout, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-sm">
+                        <td className="border-border-secondary h-12 w-[52px] border-t-2">
+                          {i + 1 < 6 ? (<div className="relative">
+                              <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
+                              <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
+                                {i + 1}
+                              </span>
+                            </div>) : (i + 1)}
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          {maskName(jackpotPayout.member.name)}
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          {jackpotPayout.multiplier}x
+                        </td>
+                        <td className="border-border-secondary text-brand-400 h-12 border-t-2">
+                          {formatNumber(jackpotPayout.amount, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                    maxDecimalPlaces: 2,
+                })}
+                        </td>
+                      </tr>))}
+                  </>) : (<>
+                    {Array.from({ length: 10 }).map((_, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-sm">
+                        <td className="border-border-secondary h-12 w-[52px] border-t-2">
+                          {i + 1 < 6 ? (<div className="relative">
+                              <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
+                              <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
+                                {i + 1}
+                              </span>
+                            </div>) : (i + 1)}
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          -
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          -
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          -
+                        </td>
+                      </tr>))}
+                  </>)}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      {/* Paying Out Animation */}
+
+      {isPayingOut && (<div className={twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:25%] lg:[--light-rays-top:150px]')}></div>)}
+    </div>);
+}
+export function maskName(name) {
+    if (name.length <= 7) {
+        return '*'.repeat(name.length);
+    }
+    const visiblePart = name.slice(0, 3);
+    const maskedPart = '*'.repeat(7);
+    return visiblePart + maskedPart;
+}
+const calculatePercentage = (part, total) => {
+    if (total === 0)
+        return 0;
+    return (part / total) * 100;
+};
+const getAccumulatingJackpotDescription = (part, total) => {
+    const percentage = total === 0 ? 0 : (part / total) * 100;
+    return percentage <= 90
+        ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
+        : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
+};
+const starTierStyles = [
+    {
+        starColor: 'text-yellow-400',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-utility-gray-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-yellow-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+];

package/dist/components/JackpotCounter/JackpotCounterItem.module.css

@@ -0,0 +1,184 @@
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}

package/dist/components/JackpotCounter/index.js

@@ -0,0 +1 @@
+export * from './JackpotCounter';

package/dist/components/Jackpots/JackpotGameProviders.d.ts

@@ -1,4 +1,4 @@
-import { GameProviderData } from '../../types';
+import type { GameProviderData } from '../../types';
 export interface JackpotGameProvidersProps {
     gameProviders: GameProviderData[];
 }

package/dist/components/Jackpots/JackpotGameProviders.jsx

@@ -0,0 +1,59 @@
+'use client';
+import useEmblaCarousel from 'embla-carousel-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+export function JackpotGameProviders({ gameProviders, }) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    const scrollPrev = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollPrev();
+    }, [emblaApi]);
+    const scrollNext = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollNext();
+    }, [emblaApi]);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback(() => {
+        if (!emblaApi)
+            return;
+        setCanScrollPrev(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect]);
+    return (<div className="p-4 pb-8">
+      <div className="flex items-center justify-between">
+        <div className="text-text-primary-900 text-lg font-semibold">
+          Jackpot Game Providers
+        </div>
+        <div className="hidden lg:flex">
+          <Button disabled={!canScrollPrev} onClick={scrollPrev} variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" aria-label="Previous">
+            <ArrowLeftIcon className="size-5"/>
+          </Button>
+          <Button disabled={!canScrollNext} onClick={scrollNext} variant="outline" colorScheme="gray" className="rounded-l-none" aria-label="Next">
+            <span className="sr-only">Next</span>
+            <ArrowRightIcon className="size-5"/>
+          </Button>
+        </div>
+      </div>
+      <div className="relative mt-3 overflow-hidden" ref={emblaRef}>
+        <div className="flex gap-3.5">
+          {gameProviders.map((provider, i) => (<Link key={i} href={`/${provider.slug}`} className="bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md">
+              <Image src={provider.logo} alt="provider" className="size-full"/>
+            </Link>))}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/Jackpots/JackpotItemDesktop.d.ts

@@ -1,5 +1,5 @@
-import { Jackpot } from '@opexa/portal-sdk-core';
-import { GameProviderData } from '../../types';
+import type { Jackpot } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
 export interface JackpotItemProps {
     jackpot: Jackpot;
     /** @default "/jackpots" */